F/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Title : Author : Matt Mumford / matt.mumford@gforces.co.uk / G-Forces Web Management Ltd Author : Chris Munn / chris.munn@gforces.co.uk / G-Forces Web Management Ltd Type: Screen, Projection Description : Screen and projection stylesheet for GForces Web Management Website - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* COMMON AND GLOBAL */ html { } body { height:100%; font:62.5%/1.6 "Trebuchet MS", arial, verdana, helvetica, sans-serif; margin:0; padding:0; background:#ffffff; color:#000; text-align:center; } /* This font sizing is for standards based browsers (firefox, opera, mozilla) that can re-size text. Declaring the font size in pixels makes it more consistent across browsers. */ td, textarea, input, select { font:100% arial, verdana, helvetica, sans-serif; } html>body td, html>body textarea, html>body input, html>body select { font-size:11px; } /* some browsers don't inherit the font into tables or textareas! */ /* ----- IDS ----- */ #container { width:960px; margin:0 auto; text-align:left; font-size:110%; line-height: normal; position: relative; z-index: 1; background: #fff; } #printHeader { display:none;} #header { height: 96px; position: relative; color: #484848; font-size: 12px; z-index: 9; } #header #logo { position: absolute; top: 0px; left: 0px; } #header #contactDetails { position: absolute; top: 10px; right: 15px; font-weight: bold; } #header #headerLiveChat { position: absolute; top: 10px; right: 115px; } #header #facebookLikeGforces { position: absolute; top: 10px; right: 275px; width: 72px; overflow: hidden; } #header #googlePlusOne { position: absolute; top: 10px; right: 350px; width:98px; height:24px; } /* ----- mainContent COLUMN ----- */ .mainContent { padding: 35px; width: 890px; } .mainContent.home { padding:0px; width:960px; } .mainContent.green { background: #d9e0d8; } .mainContent.liveChatBg { background:url(../images/layup/liveChatBg.jpg) left top no-repeat; padding-top:15px !important; } .mainContent.liveChatBgAlt { background:url(../images/layup/liveChatBgAlt.jpg) left top no-repeat; } .mainContent.iViewIt { padding:0px !important; width:960px !important; } .mainContent.iViewIt div.padding { padding:35px 35px 35px 40px; background:url(../images/layup/iViewItBg.jpg) left top no-repeat; color:#2c1f19; } .mainContent.socialMedia { background:url(../images/layup/socialMediaBg.jpg) left top no-repeat; } .mainContent.webManagement { background:url(../images/layup/webManagementBg.jpg) left top no-repeat; } #leftCol { width:350px; float:left; } #rightCol { width:590px; float:left; margin-left:20px; } /* home styles */ .home #leftCol { padding: 0px 12px 0px 11px; width: 333px; float:left; } .home h2 { border-bottom:none; margin-bottom: 8px; } .home .flashBox { margin-bottom: 10px; } .home #middleCol { width: 346px; float: left; padding: 0px 0px 0px 11px; } .home #middleCol #blogHolder { background: #ececec; } .home #middleCol #blogHolder .title { color: #1a2251; font-size: 13px; padding: 10px; background: #dddddd; } .home #middleCol #blogHolder .content .padding { padding: 14px 10px; } .home #middleCol #blogHolder .links { padding: 10px; border-top: 1px solid #fff; width: 326px; height:180px; } .home #middleCol #blogHolder .links a { margin-bottom: 10px; } .home #rightCol { width: 226px; float: right; padding-right: 1px; margin: 0px; } .home #rightCol #twitterListing {} .home #rightCol #twitterListing .box { background: url(../images/layup/twitterBoxBg.gif) no-repeat; width: 189px; padding: 11px 12px 11px 24px; margin-bottom: 8px; word-wrap:break-word; } .home #rightCol .twitterIcon { display: block; float: right; padding-bottom: 19px; } .home #blogLinks { clear: both; } .home #gforcesTrinity { margin: 25px 0px; } .home #gforcesTrinity #trinityContent { width: 580px; float: right; padding-right: 50px; } .home #gforcesTrinity #arrowCircle { float: left; } .leftSide { width:351px; height:288px; float:left; margin-right:20px; margin-bottom:34px; float:left; } .leftSide.news { height:auto; margin-bottom:0px;} .rightSide { width:219px; height:288px; float:left; margin-bottom:34px;} .rightSide.community { height:243px; margin-bottom:0px;} .logoContain { width:590px; height:65px; margin-bottom:48px; overflow:hidden; position:relative; } .logoContain .arrows { z-index:999; position:relative; cursor:pointer; } .logoContain #logoScroll { width:1000px; height:65px; position:absolute; } .logoScroll img { float:left; } /* ----- CONTACT PAGE ---- */ .twoColSpacer { width:890px; background:url(../images/layup/twoColSpacerBg.gif) left top repeat-y; } .contactForm { width: 406px; } .contactForm label { width:110px; text-align:right; float:left; margin-right:5px; position:relative; top:3px; display:inline; } .contactForm input { width:280px; height:20px; padding:2px 3px; background:#dddddd; border:1px solid #c5c5c5; color:#1a2251; } .contactForm select { width:288px !important; height:24px; padding:2px 3px; border:1px solid #c5c5c5; background:#dddddd; color:#1a2251;} .contactForm textarea { width:280px; height:170px; padding:2px 3px; background:#dddddd; border:1px solid #c5c5c5; color:#1a2251;} .contactForm .checkRadio { width:15px; background:none; border:none; margin-right:10px; } .contactForm div { margin-bottom:10px; width:406px;} #map { border:1px solid #d5d2cd; position:relative; width:395px; height:259px; margin-bottom:15px; } #map .TL { position:absolute; top:-1px; left:-1px; } #map .TR { position:absolute; top:-1px; left:395px; } #map .BL { position:absolute; top:259px; left:-1px; } #map .BR { position:absolute; top:259px; left:395px; } /* ----- CAREERS ----- */ #careerJumps { height:310px; margin-bottom:35px; } #careerJumps a{ display:block; height:330px; float:left; position:relative; } #careerJumps a .text { display:none; position:absolute; top:174px; left:10px; width:192px; text-decoration:none; font-weight:normal; line-height:18px; } #careerJumps a:hover { text-decoration:none; } #careerJumps a#jobs { background:url(../images/layup/spriteCareerJumps.jpg) 0 0 no-repeat; width:179px; } #careerJumps a#intern { background:url(../images/layup/spriteCareerJumps.jpg) -179px 0 no-repeat;width:179px; } #careerJumps a#placement { background:url(../images/layup/spriteCareerJumps.jpg) -358px 0 no-repeat;width:179px; } #careerJumps a#academy { background:url(../images/layup/spriteCareerJumps.jpg) -537px 0 no-repeat; margin-right:0px;width:179px; } #careerJumps a#institutions { background:url(../images/layup/spriteCareerJumps.jpg) -716px 0 no-repeat; margin-right:0px;width:174px; } /*#careerJumps a#jobs:hover { background:url(../images/layup/spriteCareerJumps.jpg) 0 -310px no-repeat; } #careerJumps a#intern:hover { background:url(../images/layup/spriteCareerJumps.jpg) -225px -310px no-repeat; } #careerJumps a#placement:hover { background:url(../images/layup/spriteCareerJumps.jpg) -449px -310px no-repeat; } #careerJumps a#academy:hover { background:url(../images/layup/spriteCareerJumps.jpg) -674px -310px no-repeat; }*/ #jobList { width:100%; margin-bottom:35px; } #jobList th { padding-bottom:10px; padding-left:10px; border-bottom:1px solid #d6d6d6; } #jobList td.noBorder { background:none; } #jobList td { padding:13px 10px; background:url(../images/layup/trBg.gif) top left repeat-x; font-weight:bold; color:#1a2251; } #jobList tr.hover td { background:url(../images/layup/trBgHover.gif) top left repeat-x; } #jobList tr.hover td.noBorder { background:#eaeaea; } .jobInfo { width:480px !important; margin-top:25px; margin-bottom:30px; background:url(../images/layup/trBg.gif) bottom left repeat-x; padding-bottom:30px;} .jobInfo td { padding-bottom:15px; font-weight:bold; } .jobUl { padding:0px; margin:0 0 15px 15px; } .jobUl li { margin-bottom:5px;} #applicationForm { width:400px; float:right; } /* ----- COMMUNITY -----*/ .recentSponsorship { width:450px; float:left;} .sponsorshipBox { float:left; width:215px; margin-right:10px; } .sponsorshipBox a{ font-weight:normal; text-decoration:none; } .sponsorshipBox a strong { color:#1a2251; } .sponsorshipBox a:hover strong { text-decoration:underline; } .sponsorshipBox .image { display:block; width:213px; height:159px; border:1px solid #c5c5c5; margin-bottom:10px; } /* ----- PRESS ----- */ #newsSignUp { width:407px; float:right; margin-bottom:25px; } .date { padding:11px 8px 8px 8px; background:#1a2251; float:left; font-weight:bold; margin-bottom:25px;} .date .number { float:left; font-size:40px; color:#fff; padding:0px 5px 0px 0px; } .date .monthYear { float:left; padding:0 0 0 5px; margin-top:3px; font-size:11px; color:#fff; line-height:17px; border-left:1px solid #fff; } .date .monthYear span { font-size:24px; } .pressListText { float:left; width:738px; margin-left:19px; margin-bottom:15px;} /* ----- CMS IMAGE ----- */ .cmsImage { position:relative; } .cmsImage .liveChat { position:absolute; left:665px; top:247px; } .internalImage { float: right; margin: 0px 0px 15px 15px; } .internalImage img {} /* ----- GALLERY ----- */ #gallery {} #gallery .box { float:left; width:262px; margin:0 52px 30px 0; } #gallery .box.last { margin:0 0 30px; } #gallery .box a { display:block; text-decoration:none; font-weight:normal; } #gallery .box .title { font-size:16px; display:block; line-height:1; color:#000; padding:0 0 10px; font-weight:bold; } #gallery .box .description { font-size:11px; display:block; color:#000; line-height:1; padding:0 0 20px; } #gallery .box .thumb { display:block; position:relative; padding:20px 12px 16px 13px; } #gallery .box .thumb img { width:auto; height:auto; } #gallery .box .thumb .frame { position:absolute; left:0; top:0; display:block; } #gallery .box .btn { display:block; padding:14px 0 0 132px; } /* ----- LIST ----- */ #list { margin-bottom:35px;} #list .listItem { margin-top:15px; } #list .listItem a .title { text-decoration:none; font-weight:bold; } #list .listItem .thumb { display:block; float:left; margin-right:20px; width:213px; height:159px; border:1px solid #c5c5c5;} #list .listItem .thumb img {width:213px; height:159px;} #list .listItem .title { width:650px; padding-top:10px; color:#292929; font-weight:bold; display:block;} #list .listItem .description { float:left; padding-top:15px; height:120px; background:url(../images/layup/trBg.gif) bottom left repeat-x; display:block; width:650px;} /* ----- BOX LIST ----- */ #boxList {} #boxList .box { width:234px; float:left; margin-right:8px;} #boxList .box.last { margin-right:0px !important; } #boxList .box span { display:block; } #boxList .box a { font-weight:normal; text-decoration:none;} #boxList .box .image { width:232px; height:222px; padding:1px; background:#dcdcdc;} #boxList .box .title { font-size:11px; line-height:18px; padding:10px 0 20px 11px; color:#292929;} #boxList .box .title strong { font-size:14px; } /* ----- GLOBAL CLASSES ----- */ .clear { clear:both; display: block; } .clearSmall { clear: both; display: block; height: 0; line-height: 0; font-size: 0; } .clearSmall.seperator { background:url(../images/layup/trBg.gif) left top repeat; height:1px; margin-bottom:30px; } .hide { display:none; } .show { display:block; } .printShow { display:none; } .printHide { display:block; } .float_left { float:left !important; } .float_right { float:right !important; } .align_left { text-align:left !important; } .align_center { text-align:center !important; } .align_right { text-align:right !important; } .align_justify { text-align:justify !important; } .align_bottom { vertical-align:bottom !important; } .image_right { float:right; margin:0 0 15px 15px; } .image_left { float:left; margin:0 15px 15px 0; } .image_center { margin:0 auto; } .hand { cursor:pointer; } .seo {text-decoration:none;font-weight:normal;} .ieLinkFix { background: url(../images/layup/ie6LinkFix.gif); } .width412 { width:412px; text-align:justify; } .width419 { width:419px; text-align:justify; } .width430 { width:430px; text-align:justify; } .width440 { width:440px; text-align:justify; } .width450 { width:450px; text-align:justify; } .width455 { width:455px; text-align:justify; } .width430 ul { margin:0; padding:0px; list-style-position:inside;} .width430 ul li { margin-bottom:17px; text-align:justify; list-style-type:square; } .width266 { width:266px; text-align:justify; } .width266 ul { margin:0; padding:0px; list-style-position:inside;} .width266 ul li { margin-bottom:17px; text-align:justify; list-style-type:square;} img.alignCenter { margin:0 auto; } /* ----- HEADINGS & PARAGRAPHS ----- */ h1, h2, h3, h4, h5, h6 { margin:0; padding:0 0 15px 0; font-size:100%; font-weight:bold;} h1 { padding-bottom:30px; } h2 { height:41px; border-bottom:1px solid #c4c4c4; padding-bottom:0px; margin-bottom:17px; } h3 { padding-bottom:30px; } h4 { padding-bottom:15px; } h5 { padding-bottom:5px; } h1 span, h2 span, h3 span, h4 span, h5 span { display:none; } /* ----- TOP NAVIGATION ----- */ #primaryNav { text-transform: uppercase; position:absolute; right: 0px; top: 45px; } #primaryNav ul { list-style: none; margin: 0px; padding: 0px; height: 31px; float: right; } #primaryNav li { padding: 0px; margin: 0px; float: left; position:relative;} #primaryNav li a { display: block; text-decoration: none; padding: 5px 11px 5px 11px; color: #484848; position: relative; font-weight: normal; } #primaryNav li a:hover, #primaryNav li.active a { background: #1a2251; color: #ffffff; } /* ----- DROPDOWN NAV ----- */ #primaryNav ul li ul { left: -999em; position: absolute;} #primaryNav ul li:hover ul, #primaryNav ul li.sfhover ul { height: auto !important; left: auto; right:0px; padding: 10px 0px 20px 0px; background: #fff; margin: 0px 0px 0px -68px; display: block; width: 200px; border: 1px solid #b3b5c1; float: none !important; } #primaryNav ul li:hover ul li, #primaryNav ul li.sfhover ul li { float: left !important; z-index:999; position:static; } #primaryNav ul li:hover ul li.navImage, #primaryNav ul li.sfhover ul li.navImage { margin-bottom:11px;} #primaryNav ul li:hover ul li a, #primaryNav ul li.sfhover ul li a { color: #484848; display: block; padding: 4px 5px 4px 10px; margin: 0px; background: #ffffff; width: 185px; font-size: 11px; float: none !important; z-index:1000; } #primaryNav ul li:hover ul li a:hover, #primaryNav ul li.sfhover ul li a:hover { margin: 0px; color: #fff; background: #1a2251; z-index:999;} /* ----- FLYOUT (2nd level) NAV ----- */ #primaryNav ul li ul li ul { left: -999em !important; position: absolute; width:281px !important; } #primaryNav ul li ul li:hover ul, #primaryNav ul li ul li.sfhover ul { right: auto !important; background: #1a2251; height: auto !important; top: -1px; left: auto !important; padding: 0px 0px 0px 0px; margin: 0px 0px 0px -281px; display: block; width: 261px; border: none; float: none !important; } #primaryNav ul li ul li:hover ul li, #primaryNav ul li ul li.sfhover ul li { text-align: center; float: none !important; color: #fff !important; display: block; padding: 15px 0px 0px 0px; margin: 0px; width: 261px; font-size: 11px; float: none !important; } #primaryNav ul li ul li:hover ul li.normal, #primaryNav ul li ul li.sfhover ul li.normal { text-transform: none; padding: 0px 0px 5px 0px; } #primaryNav ul li ul li ul li.navImage { padding: 0px 10px; } /* ----- SECONDARY NAVIGATION ----- */ #secondaryNav { width: 960px; height: 25px; position: relative; margin-bottom: 20px; } #secondaryNav .window { width: 930px; height: 25px; position: relative; overflow: hidden; margin: 0px 15px 0px 15px; } #secondaryNav .window ul { list-style: none; margin: 0px; padding: 0px; position: relative; width: 9999px; } #secondaryNav .window li { float: left; } #secondaryNav .window li a { display: block; text-decoration: none; padding: 5px 15px 5px 15px; } #secondaryNav .window li.active a, #secondaryNav .window li a:hover { background: #292929; color: #fff; } #secondaryNav .controls {} #secondaryNav .controls a.prev { position: absolute; top: 0px; left: -14px; } #secondaryNav .controls a.next { position: absolute; top: 0px; right: -14px; } /* ----- SITE MAP ----- */ #sitemap { list-style:none; margin:0 0 0 5px; padding:0;} #sitemap ul { list-style:none; margin:10px 0 0px 15px; padding:0;} #sitemap li { background:url(../images/layup/bulletSitemap.gif) 0px 11px no-repeat; padding:6px 0 5px 15px;} /* ----- BREADCRUMBS/PAGINATION/PAGE TOP AND BOTTOMS ----- */ #breadcrumbs { background: #1a2251; color: #ffffff; padding: 5px 20px 5px 20px; margin-bottom: 17px; } #breadcrumbs a { color: #ffffff; text-decoration: none; font-weight: normal; } #breadcrumbs a.btnBack { float: right; } #pagination { float: right; } #pagination a { padding: 0px 4px 0px 4px; text-decoration: none; } #pagination a:hover { text-decoration: none; background:#000000; color:#FFFFFF; } #pagination .active { text-decoration: none; background:#000000; color:#FFFFFF; } #pagination span { display: block; float: left; padding: 0px 2px 0px 2px; } #arrowCircle { width:256px; height:249px; background:url(../images/layup/spriteArrowCircles.gif) 0 0 no-repeat; position:relative; } #arrowCircle a { display:block; } #arrowCircle a#marketing { position:absolute; width:133px; height:148px; top:0px; left:0px; } #arrowCircle a#management { position:absolute; width:256px; height:101px; bottom:0px; left:0px; } #arrowCircle a#platform { position:absolute; width:133px; height:148px; top:0px; left:136px; } #arrowCircle.marketing { background:url(../images/layup/spriteArrowCircles.gif) -256px 0 no-repeat; } #arrowCircle.management { background:url(../images/layup/spriteArrowCircles.gif) -512px 0 no-repeat; } #arrowCircle.platform { background:url(../images/layup/spriteArrowCircles.gif) -768px 0 no-repeat; } /* ----- FOOTER ----- */ #footer { color: #fff; } #footer .padding { padding: 35px 20px 0px 18px; } #footer .gforcesInfo { padding-top: 30px; padding-bottom:0px; } #footer a { color: #fff; font-weight:normal; text-decoration:none; } #footer #footerInternal { width: 890px; height: 325px; margin:0 auto; background:url(../images/layup/trBg.gif) left top repeat-x; } #footer #footerInternal .contentRight { float: right; width: 590px; padding-top: 50px; font-size: 11px; color: #33251a; } #footer #footerTop { width: 960px; height: 138px; background: url(../images/layup/scroller/footerTopBg.gif) no-repeat; position: relative; } #footer #footerTop a { display: block; position: absolute; background: url(../images/layup/ie6LinkFix.gif); } #footer #footerTop a.jmpFB { width: 47px; height: 47px; top: 72px; right: 294px; } #footer #footerTop a.jmpTwitter { width: 47px; height: 47px; top: 72px; right: 225px; } #footer #footerTop a.jmpBlog { width: 47px; height: 47px; top: 72px; right: 155px; } #footer #footerTop a.jmpYouTube { width: 47px; height: 47px; top: 72px; right:83px; } #footer #footerTop a.jmpGoogle { width: 75px; height: 35px; top: 55px; left: 0px; } #footer #footerTop a.jmpMicrosoft { width: 70px; height: 35px; top: 55px; left: 75px; } #footer #footerTop a.jmpRtf { width: 70px; height: 35px; top: 55px; left: 148px; } #footer #footerTop a.jmpPaypoint { width: 68px; height: 35px; top: 55px; left: 219px; } #footer #footerTop a.jumpYahoo { width: 66px; height: 35px; top: 55px; left: 287px; } #footer #footerTop a.jumpWhatCar { width: 73px; height: 35px; top: 55px; left: 353px; } #footer #footerTop a.jumpCitnow { width: 49px; height: 35px; top: 55px; left: 426px; } #footer #footerTop a.jumpCodeweavers { width: 80px; height: 35px; top: 55px; left: 431px; } #footer #footerTop a.jumpWindows { width: 75px; height: 35px; top: 90px; left: 0px; } #footer #footerTop a.jmpCap { width: 70px; height: 35px; top: 90px; left: 2px; } #footer #footerTop a.jumpIntellitracker { width: 74px; height: 35px; top: 90px; left: 72px; } #footer #footerTop a.jumpCognesia { width: 74px; height: 35px; top: 90px; left: 72px; } #footer #footerTop a.jumpVcars { width: 49px; height: 35px; top: 90px; left: 154px; } #footer #footerTop a.jumpAutoTrader { width: 67px; height: 35px; top: 90px; left: 205px; } #footer #footerTop a.jumpHayMarket { width: 73px; height: 35px; top: 90px; left: 275px; } #footer #footerTop a.jumpCOA { width: 60px; height: 35px; top: 90px; left: 348px; } #footer #footerTop a.jumpCHL { width: 72px; height: 35px; top: 90px; left: 430px; } #footer #footerTop a.jumpFish4Cars { width: 80px; height: 35px; top: 90px; left: 475px; } #footer #footerTop a.ebp { width: 42px; height: 42px; top: 90px; left: 475px; } #footer #footerBottom { width: 960px; height: 159px; background: url(../images/layup/scroller/footerBotBg.gif) no-repeat; position: relative; } #footer a:hover { text-decoration:underline;} #footerPageContent {} /* ----- GLOBAL ----- */ img { display:block; border:0; } p { padding:0 0 15px 0; margin:0; line-height:18px; } address { font-style:normal;} .titleText { color:#292929; font-weight:bold; } .imageList { margin-bottom:16px; } .imageList span { display:none; } .spacer { background:url(../images/layup/trBg.gif) repeat-x; height:1px; margin-top:25px; margin-bottom:25px; } ul.content { padding-left:13px; margin-top:0px; margin-bottom:15px; list-style-position:outside; } ul.content li { padding-top:5px; margin-bottom:0px; list-style-type:disc !important;} /* ----- LINKS ----- */ a { color:#1a2251; font-weight:bold; text-decoration:underline;cursor:pointer; } a:hover { text-decoration:none; } .videoBg { background:url(../images/layup/videoBg.png) left top no-repeat; width:427px; height:349px; } * html .videoBg { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src='http://www.gforces.co.uk/images/layup/videoBg.png'); background: none; } .videoBg .padding { padding:10px 0 0 14px;} .videoSmall { background:url(../images/layup/videoBg387x255.png) left top no-repeat; width:387px; height:255px; } * html .videoSmall { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src='http://www.gforces.co.uk/images/layup/videoBg387x255.png'); background: none; } .videoSmall .padding { padding:10px;} .videoLeftCol { background:url(../images/layup/videoBg313x206.png) left top no-repeat; width:333px; height:226px; } * html .videoLeftCol { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src='http://www.gforces.co.uk/images/layup/videoBg313x206.png'); background: none; } .videoLeftCol .padding { padding:10px;} a.blueBtn { padding:6px 19px; color:#fff; background:#1a2251; font-weight:normal; font-size:14.5px; text-decoration:none; } a.blueBtn:hover { background:#292929; text-decoration:none; } a.blueBtn.archiveBtn { padding:15px 55px; float:left; margin-right:12px; font-size:24px; } a.blueBtn.archiveBtn.last { margin-right:0px !important; } a.submitBtn { padding:6px 19px; color:#fff; background:url(../images/layup/btnSubmit.gif) top left no-repeat; font-weight:normal; font-size:14.5px; text-decoration:none; } a.submitBtn:hover { text-decoration:none; } a.btnGetDirections { padding:6px 19px; color:#fff; background:url(../images/layup/btnGetDirections.gif) top left no-repeat; font-weight:normal; font-size:14.5px; text-decoration:none; } a.btnGetDirections:hover { text-decoration:none; } /* ----- FORMS ----- */ form { padding:0; margin:0; } fieldset { padding:0; margin:0; border:0px none; } legend { padding:0; margin:0; display:none; } label { display:block; width:260px; float:left; } input, textarea { width:200px; font-size:11px !important;} .required { color:#ff0000;} .checkRadio { width:20px; position:relative; left:-7px;} #frmContact { margin-bottom:15px;} #frmContact p { padding:7px 0;} #frmContact select { width:204px;} #frmContact div { margin-bottom:10px;} #submit { width:55px; height:18px; border:none;} /* ----- Prototype Validation ----- */ input.disabled { border: 1px solid #F2F2F2; background-color: #F2F2F2; } input.validation-failed, textarea.validation-failed, select.validation-failed { border: 1px solid #1A2251; color : #FF3300; } input.validation-passed, textarea.validation-passed, select.validation-passed { border: 1px solid #00CC00; color : #000; } .validation-advice { margin: 5px 0; width:452px; padding: 5px; background-color: #1A2251; color : #FFF; font-weight: bold; } #webPlatformCMSForm .validation-advice { margin: 5px 0; width:218px; padding: 5px; background-color: #1A2251; color : #FFF; font-weight: bold; } /* ----- TABLES ----- */ table { border-collapse:collapse; } table p { padding:0px; } /* ----- STOCK UPDATES FORM ----- */ #promoForm { padding:12px 0 0 19px; } #promoForm .signupBoxes { margin-bottom:20px; margin-top:10px;} #promoForm .signupBoxes label { float:left; width:450px; position:relative; top:4px;} #promoForm .signupBoxes input { float:left; width: 14px; margin-right: 10px;} #promoForm select { width:125px !important; margin-bottom: 10px; display:block; margin-right:15px;} #promoForm .carSelects { padding-top:18px;} #promoForm .submitButton { margin:5px 0 20px 0;} /* ----- DOMTABS ----- */ .domTabs { padding-bottom: 30px; } .domContent { border: 1px solid #333333; } .dt1 { display: block; } ul.domHeadings { padding: 0px; margin: 0px; list-style: none; } ul.domHeadings li { float: left; } ul.domHeadings li a { display: block; float: left; padding: 5px 10px 5px 10px; background: #000; color: #FFF; text-decoration: none; font-weight: bold; } ul.domHeadings li a:hover, ul.domHeadings li.active a { background: #BCBCBC; color: #000; } /* ----- HOMEPAGE SCROLLER ----- */ /* -- Banner Advert -- */ #adOverlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 600px; z-index: 0; cursor: pointer; } #adOverlay div { position: absolute; top: 0px; left: 0px; width: 100%; height: 600px; } #adOverlay a { display: block; width: 100%; height: 600px; outline: 0; } #adOverlay a span { display: block; width: 100%; height: 600px; } /* -- Banner Advert -- */ #sliderOverflow { width: 960px; height:338px; position:relative; overflow: hidden; } #sliderContainerOuter { width: 960px; height:338px; position:relative; } #sliderContainerOuter .leftShadow { position:absolute; left: 0px; top:0px; z-index: 8; cursor: pointer; } #sliderContainerOuter .rightShadow { position:absolute; left: 941px; top:0px; z-index: 8; cursor: pointer; } #sliderContainerOuter .leftShadow a { outline: 0; } #sliderContainerOuter .rightShadow a { outline: 0; } #sliderContainerOuter #bannerControls { position: absolute; top: 10px; right: 40px; z-index: 8; } #sliderContainerOuter #bannerControls a { line-height: 0px; font-size: 0px; display: block; width: 10px; height: 10px; background: url(../images/layup/spriteBannerBtns.gif) no-repeat; float: left; margin-left: 5px; } #sliderContainerOuter #bannerControls a.activeSlide, #sliderContainerOuter #bannerControls a:hover { background-position: bottom left; } #sliderContainer { width:9999px; height:338px; padding:0px 0 0; position:absolute; top:0; } #sliderContainer ul { margin:0; padding:0; } #sliderContainer ul li { list-style:none; padding:0; margin:0; float:left; } #sliderContainer ul li .testItem {} #sliderContainer ul li .testItem a { font-weight:normal; text-decoration:none; display:inline; } #sliderContainer ul li .testItem .thumb { width:294px; height:196px; display:block; } #sliderContainer ul li .testItem .title { font-size:14px; color:#008dd2; font-family:Arial, Helvetica, sans-serif; padding:31px 0 17px; display:block; } #sliderContainer ul li .testItem .testimonial { color:#6e6c6c; padding:0 0 18px; display:block; } #sliderContainer ul li .testItem .link { font-weight:bold; display:block; } #sliderContainer .title { font-weight: normal; font-size: 12px; padding: 5px 0px 4px 17px; width: 347px; background:#ffffff url(../images/layup/scroller/arrow.jpg) left no-repeat; border-top: 1px solid #797979; border-bottom: 1px solid #797979; position: absolute; top: 0px; left: 0px; z-index: 2; color:#484848; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; text-transform: uppercase; } #sliderContainer .scrollerItem { position: relative; } #sliderContainer .scrollerItemContent { height:338px; width:960px; background:#dcdcdc; color:#000000;} #sliderControllerContainer { width:960px; height:16px; background:url(../images/layup/scroller/sliderControllerBg.jpg) no-repeat left top; margin:0 0 72px; position:relative; } #sliderControllerContainer a.sliderBar { width:77px; height:9px; background:url(../images/layup/scroller/sliderBar.gif) no-repeat left top; display:block; position:absolute; top:3px; } #sliderControllerContainer a.sliderBar:hover { background:url(../images/layup/scroller/sliderBarHover.gif) no-repeat left top; } .scroll-handle-top { } .scroll-handle-bot { } .thumb img { width: 278px; } .scroll-track{ height:10px; width:13px; background: url(../images/layup/scroller/track.gif); border-left: 1px solid #fff; } .scroll-handle{ height:10px; width:13px; background:#1a2251 url(../images/layup/scroller/handle.gif) no-repeat center; cursor:pointer; } /* controls */ #scrollControls { height: 49px; margin-bottom: 15px; } #scrollControls #btnContainer { width: 344px; height: 49px; margin: 0 auto; } #scrollControls .location { width: 160px; height: 49px; float: left; position: relative; overflow:hidden; } #scrollControls .location .block { width: 54px; height: 49px; background: #797979; position: relative; } #scrollControls .location .frame { position: absolute; top: 0px; height: 0px; } #scrollControls .prev { width: 91px; height: 49px; float: left; } #scrollControls .next { width: 93px; height: 49px; float: left; } #whoVideo {width:364px; height:204px; background:url(../images/layup/v8Launch.jpg) no-repeat;} #fewVideo {width:364px; height:204px; background:url(../images/layup/few.jpg) no-repeat;} #blogPanel { padding:10px; width:343px; height:376px; background:#fff; } #whatOurStaff { width:364px; background:url(../images/layup/soWhatDoOurStaffThink.jpg) no-repeat left top; } #testimonialsJumps a { display: block; float: left; height: 89px; background: url(../images/layup/spriteTestimonialJumps.jpg) no-repeat; } #testimonialsJumps a.jump1 { width: 126px; background-position: 0px -89px; } #testimonialsJumps a.jump2 { width: 170px; background-position: -126px -89px; } #testimonialsJumps a.jump3 { width: 152px; background-position: -296px -89px; } #testimonialsJumps a.jump4 { width: 168px; background-position: -448px -89px; } #testimonialsJumps a.jump5 { width: 145px; background-position: -616px -89px; } #testimonialsJumps a.jump6 { width: 199px; background-position: -761px -89px; } /*#testimonialsJumps a.jump7 { width: 196px; background-position: -764px -89px; }*/ #testimonialsJumps a.jump1:hover { background-position: 0px 0px; } #testimonialsJumps a.jump2:hover { background-position: -126px 0px; } #testimonialsJumps a.jump3:hover { background-position: -296px 0px; } #testimonialsJumps a.jump4:hover { background-position: -448px 0px; } #testimonialsJumps a.jump5:hover { background-position: -616px 0px; } #testimonialsJumps a.jump6:hover { background-position: -761px 0px; } /*#testimonialsJumps a.jump7:hover { background-position: -764px 0px; }*/ /* ----- SCROLLER SMALL ----*/ #sliderContainerOuter.small { width: 960px; height:347px; position:relative; } #sliderContainerOuter.small .leftShadow { position:absolute; left: -520px; top:0px; z-index: 1; cursor: pointer; } #sliderContainerOuter.small .rightShadow { position:absolute; left:945px; top:0px; z-index: 1; cursor: pointer; } #sliderContainer.small { width:9999px; height:347px; padding:0px 0 0; position:absolute; top:0; } #sliderContainer.small ul { margin:0; padding:0; } #sliderContainer.small ul li { list-style:none; padding:0; margin:0 7px 0 0; float:left; } #sliderContainer.small ul li .testItem {} #sliderContainer.small ul li .testItem a { font-weight:normal; text-decoration:none; display:inline; } #sliderContainer.small ul li .testItem .thumb { width:294px; height:196px; display:block; } #sliderContainer.small ul li .testItem .title { font-size:14px; color:#008dd2; font-family:Arial, Helvetica, sans-serif; padding:31px 0 17px; display:block; } #sliderContainer.small ul li .testItem .testimonial { color:#6e6c6c; padding:0 0 18px; display:block; } #sliderContainer.small ul li .testItem .link { font-weight:bold; display:block; } #sliderContainer.small .title { font-weight: normal; font-size: 12px; padding: 5px 0px 4px 17px; width: 347px; background:#ffffff url(../images/layup/scroller/arrow.jpg) left no-repeat; border-top: 1px solid #797979; border-bottom: 1px solid #797979; position: absolute; top: 0px; left: 0px; z-index: 2; color:#484848; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; text-transform: uppercase; } #sliderContainer.small .scrollerItem { position: relative; } #sliderContainer.small .scrollerItemContent { height:345px; width:363px; padding:1px; background:#dcdcdc; color:#000000; } #sliderContainer.small .scrollerItemContent.large.johnsons { width:586px; background:url(../images/layup/johnsonsVideoBg.jpg) 1px 1px no-repeat #dcdcdc; } #sliderContainer.small .scrollerItemContent.large.lifestyle { width:586px; background:url(../images/layup/scroller/lifestyle/VideoBg.jpg) 1px 1px no-repeat #dcdcdc; } #sliderContainer.small .scrollerItemContent.large .video { margin:27px 0 0 37px; } #sliderContainer.small .scrollerItemContent.large.eag { width:586px; background:url(../images/layup/scroller/eag/eagVideoBg.jpg) 1px 1px no-repeat #dcdcdc; } #sliderContainer .largeWessex { width:566px !important; } #sliderControllerContainer.small { width:960px; height:16px; background:url(../images/layup/scroller/sliderControllerBg.jpg) no-repeat left top; margin:0 0 72px; position:relative; } #sliderControllerContainer a.sliderBar { width:77px; height:9px; background:url(../images/layup/scroller/sliderBar.gif) no-repeat left top; display:block; position:absolute; top:3px; } #sliderControllerContainer a.sliderBar:hover { background:url(../images/layup/scroller/sliderBarHover.gif) no-repeat left top; } /* ----- internal page styles ----- */ .ndAuto { background:url(../images/layup/v8Background.jpg) left top no-repeat; color:#fff; padding-bottom:60px; } .leadbeast { background:url(../images/layup/leadbeastBg.jpg) left top no-repeat #040808; color:#fff; } .leadbeastText { width:541px; margin:80px auto 50px 202px; float:left; color:#fff; display:inline; } .leadbeastBottom { margin-bottom:30px; } .design { background:url(../images/layup/designBg.jpg) right 185px no-repeat #000; } .ndTyres { background:url(../images/layup/ndTyresBg.jpg) left top no-repeat #fff; } #socialIcons { background:url(../images/layup/socialMediaIcons.jpg) no-repeat; width:360px; height:32px; margin-bottom:40px; position:relative; } #socialIcons a { display:block; width:32px; height:32px; background:url(../images/layup/ie6LinkFix.gif); } #socialIcons #fb { position:absolute; top:0px; left:0px; } #socialIcons #twitter { position:absolute; top:0px; left:197px; } #socialIcons #blog { position:absolute; top:0px; left:262px; } #socialIcons #youTube { position:absolute; top:0px; left:328px; } #socialIcons #flickr { position:absolute; top:0px; left:66px; } #socialIcons #linkedIn { position:absolute; top:0px; left:131px; } #v8Feed { width:379px; height:265px; background:url(../images/layup/v8Feed.jpg) left top no-repeat; color:#fff; position:absolute; top:68px; left:547px; } #v8Feed .padding { padding:40px 15px 15px 15px; height:210px; font-size:11px; } /* ----- SEARCH ENGINE PAGE ----- */ #searchEngines .searchLogo { float:left; width:170px; } #searchEngines div { margin-bottom:50px; } #searchEngines .inputfield { float:left; width:150px; margin-top:7px; margin-right:14px; } #defaultForm div { margin-bottom:40px; } #defaultForm .inputfield { float:left; width:150px; margin-top:7px; margin-right:14px; } #defaultForm .inputfield2 { float:left; width:150px; margin-top:7px; margin-right:14px; } #defaultForm select { float:left; margin-top:7px; } .address { margin-top:40px; } .address .addressInfo { float:left; width:33%; margin-bottom:20px; } .address .addressInfo .blue { color:#0072bc; font-weight:bold; } /* ----- GHOST OVERLAY ----- */ #ghostOverlay { position: absolute; left:0px; top:0px; width: 100%; z-index: 9999; height: 100%; background:url(../images/layup/overlay.png) top left repeat; } * html #ghostOverlay { background: none; } #ghostOverlay .test { width:100%; height:100%; zoom:1; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src='http://www.gforces.co.uk/images/layup/overlay.png'); background: none; } #ghostOverlay a { width:100%; height:495px; position:relative; display:block; background:url(../images/layup/ie6LinkFix.gif) repeat ; z-index:999999; } #ghostOverlay .mainImage { width: 961px; height:528px; background:url(../images/layup/xmasOpening.png) 0 0 no-repeat; margin:0 auto; z-index:99999; } /* ----- CUSTOM BROWSE BUTTON ----- */ #divinputfile{ background:url(../images/layup/btnBrowse.gif) no-repeat 245px 3px; width:394px; margin:0px !important; } #divinputfile .clearSmall { margin:0px !important; } #divinputfile #filepc{ display: block; opacity: 0.0; -moz-opacity: 0.0; filter: alpha(opacity=00); font-size:18px; } #fakeinputfile{ margin-top:-35px; } #fakeinputfile #fakefilepc{ width:115px; height:22px; font-size:18px; font-family:Arial; float:right; margin-right:168px; margin-bottom:10px !important; } /* ----- MOBILE IFRAME ----- */ #mobileIframe { background: url(../images/layup/mobileIframeBg.png) top left repeat; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 9999; } #btnIframeClose { position:absolute; top: -25px; right: -25px; z-index: 999999; } #mobileIframeContain { margin: 70px auto 0 auto; position: relative; background: url(../images/layup/frameMobile.png) 0px 0px no-repeat; width: 320px; height: 596px; padding-top: 128px; padding-left: 35px; padding-right: 36px; } /* ----- AWARDS SPRITES ----- */ #awardsLogos { background: url(../images/layup/trBg.gif) repeat-x scroll left bottom transparent; padding-bottom:33px; } #awardsLogos a { display:block; height:60px; background: url(../images/layup/spriteAwards.jpg) no-repeat; cursor:default; float:left; cursor:pointer; } #awardsLogos a#award1 { width:69px; background-position:0 0; } #awardsLogos a#award1:hover { background-position:0 -60px; } #awardsLogos a#award2 { width:69px; background-position:-69px 0; } #awardsLogos a#award2:hover { background-position:-69px -60px; } #awardsLogos a#award3 { width:79px; background-position:-138px 0; } #awardsLogos a#award3:hover { background-position:-138px -60px; } #awardsLogos a#award4 { width:73px; background-position:-217px 0; } #awardsLogos a#award4:hover { background-position:-217px -60px; } #awardsLogos a#award5 { width:75px; background-position:-290px 0; } #awardsLogos a#award5:hover { background-position:-290px -60px; } #awardsLogos a#award6 { width:57px; background-position:-365px 0; } #awardsLogos a#award6:hover { background-position:-365px -60px; } #awardsLogos a#award7 { width:82px; background-position:-422px 0; } #awardsLogos a#award7:hover { background-position:-422px -60px; } #awardsLogos a#award8 { width:132px; background-position:-504px 0; } #awardsLogos a#award8:hover { background-position:-504px -60px; } #awardsLogos a#award9 { width:76px; background-position:-636px 0; } #awardsLogos a#award9:hover { background-position:-636px -60px; } #awardsLogos a#award10 { width:103px; background-position:-712px 0; } #awardsLogos a#award10:hover { background-position:-712px -60px; } #awardsLogos a#award11 { width:51px; background-position:-815px 0; } #awardsLogos a#award11:hover { background-position:-815px -60px; } #awardsLogos a#award12 { width:75px; background-position:-866px 0; } #awardsLogos a#award12:hover { background-position:-866px -60px; } #awardsLogosAboutUs { background: url(../images/layup/trBg.gif) repeat-x scroll left bottom transparent; padding-bottom:33px; } #awardsLogosAboutUs a { display:block; height:60px; background: url(../images/layup/spriteAwardsSmall.jpg) no-repeat; cursor:default; float:left; cursor:pointer; } #awardsLogosAboutUs a#award1 { width:64px; background-position:0 0; } #awardsLogosAboutUs a#award1:hover { background-position:0 -60px; } #awardsLogosAboutUs a#award2 { width:68px; background-position:-64px 0; } #awardsLogosAboutUs a#award2:hover { background-position:-64px -60px; } #awardsLogosAboutUs a#award3 { width:75px; background-position:-132px 0; } #awardsLogosAboutUs a#award3:hover { background-position:-132px -60px; } #awardsLogosAboutUs a#award4 { width:69px; background-position:-207px 0; } #awardsLogosAboutUs a#award4:hover { background-position:-207px -60px; } #awardsLogosAboutUs a#award5 { width:72px; background-position:-276px 0; } #awardsLogosAboutUs a#award5:hover { background-position:-276px -60px; } #awardsLogosAboutUs a#award6 { width:52px; background-position:-348px 0; } #awardsLogosAboutUs a#award6:hover { background-position:-348px -60px; } #awardsLogosAboutUs a#award7 { width:76px; background-position:-400px 0; } #awardsLogosAboutUs a#award7:hover { background-position:-400px -60px; } #awardsLogosAboutUs a#award8 { width:126px; background-position:-476px 0; } #awardsLogosAboutUs a#award8:hover { background-position:-476px -60px; } #awardsLogosAboutUs a#award9 { width:71px; background-position:-602px 0; } #awardsLogosAboutUs a#award9:hover { background-position:-602px -60px; } #awardsLogosAboutUs a#award10 { width:99px; background-position:-673px 0; } #awardsLogosAboutUs a#award10:hover { background-position:-673px -60px; } #awardsLogosAboutUs a#award11 { width:48px; background-position:-772px 0; } #awardsLogosAboutUs a#award11:hover { background-position:-772px -60px; } #awardsLogosAboutUs a#award12 { width:70px; background-position:-820px 0; } #awardsLogosAboutUs a#award12:hover { background-position:-820px -60px; } /* ----- ND Touch Page ----- */ #imageScroll { width:422px; height:237px; overflow:hidden; position:relative; margin-top:10px; margin-bottom:25px; } #imageScroll .scrollingElement { height:231px; position:absolute; top:0px; left:0px; width:9999em; } #imageScroll .scrollingElement img { float:left; } #imageScroll #controls { float:left; width:100%; overflow:hidden; position:relative; top:215px;} #imageScroll #controls ul { clear:left; float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; } #imageScroll #controls ul li { display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; } #imageScroll #controls ul li a { display:block; margin-right:7px; width:8px; height:8px; background:url(../images/layup/spriteImageScroll.gif) left top no-repeat; text-decoration:none; line-height:1.3em; } #imageScroll #controls ul li a:hover, #imageScroll #controls ul li a.active { background-position: right top;} /* ----- ND Tyres ----- */ #tyresForm { width:425px; height:285px; margin-bottom:400px; padding:10px; color:#fff; background:url(../images/layup/tyreFormBg.gif) left top no-repeat; } #tyresForm label { color:#fff; } #tyresForm label span { color:#F00; } #tyresForm td { padding-bottom:10px; } #tyreText { width:870px; height:121px; font-size:12px; background:url(../images/layup/ndTyreTextBg.gif) left top no-repeat; padding:5px 10px; color:#fff; } #tyreText ul { margin-top:5px; margin-bottom:5px; } #tyreText li { padding-bottom:0px; }