/* CSS Document */ /* Authored by: ------------------------------------------ The Graphic Element January 2009 http://www.thegraphicelement.com License: Copyright (c) 2009, The Graphic Element, All rights reserved. ------------------------------------------ */ /* Imported Styles ------------------------------------------ */ @import url(reset.css); /* Go on just say it... ------------------------------------------ @import url(http://www.domain.com/css/reset.css);*/ /* Global ------------------------- */ body { color: #000; font-size: 62.5%; background: #082d59 url(../img/bg.gif) repeat-x 50% 0; } a:link, a:visited, a:hover, a:active { color: #000; text-decoration: none; } a:focus { outline: none; } /* Removes FF link outlines */ body, input, table, td, th, textarea { font-family: Verdana, Helvetica, Arial, Geneva, sans-serif; } h1, h2, h3, h4 { font-family: "Times New Roman", Times, Georgia, serif; } h1 { color: #7a415a; font-size: 2.5em; text-align: center; } h2 { margin-top: 1em; color: #59233b; font-size: 2em; } #wrapper { margin: 0 auto; width: 710px; } #wrapper-inner { background: #fff url(../img/content-bg-md.gif) repeat-y 0 0;; } #banner { padding-left: 30px; } /* Header ------------------------- */ #header { position: relative; min-height: 75px; color: #ccc; } #logo { position: absolute; left: 10px; top: 20px; display: block; width: 130px; height: 50px; overflow: hidden; } #logo span { display: block; width: 100%; height: 100%; background: transparent url(../img/logo.gif) no-repeat 0 0; } #logo img { width: 0; display: block; } /*#contact-info { position: absolute; top: 20px; right: 10px; } #linkedin { position: absolute; top: 52px; right: 220px; }*/ #contact-info { margin: 0 0 0 150px; padding-top: 20px; width: 550px; color: #fff; font-size: 1.2em; line-height: 1.4; font-family: Arial, Helvetica, Geneva, sans-serif; text-align: right; } #linkedin { position: relative; top: 2px; margin-right: 10px; } /* Nav ------------------------- */ #nav { position: relative; padding: 25px 30px 0; width: 650px; height: 30px; background: url(../img/content-bg-tp.gif) no-repeat 0 0; } #nav li { display: inline; } #nav li a { float: left; position: absolute; margin-left: 30px; width: 97px; height: 30px; overflow: hidden; background-image: url(../img/nav.png); background-repeat: no-repeat; text-indent: -9999em; } /* BUTTONS */ #nav li a#n-home { left: 0; background-position: 0 0; } #nav li a#n-about { left: 90px; background-position: -97px 0; } #nav li a#n-whymars { left: 183px; background-position: -194px 0; } #nav li a#n-services { left: 276px; background-position: -291px 0; } #nav li a#n-testimonials { left: 369px; background-position: -388px 0; } #nav li a#n-team { left: 461px; background-position: -485px 0; } #nav li a#n-contact { left: 553px; background-position: -582px 0; } /* OVER STATES */ #nav li a#n-home:hover { background-position: 0 -30px; } #nav li a#n-about:hover { background-position: -97px -30px; } #nav li a#n-whymars:hover { background-position: -194px -30px; } #nav li a#n-services:hover { background-position: -291px -30px; } #nav li a#n-testimonials:hover { background-position: -388px -30px; } #nav li a#n-team:hover { background-position: -485px -30px; } #nav li a#n-contact:hover { background-position: -582px -30px; } /* ON STATES */ body#home #nav li a#n-home { background-position: 0 -60px; } body#about #nav li a#n-about { background-position: -97px -60px; } body#whymars #nav li a#n-whymars { background-position: -194px -60px; } body#services #nav li a#n-services { background-position: -291px -60px; } body#testimonials #nav li a#n-testimonials { background-position: -388px -60px; } body#team #nav li a#n-team { background-position: -485px -60px; } body#contact #nav li a#n-contact { background-position: -582px -60px; } /* Content ------------------------- */ #content { position: relative; padding: 30px 40px 40px; background: url(../img/content-bg-bm.gif) no-repeat 0 100%; } p { margin: 0.5em 0 1em; line-height: 1.6em; } #content p, #content li, #content dl, #content blockquote { font-size: 1.3em; } #content li { margin: 0.4em 0; } #content li li { font-size: 100%; } #content ul { margin-left: 40px; list-style: disc; } #content ol { margin-left: 20px; list-style: upper-roman; } #content ol ol { list-style: upper-alpha; } #content ol ol ol { list-style: decimal; } #content ol ol ol ol { list-style: lower-alpha; } #content ol li { margin-top: 1.5em; } #content ol li li { margin-top: 0.5em; } #content a { color: #59233b; border-bottom: 1px solid #59233b; } #content a:hover { color: #59233b; background: #e2d2d2; border-bottom: none; } #content a.top { float: right; padding: 2px 4px; color: #082d59; font-size: 0.9em; letter-spacing: 0.1em; background: #ddd; border: 1px solid #ccc; text-decoration: none; text-transform: uppercase; } #content a.top:hover { background: #bed2ed; border-color: #082d59; } strong.em { font-style: italic; } p.center { text-align: center; } #content img.right { float: right; margin: 0 0 10px 20px; } /* HOME */ body#home #content { clear: left; } .container { margin: 10px 30px 0; width: 650px; overflow: auto; } .container div { float: left; margin-right: 5px; width: 158px; color: #fff; } .container div h2 { margin: 0; padding: 15px 7px 5px; color: #fff; font-weight: normal; font-size: 1.4em; font-family: "Times New Roman", Times, Georgia, serif; text-align: center; text-transform: uppercase; } .container div p, .container div ul { margin: 0 10px; font-size: 1.1em; font-family: Helvetica, Arial, Geneva, Verdana, sans-serif; line-height: 1.4em; } .container div ul { margin-left: 22px; list-style: disc; } .container div a img { display: block; margin: 10px auto 12px; } #services-box { background: #59233b url(../img/box-wine-bm.gif) no-repeat 0 100%; } #services-box h2 { background: url(../img/box-wine-tp.gif) no-repeat 0 0; } #plan-box { background: #989072 url(../img/box-brown-bm.gif) no-repeat 0 100%; } #plan-box h2 { background: url(../img/box-brown-tp.gif) no-repeat 0 0; } #results-box { background: #082d59 url(../img/box-blue-bm.gif) no-repeat 0 100%; } #results-box h2 { background: url(../img/box-blue-tp.gif) no-repeat 0 0; } #consult-box { margin-right: 0; background: #0d684f url(../img/box-green-bm.gif) no-repeat 0 100%; } #consult-box h2 { background: url(../img/box-green-tp.gif) no-repeat 0 0; } /* ABOUT */ body#about #content a.cv { position: absolute; padding: 5px 10px 4px; color: rgb(255,255,255); font-weight: bold; font-size: 1.2em; font-family: Helvetica, Arial, Geneva, Verdana, sans-serif; background: rgb(140,84,109); border-bottom: none; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; text-transform: uppercase; } body#about #content a.cv:hover { background: #59233b; } /* TESTIMONIALS */ blockquote { margin-bottom: 20px; padding: 10px 50px 0 35px; line-height: 1.4em; background: url(../img/quotes.gif) no-repeat 20px 0; } blockquote em { color: #88abd9; } /* Footer ------------------------- */ #footer { margin: 5px 30px 10px; color: #bed2ed; font-size: 1em; text-align: center; } #footer li { display: inline; } #footer li#tagline { display: block; margin: 1em 0; font-size: 1.2em; } #footer li#copyright { display: block; margin-top: 0.3em; } #footer a { color: #fff; text-transform: uppercase; } #footer a:hover { color: #88abd9; }