/* QUERIES FOR IPAD/TABLETPC PORTRAIT AND LANDSSCAPE */ @media only screen and (max-width: 1100px), only screen and (min-device-width: 768px) and (max-device-width: 1100px) { /* Forms ---------------------------------------- */ input[type=text], input[type=password] { width: 190px; } textarea { width: 290px; } /*---------------------------------------------- General ID's or Classes ------------------------------------------------*/ #sidebar { width: 150px; padding-bottom: 80px; } #maincontent { width: 480px; } .wrapper { width: 690px; } .sidebar_section { margin-top: 80px; } .seperator { width: 230px; } .seperatorsmall { width: 80px; } /*---------------------------------------------- Slider ------------------------------------------------*/ #home .slidermain { width: 690px; } #portfolio #slider { margin-bottom: 80px; } /*---------------------------------------------- Pagetop ------------------------------------------------*/ #pagetitle { width: 500px; } /*---------------------------------------------- Footer ------------------------------------------------*/ footer { padding-top: 80px; } /*---------------------------------------------- Portfolio ------------------------------------------------*/ .portfolio-entry, .related-item { margin-right: 30px; margin-bottom: 30px; } .portfolio-entries { padding-bottom: 50px; } .portfolio-entry { margin-right: 30px; margin-bottom: 30px; } .columns4 .portfolio-entry { width: 150px; } .columns3 .portfolio-entry { width: 210px; } .columns2 .portfolio-entry { width: 330px; } .related-item { width: 150px; } .entries-nonspaced {padding-bottom: 80px;} .entries-nonspaced .portfolio-entry { margin-right: 0px; margin-bottom: -1px; } .columns4 .nonspaced { width: 172px; } .columns3 .nonspaced { width: 230px; } .columns2 .nonspaced { width: 345px; } .related-nonspaced .related-item { width: 172px !important; margin: 0; } /*---------------------------------------------- Entries (Blog) ------------------------------------------------*/ #home .post-headline { width: 95px; } #home .full-post-headline { width: 100%; } #blog .entry { padding-bottom: 80px; } #blog .entry-content {width: 400px; } #blog .full-entry-content { width: 100%; } #blog .post-headline {width: 400px; } #blog .full-post-headline { width: 100%; } /*---------------------------------------------- Pagination ------------------------------------------------*/ #pagination { margin-bottom: 80px; } /*---------------------------------------------- Comments ------------------------------------------------*/ #comments { margin-bottom: 80px; } #comments .comment-list { width: 100%; } #comments .full-comment-list { width: 100%; } #comments .comment .children { margin-left: 30px; } /* Leave Comments ------------------------------------------------*/ #leavecomment {margin-bottom: 80px;} #leavecomment .leavecomment-form {width: 100%;} #leavecomment .full-leavecomment-form {width: 100%;} /*---------------------------------------------- Columns Grid ------------------------------------------------*/ .column { padding-bottom: 80px; margin-right: 30px; } .one_full { width: 100%; } .one_half { width: 330px; } .one_third { width: 210px; } .two_third { width: 450px; } .one_fourth { width: 150px; } .two_fourth { width: 330px; } .three_fourth { width: 510px; } .last { margin-right: 0px; } #maincontent .one_half { width: 225px; } #maincontent .one_third { width: 140px; } #maincontent .two_third { width: 310px; } #maincontent .one_fourth { width: 97px; } #maincontent .two_fourth { width: 227px; } #maincontent .three_fourth { width: 351px; } /*---------------------------------------------- Map ------------------------------------------------*/ #map {width: 690px; height: 300px; margin-bottom: 80px; } /*---------------------------------------------- Widget ------------------------------------------------*/ #pagetop .widget { width: 190px; } /*---------------------------------------------- FLICKR WIDGET ------------------------------------------------*/ #flickr-widget #flickr-list li, #dribbble-widget #dribbble-list li { width: 42px !important; } #sidebar #flickr-widget #flickr-list li, #sidebar #dribbble-widget #dribbble-list li { width: 39px; } /*---------------------------------------------- Pricing Table ------------------------------------------------*/ .col3 .price-col { width: 224px; } .col3 .recommended { width: 240px; } .col4 .price-col { width: 166px; } .col4 .recommended { width: 187px; } /*---------------------------------------------- jPlayer ------------------------------------------------*/ div.jp-audio div.jp-type-single div.jp-progress-container { width:340px;} .one_fourth div.jp-volume-bar-container { display: none; } .one_fourth .jp-mute { display: none !important; } .one_third div.jp-audio div.jp-type-single div.jp-progress-container { width:67px; } .one_fourth div.jp-audio div.jp-type-single div.jp-progress-container { width:90px; border-right: none; } /*---------------------------------------------- Flexslider ------------------------------------------------*/ .one_third .flex-control-nav, .one_fourth .flex-control-nav { top: 10px; right: 10px; } .one_third .flex-control-nav li a, .one_fourth .flex-control-nav li a { width: 10px; height: 10px; } } /* QUERIES FOR IHONE/SMARTPHONES */ @media only screen and (max-width: 767px), only screen and (max-device-width: 480px), only screen and (max-width: 767px) { /* Forms ---------------------------------------- */ input[type=text], input[type=password] { width: 290px; } textarea { width: 290px; } /*---------------------------------------------- General ID's or Classes ------------------------------------------------*/ #sidebar { width: 300px; padding-bottom: 80px; } #portfolio #sidebar { padding-top: 0px; } #sidebar .seperatormain { display: block; } #maincontent { width: 300px; } .wrapper { width: 300px; } .sidebar_section { margin-top: 80px; } .seperator { width: 200px; } .seperatorsmall { width: 80px; } /*---------------------------------------------- Header ------------------------------------------------*/ header { margin-bottom: 120px; } /*---------------------------------------------- Slider ------------------------------------------------*/ #home .slidermain { width: 300px; } #portfolio #slider { margin-bottom: 80px; } /*---------------------------------------------- Pagetop ------------------------------------------------*/ #pagetitle { width: 100%; } /*---------------------------------------------- Footer ------------------------------------------------*/ .copyright { height: auto; line-height: 26px; } .copyright div { float: none; } /*---------------------------------------------- Nav ------------------------------------------------*/ .logo { float: none !important; } nav { float: none !important; } nav ul { display: none; } nav select { display: inline-block; margin-top: 40px !important; } /*---------------------------------------------- Tagline & Pagetitle ------------------------------------------------*/ #pagetitle .tagline { margin-left: 0; display: block; } /*---------------------------------------------- Portfolio ------------------------------------------------*/ .portfolio-entry, .related-item { margin-right: 0px; margin-bottom: 0px; } .portfolio-entries { padding-bottom: 40px; } .portfolio-entry { margin-right: 0px; margin-bottom: 40px; } .columns4 .portfolio-entry { width: 300px; } .columns3 .portfolio-entry { width: 300px; } .columns2 .portfolio-entry { width: 300px; } .related-item { width: 300px; } .entries-nonspaced {padding-bottom: 80px;} .entries-nonspaced .portfolio-entry { margin-right: 0px; margin-bottom: -1px; } .columns4 .nonspaced { width: 300px; } .columns3 .nonspaced { width: 300px; } .columns2 .nonspaced { width: 300px; } .related-nonspaced .related-item { width: 300px !important; margin: 0; margin-top: -1px; } /*---------------------------------------------- Entries (Blog) ------------------------------------------------*/ #home .post-headline { width: 245px; } #home .full-post-headline { width: 100%; } #blog .entry { padding-bottom: 80px; } #blog .entry-content {width: 100%; } #blog .full-entry-content { width: 100%; } #blog .post-headline {width: 220px; } #blog .full-post-headline { width: 100%; } /*---------------------------------------------- Pagination ------------------------------------------------*/ #pagination { margin-bottom: 80px; } /*---------------------------------------------- Comments ------------------------------------------------*/ #comments { margin-bottom: 80px; } #comments .comment-list { width: 100%; } #comments .full-comment-list { width: 100%; } #comments .comment .children { margin-left: 30px; } /* Leave Comments ------------------------------------------------*/ #leavecomment {margin-bottom: 80px;} #leavecomment .leavecomment-form {width: 100%;} #leavecomment .full-leavecomment-form {width: 100%;} /*---------------------------------------------- Columns Grid ------------------------------------------------*/ .column { padding-bottom: 80px; margin-right: 0px; } .one_full { width: 300px; } .one_half { width: 300px; } .one_third { width: 300px; } .two_third { width: 300px; } .one_fourth { width: 300px; } .two_fourth { width: 300px; } .three_fourth { width: 300px; } .last { margin-right: 0px; } #maincontent .one_half { width: 300px; } #maincontent .one_third { width: 300px; } #maincontent .two_third { width: 300px; } #maincontent .one_fourth { width: 300px; } #maincontent .two_fourth { width: 300px; } #maincontent .three_fourth { width: 300px; } /*---------------------------------------------- Map ------------------------------------------------*/ #map {width: 300px; height: 200px; margin-bottom: 80px; } /*---------------------------------------------- Widget ------------------------------------------------*/ #pagetop .widget { width: 100%; margin-top: 40px; } #socialmedia-widget {text-align: left !important; } #socialmedia-widget a { margin-left: 0px !important; margin-right: 5px !important; } /*---------------------------------------------- FLICKR WIDGET ------------------------------------------------*/ #flickr-widget #flickr-list li, #dribbble-widget #dribbble-list li { width: 66px !important; } #sidebar #flickr-widget #flickr-list li, #sidebar #dribbble-widget #dribbble-list li { width: 66px; } /*---------------------------------------------- Pricing Table ------------------------------------------------*/ .col3 .price-col { width: 300px; } .col3 .recommended { width: 300px; } .col4 .price-col { width: 300px; } .col4 .recommended { width: 300px; } .price-col { margin-top: 30px !important; } /*---------------------------------------------- jPlayer ------------------------------------------------*/ .one_fourth div.jp-volume-bar-container { display: block; } .one_fourth .jp-mute { display: block !important; } div.jp-audio div.jp-type-single div.jp-progress-container { width:155px;} .one_third div.jp-audio div.jp-type-single div.jp-progress-container { width:155px; } .one_fourth div.jp-audio div.jp-type-single div.jp-progress-container { width:155px; border-right: 1px solid #4d4d4d; } /*---------------------------------------------- Flexslider ------------------------------------------------*/ .one_third .flex-control-nav, .one_fourth .flex-control-nav { top: 15px; right: 15px; } .one_third .flex-control-nav li a, .one_fourth .flex-control-nav li a { width: 12px; height: 12px; } }