/* Website: Name: Description: inSite-powered website, designed and hosted by Artemis Inc. Version: Author: Author URI: http://www.artemisit.com Comments: This stylesheet contains all the basic styles used by inSite. Also notable is the combination of two css methodologies, tabbed(rounded) buttons and drop-down navigation. This stylesheet is best viewed without word wrapping. */ /*** Navigation - Uses an unordered list and styles them as buttons This nav supports rounded buttons and drop-down menus. ***/ /* Main Nav */ #navcontainer1 { position: relative; z-index: 999; width: 740px; height: 32px; padding: 0; margin: 8px 0 0 9px; padding-top: 5px; padding-left: 5px; background: url('images/nav_bg.png') no-repeat 0px 0; float: left; } #nav1 { float: left; font:11px Lucida Sans Unicode, Lucida Grande, Arial, sans-serif; line-height:normal; font-style: normal; letter-spacing: 0px; } #nav1 ul { float: left; margin:0; padding:0; list-style:none; } #nav1 li { float: left; position: relative; margin:0px; padding:0; } #nav1 a { overflow: hidden; float: left; margin:0; padding:0 0 0 11px; background: url('/images/nav_endcap_grey.gif') no-repeat 100% 6px; text-decoration:none; color: #000; } #nav1 a span { float:left; display:block; padding:10px 11px 11px 0px; color: #000; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #nav1 a span {float:none;} /* End IE5-Mac hack */ #nav1 a:hover span, #nav1 li#trainersToggle a:hover span {color: #fff;} #nav1 a:hover { background: #808285; color: #848689; } #nav1 li#trainersToggle a { background-image: none; } #nav1 li#trainersToggle a span { color: #F03B42; } /* Dropdowns - http://www.htmldog.com/articles/suckerfish/dropdowns/ */ /* Applies to all sub-levels */ #nav_dropdown1, #nav_dropdown1 ul { float: right; height: 30px; padding: 0; margin: 0; list-style: none; line-height: 1; } #nav_dropdown1 ul a { display: block; padding: 0; background: none; font-weight: bold; font-size: 11px; } /* 1st Level List Items */ #nav_dropdown1 li { float: left; } /* 2nd Level List - UL Sets a width on the UL element - Without it, list goes horizontal Hides the UL from view using left */ /* Using left instead of display to hide menus because display: none isn't read by screen readers */ #nav_dropdown1 li ul { position: absolute; left: -999em; width: 234px; height: auto; background: url('images/nav_tophalf.png') no-repeat; } #nav_dropdown1 li ul span { font-size: 0; line-height: 0px; display: block; float: left; background: #fff; height: 7px; width: 7px; padding: 0; margin: 5px 5px 0 0px; } #nav_dropdown1 li ul img { margin: 10px 0 0 0; } #nav_dropdown1 li ul h3 { color: #FF3333; text-decoration: underline; font-weight: normal; font-size: 17px; margin: 20px 0 5px 28px;} #nav_dropdown1 li ul p { display: block; color: #fff; padding: 0; line-height: 12px; margin: 10px 10px 0px 13px; font-size: 11px; } #nav_dropdown1 li ul#pipersport p { margin: 10px 13px 0px 20px; } #nav_dropdown1 li ul#pipersport p.subnav { margin: 5px 0 0px 40px; } #nav_dropdown1 li ul p.subnav { display: block; line-height: 16px; margin: 5px 0 0px 40px; height: auto; } #nav_dropdown1 li ul p.subnav a { border: none; margin: 0; padding: 0; text-decoration: none; } #nav_dropdown1 li ul p.subnav a:hover { border: none; margin: 0; padding: 0; text-decoration: underline; } /* Top half of tab */ #nav_dropdown1 li ul#meridian { background-position: 0 0; } #nav_dropdown1 li ul#mirage { background-position: -235px 0px;} #nav_dropdown1 li ul#matrix { background-position: -470px 0;} #nav_dropdown1 li ul#seneca { background-position: -705px 0;} #nav_dropdown1 li ul#seminole { background-position: -940px 0;} #nav_dropdown1 li ul#arrow { background-position: -1175px 0;} #nav_dropdown1 li ul#warrior { background-position: -1410px 0;} #nav_dropdown1 li ul#archer { background-position: -1645px 0;} #nav_dropdown1 li ul#pipersport { background-position: -1880px 0;} #nav_dropdown1 li ul#piperjet { background-position: -2115px 0; } /* Special styles for Trainers */ #nav_dropdown1 li ul#trainers { background: url('images/nav_tophalf_trainers.gif') no-repeat; padding-top: 9px;} #nav_dropdown1 li ul#trainers p.subnav { display: block; line-height: 18px; height: 17px; margin: 0px 0 0px 40px; } #nav_dropdown1 li ul#trainers h3.trainers { font-size: 1.1em; font-style: normal; margin: 5px 0 3px 28px; color: #fff; text-decoration: none;} #nav_dropdown1 li ul#trainers img { margin: 24px 0 0 0;} /* 2nd Level List elements - LI */ #nav_dropdown1 ul li { clear:left; } /* 2nd Level List elements - A */ #nav_dropdown1 ul li a { color: #fff; margin: 0; padding: 0; font-size: 11px; font-weight: normal; text-decoration: underline;} #nav_dropdown1 ul li a:hover { color: #fff; background: none; padding: 0;} /* 3rd Level List elements - UL - Sets position of the UL element */ #nav_dropdown1 li ul ul { margin: 30px 0 0 150px; } /* 3rd Level List elements - A */ #nav_dropdown1 ul ul li a { } #nav_dropdown1 ul ul li a:hover { color: #fff; } /* This bit moves list items off the page using negative left margin */ #nav_dropdown1 li:hover ul ul, #nav_dropdown1 li.sfhover ul ul { left: -999em; } /* This brings the list items back on screen and into view upon hover Note usage of .sfhover, a class required and called by the javascript function that handles :hover attributes so that IE will properly :hover on a LI element */ /* lists nested under hovered list items */ #nav_dropdown1 li:hover ul, #nav_dropdown1 li li:hover ul, #nav_dropdown1 li.sfhover ul, #nav_dropdown1 li li.sfhover ul { left: 0px; top: 32px; z-index: 9999; } #nav_dropdown1 li li:hover ul, #nav_dropdown1 li li.sfhover ul { left: 0px; top: 0px; } /** backwards bubble **/ #nav_dropdown1 li:hover ul#pipersport, #nav_dropdown1 li.sfhover ul#pipersport { left: -154px; top: 32px; z-index: 9999; } /* Footer Nav */ #navcontainer2 { width: 100%; height: 54px; padding: 0; margin: 25px 0 0 0; padding-top: 0px; padding-left: 165px; float: left; width: 100%; } #nav2 { float: left; font: 11px Lucida Sans Unicode, Lucida Grande, Arial, sans-serif; line-height:normal; font-style: normal; letter-spacing: 0px; } #nav2 ul { float: left; margin:0; padding:0; list-style:none;} #nav2 li {float: left; margin:0px; padding:0; } #nav2 a { float: left; margin:0; padding: 0 0 0 7px; margin-left: 0px; text-decoration:none; border-right: 1px solid #ff0000; } #nav2 a span { float:left; display:block; padding: 2px 7px 2px 0px; color: #fff;} /* Commented Backslash Hack hides rule from IE5-Mac \*/ #nav2 a span {float:none;} /* End IE5-Mac hack */ #nav2 a:hover span { color: #fff; } #nav2 #current a { background-position: left bottom; border-width:0; } #nav2 #current a span { background-position: 100% 100%; padding:8px 8px 8px 5px; color: #848689; } #nav2 a:hover { background-position: 0% 71%; } #nav2 a:hover span { background-position: 100% 71%; } /* Top Right Nav (Non-Editable by InSite) */ #google_translate_element { float: right; margin: 11px 26px 0 13px; height: 22px; } #google_translate_element select { font-size: 1.0em; } #nav3 { float: right; margin: 16px 0px 0 0;} ul#nav_dropdown3 { display: block; float: left; white-space: nowrap; width: auto; padding: 0; margin: 0; } #nav_dropdown3 li { font-size: 11px; font-weight: bold; display: block; float: left; list-style-type: none; } #nav_dropdown3 a:link, #nav_dropdown3 a:visited { color: #000; text-decoration: none; padding-left: 7px; padding-right: 7px; border-right: 1px solid #000; } #nav_dropdown3 a:hover { color: #fff; text-decoration: none; } /* Company Nav */ #navcontainer4 { float:left; width: 550px; height: 29px; padding: 0; margin: 0; padding-top: 13px; padding-left: 15px; } #nav4 { float: left; font: 11px Lucida Sans Unicode, Lucida Grande, Arial, sans-serif; line-height:normal; font-style: normal; letter-spacing: 0px; } #nav4 ul { float: left; margin: 0; padding: 0; list-style:none; } #nav4 li { float: left; margin: 0; padding: 0; } #nav4 a { float: left; margin:0; padding: 0 0 2px 10px; margin-left: 0px; text-decoration:none; } #nav4 a span { float:left; display:block; background: url('/images/nav_endcap.gif') no-repeat 100% 3px; padding: 0px 10px 0px 0px; color: #fff; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #nav4 a span {float:none;} /* End IE5-Mac hack */ #nav4 a:hover { } #nav4 a:hover span { color: #000;} #navcontainer4b { float:left; width: 550px; height: 20px; padding: 3px 0 0 15px; margin: 0; } #nav4b { float: left; font: 11px Lucida Sans Unicode, Lucida Grande, Arial, sans-serif; font-style: normal; letter-spacing: 0px; margin:0; padding:0; list-style:none;} #nav4b li { float: left; margin: 0px; padding:0; } #nav4b a { float: left; margin: 0; padding: 0px 0 2px 10px; text-decoration:none; } #nav4b a span { float:left; display:block; padding: 0px 10px 0px 0px; color: #0089d4; background: url('/images/nav_endcap.gif') no-repeat 100% 3px;} /* Commented Backslash Hack hides rule from IE5-Mac \*/ #nav4b a span {float:none;} /* End IE5-Mac hack */ #nav4b a:hover { } #nav4b a:hover span { color: #000;} /* Meridian Page Nav */ /* Main Nav Container */ #navcontainer5 { clear: left; width: 100%; height: 23px; padding: 0; margin: 0 0 0 0; background: #424A53; } #nav5 { margin: 0 0 0 145px; font:11px Lucida Sans Unicode, Lucida Grande, Arial, sans-serif; line-height:normal; font-style: normal; letter-spacing: 0px;} #nav5 ul { margin: 0 auto; padding:0; list-style:none; padding:0; } #nav5 li { float: left; position: relative; margin:0; padding:0; } #nav5 a { float: left; margin:0; padding: 6px 0 6px 0px; text-decoration:none; color: #000; text-shadow: 0 0 0 #000;} #nav5 a span { float:left; display:block; padding: 0px 10px 0px 10px; color: #fff; border-right: 1px solid #ff0000;} /* Commented Backslash Hack hides rule from IE5-Mac \*/ #nav5 a span {float:none;} /* End IE5-Mac hack */ #nav5 a:hover span { color: #fff; } /* Applies to all sub-levels */ #nav5 a:hover { background: #808285; } #nav5 a:hover span { padding: 0px 10px 0px 10px;} #nav_dropdown5, #nav_dropdown5 ul { height: 30px; padding: 0; margin: 0; list-style: none; line-height: 1; } #nav_dropdown5 ul a { display: block; background: none; font-weight: bold; font-size: 11px; } /* 1st Level List Items */ #nav_dropdown5 li { float: left; } /* 2nd Level List - UL Sets a width on the UL element - Without it, list goes horizontal Hides the UL from view using left */ /* Using left instead of display to hide menus because display: none isn't read by screen readers */ #nav_dropdown5 li ul { position: absolute; left: -999em; width: 164px; height: 375px; padding: 25px; } #nav_dropdown5 li ul span { line-height: 0px; display: block; float: left; background: #fff; height: 10px; width: 10px; padding: 0; margin: 5px 5px 0 0px; } #nav_dropdown5 li ul img { margin: 10px 0 0 0; } #nav_dropdown5 li ul h3 { color: #FF3333; text-decoration: underline; font-weight: normal; font-size: 17px; margin: 20px 0 5px 28px;} #nav_dropdown5 li ul a {border: none;} #nav_dropdown5 li ul p { display: block; color: #fff; padding: 0; line-height: 12px; margin: 0px; font-size: 11px; } /* Top half of tab */ #nav_dropdown5 li ul#brochure { background: url('images/nav_tophalf_brochure.gif') no-repeat; padding-top: 30px; } #nav_dropdown5 li ul#brochure p, #nav_dropdown5 li ul#request p {color: #ccc; } #nav_dropdown5 li ul#request { background: url('images/nav_tophalf_request.gif') no-repeat; padding-top: 30px;} /* 2nd Level List elements - LI */ #nav_dropdown5 ul li { clear:left; } /* 2nd Level List elements - A */ #nav_dropdown5 ul li a { color: #fff; margin: 0; padding: 0; font-size: 13px; font-family: Arial, Verdana, sans-serif; text-decoration: underline;} #nav_dropdown5 ul li a:hover { color: #fff; background: none;} /* 3rd Level List elements - UL - Sets position of the UL element */ #nav_dropdown5 li ul ul { margin: 30px 0 0 150px; } /* 3rd Level List elements - A */ #nav_dropdown5 ul ul li a { } #nav_dropdown5 ul ul li a:hover { color: #fff; } /* This bit moves list items off the page using negative left margin */ #nav_dropdown5 li:hover ul ul, #nav_dropdown5 li.sfhover ul ul { left: -999em; } /* This brings the list items back on screen and into view upon hover Note usage of .sfhover, a class required and called by the javascript function that handles :hover attributes so that IE will properly :hover on a LI element */ /* lists nested under hovered list items */ #nav_dropdown5 li:hover ul, #nav_dropdown5 li li:hover ul, #nav_dropdown5 li.sfhover ul, #nav_dropdown5 li li.sfhover ul { left: -144px; top: -424px; z-index: 9999; } #nav_dropdown5 li:hover ul#request { left: -106px; top: -424px; } /* Hides the ending pipe character */ #nav1 .nopipe a, #nav2 .nopipe a, #nav3 .nopipe a , #nav4 .nopipe a span, #nav4b .nopipe a span, #nav5 .nopipe a span { background: none; border-right: none; }