.nav-bar { height: 40px; background: #4d4d4d; margin-left: 0; margin-top: 20px; padding: 0; }
.nav-bar > li { float: left; display: block; position: relative; padding: 0; margin: 0; border: 1px solid #333333; border-right: none; line-height: 38px; -webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset; -moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset; box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset; }
.nav-bar > li:first-child { -webkit-box-shadow: 0 0 0; -moz-box-shadow: 0 0 0; box-shadow: 0 0 0; }
.nav-bar > li:last-child { border-right: solid 1px #333333; -webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, 1px 0 0 rgba(255, 255, 255, 0.2); -moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, 1px 0 0 rgba(255, 255, 255, 0.2); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, 1px 0 0 rgba(255, 255, 255, 0.2); }
.nav-bar > li.active { background: #2ba6cb; border-color: #2284a1; }
.nav-bar > li.active > a { color: white; cursor: default; }
.nav-bar > li.active:hover { background: #2ba6cb; cursor: default; }
.nav-bar > li:hover { background: #333333; }
.nav-bar > li > a { color: #e6e6e6; }
.nav-bar > li ul { margin-bottom: 0; }
.nav-bar > li .flyout { display: none; }
.nav-bar > li.has-flyout > a:first-child { padding-right: 40px; position: relative; }
.nav-bar > li.has-flyout > a:first-child:after { content: ""; display: block; width: 0; height: 0; border: solid 4px; border-color: #e6e6e6 transparent transparent transparent; position: absolute; right: 20px; top: 17px; }
.nav-bar > li.has-flyout > a.flyout-toggle { border-left: 0 !important; position: absolute; right: 0; top: 0; padding: 20px; z-index: 2; display: block; }
.nav-bar > li.has-flyout.is-touch > a:first-child { padding-right: 55px; }
.nav-bar > li.has-flyout.is-touch > a.flyout-toggle { border-left: 1px dashed #666; }
.nav-bar > li > a:first-child { position: relative; padding: 0 20px; display: block; text-decoration: none; font-size: 14px; }
.nav-bar > li > input { margin: 0 10px; }
.nav-bar.vertical { height: auto; margin-top: 0; }
.nav-bar.vertical > li { float: none; border-bottom: none; border-right: solid 1px #333333; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.nav-bar.vertical > li.has-flyout > a:first-child:after { content: ""; display: block; width: 0; height: 0; border: solid 4px; border-color: transparent transparent transparent #e6e6e6; }
.nav-bar.vertical > li .flyout { left: 100%; top: -1px; }
.nav-bar.vertical > li .flyout.right { left: auto; right: 100%; }
.nav-bar.vertical > li.active { border-right: solid 1px #2284a1; }
.nav-bar.vertical > li:last-child { border-bottom: solid 1px #333333; }


.flyout { background: #f2f2f2; padding: 20px; margin: 0; border: 1px solid #d9d9d9; position: absolute; top: 39px; left: -1px; width: 250px; z-index: 40; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); /* remove margin on any first-child element */ /* remove margin on last element */ }
.flyout p { line-height: 1.2; font-size: 13px; }
.flyout *:first-child { margin-top: 0; }
.flyout *:last-child { margin-bottom: 0; }
.flyout.small { width: 166.66667px; }
.flyout.large { width: 437.5px; }
.flyout.right { left: auto; right: -2px; }
.flyout.left { right: auto; left: -2px; }
.flyout.up { top: auto; bottom: 39px; }

ul.flyout, .nav-bar li ul { padding: 0; list-style: none; }
ul.flyout li, .nav-bar li ul li { border-left: solid 3px #CCC; }
ul.flyout li a, .nav-bar li ul li a { background: #f2f2f2; border: 1px solid #e6e6e6; border-width: 1px 1px 0 0; color: #555; display: block; font-size: 14px; height: auto; line-height: 1; padding: 15px 20px; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; }
ul.flyout li a:hover, .nav-bar li ul li a:hover { background: #ebebeb; color: #333; }
ul.flyout li.active, .nav-bar li ul li.active { margin-top: 0; border-top: 1px solid #4d4d4d; border-left: 4px solid #1a1a1a; }
ul.flyout li.active a, .nav-bar li ul li.active a { background: #4d4d4d; border: none; color: #fff; height: auto; margin: 0; position: static; top: 0; -webkit-box-shadow: 0 0 0; -moz-box-shadow: 0 0 0; box-shadow: 0 0 0; }





/* Foundation Top Bar
 Requires: -jquery.foundation.topbar.js
 Notes: - <nav class="cat_1510245_divs"> can have .fixed added to make it stick to the top of viewport. Can add .contain-to-grid to cat_1510245_divs to make it full width but content on grid. - <li class="name"> creates a branding area that can be linked to homepage - Can include text, image or both inside this <li>. - <li class="divider"> creates a divider between nav items, add margins for space - <li class="search"> Needs to hold a <form> which can use .row.collapse and pre/postfix buttons or default type="search"
*/
/* Element that controls breakpoint, no need to change this ever */
.top-bar-js-breakpoint { width: 940px !important; visibility: hidden; }

/* Wrapped around .top-bar to contain to grid width */
.contain-to-grid { width: 100%; background: #222; border-bottom:1px solid #111;-moz-box-shadow: 0 4px 10px -7px #000;-webkit-box-shadow: 0 4px 10px -7px #000;box-shadow: 0 4px 10px -7px #000; }

/* Wrapped around .top-bar to make it fixed at the top */
.fixed { width: 100%; left: 0; position: fixed; top: 0; z-index: 99; }

/* <nav> */
.top-bar { background: #222222; height: 45px; line-height: 45px; margin: 0 0 30px; padding: 0; width: 100%; /* Contain width to .row width */ /* First <ul> for branding, title, name, etc */ /* topbar global <ul> styles */ }
.contain-to-grid .top-bar { max-width: 940px; margin: 0 auto; }
.top-bar > ul .name h1 { line-height: 45px; margin: 0; }
.top-bar > ul .name h1 a { font-weight: bold; padding: 0 22.5px; font-size: 17px !important; }
.top-bar > ul .name img { margin-top: 2px; vertical-align: middle; }
.top-bar.expanded { height: inherit; }
.top-bar ul { margin-left: 0; display: inline; height: 45px; line-height: 45px; list-style: none; /* Main Navigation links style */ /* Left Side <ul> */ /* Right Side <ul> */ }
.top-bar ul > li { float: left; /* Dividers between navigation */ /* Put a button in an <li> but give is a class */ /* Put a search bar or text input in the bar */ /* Hide the triangle for breakpoint menu */ /* li.has-dropdown */ }
.top-bar ul > li a:not(.button) { color: white; display: block; font-size: 13px; font-weight: bold; height: 45px; line-height: 45px; padding: 0 14px; }
.top-bar ul > li:not(.name):hover, .top-bar ul > li:not(.name).active { background: black; }
.top-bar ul > li:not(.name):hover a, .top-bar ul > li:not(.name).active a { color: #d9d9d9; }
.top-bar ul > li.divider { background: black; -webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.1); -moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.1); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.1); height: 100%; margin-right: 1px; width: 1px; }
.top-bar ul > li.has-button a.button { margin: 0 11.25px; }
.top-bar ul > li.has-button:hover { background: #222222; }
.top-bar ul > li.has-button:hover a { color: #fff; }
.top-bar ul > li.search { padding: 0 15px; }
.top-bar ul > li.search form { display: inline-block; margin-bottom: 0; vertical-align: middle; width: 110px; }
.top-bar ul > li.search form input[type=text] { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; float: left; font-size: 13px; margin-top: -1px; height: 22.5px; }
.top-bar ul > li.search form input[type=text] + .button { border-left: none; -moz-border-radius-topleft: 0; -webkit-border-top-left-radius: 0; border-top-left-radius: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; float: left; font-size: 12px; margin-top: -1px; padding: 5px 12px 4px; }
.top-bar ul > li.search form input[type=search] { font-size: 13px; margin-bottom: 0; -webkit-border-radius: 1000px; -moz-border-radius: 1000px; border-radius: 1000px; background:#BBB;color:#444;}
.top-bar ul > li.search form input[type=search]:focus { font-size: 13px; margin-bottom: 0; -webkit-border-radius: 1000px; -moz-border-radius: 1000px; border-radius: 1000px; background:#DDD;color:#333;}

.top-bar ul > li.search:hover { background: #222222; }
.top-bar ul > li.toggle-topbar { display: none; }
.top-bar ul > li.has-dropdown { position: relative; /* Dropdown Level 2+ */ }
.top-bar ul > li.has-dropdown:hover > .dropdown { display: block; visibility: visible; }
.top-bar ul > li.has-dropdown a { padding-right: 33.75px; }
.top-bar ul > li.has-dropdown a:after { content: ""; display: block; width: 0; height: 0; border: solid 5px; border-color: white transparent transparent transparent; margin-right: 15px; margin-top: -2.5px; position: absolute; right: 0; top: 50%; }
.top-bar ul > li.has-dropdown .dropdown { background: #222222; left: 0; margin: 0; padding: 9px 0 0 0; position: absolute; visibility: hidden; z-index: 99; }
.top-bar ul > li.has-dropdown .dropdown li { background: #222222; line-height: 1; min-width: 100%; padding-bottom: 5px; }
.top-bar ul > li.has-dropdown .dropdown li a { color: white; font-weight: normal; height: 100%; line-height: 1; padding: 5px 17px 5px 15px; white-space: nowrap; }
.top-bar ul > li.has-dropdown .dropdown li a:after { border: none; }
.top-bar ul > li.has-dropdown .dropdown li a:hover { background: #3c3c3c; }
.top-bar ul > li.has-dropdown .dropdown li label { color: #6f6f6f; font-size: 10px; font-weight: bold; margin: 0; padding-left: 15px; text-transform: uppercase; }
.top-bar ul > li.has-dropdown .dropdown li.divider { border-top: solid 1px black; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset; height: 10px; padding: 0; width: 100%; }
.top-bar ul > li.has-dropdown .dropdown li:last-child { padding-bottom: 10px; }
.top-bar ul > li.has-dropdown .dropdown li.active a { background: black; }
.top-bar ul > li.has-dropdown .dropdown li.has-dropdown > a { padding-right: 30px; }
.top-bar ul > li.has-dropdown .dropdown li.has-dropdown > a:after { border: none; content: "\00bb"; right: 5px; top: 6px; }
.top-bar ul > li.has-dropdown .dropdown li.has-dropdown .dropdown { position: absolute; left: 100%; top: 0; }
.top-bar ul > li.has-dropdown .dropdown li.has-dropdown:hover > .dropdown { display: block; }
.top-bar ul.left { float: left; width: auto; margin-bottom: 0; }
.top-bar ul.right { float: right; width: auto; margin-bottom: 0; /* Dropdown Right Side Alignment */ }
.top-bar ul.right .has-dropdown .dropdown { left: auto; right: -1px; }
.top-bar ul.right .has-dropdown .dropdown li.has-dropdown > .dropdown { right: 100%; left: auto; width: 100%; }
.top-bar .js-generated { display: none; }

/* Firefox Fixes */
@-moz-document url-prefix() { .top-bar ul li .button.small { padding-bottom: 6px; }
  .top-bar ul li.search form input[type=search] { font-size: 14px; height: 22px; padding: 3px; } }

/* IE8 Fixes */
.lt-ie9 .top-bar ul li a { color: white; display: block; font-weight: bold; font-size: 13px; height: 45px; line-height: 45px; padding: 0 15px; }
.lt-ie9 .top-bar ul li a.button { height: auto; line-height: 30px; margin-top: 7px; }
.lt-ie9 .top-bar ul li a:hover { color: #cccccc; }
.lt-ie9 .top-bar ul li a img { margin-top: -5px; vertical-align: middle; }
.lt-ie9 .top-bar ul li a.active { background: #151515; color: #d9d9d9; }

.lt-ie9 .top-bar ul li.has-dropdown { padding-right: 33.75px; }
.lt-ie9 .top-bar ul li.has-dropdown > ul li { padding-right: 0; }




/* 1280 tablet ------------ */
@media only screen and (max-device-width: 1280px) { /* NavBar --- */
  /*            */
  .touch .nav-bar li.has-flyout > a { padding-right: 36px !important; } }


/* Between Medium and Small */
@media only screen and (max-width: 1279px) and (min-width: 768px) { /* NavBar --- */
  /*            */
  .touch .nav-bar li a { font-size: 13px; }
  .touch .nav-bar li.has-flyout > a.flyout-toggle { padding: 20px !important; }
  .touch .nav-bar li.has-flyout > a { padding-right: 36px !important; }
 }



/* Topbar Specific Breakpoint that you can customize */
@media only screen and (max-width: 940px) { .top-bar { margin-bottom: 0; overflow: hidden; height: 45px; background: #222222; /* Override contain to grid stuff for breakpoint */ /* Setting up the sliding area */ /* When the Small Nav is Showing */ }
  .top-bar .js-generated { display: block; }
  .contain-to-grid .top-bar { width: auto; }
  .top-bar section { left: 0; position: relative; width: auto; -webkit-transition: left 300ms; -moz-transition: left 300ms; -o-transition: left 300ms; transition: left 300ms; }
  .top-bar ul { width: 100%; height: 100%; margin-bottom: 0; display: block; }
  .top-bar ul > li { float: none; /* Branding and name */ /* Dropdown Toggle */ /* Divider for breakpoint */ /* Search Overrides for breakpoint size */ /* Dropdown Level 1 */ /* Dropdown Level 2 */ }
  .top-bar ul > li.active, .top-bar ul > li:hover { background: #151515; }
  .top-bar ul > li.name { background: black; height: 45px; }
  .top-bar ul > li.name h1 { line-height: 1; }
  .top-bar ul > li.name h1 a { color: white; display: block; line-height: 45px !important; padding-left: 15px; height: 45px; }
  .top-bar ul > li:hover a, .top-bar ul > li.active a { color: white; }
  .top-bar ul > li a:not(.button) { color: white; }
  .top-bar ul > li.toggle-topbar { cursor: pointer; display: block; height: 45px; position: absolute; right: 0; top: 0; width: 50%; }
  .top-bar ul > li.toggle-topbar a { content: ""; display: block; width: 0; height: 0; border: solid 8px; border-color: white transparent transparent transparent; padding: 0; position: absolute; top: 50%; right: 22.5px; margin-top: -4px; }
  .top-bar ul > li.toggle-topbar:hover { background: inherit; }
  .top-bar ul > li.toggle-topbar a { padding: 0 !important; }
  .top-bar ul > li.divider { border-bottom: solid 1px #3c3c3c; border-top: solid 1px black; clear: both; height: 1px !important; margin: 8px 0 !important; width: 100%; }
  .top-bar ul > li.search { padding: 0 22.5px; }
  .top-bar ul > li.search form { width: 100%; }
  .top-bar ul > li.search form input[type=text] { width: 75%; }
  .top-bar ul > li.search form .button { top: 0; width: 25%; }
  .top-bar ul > li.has-dropdown a { padding-right: 33.75px; }
  .top-bar ul > li.has-dropdown a:after { content: ""; display: block; width: 0; height: 0; border: solid 5px; border-color: transparent transparent transparent rgba(255, 255, 255, 0.5); margin-right: 15px; margin-top: -4.5px; position: absolute; top: 50%; }
  .top-bar ul > li.has-dropdown:hover > .dropdown { display: block; visibility: hidden; }
  .top-bar ul > li.has-dropdown .dropdown { visibility: hidden; z-index: 0 !important; }
  .top-bar ul > li.has-dropdown.moved { position: static; }
  .top-bar ul > li.has-dropdown.moved .dropdown { top: 0; visibility: visible; }
  .top-bar ul > li.has-dropdown.moved .dropdown li label { margin-bottom: 6px; padding-top: 6px !important; font-size: 11px; }
  .top-bar ul > li.has-dropdown.moved .dropdown li:not(.title) { padding-bottom: 0; }
  .top-bar ul > li.has-dropdown.moved .dropdown li:not(.title) a { padding: 8px 22.5px; font-size: 14px; }
  .top-bar ul > li.has-dropdown.moved .dropdown li a, .top-bar ul > li.has-dropdown.moved .dropdown li label { padding: 0 22.5px; }
  .top-bar ul > li.has-dropdown.moved .dropdown li a:hover { background: #3c3c3c; display: block; }
  .top-bar ul > li.has-dropdown.moved .dropdown li.divider { border-bottom: solid 1px rgba(255, 255, 255, 0.1); margin-top: 8px !important; margin-bottom: 8px !important; }
  .top-bar ul > li.has-dropdown.moved .back.title { padding-bottom: 0; }
  .top-bar ul > li.has-dropdown.moved .back.title a:before { position: absolute; top: 50%; left: 17.5px; margin-top: -5px; width: 0; height: 0; content: ""; display: block; width: 0; height: 0; border: solid 5px; border-color: transparent white transparent transparent; }
  .top-bar ul > li.has-dropdown.moved .back.title h5 { margin: 0; padding-left: 15px; position: relative; }
  .top-bar ul > li.has-dropdown.moved .back.title h5 a { background: transparent; padding-top: 8px; padding-bottom: 8px; font-size: 23px; font-weight: bold; }
  .top-bar ul > li.has-dropdown .dropdown li { background: transparent; }
  .top-bar ul > li.has-dropdown .dropdown li.has-dropdown .dropdown { left: 100% !important; top: 0; right: auto !important; }
  .top-bar ul > li.has-dropdown .dropdown li.has-dropdown > a { padding-right: 33.75px; }
  .top-bar ul > li.has-dropdown .dropdown li.has-dropdown > a:after { content: ""; margin-right: 15px; content: ""; display: block; width: 0; height: 0; border: solid 5px; border-color: transparent transparent transparent rgba(255, 255, 255, 0.5); position: absolute; top: 50%; margin-top: -4.5px; }
  .top-bar ul > li.has-dropdown .dropdown li.has-dropdown > a li a:hover { background: #3c3c3c; }
  .top-bar ul > li.has-dropdown .dropdown li.has-dropdown.moved { position: static; }
  .top-bar ul > li.has-dropdown .dropdown li.has-dropdown.moved .dropdown { top: 0; visibility: visible; }
  .top-bar ul > li.has-dropdown .dropdown li.has-dropdown:hover { display: block; }
  .top-bar ul.left, .top-bar ul.right { float: none; width: 100%; }
  .top-bar ul.left > li, .top-bar ul.right > li { display: block; float: none; margin: 0 !important; }
  .top-bar ul.left > li.has-dropdown .dropdown, .top-bar ul.right > li.has-dropdown .dropdown { left: 100% !important; top: 0; right: auto !important; }
  .top-bar section > ul li a:not(.button) { padding-left: 22.5px !important; }
  .top-bar.expanded { height: 100%; }
  .top-bar.expanded ul li.toggle-topbar a { content: ""; display: block; width: 0; height: 0; border: solid 8px; border-color: transparent transparent rgba(255, 255, 255, 0.5) transparent; top: auto; bottom: 50%; margin-bottom: -4px; }
  .top-bar ul li.has-button { padding: 5px 15px; }
  .top-bar ul li .button.small { margin: 0 !important; display: inline-block; width: 100%; }
  .top-bar ul > li.has-button a.button { margin: 0; } }




/* Small Devices ------------ */
@media only screen and (max-width: 767px) {
  /*            */
  /* Navbar --- */
  /*            */
  .nav-bar { height: auto; }
  .nav-bar > li { float: none; display: block; border-right: none; }
  .nav-bar > li > a.main { text-align: left; border-top: 1px solid #ddd; border-right: none; }
  .nav-bar > li:first-child > a.main { border-top: none; }
  .nav-bar > li.has-flyout > a.flyout-toggle { position: absolute; right: 0; top: 0; padding: 22px; z-index: 2; display: block; }
  .nav-bar > li.has-flyout.is-touch > a.flyout-toggle span { content: ""; width: 0; height: 0; display: block; }
  .nav-bar > li.has-flyout > a.flyout-toggle:hover span { border-top-color: #141414; }
  .nav-bar.vertical > li.has-flyout > .flyout { left: 0; }
  .flyout { position: relative; width: 100% !important; top: auto; margin-right: -2px; border-width: 1px 1px 0 1px; }
  .flyout.right { float: none; right: auto; left: -1px; }
  .flyout.small, .flyout.large { width: 100% !important; }
  .flyout p:last-child { margin-bottom: 18px; }

}