/* * Skeleton V1.2 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 6/20/2012 */ /* Table of Content ================================================== #Site Styles #Page Styles #Media Queries #Font-Face */ /* #Site Styles ================================================== */ p {font-size:14px;line-height:22px;color:#666;} h3 {padding-top:20px;font-size:32px;line-height:32px;color:#A29061;font-family: 'DepotNewRegular',Arial,Helvetica,sans-serif;padding-top:90px;} h4 {font-size: 24px;line-height: 24px;padding: 0 0 25px;font-family: 'DepotNewRegular',Arial,Helvetica,sans-serif;color: #656565;} #home {background:url('../images/mobile1-horizontal.jpg') no-repeat bottom center;} #home p {color:#fff;} #treatment {background:url('../images/mobile2.jpg') no-repeat bottom center;} #prevention {background:url('../images/mobile3.jpg') no-repeat bottom center;} #benefits {background:url('../images/mobile4-horizontal.jpg') no-repeat bottom center;} #conditions {background:url('../images/mobile5.jpg') no-repeat bottom center;background-position:center -180px;} #contacts {background:url('../images/mobile6.jpg') repeat bottom center;} #contacts h3 {padding-bottom:20px;} @font-face { font-family: 'DepotNewLight'; src: url('../fonts/depotnew-lt-webfont.eot'); src: url('../fonts/depotnew-lt-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/depotnew-lt-webfont.woff') format('woff'), url('../fonts/depotnew-lt-webfont.ttf') format('truetype'), url('../fonts/depotnew-lt-webfont.svg#DepotNewLight') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'DepotNewRegular'; src: url('../fonts/depotnew-rg-webfont.eot'); src: url('../fonts/depotnew-rg-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/depotnew-rg-webfont.woff') format('woff'), url('../fonts/depotnew-rg-webfont.ttf') format('truetype'), url('../fonts/depotnew-rg-webfont.svg#DepotNewRegular') format('svg'); font-weight: normal; font-style: normal; } /* #Page Styles ================================================== */ html, body {height:100%} .wrapper {min-height:100%;height:auto!important;height:100%;position:relative;} .wrapper .backgroundimg {width:100%;position:absolute;top:0;left:0;} .nav {background:#FFFFFF;height:64px;width:100%;} .nav ul {float: right;padding: 17px 40px 0 0;} .nav ul li {display:block;float:left;padding:0 5px;} .nav ul li a {color:#656565;cursor:pointer;display:block;float:left;font-size:13px;font-weight:bold;height:25px;line-height:25px;padding:0 10px;text-decoration:none;} .nv ul li a:hover, .nav ul li.current a {background:url("../images/top-li-a.jpg") transparent;border:1px solid #D0CECE;color:#A29061;height:24px;line-height:24px;padding:0 9px;} .nav .rounded {border-radius:3px 3px 3px 3px;position:relative;} /* contact form */ #contact-form {position:relative;} #contact-form .row {padding:5px 0;} #contact-form .input-text {background:url('../images/form-contact-input-text.png') no-repeat top left;width:202px;height:37px;line-height:37px;padding:0 10px;color:#656565;border:0px} #contact-form .input-textarea {background:url('../images/contact-form-textarea420.png') no-repeat top left;width:400px;height:117px;padding:10px;resize:none;overflow:hidden;border:0px} #contact-form .holder {position:relative;} #contact-form .message {display:none;position:absolute;top:228px;left:115px;} #contact-form .message .top {background:url('../images/message-top.png') no-repeat top left;width:428px;height:17px;line-height:0;} #contact-form .message .content {background:url('../images/message-content.png') repeat-y;width:428px;padding:5px 0;} #contact-form .message .bottom {background:url('../images/message-bottom.png') no-repeat top left;width:428px;height:14px;line-height:0;margin-left:-1px;} #contact-form .message .arrow {background:url('../images/message-arrow.png') no-repeat top left;width:10px;height:18px;position:absolute;bottom:20px;left:-9px;z-index:2;} #contact-form #alert {padding:0 20px;} #contact-form #alert ul {padding:10px 0 0 0;} #contact-form #alert ul li {line-height:18px;} #contact-form .btn {font-weight:bold;} #contacts li {height:20px;clear:both;} #contacts .list-icons img {float:left;} #contacts .list-icons p {float:left;padding-left:10px;} /* Buttons */ .btn {height:32px;padding:0 30px;line-height:32px;font-size:13px;display:inline-block;position:relative;cursor:pointer;} .btn.rounded {border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;} .btn.gold {background:url('../images/btn-gold2.jpg') repeat-x 0 0;border:1px solid #A29061;color:#fff;} .btn:hover {background-position:0 -32px;} .btn2 {height:32px;padding:0 12px;line-height:32px;font-size:12px;font-weight:bold;display:inline-block;position:relative;cursor:pointer; position: absolute; top:640px; left:948px;z-index:850;} .btn2.rounded {border-radius:15px;-webkit-border-radius:15px;-moz-border-radius:15px;} .btn2.silver {background:url('../images/btn-silver.jpg') repeat-x 0 0;border:1px solid #cfcece;color:#656565;} .btn2:hover {background-position:0 -32px;} /* #Media Queries ================================================== */ /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) { #conditions {background-position:center 0px;} } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { #home {background:url('../images/mobile1-portrait.jpg') no-repeat bottom center;} #treatment h3 {padding-top:150px;} #prevention h3 {padding-top:150px;} #benefits {background:url('../images/mobile4-portrait.jpg') no-repeat bottom center;} #benefits h3 {padding-top:180px;} #conditions {background-position:center 0px;} #conditions .offset-by-one {padding-left:430px;} #contact-form .input-textarea {width:208px;background:url('../images/contact-form-textarea304.png') no-repeat top left;} } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { #conditions {background-position:center 0px;} } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) {} /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) {}