/* --------------------------------------------------- Undo - Styles for Mobile Devices --------------------------------------------------- */ /* Standard 980 (devices and browsers) */ @media only screen and (max-width: 1024px) { /*----------------------------------------------------------------------------- ----------------------------- 1 - Layout -------------------------------------- -----------------------------------------------------------------------------*/ html body { background-color: #f1f1f1;} header { width: 980px; } .top-header { width: 980px; padding: 0 0;} .header-adv { width: 980px; padding: 0 0;} .wrap { width: 980px; padding:0 0;} #background { display: none;} /*----------------------------------------------------------------------------- ----------------------------- 4 - Sidebar -------------------------------------- -----------------------------------------------------------------------------*/ .sidebar-midle { display: none;} .sidebar h3.title { width: 283px; padding: 5px 0 5px 15px; } /*----------------------------------------------------------------------------- ----------------------------- 8 - Footer -------------------------------------- -----------------------------------------------------------------------------*/ .footer-content { width: 980px; padding: 25px 0 25px 0;} .footer-bottom { width: 980px; padding: 0 0;} .footer-content .widget { margin-left: 0; } div.footer-posts { width: 320px; } ul.footer-posts { width: 320px; } ul.footer-posts li { width: 120px; margin-right: 30px;} ul.footer-posts li img { width: 120px; height: 75px; margin-top: -25px;} ul.footer-posts li:last-child { margin-right: 0px;} ul.footer-posts li.hide-p { display: none;} } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 760px) and (max-width: 1000px) { /*----------------------------------------------------------------------------- 1 - Layout ----------------------------------------------------------------------------- */ html body { background-color: #f1f1f1;} header { width: 710px; } .top-header { width: 650px; padding: 0 30px;} .header-adv { width: 650px; padding: 0 30px;} .wrap { width: 650px; padding: 0 30px; } .logo { float: left; margin: 30px 0 0 0;} #background { display: none;} /*----------------------------------------------------------------------------- 2 - Header ----------------------------------------------------------------------------- */ .account { display: none;} .banner728 { display: none;} .banner400-tabs { display: block;} /*----------------------------------------------------------------------------- 4 - Sidebar ----------------------------------------------------------------------------- */ .sidebar { display: none;} .sidebar-midle { display: none;} /*----------------------------------------------------------------------------- 6 - Menu ----------------------------------------------------------------------------- */ .jquerycssmenu { display: none;} .mobileMenu { display: inline-block; float: right; margin-top: 7px; width:200px; height:30px; border: none; background-color: #282828; color: #FFF; font-size: 13px; padding: 7px 9px; z-index:999; cursor:pointer; } .mobileMenu option { padding: 0 9px;} /*----------------------------------------------------------------------------- 8 - Footer ----------------------------------------------------------------------------- */ .footer-content { width: 650px; padding: 25px 30px 25px 30px;} .footer-bottom { width: 650px; padding: 0 30px;} .company-info { width: 620px; float: left;} } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 760px) { /*----------------------------------------------------------------------------- 1 - Layout ----------------------------------------------------------------------------- */ html body { background-color: #f1f1f1;} header { width: 450px; } .top-header { width: 390px; padding: 0 30px;} .header-adv { width: 390px; padding: 0 30px;} .wrap { width: 390px; padding: 0 30px;} .logo { float: left; margin: 25px 0 25px 0;} #background { display: none;} /*----------------------------------------------------------------------------- 2 - Header ----------------------------------------------------------------------------- */ #searchform2 { width: 150px; } #searchform2 #s { width: 117px; } .banner728 { display: none;} .account { display: none;} /*----------------------------------------------------------------------------- 3 - Content ----------------------------------------------------------------------------- */ /* -- Blog 2 with pagination -- */ .blog-content { width: 390px; } .blog-post { width: 390px; height: 370px; } .single-media img { width: 390px; height: 210px;} .content { width: 390px;} .widget-left { width: 390px;} .widget-right { width: 390px; float: left;} .widget-first img { width: 390px; height: 226px;} ul.widget-list { width: 390px; } ul.widget-list li { width: 390px; } .widget-list img { width: 55px; height: 55px; } ul.widget-list .meta-date { width: 240px; height: 24px; } .post iframe { width: 100%; height: 210px; } .entry img { width: auto;} /* -- Pagination -- */ .wp-pagenavi { width: 365px; } /* -- Banners -- */ .banner468 { display: none;} /* -- Accordion -- */ .accordionButton, .accordionButton1, .accordionButton2, .accordionButton3 { width: 350px; } .accordionContent { width: 390px; } .accordionContent ul.tags { width: 390px; } /* -- Single - Latest posts -- */ ul.single-posts { width: 390px; } ul.single-posts li { width: 164px; float: left; height: 180px;} ul.single-posts li img { width: 164px; height: 103px; margin-top: -25px;} /* -- slider -- */ #slides { width:390px; height:210px;} #slides .slides_container { width:390px;} #slides .slides_container a img { width:390px; height:210px; } #slides .slides_container div.slide { width:390px; height:210px; } #slides .title-slider { right: 30px; height:50px;} /*----------------------------------------------------------------------------- 4 - Sidebar ----------------------------------------------------------------------------- */ .sidebar { display: none;} .sidebar-midle { display: none;} /*----------------------------------------------------------------------------- 5 - Comments ----------------------------------------------------------------------------- */ #comments { width: 390px; } ul.comment { width: 390px;} .comment li { width: 360px;} #respond { width: 390px; } #commentform textarea { width: 225px; height:159px; } #commentform #author, #commentform #email, #commentform #url { width:125px; height:30px; border-radius: 3px; border-radius: 3px; } /*----------------------------------------------------------------------------- 6 - Menu ----------------------------------------------------------------------------- */ .jquerycssmenu { float: right; margin: 0; display: none;} .mobileMenu { display: inline-block; float: right; width:150px; height:30px; border: none; background-color: #282828; color: #FFF; margin-top: 8px; font-size: 13px; padding: 7px 9px; z-index:999; cursor:pointer; } .mobileMenu option { padding: 0 9px;} /*----------------------------------------------------------------------------- 7 - Contact form ----------------------------------------------------------------------------- */ .one_half_c, .one_half_last_c { float:left; width:380px; margin-right:0px; clear: both; } .one_half_last_c { margin-right:0;} .one_full_c { float:left; width:380px;} /* -- Contact Form -- */ #contactform #contactName, #contactform #emaill, #contactform #subject { width:380px;} #contactform #subject { width: 380px;} #contactform textarea { width: 380px;} /*----------------------------------------------------------------------------- 8 - Footer ----------------------------------------------------------------------------- */ .footer-content { width: 390px; padding: 25px 30px 25px 30px;} .footer-bottom { width: 390px; padding: 0 30px;} .footer-posts { display: none;} .footer-content .widget { display: none;} .company-info { width: 360px; margin: 0; } ul.footer-menu { display: none;} .copyright { text-align: center; float: none; margin: 0;} /*----------------------------------------------------------------------------- 9 - shortcodes ----------------------------------------------------------------------------- */ /* -- Columns -- */ .one_half, .one_half_last { float:left;width:390px; margin-bottom:10px; margin-right:0; } .one_half_last { margin-right:0;} .one_third, .one_third_last { float:left; width:390px; margin-bottom:10px; margin-right:0; } .one_third_last { margin-right:0;} /*----------------------------------------------------------------------------- ----------------------------- 10 - Carousel ----------------------------------- -----------------------------------------------------------------------------*/ .featured-trailers { width: 390px; height: auto; float: left; margin: 30px 0 20px 0;} #carousel { width: 350px; height: 160px; position: relative; margin:20px 0 0 22px; } #carousel .prev { background-position: 0 0; left: -20px; } #carousel .prev:hover { left: -21px; } #carousel .next {background-position: -18px 0; right: -17px; } #carousel .next:hover { right: -18px; } } /* All Mobile Size (devices) */ @media only screen and (max-width: 479px) { /*----------------------------------------------------------------------------- 1 - Layout ----------------------------------------------------------------------------- */ html body { background-color: #f1f1f1;} header { width: 300px; } .top-header { width: 240px; padding: 0 30px;} .header-adv { width: 240px; padding: 0 30px;} .wrap { width: 240px; padding: 0 30px;} .logo { float: left; margin: 25px 0 25px 0;} #background { display: none;} /*----------------------------------------------------------------------------- 2 - Header ----------------------------------------------------------------------------- */ #searchform2 { display: none;} .banner728 { display: none;} .account { display: none;} /*----------------------------------------------------------------------------- 3 - Content ----------------------------------------------------------------------------- */ /* -- Blog 2 with pagination -- */ .blog-content { width: 240px; } .blog-post { width: 240px; height: 320px; } .single-media img { width: 240px; height: 129px;} .content { width: 240px;} .widget-left { width: 240px;} .widget-right { width: 240px; float: left;} .widget-first img { width: 240px; height: 139px;} ul.widget-list { width: 240px; } ul.widget-list li { width: 240px; } .widget-list img { width: 55px; height: 55px; } ul.widget-list .meta-date { width: 240px; height: 24px; } .post iframe { width: 100%; height: 129px; } .entry img { width: auto;} img.alignleft { float: none; width: auto; margin: 20px 0 10px 0;} img.alignright { float: none; width: auto; margin: 20px 0 10px 0;} /* -- Pagination -- */ .wp-pagenavi { width: 240px; padding-right: 0; } /* -- Banners -- */ .banner468 { display: none;} /* -- Accordion -- */ .accordionButton, .accordionButton1, .accordionButton2, .accordionButton3 { width: 200px; } .accordionContent { width: 240px; } .accordionContent ul.tags { width: 240px; } /* -- Single - Latest posts -- */ ul.single-posts { width: 240px; } ul.single-posts li { width: 230px; float: left; height: 220px; margin-right: 0;} ul.single-posts li img { width: 230px; height: 145px; margin-top: -25px;} /* -- slider -- */ #slides { width:240px; height:129px;} #slides .slides_container { width:240px;} #slides .slides_container a img { width:240px; height:129px; } #slides .slides_container div.slide { width:240px; height:129px; } #slides .title-slider { display: none;} #slides .meta-slider { display: none;} /*----------------------------------------------------------------------------- 4 - Sidebar ----------------------------------------------------------------------------- */ .sidebar { display: none;} .sidebar-midle { display: none;} /*----------------------------------------------------------------------------- 5 - Comments ----------------------------------------------------------------------------- */ #comments { width: 240px; } ul.comment { width: 240px;} .comment li { width: 210px;} #respond { width: 238px; } #commentform textarea { width: 233px; height:159px; float: left;} #commentform #author, #commentform #email, #commentform #url { width:235px; height:30px; border-radius: 3px; border-radius: 3px; } #commentform .submitcomm { margin: 25px 0 0 0; display: block; width: 100%;} /*----------------------------------------------------------------------------- 6 - Menu ----------------------------------------------------------------------------- */ .jquerycssmenu { float: right; margin: 0; display: none;} .mobileMenu { display: inline-block; float: right; width:175px; height: 30px; border: none; background-color: #282828; color: #FFF; margin-top: 8px; font-size: 13px; padding:7px 9px; z-index:999; cursor:pointer; } .mobileMenu option { padding: 0 9px;} /*----------------------------------------------------------------------------- 7 - Contact form ----------------------------------------------------------------------------- */ .one_half_c, .one_half_last_c { float:left; width:240px; margin-right:0px; clear: both; } .one_half_last_c { margin-right:0;} .one_full_c { float:left; width:240px;} /* -- Contact Form -- */ #contactform #contactName, #contactform #emaill, #contactform #subject { width:232px;} #contactform #subject { width: 232px;} #contactform textarea { width: 232px;} #contactform .sendemail { margin: 25px 0 0 0; width: 100%; } /*----------------------------------------------------------------------------- 8 - Footer ----------------------------------------------------------------------------- */ .footer-content { width: 240px; padding: 25px 30px 25px 30px;} .footer-bottom { width: 300px; } .footer-posts { display: none;} .footer-content .widget { display: none;} .company-info { width: 210px; margin: 0; } ul.footer-menu { display: none;} .copyright { text-align: center; float: none; margin: 0;} /*----------------------------------------------------------------------------- 9 - shortcodes ----------------------------------------------------------------------------- */ /* -- Columns -- */ .one_half, .one_half_last { float:left;width:240px; margin-bottom:10px; margin-right:0; } .one_half_last { margin-right:0;} .one_third, .one_third_last { float:left; width:240px; margin-bottom:10px; margin-right:0; } .one_third_last { margin-right:0;} /*----------------------------------------------------------------------------- ----------------------------- 10 - Carousel ----------------------------------- -----------------------------------------------------------------------------*/ .featured-trailers { width: 240px; height: auto; float: left; margin: 30px 0 20px 0;} #carousel { width: 240px; height: 160px; position: relative; margin:20px 0 0 7px; } #carousel .prev { background-position: 0 0; left: -20px; } #carousel .prev:hover { left: -21px; } #carousel .next {background-position: -18px 0; right: -12px; } #carousel .next:hover { right: -13px; } }