/* Theme Name: WP-Skeleton Theme URI: https://github.com/wycks/WP-Skeleton-Theme Author: Wycks Author URI: wpsecure.net Description: Responsive Bare Bones framework based on Dave Gamache's getskeleton.com Version: 1.0 License: http://www.opensource.org/licenses/mit-license.php. Tags: Responsive, grid, mobile, framework, bare-bones, white, minimal This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ /* Table of Contents ================================================== #Base 960 Grid #Tablet (Portrait) #Mobile (Portrait) #Mobile (Landscape) #Clearing */ /* #Base 960 Grid ================================================== */ .container { position: relative; width: 1190px; margin: 0 auto; padding: 0; } /* #Tablet (Landscape) ================================================== */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { } /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 768px) and (max-width: 959px) { .container { width: 768px; } body header {padding: 0px 0 18px;} #hero-contents h1{font-size: 60px; line-height: 60px;} #hero-contents h2{font-size: 50px;} #hotspring h2{line-height: 36px;font-size: 30px;} #hotspring img{ max-width: 35%;} #main-img{max-width: 100%;float: none;margin: 30px auto; display: block;} #bullet-thumbnails{float: none;width: 100%;} .model h2{font-size: 20px;line-height: 45px;} #try-before-you-buy{height: 420px;} #try-content{ padding-left: 50px;} #try-content h2{font-size: 45px;margin-bottom: 10px;} #try-content h3{font-size: 36px;line-height: 42px;} .menu.cloned {display:none !important;} #hero-contents ul li{margin: 0 8px; padding-right: 0;} #hero-contents ul li a{font-size: 16px;line-height: 36px; width: 230px;} #hero-contents ul li img{width: 50px;} #hero-contents h3{font-size: 34px} #contact-form h2{padding: 0 20px;font-size: 22px;line-height: 30px;} } @media only screen and (min-width: 960px) and (max-width: 1199px) { .container { width: 960px; } #hotspring h2{font-size: 38px;} #main-img{ max-width: 38%;} #bullet-thumbnails{ width: 58%;} } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 767px) { .container { width: 89.9%; } body header {padding: 0px 0 18px;} #hero-contents h1{font-size: 40px;line-height: 45px;margin-bottom: 20px;} #hero-contents h1 br{display: none;} #hero-contents h2{font-size: 42px; line-height: 40px;margin-bottom:10px;} #hero-contents h3{ font-size: 30px;} #hero-contents ul li{ display: block;line-height: 40px;} #hero-contents ul li a{font-size: 12px;line-height: 50px; width: 275px; margin-bottom: 5px;} #hotspring h2{line-height: 36px;font-size: 30px;text-align: center;} #hotspring img{max-width: 100%;float: none;display: block;margin: 0 auto 20px;} #main-img{max-width: 100%;float: none;margin: 10px auto; display: block;} #bullet-thumbnails{float: none;width: 100%;} .bullet-list{ max-width: 63%;} .bullet-list h3{line-height: 25px; margin-bottom: 10px;} .model {float: none;width: 100%;max-width: 528px; margin: 0 auto;} .model h2{font-size: 16px;line-height: 40px;text-align: center;padding: 0;} #try-before-you-buy{height:auto;background-size:contain;padding-top:50%;} #try-content{padding: 20px 30px;bottom: 0;top: auto;width: 100%;box-sizing: border-box;position:relative;} #try-content h2{ font-size: 26px;margin-bottom: 0px;line-height: 40px;} #try-content h3{font-size: 22px;line-height: 30px;} .padded1 {padding: 32px 30px 39px;} #models {padding: 35px 30px;} #green-selections h2{font-size: 26px;line-height: 30px;} #green-selections h3{font-size: 24px;} #contact-form{max-width: 90%;padding-top: 35px;} #contact-form h2{font-size: 22px;line-height: 30px;} #contact-form h2 br{display: none;} #contact-form-wrap p{ padding: 0 20px;} .menu.cloned {display:none !important;} #hero-contents {bottom:0;position:relative;} #hero-contents h3.date-until { font-size: 22.44px; } #hero {height:auto !important;} #video-wrap { position: relative;padding-top: 55%;} #video-wrap iframe{display: block;position: absolute;width: 100%;height: 100%;top: 0;left: 0;} .model{position: relative;} .model h2{width: 100%; box-sizing: border-box;} } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { .container { width: 90%; } body header {padding: 0px 0 18px;} #hero-contents h1{font-size: 46px;line-height: 50px;margin-bottom: 30px;} #hero-contents h1 br{display: none;} #hero-contents h2{font-size: 42px; line-height: 40px;} #hero-contents h3{ font-size: 30px;} #hero-contents ul li{ display: inline-block;line-height: 40px;} #hero-contents ul li a{font-size: 12px;line-height: 50px; width: 295px; margin-bottom: 5px;} #hotspring h2{line-height: 36px;font-size: 30px;text-align: center;} #hotspring img{max-width: 100%;float: none;display: block;margin: 0 auto 20px;} #main-img{max-width: 100%;float: none;margin: 10px auto; display: block;} #bullet-thumbnails{float: none;width: 100%;} .bullet-list{ max-width: 75%;} .bullet-list h3{line-height: 25px; margin-bottom: 10px;} .model {float: none;width: 100%;max-width: 528px; margin: 0 auto;} .model h2{font-size: 20px;line-height: 45px;text-align: center;} #try-before-you-buy{height: auto;} #try-content{padding: 20px 30px;bottom: 0;top: auto;width: 100%;box-sizing: border-box;} #try-content h2{font-size: 38px;margin-bottom: 10px;} #try-content h3{font-size: 32px;line-height: 38px;} .padded1 {padding: 32px 30px 39px;} #models {padding: 35px 30px;} #green-selections h2{font-size: 26px;line-height: 30px;} #green-selections h3{font-size: 24px;} #contact-form{max-width: 90%;padding-top: 35px;} #contact-form h2{font-size: 29px;line-height: 40px;} #contact-form-wrap p{ padding: 0 40px;} #video-wrap { position: relative;padding-top: 55%;} #video-wrap iframe{display: block;position: absolute;width: 100%;height: 100%;top: 0;left: 0;} .model{position: relative;} .model h2{width: 100%; box-sizing: border-box;} } /* iPad in portrait */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { } /* iPhone 5 & 5S in portrait */ @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { #hero {height: 410px;} #hero-contents h1 {margin-bottom: 20px; font-size: 30px; line-height: 36px; } #hero-contents h2 {font-size: 30px;line-height: 40px;margin-bottom: 0;} #hero-contents h3 { font-size: 24px;} .model h2 {font-size: 14px;} #try-content{padding: 20px;} #page-content h1 { font-size: 34px;} #page-content h3{line-height: 28px;padding: 0 20px;font-size: 18px;} } /* iPhone 6 in portrait */ @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) { #hero {height: 498px;} } /* iPhone 6 Plus in portrait */ @media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) { #hero {height: 450px;} #hero-contents ul li{display: inline-block; font-size: 16px; vertical-align: middle;margin: 0;} #hero-contents h2 { font-size: 36px;} #green-selections h3 {font-size: 20px;} } /* #Clearing ================================================== */ /* Self Clearing Goodness */ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } /* Use clearfix class on parent to clear nested columns, or wrap each row of columns in a
*/ .clearfix:before, .clearfix:after, .row:before, .row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .row:after, .clearfix:after { clear: both; } .row, .clearfix { zoom: 1; } /* You can also use a
to clear columns */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }