/********************************************************************************************** CSS on Sails Title: XHTMLized Author: XHTMLized (http://www.xhtmlized.com/) Date: June 2009 *********************************************************************************************** 1. BASE 1.1 Reset 1.2 Accessibility Navigation & Hide 1.3 Clearfix 1.4 Default Styles 2. LAYOUT 2.1 Header 2.2 Intro 2.3 Navigation 2.4 Content 2.5 Footer ***********************************************************************************************/ /* 1. BASE ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /* 1.1 Reset -----------------------------------------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } address { font-style: normal; } /* 1.2 Accessibility Navigation & Hide -----------------------------------------------------------------------------------------------*/ ol#accessibility-nav, .hide { position: absolute; top: -999em; left: -999em; height: 1px; width: 1px; } /* 1.3 Clearfix -----------------------------------------------------------------------------------------------*/ .container:after, .section-wide:after, #navigation ul:after, #three-questions ul:after, #intro ul:after, #intro blockquote:after, .section-header:after, #company-information:after, #top20 ol li:after, #what-we-do .summary:after, #order-tabs .tabs li:after, #register-form:after, .optionbox p:after, .optionbox-holder:after, .cms-blog-skin .option-holder:after, #register-form li.openid div:after, #register-form li.openid:after, ul.brief-tabs:after, .brief-options .layout-options ul:after, .brief-options .markup-requirements ul:after, #confirm:after, #confirm .section-a:after, #confirm-management ul:after, #confirm-support ul:after, #confirm-summary dl:after, #order-tabs .tabs li a:after, #register-form .account-details li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* 1.4 Default Styles -----------------------------------------------------------------------------------------------*/ body { background: #0a0e13 ; font: 62.5% Arial, Helvetica, sans-serif; text-align: center; color: #fff; } hr { display: none; } strong { font-weight: bold; } em { font-style: italic; } abbr, acronym { border-bottom: 1px dotted #999; cursor: help; } input, textarea, select { font: 1em Arial, Helvetica, sans-serif; } a { color: #fff; text-decoration: underline;} a:hover, a:active { color: #ff9900; text-decoration: none; } /* sections */ .section { padding: 30px 0; border-top: 1px solid #18293f; background: url(../images/bg_section.png) repeat-x; } .section-header { padding: 10px 0 10px 0; } .section-header h1, .home .section-header h2 { font-size: 4.9em; float: left; padding: 0 30px 0 0; color: #89c7dd; text-transform: uppercase;} .section-header h2 { color: #89C7DD; padding: 15px 0 5px; font-size: 1.25em; } .section-header p { margin: 10px 0 0 0; font-size: 1.1em; line-height: 1.4em; } .section-header p strong { display: block; } .section-header.separate { padding: 20px 0; } /* carousel */ .carousel .big { width: 654px; height: 700px; } .carousel .little { width: 980px; height: 220px; margin-bottom: -20px; } .carousel .slide { display: none; position: absolute; width: 100%; } .carousel .slide-holder .current { display: block; } .carousel .slide-holder { position: relative; overflow: hidden; } .carousel .slidelinks a { text-decoration: none; } .carousel .slidelinks a:hover, .carousel .slidelinks a.current { color: #ade5ff; } /* carousel: previous / next buttons */ .prev, .next, .prev span, .next span { display: block; width: 15px; height: 15px; font-size: .5em; text-indent: -999em; } .prev, .next { position: relative; overflow: hidden; } .prev span, .next span { position: absolute; left: 0; top: 0; z-index: 1; background: url(../images/ico_arrows.png) no-repeat; } .prev span { background-position: 0 0; } .prev:hover span { background-position: 0 -15px; } .next span { background-position: -15px 0; } .next:hover span { background-position: -15px -15px; } /* carousel: previous / next buttons disabled */ .at-first .prev span { background-position: 0 -15px; } .at-last .next span { background-position: -15px -15px; } /* bulleted list */ .bullet-list { margin: 0 0 20px 15px; } .bullet-list li { margin: 0 0 15px 0; padding: 0 0 0 20px; background: url(../images/ico_arrow_orange_info.png) no-repeat 0 3px; line-height: 1.4em; } .bullet-list li ul, .bullet-list li dl { margin: 10px 0 10px 20px; } .bullet-list li dt { font-weight: bold; } .bullet-list li dd { margin-left: 15px; } /* buttons */ a.btn-orange { width: 174px; height: 43px; margin: 10px 0 0 0; padding: 12px 0 0 0; text-align: center; color: #0a0e13; background: url(../images/btn_start.png) no-repeat; font-weight: bold; line-height: 1em; text-decoration: none; } a.btn-orange:hover { color: #28323f; } a.btn-orange strong { display: block; cursor: pointer; font-weight: bold; font-size: 1.2em; } /* rounded boxes */ .tl, .tr, .bl, .br { display: block; width: 8px; height: 8px; position: absolute; z-index: 100; background-image: url(../images/bg_box_corners.png); background-repeat: no-repeat; overflow: hidden; } .tl, .section-a .section-f .tl { top: 0; left: 0; } .tr, .section-a .section-f .tr { top: 0; right: 0; } .bl, .section-a .section-f .bl { bottom: 0; left: 0; } .br, .section-a .section-f .br { bottom: 0; right: 0; } .section-a, .section-b, .section-c, .section-d, .section-e, .section-f, .section-g, .section-h, .section-i, .section-j { position: relative; } .section-wide { width: 895px; margin: 0 0 40px 0; padding: 20px 15px; } .section-a, .section-b, .section-c, .section-d, .section-e, .section-i { border: 1px solid #b3b3b3; } .section-a .tl, .section-b .tl, .section-c .tl, .section-d .tl, .section-e .tl, .section-a .section-f .section-c .tl, .section-i .tl { top: -1px; left: -1px; } .section-a .tr, .section-b .tr, .section-c .tr, .section-d .tr, .section-e .tr, .section-a .section-f .section-c .tr, .section-i .tr { top: -1px; right: -1px; } .section-a .bl, .section-b .bl, .section-c .bl, .section-d .bl, .section-e .bl, .section-a .section-f .section-c .bl, .section-i .bl { bottom: -1px; left: -1px; } .section-a .br, .section-b .br, .section-c .br, .section-d .br, .section-e .br, .section-a .section-f .section-c .br, .section-i .br { bottom: -1px; right: -1px; } .section-a { background-color: #f9f9f9; } .section-a .tl, .section-a .tr, .section-a .bl, .section-a .br { background-color: #fff; } .section-a .tl, .section-b .section-a .tl { background-position: 0 0; } .section-a .bl, .section-b .section-a .bl { background-position: 0 -8px;} .section-a .tr, .section-b .section-a .tr { background-position: -8px 0; } .section-a .br, .section-b .section-a .br { background-position: -8px -8px; } .section-b { background-color: #e6e6e6; } .section-b .tl, .section-b .tr, .section-b .bl, .section-b .br { background-color: #fff; } .section-b .section-a .tl, .section-b .section-a .tr, .section-b .section-a .bl, .section-b .section-a .br { background-color: #e6e6e6; } .section-b .tl { background-position: 0 -16px; } .section-b .bl { background-position: 0 -24px;} .section-b .tr{ background-position: -8px -16px; } .section-b .br { background-position: -8px -24px; } .section-c { background-color: #fff; } .section-c .tl, .section-c .tr, .section-c .bl, .section-c .br { background-color: #fff; } .section-c .tl { background-position: 0 -32px !important; } .section-c .bl { background-position: 0 -40px !important;} .section-c .tr { background-position: -8px -32px !important; } .section-c .br { background-position: -8px -40px !important; } .section-d { background-color: #fbffc3; } .section-d .tl, .section-d .tr, .section-d .bl, .section-d .br { background-color: #fff; } .section-d .tl { background-position: 0 -48px; } .section-d .bl { background-position: 0 -56px;} .section-d .tr { background-position: -8px -48px; } .section-d .br { background-position: -8px -56px; } .section-e { background-color: #f5f5f5; border-color: #e6e6e6; } .section-e .tl, .section-e .tr, .section-e .bl, .section-e .br { background-color: #fff; } .section-e .tl { background-position: 0 -64px; } .section-e .bl { background-position: 0 -72px;} .section-e .tr { background-position: -8px -64px; } .section-e .br { background-position: -8px -72px; } .section-f { background-color: #e6e6e6; } .section-f .tl, .section-f .tr, .section-f .bl, .section-f .br { background-color: #fff; } .section-f .section-c .tl, .section-f .section-c .tr, .section-f .section-c .bl, .section-f .section-c .br { background-color: #e6e6e6; } .section-f .tl { background-position: -16px 0; } .section-f .bl { background-position: -16px -8px;} .section-f .tr { background-position: -24px 0; } .section-f .br { background-position: -24px -8px; } .section-g, .section-h { border: 3px solid; } .section-g .tl, .section-h .tl { top: -3px; left: -3px; } .section-g .tr, .section-h .tr { top: -3px; right: -3px; } .section-g .bl, .section-h .bl { bottom: -3px; left: -3px; } .section-g .br, .section-h .br { bottom: -3px; right: -3px; } .section-g { background-color: #fdffc5; } .section-g { border-color: #d8d500; } .section-g .tl, .section-g .tr, .section-g .bl, .section-g .br { background-color: #fff; } .section-g .tl { background-position: -16px -16px; } .section-g .bl { background-position: -16px -24px;} .section-g .tr { background-position: -24px -16px; } .section-g .br { background-position: -24px -24px; } .section-h { background-color: #e8ffdf; } .section-h { border-color: #4fac53; } .section-h .tl, .section-h .tr, .section-h .bl, .section-h .br { background-color: #fff; } .section-h .tl { background-position: -16px -32px; } .section-h .bl { background-position: -16px -40px;} .section-h .tr { background-position: -24px -32px; } .section-h .br { background-position: -24px -40px; } .section-i { background-color: #55d4e3; } .section-i .tl, .section-i .tr, .section-i .bl, .section-i .br { background-color: #fff; } .section-i .tl { background-position: -16px -48px; } .section-i .bl { background-position: -16px -56px;} .section-i .tr { background-position: -24px -48px; } .section-i .br { background-position: -24px -56px; } .section-j { background-color: #fff; } .section-j .tl, .section-j .tr, .section-j .bl, .section-j .br { background-color: #081018; } .section-j .tl { background-position: -16px -64px; } .section-j .bl { background-position: -16px -72px;} .section-j .tr { background-position: -24px -64px; } .section-j .br { background-position: -24px -72px; } /* Used on clients quotes */ .section-q { padding: 3px 0; position: relative; } .section-q span.tl, .section-q span.tr, .section-q span.br, .section-q span.bl { display: block; width: 3px; height: 3px; overflow: hidden; background: transparent url(../images/bg_section_q.png) no-repeat 0 0; text-align: left; text-indent: -1000em; position: absolute; } .section-q span.tl { left: 0px; } .section-q span.tr { right: 0px; top: 0px; background-position: -977px 0; } .section-q span.bl { bottom: 0px; background-position: 0 -3px; } .section-q span.br { right: 0px; bottom: 0px; background-position: -977px -3px; } .section-q span.tl, .section-q span.bl { left: 0px; right: 3px; width: auto; } .section-q .section-inner { padding: 15px 30px; background: #FFF; font-size: 1.286em; line-height: 1.3em; color: #0a0e13; } /* Sections updates */ .section-a .section-c .tl, .section-a .section-c .tr, .section-a .section-c .bl, .section-a .section-c .br { background-color: #e6e6e6; } .section-a .section-c .tl { background-position: 0 -32px; } .section-a .section-c .bl { background-position: 0 -40px; } .section-a .section-c .tr { background-position: -8px -32px; } .section-a .section-c .br { background-position: -8px -40px; } .section-a .section-d .tl, .section-b .section-d .tr, .section-b .section-d .bl, .section-b .section-d .br { background-color: #e6e6e6; } .section-a .section-d .tl { background-position: 0 -48px; } .section-a .section-d .bl { background-position: 0 -56px;} .section-a .section-d .tr { background-position: -8px -48px; } .section-a .section-d .br { background-position: -8px -56px; } .section-a .section-c .section-a .tl, .section-a .section-c .section-a .tr, .section-a .section-c .section-a .bl, .section-a .section-c .section-a .br { background-color: #FFF; } /* !!! Note : important used to override section-c important */ .section-a .section-c .section-a .tl { background-position: 0 0 !important; } .section-a .section-c .section-a .bl { background-position: 0 -8px !important;} .section-a .section-c .section-a .tr { background-position: -8px 0 !important; } .section-a .section-c .section-a .br { background-position: -8px -8px !important; } .section-a .section-c .section-b .tl, .section-a .section-c .section-b .tr, .section-a .section-c .section-b .bl, .section-a .section-c .section-b .br { background-color: #FFF; } .section-a .section-c .section-b .tl { background-position: 0 -16px !important;} .section-a .section-c .section-b .bl { background-position: 0 -24px !important;} .section-a .section-c .section-b .tr { background-position: -8px -16px !important;} .section-a .section-c .section-b .br { background-position: -8px -24px !important;} .section-a .section-c .section-g .tl, .section-a .section-c .section-g .tr, .section-a .section-c .section-g .bl, .section-a .section-c .section-g .br { background-color: #FFF; } .section-a .section-c .section-g .tl { background-position: -16px -16px !important;} .section-a .section-c .section-g .bl { background-position: -16px -24px !important;} .section-a .section-c .section-g .tr { background-position: -24px -16px !important;} .section-a .section-c .section-g .br { background-position: -24px -24px !important;} /* sectiong under BC */ /* .section-b .section-c .section-b .tl, .section-b .section-c .section-b .tr, .section-b .section-c .section-b .bl, .section-b .section-c .section-b .br, .section-b .section-c .section-a .tl, .section-b .section-c .section-a .tr, .section-b .section-c .section-a .bl, .section-b .section-c .section-a .br, .section-b .tl { background-position: 0 -16px; } .section-b .bl { background-position: 0 -24px;} .section-b .tr{ background-position: -8px -16px; } .section-b .br { background-position: -8px -24px; } .section-b .section-c .section-b .tl { background-position: 0 -16px; } .section-b .section-c .section-b .bl { background-position: 0 -24px;} .section-b .section-c .section-b .tr{ background-position: -8px -16px; } .section-b .section-c .section-b .br { background-position: -8px -24px; } */ /* page: textual content styles */ .page h1, .page h2, .page h3 { font-weight: bold; color: #ff9900; margin-bottom: 10px; } .page h1 { font-size: 1.4em; } .page h2 { font-size: 1.2em; } .page h3 { color: #a3d8f2; } .page h4 { font-size: 1em; } .page p { margin-bottom: 30px; } .page a { text-decoration: underline; } .page a:hover { text-decoration: none; } /* 2. LAYOUT ----------------------------------------------------------------------------------------------- ===============================================================================================*/ .container, #navigation ul, .section-header, .return-to-top { width: 980px; position: relative; margin: 0 auto; text-align: left; font-size: 1.4em; } #pagepeel { z-index: 10000; } /* 2.1 Header -----------------------------------------------------------------------------------------------*/ #header { padding: 6px 0 0 0; background: url(../images/bg_header.png) repeat-x left bottom; text-align: center; } #header .site-name { position: absolute; width: 300px; left: 300px; top: 0; z-index: 18; text-align: center; font-weight: bold; font-size: 1.2em; color: #fff; } #header .site-name strong { margin: -8px 0 -6px 0; display: block; font-size: 2.8em; color: #ff9900; } #header .site-name { text-decoration: none; } #header strong.phone { padding-left: 28px; position: absolute; right: 10px; top: -8px; font-size: 2em; z-index: 100; float: right; background: url(../images/ico_phone.png) no-repeat 0 9px;} .home #header .site-name { width: 572px; left: 180px; height: 446px; background: url(../images/logo.png) no-repeat 10px 50px; } /* start now */ #header a.btn-orange { float: left; position: relative; z-index: 10; } #header a.btn-orange strong { text-transform: uppercase; } /* twitter feed */ .twitter-feed { float: right; position: relative; z-index: 20; width: 325px; height: 63px; overflow: hidden; padding: 0 0 0 35px; background: url(../images/bg_twitter_feed.png) no-repeat; font-size: .8em; } .twitter-feed p { margin: 0; padding: 6px 20px 0 28px; color: #007292; line-height: 1.1em; } .twitter-feed a { display: block; padding: 0; color: #007292; text-decoration: none; } .twitter-feed .twitter-update-list a { display: inline; } .twitter-feed em { font-style: normal; } .twitter-feed .follow-button { display: none;} .twitter-feed:hover .follow-button { position: absolute; bottom: 1px; right: 90px; width: 158px; height: 19px; line-height: 19px; display: block;background: url(../images/bg_twitter_follow.png) no-repeat left top; text-align: center;} .twitter-feed .twitter-timeline { color: #80CDE3; display: block; text-decoration: none; text-align: right; margin-right: 15px;} #header .twitter-feed { float: none; position: absolute; top: 205px; left: 490px; } .twitter-feed .close { float: right; width: 9px; height: 10px; display: inline; text-indent: -9999px; background: url(../images/ico_close-2.png) no-repeat 0 0; margin: 10px 10px 0 0; } #contact-us .twitter-feed { margin: 10px 0 0 20px; float: left; display: inline; } #pagepeel.xteam-pagepeel .corner { background: url(../images/pagepeel/note-revealed.png) no-repeat top right; } #pagepeel.xteam-pagepeel img.peel { position: absolute; top: 0; right: 0; width: 178px; height: 173px; z-index: 100; } #pagepeel.xteam-pagepeel .back { position: absolute; top: 0; right: 0; width: 167px; height: 160px; } #pagepeel.xteam-pagepeel.teaser .link { background: url(../images/pagepeel/teaser.png) no-repeat left bottom; } #pagepeel.xteam-pagepeel .peel-content, #pagepeel.xteam-pagepeel.teaser.expanded .peel-content, #pagepeel.xteam-pagepeel.teaser.over .peel-content{ display: none; position: absolute; left: 5px; bottom: 7px; } #pagepeel.xteam-pagepeel.expanded .peel-content { display: block; position: absolute; left: 5px; bottom: 7px; } #pagepeel.xteam-pagepeel.expanded .peel-content .action { width: 153px; height: 0; padding: 37px 0 0; overflow: hidden; display: block; background: url(../images/pagepeel/more.png) no-repeat left top;} #pagepeel.xteam-pagepeel.expanded .peel-content form{ display: none;} #pagepeel.xteam-pagepeel.expanded.full .peel-content .action { display: none; } #pagepeel.xteam-pagepeel.expanded.full .peel-content form{ display: block;} #pagepeel.xteam-pagepeel.expanded.full .peel-content form button { width: 80px; height: 0; padding: 13px 0 0; border: none; overflow: hidden; display: block; background: url(../images/pagepeel/close.png) no-repeat left top;} .xteam-pagepeel img.map { left: 0; top: 0;} /* 2.2 Intro -----------------------------------------------------------------------------------------------*/ #intro { border-top: 1px solid #18293f; height: 342px; overflow: hidden; } #intro .container { z-index: 999; } /** DL: quotes are hidden by default, and will be displayed if js is not available **/ #intro blockquote { display: none; } /* client quotes */ #intro blockquote { position: relative; z-index: 10; float: left; width: 220px; font-weight: bold; font-size: 1.5em; color: #89c7dd; } #intro blockquote p { margin: 0 0 10px 0; } #intro blockquote cite { margin-left: 60px; color: #fff; } #intro blockquote.quote1 {} #intro blockquote.quote2 { float: right;} #intro blockquote.quote3 { display: inline; margin: 20px 0 0 760px; } /* Demo updates */ #header.demo .site-name { background: none; height: auto; } #intro-b { margin: 1px 0 0; overflow: hidden; background: transparent url(../images/bg_intro_b.png) repeat-x 0 0; font-size: 1.4em; line-height: 1.3em; /* Current figure background */ /* Display logic */ } #intro-b h2 { position: absolute; left: -1000em; text-align: left; } #intro-b ul { margin: 0 auto; height: 328px; width: 980px; position: relative; text-align: left; background: transparent no-repeat 40% 0; } #intro-b li { padding: 15px 15px 10px 20px; display: block; width: 404px; height: 90px; position: absolute; left: -1000em; bottom: 5px; background: transparent url(../images/bg_intro_b_item.png) no-repeat 0 0; text-align: right; } #intro-b h3, #intro-b p { text-align: left; } #intro-b h3 { margin: 0 0 12px; font-size: 1.571em; line-height: 1.3em; font-weight: normal; } #intro-b p { margin: 0 100px 0 0; color: #95d1e4; } #intro-b a { position: absolute; right: 15px; bottom: 10px; text-transform: lowercase; text-decoration: none; } #intro-b ul.view-1 { background-image: url(../images/intro/1.jpg); } #intro-b ul.view-2 { background-image: url(../images/intro/2.jpg); } #intro-b ul.view-3 { background-image: url(../images/intro/3.jpg); } #intro-b ul.view-4 { background-image: url(../images/intro/4.jpg); } #intro-b ul.view-5 { background-image: url(../images/intro/5.jpg); } #intro-b ul.view-6 { background-image: url(../images/intro/6.jpg); } #intro-b ul.view-1 li.intro-1, #intro-b ul.view-2 li.intro-2, #intro-b ul.view-3 li.intro-3, #intro-b ul.view-4 li.intro-4, #intro-b ul.view-5 li.intro-5, #intro-b ul.view-6 li.intro-6 { left: auto; right: 55px; } /* 2.3 Navigation -----------------------------------------------------------------------------------------------*/ #navigation { position: relative; z-index: 1; border-top: 1px solid #192940; border-bottom: 1px solid #192940; background: url(../images/bg_navigation_wide.jpg) no-repeat 50% 100%; } #navigation ul { padding: 10px 0 20px 0; } #navigation ul li { width: 150px; padding: 0 5px; float: left; text-align: center; font-weight: bold; } #navigation ul li a { text-decoration: none; color: #fff; } #navigation ul li.current a { color: #ff9900; } #navigation ul li strong { display: block; font-weight: normal; font-size: 1.4em; text-transform: uppercase; } #navigation ul li a:hover strong, #navigation ul li.current strong { color: #ff9900; } #navigation ul li a span { font-size: 1.1em; color: #9ce2f8; } .nav { float: right; display: inline; width: 400px; position: relative; z-index: 25; background: url(../images/bg_navigation_top.png) no-repeat 30px 100%; padding: 43px 10px 12px 0; margin: 0; text-align: right; } .nav li { display: inline; padding-left: 6px; position: relative; z-index: 25;} .nav li.new { position: relative;} .nav li sup { font-size: 8px; text-transform: uppercase; vertical-align: top; color:lime; margin: 0 0 0 -4px; } .nav li a { text-decoration: none; word-spacing: -1px;} .nav li a:hover { color: #ff9900; } /* 2.4 Content -----------------------------------------------------------------------------------------------*/ .return-to-top { clear: both; margin: -20px auto 40px; z-index: 999; } .return-to-top a { padding: 0 0 0 20px; background: url(../images/ico_arrow_orange_up.png) no-repeat; line-height: 1.4em; text-decoration: none; } /* we're hiring */ #we-are-hiring .container { z-index: 999; } #we-are-hiring a.btn-orange { position: absolute; right: 0; top: -25px; z-index: 10; } /* three questions*/ #three-questions { position: relative; z-index: 10; padding: 50px 0 75px; background: #0b1016 url(../images/bg_three_questions.gif) repeat-x; border-bottom: 20px solid #111d2d; } #three-questions ul li { float: left; width: 285px; padding: 0 40px 0 0; } #three-questions ul li h3 { margin: 0 0 10px 0; font-weight: bold; font-size: 1.3em; text-transform: uppercase; color: #89c7dd; } #three-questions ul li dl { position: absolute; bottom: -60px; } #three-questions ul li dt { position: absolute; left: -999em;} #three-questions ul li dd { padding-top: 3px;} #three-questions ul li a:link, #three-questions ul li a:active, #three-questions ul li a:visited { color: #FF9900; } #three-questions ul li a:hover { color: #FFF; } /* what we do */ #what-we-do .section-header h2 { text-align: left; } #what-we-do .section-header p { float: left; width: 340px; padding-left: 35px; } #what-we-do .comic-strip { margin-bottom: 30px; } /* what we do: carousel */ #what-we-do .carousel .prev, #what-we-do .carousel .next { position: absolute; top: 415px; z-index: 1; } #what-we-do .carousel .prev { left: 0; } #what-we-do .carousel .next { right: 0; } #what-we-do .carousel .summary { width: 924px; margin: 0 28px 50px 28px; } #what-we-do .carousel .summary h3 { margin: 0 0 5px 0; } #what-we-do .carousel .summary p { float: left; width: 550px; font-size: 1.1em; line-height: 1.5em; } #what-we-do .carousel .summary p.last { margin-top: 15px; } #what-we-do .carousel .summary .example { float: right; width: 360px; text-align: center; margin-top: -30px; background: url(../images/bg_example.png) no-repeat center top; height: 211px; padding-top: 9px; padding-right: 4px; } #what-we-do .carousel .summary .example strong { font-size: 2.8em; color: #fff; } #what-we-do .carousel .summary .example strong span { color: #ff9900; } #what-we-do h3, #what-we-do dt, #what-we-do .price { color: #ff9900; font-weight: bold; font-size: 1.2em; } #what-we-do dl { display: inline; float: left; width: 234px; margin: 0 12px 0 0; position: relative; } #what-we-do dl.last { margin: 0; } #what-we-do dt { margin-bottom: 10px; padding-left: 12px; } #what-we-do dd { clear: both; } #what-we-do ul { height: 250px; padding: 12px; background: url(../images/bg_section.png) repeat-x; } #what-we-do li { margin: 0 0 12px 0; font-size: .9em;} #what-we-do .price { position: absolute; right: 12px; bottom: 10px; display: block; } /* top20 */ #top20 .section-header h1 { float: left; width: 360px; text-align: right; font-size: 5.2em; padding: 0;} #top20 .section-header p { float: left; width: 500px; padding: 18px 0 0 20px; font-size: 1.1em; } #top20 .section-header p strong { font-size: 1.1em; } /* top20: list */ #top20 ol { width: 980px; } #top20 ol li { width: 450px; min-height: 230px; margin: 0 10px 0 0; padding: 15px 0 50px 8px; border-top: 1px solid #18293f; background: url(../images/bg_section.png) repeat-x; display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: top; } /*#top20 ol li > * { display: table; table-layout: fixed; vertical-align: top; }*/ #top20 ol li.right-side { margin-right: 0; } #top20 ol li h2, #top20 ol li h3, #top20 ol li p { margin-left: 30px; text-align: left; } #top20 ol li h2 { margin-bottom: 15px; font-weight: bold; font-size: 1.5em; } #top20 ol li h3, #top20 ol li blockquote { margin-bottom: 25px; font-weight: bold; font-size: 1.1em; color: #a3d8f2; } #top20 ol li p, #top20 ol li cite { margin: 0 20px 20px 30px; line-height: 1.5em; } #top20 ol li blockquote p { margin-bottom: 0; } #top20 ol li img { margin: 10px 0 0 0; } #top20 ol li .number { float: left; width: 21px; height: 21px; margin: 4px 0 0 0; line-height: 19px; font-weight: bold; font-size: 1.2em; color: #0a0e13; text-align: center; background: url(../images/bg_number.png) no-repeat; } #top20 ol li a { color: #a3d8f2; } /* help */ #help .section-header h2 { float: right; } /* help: overview */ #help .overview ul { margin-bottom: 15px; } /* help: carousel */ #help .carousel .prev, #help .carousel .next { position: absolute; top: 18px; z-index: 100; } #help .carousel .prev { left: 260px; } #help .carousel .next { right: 0; } #help .carousel .slidelinks { float: left; width: 210px; padding: 18px 10px; margin-bottom: 20px; background: url(../images/bg_section.png) repeat-x; } #help .carousel .slidelinks li { margin-bottom: 15px; } #help .carousel .slidelinks .current { font-weight: bold; } #help .carousel .big { display: inline; float: right; margin-right: 20px; padding: 15px 0 0 0; } #help .carousel .slide ul { margin-bottom: 15px; } /* help: support */ #help h2 { margin-bottom: 30px; font-weight: bold; font-size: 1.2em; color: #ff9900; } #help h3 { clear: both; margin-bottom: 20px; font-weight: bold; color: #a3d8f2; } #help dl { margin-bottom: 30px; } #help dt { margin: 15px 0 5px 0; font-weight: bold; font-size: 1em; } #help p { margin-bottom: 30px; } #help img { display: inline; float: left; margin: 0 10px 30px 0;} /* Job page *---------------------------------------------------------------------------------------------------- */ #work-for-xhtmlized .section-header h1 { width: 300px; font-size: 3.2em; } #work-for-xhtmlized h2 { margin-bottom: 30px; font-size: 1.6em; color: #a3d8f2; } #work-for-xhtmlized h2, #work-for-xhtmlized h3 { text-transform: uppercase; font-weight: bold; color: #a3d8f2; } #work-for-xhtmlized h3 { font-size: 1.2em; } #work-for-xhtmlized h3, #work-for-xhtmlized p { margin-bottom: 20px; } #work-for-xhtmlized .bullet-list { margin-bottom: 30px; } #work-for-xhtmlized .bullet-list li { margin-bottom: 0; } /* Buzz page *---------------------------------------------------------------------------------------------------- */ #buzz .section-header p { float: left; width: 280px; margin-top: 25px; } #buzz .return-to-top { display: none; } /* Buzz quotes */ .buzz-quotes { float: left; width: 730px; overflow: hidden; } .buzz-quotes li { margin: -1px 0 0; padding: 15px 10px 20px; position: relative; border-top: 1px solid #1c3751; color: #acdaf2; } .buzz-quotes li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .buzz-quotes .quote { padding: 4px 0 0 20px; background: transparent url(../images/ico_quote_1.png) no-repeat 0 0; } .buzz-quotes .quote p { margin: 0; padding: 0 20px 2px 0; display: inline; background: transparent url(../images/ico_quote_2.png) no-repeat 100% 100%; } .buzz-quotes p.author { margin: 5px 0 0 30px; padding: 0 0 0 20px; background: transparent url(../images/ico_quote_author.png) no-repeat 0 50%; } .buzz-quotes .highlight { padding: 15px 10px 10px 50px; font-size: 1.143em; line-height: 1.3em; background: url(../images/bg_buzz_quote_highlight.png) no-repeat 50% 100%; } .buzz-quotes .highlight .quote { color: #FFF; margin: 0 0 10px; background-image: url(../images/ico_quote_highlight_1.png); } .buzz-quotes .highlight .quote p { background-image: url(../images/ico_quote_highlight_2.png); } .buzz-quotes .highlight .author { font-style: italic; } .buzz-quotes p.qualities { margin: 12px 0 0 -6px; padding: 0 0 0 17px; float: left; background: transparent url(../images/ico_buzz_quality.png) no-repeat 0 50%; color: #5a6b7c; font-size: 0.875em; line-height: 1.3em; } .buzz-quotes .highlight p.qualities { margin: 12px 0 0 -46px; } .buzz-quotes cite { position: absolute; right: 0px; bottom: 0px; } .buzz-quotes cite:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .buzz-quotes cite a.linkedin, .buzz-quotes cite a.twitter { display: block; width: 91px; height: 31px; overflow: hidden; background: transparent url(../images/ico_buzz_cite.png) no-repeat 0 0; text-align: left; text-indent: -1000em; } .buzz-quotes cite a.twitter { background-position: 0 -31px; } .buzz-quotes cite a.linkedin:hover{ background-position: -91px 0;} .buzz-quotes cite a.twitter:hover{ background-position: -91px -31px;} /* the buzz */ .the-buzz { float: right; width: 230px;} .the-buzz .a { position: absolute; right: 25px; bottom: -17px; display: block; width: 18px; height: 17px; background: url(../images/bg_box_arrow.png) no-repeat; } .the-buzz .section-q { margin: 0 0 30px 0;} .the-buzz .section-q .section-inner { padding: 5px; text-align: center; } .the-buzz .section-q li { display: inline; } .the-buzz .section-q li img { vertical-align: middle; margin: 5px; } /* homepage: clients quotes */ #clients-quotes { border-top: 1px solid #122231; padding: 10px 0 40px; font-size: 1.4em; line-height: 1.3em; background: transparent url(../images/bg_section.png) repeat-x 0 0; } #clients-quotes h2 { position: absolute; left: -1000em; text-align: left; } #clients-quotes ul { margin: 0 auto; padding: 0; width: 980px; height: 180px; overflow: hidden; text-align: left; } #clients-quotes ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #clients-quotes li { margin: 0 0 40px; padding: 30px 0 0; height: 150px; width: 980px; position: relative; } #clients-quotes blockquote { margin: 0 0 5px; float: right; position: relative; } #clients-quotes blockquote h3 { padding: 0 25px 0 0; position: absolute; top: 0; right: 100%; background: transparent url(../images/bg_clients_quotes_arrow_l.png) no-repeat 100% 50%; color: #72dbf7; font-weight: normal; font-size: 1.714em; line-height: 1.3em; text-align: center; } #clients-quotes blockquote h3 em { font-style: normal; /* prevent cufon to render on two lines */ margin: 0 -15px; } #clients-quotes blockquote h3 img { margin: 0 auto; display: block; } #clients-quotes blockquote .quote-inner { min-width: 420px; max-width: 696px; float: right; padding: 15px 30px; background: #FFF; color: #0a0e13; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-size: 1.286em; line-height: 1.3em; } #clients-quotes a.read-more { clear: both; float: right; } #clients-quotes .summary { padding: 0 0 60px; height: 120px; } #clients-quotes .summary ul { margin: 0; width: auto; height: auto; } #clients-quotes .summary li { margin: 0 15px 0 0; display: inline; height: auto; width: auto; } #clients-quotes .summary li img { vertical-align: middle; } #clients-quotes .summary h3 { margin: 0; padding: 36px 0 0; height: 24px; position: absolute; right: 0px; bottom: 0px; background: transparent url(../images/bg_clients_quotes_arrow.png) no-repeat 50% 0; font-size: 1.286em; line-height: 24px; font-weight: bold; vertical-align: bottom; text-align: right; } #clients-quotes .summary .section-q { position: absolute; right: 3px; bottom: 60px; } #clients-quotes .summary .section-q ul { padding: 9px 1px 9px 15px; background: #FFF; } #clients-quotes .section-q .section-inner { min-width: 476px; max-width: 724px; } /* order */ #order { padding: 30px 0; border-top: 1px solid #18293f; background: url(../images/bg_section.png) repeat-x; } #order .section-header { margin-bottom: 0; padding: 0; } #order .section-header h2 { float: left; width: 320px; margin-top: -20px; font-size: 6em; color: #fff; } #order .section-header h3 { margin-bottom: 18px; font-size: 1.2em; color: #92d6eb; } #order .section-header h3, #order .section-header p { margin-left: 290px; } #order .section-header p { margin-top: 0; } #order .section { background: none; border: none; padding: 0; } /* order: estimates*/ #estimates { width: 233px; height: 83px; position: absolute; top: -22px; right: 36px; overflow: hidden; } #estimates .inner { margin-top: 40px; padding: 4px 12px; position: relative; background: url(../images/bg_estimate.png) no-repeat; } #estimates .total { width: 208px; min-height: 55px; overflow: hidden; } #estimates .total select { float: left; margin: 10px 0 0 0; font-size: .8em; } #estimates .total strong { float: right; font-size: 2.2em; } #estimates .total strong small { font-size: 0.5em; } #estimates .turnaround { width: 208px; overflow: hidden; } #estimates .turnaround p { margin: 0; line-height: 1.4em; } #estimates .turnaround em { float: left; font-style: normal; font-weight: bold; font-size: .9em; } #estimates .turnaround strong { float: right; font-size: 1.3em;} /** DL: estimates are hidden until the "active" marker is set **/ #estimates { display: none; } #estimates.active { display: block; } /** DL: price is only shown when "expanded" marker is set **/ #estimates strong small { display: none; } #estimates.has_items strong small { display: inline; } /* order: tabs */ #order-tabs { width: 960px; margin: 0 10px; } #order-tabs .order-content { clear: both; background: #fff url(../images/bg_tab_content.png) no-repeat; color: #323232; } #order-tabs .order-content-inner { width: 924px; overflow: hidden; padding: 20px 18px; background: url(../images/bg_tab_content_inner.png) no-repeat 0 100%; } #order-tabs .order-content a { color: #0b1016; } #order-tabs .order-content .box a { color: #2a4669; text-decoration: underline; } #order-tabs .order-content .box a:hover { text-decoration: none; } #order-tabs .order-content h2 { font-size: 1.2em; color: #0d141e; } #order-tabs .order-content .tagline { margin: 0 0 30px 0; font-weight: bold; color: #2a4669; } .message-box .error { display: none; } .error .message-box .error { display: block; } .message-box .error { margin: 0 0 10px 0; padding: 0 0 0 20px; background: url(../images/ico_error.png) no-repeat 0 50%; font-size: .9em; color: #ff040c; } #order-tabs .tabs { width: 700px; overflow: hidden; padding: 25px 0 0 12px; } #order-tabs .tabs li { float: left; font-weight: bold; font-size: .9em; text-transform: uppercase; } #order-tabs .tabs li a { display: inline; float: left; margin: 6px 3px 0 0; padding: 0 0 0 6px; height: 30px; background: url(../images/tab_left.png) no-repeat 0 0; text-decoration: none; } #order-tabs .tabs li a:hover { color: #fff; } #order-tabs .tabs li a strong { float: left; padding: 5px 16px 0 6px; height: 25px; background: url(../images/tab_right.png) no-repeat 100% 0; } /* order: tab on hover */ #order-tabs .tabs li a:hover { height: 36px; margin-top: 0; } #order-tabs .tabs li a:hover strong { height: 28px; padding-top: 8px; } /* order: tab is complete */ #order-tabs .tabs li.complete a, #order-tabs .tabs li.complete a:hover { height: 40px; margin-top: -4px; margin-left: -8px; padding-left: 50px; background-position: 0 -300px; color: #999; } #order-tabs .tabs li.complete a strong, #order-tabs .tabs li.complete a:hover strong { height: 22px; padding-top: 16px; padding-bottom: 4px; text-indent: -22px; background-position: 100% -300px; } /* order: tab is current */ #order-tabs .tabs li.ui-tabs-selected a, #order-tabs .tabs li.ui-tabs-selected a:hover { height: 36px; margin-top: 0; margin-left: 0; padding-left: 6px; } #order-tabs .tabs li.ui-tabs-selected a strong, #order-tabs .tabs li.ui-tabs-selected a:hover strong { height: 25px; padding-top: 11px; } #order-tabs .tabs li.ui-tabs-selected a, #order-tabs .tabs li.ui-tabs-selected a:hover { background-position: 0 -150px; color: #0c1117; } #order-tabs .tabs li.ui-tabs-selected a strong, #order-tabs .tabs li.ui-tabs-selected a:hover strong { background-position: 100% -150px; text-indent: 0; } /* order: tab is disabled */ #order-tabs li.disabled { display: none; } /* order: navigate to next tab */ .next-tab { float: right; position: relative; padding: 0 22px 0 0; line-height: 1.5em; background: url(../images/ico_arrow_blue.png) no-repeat 100% 50%; text-decoration: none; } .next-tab:hover { background-image: url(../images/ico_arrow_orange.png); } /* optionbox */ .optionbox-holder { margin-bottom: 30px; padding: 20px 0; } .optionbox-holder a { text-decoration: underline; } .optionbox-holder a:hover { text-decoration: none; } .optionbox { float: left; padding: 0 10px; z-index: 1; zoom: 1; margin: 0 -1px; } .option { position: relative; cursor: pointer; } .section-up { border: solid 1px #b3b3b3; position: relative; padding: 10px 11px 20px 11px; margin: -15px -5px; border-color: #d8d500; border-width: 3px; background: #fdffc5; z-index: 10; } .section-up .title h3 { font-size: 2.2em; } .section-up .title h3 .new { font-size: .5em; } .section-up p { margin: 0 0 15px 0; text-align: center; } /* order: optionbox */ .javascript-flash p { margin-left: 10px; } #what-you-need .optionbox { width: 210px; min-height: 490px; } #what-you-need .optionbox-holder .first { width: 206px; border-left: 3px solid #4fac53; } #what-you-need .optionbox .title { height: 70px; margin: 0 0 10px 0; padding: 30px 0 0 0; text-align: center; } #what-you-need .optionbox .title h3 { margin: 0 0 10px; font-size: 1.1em; color: #0b1016; } #what-you-need .optionbox .title h3 .new { text-transform: uppercase; font-size: .6em; font-weight: normal; color: #00b551; } #what-you-need .optionbox .title h4 { font-weight: normal; font-size: 1em; color: #666666; } #what-you-need .optionbox p { margin: 0 5px 30px 5px; font-size: .85em; } #what-you-need .optionbox p .more { margin-top: 20px; display: block; } #what-you-need .option-holder { height: 85px; margin-bottom: 10px; padding-left: 10px; background: url(../images/bg_option_holder_left.png) no-repeat;} #what-you-need .option { height: 75px; padding: 10px 10px 0 0; background: url(../images/bg_option_holder_right.png) no-repeat 100% 0; } #what-you-need .option h3 { margin-bottom: 2px; padding-top: 0px; } #what-you-need .option h3.larger { font-size: 1em; } #what-you-need .option h3, #what-you-need .option strong { width: 110px; margin-left: 74px; text-align: center;} #what-you-need .option strong { display: block; color: #ff9900; font-size: .85em} #what-you-need .option img { float: left; } #what-you-need .option em { display: block; font-style: normal; } #what-you-need .optionbox .selected { background-position: 0 -85px; } #what-you-need .optionbox .selected .option { background-position: 100% -85px;} #what-you-need .optionbox .option-holder sup{ width: 110px; margin-left: 74px; text-align: center; display: block;font-size: .85em} /* Option holder b */ #what-you-need .option-holder-b { height: auto; background-image: url(../images/bg_option_handler_b_left.png); } #what-you-need .option-holder-b .option { text-align: left; height: 153px; background-image: url(../images/bg_option_handler_b.png); } #what-you-need .option-holder-b h3, #what-you-need .option-holder-b strong, #what-you-need .option-holder-b p { text-align: left; margin: 0; width: auto;} #what-you-need .option-holder-b h3 { padding: 0px; } #what-you-need .option-holder-b strong { margin: 0 0 5px; } #what-you-need .option-holder-b img { margin: 0 5px 0 0; text-align: left;} #what-you-need .option-holder-b.selected .option { background-position: 100% -163px; } #what-you-need .option-holder-b.selected { background-position: 0 -163px; } #what-you-need .optionbox h3.xhtml-css{ font-size: 2.142em; font-weight: bold; } #what-you-need .optionbox .option-holder h3.solution{ font-size: 0.95em; } #what-you-need .optionbox .option-holder #html-email h3{ margin-top: 10px; } #what-you-need .optionbox .notice{ margin: 0px 0 0 8px; padding-top: 10px; color: #666; display: block; font-size: 0.8em;} #what-you-need .optionbox.cms-blogtheme-skin .notice{ clear: both;} .option-holder .option { position: relative;} .option-holder .option .tooltip { width: 210px; padding: 15px 20px 0 35px; height: 130px; overflow: auto; text-align: left; position: absolute; top: -20px; left: -999em; z-index: 1000; background: url(../images/bg_tooltip.png) no-repeat left top; } #what-you-need .option-holder .option .tooltip p{ text-align: left; margin: 0 0 10px; padding: 0;} .option-holder .option:hover .tooltip, .option-holder .option.hover .tooltip { left: 190px; } /* order: optionbox for cms, blogs, skin */ #what-you-need .cms-blogtheme-skin p { margin-bottom: 5px; } #what-you-need .cms-blogtheme-skin .option-holder { width: 90px; margin: 20px 0 0 0; float: left; text-align: center; } #what-you-need .cms-blogtheme-skin .right-side { float: right; } #what-you-need .cms-blogtheme-skin .last { margin-top: 10px; } #what-you-need .cms-blogtheme-skin .option img { margin-top: -25px; float: none; } #what-you-need .cms-blogtheme-skin .option h3, .cms-blogtheme-skin .option strong { width: 80px; margin-left: 0; line-height: 1em; } #what-you-need .cms-blogtheme-skin .option h3 { padding-top: 5px; font-size: .85em; } #what-you-need .cms-blogtheme-skin .option strong { width: auto; margin: 0; font-size: .9em;} #what-you-need .cms-blogtheme-skin .option .larger { margin-top: 20px; font-size: 1em; } #what-you-need .cms-blogtheme-skin #ee-theme h3.solution { margin-top: -9px; } .cms-blogtheme-skin .option-holder .option .tooltip { width: 183px; padding: 15px 30px 0 20px; height: 103px; overflow: auto; text-align: left; position: absolute; top: -20px; left: -999em; z-index: 1000; background: url(../images/bg_tooltip_cms.png) no-repeat right top; } #what-you-need .cms-blogtheme-skin .option-holder .option .tooltip p{ text-align: left; margin: 0 0 10px; padding: 0;} .cms-blogtheme-skin .option-holder .option:hover .tooltip, .cms-blogtheme-skin .option-holder .option.hover .tooltip { left: -230px; } /* order: project brief: order packages optionbox */ #order-packages .section-c { margin: -10px 0 0 0; padding-bottom: 20px; } #order-packages .optionbox { width: 200px; text-align: center; } #order-packages .optionbox-holder .first { width: 201px; border: 1px solid #b3b3b3; } #order-packages .title { height: 100px; margin: 0 0 20px 0; } #order-packages .title h3 { padding: 0; } #order-packages .option { min-height: 410px; padding-bottom: 40px; background-position: 50% 100%; background-repeat: no-repeat; } * html #order-packages .option { height: 410px; } /* move to ie6.css */ #order-packages .option { background-image: url(../images/btn_package_select.png); } #order-packages .selected .option { background-image: url(../images/btn_package_selected.png); } #order-packages dl { cursor: auto; } #order-packages dt { font-weight: bold; } #order-packages dt a { text-decoration: none; padding-right: 16px; background: url(../images/ico_more.png) no-repeat 100% 50%; } #order-packages dd { height: 90px; font-size: .85em; color: #666666; } #order-packages dd.browser-support { position: relative; height: 50px; padding-bottom: 60px; } #order-packages dd.browser-support img { position: absolute; bottom: 24px; left: 0; } #order-packages dd { width: 200px; position: relative; } #order-packages dd p { margin-left: 12px; } #order-packages dd .info { position: absolute; left: 0; top: 0; width: 12px; height: 0; padding: 12px 0 0 0; overflow: hidden; background: url(../images/ico_more.png) no-repeat; } /* order: what do you need tab */ .price-USD, .service-include { color: #666666; } .price-USD { float: left; position: relative; display: none; } /* temporarily disabled */ .service-include { margin-bottom: 30px; text-align: center; } .project-details label strong { display: block; margin: 0 0 5px 0; } .project-details .name { float: left; width: 370px; margin-bottom: 40px; } .project-details .name input.text { width: 300px; } .project-details .name p, .project-details .name .field { margin-bottom: 15px; } .project-details .name .note { font-size: .8em; } .project-details .description { float: right; width: 500px; margin-bottom: 40px; position: relative; } .project-details .description textarea { width: 480px; height: 300px; margin: 0 0 5px 0; } .project-details .description .note { font-size: .8em; } .project-details .description .note a { text-decoration: underline; } .project-details .description .note a:hover { text-decoration: none; } /* project brief: tabs */ ul.brief-tabs { padding: 5px 0 0 18px; } ul.brief-tabs li { margin: 0 2px 0 0; } ul.brief-tabs a { padding: 10px 18px 5px 20px; display: block; background: #cbcbcb; } ul.brief-tabs li.ui-state-active a { background: #e6e6e6; } #order-tabs .order-content .box .brief-tabs a { color: #585858; } #order-tabs .order-content .box .brief-tabs li.ui-state-active a { color: #0b1016; } /* project brief: layout-options */ .brief-options .layout-options .box-c, .brief-options .markup-requirements .box-c { margin: 20px 0 0; width: auto; float: none; } .brief-options .layout-options ul, .brief-options .markup-requirements ul { font-size: 0.786em; line-height: 1.25em; color: #666; } .brief-options .layout-options ul li, .brief-options .markup-requirements ul li { margin: 0 8px 8px 0; border: 1px solid #e6e6e6; padding: 10px; width: 256px; float: left; display: inline-block; background: #f5f5f5; vertical-align: top; } .brief-options .layout-options ul li ul, .brief-options .markup-requirements ul li ul { font-size: 1em; color: #333; } .brief-options .layout-options ul li li, .brief-options .markup-requirements ul li li { margin: 0; border: 0; padding: 0; width: 33%; float: none; display: inline; background: none; } .brief-options .layout-options ul h3, .brief-options .markup-requirements ul h3 { font-size: 1.273em; line-height: 1.25em; color: #666; } .brief-options .layout-options .specify-other label, .brief-options .markup-requirements .specify-other label { display: block; font-weight: bold; } /* order: your details tab */ #your-details label { font-weight: bold; color: #0b1016; } #your-details label.error { width: auto; font-size: .8em; font-weight: normal; color: #ff040c; } #your-details input.text { width: 225px; } #your-details input.text, #your-details select { font-size: .8em; } #your-details input.error, #your-details input.valid, #your-details input.error { background-repeat: no-repeat; background-position: 100% 50%; } #your-details input.valid { background-image: url(../images/ico_valid.png); } #your-details input.error { background-image: url(../images/ico_error.png); } #your-details .section-a a { text-decoration: underline; } #your-details .section-a a:hover { text-decoration: none; } .no-account, .have-account { margin-bottom: 20px; text-align: right; color: #0b1016; } .no-account a, .have-account a { padding-right: 12px; line-height: 1.5em; font-weight: bold; background: url(../images/ico_arrow_black.png) no-repeat 100% 50%; } /*a.openid-login, a.openid-login span { display: block; width: 65px; height: 20px; } a.openid-login { position: relative; overflow: hidden; text-indent: -999em; top: -4px; } a.openid-login span { position: absolute; left: 0; top: 0; z-index: 10; background: url(../images/logo_openid.png) no-repeat; }*/ #your-details a.submit { display: block; width: 301px; height: 29px; margin: 0 0 10px 0; padding: 15px 0; line-height: 29px; background: url(../images/btn_login_register.png) no-repeat; font-weight: bold; font-size: 1.2em; text-decoration: none; text-align: center; color: #fff; } #your-details a.submit:hover { color: #0b1016; } #login-form { padding-bottom: 230px; } #login-form li { width: 500px; overflow: hidden; } #login-form li, #login-form p { margin-bottom: 12px; } #login-form label { float: left; width: 80px; padding: 2px 0 0 0; } #login-form .checkbox { vertical-align: middle; } #login-form .login-options { width: 235px; margin-left: 80px; font-size: .8em; } #login-form .login-options input { vertical-align: middle; } #login-form .login-options label { margin: 0; padding: 0; display: inline; float: none; width: auto; font-weight: normal; vertical-align: middle; } #login-form h3, #register-form h3 { margin-bottom: 30px; font-size: 1.2em; } #register-form label { display: block; margin-bottom: 5px; } #register-form .note, #register-form .error { display: block; margin-top: 5px; font-size: .8em; color: #666666; } #register-form li, #register-password div { margin-bottom: 25px; } #register-form li input.text { width: 300px; } #register-form li select { width: 300px; } #register-form .account-details, #register-form .personal-details { float: left; width: 420px; } #register-form .account-details li .openid input, #register-form .account-details li a { display: inline; float: left; margin-right: 10px; } #register-form .account-details li a { margin-top: 5px; } #register-form .account-details a.submit { clear: both; font-size: 1em; } /*#register-form .account-details #register-openid .show-register { margin: 5px 0; display: block; float : none; }*/ /**/ #register-openid, .show-openid-login, .show-openid-register, .openid-login { display: none !important; margin: 0; } /* DL: australian tax notice is hidden by default, and becomes visible when it's container is in the "is-australian" state */ #register-form .aus-tax-notice { display: none; } #register-form .is-australian .aus-tax-notice { display: block; } /** loading indicator **/ #login-register .loading-msg { padding: 10px 30px 1px; background: url(../images/loading-lightbg.gif) 0% 50% no-repeat; } /* confirm */ a.checkbox { display: block; width: 47px; height: 37px; overflow: hidden; background: transparent url('../images/ico_checkbox.png') no-repeat 0 0; text-align: left; text-indent: -1000em; } a.checkbox.status-checked { background-position: -47px 0; } /* order confirmation */ #confirm { padding-bottom: 70px; color: #0b1016; } #confirm h3 { margin: 0; font-size: 1.143em; line-height: 1.25em; } #confirm .section-a, #confirm .section-b, #confirm .section-c, #confirm .section-d { margin: 0 0 10px; padding: 15px; } #confirm .section-a a, #confirm .section-b a, #confirm .section-c a, #confirm .section-d a { color: #234c86; text-decoration: underline; } #confirm .section-a a:hover, #confirm .section-b a:hover, #confirm .section-c a:hover, #confirm .section-d a:hover { text-decoration: none; } /* confirm: option */ .confirm-option { background-repeat: no-repeat; background-position: 10px 50%; } .confirm-option label { font-size: 1.143em; line-height: 1.25em; font-weight: bold; } .confirm-option label em { color: #00ab04; font-size: 0.714em; line-height: 1.25em; font-style: normal; vertical-align: top; } .confirm-option p { font-size: 1em; line-height: 1.25em; color: #666666; } .confirm-option dt { position: absolute; left: -1000em; text-align: left; } .confirm-option dd { position: absolute; top: 18px; color: #666666; font-size: 1.286em; line-height: 1.25em; } .confirm-option dd.val-1 { right: 320px; } .confirm-option dd.val-2 { right: 78px; color: #BBBBBB; } .confirm-option input { position: absolute; right: 10px; top: 16px; } .confirm-option .checkbox { position: absolute; right: 10px; top: 10px; } .confirm-option.section-d dd.val-2 { font-size: 1.571em; line-height: 1.25em; color: #0b1016; } #confirm .confirm-option { padding: 16px 430px 16px 80px; } /* confirm: selected */ #confirm-selected h3 { position: absolute; left: -1000em; text-align: left; } #confirm-selected h4 { font-size: 1.143em; line-height: 1.25em; color: #0b1016; } #confirm-selected ol { margin: 0 0 20px; } #confirm-selected li { margin: 0 0 10px; border-bottom: 1px solid #dedede; padding: 0 0 10px 22px; position: relative; } #confirm-selected li em.crt { display: block; position: absolute; left: -2px; top: 2px; width: 18px; height: 18px; background: transparent url(../images/ico_bullet.png) no-repeat 0 0; color: #FFF; line-height: 18px; font-style: normal; color: #FF; font-weight: bold; text-align: center; } #confirm-selected li dt { position: absolute; left: -1000em; text-align: left; } #confirm-selected li dd.val { right: 0px; top: 5px; font-size: 1.429em; line-height: 1.25em; font-weight: bold; position: absolute; } #confirm-selected .total { color: #0b1016; font-size: 1.143em; line-height: 1.5em; text-transform: uppercase; } #confirm-selected .total em { float: right; font-style: normal; font-weight: bold; font-size: 1.5em; line-height: 1em; } /* confirm: management */ #confirm-management ul { margin: 12px 0 0 48px; } #confirm-management li { margin: 0 48px 0 0; float: left; width: 220px; text-align: center; } #confirm-management li .section-a, #confirm-management li .section-b { padding: 12px 0; height: 80px; } #confirm-management li .section-g { padding: 12px 0; height: 76px; } #confirm-management label { height: 3.5em; margin: 0; display: block; font-weight: bold; } #confirm-management .val { display: inline; color: #666666; vertical-align: middle; font-size: 1.286em; line-height: 33px; } #confirm-management .val span { position: absolute; left: -1000em; text-align: left; } #confirm-management .checkbox { margin: 0; display: inline-block; vertical-align: middle; } #confirm-option-paypal { background-image: url(../images/co_paypal.png); } #confirm-option-speed { background-image: url(../images/co_speed.png); } #confirm-option-privacy { background-image: url(../images/co_privacy.png); } #confirm-option-usa { background-image: url(../images/co_usa.png); } /* confirm: support */ #confirm-support p { color: #666666; } #confirm-support ul { margin: 24px 0 10px; } #confirm-support li { float: left; width: 25%; text-align: center; } #confirm-support li p { margin: 0; color: #999; font-size: 1.143em; line-height: 37px; display: inline; } #confirm-support label { display: block; margin: 0 auto 12px; color: #666666; } #confirm-support .checkbox { margin: 0; display: inline-block; vertical-align: middle; } /* confirm: summary */ #confirm-summary { width: 440px; float: right; color: #0b1016; } #confirm-summary h3 { position: absolute; left: -1000em; text-align: left; } #confirm-summary dl { margin: 0 0 1px; border-top: 1px solid #b3b3b3; border-bottom: 1px solid #0b1016; } #confirm-summary dt { padding: 10px 0 10px 20px; float: left; width: 190px; font-size: 1.143em; line-height: 1.5em; } #confirm-summary dd { float: right; padding: 10px 10px 10px 0; width: 200px; font-size: 1.714em; line-height: 1em; text-align: right; } #confirm-summary p { border-top: 1px solid #0b1016; padding: 20px 10px 0 20px; font-size: 1.143em; line-height: 1.25em; text-transform: uppercase; } #confirm-summary p em { float: right; font-size: 1.5em; line-height: 1em; font-style: normal; } #confirm-continue { float: right; width: 218px; } #confirm-continue a.section-i { margin: 0 0 15px; padding: 15px 80px 15px 20px; display: block; color: #0b1016; } #confirm-continue a.section-i strong { font-size: 1.286em; line-height: 1em; font-weight: bold; } #confirm-continue a.section-i em { margin: 0 -60px 10px 0; display: block; color: #FFF; font-style: normal; font-size: 1.333em; line-height: 1.25em; font-weight: bold; text-align: center; } #confirm-continue a.section-i span.paypal { display: block; width: 55px; height: 20px; overflow: hidden; background: transparent url(../images/logo_paypal.png) no-repeat 0 0; text-align: left; text-indent: -1000em; position: absolute; right: 20px; } #confirm-continue a.payment-end { display: block; color: #fe9900; font-weight: bold; text-align: center; } /** DL: when in loading state, change the button **/ .loading #confirm-continue a.section-i em { display: none; } .loading #confirm-continue a { background: #55D4E3 url(../images/loading-lightblue.gif) 50% 50% no-repeat; padding: 32px 0; } /* 2.5 Footer -----------------------------------------------------------------------------------------------*/ /* contact us */ #contact-us { overflow: hidden; } #contact-us a { text-decoration: none; } #contact-us .section { padding: 0; } #contact-us h2 { font-size: 4.9em; float: left; padding: 0 30px 0 0; color: #89c7dd; text-transform: uppercase; float: left; } #contact-us .section-header strong.phone{ margin-top: 25px; padding-left: 35px; font-size: 2.2em; float: right; color: #ff9900; background: url(../images/ico_phone_footer.png) no-repeat 0 4px;} /* company information */ #company-information { padding: 30px 0 50px 0; background: url(../images/bg_company_information.png) no-repeat top right; line-height: 1.2em; } #company-information ul { float: left; width: 650px; margin: 0 0 0 0; } #company-information li { float: left; } #company-information ul#offices li { float: left; width: 140px; padding: 0 10px 0 0; } #company-information li a { color: #fff; float: left; } #company-information li a:hover .value { color: #f90; } #company-information ul#offices li.office-aus { width: 180px; } #company-information li strong { display: block; } #company-information li .tel { display: none; font-weight: normal; } /* temporarily disabled */ /* company information: copyright */ #company-information div.copy { float: right; width: 260px; padding: 0 5px 50px 10px; } #company-information div.copy address em { font-style: normal; } #company-information div.copy address strong { font-weight: normal; } #company-information div.copy address a { color: #fff; } #company-information div.copy address a:hover { color: #ff9900; } #company-information div.copy form{ margin: 25px 0 0;} #company-information div.copy form label { display: block; width: 260px; overflow: hidden; margin-bottom: 3px;} #company-information div.copy form .text { float: left; width: 162px; height: 23px; border: 0; padding: 4px 0 0 4px; margin: 0 5px 0 0; display: inline; color:#fff; background: url(../images/bg_subscribe.png) no-repeat top right;} #company-information div.copy form .button { width: 79px; height: 27px; border: 0; padding: 0; margin: 0; text-indent: -999em; cursor: pointer; background: url(../images/btn_subscribe.png) no-repeat top right;} /* company information: legal links */ #company-information .legal { clear: both; float: none; margin: 0; } #company-information .legal li { display: inline; float: left; width: auto; margin: 0 10px 0 0; padding: 0 10px 0 0; border-right: 1px solid #ffd; } #company-information .legal li.last { border: none; } #company-information .legal li a { color: #ff9900; } #company-information .legal li a:hover { color: #fff; } #company-information strong.phone{ margin: 25px 0; padding-left: 35px; font-size: 2.2em; line-height: 1; float: left; color: #ff9900; background: url(../images/ico_phone_footer.png) no-repeat 0 4px;} #company-information li.skype{ margin: -15px 0 0; font-size: 2em; line-height: 30px; float: left; clear: left; display: inline; position: relative;} .home #company-information li.skype { margin: 25px 0 0; float: left; clear: none; } #company-information ul.contacts { clear: left; margin-bottom: 20px;} #company-information ul.contacts li { float: left;} #company-information ul.contacts li .facebook{ margin: 25px 0 0 10px; display: inline; } #company-information ul.contacts li .facebook, #company-information ul.contacts li .facebook span{ float: left; width: 29px; height: 29px; overflow: hidden; cursor: pointer; position: relative;font-size: 0.8em; } #company-information ul.contacts li .facebook span{ background: transparent url(../images/ico_facebook.png) no-repeat 0 0; position: absolute; top: 0; left: 0; text-align: center;} #company-information ul.contacts li .twitter{ margin: 25px 0 0 10px; display: inline; } #company-information ul.contacts li .twitter, #company-information ul.contacts li .twitter span{ float: left; width: 29px; height: 29px; overflow: hidden; cursor: pointer; position: relative;font-size: 0.8em; } #company-information ul.contacts li .twitter span{ background: transparent url(../images/ico_twitter.png) no-repeat 0 0; position: absolute; top: 0; left: 0; text-align: center;} .feedburner, .feedburner span{ float: left; width: 49px; height: 16px; overflow: hidden; cursor: pointer; position: relative;font-size: 0.8em; } .feedburner span{ background: transparent url(../images/ico_rss.png) no-repeat 0 0; position: absolute; top: 0; left: 0; text-align: center;} .feedburner:hover span{ background-position: 0 -16px;} /* Josh & Paul's JS related stuff -----------------------------------------------------------------------------------------------*/ /* your details tab */ #login, #username-login, #openid-login, #register, #register-password, #register-openid, #loggedin { display: none; } .loggedin-state #loggedin, .login-state #login, .login-state #username-login, .openid-login-state #login, .openid-login-state #openid-login, .register-state #register, .register-state #register-password, .openid-register-state #register, .openid-register-state #register-openid { display: block; } /* loading message */ #login-register .loading-msg { display: none; } #login-register.loading .loading-msg { display: block; } /** DL: submit controls disappear when the form is loading **/ #login-register.loading p.submit { display: none; } /* extenal site welcome */ .external-site { width: 600px; } /** DL: only show the external site welcome if we've come from another site **/ .external-site { display: none; } body.from_external .external-site { display: block; } .qwertyized #what-you-need .optionbox-holder .first { border-color: #d8d500;} .qwertyized .section-h .tl { background-position: -16px -16px; } .qwertyized .section-h .bl { background-position: -16px -24px;} .qwertyized .section-h .tr { background-position: -24px -16px; } .qwertyized .section-h .br { background-position: -24px -24px; } /* error page */ #page-error .section-header p a { color: #FF9900; } #page-error .section .container { text-align: center; }