/* ================================================================ This copyright notice must be kept untouched in the stylesheet at all times. The original version of this stylesheet and the associated (x)html is available at http://www.stunicholls.com/menu/pro_drop_1.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. =================================================================== */ @charset "utf-8"; /* Simple fluid media Note: Fluid media requires that you remove the media's height and width attributes from the HTML http://www.alistapart.com/articles/fluid-images/ */ img, object, embed, video { max-width: 100%; } /* IE 6 does not support max-width so default to width 100% */ .ie6 img { width:100%; } /* Dreamweaver Fluid Grid Properties ---------------------------------- dw-num-cols-mobile: 5; dw-num-cols-tablet: 8; dw-num-cols-desktop: 10; dw-gutter-percentage: 25; Inspiration from "Responsive Web Design" by Ethan Marcotte http://www.alistapart.com/articles/responsive-web-design and Golden Grid System by Joni Korpi http://goldengridsystem.com/ */ /* Mobile Layout: 480px and below. */ .gridContainer { margin-left: auto; margin-right: auto; width: 100%; /* padding-left: 2%; padding-right: 2%;*/ } .preload1 {background: url(blank_over.gif);} .preload2 {background: url(blank_overa.gif);} #nav {padding:0; margin:0 auto; list-style:none; position:relative; z-index:30000; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; width:100%; max-width: 900px;} #nav li.top {display:block; float:left;width:100%;background:#022981;} #nav li a.top_link {display:block; float:left; height:36px; line-height:36px; color:#FFF; text-decoration:none; text-transform:uppercase; font-size:12px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;width:100%;/*background: url(blank.gif);*/} #nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:36px;/*background:url(blank.gif) right top;*/} #nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px; background: #022981;} #nav li a.top_link:hover {color:#fff; background: #022981;/*url(blank_over.gif) no-repeat;*/ -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; -ms-transition: background 0.5s ease; transition: background 0.5s ease;} #nav li a.top_link:hover span {background: #022981;/*url(blank_over.gif) no-repeat;*/ -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; -ms-transition: background 0.5s ease; transition: background 0.5s ease;} #nav li a.top_link:hover span.down {background: #022981;/*url(blank_over.gif) no-repeat;*/ -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; -ms-transition: background 0.5s ease; transition: background 0.5s ease;} #nav li:hover > a.top_link {color:#fff; background: #0739aa;/*url(blank_over.gif) no-repeat;*/ -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; -ms-transition: background 0.5s ease; transition: background 0.5s ease;/*background: url(blank_over.gif) no-repeat;*/} #nav li:hover > a.top_link span {/*background: #022981;url(blank_over.gif) no-repeat;*/ -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; -ms-transition: background 0.5s ease; transition: background 0.5s ease;/*background:url(blank_over.gif) no-repeat right top;*/} #nav li:hover > a.top_link span.down {background: #022981;/*url(blank_over.gif) no-repeat;*/ -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; -ms-transition: background 0.5s ease; transition: background 0.5s ease;/*background:url(blank_overa.gif) no-repeat right top;*/} /* Default list styling */ #nav li:hover {position:relative; z-index:200;} /* keep the 'next' level invisible by placing it off screen. */ #nav ul, #nav li:hover ul ul, #nav li:hover ul li:hover ul ul, #nav li:hover ul li:hover ul li:hover ul ul, #nav li:hover ul li:hover ul li:hover ul li:hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;} #nav li:hover ul.sub {left:0; top:36px; background: #0739aa; padding:3px; white-space:nowrap; width:auto; height:auto; z-index:300;margin-bottom: 30px; -moz-box-shadow: 7px -7px 7px -7px #333; -webkit-box-shadow: 7px -7px 7px -7px #333; box-shadow: 7px -7px 7px -7px #333; opacity: 0.9; } #nav li:hover ul.sub li {display:block; height:36px; position:relative; float:left; width:170px; font-weight:normal;} #nav li:hover ul.sub li a {display:block; font-size:12px; height:20px; width:auto; line-height:20px; color:#FFF; text-decoration:none; padding: 10px;} #nav li ul.sub li a.fly {background:#fff url(arrow.gif) 80px 7px no-repeat;} #nav li:hover ul.sub li a:hover {background:#FFF; color:#372345;} #nav li:hover ul.sub li a.fly:hover {background:#3a93d2 url(arrow_over.gif) 80px 7px no-repeat; color:#fff;} #nav li:hover ul li:hover > a.fly {background:#3a93d2 url(arrow_over.gif) 80px 7px no-repeat; color:#fff;} #nav li:hover ul li:hover ul, #nav li:hover ul li:hover ul li:hover ul, #nav li:hover ul li:hover ul li:hover ul li:hover ul, #nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {left:90px; top:-4px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:auto; z-index:400; height:auto;} @media only screen and (min-width: 728px) { .gridContainer { margin-left: auto; margin-right: auto; width: 100%; /* padding-left: 2%; padding-right: 2%;*/ } .preload1 {background: url(blank_over.gif);} .preload2 {background: url(blank_overa.gif);} #nav {padding:0; margin:0 auto; list-style:none; position:relative; z-index:30000; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; width:100%; max-width: 900px;} #nav li.top {display:block; float:left;width:100%;background:#022981;} #nav li a.top_link {display:block; float:left; height:36px; line-height:36px; color:#FFF; text-decoration:none; text-transform:uppercase; font-size:12px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;width:100%;/*background: url(blank.gif);*/} #nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:36px;/*background:url(blank.gif) right top;*/} #nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px; background: #022981;} #nav li a.top_link:hover {color:#fff; background: #022981;/*url(blank_over.gif) no-repeat;*/ -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; -ms-transition: background 0.5s ease; transition: background 0.5s ease;} #nav li a.top_link:hover span {background: #022981;/*url(blank_over.gif) no-repeat;*/ -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; -ms-transition: background 0.5s ease; transition: background 0.5s ease;} #nav li a.top_link:hover span.down {background: #022981;/*url(blank_over.gif) no-repeat;*/ -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; -ms-transition: background 0.5s ease; transition: background 0.5s ease;} #nav li:hover > a.top_link {color:#fff; background: #0739aa;/*url(blank_over.gif) no-repeat;*/ -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; -ms-transition: background 0.5s ease; transition: background 0.5s ease;/*background: url(blank_over.gif) no-repeat;*/} #nav li:hover > a.top_link span {/*background: #022981;url(blank_over.gif) no-repeat;*/ -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; -ms-transition: background 0.5s ease; transition: background 0.5s ease;/*background:url(blank_over.gif) no-repeat right top;*/} #nav li:hover > a.top_link span.down {background: #022981;/*url(blank_over.gif) no-repeat;*/ -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; -ms-transition: background 0.5s ease; transition: background 0.5s ease;/*background:url(blank_overa.gif) no-repeat right top;*/} /* Default list styling */ #nav li:hover {position:relative; z-index:200;} /* keep the 'next' level invisible by placing it off screen. */ #nav ul, #nav li:hover ul ul, #nav li:hover ul li:hover ul ul, #nav li:hover ul li:hover ul li:hover ul ul, #nav li:hover ul li:hover ul li:hover ul li:hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;} #nav li:hover ul.sub {left:0; top:36px; background: #0739aa; padding:3px; white-space:nowrap; width:auto; height:auto; z-index:300;margin-bottom: 30px; -moz-box-shadow: 7px -7px 7px -7px #333; -webkit-box-shadow: 7px -7px 7px -7px #333; box-shadow: 7px -7px 7px -7px #333; opacity: 0.9; } #nav li:hover ul.sub li {display:block; height:36px; position:relative; float:left; width:170px; font-weight:normal;} #nav li:hover ul.sub li a {display:block; font-size:12px; height:20px; width:auto; line-height:20px; color:#FFF; text-decoration:none; padding: 10px;} #nav li ul.sub li a.fly {background:#fff url(arrow.gif) 80px 7px no-repeat;} #nav li:hover ul.sub li a:hover {background:#FFF; color:#372345;} #nav li:hover ul.sub li a.fly:hover {background:#3a93d2 url(arrow_over.gif) 80px 7px no-repeat; color:#fff;} #nav li:hover ul li:hover > a.fly {background:#3a93d2 url(arrow_over.gif) 80px 7px no-repeat; color:#fff;} #nav li:hover ul li:hover ul, #nav li:hover ul li:hover ul li:hover ul, #nav li:hover ul li:hover ul li:hover ul li:hover ul, #nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {left:90px; top:-4px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:auto; z-index:400; height:auto;} } @media only screen and (min-width: 1024px) { .gridContainer { width: 100%%; margin: auto; } .preload1 {background: url(blank_over.gif);} .preload2 {background: url(blank_overa.gif);} #nav {padding:0; margin:0 auto; list-style:none; position:relative; z-index:30000; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; width:100%; max-width: 900px;} #nav li.top {display:block; float:left; width:auto;background:none;} #nav li a.top_link {display:block; float:left; height:36px; line-height:36px; color:#FFF; text-decoration:none; text-transform:uppercase; font-size:12px; font-weight:bold; padding:0 0 0 12px; cursor:pointer; /*background: url(blank.gif);*/} #nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:36px;/*background:url(blank.gif) right top;*/} #nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px; background: none;} #nav li a.top_link:hover {color:#fff; background: #0739aa;/*url(blank_over.gif) no-repeat;*/ -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; -ms-transition: background 0.5s ease; transition: background 0.5s ease;} #nav li a.top_link:hover span {/*background: #022981;/*url(blank_over.gif) no-repeat;*/ -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; -ms-transition: background 0.5s ease; transition: background 0.5s ease;} #nav li a.top_link:hover span.down {/*background: #022981;/*url(blank_over.gif) no-repeat;*/ -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; -ms-transition: background 0.5s ease; transition: background 0.5s ease;} #nav li:hover > a.top_link {color:#fff; background: #022981;/*url(blank_over.gif) no-repeat;*/ -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; -ms-transition: background 0.5s ease; transition: background 0.5s ease;/*background: url(blank_over.gif) no-repeat;*/} #nav li:hover > a.top_link span {/*background: #022981;url(blank_over.gif) no-repeat;*/ -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; -ms-transition: background 0.5s ease; transition: background 0.5s ease;/*background:url(blank_over.gif) no-repeat right top;*/} #nav li:hover > a.top_link span.down {background: #022981;/*url(blank_over.gif) no-repeat;*/ -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; -ms-transition: background 0.5s ease; transition: background 0.5s ease;/*background:url(blank_overa.gif) no-repeat right top;*/} /* Default list styling */ #nav li:hover {position:relative; z-index:200;} /* keep the 'next' level invisible by placing it off screen. */ #nav ul, #nav li:hover ul ul, #nav li:hover ul li:hover ul ul, #nav li:hover ul li:hover ul li:hover ul ul, #nav li:hover ul li:hover ul li:hover ul li:hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;} #nav li:hover ul.sub {left:0; top:36px; background: #0739aa; padding:3px; white-space:nowrap; width:auto; height:auto; z-index:300;margin-bottom: 30px; -moz-box-shadow: 7px -7px 7px -7px #333; -webkit-box-shadow: 7px -7px 7px -7px #333; box-shadow: 7px -7px 7px -7px #333; opacity: 0.9; } #nav li:hover ul.sub li {display:block; height:36px; position:relative; float:left; width:170px; font-weight:normal;} #nav li:hover ul.sub li a {display:block; font-size:12px; height:20px; width:auto; line-height:20px; color:#FFF; text-decoration:none; padding: 10px;} #nav li ul.sub li a.fly {background:#fff url(arrow.gif) 80px 7px no-repeat;} #nav li:hover ul.sub li a:hover {background:#FFF; color:#372345;} #nav li:hover ul.sub li a.fly:hover {background:#3a93d2 url(arrow_over.gif) 80px 7px no-repeat; color:#fff;} #nav li:hover ul li:hover > a.fly {background:#3a93d2 url(arrow_over.gif) 80px 7px no-repeat; color:#fff;} #nav li:hover ul li:hover ul, #nav li:hover ul li:hover ul li:hover ul, #nav li:hover ul li:hover ul li:hover ul li:hover ul, #nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {left:90px; top:-4px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:auto; z-index:400; height:auto;} }