/* top menu */ #contact-bar {position:fixed; top:0px; z-index:999999999; height:35px; line-height:35px; font-size:14px; background:#00a9a2; color:#ffffff;} #contact-bar span {padding:0 0 0 10px;} #contact-bar .textLeft span {padding:0 10px 0 0;} #contact-bar a {color:#ffffff; text-decoration:none;} #contact-bar a:hover {text-decoration:underline;} #header {position:fixed; top:0px; z-index:999999999;} #header.belowContact {top:35px;} #header #logo img {width:auto; padding:10px 0} #top-menu {font-size:14px; z-index:9999999; line-height:1;} /* all levels */ #top-menu li {position:relative;} #top-menu ul {line-height:1} #top-menu li a, #top-menu li span {white-space:nowrap; text-decoration:none; padding:0 20px; display:block; font-weight:600;} /* first level only */ #top-menu .nav > li {float:left;} #top-menu .nav > li.parent > a:after {content:">"; margin:0 0 0 10px;} #top-menu .nav > li:first-child a {padding:0 20px 0 0;} /* second level */ #top-menu li ul {top:-300000px; position:absolute; padding:0 0 20px 0;} #top-menu li:hover ul {top:100%;} #top-menu li ul a, #top-menu li ul span {padding:10px 40px; display:block; font-weight:600;} #top-menu li ul span {font-weight:700; padding:10px 40px 15px 40px;} /* mega menu */ #top-menu .mm-group {position:relative; float:left; display:inline-block;} #top-menu li ul li:first-child {padding:10px 0 0 0;} /* third level */ #top-menu li ul li ul {display:none;} @media only screen and ( max-width:1200px ) { #top-menu {position:absolute; top:-300000px;} } /** top menu branding **/ #header {background:#ffffff;} /*#header, #header #logo img, #top-menu .nav, #top-menu .nav > li > span, #slideout #slideoutClose {height:80px;} #top-menu .nav > li > a, #top-menu .nav > li > span, #slideout #slideoutClose {line-height:80px;}*/ #top-menu li a, #top-menu li span {color:#00a9a2;} #top-menu li a:hover {color:#00a9a2;} #top-menu li.active > a {color:#00a9a2;;} #top-menu li ul {background:#ffffff;} #top-menu li ul li:first-child {border-top:3px solid #00a9a2} #slideoutToggle {border-top:18px double #00a9a2; border-bottom:6px solid #00a9a2; margin-top:25px; width:30px; height:30px;} #slideoutToggle:hover {border-top:18px double #00a9a2;; border-bottom:6px solid #00a9a2;;} .sizeSmall #slideoutToggle {margin-top:17px;} /* slideout */ /* slideout toggle button */ #slideoutToggle {float:left; z-index:999999; display:block; text-indent:3000px; -webkit-transition:margin 0.5s; -moz-transition:margin 0.5s; -o-transition:margin 0.5s; transition:margin 0.5s;} @media only screen and ( min-width:1200px ) { #slideoutToggle {display:none;} body.slideoutOpen {margin-left:0!important;} body.slideoutOpen #slideout {left:-410px!important;} } /* animate open */ body {margin-left:0; -webkit-transition:margin-left 0.5s; -moz-transition:margin-left 0.5s; -o-transition:margin-left 0.5s;transition:margin-left 0.5s;} body.slideoutOpen {margin-left:410px;} body.slideoutOpen #slideout {left:0;} #slideoutBlackout {background:rgba(0,0,0,0.45); position:fixed; width:100%; left:-300000px; top:0px; z-index:99999; opacity:0; -webkit-transition:opacity 0.5s; -moz-transition:opacity 0.5s; -o-transition:opacity 0.5s; transition:opacity 0.5s;} body.slideoutOpen #slideoutBlackout {opacity:1; left:0;} /* close button */ #slideout #slideoutClose {text-decoration:none; width:100%; display:block; font-size:40px; font-weight:700; padding:0 30px 0 10px;} #slideout #slideoutClose:hover {background:none;} /* slideout menu */ #slideout {width:100%; height:100%!important; max-width:410px; font-size:14px; left:-410px; top:0; position:fixed; line-height:1.5; overflow:auto; z-index:9999999999 line-height:1; z-index:999999999; -webkit-transition:left 0.5s; -moz-transition:left 0.5s; -o-transition:left 0.5s; transition:left 0.5s;} /* all levels */ #slideout > ul {position:relative; float:left; width:100%; display:block; padding:0 0 0 30px;} #slideout li {position:relative; float:left; width:100%; margin:0px; padding:0px;} #slideout li a, #slideout li span {text-decoration:none; display:block; padding:10px 40px 10px 10px;} /* first level only */ #slideout .nav > li > a {font-weight:600;} #slideout .nav > li > a:after {content:">"; position:absolute; right:30px; -webkit-transition:right 0.5s; -moz-transition:right 0.5s; -o-transition:right 0.5s; transition:right 0.5s;} #slideout .nav > li > a:hover:after {right:20px;} #slideout .nav > li.parent > a:after {content:"+";} #slideout .nav > li.parent > a.open:after {content:"-";} #slideout .nav > li.parent > a:hover:after {right:30px;} /* second level */ #slideout li ul {display:none;} #slideout li ul a, #slideout li ul span {padding:10px 40px 10px 25px;} #slideout li ul li > a:after {content:">"; position:absolute; right:30px; transition:right 0.5s; -webkit-transition:right 0.5s; -moz-transition:right 0.5s; -o-transition:right 0.5s; transition:right 0.5s;} #slideout li ul li > a:hover:after {right:20px;} /* mega menu */ #slideout li ul li span {padding:20px 0 10px 15px;} /* slideout branding */ #slideout #slideoutClose:hover, #slideout .nav > li > a {color:#000000;} #slideout {background:#ffffff; color:#000000;} #slideout a {color:#000000;} #slideout span {color:#000000;} #slideout a:hover {background:#b7dbd9; color:#000000;} #slideout li span {border-bottom:1px solid #878787;} #slideout li a {border-bottom:1px solid #878787;} /* variations - logo on right is default */ /* logo on right */ body.logoOnRight #logo {text-align:right;} /* logo on left */ body.logoOnLeft #slideoutToggle {float:right;} body.logoOnLeft.slideoutOpen {margin-left:-410px;} body.logoOnLeft.slideoutOpen #slideout {left:auto; right:0;} body.logoOnLeft #slideout {right:-410px; left:auto; -webkit-transition:left 0s; -moz-transition:left 0s; -o-transition:left 0s; transition:left 0s; -webkit-transition:right 0.5s; -moz-transition:right 0.5s; -o-transition:right 0.5s; transition:right 0.5s;} body.logoOnLeft #slideout #slideoutClose {text-align:right;} @media only screen and ( min-width:1200px ) { body.logoOnLeft.slideoutOpen #slideout {left:410px!important;} } /* centered */ body.logoCentered {margin-top:125px!important;} body.logoCentered #header {height:125px!important;} body.logoCentered #top-menu .nav > li > a, body.logoCentered #top-menu .nav > li > span {line-height:1; padding:20px 20px;} body.logoCentered #top-menu, body.logoCentered #logo {width:98.33333333333333%; text-align:center;} body.logoCentered #logo img {height:80px;} body.logoCentered #top-menu .nav {margin:-10px auto 0 auto; display:inline-block;} body.logoCentered #top-menu .nav li li {text-align:left;} @media only screen and ( max-width:1200px ) { body.logoCentered {margin-top:80px!important;} body.logoCentered #header {height:80px!important;} } @media only screen and ( max-width:850px ) { body.logoCentered #slideout #slideoutToggle {position:absolute;} body.logoCentered #logo {text-align:right;} } /* small screens - slideout is full width */ @media only screen and ( max-width:410px ) { body.slideoutOpen #slideout {left:0!important;} body.slideoutOpen {margin-left:0;} #slideout {left:-100%;} body.logoOnLeft.slideoutOpen {margin-left:0;} body.logoOnLeft #slideout {right:-100%;} body.logoOnLeft.slideoutOpen #slideout {right:0!important;} body.logoOnLeft.slideoutOpen #slideout {left:auto!important;} }