/* Theme Name: CUBRIK Theme URI: http://themeforest.net/user/seench/ Author: Syung Hong Author URI: http://themeforest.net/user/seench/ Description: A multi-purpose theme for showcasing, blogging, and selling. Version: 2.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, gray, white, one-column, two-columns, three-columns, right-sidebar, flexible-width, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready */ /* RESET CSS */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}:focus{outline:0;}ins{text-decoration:none;}del{text-decoration:line-through;}table{border-collapse:collapse;border-spacing:0;} /* ==================================================================================== */ /* MISCELLANEOUS */ /* ==================================================================================== */ body {font-family:Helvetica Neue, Helvetica, Arial, sans-serif; color:#444; overflow-x:hidden; overflow-y:scroll; padding:100px 0 68px 0; background:url(img/body-bg.png) no-repeat center 100px #bbb fixed; background-size:100%} #page {display:none; overflow:hidden} .slash {background:url(img/diagonal-line.png) bottom left no-repeat; width:100%; height:600px; position:fixed; bottom:0; left:0; z-index:-1} #loader {position: fixed; left: 50%; top: 50%; overflow:hidden; z-index: 99999; width:80px; height:40px; margin-top:-10px; margin-left:-40px; background:url(img/loader.gif) no-repeat center center} /* LINKS, TEXT, LISTS */ a {text-decoration:none; color:#378e9f} p a {color:#378e9f} p a:hover {text-decoration:underline} .chunky {font-size:30px; font-weight:bold; letter-spacing:-1px; word-spacing:1px} .chunky:hover {color:#444} .white {color:#fff} .red {color:#ff4f38 !important} .theme-color {color:#378e9f} strong {font-weight:bold !important; font-family:Helvetica Neue, Helvetica, Arial, sans-serif} .bullets {list-style-type:square; margin:0 0 10px 18px} .bullets li {margin:0 0 5px 0; padding-left:2px} .ordered {list-style-type:decimal; margin:0 0 10px 21px} .ordered li {margin:0 0 5px 0} .bullets li, .ordered li {font-size:13px; font-weight:300; letter-spacing:0.2px; word-spacing:0.5px; line-height:19px} /* FLOATS, CLEARS, BREAKS */ .fclear {clear:both; line-height:0; height:0} .break-thin {clear:both; width:17px; height:1px; background:#ddd; margin-bottom:15px} .hline {clear:both; width:100%; height:1px; background:#ddd; border-bottom:solid 1px #fff; clear:both} .left {float:left !important} .right {float:right !important} /* FORM STYLE */ input[type=text], textarea {font-size:11px; margin-bottom:20px; font-weight:300; border:none; border-top:solid 1px #ddd; border-left:solid 1px #ddd; font-family:Lucida Grande, Tahoma, Arial, sans-serif; padding:0 10px 0 10px; cursor:default; height:36px; line-height:36px; background:#f6f6f6; color:#888; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box} input[type=text]:hover, textarea:hover {color:#444} input[type=text]:focus, textarea:focus {color:#444; border-top:solid 1px #ccc; border-left:solid 1px #ccc} input.iname {width:48%; float:left} input.iemail {width:48%; float:right} input[type=submit] {opacity:0.8; font-family:Helvetica Neue, Helvetica, Arial, sans-serif; color:#fff; display:inline-block; cursor:pointer; background:url(img/btn-bg2.png) repeat-x bottom #378e9f; border:none; font-size:11px; text-transform:uppercase; margin-bottom:15px; padding:11px; border-radius:1px; -moz-border-radius:1px; -webkit-border-radius:1px} input[type=submit]:hover {opacity:0.999; background:url(img/btn-bg2.png) repeat-x bottom #378e9f} textarea {clear:both; height:80px; line-height:20px; padding:5px 1px 1px 10px} /* ==================================================================================== */ /* NAVIGATION */ /* ==================================================================================== */ /* MAIN NAV */ #nav {z-index:9999; background:#444; width:100%; position:fixed; height:100px; top:0; left:0} #nav h1 span {display:none; font-weight:900; text-transform:uppercase; color:#333; font-size:28px; padding-right:3px; line-height:44px; letter-spacing:-2px} #nav #logo {display:block; float:left; margin:0 0 0 20px; overflow:hidden} #nav #logo img {max-height:100px} #nav #links {float:right; margin:25px 25px 0 0} #nav #links li {display:block; float:left} #nav #links li a {color:#999; background:#444; display:block; padding:19px 20px 20px 20px; text-decoration:none; font-size:11px; text-transform:uppercase} #nav #links li a:hover {background:url(img/btn-bg.png) repeat-x bottom #f6f6f6; color:#444} #nav #links li a.current-parent {background:url(img/btn-bg.png) repeat-x bottom #f6f6f6; color:#999} #nav #links li a.current {color:#fff; background:#378e9f !important} #nav #links li#menu {display:none; background:#f6f6f6; border-bottom:solid 1px rgba(0,0,0,0.1);} #nav #links li#menu a {color:#444; background:url(img/up-down.png) no-repeat 100% -67px} #nav #links li#menu a.active {background:url(img/up-down.png) no-repeat 100% -7px} #nav #links li ul {display:none} #nav #links li.drop ul {display:none; margin:-1px 0 0 -6px; width:140px; position:absolute; clear:both; border: solid 6px rgba(0,0,0,0.1); border-top:none} #nav #links li.drop ul li {float:none} #nav #links li.drop ul li a:hover {background:#f6f6f6} #nav #links li.drop .spacer {height:26px; line-height:26px} /* SUB NAV */ .subnav {z-index:9998; position:fixed; bottom:14px; right:25px; overflow:hidden} .subnav li {display:block; float:left} .subnav li a {background:#3f4142; display:block; padding:15px 20px 16px 20px; margin:0; color:#888; font-size:11px; font-weight:300; text-transform:uppercase; border-radius:1px; -moz-border-radius:1px; -webkit-border-radius:1px} .subnav li a:hover {text-decoration:none; color:#fff; background:#555; box-shadow:0 0 3px #333; -moz-box-shadow:0 0 3px #333; -webkit-box-shadow:0 0 3px #333} .subnav li a.current {color:#fff !important; background:#303131 !important; box-shadow:inset 0 0 3px #292929 !important; -moz-box-shadow:inset 0 0 3px #292929 !important; -webkit-box-shadow:inset 0 0 3px #292929 !important} /* SEARCH */ #search {z-index:9998; position:fixed; bottom:9px; right:25px; width:200px} .search-border {margin-bottom:11px; box-shadow: 0px 0px 0px 6px rgba(63,65,66,0.2); -moz-box-shadow: 0px 0px 0px 6px rgba(63,65,66,0.2); -webkit-box-shadow: 0px 0px 0px 6px rgba(63,65,66,0.2)} #search li {display:none; clear:both; border-bottom:solid 1px #444} #search li a {background:#444; color:#999; display:block; padding:18px 20px 19px 20px; text-decoration:none; font-size:11px; text-transform:uppercase} #search li a:hover {background:#555; color:#fff} #search li#togglebtn {display:block !important; border-top:solid 1px #5a5a5a; border-bottom:solid 1px #3a3a3a} #search li#togglebtn:hover { box-shadow:0 0 3px #333; -moz-box-shadow:0 0 3px #333; -webkit-box-shadow:0 0 3px #333} #search li#togglebtn a {background:url(img/up-down3.png) no-repeat 102% -7px #494949} #search li#togglebtn a:hover {background-color:#555} #search li#togglebtn a.active {background:url(img/up-down3.png) no-repeat 102% -67px #555 !important} #search li#categories {height:196px; background:#444; border:none; overflow-y:scroll} #search li#categories ul li {display:block} #search li#type {border:none; background:#fff} #search li#type input[type=text] {display:block; float:left; margin:0; border:none; border-top:solid 1px #fff; padding:0 0 0 20px; width:200px; height:50px; line-height:50px; background:#f6f6f6; color:#888} #search li#type input[type=text]:hover {color:#444} #search li#type input[type=text]:focus {color:#444} #search li#type input[type=submit] {opacity:0.3; display:block; float:left; cursor:pointer; text-indent:200% !important; white-space: nowrap !important; overflow: hidden; border:none; background:url(img/ico-search.png) no-repeat -5px -35px !important; width:40px; height:50px; margin:0 0 0 -40px } #search li#type input[type=submit]:hover {opacity:0.8} /* ==================================================================================== */ /* PORTFOLIO */ /* ==================================================================================== */ /* PORTFOLIO PREVIEW LAYOUT */ #portfolio-preview {overflow:hidden; width:101%; margin-bottom:-2px} #portfolio-preview li {cursor:pointer; width:33.33%; margin:-2px 0 0 -1px; background:url(img/zoom.png) no-repeat center center; background-size:60px} #portfolio-preview li.double {z-index:9} #portfolio-preview li.motion {background-image:url(img/video.png); background-size:60px} #portfolio-preview li img {width:100%} #portfolio-preview li:hover img {opacity:0.2} #portfolio-preview li .description { position:absolute; visibility:hidden; background:#378e9f; width:100%; padding:23px 0 23px 0; text-align:center; bottom:2px; font-size:11px; text-transform:uppercase; color:#fff; opacity: 0; -webkit-transform: translate(265px, 0); -moz-transform: translate(265px, 0); -ms-transform: translate(265px, 0); -o-transform: translate(265px, 0); transform: translate(265px, 0); } #portfolio-preview li:hover .description { visibility:visible; opacity: 0.9; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } /* FULL SCREEN PORTFOLIO VIDEO */ #portfolio-video-wrapper {display: none; position: fixed; left: 0; top: 0; overflow: hidden; z-index: 99999; height: 100%; width: 100%; background:#f6f6f6} #portfolio-video {position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow:hidden; margin-top:70px} #portfolio-video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:url(img/loader.gif) no-repeat 50% 55%} /* FULL SCREEN PORTFOLIO IMAGES */ #portfolio-slides {display: none; position: fixed; left: 0; top:0; overflow:hidden; z-index: 99999; width: 100%; background:#f6f6f6} #portfolio-slides .rslides {position: relative; text-align:center; margin:95px auto 0 auto; opacity:0; overflow:hidden; width:100%; padding-bottom:800px /* make sure caption doesn't disappear*/} #portfolio-slides .rslides li {display:none; width:100%} #portfolio-slides .rslides img {cursor:move; width:auto; top:0} #portfolio-slides .rslides .caption {text-align:left; font-weight:300; font-size:12px; width:100%; bottom:0; left:0; z-index:9999; padding:27px 25px 28px 25px; background:#3f4142; color:#fff; position:fixed} #portfolio-slides .rslides_nav {display:none; z-index:9999; position:fixed; height:39px; width:41px; bottom:14px; text-indent:100%; white-space: nowrap; overflow: hidden} #portfolio-slides .rslides_nav:hover {background-color:#656565 !important} #portfolio-slides #resize {display:none; position:absolute; top:95px; left:25px; opacity:0.2; z-index:9999; text-indent:100%; white-space: nowrap; overflow: hidden; width:40px; height:40px} #portfolio-slides #resize:hover {opacity:0.5} #portfolio-slides .expand {background:url(img/expand-collapse.png) no-repeat 0px 0px #444} #portfolio-slides .collapse {background:url(img/expand-collapse.png) no-repeat 0px -80px #444} #portfolio-slides .prev {background:url(img/arrows-med.png) 2px 0px #555; right:54px} #portfolio-slides .next {background:url(img/arrows-med.png) -46px 0px #555; right:14px} /* TITLE BAR IN FULL SCREEN VIEW */ #title-bar {display:none; height:70px; position:fixed; top:0; overflow:hidden; z-index:999999; width:100%; background:#fff} #title-bar h3 {overflow:hidden; font-size:13px; font-weight:300; padding:27px 0 5px 25px} #title-bar .close {position:fixed; cursor:pointer; right:0; top:0; background:url(img/arrows-med.png) -86px 0px #f6f6f6; margin:15px; display:block; z-index:99999; text-indent:100%; white-space: nowrap; overflow: hidden; width:40px; height:39px; line-height:39px} #title-bar .close:hover {background-color:#eee} /* ==================================================================================== */ /* PORTFOLIO STYLE 2 */ /* ==================================================================================== */ #portfolio2 {overflow:hidden; margin:0 22px 30px 0} #portfolio2 li {cursor:pointer; float:left; width:33.3%; margin:0 -1px 0 0} #portfolio2 li a {margin:25px 0 0 25px; display:block; height:260px; overflow:hidden; background:#fff} #portfolio2 li a.doubleh {height:545px} #portfolio2 li img {width:101%; display:block; -webkit-transition: -webkit-transform 0.2s ease-in; -moz-transition: -moz-transform 0.2s ease-in; -ms-transition: -ms-transform 0.2s ease-in; -o-transition: -o-transform 0.2s ease-in; transition: transform 0.2s ease-in; } #portfolio2 li:hover img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } #portfolio2 li .description {z-index:9; position:absolute; width:100%; bottom:0 } #portfolio2 li .description span {visibility:hidden; opacity: 0; margin-left:25px; display:block; background:#378e9f; padding:23px 0 23px 0; text-align:center; font-size:11px; text-transform:uppercase; color:#fff} #portfolio2 li:hover .description span {visibility:visible; opacity: 0.9} /* opacity */ #portfolio2 li .description span { -webkit-backface-visibility: hidden !important; -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -ms-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } /* SINGLE PROJECT PAGE */ #project {overflow:hidden; margin:0 22px 30px 0} #project .brick { margin:0 -1px 0 0} #project .brick .pad {margin:25px 0 0 25px; background:#fff; overflow:hidden; border-bottom:solid 1px #ccc; border-bottom:solid 1px rgba(0, 0, 0, .2)} #project .media {width:50%} #project .summary {width:50%; float:right} #project .summary .pad {height:1100px} #project .summary h2 {font-size:26px; font-family:Lato, Helvetica Neue, Helvetica, Arial, sans-serif; margin:0 0 20px 0; text-transform:uppercase; clear:both} #project .summary .content {padding:50px 50px 35px 50px} #project .summary .content h3.subtle {font-size:11px; font-weight:normal; text-transform:uppercase; color:#888; margin:0 0 12px 0} #project .summary .content p {font-size:14px; font-weight:300; letter-spacing:0.2px; word-spacing:0.5px; line-height:24px; margin:0 0 15px 0} #project .summary .featured {height:450px; overflow:hidden} #project .summary .featured img {width:100%; -webkit-transition: -webkit-transform 0.2s ease-in; -moz-transition: -moz-transform 0.2s ease-in; -ms-transition: -ms-transform 0.2s ease-in; -o-transition: -o-transform 0.2s ease-in; transition: transform 0.2s ease-in; } #project .summary .featured img:hover { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } #project .media .extras {display:block; overflow:hidden} #project .media .extras li {width:50%; float:left; margin-left:-1px} #project .media .extras li .box {display:block; height:200px; overflow:hidden; margin:25px 0 0 25px; font-size:12px; text-transform:uppercase} #project .media .extras li .box img {width:100%; -webkit-transition: -webkit-transform 0.2s ease-in; -moz-transition: -moz-transform 0.2s ease-in; -ms-transition: -ms-transform 0.2s ease-in; -o-transition: -o-transform 0.2s ease-in; transition: transform 0.2s ease-in; } #project .media .extras li .box img:hover { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } #project .media .extras li .box .misc {text-align:right} #project .media .extras li .box .misc .break-thin {background:#999; right:0; position:absolute; margin-top:1px; clear:both} #project .media .extras li .box .misc p {padding-top:20px; color:#777; line-height:16px; font-family:Lucida Grande, Tahoma, Helvetica, Arial, sans-serif; font-weight:normal} #project .media .extras li .box .share {margin:150px 0 0 0; float:right; background:#fff; line-height:48px; height:48px; padding:0 0 0 20px} #project .media .extras li .box .share .social-icons {margin:15px 0 0 0} #project .media .extras li .box .share .social-icons li {width:37px} /* ==================================================================================== */ /* GALLERY */ /* ==================================================================================== */ #gallery {overflow:hidden; margin:0 22px 30px 0} #gallery li {cursor:pointer; position:relative; float:left; width:33.3%; margin:0 -1px 0 0} #gallery li a {margin:25px 0 0 25px; display:block; overflow:hidden; background:url(img/zoom.png) no-repeat center center #fff} #gallery li img {width:101%; display:block} #gallery li:hover img {opacity:0.2} #gallery li a.no-image {background:none; color:#378e9f; display:block; overflow:hidden; padding:0px 0 10px 0} #gallery li a.no-image:hover {color:#3f4142} #gallery li span {position:absolute; bottom:0; right:0; background:#378e9f; display:block; padding:20px; text-align:center; font-size:11px; text-transform:uppercase; color:#fff} #gallery li:hover span {background:#3f4142} /* ==================================================================================== */ /* FULLSCREEN VIDEO */ /* ==================================================================================== */ #fullvideo {position: relative; width:100%; text-align:center; margin:0 auto} #fullvideo iframe {width:100%; background:url(img/loader.gif) no-repeat 50% 55%} /* ==================================================================================== */ /* ORDER */ /* ==================================================================================== */ /* CONTAINER FOR WIZARD AND FIRST COLUMN */ .scraps {width:58% !important; margin-right:0 !important; float:left !important} /* PREVIEW CONTAINER */ #preview {width:42%; float:right} #preview .pad {margin:25px; background:#fff; border-bottom:solid 1px #ccc; border-bottom:solid 1px rgba(0, 0, 0, .2)} #preview .preload-images {display:none} #preview .base {display:block; position:relative; width:100%} #preview .layers {display:block; position:relative; z-index:1} #preview .layers img {position:absolute; width:100%} #preview .layers img.just-added {display:none; opacity:0} #preview .summary {padding:25px 25px 10px 25px} #preview .summary h3 {font-size:11px; font-weight:bold; text-transform:uppercase; color:#444; margin:0 0 17px 0} #preview .summary p {font-size:13px; font-weight:300; line-height:19px; margin:0 0 15px 0} #preview .lightbar {background:#f6f6f6; height:59px; padding:0 25px 0 25px; border-top:solid 1px #fff} #preview .lightbar .total-price {display:block; float:right; letter-spacing:-1px; font-weight:bold; font-size:24px; padding:17px 0 0 0} /* WIZARD CONTAINER */ #wizard .pagination {display:block; background:#f6f6f6; height:59px; line-height:59px; padding:0 10px 0 18px; border-top:solid 1px #fff} #wizard .pagination li {display:block; float:left; cursor:pointer; width:22px; line-height:59px; height:59px} #wizard .pagination li span {display:block; margin:27px 0 0 10px; width:4px; height:4px; background:#aaa; text-indent:100%; white-space: nowrap; overflow: hidden;} #wizard .pagination li:hover span {background:#444} #wizard .pagination li.current span {background:#378e9f} #wizard .page-numbers {float:left} #wizard .arrows {float:right} #wizard .arrows li {opacity:0.5; display:none; float:right; width:32px} #wizard .arrows li span {margin:24px 0 0 10px; width:5px; height:10px} #wizard .arrows li:hover {opacity:1} #wizard .arrows li.prev span {background:url(img/paginate-arrows.png) no-repeat} #wizard .arrows li.next span {background:url(img/paginate-arrows.png) no-repeat -36px 0} #wizard .step {display:none; clear:both} #wizard .step li {cursor:pointer; background:url(img/ico-radio.png) no-repeat left 25px; height:59px; font-weight:300; font-size:12px; clear:both; padding:0 0 0 16px; margin:0 25px 0 25px; border-top:solid 1px #fff; box-shadow:0 2px 0 #f6f6f6; -moz-box-shadow:0 2px 0 #f6f6f6; -webkit-box-shadow:0 2px 0 #f6f6f6} #wizard .step li:hover {background:url(img/ico-radio.png) no-repeat 25px 25px #f6f6f6; padding:0 25px 0 41px; margin:0; box-shadow:inset 0 -1px 0 #eee; -moz-box-shadow:inset 0 -1px 0 #eee; -webkit-box-shadow:inset 0 -1px 0 #eee} #wizard .step li.checked {background:url(img/ico-radio.png) no-repeat 25px -34px #f6f6f6; padding:0 25px 0 41px; margin:0; box-shadow:inset 0 -1px 0 #eee; -moz-box-shadow:inset 0 -1px 0 #eee; -webkit-box-shadow:inset 0 -1px 0 #eee} #wizard .step li.checked:hover {background:url(img/ico-radio.png) no-repeat 25px -34px #f6f6f6; padding:0 25px 0 41px; margin:0} #wizard .step ul.multis li {background:url(img/ico-checkbox.png) no-repeat left 25px} #wizard .step ul.multis li:hover {background:url(img/ico-checkbox.png) no-repeat 25px 25px #f6f6f6} #wizard .step ul.multis li.checked {background:url(img/ico-checkbox.png) no-repeat 25px -34px #f6f6f6} #wizard .step ul.multis li.checked:hover {background:url(img/ico-checkbox.png) no-repeat 25px -34px #f6f6f6} #wizard .step li span.option-title {display:block; float:left; width:70%} #wizard .step li span.option-price {display:block; float:right; width:30%; text-align:right} #wizard .step .header {display:block; padding:26px 25px 25px 25px; background:#378e9f; font-size:11px; text-transform:uppercase; font-weight:normal; color:#fff} #wizard .step .header label {margin:0} #wizard .step .content {padding:25px 25px 10px 25px} #wizard .step .content p {font-size:13px; font-weight:300; line-height:19px; margin:0 0 15px 0} #wizard .step li span{color:#888; padding:24px 0 0 0} #wizard .step li:hover span {color:#3f4142} #wizard .step li.checked span {color:#378e9f} #wizard .step input[type=radio], input[type=checkbox] {display:none} /* FORM */ #wizard #inquire {display:block} #wizard #processing {display:none} #wizard #processing .header {background:url(img/loader2.gif) no-repeat 93% center #378e9f} #wizard #error {display:none; color:#ff4f38; float:right; margin:0; line-height:35px} #wizard #success {display:none} #wizard #success .header {background:url(img/ico-check.png) no-repeat 93% center #378e9f} /* BUY NOW */ #paypal form {display:none} #buy {opacity:0.8; z-index:99999; position:fixed; bottom:13px; right:25px; background:url(img/next-arrow2.png) no-repeat 85% 17px #378e9f; display:block; padding:16px 30px 16px 20px; margin:0; color:#fff; font-size:11px; text-transform:uppercase; border-bottom:solid 1px #292929; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)} #buy:hover {opacity:1; text-decoration:none} /* ==================================================================================== */ /* ABOUT */ /* ==================================================================================== */ #map_canvas {width:100%; height:300px} #place_photo {display:none; width:100%; height:300px} #place_photo img {height:300px} #place_photo .close {opacity:0.6; position: absolute; background:url(img/arrows-med.png) -88px -2px #eee; top:30px; right:5px; width: 36px; height: 35px; cursor: pointer; text-indent:100%; white-space: nowrap; overflow: hidden;} #place_photo .close:hover {opacity:0.999} #subscribe {margin:0 0 15px 0; width:100%} #subscribe label {display:none} #subscribe input[type=text] {float:left; width:100%; line-height:36px; margin:0} #subscribe input[type=submit] {opacity:0.5; float:left; cursor:pointer; text-indent:200%; white-space: nowrap; overflow: hidden; border:none; background:url(img/subscribe-btn.png) no-repeat 0px -41px; width:39px; height:39px; margin:0 0 0 -39px } #subscribe input[type=submit]:hover {opacity:0.999} .twitter-corner {display:none; width:25px; height:25px; background:url(img/social-icons.png) no-repeat 3px -104px #ddd; float:right; text-indent:100%; white-space: nowrap; overflow: hidden;} .twitter-corner:hover {background-color:#38afd2 !important} #jstwitter {overflow:hidden; clear:both; background:url(img/loader2.gif) no-repeat center center; min-height:150px} #jstwitter .tweet {display:none; margin:15px 40px 40px 30px; overflow:hidden} #jstwitter .tweet p {font-size:13px; word-spacing:1px; font-weight:300; line-height:19px; padding:0 0 3px 20px; border-left:solid 1px #e6e9eb} #jstwitter .tweet .time {font-size:11px; text-transform:uppercase; font-weight:normal; color:#888; margin:20px 0 0 20px} #jstwitter .paginate {display:block; overflow:hidden; margin:-46px 16px 14px 0} #jstwitter .paginate li {cursor:pointer; text-align:left; margin:0; float:right; display:block; width:16px; height:16px; text-indent:100%; white-space: nowrap; overflow: hidden;} #jstwitter .paginate li a {opacity:0.3; display:block; width:4px; height:4px; background:#3f4142} #jstwitter .paginate li:not(.current):hover a {opacity:1; background:#3f4142} #jstwitter .paginate li.current a {opacity:1; background:#378e9f} /* CONTACT FORM */ #cform {display:block} #cform-processing {display:none} #cform-processing h2 {padding:20px 40px 20px 30px; background:url(img/loader2.gif) no-repeat 93% center #378e9f} #cform #error {display:none; color:#ff4f38; float:right; margin:0; line-height:35px} #cform-success {display:none} #cform-success h2 {padding:20px 40px 20px 30px; background:url(img/ico-check.png) no-repeat 93% center #378e9f} /* ==================================================================================== */ /* BRICKS (CONTENT BOXES) */ /* ==================================================================================== */ #bricks {overflow:hidden; margin:0 22px 30px 0} #bricks .brick {float:left; width:33.3%; margin:0 -1px 0 0} #bricks .full {width:100%} #bricks .half {width:50%} #bricks .quarter {width:25%} #bricks .brick .pad {margin:25px 0 0 25px; background:#fff; overflow:hidden; border-bottom:solid 1px #ccc; border-bottom:solid 1px rgba(0, 0, 0, .2)} #bricks .brick h2 {display:inline-block; padding:20px 25px 20px 25px; margin:20px 0 -5px 0; background:#378e9f; font-size:11px; text-transform:uppercase; font-weight:normal; color:#fff} #bricks .brick .content {padding:25px 25px 10px 25px} #bricks .brick .content h3 {font-size:11px; font-weight:bold; text-transform:uppercase; color:#444; margin:0 0 12px 0} #bricks .brick .content h3.subtle {font-size:11px; font-weight:normal; text-transform:uppercase; color:#888; margin:0 0 12px 0} #bricks .brick .content p {font-size:13px; font-weight:300; letter-spacing:0.2px; word-spacing:0.5px; line-height:19px; margin:0 0 15px 0} #bricks .lightbar {background:#f6f6f6; height:59px; padding:0 30px 0 30px; border-top:solid 1px #fff} #bricks .lightbar p {color:#888; font-size:13px; font-weight:300; margin:24px 0 0 0} #bricks .brick .last {float:right; margin-right:0} #bricks .brick a.btn-link, #post .brick a.btn-link {opacity:0.8; font-weight:normal; display:inline-block; padding:12px 16px 12px 16px; margin:0 15px 15px 0; color:#fff; text-transform:uppercase; font-size:11px; background:url(img/btn-bg2.png) bottom repeat-x #378e9f; border-radius:1px; -moz-border-radius:1px; -webkit-border-radius:1px} #bricks .brick a.btn-link:hover, #post .brick a.btn-link:hover {opacity:0.999; text-decoration:none} #bricks .brick .dropcap, #post .brick .dropcap {display:block; float:left; font-weight:bold; font-size:38px; line-height:38px; margin:0 6px 0 0} #bricks .brick blockquote, #post .brick blockquote {padding:20px 25px 7px 25px; margin:20px 0 20px 0; background:#f6f6f6} #bricks .brick p .marker, #post .brick p .marker {background:#dcf7fe; border-bottom:solid 1px #bce3ee; padding:3px 3px 3px 0} #bricks .fit img {width:101% !important; height:auto !important; margin-bottom:-3px} /* ==================================================================================== */ /* BLOG */ /* ==================================================================================== */ /* POSTINGS */ .page-template-blog-php #bricks {min-height:2000px; overflow:auto} #bricks #load-more {overflow:hidden; background:none; min-height:300px} #bricks #load-more .loading-posts {display:none; overflow:hidden; width:100%; background-image:url(img/loader.gif); background-repeat:no-repeat; background-position: 100% 50%; line-height:55px; height:55px} #bricks #load-more a {opacity:0.8; font-weight:normal; display:block; padding:22px 0 23px 0; text-align:center; margin:0; color:#fff; text-transform:uppercase; font-size:11px; background:url(img/btn-bg.png) repeat-x bottom #378e9f; border-radius:1px; -moz-border-radius:1px; -webkit-border-radius:1px} #bricks #load-more a:hover {opacity:0.999} #posts-navigation {display:none} .notransform {padding-bottom:100px} .brick .no-bg {background:none !important; border:none !important} .brick .border {margin-top:-3px; width:100%; background:#fff; height:3px} .brick .rslides {position: relative; overflow:hidden; width:100%; z-index:0;} .brick .rslides li {display:none; position:absolute; display:none; width:100%; left:0; top:0} .brick .rslides li:first-child {position:relative; display:block; float:left} .brick .rslides img {display: block; height: auto; float: left; width: 101%; border: 0} .brick .rslides_nav {position:absolute; display:block !important; margin-top:-36px; z-index:999; text-indent:100%; white-space: nowrap; overflow: hidden} .brick .rslides_nav:hover {background-color:#444 !important} .brick .slides .next {background:url(img/arrows-med.png) no-repeat -45px -2px #555; width:40px; height:36px; margin-left:39px } .brick .slides .prev {background:url(img/arrows-med.png) no-repeat 1px -2px #555; width:40px; height:36px} .brick .video {position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow:hidden} .brick .video iframe {position: absolute; top: 0; left: 0; width: 100%; height:100%; background:url(img/loader2.gif) no-repeat center 55%;} .brick .post-intro {padding:15px 25px 25px 25px; overflow:hidden} .brick .post-intro h3 {font-weight:normal; text-transform:uppercase; font-size:11px; margin:6px 0 15px -25px} .brick .post-intro h3 a {opacity:0.8; display:inline-block; padding:20px 25px 20px 25px; background:#378e9f; color:#fff; } .brick .post-intro h3 a:hover {opacity:1} .brick .post-intro p.info {text-transform:uppercase; display:block; font-size:11px; font-weight:normal; letter-spacing:0; color:#888} .brick .post-intro p {font-size:13px; line-height:19px; letter-spacing:0.2px; word-spacing:0.5px; margin-top:7px; font-weight:300} .brick .link-post {background:url(img/link.png) no-repeat right center; display:block} /* SINGLE POST */ #post {overflow:hidden; margin:0 25px 30px 0} #post .brick {float:left; width:25%} #post #main {float:left; width:50%; margin:0} #post #main .lightbar {display:none} #post #main p.info {margin:0; font-size:11px; font-weight:normal; letter-spacing:0} #post #main .fit img {width:100%; height:auto} #post .brick .pad {margin:25px 0 0 25px; background:#fff} #post .brick .summary {margin:25px 0 0 25px} #post .brick .summary h2 {font-size:45px; clear:both; margin:0 0 20px 0; letter-spacing:-1px; color:#fff; text-align:right} #post .brick .summary h2 span {color:#378e9f} #post .brick .summary p {line-height:16px; margin:0 0 10px 0; text-align:right; font-size:11px; text-transform:uppercase; color:#777} #post .brick .summary p.time {float:right; background:url(img/calendar.png) no-repeat left; padding-left:20px} #post .brick .summary p.sideways { transform: rotate(-90deg); transform-origin:100% 70%; -webkit-transform: rotate(-90deg); -webkit-transform-origin:100% 70%; -moz-transform: rotate(-90deg); -moz-transform-origin:100% 70%; -ms-transform: rotate(-90deg); -ms-transform-origin:100% 70%; -o-transform: rotate(-90deg); -o-transform-origin:100% 70%; } #post .brick .summary .share {margin:0 0 10px 0; float:right; display:block; background:#f6f6f6; line-height:48px; height:48px; padding:0 0 0 20px; border-top:solid 1px #fff} #post .brick .summary .share .social-icons {margin:15px 0 0 0} #post .brick .summary .share .social-icons li {width:37px} #post .brick h2.highlight {display:inline-block; position:absolute; padding:20px 25px 20px 25px; margin:20px 0 -5px 0; background:#378e9f; font-size:11px; text-transform:uppercase; font-weight:normal; color:#fff} #post .brick h3.highlight {display:inline-block; padding:20px 25px 20px 25px; margin:20px 0 -5px 0; background:#378e9f; font-size:11px; text-transform:uppercase; font-weight:normal; color:#fff} #post .brick .content {padding:40px 40px 30px 40px} #post .brick .content h3 {font-size:11px; font-weight:bold; text-transform:uppercase; color:#444; margin:0 0 12px 0} #post .brick .content p {font-size:13px; font-weight:300; letter-spacing:0.2px; word-spacing:0.5px; line-height:19px; margin:0 0 15px 0} #post .lightbar {background:#f6f6f6; height:58px; padding:0 0 0 25px !important; border-bottom:solid 1px #e6e6e6; border-top:solid 1px #fff} #post .lightbar h3, .title {display:block; float:left; font-size:11px; margin:24px 0 0 0; text-transform:uppercase; font-weight:normal; color:#888} #post .lightbar .social-icons {float:right; margin:21px 0 0 0} #post .paginate {float:right; margin:0 5px 0 0} #post .paginate li {float:left; text-indent:100%; white-space: nowrap; overflow: hidden;} #post .paginate li a {opacity:0.4; display:block; width:32px; height:59px; text-indent:100%; white-space: nowrap; overflow: hidden;} #post .paginate li span.prev a {background:url(img/paginate-arrows.png) no-repeat 20px 25px; margin-right:14px} #post .paginate li span.next a {background:url(img/paginate-arrows.png) no-repeat -30px 25px} #post .paginate li a:hover {opacity:1} #post-nav {z-index:9998; position:fixed; height:39px; bottom:14px; right:25px} #post-nav li {float:left} #post-nav li p {font-size:11px; font-weight:300; padding:15px 15px 15px 0; text-transform:uppercase; color:#888} #post-nav a {display:block; width:41px; height:41px; text-indent:100%; white-space: nowrap; overflow: hidden} #post-nav a:hover {background-color:#656565 !important} #post-nav span.prev a {background:url(img/arrows-med.png) 2px 0px #555} #post-nav span.next a {background:url(img/arrows-med.png) -46px 0px #555} #post-nav span.all a {background:url(img/ico-blog.png) #555 no-repeat center 49%} .comments {padding:40px 40px 15px 40px} .comments h3#comments {display:inline-block; padding:20px; margin:-20px 0 20px -40px; background:#378e9f; font-size:11px; text-transform:uppercase; font-weight:normal; color:#fff} .comments .comment {padding:0 0 20px 0; overflow:hidden; border-top:solid 1px #eee} .comments .comment p {margin:20px 0 0 0; text-align:justify; margin-left:1px; font-size:13px; letter-spacing:0.2px; word-spacing:0.5px; font-weight:300; line-height:19px} .comments .commentlist {border-bottom:solid 1px #eee} .comments .comment .comment-body {margin-top:20px} .comments .comment .comment-author {display:inline; text-transform:uppercase; font-size:11px; overflow:hidden} .comments .comment .comment-author a {color:#378e9f; font-style:normal} .comments a:hover {text-decoration:underline} .comments .comment .comment-author .says {display:none} .comments .comment .comment-meta {text-transform:uppercase; font-size:11px; font-weight:300; overflow:hidden; line-height:19px; margin:15px 0 -20px 0} .comments .comment .comment-meta a {color:#888} .comments .comment .comment-awaiting-moderation {display:inline; font-style:normal; text-transform:uppercase; font-size:11px} .comments .comment .reply {float:right} .comments .comment .reply a {opacity:0.8; background:#3f4142; text-decoration:none !important; font-size:11px; text-transform:uppercase; color:#fff !important; width:59px; padding:12px 0 12px 2px; display:block; text-align:center} .comments .comment .reply a:hover {opacity:0.999} .comments .comment cite {font-style:normal; text-transform:uppercase; font-size:11px} .comments .navigation {margin:0 0 20px 0; overflow:hidden} .comments .navigation .alignleft {float:left} .comments .navigation .alignright {float:right} .comments .navigation a {text-transform:uppercase; font-size:11px; display:inline-block; padding: 5px 0 5px 0; color:#378e9f; margin:10px 0 0 0} .comments .children {margin:20px 0 0 40px; overflow:hidden} .comments .children .comment {padding:0; overflow:hidden; border-bottom:none; border-top:solid 1px #eee} .comments #respond {margin:0; overflow:hidden; clear:both} .comments #respond h3 {margin:0; padding:20px 0 3px 0; font-size:11px; font-weight:bold; text-transform:uppercase; color:#444} .comments #respond #cancel-comment-reply-link {color:#ff4f38; text-transform:uppercase; font-size:11px; overflow:hidden} .comments #respond #commentform {overflow:hidden; margin:20px 0 10px 0} .comments #respond #commentform p {display:block; clear:both; margin:0 0 10px 1px; font-size:13px; letter-spacing:0.2px; word-spacing:0.5px; font-weight:300; line-height:19px } .comment-notes, .form-allowed-tags {display:none !important} .comments #respond #commentform label {display:none; float:right; text-align:left; width:180px} .comments #respond #commentform input {float:left} .comments #respond #commentform input[type=text] {width:50%} .comments #respond #commentform textarea {width:100%; height:100px} .comments #respond #commentform input[type=submit] {cursor:pointer; background-color:#378e9f; color:#fff; border:none; font-size:11px; text-transform:uppercase; padding:11px} /* ==================================================================================== */ /* WIDGETS */ /* ==================================================================================== */ #bricks .widget {padding:0} #bricks .widget .pad {padding-bottom:7px} #post .widget {padding-bottom:5px} .widget .lightbar {border-bottom:solid 1px #e4e4e4} .widget .lightbar h3 {display:block; font-size:11px; margin:24px 0 0 0; text-transform:uppercase; font-weight:normal; color:#888} .widget ul li {display:block; overflow:hidden; clear:both; padding:18px 0 18px 0; margin:0 25px 0 25px; border-bottom:solid 1px #f6f6f6; font-size:11px; text-transform:uppercase; color:#999} .widget ul li .children {margin:20px 0 -18px 0; padding:0} .widget ul li .children li {border-top:solid 1px #f6f6f6; border-bottom:none} .widget a {line-height:18px; padding:2 5px 2px 0; display:inline-block} .widget a:hover {text-decoration:underline} .widget #calendar_wrap {padding:60px 25px 0 25px} .widget #calendar_wrap .pad {margin:0; border:none} .widget_calendar .lightbar {display:none} .widget #wp-calendar {line-height:18px; width:100%; font-size:12px; text-transform:uppercase} .widget #wp-calendar caption {position:absolute; margin:-80px 0 0 -25px; font-weight:normal; font-size:11px; text-align:left; color:#fff; background:#378e9f; padding:15px 25px 15px 25px} .widget #wp-calendar th {text-align:center; padding:10px 5px 5px 5px; font-size:11px} .widget #wp-calendar tbody {background:#f6f6f6} .widget #wp-calendar tbody td {text-align:center; padding:5px} .widget #wp-calendar tbody td a {width:100%; height:100%; background:#378e9f; color:#fff} .widget #wp-calendar tfoot td {padding:15px 0 12px 0} .widget select {margin:25px 25px 20px 25px} .widget .textwidget {margin:22px 25px 15px 25px} .widget .textwidget select {width:95%; margin:0} .widget p {text-align:left !important; margin:0 0 15px 0; font-size:12px; line-height:19px} .widget .wp-smiley {width:auto; height:auto} .widget p img, .widget .wp-caption img {width:100%; height:auto} .widget p.wp-caption-text img {width:auto; height:auto} .widget_rss ul li, #post .widget_rss ul li {font-size:12px; text-transform:none; line-height:19px} .widget_rss ul li .rsswidget, #post .widget_rss ul li .rsswidget {text-transform:uppercase; font-size:11px; line-height:17px} .widget_rss ul li .rss-date, #post .widget_rss ul li .rss-date {display:block; text-transform:uppercase; font-size:11px} .widget_rss ul li .rssSummary, #post .widget_rss ul li .rssSummary {margin:10px 0 0 0; color:#444} .widget_rss ul li cite, #post .widget_rss ul li cite {text-transform:uppercase; font-style:normal; font-size:11px} .widget .tagcloud, #post .widget .tagcloud {padding:18px 20px 15px 20px} .widget .tagcloud a, #post .widget .tagcloud a {padding:5px} .widget #searchform, #post .widget #searchform {padding:25px 25px 0 25px} .widget #searchform input[type=text], #post .widget #searchform input[type=text] {float:left; display:block; width:65%; height:38px; line-height:38px} .widget #searchform input[type=submit], #post .widget #searchform input[type=submit] {float:right; width:30%; display:block} /* ==================================================================================== */ /* EXTRAS */ /* ==================================================================================== */ /* TESTIMONIALS */ .testimonials {overflow:hidden} .testimonials .people {margin:0 -14px 0 0; overflow:hidden} .testimonials .people li {display:inline-block; word-spacing:-2px; margin:0 14px 14px 0; width:44px; height:44px} .testimonials .people li img {display:block; opacity:0.2; width:45px; height:45px; cursor:pointer} .testimonials .people li img.current {opacity:1 !important} .testimonials .person {font-size:11px !important; text-transform:uppercase; margin:0; color:#888; font-weight:normal !important } /* TOOLTIP */ .popup-msg-box {display:none; opacity:0; margin-top:-60px; text-transform:none; font-size:13px; font-weight:300; background:#3f4142; padding:12px 16px 13px 16px; margin-left:-16px; position:absolute; border-radius:1px; -moz-border-radius:1px; -webkit-border-radius:1px} .popup-msg-box .pointer {opacity:0.9; position:absolute; background:url(img/tooltip-pointer.png) no-repeat; width:24px; height:9px; margin-top:30px; left:30px} /* FANCYBOX IMAGES */ .gallery {overflow:hidden; margin:20px -25px 0 0} .gallery li {float:left; display:block; width:120px; height:100px; margin:0 25px 25px 0; word-spacing:0; background:#fff} .gallery li a img {opacity:1; width:120px; height:100px; display:block} .gallery li a:hover img {opacity:0.7} /* TABS */ .tabs {text-transform:uppercase; overflow:hidden; background:url(img/tab-border.png) repeat-x bottom #f6f6f6; padding:10px 0 0 10px; margin-bottom:-7px} .tabs li {float:left} .tabs li a {color:#888; background:url(img/tab-border.png) repeat-x bottom #f6f6f6; padding:20px 15px 27px 15px; display:block; font-size:11px} .tabs li a:hover {text-decoration:none; background:url(img/tab-border.png) repeat-x bottom #378e9f; color:#fff} .tabs li a.current {color:#fff !important; background:url(img/tab-bg.png) no-repeat center bottom #378e9f !important;} .tabbed-content {clear:both; overflow:hidden; display:none} .tabbed-content h2.hidden-title {display:none !important} /* ACCORDIAN */ .accordion {border:none; overflow:hidden} .accordion li {background:#fff} .accordion .content {display:none} .accordion h3 {overflow:hidden; font-size:11px; font-weight:normal; text-transform:uppercase; background:#f6f6f6} .accordion h3 a {display:block; text-decoration:none; cursor:pointer; padding:25px; background:url(img/up-down2.png) no-repeat 100% -61px #f6f6f6; color:#888} .accordion h3 a.current {color:#fff !important; background:url(img/up-down2.png) no-repeat 100% 0px #378e9f} .accordion h3 a:hover {background-color: #378e9f; color:#fff} .laccordion h3 {border-top:solid 1px #fff} .laccordion h3 a {opacity:0.5; color:#333; background:url(img/up-down.png) no-repeat 100% -61px #f6f6f6 !important} .laccordion h3 a.current {color:#333 !important; background:url(img/up-down.png) no-repeat 100% 0px #f6f6f6 !important} .laccordion h3 a:hover {opacity:0.9; background-color:#f6f6f6 !important; color:#333} /* PLANS */ .plan {margin:25px 0 0 25px; overflow:hidden} .plan .header {display:block; height:69px; line-height:69px; background:#f6f6f6; font-size:11px; text-transform:uppercase; font-weight:normal; color:#444} .plan .header h3 {margin:0 30px 0 30px; font-weight:normal; float:left} .plan .header .buy {opacity:0.8; float:right; font-weight:normal; display:inline-block; padding:0 20px 0 20px; margin:10px 10px 0 0; line-height:49px; color:#fff; text-transform:uppercase; font-size:11px; background:url(img/btn-bg2.png) bottom repeat-x #378e9f; border-radius:1px; -moz-border-radius:1px; -webkit-border-radius:1px} .plan .header .buy:hover {opacity:0.999} .plan .plan-price {color:#3f4142; background: #f6f6f6; text-align:center; text-transform:uppercase; line-height:160px; padding-bottom:40px} .plan .plan-price .dollar {font-size:19px; top:-34px; position:relative; font-weight:300} .plan .plan-price .amount {font-size:70px; letter-spacing:-2px; font-weight:bold;} .plan .plan-price .sub {font-size:15px; top:2px; position:relative; font-weight:300} .plan ul {background:#fff; font-size:13px; font-weight:300; overflow:hidden; padding:10px 0 10px 0} .plan ul li {margin:0 30px 0 30px; padding:0; text-align:center; line-height:59px; overflow:hidden; border-top:solid 1px #f6f6f6} .plan ul li.first-row {border-top:none} .plan ul li.last-row {border-bottom:none} .plan .banner {margin-top:-69px; display:block; text-align:center; line-height:69px; font-size:11px; text-transform:uppercase; color:#fff} .popular .header {background:#378e9f; color:#fff;} .popular .plan-price {background:#378e9f; color:#fff} .popular .buy {opacity:0.999 !important; background:url(img/btn-bg.png) bottom repeat-x #eee !important; color:#378e9f !important} .popular .buy:hover {background-color: #fff !important} /* SOCIAL ICONS */ .social-icons {margin:21px -21px 0 0; overflow:hidden} .social-icons li {float:left; margin:0; width:40px; height:40px} .social-icons li a {display:block; width:40px; height:40px} .social-icons li a span {background-color:#ccc !important; display:block; width:17px; height:16px; text-indent:100%; white-space: nowrap; overflow: hidden; border-top:solid 1px #f6f6f6} .social-icons li a.facebook span {background:url(img/social-icons.png) no-repeat -1px -47px} .social-icons li a.twitter span {background:url(img/social-icons.png) no-repeat -1px -108px} .social-icons li a.linkedin span {background:url(img/social-icons.png) no-repeat -1px -168px} .social-icons li a.gplus span {background:url(img/social-icons.png) no-repeat -1px -228px} .social-icons li a.dribbble span {background:url(img/social-icons.png) no-repeat -1px -288px} .social-icons li a.pinterest span {background:url(img/social-icons.png) no-repeat -1px -347px} .social-icons li a.youtube span {background:url(img/social-icons.png) no-repeat 0 -408px} .social-icons li a.vimeo span {background:url(img/social-icons.png) no-repeat -1px -468px} .social-icons li a.tumblr span {background:url(img/social-icons.png) no-repeat -1px -528px} .social-icons li a.facebook:hover span {background-color:#3c639c !important} .social-icons li a.twitter:hover span {background-color:#38afd2 !important} .social-icons li a.linkedin:hover span {background-color:#4597bc !important} .social-icons li a.gplus:hover span {background-color:#da4235 !important} .social-icons li a.dribbble:hover span {background-color:#e8558c !important} .social-icons li a.pinterest:hover span {background-color:#cc2127 !important} .social-icons li a.youtube:hover span {background-color:#c41d1d !important} .social-icons li a.vimeo:hover span {background-color:#09a0c8 !important} .social-icons li a.tumblr:hover span {background-color:#304e6c !important} /* AUDIO */ .post-audio-wrapper .ogg, .post-audio-wrapper .mp3 {display:none} .player {display: block; height: 59px; width: 100%; position: relative; background:#3f4142; cursor: default} .playtoggle {opacity:0.8; position: absolute; top: 14px; left: 10px; width: 30px; height: 30px; background: url(img/player.png) no-repeat 0 7px; cursor: pointer} .playtoggle.playing {background:url(img/ico-equalizer.gif) no-repeat 8px 7px} .playtoggle:active {top: 15px} .playtoggle:hover {opacity:0.999} .timeleft {position: absolute; text-align:right; right:15px; margin-top:24px; font-size: 11px; color: #fff} .gutter {position: absolute; z-index:0; top: 29px; left: 50px; right: 60px; height: 1px; background: #4a4e51; border-top:solid 1px #323639} .loading {background: #fff; height:10px; width:10px} .played {position:absolute; width:0; height:1px; z-index:1; background:#378e9f} .handle {opacity:0.8; position: absolute; z-index:2; top: -7px; left: 0; width: 7px; height: 7px; margin-left: -2px; border:solid 4px #323639; background: #378e9f; cursor: pointer} .handle:hover {opacity:0.999} .post-audio-wrapper {margin:0} .post-audio-wrapper #timeleft {margin-top:-5px} /* ==================================================================================== */ /* JQUERY PLUGINS */ /* ==================================================================================== */ /* FANCYBOX */ .fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp {padding: 0; margin: 0; border: 0; outline: none; vertical-align: top} .fancybox-wrap {position: absolute; top: 0; left: 0; z-index: 9999999} .fancybox-skin {position: relative; background: #fff} .fancybox-opened {z-index: 9998030} .fancybox-outer, .fancybox-inner {position: relative} .fancybox-inner {overflow: hidden} .fancybox-type-iframe .fancybox-inner {-webkit-overflow-scrolling: touch} .fancybox-error {color: #444; margin: 0; padding: 15px;white-space: nowrap} .fancybox-image, .fancybox-iframe {display: block; width: 100%; height: 100%} .fancybox-image {max-width: 100%; max-height: 100%} #fancybox-loading {position: fixed; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; opacity: 0.8; cursor: pointer; z-index: 9998060} #fancybox-loading div {width: 44px; height: 44px; background: url(img/loader.gif) no-repeat center center; padding:5px 20px 5px 20px} .fancybox-close {position: absolute; background:url(img/arrows-med.png) -86px 0 #f6f6f6; bottom:5px; right:5px; width: 40px; height: 39px; cursor: pointer; z-index: 9998060} .fancybox-close:hover {background-color:#eee} .fancybox-nav {position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; background: transparent url(img/blank.gif); /* helps IE */ -webkit-tap-highlight-color: rgba(0,0,0,0); z-index: 9998040} .fancybox-prev {left: 0} .fancybox-next {right: 0} .fancybox-nav span {position: absolute; top: 50%; width: 35px; height: 33px; margin-top: -18px; cursor: pointer; z-index: 9998040; opacity:0} .fancybox-prev span {left: 10px; background:url(img/arrows.png) -2px -3px #444} .fancybox-next span {right: 10px; background:url(img/arrows.png) -47px -3px #444} .fancybox-nav:hover span {opacity:0.5} .fancybox-tmp {position: absolute; top: -99999px; left: -99999px; visibility: hidden;max-width: 99999px;max-height: 99999px;overflow: visible !important} .fancybox-lock {overflow: hidden} .fancybox-overlay {position: absolute; top: 0; left: 0; overflow: hidden !important; display: none; z-index: 9998010; background: url(img/fancybox_overlay.png)} .fancybox-overlay-fixed {position: fixed; bottom: 0; right: 0} .fancybox-lock .fancybox-overlay {overflow: auto; overflow-y: scroll} .fancybox-title {visibility: hidden; font-size:11px; text-transform:uppercase; position: relative; z-index: 9998050} .fancybox-opened .fancybox-title {visibility: visible} .fancybox-title-inner-wrap {padding:20px } .fancybox-title-over-wrap {position: absolute; bottom: 0; left: 0; color: #fff; padding:20px; background: #378e9f} /* ==================================================================================== */ /* CSS3 ANIMATIONS */ /* ==================================================================================== */ /* ISOTOPE TRANSITIONS */ .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity; } /* color and background-color */ #nav #links li a, .subnav li a, .accordion h3 a, .tabs li a, .chunky, #search li a, #post-nav a { -webkit-backface-visibility: hidden !important; -webkit-transition: color 0.2s linear, background-color 0.2s linear; -moz-transition: color 0.2s linear, background-color 0.2s linear; -ms-transition: color 0.2s linear, background-color 0.2s linear; -o-transition: color 0.2s linear, background-color 0.2s linear; transition: color 0.2s linear, background-color 0.2s linear; } /* opacity */ #place_photo .close, .reply a, #jstwitter .paginate li a, .laccordion h3 a, .btn-link, #load-more a, .post-intro h3 a, input[type=submit], .buy, #buy, .fancybox-nav span, #gallery li img, #gallery li span, #portfolio-preview li img, #portfolio-slides #resize, .gallery li a img { -webkit-backface-visibility: hidden !important; -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -ms-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } /* transform and opacity */ #portfolio-preview li .description { -webkit-backface-visibility: hidden !important; -webkit-transition: opacity 0.2s ease-in, -webkit-transform 0.2s ease-in; -moz-transition: opacity 0.2s ease-in, -moz-transform 0.2s ease-in; -ms-transition: opacity 0.2s ease-in, -ms-transform 0.2s ease-in; -o-transition: opacity 0.2s ease-in, -o-transform 0.2s ease-in; transition: opacity 0.2s ease-in, transform 0.2s ease-in; } /* portfolio fullscreen slides */ #portfolio-slides .rslides img { -webkit-backface-visibility: hidden !important; -webkit-transition: top 0.2s linear; -moz-transition: top 0.2s linear; -ms-transition: top 0.2s linear; -o-transition: top 0.2s linear; transition: top 0.2s linear; } /* opacity and left */ .handle { -webkit-backface-visibility: hidden !important; -webkit-transition: opacity 0.2s linear, left 0.2s ease-in; -moz-transition: opacity 0.2s linear, left 0.2s ease-in; -ms-transition: opacity 0.2s linear, left 0.2s ease-in; -o-transition: opacity 0.2s linear, left 0.2s ease-in; transition: opacity 0.2s linear, left 0.2s ease-in; } /* opacity and background */ .playtoggle, .rslides_nav, .twitter-corner, .social-icons li a span, .fancybox-close { -webkit-backface-visibility: hidden !important; -webkit-transition: opacity 0.2s linear, background 0.2s linear; -moz-transition: opacity 0.2s linear, background 0.2s linear; -ms-transition: opacity 0.2s linear, background 0.2s linear; -o-transition: opacity 0.2s linear, background 0.2s linear; transition: opacity 0.2s linear, background 0.2s linear; } /* search */ #search { -webkit-backface-visibility: hidden !important; -webkit-transition: margin 0.2s linear; -moz-transition: margin 0.2s linear; -ms-transition: margin 0.2s linear; -o-transition: margin 0.2s linear; transition: margin 0.2s linear; } /* ==================================================================================== */ /* CENTER CONTENT FOR (ie 404 PAGE) */ /* ==================================================================================== */ .centerit {position:fixed; width:300px; left:50%; margin-left:-150px; text-align:center; top:50%; margin-top:-100px} .centerit img {display:inline-block; width:140px} .centerit p {font-size:13px; color:#444; margin:20px 0 0 0; line-height:20px} /* ==================================================================================== */ /* FOOTER */ /* ==================================================================================== */ #footer {display:none; position:fixed; z-index:999; bottom:0; width:100%; height:70px; overflow:hidden; clear:both; background:#3f4142} #footer p {color:#888; margin:31px 0 0 30px; font-weight:300; font-size:11px} #footer p a{color:#fff; border:none;} /* ==================================================================================== */ /* MEDIA QUERY 1240 - 1025 */ /* ==================================================================================== */ @media only screen and (min-width: 1025px) and (max-width: 1240px) { /* PORTFOLIO STYLE 2 */ #portfolio2 li a {height:200px} #portfolio2 li a.doubleh {height:425px} } /* ==================================================================================== */ /* MEDIA QUERY 1024 - 769 */ /* ==================================================================================== */ @media only screen and (min-width: 769px) and (max-width: 1024px) { /* PORTFOLIO */ #portfolio-preview li {width:50%} /* GALLERY */ #gallery {margin:0 25px 30px 0} #gallery li {width:50%} /* BRICKS (CONTENT BOXES FOR PAGE) */ #bricks {margin:0 25px 30px 0} #bricks .brick, #bricks .half, #bricks .quarter { width:50%} #bricks .full { width:100%} /* ORDER */ .scraps {width:50% !important} .scraps .brick {width:100% !important} #preview {width:50%; float:left} /* SINGLE POST */ #post .brick {width:40%} #post #main {float:right; width:60%} #post #main .lightbar {display:block} #post .brick .content {padding:25px 25px 15px 25px} .comments {padding:25px 25px 15px 25px} .comments h3#comments {margin:-10px 0 10px -25px} #post .brick .summary h2 {margin:0; text-align:left} #post .brick .summary p.time {float:none; text-align:left} #post .brick .summary p.sideways {display:none} #post .brick .summary .share {display:none} /* PORTFOLIO STYLE 2 */ #portfolio2 li {width:50%} /* PROJECT PAGE */ #project .media .extras li {width:100%; float:none; clear:both} #project .media .extras li .box .share {margin:0} #project .media .extras li .box .share .social-icons li {width:37px !important; float:left; clear:none} } @media only screen and (min-width: 769px) { #nav #links li {display:block !important} #nav #links li#menu {display:none !important} } /* ==================================================================================== */ /* MEDIA QUERY 768 - 1 */ /* ==================================================================================== */ @media only screen and (device-width: 768px), only screen and (min-width: 1px) and (max-width: 768px) { body {padding:70px 0 58px 0; background:#e2e2e2} /* PORTFOLIO */ #portfolio-slides .rslides {margin:0 auto 0 auto; overflow:auto} #portfolio-slides .rslides img {width:100% !important; height:auto !important; margin-bottom:-100px} #portfolio-slides .rslides .caption {display:none !important} #portfolio-slides #resize {display:none !important} #portfolio-slides .prev {z-index:999; top:15px; left:14px} #portfolio-slides .next {z-index:999; top:15px; left:54px} #portfolio-slides #title-bar {z-index:998; background:none} #portfolio-slides #title-bar h3 {display:none} /* MENU */ #nav {position:absolute; height:70px} #nav #logo {margin:0 0 0 10px} #nav #logo img {max-height:70px} #nav #links {width:180px; margin:10px 10px 0 0} #nav .add-border {box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.1); -webkit-box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.1)} #nav #links li {display:none; float:none; clear:both} #nav #links li a:hover {background:#f6f6f6} #nav #links li#menu {display:block} #nav #links li.drop ul.children, #nav #links li.drop ul.sub-menu {display:block !important; margin:-50px 0 0 0; width:100%; position:relative; clear:both; border:none} #nav #links li.drop ul {border-top:none} #nav #links li.drop .spacer {display:none} /* SUBNAV */ .subnav {bottom:9px; right:10px} .subnav li a {padding:15px} /* SEARCH BOX */ #search {right:10px; bottom:4px} .search-border {margin-bottom:6px} /* PORTFOLIO */ #portfolio-preview li {width:100%} /* GALLERY */ #gallery {margin:0 10px 10px 0} #gallery li {width:100%} #gallery li a {margin:10px 0 0 10px} /* BRICKS (CONTENT BOXES FOR PAGE) */ #bricks {margin:0 10px 10px 0} #bricks .brick .pad {margin:10px 0 0 10px} #bricks .brick, #bricks .half, #bricks .quarter { width:100%} /* ORDER */ .scraps {width:100% !important} .scraps .brick {width:100% !important} .scraps .brick .pad {margin:10px 10px 0 10px !important} #preview {width:100%} #preview .pad {margin:0 10px 10px 10px !important} #buy {right:10px; bottom:8px} /* SINGLE POST */ #post {margin:0 10px 10px 0} #post .brick {width:100%} #post .brick .pad {margin:10px 0 0 10px} #post .brick .summary {margin:10px 0 0 10px} #post #main {float:none; width:100%; clear:both} #post #main .lightbar {display:block} #post #main p.info {display:block} #post .brick .content {padding:25px 25px 15px 25px} .comments {padding:25px 25px 15px 25px} .comments h3#comments {margin:-10px 0 10px -25px} #post-nav {right:10px} #post .brick .summary h2 {margin:0 0 25px 0; text-align:left} #post .brick .summary p.time {float:none; text-align:left; margin-top:25px} #post .brick .summary p.sideways {display:none} #post .brick .summary .share {display:none} /* PLANS */ .plan {margin:10px 0 0 10px; overflow:hidden} /* CLOSE BUTTON IN MAP PHOTO */ #place_photo .close {top:15px} /* FOOTER */ #footer {height:60px} #footer .long {display:none} #footer p {margin:26px 0 0 10px} /* PORTFOLIO STYLE 2 */ #portfolio2 {margin:0 10px 10px 0} #portfolio2 li {width:100%} #portfolio2 li a {margin:10px 0 0 10px} #portfolio2 li .description span {margin-left:10px} /* PROJECT PAGE */ #project {margin:0 10px 10px 0} #project .brick .pad {margin:10px 0 0 10px} #project .media, #project .summary {width:100%; clear:both; float; none} #project .summary .pad {height:auto} #project .media .extras li .box {height:200px; margin:10px 0 0 10px} } /* ==================================================================================== */ /* MEDIA QUERY 641-768 */ /* ==================================================================================== */ @media only screen and (min-width: 641px) and (max-width: 768px) { /* PORTFOLIO */ #portfolio-preview li {width:50%} /* GALLERY */ #gallery li {width:50%} /* BRICKS */ #bricks .brick, #bricks .half, #bricks .quarter { width:50%} #bricks .full { width:100%} } /* ==================================================================================== */ /* MEDIA QUERY 479-1 */ /* ==================================================================================== */ @media only screen and (min-width: 1px) and (max-width: 479px) { body {padding-top:193px} #nav #links {width:180px; margin:10px 10px 0 0} #nav .add-border {box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.1); -webkit-box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.1)} #nav #links li {display:none; float:none; clear:both} #nav #links li a:hover {background:#f6f6f6} #nav #links li#menu {display:block} #nav #links li.drop ul.children, #nav #links li.drop ul.sub-menu {display:block !important; margin:-50px 0 0 0; width:100%; position:relative; clear:both; border:none} #nav #links li.drop ul {border-top:none} #nav #links li.drop .spacer {display:none} /* MENU */ #nav {height:auto; display:block; padding:30px 0 40px 0} #nav #logo {float:none; text-align:center; margin:0} #nav #links {clear:both; float:none; margin:0 auto} /* MISC */ .subnav {display:none} #footer {position:relative; margin-bottom:-70px; text-align:center} #post .brick .summary p.time {float:none; text-align:left; margin-top:55px} #search {display:none} /* PORTFOLIO STYLE 2 */ #portfolio2 li a {height:150px} #portfolio2 li a.doubleh {height:325px} /* PROJECT PAGE */ #project .media .extras li {width:100%; float:none; clear:both} #project .media .extras li .box .share {margin:0} #project .media .extras li .box .share .social-icons li {width:37px !important; float:left; clear:none} } /* ==================================================================================== */ /* RETINA DISPLAYS */ /* ==================================================================================== */ @media only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and ( min--moz-device-pixel-ratio: 1.25), only screen and ( -o-min-device-pixel-ratio: 1.25/1), only screen and ( min-device-pixel-ratio: 1.25), only screen and ( min-resolution: 200dpi), only screen and ( min-resolution: 1.25dppx) { body {-webkit-text-stroke: 0; -webkit-backface-visibility: visible} #nav #links li#menu a {background:url(img/up-down@2x.png) no-repeat 100% -67px; background-size:61px 122px} #nav #links li#menu a.active {background:url(img/up-down@2x.png) no-repeat 100% -7px; background-size:61px 122px} #search li#togglebtn a {background:url(img/up-down3@2x.png) no-repeat 102% -7px #494949; background-size:61px 122px} #search li#togglebtn a.active {background:url(img/up-down3@2x.png) no-repeat 102% -67px #555 !important; background-size:61px 122px} #search li#type input[type=submit] {background:url(img/ico-search@2x.png) no-repeat -5px -35px; background-size:39px 78px} #portfolio-slides .prev {background:url(img/arrows-med@2x.png) 2px 0 #555; background-size:336px 40px} #portfolio-slides .next {background:url(img/arrows-med@2x.png) -46px 0 #555; background-size:336px 40px} #title-bar .close {background:url(img/arrows-med@2x.png) -86px 0 #f6f6f6; background-size:336px 40px} .brick .slides .next {background:url(img/arrows-med@2x.png) no-repeat -45px -2px #555; background-size:336px 40px} .brick .slides .prev {background:url(img/arrows-med@2x.png) no-repeat 1px -2px #555; background-size:336px 40px} #wizard .step li {background:url(img/ico-radio@2x.png) no-repeat left 24px; background-size:11px 70px} #wizard .step li:hover {background:url(img/ico-radio@2x.png) no-repeat 25px 24px #f6f6f6; background-size:11px 70px} #wizard .step li.checked {background:url(img/ico-radio@2x.png) no-repeat 25px -35px #f6f6f6; background-size:11px 70px} #wizard .step li.checked:hover {background:url(img/ico-radio@2x.png) no-repeat 25px -35px #f6f6f6; background-size:11px 70px} #wizard .step ul.multis li {background:url(img/ico-checkbox@2x.png) no-repeat left 24px; background-size:11px 70px} #wizard .step ul.multis li:hover {background:url(img/ico-checkbox@2x.png) no-repeat 25px 24px #f6f6f6; background-size:11px 70px} #wizard .step ul.multis li.checked {background:url(img/ico-checkbox@2x.png) no-repeat 25px -35px #f6f6f6; background-size:11px 70px} #wizard .step ul.multis li.checked:hover {background:url(img/ico-checkbox@2x.png) no-repeat 25px -35px #f6f6f6; background-size:11px 70px} #wizard .arrows li.prev span {background:url(img/paginate-arrows@2x.png) no-repeat; background-size:41px 10px} #wizard .arrows li.next span {background:url(img/paginate-arrows@2x.png) no-repeat -36px 0; background-size:41px 10px} #post-nav .prev {background:url(img/arrows-med@2x.png) 2px 0 #555; background-size:336px 40px} #post-nav .next {background:url(img/arrows-med@2x.png) -46px 0 #555; background-size:336px 40px} #post-nav span.all a {background:url(img/ico-blog.png) #555 no-repeat center 49%; background-size:14px 14px} .accordion h3 a {background:url(img/up-down2@2x.png) no-repeat 100% -61px #f6f6f6; background-size:61px 122px} .accordion h3 a.current {background:url(img/up-down2@2x.png) no-repeat 100% 0 #378e9f !important; background-size:61px 122px} .laccordion h3 a {background:url(img/up-down@2x.png) no-repeat 100% -61px #f6f6f6; background-size:61px 122px} .laccordion h3 a.current {background:url(img/up-down@2x.png) no-repeat 100% 0 #f6f6f6 !important; background-size:61px 122px} .tabs {background:url(img/tab-border@2x.png) repeat-x bottom #f6f6f6; background-size:1px 7px} .tabs li a {background:url(img/tab-border@2x.png) repeat-x bottom #f6f6f6; background-size:1px 7px} .tabs li a:hover {background:url(img/tab-border@2x.png) repeat-x bottom #378e9f; background-size:1px 7px} .tabs li a.current {background:url(img/tab-bg@2x.png) no-repeat center bottom #378e9f !important; background-size:180px 7px} #loader {background:url(img/loader@2x.gif) no-repeat center center; background-size:80px 40px} #portfolio-video iframe {background:url(img/loader@2x.gif) no-repeat 50% 55%; background-size:80px 40px} #wizard #processing .header {background:url(img/loader2@2x.gif) no-repeat 93% center #378e9f; background-size:24px 6px} #jstwitter {background:url(img/loader2@2x.gif) no-repeat center center; background-size:24px 6px} #cform-processing h2 {background:url(img/loader2@2x.gif) no-repeat 93% center #378e9f; background-size:24px 6px} #bricks #load-more .loading-posts {background-image:url(img/loader@2x.gif); background-repeat:no-repeat; background-position: 100% 50%; background-size:80px 40px} .brick .video iframe {background:url(img/loader2@2x.gif) no-repeat center 55%; background-size:24px 6px} #fancybox-loading div {background: url(img/loader@2x.gif) no-repeat center center; background-size:80px 40px} } /* WP */ .wp-caption, .wp-caption-text, .sticky, .gallery-caption, .bypostauthor, .aligncenter {}