/* STYLE STRUCTURES PROPERTY FONT {font-style;font-variant;font-weight;font-size;line-height;font-family} PROPERTY BACKGROUND {background-color;background-image;background-repeat;background-attachment;background-position} */ /* BASIC STYLES */ /* BODY STYLE */ HTML {TEXT-ALIGN: center;MARGIN:0px;} BODY {TEXT-ALIGN: center;MARGIN:0px;} BODY {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 11px; BACKGROUND:#000 url('background.png'); PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000000; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif} TD {FONT-SIZE: 11px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif} SELECT {FONT-SIZE: 11px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif} FORM {FONT-SIZE: 11px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif} OPTION {FONT-SIZE: 11px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif} INPUT {FONT-SIZE: 11px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif} INPUT {BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 10px; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid;width:204px;} INPUT.radio {BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px} UL {FONT-SIZE: 11px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif} LI {FONT-SIZE: 11px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif} FORM {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px} P {PADDING-RIGHT: 0px; MARGIN-TOP: 0px; PADDING-LEFT: 0px; MARGIN-BOTTOM: 10px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px} TD {VERTICAL-ALIGN: top} DIV {BORDER-RIGHT: red 0px solid; PADDING-RIGHT: 0px; BORDER-TOP: red 0px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: red 0px solid; PADDING-TOP: 0px; BORDER-BOTTOM: red 0px solid; TEXT-ALIGN: left} IMG {BORDER-RIGHT: #ffffff 0px; PADDING-RIGHT: 0px; BORDER-TOP: #ffffff 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #ffffff 0px; PADDING-TOP: 0px; BORDER-BOTTOM: #ffffff 0px} H1 {FONT-WEIGHT: bold; MARGIN: 0px} H2 {FONT-WEIGHT: bold; MARGIN: 0px} H3 {FONT-WEIGHT: bold; MARGIN: 0px} H4 {FONT-WEIGHT: bold; MARGIN: 0px} H5 {FONT-WEIGHT: bold; MARGIN: 0px} H6 {FONT-WEIGHT: bold; MARGIN: 0px} H1 {PADDING-LEFT: 15px; FONT-WEIGHT: normal; FONT-SIZE: 25px; TEXT-TRANSFORM: uppercase; FONT-FAMILY: "Trebuchet MS",Verdana,Arial,sans-serif} H2 {FONT-WEIGHT: normal; FONT-SIZE: 16px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 3px; PADDING-TOP: 7px} H3 {PADDING-LEFT: 7px; FONT-SIZE: 11px; BACKGROUND: url(fleche_rouge.gif) no-repeat 0px 12px; PADDING-BOTTOM: 2px; PADDING-TOP: 7px;} H4 {PADDING-LEFT: 7px; FONT-SIZE: 11px; BACKGROUND: url(fleche_rouge.gif) no-repeat 0px 12px; PADDING-BOTTOM: 3px; PADDING-TOP: 7px} H5 {FONT-SIZE: 11px; PADDING-BOTTOM: 3px} H6 {FONT-SIZE: 10px} A:link {FONT-WEIGHT: bold; COLOR: #8ebd44; TEXT-DECORATION: none} A:visited {FONT-WEIGHT: bold; COLOR: #8ebd44; TEXT-DECORATION: none} A:hover {FONT-WEIGHT: bold; COLOR: #666666; TEXT-DECORATION: none} A:active {FONT-WEIGHT: bold; COLOR: #666666; TEXT-DECORATION: none} /* BASIC TABLE STYLES */ #tableau_main {MARGIN:0px;background-color:#fff;color:#555555;width:100%;margin-left:auto;margin-right:auto;padding:0px;line-height:18px;padding-left:0px;border:#999 1px solid;border-bottom:0px;} #tableau_titre {margin:0px;background-color:#8ebd44;color:#FFFFFF;margin-left:auto;margin-right:auto;font-weight:bold;padding-left:10px;} #tableau_soustitre {margin:0px;background-color:#ddd;color:#555555;margin-left:auto;margin-right:auto;border-bottom:#999 1px solid;border-top:0px;border-left:0px;padding-left:10px;} #tableau_ligne1 {margin:0px;background-color:transparent;color:#555555;margin-left:auto;margin-right:auto;border-bottom:#999 1px solid;border-top:0px;border-left:0px;padding-left:10px;} #textarea {height:80pt;color:#000000;background:#fff;font-size:10px;font-weight:normal;border-color:#000000;border-style:solid;border-width:1px;width:300px;text-align:left;font-family:verdana;} #textarea_long {height:350pt;color:#000000;background:#fff;font-size:10px;font-weight:normal;font-family:Arial;border-color:#000000;border-style:solid;border-width:1px;width:400px;text-align:left;font-family:verdana;} /* CONTAINER STYLE : MAIN DIV WHERE THE WHOLE CONTENT IS SITUATED */ #container { width:762px; PADDING:0px; margin:5px auto 5px auto; height:100%; background:#3e3e40; border:#fff 2px solid; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; } /* header STYLE */ #header { height:236px; overflow:hidden; width:762px; padding-top:25px; background:url('header.jpg') no-repeat; border-bottom:#fff 2px solid; } #header_1{display:none;} #header_2{display:none;} #header_3{display:none;} #header_4{display:none;} #intro { display:inline;position:absolute; width:230px; height:230px;display:none; } #intro_1{display:none;} #intro_2{display:none;} #intro_3{display:none;} #intro_4{display:none;} #top { position:absolute; height:33px; top:235px; float:right; background:url('topmenu_inactive.png') repeat-x; z-index:2; width:762px; overflow:hidden; padding:0px; } #top H2 {float:left;font-family:arial,verdana,sans-serif;font-size:10px;margin-top:-7px;background:url('topmenu_active.png') repeat-x 0px 7px;padding-left:10px;padding-right:10px;padding-bottom:10px;color:#fff;font-weight:bold;text-transform:uppercase;line-height:33px;margin-right:2px;} #top_1 LI {list-style:none;float:left;margin:0px;color:#666;font-size:11px;font-family:Arial,verdana;text-align:left;text-decoration:none;padding:0px;padding-left:0px;text-transform:none;line-height:25px;} #top_1 LI A {list-style:none;float:left;margin:0px;color:#fff;font-size:11px;font-family:Arial,verdana;text-align:left;text-decoration:none;text-transform:none;line-height:25px;font-weight:bold;} #top_1 LI A:hover {background:url('topmenu_active.png') top center repeat-x;} #top_1 UL{padding:0;margin:0;} #top IMG{position:relative;z-index:999;} #top_2{display:none;} #top_3{display:none;} #top_4{display:none;} #middle{display:none;} #submenu { height:18px;overflow:hidden; width:522px; padding:0px;margin:0px; } #submenu a.menu {color:#333;line-height:18px;padding:0px 0px 0px 20px;margin:0px 0px 0px 0px;text-transform:uppercase;font-size:9px;border:0;text-decoration:none;font-weight:normal;font-family:Arial,Verdana;} #submenu a.menu:hover {color:#8ebd44;line-height:18px;padding:0px 0px 0px 20px;margin:0px 0px 0px 0px;text-transform:uppercase;font-size:9px;border:0;text-decoration:none;font-weight:normal;font-family:Arial,Verdana;} #submenu a.menuactive {color:#8ebd44;line-height:18px;padding:0px 0px 0px 20px;margin:0px 0px 0px 0px;text-transform:uppercase;font-size:9px;border:0;text-decoration:none;font-weight:normal;font-family:Arial,Verdana;} #submenu a.menuactive:hover {color:#8ebd44;line-height:18px;padding:0px 0px 0px 20px;margin:0px 0px 0px 0px;text-transform:uppercase;font-size:9px;border:0;text-decoration:none;font-weight:normal;font-family:Arial,Verdana;} #main { padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; background:#e4e2dc url('content_bg.png') repeat-y; width:762px; } #main_1 { float:right; font-size:11px; text-align:left; width:230px; text-align:left; margin:0px 0px 0px 0px; padding:0px; } #main_1 H3 {display:block;color:#8ebd44;background:url('leftmenu_title.png') repeat-y;width:233px;line-height:20px;padding:0px 0px 0px 0px;margin:5px 0px 10px 0px;font-size:15px;border:0;font-family:"Trebuchet MS",Arial,Verdana;} #main_1 a.menu {display:block;color:#fff;width:233px;line-height:20px;padding:0px 0px 0px 5px;margin:0px 0px 10px 0px;text-transform:uppercase;font-size:9px;border:0;margin-bottom:5px;text-decoration:none;} #main_1 a.menu:hover {display:block;color:#8ebd44;width:233px;line-height:20px;padding:0px 0px 0px 5px;margin:0px 0px 10px 0px;text-transform:uppercase;font-size:9px;border:0;margin-bottom:5px;text-decoration:none;} #main_1 a.menuactive {display:block;color:#8ebd44;width:233px;line-height:20px;padding:0px 0px 0px 5px;margin:0px 0px 10px 0px;text-transform:uppercase;font-size:9px;border:0;margin-bottom:5px;text-decoration:none;} #main_1 a.menuactive:hover {display:block;color:#8ebd44;width:233px;line-height:20px;padding:0px 0px 0px 5px;margin:0px 0px 10px 0px;text-transform:uppercase;font-size:9px;border:0;margin-bottom:5px;text-decoration:none;} #main_1 a {color:#8ebd44;font-size:11px;text-decoration:none;} #main_1 a:hover {color:#fff;background-color:transparent;text-decoration:none;font-size:11px;} #main_1 h2 {display:block;color:#fff;width:233px;line-height:20px;padding:0px 0px 0px 5px;margin:0px;text-transform:uppercase;font-size:9px;font-weight:bold;margin-bottom:0px;} #main_1 p {display:block;color:#fff;width:225px;padding:0px 0px 0px 5px;background-color:transparent;font-size:11px} #main_2 {float:left;vertical-align:middle;background:transparent url('');color:#333;width:522px;margin-top:0px;} #main_2 H3 {display:block;color:#fff;background:url('main_h3.png') no-repeat bottom left;line-height:20px;padding:0px 0px 0px 40px;margin:0px 0px 3px 0px;text-transform:uppercase;font-size:9px;border-bottom:0px;} #main_2 H4 {display:block;color:#8ebd44;line-height:20px;padding:0px 0px 0px 10px;margin:3px 0px 3px 0px;text-transform:uppercase;font-size:11px;border:0;} #main_2 H3 img {float:left;padding:0px;margin:0px 20px 0px 0px;} #main_2 div{float:left;text-align:center;padding-bottom:15px;} #main_2 img {margin-left:2px;display:inline;border:0px;} #main_2 p {padding-left:10px;margin-top:10px;} #main_2 H2 {display:block;color:#333;line-height:20px;padding:10px 0px 0px 10px;margin:0px 0px 3px 0px;font-size:15px;border-bottom:0px;font-family:"Trebuchet MS",Arial,Verdana;text-align:left;font-weight:bold;} #main_2 a.normal {color:#333;font-weight:normal;} #main_2 a.normal:hover {color:#8ebd44;font-weight:normal;} #main_3{clear:both;display:none;} #main_4{clear:both;} #main_4 IMG{display:none;} #mainnews {display:none;visibility:hidden;} #mainintro {display:none;visibility:hidden;} #main_2 a.processus {float:left;display:inline;background:transparent;line-height:20px;text-decoration:none;border-bottom:#bbb 0px solid;width:130px;text-align:center;} #main_2 a.processus:hover {float:left;display:inline;background:#8ebd44;color:#fff;line-height:20px;text-decoration:none;border-bottom:#bbb 0px solid;width:130px;text-align:center;} #main_2 H2.processus {float:left;display:inline;background:#8ebd44;color:#fff;line-height:20px;text-decoration:none;border-bottom:#bbb 0px solid;width:130px;text-align:center;font-family:Verdana,Arial;font-size:11px;font-weight:bold;padding:0;} #main_2 H2.processus2 {float:left;display:inline;background:transparent;color:#bbb;line-height:20px;text-decoration:none;border-bottom:#bbb 0px solid;width:130px;text-align:center;font-family:Verdana,Arial;font-size:11px;font-weight:bold;padding:0;} #maindescription {background:#f7f0cf ;padding:10px 40px 10px 0px;margin:0px 0px 2px 0px;font-family:arial;font-size:11px;font-weight:lighter;color:#000000;text-align:left;height:190px;} #maindescription img {margin:0px 0px 0px 0px;height:150px;float:right;padding:0px;} #maindescription P {padding-left:10px;width:310px;} #maindescription A {color:#326600;margin-left:10px;} #maindescription A:hover{color:#000000;} #mainproduct {background:#ddd;padding:10px 0px 0px 0px;margin:0px;font-weight:normal;color:#000000;text-align:left;border:0px;width:650px;clear:none;display:block;} #mainproduct-left {width:370px;display:inline;text-align:left;} #mainproduct-right{width:219px;display:inline;margin-left:32px;text-align:left} #mainproduct img {margin:0px 0px 0px 0px;display:inline;text-align:left;} #mainproduct P {margin:0px 0px 10px 10px;font-size:11px;color:#000000;font-weight:normal;text-align:left;} #mainproduct h5 {text-align:left;margin-left:10px;} #rightnavig {float:left;vertical-align:middle;background:transparent url('');color:#555555;width:160px;margin-top:20px;margin-left:18px;z-index:-20;display:none;visibility:hidden;} dt {text-align:left;margin-top:9px;width:150px;margin-left:0px;margin-left:10px;_margin-left:5px;float:left;clear:left;} dd {text-align:left;margin-top:9px;width:300px;margin-left:0px;float:left} input.npa {width:30px;} input.loc {width:165px;margin-left:5px;} input.cancel {display:inline;color:#FFFFFF;background:#555555;margin-left:20px;border:#fff 1px solid;} input.checkbox{vertical-align:absmiddle;border:0;} input.submit {display:inline;color:#FFFFFF;background:url('button_green.png') repeat-x;border:0;} input.submit:hover {display:inline;color:#FFFFFF;background:url('button.png') repeat-x;border:0;} form {text-align:left;margin:0;padding:0;} H4 {margin-left:10px;font-size:11px;font-weight:bold;padding:0;margin-bottom:5px;border-bottom:#AAAAAA 0px solid;width:350px;color:#555555} dl{margin:0px;padding:0px;} #footer {repeat 0px 0px;color:#fff;text-align:center;margin:0px auto 0px auto;} #footer_1{display:none;} #footer_2{display:none;} #footer_3{display:none;} P.light {font-weight:900;font-size:10px;font-family:Verdana,sans-serif;COLOR:#000000;padding:5px 0px 10px 0px;margin:10px 0px 0px 0px} FIELDSET {text-align:left;background:transparent;border:0;padding:10px;display:block;} input.light {float:left;color:#fff;font-weight:normal;margin-left:0px;text-align:center;width:120px;background-color:#009fdd;font-family:verdana;font-size:10px;font-weight:500;margin-top:10px;} input.lightreset {float:left;display:inline;color:#fff;font-weight:normal;margin-left:20px;text-align:center;width:120px;background-color:#ca061a;font-family:verdana;font-size:10px;font-weight:500;margin-top:10px;} /*style for slideshow*/ #myGallery, #myGallerySet, #flickrGallery { width: 590px; height: 300px; z-index:5; border: 0px solid #555; margin:0px 0px 10px 0px; clear:both; } .jdGallery a { outline:0; } #flickrGallery { width: 550px; height: 300px; } #myGallery img.thumbnail, #myGallerySet img.thumbnail { } .jdGallery { overflow: hidden; position: relative; } .jdGallery img { border: 0; margin: 0; } .jdGallery .slideElement { width: 100%; height: 100%; background-color: #000; background-repeat: no-repeat; background-position: center center; background-image: url('img/loading-bar-black.gif'); } .jdGallery .loadingElement { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: #000; background-repeat: no-repeat; background-position: center center; background-image: url('img/loading-bar-black.gif'); } .jdGallery .slideInfoZone { position: absolute; z-index: 10; width: 100%; margin: 0px; left: 0; bottom: 0; height: 60px; background: #000; color: #fff; text-indent: 0; overflow: hidden; } * html .jdGallery .slideInfoZone { bottom: -1px; } .jdGallery .slideInfoZone h2 { padding: 0; font-size: 15px; margin: 2px 5px 0px 10px !important; font-weight: bold; font-family:"Trebuchet MS",verdana; color: #be0818; } .jdGallery .slideInfoZone p { padding: 0; font-size: 10px; margin: 2px 5px 0px 10px !important; color: #fff; } .jdGallery div.carouselContainer { position: absolute; height: 135px; width: 100%; z-index: 10; margin: 0px; left: 0; top: 0; } .jdGallery a.carouselBtn { position: absolute; bottom: 0; right: 30px; height: 20px; width:100px; /*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/ text-align: center; padding:0px !important; font-size: 18px; background: #000; color: #fff; cursor: pointer; display:none; } .jdGallery .carousel { position: absolute; width: 100%; margin: 0px; left: 0; top: 0; height: 115px; background: #000; color: #fff; text-indent: 0; overflow: hidden; font-size:10px; } .jdExtCarousel { overflow: hidden; position: relative; } .jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper { position: absolute; width: 100%; height: 78px; top: 10px; left: 0; overflow: hidden; } .jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner { position: relative; } .jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail { cursor: pointer; background: #000; background-position: center center; float: left; border: solid 1px #fff; } .jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail { margin-bottom: 10px; } .jdGallery .carousel .label, .jdExtCarousel .label { font-size: 13px; position: absolute; bottom: 5px; left: 10px; padding: 0; margin: 0; } .jdGallery .carousel .wallButton, .jdExtCarousel .wallButton { font-size: 10px; position: absolute; bottom: 5px; right: 10px; padding: 1px 2px; margin: 0; background: #222; border: 1px solid #888; cursor: pointer; } .jdGallery .carousel .label .number, .jdExtCarousel .label .number { color: #b5b5b5; } .jdGallery a { font-size: 100%; text-decoration: none; color: inherit; } .jdGallery a.right, .jdGallery a.left { position: absolute; height: 99%; width: 25%; cursor: pointer; z-index:10; filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity: 1.0; opacity: 1.0; } * html .jdGallery a.right, * html .jdGallery a.left { filter:alpha(opacity=100); } .jdGallery a.right:hover, .jdGallery a.left:hover { filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity: 1.0; opacity: 1.0; } .jdGallery a.left { left: 0; top: 0; background: url('fleche1.png') no-repeat center left; } * html .jdGallery a.left { background: url('leche1.gif') no-repeat center left; } .jdGallery a.right { right: 0; top: 0; background: url('fleche2.png') no-repeat center right; } * html .jdGallery a.right { background: url('fleche2.gif') no-repeat center right; } .jdGallery a.open { left: 0; top: 0; width: 100%; height: 100%; } .withArrows a.open { position: absolute; top: 0; left: 25%; height: 99%; width: 50%; cursor: pointer; z-index: 10; background: none; -moz-opacity:1.0; -khtml-opacity: 1.0; opacity: 1.0; } .withArrows a.open:hover { background: url('open.png') no-repeat center center; } * html .withArrows a.open:hover { background: url('open.gif') no-repeat center center; filter:alpha(opacity=100); } /* Gallery Sets */ .jdGallery a.gallerySelectorBtn { z-index: 15; position: absolute; top: 0; left: 30px; height: 20px; /*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/ text-align: center; padding: 0 10px; font-size: 13px; background: #333; color: #fff; cursor: pointer; opacity: 1.0; -moz-opacity: 1.0; -khtml-opacity: 1.0; filter:alpha(opacity=100); } .jdGallery .gallerySelector { z-index: 20; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000; } .jdGallery .gallerySelector h2 { margin: 0; padding: 10px 20px 10px 20px; font-size: 20px; line-height: 30px; color: #fff; } .jdGallery .gallerySelector .gallerySelectorWrapper { overflow: hidden; } .jdGallery .gallerySelector .gallerySelectorInner div.galleryButton { margin-left: 10px; margin-top: 10px; border: 1px solid #888; padding: 5px; height: 40px; color: #fff; cursor: pointer; float: left; } .jdGallery .gallerySelector .gallerySelectorInner div.hover { background: #333; } .jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview { background: #000; background-position: center center; float: left; border: none; width: 40px; height: 40px; margin-right: 5px; } .jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3 { margin: 0; padding: 0; font-size: 12px; font-weight: normal; } .jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info { margin: 0; padding: 0; font-size: 12px; font-weight: normal; color: #aaa; } .tab-wrapper { padding: 1em 1.5em; margin: 0; border: 1px solid #ddd; clear: both; background:#fff; } .tab-menu { margin: 0; padding: 0; list-style: none; overflow: auto; } .tab-menu li { margin: 0; padding: 2px 10px 2px 10px; float: left; line-height: 2em; margin-right:5px; background:#d3d4d5; color:#fff; } .tab-menu li.tab-selected { margin: 0; padding: 2px 10px 2px 10px; float: left; line-height: 2em; margin-right:5px; background:#990000; } .tab-menu li a { padding: 0 .5em; font-weight: bold; color:#000 !important; } .tab-menu li a:hover, .tab-menu li a:focus { /* your effect here */ } .tab-menu li.tab-selected a { text-decoration: none; color: inherit; color:#fff !important; /* your effect here */ } /* all menu links */ #nav a, #subMenusContainer a{ text-decoration:none; display:block; padding:10px 10px 0px 10px; background-color:transparent; font-weight:normal; } /* Just main menu links --[for non-javascript users this applies to submenu links as well]*/ #nav a{ margin:0; float:left; padding:5px 20px 0px 20px; height:28px; } /* Just sub menu links */ #subMenusContainer a, #nav li li a{ text-align:left; color:#fff !important; padding:5px 10px 5px 10px; } /* All menu links on hover or focus */ #nav a:hover, #nav a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, #nav a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused{ background-color:#000 ; padding:5px 10px 5px 10px; } /* sub menu links on hover or focus */ #subMenusContainer a:hover, #subMenusContainer a:focus { background:transparent url('topmenu_active.png') repeat-x top left; color:#fff !important; padding:5px 10px 5px 10px; } #nav li a:hover, #nav li a:focus, #nav a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused { background-color:transparent ; padding:5px 20px 0px 20px; } /* Parent Sub Menu Links ---[javascript users only]*/ .subMenuParentBtn{ background: url(../img/arrow_righta.gif) right center no-repeat; } /* Parent Sub Menu Links on hover or focus ---[javascript users only]*/ .subMenuParentBtnFocused{ background: url(../img/arrow_right_overa.gif) right center no-repeat; } /* Parent Main Menu Links ---[javascript users only]*/ .mainMenuParentBtn{ background: url(../img/arrow_downa.gif) right center no-repeat; } /* Parent Main Menu Links on hover or focus ---[javascript users only]*/ .mainMenuParentBtnFocused{ background: url(../img/arrow_down_overa.gif) right center no-repeat; } /* ----[ OLs ULs, LIs, and DIVs ]----*/ /* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */ .smOW{ display:none; position: absolute; overflow:hidden; /*the 2px left & right padding lets you have a 1px border on the ul or ol inside since overflow is set to hidden*/ padding:0 2px; margin:0 0 0 -2px; } /* All ULs and OLs */ #nav, #nav ul, #nav ol, #subMenusContainer ul, #subMenusContainer ol { padding: 0; margin: 0; list-style: none; line-height: 1em; } /* All submenu OLs and ULs */ #nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol { /*border around submenu goes here*/ background:#222; border:0px solid #666; color:#fff; left:0; margin-top:5px; width:150px; } /* List items in main menu --[for non-javascript users this applies to submenus as well] */ #nav li { /*great place to use a background image as a divider*/ display:block; list-style:none; position:relative; float:left; } #subMenusContainer li{ list-style: none; } /* main menu ul or ol elment */ #nav{ display:block; position: absolute; list-style:none; margin: 0 0 0; z-index:5; text-align: center; display:block; } #subMenusContainer{ display:block; position:absolute; top:0; left:0; width:100%; height:0; overflow:visible; z-index:1000000000;} /* --------------------------[ The below is just for non-javscript users ]--------------------------*/ #nav li li{ float:none; } #nav li li a{ /* Just submenu links*/ position:relative; float:none; } #nav li ul { /* second-level lists */ position: absolute; width: 10em; margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ margin-top:2.2em; } /* third-and-above-level lists */ #nav li ul ul { margin: -1em 0 0 -1000em; } #nav li:hover ul ul { margin-left: -1000em; } /* lists nested under hovered list items */ #nav li:hover ul{ margin-left: 0; } #nav li li:hover ul { margin-left: 10em; margin-top:-2.5em;} /* extra positioning rules for limited noscript keyboard accessibility */ #nav li a:focus + ul { margin-left: 0; margin-top:2.2em; } #nav li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;} #nav li li a:focus {left:0; margin-left:1000em; width:10em; margin-top:0;} #nav li li li a:focus {left:0; margin-left: 2010em; width: 10em; margin-top:-1em;} #nav li:hover a:focus{ margin-left: 0; } #nav li li:hover a:focus + ul { margin-left: 10em; }