/* Copyright (c) Enigma Interactive 2006 SOM2 Project: OHE Filename: coSiteNavigaion.css Description: Site Navigation stylesheet History ver date who comment ----------------------------------------------------------------------------- 7 11/1//07 PG corrected colour value 6 11/1/06 PG added highligh states 5 10/1/06 PG tweeked more 4 9/1/06 PG tweeked 3 9/1/06 PG added two new sub levels 2 20/12/06 PG inital setup 1 8/12/06 PG created */ #coSiteSubNavigation{ } #coSiteSubNavigation hr{ display:none; } #coSiteSubNavigation ul{ padding:0; margin:0; list-style:none; overflow:hidden; width:100%; } #coSiteSubNavigation ul li{ padding:0; margin:0; float:left; padding-right:1em; font-size:0.9em; } #coSiteNavigation{ padding-top:60px; background: #002A63 url('/res/coSiteNavigation/level1_top.gif') no-repeat left top; font-size:0.9em; font-weight:bold; } #coSiteNavigation hr{ display:none; } #coSiteNavigation ul{ margin:0; padding:0; list-style:none; } #coSiteNavigation ul li{ margin:0; background:#002A63 url('/res/coSiteNavigation/lvl1_1.gif') no-repeat left bottom; display:block; float: left; width: 100%; } #coSiteNavigation ul li a{ color:#fff; text-decoration:none; display:block; padding:10px 6px 6px 6px; background:transparent url('/res/coSiteNavigation/lvl1_1.gif') no-repeat left bottom; } #coSiteNavigation ul li ul{ padding-left:15px; } #coSiteNavigation ul li li ul{ padding-left:10px; } #coSiteNavigation ul li li li ul{ padding-left:0px; } /* DON'T LOOK! CLOSE YOUR EYES! BLAME ANDYD*/ /* Need Bg images on li and a tags - bacause they need to be different depending on - last, open and (last and open)*/ #coSiteNavigation ul li.one, #coSiteNavigation ul li.one_first{ background-color:#002A63; background-image:url('/res/coSiteNavigation/lvl1_1.gif');} #coSiteNavigation ul li.two{ background-color:#0048AA; background-image:url('/res/coSiteNavigation/lvl1_2.gif');} #coSiteNavigation ul li.three{ background-color:#0059D2; background-image:url('/res/coSiteNavigation/lvl1_3.gif');} #coSiteNavigation ul li.four{ background-color:#046FFF; background-image:url('/res/coSiteNavigation/lvl1_4.gif');} #coSiteNavigation ul li.five{ background-color:#358BFF; background-image:url('/res/coSiteNavigation/lvl1_5.gif'); } #coSiteNavigation ul li.six{ background-color:#5EA3FF; background-image:url('/res/coSiteNavigation/lvl1_6.gif'); } #coSiteNavigation ul li.seven{ background-color:#8ABCFF; background-image:url('/res/coSiteNavigation/lvl1_7.gif');} /*Have to do this as IE6 doesn't impliment multiple classes on elements correctly*/ #coSiteNavigation ul li.one_last{ background-color:#002A63; background-image:url('/res/coSiteNavigation/lvl1_1_end.gif');} #coSiteNavigation ul li.two_last{ background-color:#0048AA; background-image:url('/res/coSiteNavigation/lvl1_2_end.gif');} #coSiteNavigation ul li.three_last{ background-color:#0059D2; background-image:url('/res/coSiteNavigation/lvl1_3_end.gif');} #coSiteNavigation ul li.four_last{ background-color:#046FFF; background-image:url('/res/coSiteNavigation/lvl1_4_end.gif');} #coSiteNavigation ul li.five_last{ background-color:#358BFF; background-image:url('/res/coSiteNavigation/lvl1_5_end.gif');} #coSiteNavigation ul li.six_last{ background-color:#5EA3FF; background-image:url('/res/coSiteNavigation/lvl1_6_end.gif');} #coSiteNavigation ul li.seven_last{ background-color:#8ABCFF; background-image:url('/res/coSiteNavigation/lvl1_7_end.gif');} #coSiteNavigation ul li.one a, #coSiteNavigation ul li.one_first a{ background-image:url('/res/coSiteNavigation/lvl1_1.gif');} #coSiteNavigation ul li.two a{ background-image:url('/res/coSiteNavigation/lvl1_2.gif');} #coSiteNavigation ul li.three a{ background-image:url('/res/coSiteNavigation/lvl1_3.gif');} #coSiteNavigation ul li.four a{ background-image:url('/res/coSiteNavigation/lvl1_4.gif');} #coSiteNavigation ul li.five a{ background-image:url('/res/coSiteNavigation/lvl1_5.gif'); } #coSiteNavigation ul li.six a{ background-image:url('/res/coSiteNavigation/lvl1_6.gif'); } #coSiteNavigation ul li.seven a{ background-image:url('/res/coSiteNavigation/lvl1_7.gif');} /* LAST IN LIST? Set a to end */ #coSiteNavigation ul li.one_last a{ background-image:url('/res/coSiteNavigation/lvl1_1_end.gif');} #coSiteNavigation ul li.two_last a{ background-image:url('/res/coSiteNavigation/lvl1_2_end.gif');} #coSiteNavigation ul li.three_last a{ background-image:url('/res/coSiteNavigation/lvl1_3_end.gif');} #coSiteNavigation ul li.four_last a{ background-image:url('/res/coSiteNavigation/lvl1_4_end.gif');} #coSiteNavigation ul li.five_last a{ background-image:url('/res/coSiteNavigation/lvl1_5_end.gif');} #coSiteNavigation ul li.six_last a{ background-image:url('/res/coSiteNavigation/lvl1_6_end.gif');} #coSiteNavigation ul li.seven_last a{ background-image:url('/res/coSiteNavigation/lvl1_7_end.gif');} /* OPEN LEVEL 1 W CHILDREN ? Set a to children*/ #coSiteNavigation ul li.one a.currentOpen, #coSiteNavigation ul li.one_first a.currentOpen, #coSiteNavigation ul li.one a.open, #coSiteNavigation ul li.one_last a.open{ background-image:url('/res/coSiteNavigation/lvl1_1_kids.gif');} #coSiteNavigation ul li.two a.currentOpen, #coSiteNavigation ul li.two a.open, #coSiteNavigation ul li.two_last a.open{ background-image:url('/res/coSiteNavigation/lvl1_2_kids.gif');} #coSiteNavigation ul li.three a.currentOpen, #coSiteNavigation ul li.three a.open, #coSiteNavigation ul li.three_last a.open{background-image:url('/res/coSiteNavigation/lvl1_3_kids.gif');} #coSiteNavigation ul li.four a.currentOpen, #coSiteNavigation ul li.four a.open, #coSiteNavigation ul li.four_last a.open{ background-image:url('/res/coSiteNavigation/lvl1_4_kids.gif');} #coSiteNavigation ul li.five a.currentOpen, #coSiteNavigation ul li.five a.open, #coSiteNavigation ul li.five_last a.open{ background-image:url('/res/coSiteNavigation/lvl1_5_kids.gif'); } #coSiteNavigation ul li.six a.currentOpen, #coSiteNavigation ul li.six a.open, #coSiteNavigation ul li.six_last a.open{ background-image:url('/res/coSiteNavigation/lvl1_6_kids.gif'); } #coSiteNavigation ul li.seven a.currentOpen, #coSiteNavigation ul li.seven a.open, #coSiteNavigation ul li.seven_last a.open{ background-image:url('/res/coSiteNavigation/lvl1_7_kids.gif');} /* OPEN AND LAST ? Set a to children*/ #coSiteNavigation ul li.one_last a.currentOpen{ background-image:url('/res/coSiteNavigation/lvl1_1_kids.gif');} #coSiteNavigation ul li.two_last a.currentOpen{ background-image:url('/res/coSiteNavigation/lvl1_2_kids.gif');} #coSiteNavigation ul li.three_last a.currentOpen{ background-image:url('/res/coSiteNavigation/lvl1_3_kids.gif');} #coSiteNavigation ul li.four_last a.currentOpen{ background-image:url('/res/coSiteNavigation/lvl1_4_kids.gif');} #coSiteNavigation ul li.five_last a.currentOpen{ background-image:url('/res/coSiteNavigation/lvl1_5_kids.gif');} #coSiteNavigation ul li.six_last a.currentOpen{ background-image:url('/res/coSiteNavigation/lvl1_6_kids.gif');} #coSiteNavigation ul li.seven_last a.currentOpen{ background-image:url('/res/coSiteNavigation/lvl1_7_kids.gif');} /* LEVEL 2 - weighted heavier than previous ones by use of extra id #LeftContents */ #LeftContents #coSiteNavigation ul li li{ background-color:#912100; background-image:url('/res/coSiteNavigation/lvl2_mid.gif'); } #LeftContents #coSiteNavigation ul li li a{ background-color:transparent; background-image:url('/res/coSiteNavigation/lvl2_mid.gif');} #LeftContents #coSiteNavigation ul li li.last{ background-image:url('/res/coSiteNavigation/lvl2_1_end.gif'); } #LeftContents #coSiteNavigation ul li.one li.last a, #LeftContents #coSiteNavigation ul li.one_last li.last a { background-image:url('/res/coSiteNavigation/lvl2_1_end.gif');} #LeftContents #coSiteNavigation ul li.two li.last a, #LeftContents #coSiteNavigation ul li.two_last li.last a { background-image:url('/res/coSiteNavigation/lvl2_2_end.gif');} #LeftContents #coSiteNavigation ul li.three li.last a, #LeftContents #coSiteNavigation ul li.three_last li.last a { background-image:url('/res/coSiteNavigation/lvl2_3_end.gif');} #LeftContents #coSiteNavigation ul li.four li.last a, #LeftContents #coSiteNavigation ul li.four_last li.last a { background-image:url('/res/coSiteNavigation/lvl2_4_end.gif');} #LeftContents #coSiteNavigation ul li.five li.last a, #LeftContents #coSiteNavigation ul li.five_last li.last a { background-image:url('/res/coSiteNavigation/lvl2_5_end.gif');} #LeftContents #coSiteNavigation ul li.six li.last a, #LeftContents #coSiteNavigation ul li.six_last li.last a { background-image:url('/res/coSiteNavigation/lvl2_6_end.gif');} #LeftContents #coSiteNavigation ul li.seven li.last a, #LeftContents #coSiteNavigation ul li.seven_last li.last a { background-image:url('/res/coSiteNavigation/lvl2_7_end.gif');} /* OPEN LEVEL 2 W CHILDREN ? Set a to children*/ #Left #LeftContents #coSiteNavigation ul li li a.currentOpen, #Left #LeftContents #coSiteNavigation ul li li.open2 a{ background-image:url('/res/coSiteNavigation/lvl2_kids.gif'); } /* LEVEl 3*/ #Left #LeftContents #coSiteNavigation ul li li li{ background-color:#B72900; background-image:url('/res/coSiteNavigation/lvl3_mid.gif'); } #Left #LeftContents #coSiteNavigation ul li li li.first a, #Left #LeftContents #coSiteNavigation ul li li li.middle a{ background-color:transparent; background-image:url('/res/coSiteNavigation/lvl3_mid.gif'); } #Left #LeftContents #coSiteNavigation ul li li li.last a, #Left #LeftContents #coSiteNavigation ul li li li.single a{ background-image:url('/res/coSiteNavigation/lvl3_end.gif'); } /* OPEN LEVEL 3 W CHILDREN ? Set a to children*/ #Left #LeftContents #coSiteNavigation ul li li li a.open, #Left #LeftContents #coSiteNavigation ul li li li a.currentOpen{ background-image:url('/res/coSiteNavigation/lvl3_kids.gif'); } /* LEVEl 4*/ #Left #LeftContents #coSiteNavigation ul li li li li{ background-color:#fff; background-image:url('/res/coSiteNavigation/lvl4_mid.gif'); } #Left #LeftContents #coSiteNavigation ul li li li li a{ color:#000; } #Left #LeftContents #coSiteNavigation ul li li li li.first a, #Left #LeftContents #coSiteNavigation ul li li li li.middle a { background-image:url('/res/coSiteNavigation/lvl4_mid.gif'); } #Left #LeftContents #coSiteNavigation ul li li li li.single a, #Left #LeftContents #coSiteNavigation ul li li li li.last a { /*background-position: top left;*/ background-image:url('/res/coSiteNavigation/lvl4_end.gif'); } /* OPEN LEVEL 4 W CHILDREN ? Set a to children*/ /*#Left #LeftContents #coSiteNavigation ul li li li li a.open, #Left #LeftContents #coSiteNavigation ul li li li li a.currentOpen{ background-image:url('/res/coSiteNavigation/lvl4_kids.gif'); }*/ /* LEVEl 5*/ #Left #LeftContents #coSiteNavigation ul li li li li li{ background-color:#ccc; background-image:url('/res/coSiteNavigation/lvl5_mid.gif'); } #Left #LeftContents #coSiteNavigation ul li li li li li a{ font-size:0.95em; color:#333; padding:2px 6px 6px 8px; } #Left #LeftContents #coSiteNavigation ul li li li li li.first a, #Left #LeftContents #coSiteNavigation ul li li li li li.middle a{ background-color:transparent; background-image:url('/res/coSiteNavigation/lvl5_mid.gif'); } #Left #LeftContents #coSiteNavigation ul li li li li li.last a, #Left #LeftContents #coSiteNavigation ul li li li li li.single a{ background-image:url('/res/coSiteNavigation/lvl5_mid.gif'); } /* */ #Left #LeftContents #coSiteNavigation ul li a.current, #Left #LeftContents #coSiteNavigation ul li a.open{ color:#D2E6FF; } #Left #LeftContents #coSiteNavigation ul li li a.current, #Left #LeftContents #coSiteNavigation ul li li a.open{ color:#FFAE97; } #Left #LeftContents #coSiteNavigation ul li li li a.current, #Left #LeftContents #coSiteNavigation ul li li li a.open{ color:#FFAE97; } #Left #LeftContents #coSiteNavigation ul li li li li a.current, #Left #LeftContents #coSiteNavigation ul li li li li a.open{ color:#B72900; } #Left #LeftContents #coSiteNavigation ul li li li li li a.current, #Left #LeftContents #coSiteNavigation ul li li li li li a.open{ color:#0059D2; }