/* ---------------------------------------------------------------------------------------------------------- 01 Sensible defaults ---------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ @import "css/reset.css"; div, article, section, header, footer, nav, li { position: relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ } .group:after { display: block; height: 0; clear: both; content: "."; visibility: hidden; /* For clearing */ } body { background: #fff; /* Don't forget to style your body to avoid user overrides */ } ::-moz-selection { background:#F60; color:#333; } * { margin: 0; padding: 0; border: none; outline: none; } a:focus { outline: none; } ::selection { background: #ff0; color: #333; } body { background-color: #dedede; font-family: 'Arvo:400'; } #header { width: 100%; position:relative; z-index: 9999; } .header-fixed-space {height:49px; position:relative; width:100%;} #container { width: 1050px; margin-left: auto; margin-right: auto; } #logo { height: 108px; width: 202px; background-repeat: no-repeat; background-position: center center; display: block; text-indent: -9999px; margin-left:auto; margin-right:auto; margin-top:16px; } .logo-container {position:relative; z-index:9999; background-image: url(images/logo-container.jpg); height: 139px; width: 244px; float:left; box-shadow: 0px 0px 15px #121212;} #break { width: 100%; height: 2px; background-image: url(images/break.png); background-position: center center; background-repeat: no-repeat; clear: both; margin-top: 10px; margin-bottom: 10px; } .featured-container { width: 1050px; height: 430px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #8c8c8c; border-right-color: #8c8c8c; border-bottom-color: #efefef; border-left-color: #8c8c8c; background-color: #d8d8d8; margin-right: auto; margin-left: auto; } .featured-left { background-image: url(images/bluestripe.png); background-repeat: repeat; background-position: center top; border-right-width: 1px; border-right-style: solid; border-right-color: #efefef; width: 524px; height: 100%; float: left; text-align: center; } .btn-portfolio { background-color: #f97220; color: #FFF; font-size: 28px; line-height: 28px; font-family: 'Arvo:700'; text-decoration: none; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; position: relative; top: 192px; text-shadow: #333 0px -1px 0px; } .btn-blue { background-color: #f97220; border-radius: 5px 5px 5px 5px; color: #FFFFFF; height: 35px; line-height: 35px; padding-left: 10px; padding-right: 10px; text-decoration: none; text-transform: uppercase; font-size: 14px; text-shadow: 0 -1px 0 #333333; } .btn-white { color: #FFF; font-size: 28px; line-height: 28px; font-family: 'Arvo:700'; text-decoration: none; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; position: relative; border: 4px solid #fff; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } a.btn-white:hover {color: #363636; border: 4px solid #363636; } .btn-white-small { color: #FFF; font-size: 12px; line-height: 12px; font-family: 'Arvo:700'; text-decoration: none; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; position: relative; border: 2px solid #fff; width: 110px; float: right; text-align: center; } .btn-1sheet { background-color: #505050; color: #FFF; font-size: 28px; line-height: 28px; font-family: 'Arvo:700'; text-decoration: none; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; position: relative; top: 192px; text-shadow: #333 0px -1px 0px; } .featured-right { background-image: url(images/graystripe.png); background-repeat: repeat; background-position: center top; border-left-width: 1px; border-left-style: solid; border-left-color: #8c8c8c; width: 524px; height: 100%; float: right; text-align: center; } .location-box { width: 100%; height: 375px; background-color: #ccc; border: solid #fff 1px; box-shadow: 0px 0px 15px #999; } .box { background: #ffffff; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlMGUwZTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #ffffff 0%, #e0e0e0 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e0e0e0)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%, #e0e0e0 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%, #e0e0e0 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%, #e0e0e0 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e0e0e0', GradientType=0 ); /* IE6-8 */ width: 100%; height: auto; padding-top: 10px; padding-bottom: 10px; border: solid #fff 1px; box-shadow: 0px 0px 15px #999; border-radius: 10px; margin-bottom: 40px; } .social-btn-hold { text-align: center; background-color: #D2D2D2; height: 100px; width: 100%; border-bottom: 5px solid #f97220; } .social-btn-hold a#social-btn {margin-top:25px;} a#social-btn { background-color:#F96D20; background-image: url(images/social.png); background-repeat: no-repeat; text-indent: -9999px; display: inline-block; height: 39px; width: 39px; margin-left:5px;} .social-btn-fb { background-position: -2px 0px; } .social-btn-tw { background-position: -39px 0px; } .social-btn-yt { background-position: -207px 3px; } .social-btn-gp { background-position: -246px 3px; } .social-btn-in { background-position: -171px 4px; } .social-btn-rs { background-position: -76px 0px; } .social-btn-vi { background-position: -139px 4px; } .social-btn-fb:hover { background-position: -2px -40px; } .social-btn-tw:hover { background-position: -39px -40px; } .social-btn-yt:hover { background-position: -207px -37px; } .social-btn-gp:hover { background-position: -246px -37px; } .social-btn-in:hover { background-position: -171px -36px; } .social-btn-rs:hover { background-position: -76px -40px; } .social-btn-vi:hover { background-position: -139px -36px; } h3 { background-color: #DEDEDE; color: #212121; display: inline-block; font-family: 'Arvo:700'; font-size: 18px; margin-bottom: 5px; padding-left: 5px; padding-right: 5px; position: relative; text-decoration: none; text-transform: uppercase;} .page-container p {margin-bottom:18px;} .page-container a {color:#F96D20; text-decoration:none; } #content {padding-bottom:25px;} #footer-bottom { background-color: #121212; padding-bottom: 50px; font-family: "Arvo:700";} #footer-top {border-top:5px solid #F97220; background-color: #212121; padding-bottom: 50px; min-height: 100px; } .banner { width: 100%; height: 450px; margin-top: 10px; } .banner-image { width: 100%; height: 512px; position: absolute; z-index: 1px; } img.banner-image { width: 100%; height: auto; position: absolute; z-index: 1px; } .bjqs-next a {top:0px; position: absolute; right: 0; z-index: 9998; background-image: url(images/arrow.png); height: 57px; width: 59px; text-indent: -9999px; background-position: right bottom; } .bjqs-next a:hover { background-position: left bottom; } .bjqs-prev a:hover { background-position: right top; } a#banner-link { position: absolute; z-index: 9997; width: 915px; height: 450px; text-indent: -9999px; } .bjqs-prev a { position: absolute; left: 0; z-index: 9998; top: 455px !important; background-image: url(images/arrow.png); height: 57px; width: 59px; text-indent: -9999px; background-position: left top; } #banner-slide {float:left; border:1px solid #555; width: 739px; height: 512px; overflow: hidden; background-color: #D2D2D2; position:relative; top:-10px;} .bjqs-controls { max-width: 739px; position: relative; top: -522px; margin-left: auto; margin-right: auto; } ul.bjqs { top: -10px; position: relative; } li.bjqs-slide { min-height: 450px; } .footer-section { width: 30%; float: left; padding-top: 30px; padding-bottom: 5px; padding-left: 1%; padding-right: 1%; } .location-marker { background-image: url(images/marker.png); height: 38px; width: 23px; } .contact-bubble { background-image: url(images/marker.png); height: 38px; width: 23px; } #shadow-left { background-image: url(images/shadow.png); background-repeat: repeat-y; background-position: right center; height: 450px; width: 425px; position: absolute; z-index: 9996; left: 0; } #shadow-right { background-image: url(images/shadow.png); background-repeat: repeat-y; background-position: left center; height: 450px; width: 425px; position: absolute; z-index: 9996; right: 0; } .clearfix { clear: both; } #start-project-banner { width: 96%; padding: 2%; margin-top: 10px; background-image: url(images/graystripe.png); border: 3px solid #CCC; } #footer_emblem { width: 102px; height: 55px; margin-left: auto; margin-right: auto; display: block; cursor:pointer;} #gform_1 { padding-bottom: 50px; padding-top: 5px; } #gform_1 input { height: 35px; border: 1px #666 solid; background-color: #E5E5E5; font-size: 22px; width: 99%; } #gform_1 label { color: #CCC; font-size: 16px; font-family: "Arvo:700"; text-transform:uppercase;} #gform_1 label.gfield_label { color:#fff ; font-size: 22px; } #gform_1 .ginput_container {background-color:#333; padding: 10px; width: auto; border: 1px solid #333; background-image: url("images/blkstripe.png"); } #gform_1 .textarea { border: 1px #666 solid; background-color: #E5E5E5; font-size: 22px; width: 99%; } #gform_1 #gform_submit_button_1.button { font-family: 'Arvo:700'; font-size: 18px; color: #212121; text-align: center; line-height: 18px; padding-top: 5px; padding-bottom: 5px; text-transform: uppercase; background-color:#CCC; display: inline-block; padding-left:5px; padding-right:5px; text-decoration:none; margin-bottom:5px; width:100px; } #gform_1 #gform_submit_button_1.button:hover {background-color:#F97220;} #gform_1 .gform_footer { text-align: right; } #gform_2 { padding-bottom: 50px; padding-top: 5px; } #gform_2 input { height: 35px; border: 1px #666 solid; background-color: #E5E5E5; font-size: 22px; width: 99%; } #gform_2 label { color: #CCC; font-size: 16px; font-family: "Arvo:700"; text-transform:uppercase;} #gform_2 label.gfield_label { color:#fff ; font-size: 22px; } #gform_2 .ginput_container {background-color:#333; padding: 10px; width: auto; border: 1px solid #333; background-image: url("images/blkstripe.png"); } #gform_2 .textarea { border: 1px #666 solid; background-color: #E5E5E5; font-size: 22px; width: 99%; } #gform_2 #gform_submit_button_2.button { font-family: 'Arvo:700'; font-size: 18px; color: #212121; text-align: center; line-height: 18px; padding-top: 5px; padding-bottom: 5px; text-transform: uppercase; background-color:#CCC; display: inline-block; padding-left:5px; padding-right:5px; text-decoration:none; margin-bottom:5px; width:100px; } #gform_2 #gform_submit_button_2.button:hover {background-color:#F97220;} #gform_2 .gform_footer { text-align: right; } #page_featured { text-transform: uppercase; width: 100%; padding-top: 30px; padding-bottom: 30px; color: #E8E8E8; font-family: 'Arvo:400'; font-size: 54px; overflow: hidden; margin-bottom: 15px; } .protection-outer { width: 30%; background-image: url(images/graystripe.png); background-repeat: repeat; min-height: 100px; display: inline-block; box-shadow: 0 0 15px #AAA; border: 1px #ccc solid; } .protection-inner { padding: 10px; background-color: #dedede; margin: 10px; border: 1px #CDCDCD solid; } .projectad-outer { background-image: url(images/graystripe.png); background-repeat: repeat; min-height: 100px; display: inline-block; box-shadow: 0 0 15px #AAA; border: 1px #ccc solid; width: 99%; margin-top: 25px; } .projectad-inner { padding: 10px; background-color: #dedede; margin: 10px; border: 1px #CDCDCD solid; } .featured-buttons {width:915px; position:relative; z-index:9997; top:-100px; text-align:center;} /*General Mosaic Styles*/ .mosaic-block { float: left; position: relative; overflow: hidden; width: 338px; height: 240px; margin: 5px; } .mosaic-backdrop { display: none; position: absolute; top: 0; height: 100%; width: 100%; background: #111; } .mosaic-overlay { display: none; z-index: 5; position: absolute; width: 97%; height: 97%; padding: 3%; background: #f97220; text-decoration: none; text-transform: uppercase; max-width: 318px; } .bar2 .mosaic-overlay { bottom: -185px; min-height: 140px; } .bar2 .mosaic-overlay:hover { } .portfolio-title { font-family: "Arvo:700"; font-size: 20px; color: #fff; max-height: 58px; } .portfolio-text { font-family: "Arvo:700"; font-size: 12px; color: #fff; min-height: 58px; display: none; } .protection-hollow {height:55px !important;} .mobile-div {display:none;} .page-container {min-height:250px;} article #post-container p {margin-top:10px; color:#fff; text-shadow:#000 0px 0px 10px; font-family: "Arvo:400"; font-size: 18px; line-height:22px;} a.btn-grey { font-family: 'Arvo:700'; font-size: 18px; color: #212121; text-align: center; line-height: 18px; padding-top: 5px; padding-bottom: 5px; text-transform: uppercase; background-color:#CCC; display: inline-block; padding-left:5px; padding-right:5px; text-decoration:none; margin-bottom:5px;} a.btn-grey:hover {background-color:#F96D20;} a.read-more { float:right; font-family: 'Arvo:700'; font-size: 18px; color: #212121; text-align: center; line-height: 18px; padding-top: 5px; padding-bottom: 5px; text-transform: uppercase; background-color:#F96D20; display: inline-block; padding-left:5px; padding-right:5px; text-decoration:none; position:absolute; bottom:0; right:0;} #content-left {max-width:700px; float:left; min-width:695px;} #content-right {width:350px; float:right;} #social-box {margin-bottom:10px; width:290px; max-width:300px; border-top:5px solid #F97220; background-color:#212121; padding:5px; float:right;} #about-box {margin-bottom:10px; width:290px; max-width:300px; border-top:5px solid #F97220; background-color:#212121; padding:5px; float:right;} .sidebar-header { position: relative; display: inline-block; color:#212121; background-color:#666; margin-bottom:5px; font-size:18px; padding-left:5px; padding-right:5px; text-transform:uppercase; text-decoration:none; font-family:'Arvo:700'; } #about-box p a img {float:left; margin-right:10px; margin-bottom:10px; border:1px solid #F97220;} .social-box-break {width:100%; margin-top:10px; margin-bottom:10px; height:1px; background-color:#333;} .social-box-platform {font-family:'Arvo:700'; display:inline-block; margin-right:10px; color:#666666; text-transform:uppercase; line-height:30px;} #homepage-video {background-color:transparent; width:100%; padding-top:20px; padding-bottom:20px; position:relative; top:-40px; z-index:0; background-image:url(images/bg-black2.png); border-top:1px solid #F97220; border-bottom:1px solid #F97220; min-height:1px;} .homepage-break{width:100%; height:1px; position:relative; z-index:0; height:1px; border-top:dashed 1px #5C5C5C; top:-40px; margin-bottom:2px; margin-top:2px;} .videowrapper { float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; border:solid 1px #222; } .videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ---------------------------------------------------------------------------------------------------------- 02 Typography ----------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ body, input, textarea { /* We strongly recommend you declare font-weight using numerical values, but check to see which weights you're exporting first */ } @font-face { font-family: 'Arvo:400'; font-style: normal; font-weight: 400; src: local('Arvo'), url(http://themes.googleusercontent.com/static/fonts/arvo/v5/WJ6D195CfbTRlIs49IbkFw.woff) format('woff'); } @font-face { font-family: 'Arvo:700'; font-style: normal; font-weight: 700; src: local('Arvo Bold'), local('Arvo-Bold'), url(http://themes.googleusercontent.com/static/fonts/arvo/v5/0Aa8aBJcGN1n1zDNhqNrnQ.woff) format('woff'); } h2 { color: #fff; display: inline-block; font-family: 'Arvo:700'; font-size: 58px; line-height: 52px; padding: 10px; text-transform: uppercase; margin-bottom:10px; } p { color: #d2d2d2; font-size:14px; line-height:16px; font-family: 'Arvo:400';} .section-heading {margin-bottom:10px; font-family: 'Arvo:700'; font-size: 32px; color: #000; text-align: center; line-height: 32px; padding-top: 10px; padding-bottom: 10px; text-transform: uppercase; background-color:#f96d20; display: inline-block; padding-left:10px; padding-right:10px; } .address { font-family: 'Arvo:400'; font-size: 32px; color: #000; text-shadow: #fff 0px 1px 0px; width: 100%; text-align: center; line-height: 32px; padding-top: 10px; } .greeting-message { font-family: 'Arvo:400'; font-size: 45px; color: #fff; line-height: 85px; text-align: center; font-weight: normal; } #banner-title { top:65px; position: relative; z-index: 9996; max-width:560px; width: 98%; text-transform: uppercase; padding-left:2%; } #banner-text { font-family: 'Arvo:400'; position: relative; z-index: 9996; width: 100%; text-transform: uppercase; } #bottom-copy {font-family: 'Arvo:400'; border-top: 1px solid #333232; clear: both; color: #3A3A3A; font-size: 12px; line-height: 12px; margin-bottom: 15px; padding: 25px 0; text-align: center; letter-spacing: 1px; } .footer-header { position: relative; display: inline-block; color:#212121; background-color:#666; margin-bottom:5px; font-size:18px; padding-left:5px; padding-right:5px; text-transform:uppercase; text-decoration:none; font-family:'Arvo:700'; } .footer-section p { color: #707070; font-size: 15px; line-height: 18px; } .footer-section input {width:100%; margin:0; padding:0;} #post-container { padding: 20px; background-image: url(images/blkstripe.png); background-repeat: repeat; min-height:260px; max-height:260px; margin-bottom:-20px;} a#post-title span { color: #fff; /*background-image: url(images/bg-black.png); background-repeat: repeat; background-color: transparent;*/ background:none; font-size: 42px; float: left; text-transform: uppercase; text-decoration: none; font-family: 'Arvo:700'; text-shadow: #000 0px 0px 5px; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; } #banner-type {position: relative; display: inline-block; top:60px; left:15px; z-index: 9996; color:#000; background-color:#f97220; font-size:18px; padding-left:5px; line-height:30px; padding-right:5px; text-transform:uppercase; text-decoration:none; font-family:'Arvo:700';} .small-featured #banner-type {top:35px; left:23px;} .small-featured #banner-title {top:38px; max-width:255px; left:23px; padding:0px;} .small-featured #banner-title a#post-title span {line-height:45px; font-size:40px; } #post-title span {color:#fff; background-color:#f97220; font-size:36px; padding:5px; float:left; text-transform:uppercase; text-decoration:none; font-family:'Arvo:700'; } article {background:#fff; overflow:hidden; min-height:300px; max-width:680px; border:1px solid #f96d20; margin-bottom:20px;} time {color:#FFF; background-color:#015AA0; font-size:22px; padding:5px; float:left; text-transform:uppercase; font-family:'Arvo:400'; text-shadow:#333 0px 0px 5px;} .post-thumbnail {width:150px; height:150px; overflow:hidden; text-align:center; background-color:#fff; padding:5px; box-shadow:#AAA 0px 0px 5px; float:left; margin-right:10px; margin-bottom:10px;} .post-thumbnail-container {width:148px; height:148px; overflow:hidden; border:1px solid #CDCDCD;} .post-thumbnail img {position:relative; left:-10px;} article a.more-link {color:#f97220; text-decoration:none;} .single-container #content-left p img {background-color:#fff; padding:5px; margin-right:10px; margin-bottom:10px; float:left;} .single-container p a {height:auto; width:auto; display:block;} .single-container p {font-size:16px; line-height:20px;} .tweet-container {font-family: 'Arvo:700'; max-width:470px; float:left; font-size:13px; color:#999999; padding-left:15px; padding-top:15px; text-transform:uppercase; height:47px; overflow:hidden;} .tweet-container a {color:#F96D20; text-decoration:none;} .social-container {float:right; max-width:335px; padding-top:10px; } nav { float: left; height: 45px; width: 100%; background-color: #fff; margin-top: 10px; background-image: url(images/nav.jpg); background-repeat: repeat-x; } .right-container {width:100%; float:left; max-width:806px;} nav li { float: left; line-height: 25px; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; } nav li a {color:#303030; text-transform:uppercase; text-decoration:none; font-size:18px; font-family: 'Arvo:700'; text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; border-right:1px solid #c7c7c7; padding-right:8px; padding-left:8px;} nav li#menu-item-301 a {border-right:none;} nav li a:hover {color:#f96d20;} nav li.current-menu-item a {color:#666;} .small-featured { float: right; width: 300px; height: 250px; background-color: #121212; position: relative; top: -10px; border: 1px solid #555555; background-image: url(images/default-team.png); background-repeat: no-repeat; } .menu-footer-container a {background-color: #999; color: #212121; display: inline-block; font-family: 'Arvo:700'; font-size: 18px; margin-bottom: 5px; padding-left: 5px; padding-right: 5px; position: relative; text-decoration: none; text-transform: uppercase;} .menu-footer-container a:hover {background-color:#F97220; } .menu-footer-container li.current-menu-item a {background-color:#DEDEDE; } .pagination {width:100%; height:50px;} .pagination a {font-family: 'Arvo:700'; font-size: 18px; color: #212121; text-align: center; line-height: 18px; padding-top: 5px; padding-bottom: 5px; text-transform: uppercase; background-color:#CCC; display: inline-block; padding-left:5px; padding-right:5px; text-decoration:none; margin-bottom:5px;} .pagination a:hover {background-color:#F96D20;} .pagination-next {float:right; margin-right:15px;} .pagination-previous {float:left;} /* ---------------------------------------------------------------------------------------------------------- 03 Media queries (using a mobile-first approach) ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ /* Shadowbox */ #sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{font-family:"Arvo:400",Helvetica,Arial,sans-serif;font-weight:200;color:#fff;} #sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:10000;text-align:left;visibility:hidden;display:none;} #sb-overlay{position:relative;height:100%;width:100%;} #sb-wrapper{position:absolute;visibility:hidden;width:100px;} #sb-wrapper-inner{position:relative;border:1px solid #303030;overflow:hidden;height:100px;} #sb-body{position:relative;height:100%;} #sb-body-inner{position:absolute;height:100%;width:100%;} #sb-player.html{height:100%;overflow:auto;} #sb-body img{border:none;} #sb-loading{position:relative;height:100%;} #sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;} #sb-loading-inner span{background:url(images/shadowbox/loading.gif) no-repeat;padding-left:34px;display:inline-block;} #sb-body,#sb-loading{background-color:#060606;} #sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;} #sb-title,#sb-title-inner{height:26px;line-height:26px;} #sb-title-inner{font-size:16px;} #sb-info,#sb-info-inner{height:20px;line-height:20px;} #sb-info-inner{font-size:12px;} #sb-nav{float:right;height:16px;padding:2px 0;width:45%;} #sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;} #sb-nav-close{background-image:url(images/shadowbox/close.png);} #sb-nav-next{background-image:url(images/shadowbox/next.png);} #sb-nav-previous{background-image:url(images/shadowbox/previous.png);} #sb-nav-play{background-image:url(images/shadowbox/play.png);} #sb-nav-pause{background-image:url(images/shadowbox/pause.png);} #sb-counter{float:left;width:45%;} #sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;} #sb-counter a.sb-counter-current{text-decoration:underline;} div.sb-message{font-size:12px;padding:10px;text-align:center;} div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;} /* Gallery */ ul.gallery li.gallery_photo {display:inline-block; margin-bottom:15px; width:24%;} .cbp-spmenu { background: #AEAEAE; position: fixed; border-right:solid 7px #464646; } .cbp-spmenu h3 { color: #121212; line-height:50px; font-size: 27px; text-align:center; margin: 0; font-family:'Arvo:400'; border-bottom: 1px solid #777; text-shadow:#ececec 0px 1px 0px; } .cbp-spmenu a { display: block; color: #121212; font-size: 16px; font-family:'Arvo:700'; text-decoration:none; text-transform:uppercase; } /* Orientation-dependent styles for the content of the menu */ .cbp-spmenu-vertical { width: 233px; height: 100%; top: 0; z-index: 1000; } .cbp-spmenu-vertical a { border-bottom: 1px solid #777; border-top:1px solid #cbcbcb; height:45px; line-height:45px; padding-left:15px; text-shadow:#ececec 0px 1px 0px; } /* Vertical menu that slides from the left or right */ .cbp-spmenu-left { left: -240px; } .cbp-spmenu-right { right: -240px; } .cbp-spmenu-left.cbp-spmenu-open { left: 0px; } .cbp-spmenu-right.cbp-spmenu-open { right: 0px; } /* Horizontal menu that slides from the top or bottom */ .cbp-spmenu-top { top: -150px; } .cbp-spmenu-bottom { bottom: -150px; } .cbp-spmenu-top.cbp-spmenu-open { top: 0px; } .cbp-spmenu-bottom.cbp-spmenu-open { bottom: 0px; } /* Push classes applied to the body */ .cbp-spmenu-push { overflow-x: hidden; position: relative; left: 0; } .cbp-spmenu-push-toright { left: 240px; } .cbp-spmenu-push-toleft { left: -240px; } /* Transitions */ .cbp-spmenu, .cbp-spmenu-push { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } #nav-icon {width:100%; height:75px; background-image:url(images/nav-icon.png); background-position:center bottom; background-repeat:no-repeat; margin-left:auto; margin-right:auto; } .mobile-show {display:none;} @media screen and (max-width: 400px) { a#post-title span {font-size:25px;} } @media screen and (max-width: 600px) { .mobile-show {display:block;} .mobile-hide {display:none;} .menu-header {width:80%; padding-left:10%; padding-right:10%; margin:0 auto; padding-top:5px;} .menu-header #drop-nav {width:100%; height:34px; font-family:'Arvo'; font-weight:700; background-color:#CCC; text-transform:uppercase; font-size:22px;} } @media all and (min-width: 320px) and (max-width: 1055px) { #container {width:90%; padding-left:5%; padding-right:5%;} .logo-container {float:none; margin-left:auto; margin-right:auto;} a#logo {margin-top:0; padding-top:15px;} .social-container {float:none; width:100%; text-align:center; max-width:100%;} .right-container {width:100%; float:none; max-width:100%;} a.social-btn-fb {margin-left:0px;} .tweet-container {display:none;} #banner-slide {width:100%; margin-bottom:20px; max-width:100% !important;} nav li a {font-size:13px;} .small-featured {width:45%; margin:2%;} .small-featured #banner-title a#post-title span {font-size:20px; line-height:25px;} .small-featured #banner-title {max-width:100%; left:5%;} .small-featured #banner-type {left:5%;} .locations-featured {width:100%;} .banner-image {background: no-repeat scroll center center; } .small-featured { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} #content-left {width:100%; max-width:100%; float:none; min-width:100%;} #content-right {width:100%; max-width:100%; float:none;} .sidebar-header {float:none !important; width: 100%; font-size: 27px; margin-bottom: 10px; margin-top: 10px;} #content-right > div.small-featured {float:none !important; width:100%; margin:0; height:215px;} #about-box {width:100%; float:none; max-width:100%;} #about-box > a {float:none !important;} #about-box .sidebar-header {padding-left:1%; padding-right:1%; width:98%;} #social-box {width:90%; max-width:100%; padding:5%; float:none;} .social-box-break {float:none; clear:both;} #content-right > a > img {float:none !important;} .footer-section {width:98%; float:none;} .footer-header {float:none !important; width: 100%; font-size: 27px; margin-bottom: 10px; margin-top: 10px;} h2 {font-size:32px; line-height:38px;} } @media screen and (min-width: 1400px) {...}