/* Foundation Top Bar
 Requires: -jquery.foundation.topbar.js
 Notes: - <nav class="top-bar"> can have .fixed added to make it stick to the top of viewport. Can add .contain-to-grid to top-bar 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"
*/

a, a:active, a:visited, a:hover {border-bottom: none;} /*fjp2*/

/* 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: #222222; }

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

/* Add .sticky class for using top bar as a sticky navigation when scrolling passed it. Add the class .sticky to a top bar using .contain-to-grid but leave off .fixed, javascript will take care of that */
.sticky { float: left; overflow: hidden; }
.sticky.fixed { float: none; }

/* <nav> */
.top-bar { /*background: #222222;*/ min-height: 33px; line-height: 33px; /*margin: 0 0 30px 0;*/ /*fjp2*/ margin: 0; padding: 0 0 0 10px; width: auto; position: relative; /*overflow: auto;*/ /* 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 {display: none;} /*fjp2*/
.top-bar > ul .name h1 { line-height: 33px; margin: 0; }
.top-bar > ul .name h1 a { /*font-weight: bold;*/ padding: 0 22.5px; font-family: "proxima-nova", sans-serif; font-size: 16px; }
.top-bar > ul .name img { margin-top: -5px; vertical-align: middle; }
.top-bar.expanded { height: inherit; }
.top-bar ul { /*margin-left: 0;*/ /*fjp2*/ margin: 0; /*fjp2*/ display: inline; height: 33px; line-height: 33px; list-style: none; /* Main Navigation links style */ /* Left Side <ul> */ /* Right Side <ul> */ }
.top-bar ul > li { background: none; margin: 0; padding: 0; /*fjp2*/ 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 */ /* Put login bar in the top bar */ /* Hide the triangle for breakpoint menu */ /* li.has-dropdown */ }
.top-bar ul > li a:not(.button) { color: #3e3e5d; display: block; font-size: 13px; /*font-weight: bold;*/ height: 33px; line-height: 33px; padding: 0 9px; }
.top-bar ul > li:not(.name):hover, .top-bar ul > li:not(.name).active, .top-bar ul > li:not(.name):focus { background: #dde3dd; }
.top-bar ul > li:not(.name):hover a, .top-bar ul > li:not(.name).active a, .top-bar ul > li:not(.name):focus a { color: #3e3e5d; }
.top-bar ul > li.divider { background: #dcdcdc; /*-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, .top-bar ul > li.has-button:focus { background: #222222; }
.top-bar ul > li.has-button:hover a, .top-bar ul > li.has-button:focus a { color: #3e3e5d; }
.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, .top-bar ul > li.has-dropdown:focus > .dropdown { display: block; visibility: visible; }
.top-bar ul > li.has-dropdown a { padding-right: 9px; /*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: #eeece7;*/ left: 0; margin: 0; padding: 0 0 0 0; position: absolute; visibility: hidden; z-index: 99; }
.top-bar ul > li.has-dropdown .dropdown li { /*background: #eeece7;*/ line-height: 1; min-width: 100%; padding-bottom: 5px; }
.top-bar ul > li.has-dropdown .dropdown li a { color: #3e3e5d; 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, .top-bar ul > li.has-dropdown .dropdown li a:focus { background: #dde3dd; }
.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 #dcdcdc; /*-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: #eeece7; }
.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, .top-bar ul > li.has-dropdown .dropdown li.has-dropdown:focus > .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: 0px; }
.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: #3e3e5d; display: block; /*font-weight: bold;*/ font-size: 13px; height: 33px; line-height: 33px; 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 img { margin-top: -5px; vertical-align: middle; }

.lt-ie9 .top-bar section > ul > li a:hover, .lt-ie9 .top-bar section > ul > li a:focus { color: #3e3e5d; }
.lt-ie9 .top-bar section > ul > li:hover, .lt-ie9 .top-bar section > ul > li:focus { background: #dde3dd; }
.lt-ie9 .top-bar section > ul > li.search:hover, .lt-ie9 .top-bar section > ul > li.search:focus, .lt-ie9 .top-bar section > ul > li.has-button:hover, .lt-ie9 .top-bar section > ul > li.has-button:focus { background: none; }
.lt-ie9 .top-bar section > ul > li.active { background: #dde3dd; color: #3e3e5d; }

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

/*Hides drop-down menus for non-mobile devices*/
.top-bar ul > li.has-dropdown .dropdown li {
	display: none;
}

/*@media only screen and (min-device-width: 320px) and (max-device-width: 480px)*/
/*@media only screen and (min-width: 320px) and (max-width: 480px)*/
/*@media only screen and (max-width: 940px)
@media only screen and (max-width: 520px) {*/
@media only screen and (max-width: 600px) {
  .top-bar { margin-bottom: 0; padding: 0; overflow: hidden; height: 45px;}
  .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 0; -moz-transition: left 300ms 0; -o-transition: left 300ms 0; transition: left 300ms 0; }
  .top-bar ul { width: 100%; height: 100%; margin-bottom: 0; display: block; text-align: left; }
  .top-bar > ul .name { background-color: #fff; display: block;}
  .top-bar ul > li { border-bottom: 1px solid #dcdcdc; 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: #dde3dd; }
  .top-bar ul > li.name { height: 45px; margin-left: 45px;}
  .top-bar ul > li.name h1 { line-height: 1; }
  .top-bar ul > li.name h1 a { color: #3e3e5d; display: block; line-height: 45px !important; padding-left: 0; height: 45px; }
  .top-bar ul > li:hover a, .top-bar ul > li.active a { color: #3e3e5d; }
  .top-bar ul > li a:not(.button) { color: #3e3e5d; font-size: 16px;}
  .top-bar ul > li.toggle-topbar { cursor: pointer; display: block; height: 45px; position: absolute; left: 0; top: 0; width: 45px; }
  .top-bar ul > li.toggle-topbar a { content: ""; display: block; background: url(/responsiveTest/images/toggleMenu-subSite.gif) no-repeat top left; width: 45px; height: 45px; padding: 0; position: absolute; top: 0; left: 0; }
  .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.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 #555; margin-right: 15px; margin-top: -4.5px; position: absolute; top: 50%; right: 0;}
  .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 { background: #eeece7; 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 #555 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-family: "proxima-nova", sans-serif; font-size: 16px; /*font-weight: bold;*/ }
  .top-bar ul > li.has-dropdown .dropdown li { background: transparent; display: block; /*fjp2*/}
  .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 #555; 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 #555 transparent; top: auto; bottom: 50%; margin-bottom: -4px; }*/
  .top-bar.expanded ul li.toggle-topbar a { content: ""; display: block; background: url(/responsiveTest/images/toggleMenu-subSite.gif) no-repeat top left; width: 45px; height: 45px; /*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; } }