/*------------------
Top Bar Changes
------------------*/
.top-bar { border-bottom: 3px solid #2DAEBF; }
.top-bar li { margin-bottom: 0px; }
.top-bar li.name h1 { opacity: 0.5; }
.top-bar li.name img { opacity: 0.5; }
.top-bar li.name img:hover { opacity: 1; }
.top-bar ul.right li { border-left: 1px solid black; border-right: none; }
.top-bar ul.right li a { border-left: #555 1px solid; text-decoration: none !important; }
.top-bar ul.right li ul.dropdown li, .top-bar ul.right li .dropdown a { border:none; }
.top-bar ul.right li ul.dropdown li { padding:none !important; margin-bottom: 0px !important;}
.top-bar ul.right li ul.dropdown li a { padding: 10px 16px !important; }
.top-bar ul.right li.logged-in .avatar img { float: left; margin:10px 10px 0 0; }
.top-bar ul.right li.logged-in .avatar { font-size: 13px !important; }
.top-bar ul.right li.logged-in .avatar a { white-space: nowrap !important; }
.top-bar ul.right li.logged-in .dropdown img { margin-right: 10px; }
.top-bar ul.right li.logged-in .dropdown li a { font-size: 15px !important; }
.top-bar ul.right li.logged-in .dropdown li.signout a { font-size: 13px !important; }
.top-bar ul.right li ul.dropdown { padding: 0px !important; }
.top-bar ul.right li ul.dropdown li:last-child { padding-bottom: 0px !important; }
.top-bar ul.right li ul.dropdown { height: 100%; }
.top-bar li.name span a.toggle-nav { padding: 0px !important; }
.top-bar { margin-bottom: 0px !important; }
/* Toggle for Mega Drop Navigation */
.top-bar li.name span a.toggle-nav { display: block; width: 16px; height: 16px; background: url('http://www.zurb.com/assets/top-bar/plus-toggle-2.png') 0 0 no-repeat; position: absolute; left: 65px; top: 14px; opacity: 0.4; z-index: 1; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; }
.top-bar li.name span a.toggle-nav.open { -moz-transform: rotate(135deg); -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); opacity: 0.8; z-index: 1; -moz-transform-origin: center center; }
/* 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"
*/
/* 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: #333333; }
/* 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: #333333; 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 */ font-family: "Proxima Nova"; }
.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; font-size: 17px !important; padding: 0px 0px 0px 15px !important;}
.top-bar > ul .name img { margin-top: -5px; 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 15px; }
.top-bar ul > li:not(.name):hover, .top-bar ul > li:not(.name).active { background: #333333; }
.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: #333333; }
.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: 200px; }
.top-bar ul > li.search form input[type=text] { -moz-border-radius-topright: 0; -webkit-border-top-right-radius: 0; border-top-right-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; 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: 16px; margin-bottom: 0; }
.top-bar ul > li.search:hover { background: #333333; }
.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 .dropdown { background: #333333; 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: #333333; 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; }
@media only screen and (max-width: 767px) {
.top-bar { margin-bottom: 0; overflow: hidden; height: 45px; background: #333333 !important; /* 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: #333333; height: 45px; }
.top-bar ul > li.name h1 { line-height: 1; width: 100px !important; }
.top-bar ul > li.name h1 a { color: white; display: block; line-height: 45px !important; padding-left: 15px; height: 45px; width: 100px !important; }
.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: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; position: relative;padding-left: 18px;
margin-left: -18px; }
.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 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 ul > li.has-dropdown .dropdown li.title.back .avatar img { margin-top: -3px !important; width: 30px !important; height: 30px !important; }
.top-bar ul.right li.logged-in li.title.back .avatar { font-size: 23px !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; }
.top-bar ul.right li.logged-in .avatar img { margin-top: 9px !important; }
.top-bar ul.right li { border-top: #000 1px solid !important; border-left: none !important;}
.top-bar ul.right li a { border-top: #555 1px solid !important; border-left: none !important; }
}