/* Author: Vince Gonzalez Project: PC Cashdrawer Date: April 2010 Credit: Vincent Martinez */ /* # Reset defaults ################### */ html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; } /* Reset margins and padding */ a:link, a:visited{text-decoration:none;outline:none;} /* Reset link styles */ html {overflow: -moz-scrollbars-vertical;} /* Mozilla scrollbar fix */ /* # Header ################### */ html { background: #448333 url(../images/back-body.png) repeat-x top center; } body{ background: url(../images/back-body.png) no-repeat top center; font-family: Arial, sans-serif; font-size: 12px; color:#4e4e4e;} .wrapper { width: 960px; margin: 0 auto; } #header { height: 145px; } #logo { margin: 20px 0 0 35px; float: left; } #contactBox { position: relative; float: right; top: 10px; } #contactBox p { background: url(../images/icon-mail.png) no-repeat left center; padding: 2px 0 0 18px; } #contactBox a { color: #272727; } #contactBox a:hover { color: #208501; } #nav { background: url(../images/back-nav.png) no-repeat 0 0; height: 42px; position: absolute; top: 94px; width: 940px; padding-left: 34px; margin-left: -3px; } #nav li { float: left; display: inline; padding-top: 10px; } #nav li a { display: block; text-indent: -9999px; height: 21px; } #nav li a:hover { background-position: bottom center !important; } #m-products a { background: url(../images/m-products.png) no-repeat top center; width: 90px; } #m-services a { background: url(../images/m-services.png) no-repeat top center; width: 98px; } #m-support a { background: url(../images/m-support.png) no-repeat top center; width: 93px; } #m-about a { background: url(../images/m-about.png) no-repeat top center; width: 98px; } #m-customers a { background: url(../images/m-customers.png) no-repeat top center; width: 112px; } #m-news a { background: url(../images/m-news.png) no-repeat top center; width: 74px; } #m-contact a { background: url(../images/m-contact.png) no-repeat top center; width: 94px; } #m-home a { background: url(../images/m-home.png) no-repeat top center; width: 84px; } #nav #m-home a:hover { background-position: top center !important; } /* # Content ################### */ #content { background: url(../images/back-contentFill.png) repeat-y 0 0; margin-bottom: 10px; } #contentTop { background: url(../images/back-contentTop.png) no-repeat top center; } #contentBottom { background: url(../images/back-contentBottom.png) no-repeat bottom center; min-height: 1055px; } #main { float: right; width: 650px; padding: 30px; } #main.productPage { width: 696px; padding: 8px; } #main p { line-height: 18px; } #main ol, #main ul { margin: 0 0 18px 20px; } #main li { line-height: 18px; margin: 5px 0; } #sidebar { min-height: 500px; height: auto !important; height: 500px; width: 250px; color: #525252; padding-bottom: 25px; } #sidebar h2 { height: 46px; margin-bottom: 15px; text-indent: -9999px; } #sidebar ul { margin: 0 20px 30px;} #sidebar li:first-child { border: none !important; } #sidebar li { padding: 10px 0; list-style: none; border-top: 1px dashed #8a8e6a; } #sidebar a { color: #525252; font-weight: bold; } #sidebar a:hover { color: #000; } #sidebar ul ul { margin: 0 0 0 15px; } #h-products { background: url(../images/h-products.png) no-repeat 20px 14px; } #h-services { background: url(../images/h-services.png) no-repeat 20px 14px; } #h-support { background: url(../images/h-support.png) no-repeat 20px 14px; } #h-about { background: url(../images/h-about.png) no-repeat 20px 14px; } #h-customers { background: url(../images/h-customers.png) no-repeat 20px 14px } #h-news { background: url(../images/h-news.png) no-repeat 20px 14px; } #h-contact { background: url(../images/h-contact.png) no-repeat 20px 14px; } /* # Footer ################### */ #footer { background: url(../images/back-footer.png) no-repeat 0 0; text-align: center; color: #d5e1c7; padding: 15px 0 25px; position:relative;height:115px;} #footer p { line-height: 30px; margin: 0; color:#cee79f; } #footer a { color: #cee79f; } #footer a:hover { color: #333; } #footerContact {color: #badb7f;position:absolute;top:17px;right:0;} #footerContact p {text-align:right;padding-right:35px;font-weight:bold;margin-right:10px;} #footerContact .price {background:url(../images/icon-phone.png) no-repeat right center;font-size:18px;} #footerContact .hr {background:url(../images/bg-dividerfadefooter.png) no-repeat right center;height:17px;} #footerContact .email{background:url(../images/icon-email.png) no-repeat right center;font-size:14px;} /* # Homepage ################### */ #homeContent {} #intro { height: 402px; margin-bottom: 9px; } #intro p { font-size: 16px; margin: 5px 0; } #intro ul { float: left; width: 260px; list-style: none; color: #34402c; font-size: 18px; font-weight: bold; margin-top: 25px; } #intro li { background: url(../images/list-bigstar.png) no-repeat left center; padding-left: 25px; margin-bottom: 10px; } #intro a { color: #272727; } #intro a:hover { color: #666; } #columns { margin-bottom: 9px; } #columns .column {background: url(../images/box-3.png) no-repeat; height: 219px; float: left; width: 316px;margin-right: 6px;} #columns .column.last { margin: 0; } #columns .column h2 { font-size: 18px; padding: 5px 22px 0; line-height: 30px; } #col1 { } #col1 p { margin: 0 22px 15px; } #col2 { } #col2 ul {width:301px;list-style:none;margin:7px;} #col2 a { background:url(../images/bg-homeservice.png); height: 37px; display: block; color: #3b3b3b; text-shadow: 0 1px 0 #fff; margin-bottom: 5px;line-height:39px;font-size:16px;overflow:hidden;} #col2 a:hover { background-position:0 bottom; } #col2 span {background:url(../images/bg-homeserviceicons.png) no-repeat 0 0 ;display:block;width:58px;height:36px;float:left;} #icon-haas span { background-position: -55px -5px;} #icon-haas a:hover span { background-position:-5px -5px; } #icon-integration span {background-position:-55px -48px;} #icon-integration a:hover span {background-position:-5px -48px;} #icon-whiteglove span {background-position:-55px -90px;} #icon-whiteglove a:hover span {background-position:-5px -90px;} #icon-support span {background-position:-55px -132px;} #icon-support a:hover span {background-position:-5px -132px;} #col3 { } #col3 ul { list-style: none; margin: 16px 22px 0; } #col3 li { margin-bottom: 15px; } #col3 a { color: #3b3b3b; } #col3 a:hover { color: #555; } #prefooter { background: url(../images/box-footer.png) no-repeat 0 0; height: 137px; width: 965px; margin-left: -3px; margin-bottom: 4px; } #signUpfooter { float: left; width: 50%; } #signUpfooter form { padding:25px 55px 0; } #signUpfooter h4 { font-family: Tahoma; font-size: 16px; font-weight: bold; } #signUpfooter p { margin-bottom: 13px; } #signUpfooter .emailBox { border: 1px solid #637c55; float: left; margin: 0 10px 0 0; padding: 5px; color: #7c7b7b; } #signUpfooter .emailSubmit { margin-top: -5px; } #years25 { float: left; width: 50%; text-align: right; } #years25 img { margin: 17px 35px; } #signUpfooterA { float: left; width: 50%; } #signUpfooterA form { padding:25px 55px 0; } #signUpfooterA h4 { font-family: Tahoma; font-size: 16px; font-weight: bold; } #signUpfooterA p { margin-bottom: 13px; } #signUpfooterA .emailBox { border: 1px solid #637c55; float: left; margin: 0 10px 0 0; padding: 5px; color: #7c7b7b; } #signUpfooterA .emailSubmit { margin-top: -5px; } #years25a { float: left; width: 33%; text-align: right; } #years25a img { margin: 17px 5px; } #store { float: left; width: 17%; text-align: right; } #store img { margin: 17px 35px; } #signUpfooterB { float: left; width: 320px; } #signUpfooterB form { padding:25px 15px 0; } #signUpfooterB h4 { font-family: Tahoma; font-size: 16px; font-weight: bold; } #signUpfooterB p { margin-bottom: 13px; } #signUpfooterB .emailBox { border: 1px solid #637c55; float: left; margin: 0 10px 0 0; padding: 5px; color: #7c7b7b; } #signUpfooterB .emailSubmit { margin-top: -5px; } #years25B { float: left; width: 33%; text-align: right; } #years25B img { margin: 17px 5px; } #storeB { float: left; width: 17%; text-align: right; } #storeB img { margin: 17px 35px; } #formB { float: left; margin-left: -115px; margin-right: 90px; margin-top: 17px; width: 10%; text-align: right; } #fromB img { margin: 17px 35px; } #benjaminMoore {float:left;padding:25px 35px;width:250px;} #benjaminMoore p {font-size: 16px; margin-bottom: 10px;text-shadow: 0 1px 0 #fff;} #benjaminMoore a {font-weight:bold;} #celebrating25years {float:right;padding:25px 25px 0;width:270px;background:url(../images/25yearsstar.png) no-repeat 213px 17px;height:90px;} #celebrating25years p {font-size:14px;text-shadow: 0 1px 0 #fff;margin-right:90px;line-height:24px;} #celebrating25years strong {font-size:18px;display:block;} /* # Modules ################### */ #submitBox { background: url(../images/back-sidesubmit.png) no-repeat 0 0; margin:0 0 0 15px; height: 156px; text-shadow: 1px 1px 0 #fff; } #submitBox form { padding:15px 20px 0; } #submitBox h3 { font-family: Tahoma; font-size: 16px; font-weight: bold; } #submitBox p { margin-bottom: 13px; } #submitBox .emailBox { border: 1px solid #637c55; float: left; margin: 0 10px 5px 0; padding: 5px; color: #7c7b7b; } #submitBox .emailSubmit { margin-left: -5px; } .testimonial { margin: 30px 20px; background: url(../images/quote-left.jpg) no-repeat left top; padding-top:25px; } .testimonial blockquote { background: url(../images/quote-right.jpg) no-repeat right bottom; margin-bottom: 10px; } .testimonial blockquote p { padding-bottom: 30px; } .testimonial .source { font-weight: bold; text-align: right; } /* # Headings ################### */ h1, h2, h3, h4 { color: #25480f; line-height: 18px; margin-bottom: 10px; } h1{ font-size: 18px; } h2{ font-size: 16px; } h3{ margin-bottom: 5px; } h4{ margin-bottom: 3px; } /* # Banners ################### */ .banner { min-height: 100px; height: auto !important; height: 100px; margin:-23px -23px 25px; width: 696px; color: #f9fdef; } .banner p { visibility: hidden; } #b-news { background: url(../images/banner-news.png) no-repeat 0 0; } #b-contact { background: url(../images/banner-contact.png) no-repeat 0 0; } #b-customers { background: url(../images/banner-customers.jpg) no-repeat 0 0; height: 227px !important; } #b-about { background: url(../images/banner-about.jpg) no-repeat 0 0; height: 227px !important; } #b-support { background: url(../images/banner-support.jpg) no-repeat 0 0; height: 227px !important; } #b-services { background: url(../images/banner-services.jpg) no-repeat 0 0; height: 227px !important; } #b-whiteglove { background: url(../images/banner_installation.jpg) no-repeat 0 0; height: 227px !important; } #b-products { background: url(../images/banner-products.jpg) no-repeat 0 0; height: 227px !important; } #b-gallery { background: url(../images/gallery_header.jpg) no-repeat 0 0; height: 110px !important; } /* # Images ################### */ img{border:none;} img.left{margin:0 10px 10px 0;} img.right{margin:0 0 10px 10px;} /* # Products ################### */ #productHero { overflow: auto; margin-bottom: 25px } #productHero .ir { background: url(../images/bg-producthero.jpg) no-repeat 0 0; height: 260px; } #productHero .ir * { text-indent: -9999px; } #productHero .iregister { float: left; width: 33%; position: relative; height: 200px; color: #303030; } #productHero .imagelink { display: block; position: absolute; top: -165px; height: 235px; width: 160px; text-indent: -9999px; } #productHero .iregister h2 { padding: 10px 0 0 10px; font-weight: normal; font-size: 18px; line-height: 22px; color: #303030; margin-bottom: 5px;} #productHero .iregister ul { margin: 0; } #productHero .iregister li { font-size: 12px; line-height: 16px; margin: 0 28px; } #productHero .iregister .price { color: #2b2b2b; font-weight: bold; font-size: 24px; position: absolute; bottom: 0px; left: 15px; } #productHero .iregister .learnmore { position: absolute; right: 15px; bottom: 0px; font-size: 14px; font-weight: bold; } #col-pc { margin-right: 15px; } #col-ipad { width: 30% !important; } #otherProducts { clear: both; background: url(../images/othergreatproducts.jpg) no-repeat 0 0; text-indent: -9999px; height: 40px; margin-bottom: 15px; } #productFeature { margin: 0 -23px 15px; height: 300px; } .prodimage { float: left; margin-right: 15px; } #productFeature h3 { font-size: 18px; margin-bottom: 10px; padding-top: 32px; line-height: 24px; } #productBoxMain { margin: 0; width:696px; padding: 5px 0; min-height: 600px; height: auto !important; height: 600px; } #productBoxMain div { width: 157px; float: left; margin: 0 22px 20px 0; } #productBoxMain h3 { font-size: 13px; color: #4e4e4e; margin: 0 10px; } #productBoxMain h3.prodWdesc { margin:4px 0 0; } #productBoxMain h3.prodWdesc span { font-size: 12px; font-weight: normal; display: block; } #productBoxMain ul { margin: 0 0 0 14px; } #productBoxMain li { } #productBoxMain p, #productBoxMain li { margin: 0 10px 5px; font-size: 11px; line-height: 14px; } #productBoxMain .thumb { margin: 0 10px; } #productBoxMain .learnmore { font-weight: bold; font-size: 12px; } #productInfo { float: left; width: 350px; } #productInfo h2 {} #productInfo p {} h3#h3specs { color: #4e4e4e; } .stripe { margin-left: 0 !important; } .stripe li { padding: 5px; list-style-position: inside; } .stripe li.odd { /*background-color: #f7f7f7;*/} .striped { margin-bottom: 30px; border-collapse: collapse; border: 1px solid #d0dd95; } .striped td { padding: 5px; border: 1px solid #d0dd95; } .striped tr.odd td { background-color: #ecefd9;} #productPics { margin-left: 377px; } #productBox { text-align: center; height: 189px; } #productBox #price { font-size: 18px; color: #595a59; line-height: 36px; padding-top: 15px; margin-bottom: 93px; } #productBox #price span { font-size: 24px; font-weight: bold; color: #8b0404; } #productBox img {} #productPics .price { text-align: center; font-size: 18px; } #productPics .price strong { font-size: 24px; color: #8b0404; } #zoomControl { display: block; text-align: center; font-size: 16px; margin: 15px 0; } #otherImages { display: none; } #productContact { border: 1px solid #bebebe; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-align: center; } #productContact p { background: #eee; padding: 10px; margin: 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-align: center; } #productContact .phone, #productContact .email { background: #fff; color: #4a7e2b; font-size: 18px; font-weight: bold; } #productContact .phone { border-bottom: 1px solid #bebebe; margin: 0 25px; } #productContact .email { } /* # Support ################### */ #supportBox { margin: 0 -23px 25px; width:696px; padding: 5px 0; } #supportBox div { float: left; width: 136px; height: 157px; margin-right: 4px; } #supportBox h3 { font-size: 16px; font-weight: bold; margin: 15px 0 20px 47px; color: #272727; } #supportBox ul { margin-left: 25px; } #supportBox a { color: #272727; } #supportBox a:hover { color: #666; } #s-rma { background: url(../images/support-rma.jpg) no-repeat 0 0; } #s-warranty { background: url(../images/support-warranty.jpg) no-repeat 0 0; } #s-golddrive{ background: url(../images/support-golddrive.jpg) no-repeat 0 0; } #s-drivers { background: url(../images/support-drivers.jpg) no-repeat 0 0; } #s-manuals { background: url(../images/support-manuals.jpg) no-repeat 0 0; margin: 0 !important; } /* # Services ################### */ .serviceBox { margin-bottom: 32px; } .serviceBox h2 { border-bottom: 1px dashed #272727; padding-bottom: 5px; } .serviceBox p { } .serviceBox li { color: #416e25 } .serviceBox a { color: #416e25; font-weight: bold; } .serviceBox a:hover { color: #333; } .serviceRight p, .serviceRight ul, .serviceRight h2 { margin-right: 225px; } .serviceLeft p, .serviceLeft ul, .serviceLeft h2 { margin-left: 225px; } .serviceRight ul { margin-right: 240px !important; } .serviceLeft ul { margin-left: 240px !important; } .ulLearn { float: left; margin: -57px 0 0 230px;} #posMaintenance { border: 1px solid #67913d; margin-bottom: 30px; } #posMaintenance div { text-align: center; padding: 10px; background: #f2f4e6; border-bottom: 1px solid #d0dd95; } #posMaintenance p { margin: 0 50px; } #posMaintenance ul { margin: 10px 35px; } #posWhiteglove { border: 1px solid #67913d; margin: 0 50px 30px; } #posWhiteglove p { margin: 10px; } #posWhiteglove img { margin: 10px; } #posWhiteglove div { background: #f2f4e6; border-top: 1px solid #d0dd95; } /* # Tables ################### */ #customers { border-collapse: collapse; width: 696px; margin: 0 -23px; } #customers td { border: 1px solid #c5c8af; text-align: center; height: 85px; } #customers .topLeft { -moz-border-radius-topleft: 5px; -webkit-border-radius-topleft: 5px; } #customers .topRight { -moz-border-radius-topright: 5px; -webkit-border-radius-topright: 5px; } #customers .bottomLeft { -moz-border-radius-bottomleft: 5px; -webkit-border-radius-bottomleft: 5px; } #customers .bottomRight { -moz-border-radius-bottomright: 5px; -webkit-border-radius-bottomright: 5px; border-left: 0; } #customers .empty { border-width:1px 0; } /* # Links ################### */ a{ color: #208501; } a:hover{} /* # Typography ################### */ p{margin:0 0 1.5em;} /* # Other ################### */ .nomargin { margin-right: 0 !important; } .right{float:right;} .left{float:left;} .clear{clear:both !important; display: block !important} .alignleft{text-align: left;} .alignright{text-align: right;} .center{text-align: center;} .compress { line-height: 12px !important; }