/*================================================== S P L A S H L A Y O U T * Last Updated : 2009/03/16 * Author : Asela Jayarathne * Color Key : ==================================================*/ @import 'lib/reset.css'; @import 'lib/utilities.css'; @import 'lib/forms.css'; body { background: #344e2d url(/images/splash/bg.gif) left top repeat-x; font: 10px/160% Arial, Helvetica, sans-serif; text-align: center; color: #000; padding-top: 5px;} .container { width: 940px; margin: 0 auto; text-align: left; } #header { height: 85px; position: relative; background: transparent url(/images/splash/header-pattern.gif) center bottom repeat-y; } #banner { background: #c6d0bc url(/images/splash/banner-bg.gif) left top repeat-x; border-top: 1px solid #fff; } #contents { padding-bottom: 60px; background: #fff url(/images/splash/contents-bg.gif) left top repeat-x; border-top: 1px solid #fff; } #contents .container { padding: 20px 0 0 0; } /* header */ #header .container { position: relative; } #header a.branding { display: block; width: 233px; height: 34px; background: transparent url(/images/splash/logo.gif) left top no-repeat; text-indent: -9999em; position: absolute; top: 28px; } #header #language-switch li { display: inline; } ul#language-switch { position: absolute; top: 0; right: 0; } ul#language-switch li { display: inline; } ul#language-switch a { display: block; float: right; width: 70px; height: 22px; text-indent: -9999em; margin-left: 10px; } ul#language-switch .en a { background: transparent url(/images/splash/language-en.gif) left bottom no-repeat; } .en ul#language-switch .en a { background: transparent url(/images/splash/language-en.gif) left top no-repeat; } ul#language-switch .ja a { background: transparent url(/images/splash/language-ja.gif) left bottom no-repeat; } .ja ul#language-switch .ja a { background: transparent url(/images/splash/language-ja.gif) left top no-repeat; } ul#language-switch a:hover { background-position: left top; } /* old ie special */ div#old-ie {background: #ffcc33; color:#000; text-align: center; padding:10px 0; line-height: 1.5em; font-size:1.2em;} div#old-ie a {text-decoration: underline; color:#000;} #header form#site-login { width: 460px; position: absolute; top: 20px; right: 0; } #header form#site-login div.text { display: inline; width: 185px; float: left; margin-right: 9px; } #header form#site-login div.text input { width: 100%; background: #fff; border: none; padding: 6px 0; color: #24361f; font-size: 1.2em; font-weight: bold; text-indent: 5px; margin: 0; } #header form#site-login label { color: #24361f; font-size: 1.2em; font-weight: bold; } #header form#site-login input.submit { position: relative; top: 15px; } #header form#site-login p.error { background: none; display: block; margin: 0 0 10px 0 !important; } #header form#site-login p.password { margin-top: 0 !important; } #header form#site-login p.error span { margin: 0 auto; font-size: 12px; font-weight: bold; padding: 5px 1em; background: #ffe08c; color: #3b331f; text-align: center;} #header form#site-login p.password-recovery { margin-top: 18px; line-height: 11px; } #header form#site-login p.password-recovery a { color: #fff; font-size: 11px; text-decoration: none; } #header form#site-login p.password-recovery a:hover { text-decoration: underline; } #header .main-message { position: relative; top: 85px; } #banner .container { padding: 35px 0 20px 0; } /* footer */ #footer { padding: 20px 50px 100px 50px; clear: both; color: #fff; background: #344e2d; } #footer a.credits { display: block; width: 60px; height: 60px; float: right; background: #344e2d url(/images/main/usn-logo.gif) top left no-repeat; text-indent: -9999em; } #footer a.pressarmy { display: block; width: 136px; height: 20px; float: left; margin: 15px 20px 80px 0; display: inline; background: #344e2d url(/images/main/logo.gif) top left no-repeat; text-indent: -9999em; } #footer a { color: #fff; font-size: 12px; } #footer a.pressarmy:hover { background-position: bottom left; } #footer p { font-size: 1.2em; margin-bottom: 0; color: #fff; } #footer li { display: inline; padding: 0 10px; border-left: 1px solid #336633; } #footer li.first { padding-left: 0; border: none; } /* patterns */ a.to-plans { display: block; width: 132px; height: 39px; text-indent: -9999em; background: transparent url(/images/splash/btn-to-plans.gif) left top no-repeat; } .ja a.to-plans { width: 172px; background: transparent url(/images/splash/btn-to-plans-ja.gif) left top no-repeat; } a.to-plans:hover { background-position: left bottom; } tr.signup a { display: block; width: 92px; height: 39px; text-indent: -9999em; background: transparent url(/images/splash/btn-signup.gif) left top no-repeat; } tr.signup a:hover { background-position: left bottom; } h1 { margin: 0 0 10px 0; font-size: 2.8em; line-height: 31px; font-weight: bold; } h2 { font-size: 1.6em; margin-bottom: 10px; } h3 { font-size: 1.4em; line-height: 1.2em; font-weight: bold; } p { font-size: 1.4em; line-height: 1.2em; margin-bottom: 1em; color: #464646; } /*================================================== T O P P A G E ==================================================*/ .en .top h1 { text-indent: -9999em; height: 100px; height: 31px; } .top h2 { height: 20px; width: 100%; text-indent: -9999em; } .top #banner { } .top #banner .container { height: 165px; background: transparent url(/images/splash/top-illustration.gif) right top no-repeat; } .en .top #banner h1 { background: transparent url(/images/splash/top-title-main.gif) left top no-repeat; } .top #banner p { font-size: 1.8em; line-height: 1.32; margin-bottom: 30px; } div.column { width: 460px; float: left; } div.column.odd { margin-right: 20px; display: inline; } #features { padding: 0 0 10px 0; margin-bottom: 20px; border-bottom: 1px solid #f0f0f0; } #features .discover h2 { background: transparent url(/images/splash/top-title-features-discover.gif) left top no-repeat; } #features .analysis h2 { background: transparent url(/images/splash/top-title-features-analysis.gif) left top no-repeat; } #features p { margin-bottom: 1.4em; } #features p.intro { margin-bottom: .5em; } #features li { font-size: 1.4em; line-height: 1.2em; padding: 0 0 .5em 20px; color: #464646; background: transparent url(/images/splash/bullet.gif) 2px 4px no-repeat; } #features li strong { color: #000; font-weight: normal; } #users {padding: 0 0 10px 0; margin-bottom: 20px; border-bottom: 1px solid #f0f0f0;} #marketing h2.marketing { background: transparent url(/images/splash/top-title-useage-marketing.gif) left top no-repeat; } #pr h2.pr { background: transparent url(/images/splash/top-title-useage-pr.gif) left top no-repeat; } #marketing p, #pr p { margin-bottom: 1.4em; } #press-releases {} #press-releases h2.press-releases {background: transparent url(/images/splash/top-title-press.gif) left top no-repeat;} #press-releases li {font-size: 1.4em; line-height: 1.2em; padding: 0 0 .5em 20px; margin-bottom: 0.5em; color: #464646; background: transparent url(/images/splash/bullet.gif) 2px 4px no-repeat; } #press-releases li a {color: #000; text-decoration: underline;} #press-releases li a:hover {text-decoration: none;} #testimonials img { margin-bottom: 20px; } #testimonials ul li { width: 220px; float: left; margin-bottom: 15px; display: inline; background: transparent url(/images/splash/top-quote-bg.gif) left top no-repeat; } #testimonials ul li.odd { margin-right: 20px; } #testimonials ul li blockquote { color: #56563f; font-size: 1.4em; line-height: 1.29em; padding: 12px; margin-bottom: 10px; } #testimonials ul li cite { display: block; margin: 0 45px 0 0; font-size: 1.4em; color: #333; font-style: normal; font-weight: bold; text-align: right; } #testimonials ul li cite span { display: block; font-size: 10px; line-height: 12px; color: #666; font-weight: normal; } ul.screenshots li { width: 143px; float: left; margin-right: 15px; display: inline; } ul.screenshots li.last { margin-right: 0; } ul.screenshots li a { text-decoration: none; color: #333; font-size: 1.2em; font-weight: bold; } /* fancy zoom */ #zoom_content p { padding: 20px 0 0 0; font-weight: bold; } #zoom_content img { border-bottom: 1px solid #ccc; } #contents div.input .note { font-size: 1.2em; } #contents div.input .error { margin-left: 170px; color: red; } /*================================================== R E G I S T E R P A G E ==================================================*/ .en.register .index #banner h1 { text-indent: -9999em; height: 31px; background: transparent url(/images/splash/top-title-plan.gif) left top no-repeat; } .register .index h2 { height: 20px; width: 100%; text-indent: -9999em; } .register div.input .note { font-size: 1.2em; } .register div.input .error { margin-left: 170px; color: red; } .register div.confirm label { font-size: 1.2em; } .register div.submit { padding-top: 20px; margin-bottom: 20px;} .register p.register { margin-left: 170px; } .register div.card input { width: 3em; } /*================================================== C O N T A C T P A G E ==================================================*/ .splash .contact #contents div.text input { width: 260px; } .splash .contact #contents div.textarea textarea { width: 420px; height: 8em; } .splash .contact .help { margin-left: 170px; padding-top: 20px; } .splash .contact .help h3 { margin-bottom: 10px; } div#banner div.container div.contact-form {display:inline; float:left; width:469px; border-right:1px solid #b6c5a9;} div#banner div.container div.contact-map {display:inline; float:right; width:470px} div#banner div.container div.contact-form h1, div#banner div.container div.contact-form p {padding-right:10px;} div#banner div.container div.contact-map h1, div#banner div.container div.contact-map p {padding-left:10px;} div#contents div.container div.contact-form {display:inline; float:left; width:460px;} div#contents div.container div.contact-map {display:inline; float:right; width:460px;} div#contents div.container div.contact-form textarea#content {width:265px; height:150px;} div#contents div.container div.contact-map a {color:#000; font-size:12px; display:block; margin-top:10px;} /*================================================== C O M P A N Y P R O F I L E ==================================================*/ #company-profile {list-style: none; margin: 0;} #company-profile li {list-style: none; display: block;} #company-profile li:after {content: "."; display: block; height: 0; clear: both;visibility: hidden;} #company-profile li strong {display: block; float: left; width: 160px;} #company-profile ul {padding-top: 15px; clear: both; margin-left: 160px;} #company-profile ul li {display: list-item; list-style: disc!important;font-size: 1em;}