/* @override http://jeff.creativedepartment.com/sant/assets/css/menu.css */ /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/simple_vertical.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ /* MENUS BEGIN */ #menu_container {margin:0px; position:relative; /* width:735px; */ height:28px; z-index:100;} #pmenu, #pmenu ul {padding:0px; margin:0px; list-style-type: none;} /* Set up the link size, color and borders */ #pmenu a, #pmenu a:visited {display:block; padding-left: 18px; padding-right: 18px; font-size:1.1em; font-weight: bold; color:#545454; height:28px; text-decoration:none; text-transform: uppercase;} /* Set up the sub level borders */ #pmenu li ul li a, #pmenu li ul li a:visited {border: none; height: 100%; width: 100px; line-height: .9em; padding-top: 5px; padding-bottom: 5px; font-size: 1.0em; text-transform: capitalize;} #pmenu li a.enclose, #pmenu li a.enclose:visited {border:none;} #pmenu li {float:left; background: transparent url(../images/btnRight.png) right bottom no-repeat; margin-right: 2px;} #pmenu li a {float:left; background: transparent url(../images/btnLeft.png) left bottom no-repeat; line-height: 33px;} /* Hover/Active State For Non-IE browsers and IE7 */ #pmenu li.active, #pmenu li:hover {position:relative; background: transparent url(../images/btnHomeRight.png) no-repeat top right;} #pmenu li.active a, #pmenu li:hover a {background: transparent url(../images/btnHomeLeft.png) left bottom no-repeat; color:#0c73a3; margin-left: 0px; line-height: 29px;} #pmenu li:hover ul li { background-image: none; background-color: #f4f4f4; border-left: 1px solid #898989; border-bottom: 1px solid #898989; border-right: 1px solid #898989; position: relative;} #pmenu li:hover ul li a {background-image: none; color:#0c73a3; line-height: 13px;} #pmenu li:hover ul li:hover {background-color: #9b9b9b;} #pmenu li:hover ul li:hover a {color: #f4f4f4;} /* Sant Suite */ #pmenu li#btnSant.active, #pmenu li#btnSant:hover {background: transparent url(../images/btnSantSuiteRight.png) no-repeat top right;} #pmenu li#btnSant.active a, #pmenu li#btnSant:hover a {background: transparent url(../images/btnSantSuiteLeft.png) left bottom no-repeat; color:#b77000;} #pmenu li#btnSant:hover ul li { background-image: none; background-color: #f4f4f4; border-left: 1px solid #898989; border-bottom: 1px solid #898989; border-right: 1px solid #898989; position: relative;} #pmenu li#btnSant:hover ul li a {background-image: none; color:#b77000;} #pmenu li#btnSant ul li.active, #pmenu li#btnSant:hover ul li:hover {background-color: #9b9b9b;} #pmenu li#btnSant ul li.active a, #pmenu li#btnSant:hover ul li:hover a {color: #f4f4f4;} /* Services */ #pmenu li#btnServices.active, #pmenu li#btnServices:hover {background: transparent url(../images/btnServicesRight.png) no-repeat top right;} #pmenu li#btnServices.active a, #pmenu li#btnServices:hover a {background: transparent url(../images/btnServicesLeft.png) left bottom no-repeat; color: #1b5e00;} #pmenu li#btnServices:hover ul li { background-image: none; background-color: #f4f4f4; border-left: 1px solid #898989; border-bottom: 1px solid #898989; border-right: 1px solid #898989; position: relative;} #pmenu li#btnServices:hover ul li a {background-image: none; color: #1b5e00;} #pmenu li#btnServices ul li.active, #pmenu li#btnServices:hover ul li:hover {background-color: #9b9b9b;} #pmenu li#btnServices ul li.active a, #pmenu li#btnServices:hover ul li:hover a {color: #f4f4f4;} /* Best Practices */ #pmenu li#btnBest.active, #pmenu li#btnBest:hover {background: transparent url(../images/btnBestRight.png) no-repeat top right;} #pmenu li#btnBest.active a, #pmenu li#btnBest:hover a {background: transparent url(../images/btnBestLeft.png) left bottom no-repeat; color:#096d6b;} #pmenu li#btnBest:hover ul li { background-image: none; background-color: #f4f4f4; border-left: 1px solid #898989; border-bottom: 1px solid #898989; border-right: 1px solid #898989; position: relative;} #pmenu li#btnBest:hover ul li a {background-image: none; color:#096d6b;} #pmenu li#btnBest ul li.active, #pmenu li#btnBest:hover ul li:hover {background-color: #9b9b9b;} #pmenu li#btnBest ul li.active a, #pmenu li#btnBest:hover ul li:hover a {color: #f4f4f4;} /* Customer Service */ #pmenu li#btnCustomer.active, #pmenu li#btnCustomer:hover {background: transparent url(../images/btnCustomerRight.png) no-repeat top right;} #pmenu li#btnCustomer.active a, #pmenu li#btnCustomer:hover a {background: transparent url(../images/btnCustomerLeft.png) left bottom no-repeat; color: #780c7c;} #pmenu li#btnCustomer:hover ul li { background-image: none; background-color: #f4f4f4; border-left: 1px solid #898989; border-bottom: 1px solid #898989; border-right: 1px solid #898989; position: relative;} #pmenu li#btnCustomer:hover ul li a {background-image: none; color: #780c7c;} #pmenu li#btnCustomer ul li.active a, #pmenu li#btnCustomer:hover ul li:hover {background-color: #9b9b9b;} #pmenu li#btnCustomer ul li.active a, #pmenu li#btnCustomer:hover ul li:hover a {color: #f4f4f4;} /* About */ #pmenu li#btnAbout ul li.active a, #pmenu li#btnAbout:hover ul li:hover {background-color: #9b9b9b;} #pmenu li#btnAbout ul li.active a, #pmenu li#btnAbout:hover ul li:hover a {color: #f4f4f4;} /* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */ #pmenu li ul {display:none;} /* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */ #pmenu li:hover ul {display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px;} /* Position the first sub level beneath the top level liinks */ #pmenu li:hover ul {left:-30px; top:18px;} /* get rid of the table */ #pmenu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;} /* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */ * html #pmenu li a:hover {position:relative; color:#0c73a3; background: transparent url(../images/btnHomeRight.png) no-repeat top right;} * html #pmenu li#btnSant a:hover {color:#b77000; background: transparent url(../images/btnSantSuiteRight.png) right bottom no-repeat;} * html #pmenu li#btnServices a:hover {color: #1b5e00; background: transparent url(../images/btnServicesRight.png) right bottom no-repeat;} * html #pmenu li#btnBest a:hover {color:#096d6b; background: transparent url(../images/btnBestRight.png) right bottom no-repeat;} * html #pmenu li#btnCustomer a:hover {color: #780c7c; background: transparent url(../images/btnCustomerRight.png) right bottom no-repeat;} * html #pmeun li ul li a.active {background-image: none;} * html #pmenu li.active a {position:relative; bottom: 1px;} * html #pmenu li#btnAbout ul li a {color:#0c73a3; background-image: none;} * html #pmenu li#btnSant ul li a {color:#b77000; background-image: none;} * html #pmenu li#btnServices ul li a {color:#1b5e00; background-image: none;} * html #pmenu li#btnBest ul li a {color:#096d6b; background-image: none;} * html #pmenu li#btnCustomer ul li a {color:#780c7c; background-image: none;} * html #pmenu li#btnAbout ul li a:hover, * html #pmenu li#btnSant ul li a:hover, * html #pmenu li#btnServices ul li a:hover, * html #pmenu li#btnBest ul li a:hover, * html #pmenu li#btnCustomer ul li a:hover {background-color: #9b9b9b; color: #f4f4f4; background-image: none;} * html #pmenu li ul li {font-size: 0.9em; background-image: none !important; background-color: #f4f4f4; border-left: 1px solid #898989; border-bottom: 1px solid #898989; border-right: 1px solid #898989; position: relative;} * html #pmenu li ul li a {width: 110px !important; display: block; background-image: none !important; padding: none; } * html #pmenu li ul li a:hover {background: none;} * html #pmenu li ul li a {background-image: none;} /* For accessibility of the top level menu when tabbing */ /*#pmenu li a:active, #pmenu li a:focus {background:#dfd7ca; color:#c00;}*/ /* Set up the pointers for the sub level indication */ #pmenu li.fly {} #pmenu li.drop {} /* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */ /* change the drop down levels from display:none; to visibility:hidden; */ * html #pmenu li ul {padding-left: 30px; padding-bottom: 30px; padding-right: 30px; padding-top: 13px; visibility:hidden; display:block; position:absolute; background:transparent url(transparent.gif);} /* keep the third level+ hidden when you hover on first level link */ #pmenu li a:hover ul ul{visibility:hidden;} /* keep the fourth level+ hidden when you hover on second level link */ #pmenu li a:hover ul a:hover ul ul{visibility:hidden;} /* keep the fifth level hidden when you hover on third level link */ #pmenu li a:hover ul a:hover ul a:hover ul ul{visibility:hidden;} /* keep the sixth level hidden when you hover on fourth level link */ #pmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul {visibility:hidden;} /* make the second level visible when hover on first level link and position it */ #pmenu li a:hover ul {visibility:visible; left:-30px; top:14px; left:-31px; top:15px;} /* make the third level visible when you hover over second level link and position it and all further levels */ #pmenu li a:hover ul a:hover ul{visibility:visible; top:-11px; left:80px;} /* make the fourth level visible when you hover over third level link */ #pmenu li a:hover ul a:hover ul a:hover ul {visibility:visible;} /* make the fifth level visible when you hover over fourth level link */ #pmenu li a:hover ul a:hover ul a:hover ul a:hover ul {visibility:visible;} /* make the sixth level visible when you hover over fifth level link */ #pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul {visibility:visible;} /* If you can see the pattern in the above IE5.5 and IE6 style then you can add as many sub levels as you like */