/* STLYE SHEET FOR ANCAP - Tabs http://www.ancap.com.au Created by INVOLVED. - involved.com.au (17 May 2010) jordan@involved.com.au ToC 1. jQuery UI Tabs defaults 2. Tabs - Star Ratings Explained 3. Tabs - Crash Testing Explained 4. Tabs - Safety Features 5. Tabs - Media Centre */ /* @group jQuery UI Tabs defaults -----------------------------------------*/ .ui-tabs { position: relative; padding: 0px; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ .ui-tabs ul.ui-tabs-nav { margin: 0; padding: 0px; list-style-type: none; display: inline-block; width: 100%; } .ui-tabs ul.ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0px; margin: 0px; border-bottom: 0 !important; padding: 0px; white-space: nowrap; } .ui-tabs ul.ui-tabs-nav li a { float: left; text-decoration: none; } .ui-tabs ul.ui-tabs-nav li.ui-tabs-selected { } .ui-tabs ul.ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } .ui-tabs ul.ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ .ui-tabs .ui-tabs-panel { display: block; border-width: 0; } .ui-tabs .ui-tabs-hide { display: none !important; } .ui-tabs p { color: #fff; } /* @end */ /* @group Tabs - Star Ratings Explained ----------------------------------------*/ #starRatingsExplained.ui-tabs, #crashTestingExplained.ui-tabs { width: 980px; display: inline-block; background: url(../images/common/tabBox-btm.gif) no-repeat left bottom; margin: 60px 0px 50px -5px; } #starRatingsExplained.ui-tabs ul.ui-tabs-nav, #crashTestingExplained.ui-tabs ul.ui-tabs-nav { position: relative; z-index: 100; padding-bottom: 5px; background: #fff url(../images/common/tabBox-topCorners.png) no-repeat left bottom; } #starRatingsExplained.ui-tabs ul.ui-tabs-nav li { display: inline-block; float: left; height: 55px; width: 195px; background: url(../images/starRatings/tabBox_Sprite-starRatings.png) no-repeat left top; } #starRatingsExplained.ui-tabs ul.ui-tabs-nav li#tab-1star { left: 15px; background-position: 0px 0px; } #starRatingsExplained.ui-tabs ul.ui-tabs-nav li#tab-2star { left: 8px; background-position: -195px 0px; } #starRatingsExplained.ui-tabs ul.ui-tabs-nav li#tab-3star { left: 1px; background-position: -390px 0px; } #starRatingsExplained.ui-tabs ul.ui-tabs-nav li#tab-4star { left: -6px; background-position: -585px 0px; } #starRatingsExplained.ui-tabs ul.ui-tabs-nav li#tab-5star { left: -13px; background-position: -780px 0px; } #starRatingsExplained.ui-tabs ul.ui-tabs-nav li#tab-1star.ui-tabs-selected { left: 15px; background-position: 0px -55px; } #starRatingsExplained.ui-tabs ul.ui-tabs-nav li#tab-2star.ui-tabs-selected { left: 8px; background-position: -195px -55px; } #starRatingsExplained.ui-tabs ul.ui-tabs-nav li#tab-3star.ui-tabs-selected { left: 1px; background-position: -390px -55px; } #starRatingsExplained.ui-tabs ul.ui-tabs-nav li#tab-4star.ui-tabs-selected { left: -6px; background-position: -585px -55px; } #starRatingsExplained.ui-tabs ul.ui-tabs-nav li#tab-5star.ui-tabs-selected { left: -13px; background-position: -780px -55px; } #starRatingsExplained.ui-tabs ul.ui-tabs-nav li a { width: 185px; height: 55px; margin-left: 4px; display: block; text-indent: -3000px; } #starRatingsExplained.ui-tabs .ui-tabs-panel { padding: 25px 35px 35px 35px; background: url(../images/common/tabBox-middle.png) no-repeat left top; min-height: 290px; height: auto !important; height: 290px; position: relative; z-index: 110; /*margin-top: -5px;*/ } /* @end */ /* @group Tabs - Crash Testing Explained -----------------------------------------*/ #crashTestingExplained.ui-tabs { /* margin-top: 30px;*/ } #crashTestingExplained.ui-tabs ul.ui-tabs-nav li { display: inline-block; float: left; height: 45px; width: 240px; background: url(../images/crashTesting/tabBox_Sprite-crashTesting.png) no-repeat left top; } #crashTestingExplained.ui-tabs ul.ui-tabs-nav li#tab-frontalOffset { left: 15px; background-position: 0px 0px; } #crashTestingExplained.ui-tabs ul.ui-tabs-nav li#tab-sideImpact { left: 8px; background-position: -240px 0px; } #crashTestingExplained.ui-tabs ul.ui-tabs-nav li#tab-pedestrian { left: 1px; background-position: -480px 0px; } #crashTestingExplained.ui-tabs ul.ui-tabs-nav li#tab-pole { left: -6px; background-position: -720px 0px; } #crashTestingExplained.ui-tabs ul.ui-tabs-nav li#tab-frontalOffset.ui-tabs-selected { left: 15px; background-position: 0px -45px; } #crashTestingExplained.ui-tabs ul.ui-tabs-nav li#tab-sideImpact.ui-tabs-selected { left: 8px; background-position: -240px -45px; } #crashTestingExplained.ui-tabs ul.ui-tabs-nav li#tab-pedestrian.ui-tabs-selected { left: 1px; background-position: -480px -45px; } #crashTestingExplained.ui-tabs ul.ui-tabs-nav li#tab-pole.ui-tabs-selected { left: -6px; background-position: -720px -45px; } #crashTestingExplained.ui-tabs ul.ui-tabs-nav li a { width: 230px; height: 45px; margin-left: 4px; display: block; text-indent: -3000px; } #crashTestingExplained.ui-tabs .ui-tabs-panel { padding: 0px 0px 5px 0px; background: url(../images/common/tabBox-middle.png) no-repeat -5px top; position: relative; left: 5px; min-height: 420px; height: auto !important; height: 420px; margin-top: -5px; } #crashTestingExplained.ui-tabs .ui-tabs-panel .nonFlashText { min-height: 210px; height: auto !important; height: 210px; padding: 25px 35px 35px 35px; } /* @end */ /* @group Tabs - Safety Features -----------------------------------------*/ #safetyFeatures.ui-tabs { width: 980px; background: #000; margin: 60px 0px 10px -5px; display: inline-block; padding-top: 30px; background: url(../images/common/tabBox-top.png) no-repeat left top; } #safetyFeatures.ui-tabs .intro { display: inline; float: left; margin-left: 35px; padding-bottom: 20px; } #safetyFeatures.ui-tabs ul.main-tabs.ui-tabs-nav { position: relative; z-index: 100; padding-bottom: 5px; left: 25px; } #safetyFeatures.ui-tabs ul.main-tabs li { display: inline-block; float: left; height: 115px; margin-right: 20px; width: 170px; } #safetyFeatures.ui-tabs ul.main-tabs.ui-tabs-nav li a { background: url(../images/safetyFeatures/tabBox_Sprite-safetyFeatures.jpg) no-repeat left top; width: 168px; height: 108px; display: block; text-indent: -3000px; border: #000 1px solid; /*margin: 1px; */ } #safetyFeatures.ui-tabs ul.main-tabs li.ui-state-active { background: url(../images/safetyFeatures/tabBox_bg-active.gif) no-repeat center bottom; } #safetyFeatures.ui-tabs ul.main-tabs li.ui-state-active a { border: #f4ba1c 1px solid !important; } #safetyFeatures.ui-tabs ul.main-tabs.ui-tabs-nav li a:hover { border: #666 1px solid; } #safetyFeatures.ui-tabs ul.main-tabs.ui-tabs-nav li#tab-structural_integrity a { background-position: 0px 0px; } #safetyFeatures.ui-tabs ul.main-tabs.ui-tabs-nav li#tab-ESC a { background-position: -168px 0px; } #safetyFeatures.ui-tabs ul.main-tabs.ui-tabs-nav li#tab-ABS a { background-position: -336px 0px; } #safetyFeatures.ui-tabs ul.main-tabs.ui-tabs-nav li#tab-airbags a { background-position: -504px 0px; } #safetyFeatures.ui-tabs ul.main-tabs.ui-tabs-nav li#tab-seat_belts a { background-position: -672px 0px; } /*#safetyFeatures.ui-tabs ul.main-tabs.ui-tabs-nav li#tab-structural_integrity.ui-tabs-selected { background-position: 0px 0px; } #safetyFeatures.ui-tabs ul.main-tabs.ui-tabs-nav li#tab-ESC.ui-tabs-selected { background-position: -170px 0px; } #safetyFeatures.ui-tabs ul.main-tabs.ui-tabs-nav li#tab-ABS.ui-tabs-selected { background-position: -340px 0px; } #safetyFeatures.ui-tabs ul.main-tabs.ui-tabs-nav li#tab-airbags.ui-tabs-selected { background-position: -510px 0px; } #safetyFeatures.ui-tabs ul.main-tabs.ui-tabs-nav li#tab-seat_belts.ui-tabs-selected { background-position: -680px 0px; }*/ #safetyFeatures.ui-tabs .ui-tabs-panel { width: 480px; float: left; padding: 35px 35px 25px 35px; position: relative; } #safetyFeatures.ui-tabs #tabs-content { background: url(../images/common/tabBox-btm.gif) no-repeat left bottom; min-height: 325px; height: auto !important; height: 325px; } /* Sub Tabs */ #safetyFeatures.ui-tabs .sub-content .ui-tabs-panel { padding: 25px 0px 0px 0px; } #safetyFeatures.ui-tabs .sub-content ul.sub-tabs.ui-tabs-nav { display: inline-block; } #safetyFeatures.ui-tabs .sub-content ul.sub-tabs li { display: inline-block; float: left; margin-right: 30px; height} #safetyFeatures.ui-tabs .sub-content ul.sub-tabs.ui-tabs-nav li a { font-size: 10px; text-transform: uppercase; color: #505050; } #safetyFeatures.ui-tabs .sub-content ul.sub-tabs li a:hover { color: #b4b4b4; } #safetyFeatures.ui-tabs .sub-content ul.sub-tabs li.ui-tabs-selected a { color: #fff; } /* @end */ /* @group Tabs - Media Centre -----------------------------------------*/ /* 'Media Releases' doesn't use the jQuery UI tabs classes and IDs as the 'Media Release Page' doesn't use working tabs, but still has them there as normal hyperlinks*/ #mediaReleases { width: 540px; padding-top: 30px; } #mediaReleases ul#timeline { background: url(../images/mediaCentre/%23cccccc.gif) repeat-x 0 bottom; display: block; height: 21px; } #mediaReleases ul#timeline li { width: 50px; height: 21px; background: url(../images/mediaCentre/tabBox_Sprite-mediaReleases.png) no-repeat 0 -9px; text-indent: -3000px; display: inline-block; float: left; } #mediaReleases ul li#tab-2006 { background-position: 0px -9px; } #mediaReleases ul li#tab-2007 { background-position: -50px -9px; } #mediaReleases ul li#tab-2008 { background-position: -100px -9px; } #mediaReleases ul li#tab-2009 { background-position: -150px -9px; } #mediaReleases ul li#tab-2010 { background-position: -200px -9px; } #mediaReleases ul li#tab-2011 { background-position: -250px -9px; } #mediaReleases ul li#tab-2012 { background-position: -300px -9px; } #mediaReleases ul li#tab-2013 { background-position: -350px -9px; } #mediaReleases ul li#tab-2014 { background-position: -400px -9px; } #mediaReleases ul li#tab-2015 { background-position: -450px -9px; } #mediaReleases ul li#tab-2016 { background-position: -500px -9px; } #mediaReleases.ui-tabs ul.ui-tabs-nav li#tab-2006.ui-tabs-selected { background-position: 0px -39px; } #mediaReleases.ui-tabs ul.ui-tabs-nav li#tab-2007.ui-tabs-selected { background-position: -50px -39px; } #mediaReleases.ui-tabs ul.ui-tabs-nav li#tab-2008.ui-tabs-selected { background-position: -100px -39px; } #mediaReleases.ui-tabs ul.ui-tabs-nav li#tab-2009.ui-tabs-selected { background-position: -150px -39px; } #mediaReleases.ui-tabs ul.ui-tabs-nav li#tab-2010.ui-tabs-selected { background-position: -200px -39px; } #mediaReleases.ui-tabs ul.ui-tabs-nav li#tab-2011.ui-tabs-selected { background-position: -250px -39px; } #mediaReleases.ui-tabs ul.ui-tabs-nav li#tab-2012.ui-tabs-selected { background-position: -300px -39px; } #mediaReleases.ui-tabs ul.ui-tabs-nav li#tab-2013.ui-tabs-selected { background-position: -350px -39px; } #mediaReleases.ui-tabs ul.ui-tabs-nav li#tab-2014.ui-tabs-selected { background-position: -400px -39px; } #mediaReleases.ui-tabs ul.ui-tabs-nav li#tab-2015.ui-tabs-selected { background-position: -450px -39px; } #mediaReleases.ui-tabs ul.ui-tabs-nav li#tab-2016.ui-tabs-selected { background-position: -500px -39px; } #mediaReleases ul li#tab-2006.activeSubCateogry { background-position: 0px -69px; } #mediaReleases ul li#tab-2007.activeSubCateogry { background-position: -50px -69px; } #mediaReleases ul li#tab-2008.activeSubCateogry { background-position: -100px -69px; } #mediaReleases ul li#tab-2009.activeSubCateogry { background-position: -150px -69px; } #mediaReleases ul li#tab-2010.activeSubCateogry { background-position: -200px -69px; } #mediaReleases ul li#tab-2011.activeSubCateogry { background-position: -250px -69px; } #mediaReleases ul li#tab-2012.activeSubCateogry { background-position: -300px -69px; } #mediaReleases ul li#tab-2013.activeSubCateogry { background-position: -350px -69px; } #mediaReleases ul li#tab-2014.activeSubCateogry { background-position: -400px -69px; } #mediaReleases ul li#tab-2015.activeSubCateogry { background-position: -450px -69px; } #mediaReleases ul li#tab-2016.activeSubCateogry { background-position: -500px -69px; } #mediaReleases ul li a { display: block; width: 50px; height: 21px; } /* @end */