@media (max-width: 320px) {
h1 {
font-size : 24px;
}
}
@media (max-width: 1200px) and (min-width: 321px) {
h1 {
font-size : calc(1.5rem + 6 * (100vw - 320px) / 880);
}
}
@media (min-width: 1201px) {
h1 {
font-size : 30px;
}
}
@media screen and (max-width: 480px) {
#main-nav a {
font-size : 90%;
padding : 10px 8px;
}
}
@media screen and (max-width: 650px) {
#header {
height : auto;
}
#searchform {
position : absolute;
top : 5px;
right : 0;
}
#main-nav {
position : static;
}
#site-logo {
margin : 15px 100px 5px 0;
position : static;
}
#site-description {
margin : 0 0 15px;
position : static;
}
#content {
width : auto;
float : none;
margin : 20px 0;
}
#sidebar {
width : 100%;
float : none;
margin : 0;
}
}
@media screen and (max-width: 980px) {
#pagewrap {
width : 95%;
}
#content {
width : 60%;
padding : 3% 4%;
}
#sidebar {
width : 30%;
}
#sidebar .widget {
padding : 8% 7%;
margin-bottom : 10px;
}
}
#pagewrap {
width : 980px;
margin : 0 auto;
}
#header {
height : 160px;
}
#content {
width : 600px;
float : left;
}
#sidebar {
width : 280px;
float : right;
}
#footer {
clear : both;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display : block;
}
video embed, .video object, .video iframe {
width : 100%;
height : auto;
}
#cssmenu ul, #cssmenu li, #cssmenu span, #cssmenu a {
margin : 0;
padding : 0;
position : relative;
}
#cssmenu {
line-height : 1;
border-radius : 5px 5px 0 0;
background : #141414;
text-align : center;
background : linear-gradient(to bottom, #333333 0%, #141414 100%);
border-bottom : 0 solid #0fa1e0;
width : auto;
font-size : 50px;
}
#cssmenu:after, #cssmenu ul:after {
content : '';
display : block;
clear : both;
}
#cssmenu a {
background : #141414;
background : linear-gradient(to bottom, #333333 0%, #141414 100%);
color : #ffffff;
display : block;
font-family : Helvetica, Arial, Verdana, sans-serif;
padding : 19px 20px;
text-decoration : none;
}
#cssmenu ul {
list-style : none;
}
#cssmenu > ul > li {
display : inline-block;
margin : 0;
}
#cssmenu.align-center {
text-align : center;
}
#cssmenu.align-center > ul > li {
float : none;
}
#cssmenu.align-center ul ul {
text-align : left;
}
#cssmenu.align-right > ul {
float : right;
}
#cssmenu.align-right ul ul {
text-align : right;
}
#cssmenu > ul > li > a {
color : #f4f076;
font-size : 14px;
}
#cssmenu > ul > li:hover:after {
content : '';
display : block;
width : 0;
height : 0;
position : absolute;
left : 50%;
bottom : 0;
border-left : 12px solid transparent;
border-right : 12px solid transparent;
border-bottom : 12px solid #0fa1e0;
margin-left : -12px;
}
#cssmenu > ul > li:first-child > a {
border-radius : 5px 0 0 0;
}
#cssmenu.align-right > ul > li:first-child > a, #cssmenu.align-center > ul > li:first-child > a {
border-radius : 0;
}
#cssmenu.align-right > ul > li:last-child > a {
border-radius : 0 5px 0 0;
}
#cssmenu > ul > li.active > a, #cssmenu > ul > li:hover > a {
color : #ffffff;
box-shadow : 0 0 3px #f4f076 inset;
background : #7a361f;
background : linear-gradient(to bottom, #262626 0%, #7a361f 100%);
}
#cssmenu .has-sub {
z-index : 1;
}
#cssmenu .has-sub:hover > ul {
display : block;
}
#cssmenu .has-sub ul {
display : none;
position : absolute;
width : 200px;
top : 100%;
left : 0;
}
#cssmenu.align-right .has-sub ul {
left : auto;
right : 0;
}
#cssmenu .has-sub ul li a {
background : #0fa1e0;
border-bottom : 1px dotted #31b7f1;
font-size : 14px;
display : block;
line-height : 120%;
padding : 12px;
color : #ffffff;
}
#cssmenu .has-sub ul li:hover a {
background : #0c7fb0;
}
#cssmenu ul ul li:hover > a {
color : #ffffff;
}
#cssmenu .has-sub .has-sub:hover > ul {
display : block;
}
#cssmenu .has-sub .has-sub ul {
display : none;
position : absolute;
left : 100%;
top : 0;
}
#cssmenu.align-right .has-sub .has-sub ul, #cssmenu.align-right ul ul ul {
left : auto;
right : 100%;
}
#cssmenu .has-sub .has-sub ul li a {
background : #0c7fb0;
border-bottom : 1px dotted #31b7f1;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background : #0a6d98;
}
#cssmenu ul ul li.last > a, #cssmenu ul ul li:last-child > a, #cssmenu ul ul ul li.last > a, #cssmenu ul ul ul li:last-child > a, #cssmenu .has-sub ul li:last-child > a, #cssmenu .has-sub ul li.last > a {
border-bottom : 0;
}
.side-label {
font-weight : normal;
color : #CACACA;
padding : 2px;
}
.gallery {
padding : 16px 0 8px 0;
}
.gallery img {
border : #8F99A9 solid 1px;
}
.gallery:hover img {
border : #4E79F3 solid 1px;
}
img.activegallery {
border : #8F99A9 solid 1px;
}
#lightbox {
position : absolute;
left : 0;
width : 100%;
z-index : 100;
text-align : center;
line-height : 0;
}
#lightbox a img {
border : none;
}
#outerImageContainer {
position : relative;
background-color : #fff;
width : 250px;
height : 250px;
margin : 0 auto;
}
#imageContainer {
padding : 12px;
}
#loading {
position : absolute;
top : 40%;
left : 0%;
height : 25%;
width : 100%;
text-align : center;
line-height : 0;
}
#hoverNav {
position : absolute;
top : 0;
left : 0;
height : 100%;
width : 100%;
z-index : 10;
}
#imageContainer > #hoverNav {
left : 0;
}
#hoverNav a {
outline : none;
}
#prevLink, #nextLink {
width : 49%;
height : 100%;
background : url(../images/blank.gif) no-repeat transparent;
display : block;
}
#prevLink {
left : 0;
float : left;
}
#nextLink {
top : 0;
float : right;
}
#imageDataContainer {
font : 14px Verdana, Helvetica, sans-serif;
background-color : #fff;
margin : 0 auto;
line-height : 1.4em;
overflow : auto;
width : 100%;
}
#imageData {
padding : 0 12px;
color : #666;
}
#imageData #imageDetails {
width : 70%;
float : left;
text-align : left;
}
#imageData #caption {
font-weight : bold;
}
#imageData #numberDisplay {
display : block;
clear : left;
padding-bottom : 1.0em;
}
#imageData #bottomNavClose {
width : 66px;
float : right;
padding-bottom : 0.7em;
}
#overlay {
position : absolute;
top : 0;
left : 0;
z-index : 90;
width : 100%;
height : 500px;
background-color : #000;
}
#lightbox {
position : absolute;
left : 0;
width : 100%;
z-index : 100;
text-align : center;
line-height : 0;
}
#lightbox a img {
border : none;
}
#outerImageContainer {
position : relative;
background-color : #fff;
width : 250px;
height : 250px;
margin : 0 auto;
}
#imageContainer {
padding : 12px;
}
#loading {
position : absolute;
top : 40%;
left : 0%;
height : 25%;
width : 100%;
text-align : center;
line-height : 0;
}
#hoverNav {
position : absolute;
top : 0;
left : 0;
height : 100%;
width : 100%;
z-index : 10;
}
#imageContainer > #hoverNav {
left : 0;
}
#hoverNav a {
outline : none;
}
#prevLink, #nextLink {
width : 49%;
height : 100%;
background : url(../images/blank.gif) no-repeat transparent;
display : block;
}
#prevLink {
left : 0;
float : left;
}
#nextLink {
top : 0;
float : right;
}
#imageDataContainer {
font : 14px Verdana, Helvetica, sans-serif;
background-color : #fff;
margin : 0 auto;
line-height : 1.4em;
overflow : auto;
width : 100%;
}
#imageData {
padding : 0 12px;
color : #666;
}
#imageData #imageDetails {
width : 70%;
float : left;
text-align : left;
}
#imageData #caption {
font-weight : bold;
}
#imageData #numberDisplay {
display : block;
clear : left;
padding-bottom : 1.0em;
}
#imageData #bottomNavClose {
width : 66px;
float : right;
padding-bottom : 0.7em;
}
#overlay {
position : absolute;
top : 0;
left : 0;
z-index : 90;
width : 100%;
height : 500px;
background-color : #000;
}
#lightbox {
position : absolute;
left : 0;
width : 100%;
z-index : 100;
text-align : center;
line-height : 0;
}
#lightbox a img {
border : none;
}
#outerImageContainer {
position : relative;
background-color : #fff;
width : 250px;
height : 250px;
margin : 0 auto;
}
#imageContainer {
padding : 12px;
}
#loading {
position : absolute;
top : 40%;
left : 0%;
height : 25%;
width : 100%;
text-align : center;
line-height : 0;
}
#hoverNav {
position : absolute;
top : 0;
left : 0;
height : 100%;
width : 100%;
z-index : 10;
}
#imageContainer > #hoverNav {
left : 0;
}
#hoverNav a {
outline : none;
}
#prevLink, #nextLink {
width : 49%;
height : 100%;
background : url(../images/blank.gif) no-repeat transparent;
display : block;
}
#prevLink {
left : 0;
float : left;
}
#nextLink {
top : 0;
float : right;
}
#imageDataContainer {
font : 14px Verdana, Helvetica, sans-serif;
background-color : #fff;
margin : 0 auto;
line-height : 1.4em;
overflow : auto;
width : 100%;
}
#imageData {
padding : 0 12px;
color : #666;
}
#imageData #imageDetails {
width : 70%;
float : left;
text-align : left;
}
#imageData #caption {
font-weight : bold;
}
#imageData #numberDisplay {
display : block;
clear : left;
padding-bottom : 1.0em;
}
#imageData #bottomNavClose {
width : 66px;
float : right;
padding-bottom : 0.7em;
}
#overlay {
position : absolute;
top : 0;
left : 0;
z-index : 90;
width : 100%;
height : 500px;
background-color : #000;
}
#lightbox {
position : absolute;
left : 0;
width : 100%;
z-index : 100;
text-align : center;
line-height : 0;
}
#lightbox a img {
border : none;
}
#outerImageContainer {
position : relative;
background-color : #fff;
width : 250px;
height : 250px;
margin : 0 auto;
}
#imageContainer {
padding : 12px;
}
#loading {
position : absolute;
top : 40%;
left : 0%;
height : 25%;
width : 100%;
text-align : center;
line-height : 0;
}
#hoverNav {
position : absolute;
top : 0;
left : 0;
height : 100%;
width : 100%;
z-index : 10;
}
#imageContainer > #hoverNav {
left : 0;
}
#hoverNav a {
outline : none;
}
#prevLink, #nextLink {
width : 49%;
height : 100%;
background : url(../images/blank.gif) no-repeat transparent;
display : block;
}
#prevLink {
left : 0;
float : left;
}
#nextLink {
top : 0;
float : right;
}
#imageDataContainer {
font : 14px Verdana, Helvetica, sans-serif;
background-color : #fff;
margin : 0 auto;
line-height : 1.4em;
overflow : auto;
width : 100%;
}
#imageData {
padding : 0 12px;
color : #666;
}
#imageData #imageDetails {
width : 70%;
float : left;
text-align : left;
}
#imageData #caption {
font-weight : bold;
}
#imageData #numberDisplay {
display : block;
clear : left;
padding-bottom : 1.0em;
}
#imageData #bottomNavClose {
width : 66px;
float : right;
padding-bottom : 0.7em;
}
#overlay {
position : absolute;
top : 0;
left : 0;
z-index : 90;
width : 100%;
height : 500px;
background-color : #000;
}
#lightbox {
position : absolute;
left : 0;
width : 100%;
z-index : 100;
text-align : center;
line-height : 0;
}
#lightbox a img {
border : none;
}
#outerImageContainer {
position : relative;
background-color : #fff;
width : 250px;
height : 250px;
margin : 0 auto;
}
#imageContainer {
padding : 12px;
}
#loading {
position : absolute;
top : 40%;
left : 0%;
height : 25%;
width : 100%;
text-align : center;
line-height : 0;
}
#hoverNav {
position : absolute;
top : 0;
left : 0;
height : 100%;
width : 100%;
z-index : 10;
}
#imageContainer > #hoverNav {
left : 0;
}
#hoverNav a {
outline : none;
}
#prevLink, #nextLink {
width : 49%;
height : 100%;
background : url(../images/blank.gif) no-repeat transparent;
display : block;
}
#prevLink {
left : 0;
float : left;
}
#nextLink {
top : 0;
float : right;
}
#imageDataContainer {
font : 14px Verdana, Helvetica, sans-serif;
background-color : #fff;
margin : 0 auto;
line-height : 1.4em;
overflow : auto;
width : 100%;
}
#imageData {
padding : 0 12px;
color : #666;
}
#imageData #imageDetails {
width : 70%;
float : left;
text-align : left;
}
#imageData #caption {
font-weight : bold;
}
#imageData #numberDisplay {
display : block;
clear : left;
padding-bottom : 1.0em;
}
#imageData #bottomNavClose {
width : 66px;
float : right;
padding-bottom : 0.7em;
}
#overlay {
position : absolute;
top : 0;
left : 0;
z-index : 90;
width : 100%;
height : 500px;
background-color : #000;
}
.leftimg {
float : left;
margin : 7px 7px 7px 0;
}
.rightimg {
float : right;
margin : 7px 0 7px 7px;
}