/* MAIN MENU - MOBILE FIRST */
header { width: 100%; margin: 0 auto; padding: 0; background: #000; }
#logo { width: 64%; margin:0 18%; text-align: center; padding: 14px 0; }
.viewcart { position: absolute; top: 8px; right: 20px; height: 56px; width: 56px; padding: 2px; }
.menu-toggle { position: absolute; top: 8px; left: 10px; height: 56px; width: 56px; margin: 0 auto; padding: 0; cursor: pointer; background: url(../images/nav-open.png) 10px no-repeat; }
.menu-toggle:hover { background: url(../images/nav-open.png) 10px no-repeat; opacity: .6; filter: alpha(opacity=60); }
.menu-toggle.toggled-on { background: url(../images/nav-close.png) 10px no-repeat; }
.menu-toggle.toggled-on:hover { background: url(../images/nav-close.png) 10px no-repeat; opacity: .6; filter: alpha(opacity=60); }
.srt-menu.toggled-on { display: block; position: relative; z-index: 1000; }
.srt-menu { display: none; clear: both; }
.srt-menu a { font-size: 1.1em; letter-spacing: 1px; cursor: default; text-shadow: 1px 1px 1px #000; padding: 24px 20px; }
.srt-menu li a { display: block; height: auto; border-bottom: 1px solid #000; }
.srt-menu li li a { padding-left: 40px; }
.srt-menu a.drop { color: #99FF00; background:#003300; padding: 12px 20px; }
.srt-menu li a:hover { color: #fff; background: #006600; }
.srt-menu li a.drop:hover { background: #003300; }
a.drop:after { font-size: .8em; content: ' \25BC'; }
a.nodrop:after { font-size: .8em; content: ' \25B6'; }

/* FULL SCREEN MENU  --*/
@media only screen and (min-width: 959px) {
header { height:160px; }
.menu-wrapper { max-width: 920px; margin: 0 auto; text-align: center; }
#logo { width: 100%; height: 110px; overflow:visible; margin: 0 auto; padding: 0; text-align: center; cursor: pointer; }
.viewcart { float: right; position: relative; top: -26px; right: 0; padding: 10px; }
.menu-toggle { display: none; }
#topnav { margin: 10px auto 0 auto; } /* center under logo  */
#menu-main-navigation { display: inline-block; }
.srt-menu, .srt-menu * { margin: 0; padding: 0; list-style: none; }
.srt-menu ul { position: absolute; display: none; float:left; width: 12em; /* left offset of submenus need to match (see below) */ }
.srt-menu ul li { width: 100%; }
.srt-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ }
.srt-menu li { float: left; position: relative; margin-left: 1px; text-align: left; height: 50px;/* match srt-menu li:hover ul ul height */ text-shadow: 1px 1px 1px #000; }
.srt-menu li li { margin-left: 0; height: auto; }
.srt-menu a { display: block; position: relative; }
.srt-menu li:hover ul { display: block; left: 0; top: 40px; /* match top ul list item height but minus 10 to get it to fit under header */ z-index: 99; -webkit-box-shadow: 2px 3px 2px 3px rgba(00, 00, 00, .5); box-shadow: 2px 3px 2px 3px rgba(00, 00, 00, .5); }
ul.srt-menu li:hover li ul { top: -999em; }
ul.srt-menu li li:hover ul { left: 12em; /* match ul width */ top: 0; }
ul.srt-menu li li:hover li ul { top: -999em; }
/*** MENU SKIN ***/
/* main menu defaults */
.srt-menu li a, .srt-menu li a.drop, .srt-menu li a.drop:hover { color: #66CC00; background: none; display: block; padding: 0 20px; text-decoration: none; font-size: 1.1em; letter-spacing:normal; height: auto; line-height: 30px; border: none; }
.srt-menu li a:hover, .srt-menu li a.drop:hover { color: #fff; background:none; }
.srt-menu li a.drop:after, .srt-menu li a.nodrop:after { content: ''; }
/* drop menu */
.srt-menu li li a { color: #66CC00; background: #003300; padding: 16px; font-size: 1em; line-height: 30px; border-bottom: 1px solid #000; }
.srt-menu li li a:hover { color: #fff; background: #006600; }
}
@media only screen and (min-width: 1025px) {
header { position: fixed; z-index: 2 }
}