/* This File Contains All Responsive CSS - Sweet! */ /* Custom Drop-Down ================================================== */ #navigation .selector option{ margin: 0; background:#212121; color: #fff; -webkit-appearance:none; text-align: center; cursor: pointer; padding: 5px 0; } #navigation .selector, #navigation .selector span{ text-align: center; cursor: pointer !important; background:url("../images/nav-down.png") 98% center no-repeat; -webkit-font-smoothing:antialiased; } #navigation .selector, #navigation .selector *{ margin:0; padding:0; } #navigation .selector select{ top:0px; left:0px; } #navigation .selector{ width:97%; font-size:13px; font-weight:bold; } #navigation .selector span{ cursor:pointer; color: #fff; } #navigation .selector{ height: 40px; line-height: 40px; display:-moz-inline-box; display:inline-block; vertical-align:middle; zoom:1; *display:inline; } #navigation .selector select:focus{outline:0; } #navigation .selector{ position:relative; padding-left:10px; overflow:hidden; } #navigation .selector span{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #navigation .selector select{ position:absolute; height:40px; background:none; width:97%; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:12px; font-weight:500; border:0 !important; } /* General ================================================== */ .post figure img { max-width: 100%; } .post img{ max-width: 100%; } /*hide redundant menu*/ #navigation select { display: none; width: 100% !important; } #navigation .selector { display: none; margin-top: 5px; } /* Hide Book now for iPad Landscape ================================================== */ @media only screen and (min-width: 959px) and (max-width: 1024px) { .dc-floater-content {display: none;} } /* Apply To All Responsive Layouts ================================================== */ @media only screen and (device-width: 768px) { } /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 728px */ @media only screen and (min-width: 768px) and (max-width: 959px) { /*hide things*/ /*main*/ #wrap{ width: 728px; } #navigation{ width: 158px; } #main{ width: 570px; } .dc-floater-content {display: none;} #wrap{ background-image: url("../images/wrap-bg-responsive.png"); } /*nav*/ .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 158px; } /*home*/ #slider-wrap{ height: auto; } #home-tagline{ font-size: 16px; } /*portfolio*/ .portfolio-item, .portfolio-item a{ width: 190px; height: 145px; } .portfolio-overlay{ width: 150px; height: 115px; } .portfolio-attachment img, #portfolio-slides img, .post-thumbnail img{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #portfolio-slides .caption, #portfolio-slides .flex-control-nav{ width: 490px; } /*footer*/ #footer-left, #footer-middle, #footer-right{ float: left; width: 210px; } #footer-middle{ margin-left: 19px; margin-right: 19px; } #footer .boxed-flickr-widget a, #footer .widget-recent-portfolio a, #footer .boxed-flickr-widget img, #footer .widget-recent-portfolio img{ width: 36px; height: 36px; } } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 290px */ @media only screen and (max-width: 767px) { /*hide stuff*/ #copy-info{ display: none !important; } a#toplink{ display: none !important; } .caption{ display: none; } .dc-floater-content {display: none;} /*display dropdown nav*/ #navigation .selector, #navigation select { display: inline-block; } #navigation ul { display: none; } #navigation{ background:#212121; padding: 0; height: 40px; line-height: 40px; float: none; width: 100%; padding: 0; margin: 0; } /*main*/ #wrap{ width: 290px; } #navigation{ width: 100%; } #main{ width: 100%; } #wrap, #main{ background-image: none; } /*logo*/ #logo{ text-align: center; } #logo img{ display: inline-block; } /*social*/ #social { position: inherit; display: block; top: 0; right: 0; width: 100%; margin-top: 30px; margin-bottom: -15px; text-align: center; margin-left: -15px; } #social li, #social a{ display: inline-block; float: none; } /*home*/ #slider-wrap{ height: auto; } #home-tagline{ font-size: 14px; } #home-projects .portfolio-item:last-child{ display: none; } /*portfolio*/ #portfolio-filter{ padding: 10px 10px 0; margin-right: -8px; } #portfolio-filter ul.filter, ul.filter li, ul.filter a{ height: auto; line-height: 1em; text-shadow: none; } ul.filter{float: none;border: none;} ul.filter li{float: left;display: block; } ul.filter a{float: left;padding: 5px 10px; border: none; -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px; margin-right: 8px; margin-bottom: 8px; background: #7d7d7d; } ul.filter a:hover{ background: #525252; } .portfolio-item, .portfolio-item a{ width: 145px; height: 110px; } .portfolio-overlay{ width: 105px; height: 125px; } .portfolio-attachment img, #portfolio-slides img, .post-thumbnail img{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #portfolio-slides .caption, #portfolio-slides .flex-control-nav{ width: 230px; } #single-portfolio-related .portfolio-item, #single-portfolio-related .portfolio-item a{ width: 145px; height: 112px; } #single-portfolio-related .portfolio-overlay{ width: 105px; } #single-portfolio-related .portfolio-item:last-child{ display: none; } /*blog*/ .loop-entry-left{ width: 100%; } .loop-entry-right{ width: 100%; margin-top: 10px; padding-top: 30px; border-top: 5px solid #eee; } #single-nav .next, #single-nav .prev{ display: none; } .prev-responsive, .next-responsive{ display: block; } .reply{ width: 50px; text-align: center; top: 55px; display: block; left: -70px; } /*footer*/ #footer{ background: #000 !important; } #footer-left, #footer-middle, #footer-right{ float: none; width: 100%; margin-top: 25px; } #footer-middle{ margin-left: 0; margin-right: 0; } #footer-bottom{ border-top: 4px solid #333; } #copyright, #footer-menu, #jazeffect{ text-align: center; width: 100%; float: none; } #footer .boxed-flickr-widget a, #footer .widget-recent-portfolio a, #footer .boxed-flickr-widget img, #footer .widget-recent-portfolio img{ width: 41px; height: 41px; } /*shortcodes*/ .google-map{ overflow: hidden; } .tab-shortcode ul.ui-tabs-nav{ border: none; margin: 0; } .tab-shortcode ul.ui-tabs-nav li, .tab-shortcode ul.ui-tabs-nav li a{ width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0;border: none; position: inherit; } .tab-shortcode ul.ui-tabs-nav li a{ border: 1px solid #ddd !important; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .tab-shortcode ul.ui-tabs-nav li{ margin-bottom: 5px; } .tab-shortcode ul.ui-tabs-nav .ui-state-active a { height: 29px; top: inherit; padding-top: 0; } .tab-shortcode .tab_content{ border-top: 1px solid #ddd; } .one-half, .one-third, .one-fourth, .one-fifth, .one-sixth, .one-two-third, .one-three-fourths { width: 100%; margin: 0 0 25px; } .alert-red.alignright, .alert-yellow.alignright, .alert-green.alignright, .alert-blue.alignright, .alert-red.alignleft, .alert-yellow.alignleft, .alert-green.alignleft, .alert-blue.alignleft { width: 100%; margin: 25px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /*comments*/ .children { margin: 30px 0 0; } .children li.depth-2, .children li.depth-3, .children li.depth-4, .children li.depth-5, .children li.depth-6, .children li.depth-7, .children li.depth-8, .children li.depth-9, .children li.depth-10 { margin: 0 } } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 450px */ @media only screen and (min-width: 480px) and (max-width: 767px) { /*main*/ #wrap{ width: 450px; } /*home*/ #home-projects .portfolio-item:last-child{ display: block; } /*portfolio*/ #home-projects .portfolio-item, #home-projects .portfolio-item a, .portfolio-item, .portfolio-item a, #single-portfolio-related .portfolio-item, #single-portfolio-related .portfolio-item a{ width: 150px; height: 116px; } #home-projects .portfolio-overlay, #single-portfolio-related .portfolio-overlay, .portfolio-overlay{ width: 110px; } #home-projects .portfolio-item:last-child{ display: block; } .portfolio-attachment img, #portfolio-slides img, .post-thumbnail img{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #portfolio-slides .caption, #portfolio-slides .flex-control-nav{ width: 420px; } #single-portfolio-related .portfolio-item:last-child{ display: block; } /*footer*/ #footer .boxed-flickr-widget a, #footer .widget-recent-portfolio a, #footer .boxed-flickr-widget img, #footer .widget-recent-portfolio img{ width: 38px; height: 38px; } #footer .boxed-flickr-widget li:last-child, #footer .widget-recent-portfolio li:last-child{ display: none; } .footer-widget{ margin-bottom: 0px; } }