/********************************************************************************************** CSS on Sails Framework Title: RJMetrics Author: XHTMLized (http://www.xhtmlized.com/) Date: April 2010 *********************************************************************************************** 1. BASE 1.1 Reset 1.2 Accessibility Navigation & Hide 1.3 Clearfix 1.4 Default Styles 2. COMMON 2.1 Container 2.2 Header 2.3 Navigation 2.4 Banner 2.5 Content 2.6 Sidebar 2.7 Footer 3. PAGES 3.1 Home page 3.2 Sub page 1 3.3 Sub page 2 ***********************************************************************************************/ /* 1. BASE ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /* 1.1 Reset -----------------------------------------------------------------------------------------------*/ html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, samp, small, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; } q { quotes: none; } q:before, q:after { content: ""; content: none; } a, ins, del { text-decoration: none; } table { border-collapse: collapse; border-spacing: 0; } th, td { vertical-align: top; } th { text-align: left; } /* 1.2 Accessibility Navigation & Hide -----------------------------------------------------------------------------------------------*/ #accessibility-nav, .hide { position: absolute; top: -999em; left: -999em; height: 1px; width: 1px; } /* 1.3 Clearfix -----------------------------------------------------------------------------------------------*/ .clearfix:after, .three-col:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* 1.4 Default Styles -----------------------------------------------------------------------------------------------*/ body { background: #fff; color: #727272; font: 62.5%/1.3 "Helvetica", sans-serif; } hr { display: none; } strong { font-weight: bold; } em { font-style: italic; } del { text-decoration: line-through; } th { font-weight: normal; } address, cite, dfn { font-style: normal; } li { list-style: none; } abbr, acronym { border-bottom: 1px dotted #999; cursor: help; } input, textarea, select { font-family: "Helvetica", sans-serif; } a, a:visited { color: #99ddff; text-decoration: none; outline: none; } a:hover, a:active { color: #99ddff; text-decoration: underline; outline: none; } p { margin: 0 0 20px 0; color: #727272; font-size: 1.2em; line-height: 1.7em; } p.bottom { margin-bottom: 0; } p.message { color: #ffffff; } /* 2. COMMON ----------------------------------------------------------------------------------------------- ===============================================================================================*/ img.image { margin: 0 0 20px 0; } img.left { margin: 0 20px 20px 0; float: left; } img.right { margin: 0 0 20px 20px; float: right; } /* 2.1 Container -----------------------------------------------------------------------------------------------*/ .container { font-size: 1.2em; width: 100%; } .container .inner { width: 940px; position: relative; margin: 0 auto; } /* 2.2 Header -----------------------------------------------------------------------------------------------*/ #header { background: transparent url("../images/header/bg.gif") repeat-x 0 0; height: 122px; position: relative; border-bottom: 1px solid #000; } h1.logo { float: left; position: relative; text-indent: -9999px; left: -10px; } h1.logo a { float: left; display: block; overflow: hidden; width: 160px; height: 50px; margin: 35px 0 0 10px; cursor: pointer; } h1.logo a { background: url("../images/logo.png") no-repeat; position: absolute; top: 0; left: 0; z-index: 10; } /* 2.3 Navigation -----------------------------------------------------------------------------------------------*/ #util-nav { position: absolute; right: 0; top: 0; background: transparent url(../images/header/util-nav-bg.gif) no-repeat 0 0; width: 117px; height: 17px; padding: 5px 30px; } #util-nav ul { float: left; } #util-nav ul li { float: left; margin: 0 25px 0 0; } #util-nav ul li.last { margin: 0; } #util-nav a { color: #EDEEEE; } #navigation { position: absolute; right: 0; top: 27px; height: 94px; } #navigation ul { float: left; } #navigation ul li { float: left; margin: 0 20px 0 0; display: inline; } #navigation ul li.last { margin: 0; } #navigation ul li a { float: left; display: block; padding: 30px 18px 10px 18px; color: #666; height: 55px; font-weight: bold; } #navigation ul li a:hover { /*background: transparent url(../images/header/link-hover.png) no-repeat 50% 100%;*/ text-decoration: none; color: #000; } #navigation ul li.active a { color: #000; } #navigation ul li.last a { padding-right: 10px; } #navigation ul li.last a:hover { background-position: 70% 100%; } /* 2.4 Banner -----------------------------------------------------------------------------------------------*/ #banner { background: transparent url(../images/banner/bg.gif) repeat-x 0 0; width: 100%; } #banner .inner { width: 940px; padding: 40px 0; position: relative; background: transparent url(../images/banner/inner-bg.png) repeat-x 50% 0; } #banner .inner.divider { background: transparent url(../images/banner/divider.png) no-repeat 40% 0; height: 350px; } #banner h2 { float: left; clear: left; color: #FFF; font-size: 2.3em; width: 650px; margin: 0 0 40px 0; line-height: 1.7em; } #banner h2.small { font-size: 2em; padding-top: 10px; } #banner h2.short { width: 430px; } #banner h2.single { margin: 0; } #banner h2.second { margin-top: -30px; } #banner h2.home { font-size: 2.6em; } #banner h3 { font-size: 1em; color: #FFF; } #banner h4 { float: left; clear: left; color: #FFF; font-size: 2.3em; margin: 30px 0 10px 0; line-height: 1.3em; } #banner h4 { font-size: 1.5em; color: #FFF; } #banner img.screenshot { margin: 0 0 -45px 0; } #banner .half h2 { width: 430px; } #banner .half h3, #banner .three-col h3 { color: #fff; font-size: 1.3em; margin: 0 0 20px 0; } #banner .half p, #banner .three-col p { color: #fff; font-size: 1.1em; } #banner .half img { margin: 0 0 20px 0; } #banner .half a { margin: 0 0 0 130px; display: inline; } #banner .quote.black .ul li span.name a, #banner .quote.black ul li span.name a:visited{ color: #99ddff; margin: 0; } /* Reusable buttons (with border) */ a.big-button { float: left; display: block; height: 45px; position: relative; padding: 25px 10px 0 30px; text-transform: uppercase; color: #131313; font-weight: bold; text-shadow: 1px 1px 1px #FFF; font-size: 1.3em; } a.big-button:visited { color: #131313; } a.big-button:hover, a.big-button:active { text-decoration: none; color: #131313; } a.big-button span.end { position: absolute; top: 0; right: 0; width: 70px; height: 70px; margin: 0 -70px 0 0; } a.big-button.top-right { position: absolute; top: 40px; right: 70px; } a.bottom-right { position: absolute; bottom: 40px; right: 110px; } a.big-button.green { background: transparent url(../images/content/green-button-bg.png) no-repeat 0 0; } a.big-button.green span.end { background: transparent url(../images/content/green-button-bg.png) no-repeat 100% 0; } a.big-button.footer { margin-left: 140px; } /* Reusable green buttons (plain) */ a.plain-green-button { float: left; background: transparent url(../images/content/plain-green-button-bg.png) no-repeat 0 0; display: block; height: 37px; padding: 18px 15px 0 15px; text-transform: uppercase; color: #131313; font-weight: bold; font-size: 1.3em; position: relative; } a.plain-green-button:visited { color: #131313; } a.plain-green-button:hover, a.plain-green-button:active { text-decoration: none; } a.plain-green-button span.end { position: absolute; top: 0; right: 0; width: 40px; height: 55px; background: transparent url(../images/content/plain-green-button-bg.png) no-repeat 100% 0; margin: 0 -40px 0 0; } a.plain-green-button.down span.end { background-position: 100% -55px; } a.plain-green-button.top-right { position: absolute; top: 40px; right: 40px; z-index: 2; } /* Reusable grey buttons (plain) */ a.plain-grey-button { float: left; background: transparent url(../images/content/grey-button.gif) no-repeat 0 0; display: block; height: 37px; padding: 18px 15px 0 15px; text-transform: uppercase; color: #131313; font-weight: bold; font-size: 1.3em; position: relative; } a.plain-grey-button:visited { color: #131313; } a.plain-grey-button:hover, a.plain-green-button:active { text-decoration: none; } a.plain-grey-button span.end { position: absolute; top: 0; right: 0; width: 40px; height: 55px; background: transparent url(../images/content/grey-button.gif) no-repeat 100% 0; margin: 0 -40px 0 0; } a.plain-grey-button.down span.end { background-position: 100% -55px; } a.plain-grey-button.top-right { position: absolute; top: 40px; right: 40px; z-index: 2; } img.pdf-link { margin-top: 20px; } /* Collection of 4 pods */ #quad { float: left; } #quad .item { float: left; background: transparent url(../images/content/item-bg.png) no-repeat 0 0; width: 370px; height: 120px; padding: 30px 40px; margin: 0 40px 40px 0;} #quad .item.last { margin: 0; } #quad .item.bottom { margin-bottom: 0; } #quad .item h3 { color: #1a1a1a; font-size: 1.8em; margin: 0 0 15px 0; } #quad .item p { font-size: 1em; float: left; line-height: 1.7em; } #quad .item img { margin: -50px 0 10px 0; } #quad .item a.read-more { float: left; } /* login form */ .form { float: left; clear: left; width: 260px; } #login-form.form { margin: 0 150px 0 0; display: inline; } #signup-form.form { margin: 0 0 0 150px; display: inline; } #demo-form.form { margin: 0 0 0 150px; display: inline; } .form .field { float: left; width: 260px; margin: 0 0 30px 0; display: inline; } .form .fake-text { background: transparent url(../images/form/text-bg.png) no-repeat 0 0; width: 230px; height: 20px; padding: 10px 15px; } /*.form label { float: left; color: #3b3b3b; font-size: 1.2em; }*/ .form label { display: none; } .form label.show { display: block; } .form input.text { border: 0; width: 230px; height: 25px; padding: 5px 0; margin: -5px 0 0 0; font-size: 1.2em; display: inline; } .form input.text { margin-top: -8px; } .field input#login_phone { width: 230px; } input.right { float: right; } .form .dropdown label { float: left; color: #fff; } .form .dropdown select { float: left; margin: 0 0 0 40px; } #demo-intro { float: left; width: 305px; height: 300px; padding: 0 0 0 80px; } #demo-intro h3 { color: #fff; font-size: 1.8em; margin: 0 0 20px 0; } #demo-intro p { color: #fff; } #demo-intro a, #demo-intro a:visited { text-decoration: underline; } #demo-intro a:hover, #demo-intro a:active { text-decoration: none; } /* demo form */ #form-status div { margin: 20px; } /* signup form */ #signup { width: 900px; background: transparent url(../images/form/signup-divider.png) no-repeat 50% 75px; margin: 0 auto; } #signup-intro { float: left; width: 400px; margin: 0 0 0 80px; } #signup-intro p { color: #fff; } #signup-intro a, #signup-intro a:visited { text-decoration: underline; } /* homepage showcase */ #showcase { float: left; background: transparent url(../images/banner/showcase-bg.png) no-repeat 0 0; width: 900px; height: 292px; padding: 25px 40px; margin: 0 0 0 -20px; position: relative; } #showcase h3 { text-transform: uppercase; color: #fff; margin: 0 0 25px 0; font-size: 1.3em; } #showcase ul.tabs { float: left; width: 235px; border: 1px solid #161616; margin: 0 30px 0 0; } #showcase ul.tabs li a { float: left; width: 195px; display: block; padding: 10px 20px; border-bottom: 1px solid #393939; color: #e4e4e4; font-size: 16px; text-shadow: -1px 1px 0px #000; } #showcase ul.tabs li a:hover, #showcase ul.tabs li a:active { background: transparent url(../images/banner/showcase-li.gif) repeat-x 0 100%; text-decoration: none; } #showcase ul.tabs li a span.icon { float: left; width: 30px; height: 30px; display: block; background: transparent url(../images/banner/icons.png) no-repeat 0 0; margin: 0 15px 0 0; } #showcase ul.tabs li#communities a span.icon { background-position: 0 -30px; } #showcase ul.tabs li#subscriptions a span.icon { background-position: 0 -60px; } #showcase ul.tabs li#investors a span.icon { background-position: 0 -90px; } #showcase ul.tabs li a span.cufon-canvas { margin: 10px 0 0 0; } #showcase .showcase-content { position: absolute; top: 66px; left: 310px; width: 630px; height: 220px; } #showcase .showcase-content h3 { float: left; font-size: 23px; float: left; text-transform: none; width: 370px; line-height: 1.4em; } #showcase .showcase-content img { position: absolute; bottom: -40px; right: -40px; } ul.arrows { float: left; clear: left; margin: 0 0 0 10px; list-style: none; } ul.arrows li { font-family: "Myriad Pro", Helvetica, sans-serif; font-size: 1.3em; color: #fff; padding: 0 0 15px 30px; background: transparent url(../images/banner/arrow-bg.png) no-repeat 0 0; list-style: none; } ul.arrows li a, ul.arrows li a:visited { font-family: "Myriad Pro", Helvetica, sans-serif; color: #99ddff; text-decoration: underline; } ul.arrows li a:hover, ul.arrows li a:active { color: #99ddff; text-decoration: none; } ul.herospace {width: 400px;} /* Infographics */ #showcase.infographics { margin-top: -20px; padding-top: 0; text-align: center; background: none; } #showcase.infographics h3 { text-transform: none; font-size: 1.4em; } /* login popup */ a#show-login { width: 215px; } #login-popup { display: none; background: transparent url(../images/form/login-popup-bg.png) no-repeat 0 0; width: 230px; height: 130px; padding: 25px; position: absolute; top: 93px; right: 3px; z-index: 1;} #login-popup .field { float: left; width: 230px; margin: 0 0 15px 0; } #login-popup .fake-text { background: transparent url(../images/form/small-text-bg.png) no-repeat 0 0; width: 198px; height: 16px; padding: 7px 15px; } /*#login-popup .fake-text label { float: left; margin: 0 10px 0 0; }*/ #login-popup .fake-text label { display: none; } #login-popup .fake-text input.text { float: left; border: 0; margin: -7px 0 0 0; width: 200px; height: 27px; font-size: 1.2em; } * html #login-popup .fake-text input.text { padding-top: 5px; height: 22px; } /* 2.5 Content -----------------------------------------------------------------------------------------------*/ #content { float: left; width: 100%; background: #FFF url(../images/content/bg.gif) repeat-x 0 0; padding: 45px 0; } #content h2 { font-size: 1.7em; font-weight: normal; margin: 0 0 20px 0; } #content h2.blue { color: #004F74; } #content h2.dark { color: #070707; } #content h2.green { color: #339e25; } #content h2.black { color: #000000; } a.read-more, a.read-more:visited { color: #3f7e9a; text-transform: uppercase; background: transparent url(../images/content/blue-arrow.png) no-repeat 100% 2px; padding: 0 20px 0 0; font-weight: bold; } a.read-more:active, a.read-more:hover { text-decoration: none; } * html a.read-more { background-position: 100% 5px; } .column { float: left; } .column.last { margin: 0; } .sidebar { float: left; width: 285px; margin: 0; display: inline; } .half { float: left; width: 430px; margin: 0 70px 0 0; display: inline; } #content .half { margin-right: 60px; } .split { width: 590px; margin: 0 50px 0 0; } .half.last { margin: 0; } #content .half.last { margin: 0; width: 400px; } /* Clients */ #clients { float: left; width: 570px; padding: 40px 20px 0 20px; border: 1px solid #d4d4d4; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #clients ul li { float: left; margin: 0 30px 30px 0;} #clients ul li.last { margin: 0 0 30px 0; } /* Quote bubbles */ .quote { float: left; overflow: hidden; margin: 0 0 0 -15px; position: relative; font-family: "Georgia", serif; } .quote.grey { background: transparent url(../images/content/quote-grey.png) no-repeat 0 0; width: 300px; height: 175px; } .quote.black { background: transparent url(../images/content/quote-black.png) no-repeat 0 0; width: 440px; height: 150px; } span.quote-text { display: block; font-size: 1.45em; font-style: italic; margin: 0 30px 80px 0; color: #DEDEDE; } .quote.grey span.quote-text { color: #333; } .quote-text.black span.quote { color: #dedede; } .quote span.name { display: block; width: 220px; font-size: 0.9em; color: #000; position: absolute; bottom: 0; right: 0; font-family: Helvetica, sans-serif;} #banner .quote span.name a, #content .quote span.name a { text-decoration: underline; margin: 0; } /* Carousel */ .jcarousel-container { float: left; } .jcarousel-clip { position: absolute; } .quote.grey .jcarousel-clip { top: 30px; left: 50px; } .quote.black .jcarousel-clip { top: 35px; left: 80px; } .quote ul { position: absolute; } .quote ul li { float: left; margin: 0 40px 0 0; } .quote.grey ul li { width: 225px; height: 140px; position: relative; } .quote.black ul li { width: 325px; height: 125px; margin: 0 65px 0 0; position: relative; } .quote ul li.last { margin: 0px; } .quote.black ul li span.name { bottom: 10px; left: 10px; color: #fff; font-size: 1.1em; width: 300px; } .quote.grey ul li span.name { bottom: 10px; left: -10px; color: #000; } .jcarousel-prev { width: 27px; height: 27px; position: absolute; top: 47px; left: 0; cursor: pointer; z-index: 99; } .jcarousel-next { width: 27px; height: 27px; position: absolute; top: 47px; right: 0; cursor: pointer; z-index: 99; } /* how it works */ .features { float: left; width: 960px; margin: 20px 0 0 0; } .features .info { float: left; margin: 10px 0 0 0; font-size: 1.2em; color: #666; } .features .info strong { display: block; color: #333; margin: 0 0 15px 0; } .features ul { float: left; width: 600px; } .features ul li { background: transparent url(../images/content/green-tick.gif) no-repeat 0 5px; padding: 0 0 0 25px; margin: 0 0 10px 0; line-height: 2em; } /* blurb */ .blurb { float: left; width: 800px; margin: 10px 0 30px 50px; font-size: 1.5em; color: #000;} /* bullet lists */ ul.bullet-list { margin: 0 0 0 20px; } ul.bullet-list li { list-style: disc outside; font-size: 1.4em; margin: 0 0 10px 0; } ul.bullet-list.green li { color: #339e25; } ul.bullet-list.blue li { color: #004F74; } ul.bullet-list li span { color: #666; font-size: 0.8em; } /* case studies */ .case-study { float: left; width: 430px; background: transparent url(../images/content/case-study-bg.gif) no-repeat 0 0; padding: 30px; margin: 0 0 30px 0; } .case-study img { float: left; margin: 0 30px 10px 0; } .case-study .info { float: left; width: 230px; } /* Slider */ #slider { float: left; width: 900px; height: 400px; padding: 40px 40px 0 40px; background: transparent url(../images/slider/bg.png) no-repeat 0 0; margin: 0 0 0 -20px; position: relative; overflow: hidden; } #slider #screens { float: left; width: 4040px; } #slider .screen { float: left; width: 980px; color: #fff; margin: 0 40px 0 0; } #slider .screen img { float: left; margin: 0 40px 0 0; } #slider .screen .details { float: left; width: 430px; } #slider .screen .details ul { margin-left: 25px; } #slider .screen .details ul li { font-size: 1.2em; margin: 0 0 8px 0;} #slider .screen h3 { float: left; clear: left; margin: 30px 0; font-size: 1.6em; line-height: 1.4em; width: 430px; } #slider .screen p { float: left; clear: left; color: #fff; width: 430px; } #slider .screen.last { margin: 0; } #slider-menu { position: absolute; bottom: 45px; left: 25px; width: 900px; height: 70px; } * html #slider-menu { top: 519px; } #slider-menu li { float: left; margin: 0 55px 0 0; display: inline; padding: 25px 0 0 0; } #slider-menu li.last { margin-right: 0; } #slider-menu li a, ul#slider-menu li a:visited { display: block; float: left; color: #b3d7e7; text-transform: uppercase; height: 15px; padding: 12px 0 10px 15px; font-size: 1.2em; position: relative; } #slider-menu li a span.end { position: absolute; top: 0; right: -10px; width: 10px; height: 35px; } #slider-menu li a:active, ul#slider-menu li a:hover, ul#slider-menu li.active a { text-decoration: none; background: transparent url(../images/slider/li-bg.png) no-repeat 0 6px; color: #fff; } #slider-menu li a:active span.end, ul#slider-menu li a:hover span.end, ul#slider-menu li.active a span.end { background: transparent url(../images/slider/li-bg.png) no-repeat 100% 6px; } #slider-menu li.active { background: transparent url(../images/slider/slider-arrow.png) no-repeat 50% 3px; } #text-page { } #text-page .slim { float: left; width: 620px; margin: 0 30px 0 0; } #text-page .side { float: left; width: 230px; } #text-page .slim a, #text-page .slim a:visited { color: #2487b8; text-decoration: underline; } #text-page a.top { color: #2487b8; text-decoration: underline; } #text-page h3 { font-size: 1.4em; color: #000; font-weight: normal; margin: 30px 0 10px 0; } #text-page ul { margin: 0 0 20px 30px; } #text-page ul li { list-style: disc outside; margin: 0 0 5px 0; font-size: 1.5em; } #text-page ul li a { color: #2487b8; font-size: 0.7em; text-decoration: underline; } #text-page ul li span { font-size: 0.7em; } #contact-pod { float: left; width: 230px; border-bottom: 1px dotted #9a9a9a; margin: 0 0 20px 0; background: transparent url(../images/content/contact-pod.png) no-repeat 100% 0; } #text-page .side a.plain-green-button { padding-left: 60px; padding-right: 35px; } a.grey-button, a.grey-button:visited { float: left;display: block; width: 131px; height: 20px; padding: 20px 20px 20px 70px; margin: 20px 0 20px 0; text-transform: uppercase; color: #131313; font-weight: bold; font-size: 1.3em; background: transparent url(../images/content/grey-button.gif) no-repeat 0 ; } a.grey-button:hover, a.grey-button:active { text-decoration: none; } #newsletter-signup { float: left; width: 590px; height: 60px; padding: 20px; background: transparent url(../images/form/newsletter-bg.gif) no-repeat 0 0; } #newsletter-signup .form { width: 500px; margin: 15px 0 0 0; } #newsletter-signup .fake-text { height: 22px; padding:5px 10px; background: transparent url(../images/form/newsletter-text-bg.gif) no-repeat 0 0; } #newsletter-signup .fake-text label { margin: 3px; font-size: 1em; } #newsletter-signup .fake-text input { height: 15px; margin: -1px 0 0 5px; width:200px; font-size: 1em; } #newsletter-signup .field.button { width: 120px; } #demo-footer { margin-top: 50px; float: left; position:relative; left: 20%; width: 590px; height: 60px; padding: 20px; background: transparent url(../images/form/newsletter-bg.gif) no-repeat 0 0; } #demo-footer .div { margin-left: 0px; } /* custom styles for Cohort Analysis, Repeat Purchase */ .three-col { height: 515px; clear: both; } .three-col .col { float: left; width: 33%; } .three-col h3 span { font-weight: normal; display: block; } .three-col .col p { padding-right: 30px; } .move-up { position: relative; margin-top: -400px; } .move-up .plain-green-button { /*margin: -40px 0 40px 360px;*/ position: absolute; top: -290px; right: 90px; } .feature-screenshot { padding-bottom: 80px; background: url(../images/content/screenshot-shadow.png) 0 100% no-repeat; } /* featured on */ .featured-on { width: 430px; text-align: center; margin-bottom: 20px; background: url(../images/featured/bg-top.gif) no-repeat; } .featured-on .images { padding: 20px 0; background: url(../images/featured/bg-bottom.gif) 0 100% no-repeat; } /* databases */ .databases { width: 902px; text-align: center; margin-bottom: 20px; background: url(../images/databases/bg-top.gif) no-repeat; } .databases .images { padding: 20px 0; background: url(../images/databases/bg-bottom.gif) 0 100% no-repeat; } /* 2.6 Sidebar -----------------------------------------------------------------------------------------------*/ #sidebar { width: 200px; float: left; } /* 2.7 Footer -----------------------------------------------------------------------------------------------*/ #footer { clear: both; background-color: #EFEFEF; height: 200px; padding: 30px 0 0 0; } #footer ul.horizontal { float: left; clear: left; margin: 0 0 20px 0; } #footer ul.horizontal li { float: left; margin: 0 10px 0 0; padding: 0 10px 0 0; border-right: 1px solid #C1C0C0; } #footer ul.horizontal li a { color: #121212; font-weight: bold; font-size: 1.1em; } #footer ul.horizontal li.last { border: 0; } #footer p { clear: left; color: #6A6A6A; } #footer h3.logo { float: right; } #footer h3.logo a { display: block; background: transparent url(../images/footer/logo.png) no-repeat 0 0; width: 115px; height: 35px; text-indent: -9999px; } #footer ul.vertical { background-color: #EFEFEF; color: #004F74; font-size: .9em; line-height: 1.8em; min-height: 110px; padding: 20px 0; } #footer ul.vertical a, ul.vertical a:hover { color: #000000; } #footer ul.vertical { float: left; font-weight: bold; list-style-type: none; margin: 0; padding: 0; width: 20%; } #footer ul.first { clear: both; text-indent: 0px; } #footer ul.vertical ul { float: none; font-weight: normal; width: 100%; } /* 3. PAGES ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /* 3.1 Home page -----------------------------------------------------------------------------------------------*/ /* 3.2 Sub page 1 -----------------------------------------------------------------------------------------------*/ /* 3.3 Sub page 2 -----------------------------------------------------------------------------------------------*/