body {
  background:#001324 url('/resources/images/shared/background.jpg') left top repeat-x; 
  color:#a7a7a7; 
  font-family:Helmet, Freesans, sans-serif;
  font-size:12px;
  margin:0;
  padding:0;
}
::-moz-selection {
  background:#ff5d00;
}
::selection {
  background:#ff5d00;  
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
a, a:hover {
  color:#7cb6f6;
  text-decoration:none; 
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color:#ff5d00;
}
h1, .alpha {
  font-size:20px;  
}
h2, .beta {
  font-size:18px;  
}
h3, .gamma {
  font-size:16px;  
}
h4, .delta {
  font-size:15px;  
}
h5, .epsilon {
  font-size:14px;  
}
h6, .zeta {
  font-size:12px;  
}
.eta {
  font-size:11px;  
}
img {
  display:block;
  max-width: 100%;
}
dt {
  font-weight:bold;
  margin-bottom:3px;
}
dd {
  margin:0 0 20px 0;  
}
hr {
  border-top:1px solid #666666;
}
.grid-container {
  max-width:960px;
}
.align-left {
  float:left;
}
.align-right {
  float:right;
}
.text-align-right {
  text-align:right;  
}
.mejs-controls .mejs-button button { 
  outline-color: #000000 !important; /* Override yellow outline for IE9/Firefox */ 
}
.mejs-controls .mejs-time-rail {
  max-width: 43px;
}
.mejs-controls .mejs-duration-container {
  padding-right: 29px !important;
}
.mejs-controls .mejs-volume-button {
  position: absolute !important;
  top: 0;
  right: 0;
}
.test-warning {
  background:#333333;
  color:#ff5d00;
  font-size:18px;
  font-weight:bold;
  text-transform:uppercase;
  text-align:center;
  padding:15px;  
}
.test-warning p {
  margin:0;
}
#main-wrapper {
  padding:0 40px; /* leave space for the social icons */
}
#main {
  background:#000000 url('/resources/images/shared/sub_dark_back.jpg') left top repeat-x;
  color:#ffffff;
  border:1px solid #182b3e;
  margin-top:30px;
}
.home #main {
  border-top:0;
  margin-top:0;
}
.light-bg.error #main {
  background:#ffffff; /* do the whole bg here because the sidebar will always be taller than this */
}
#sidebar {
  background:#000000;
  border-left:1px solid #182b3e;
}
.light-bg #content {
  background:#ffffff none;
  color:#000000;  
}
.light-bg #content a, .light-bg #content a:hover {
  color:#0066ff;
}
.content-padding {
  padding:10px 20px 40px 20px;  
}
#site-header {
  background: #000000;
}
#s360-social .fa {
  color: #cacaca;
  font-size: 30px;
  float: right;
  margin: 45px 0 0 10px;
}
#site-search {
  padding-right: 0;
}
#site-search form {
  margin-top: 45px;
  position: relative;
}
#site-search input[type=text] {
  background: #808080;
  color: #d9d9d9;
  font-family: Lato, sans-serif;
  line-height: 14px;
  padding: 8px 30px 8px 10px;
  border: 0; 
  width: 100%;
  height: 30px;
  margin: 0;
  vertical-align: baseline;
}
#site-search ::-webkit-input-placeholder {
  color: #d9d9d9;
}
#site-search :-moz-placeholder {
  color: #d9d9d9;
}
#site-search ::-moz-placeholder {
  color: #d9d9d9;
}
#site-search :-ms-input-placeholder {
  color: #d9d9d9;
}
#site-search button[type=submit] {
  background: transparent;
  color: #d9d9d9;
  font-size: 20px;
  border: 0;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  right: 0;
}
#header-nav {
  font-size: 14px; /* until font family change */
  line-height: 18px; /* until font family change */
}
#header-nav a, #header-nav a:hover {
  color: #000000;
  font-weight: bold;
  text-transform: uppercase;  
}
#header-nav ul {
  margin: 0;
}
#header-nav ul > li {
  display: inline-block;
}
#site-nav {
  background: #f9c218;
}
#site-nav > li {
  padding: 12px 35px 12px 30px;
  position:relative;
}
#site-nav .sub-menu {
  background: #f9c218;
  position: absolute;
  top: 42px;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 9999;
  visibility: hidden;
}
#site-nav .sub-menu > li {
  color: #000000;
  padding: 12px 30px;
  display: block;
}
#site-nav .sub-menu > li:hover { 
  color: #ffffff;
  background: #808080;
}
#site-nav .sub-menu-link, #site-nav .sub-menu-link:hover {
  color: inherit;
  white-space: nowrap;
  display: block;
}
#s360-nav {
  background: #f4ac00;
  text-align: right;  
}
#s360-nav > li {
  padding: 12px 30px 12px 35px;
}
#header-subnav {
  color: #767676;
  margin-bottom: 35px;
}
#header-subnav a {
  padding: 5px 0;
  display: inline-block;
}
#site-social {
  margin-top:10px;
}
.addthis_button_google_plusone {
  margin-left:10px; 
}
#site-footer {
  background:#000000;
  padding:35px 0 25px 0;
}
.footer-nav-link, .footer-nav-link:hover {
  color:#a7a7a7;
}
.footer-header {
  color:#e0e0e0;
  margin:0 0 7px 0;
}
.footer-header-link, .footer-header-link:hover {
  color:#e0e0e0;
}
.footer-nav {
  margin:0;
  padding:0;  
}
.footer-nav > li {
  margin:0 0 7px 0;
}
.uppercase {
  text-transform:uppercase;  
}
.unbold {
  font-weight:normal;  
}
.unhighlight {
  color:#ffffff;  
}
.light-bg .unhighlight {
  color:#000000;
}
.header-underline {
  background:url('/resources/images/shared/line_score.png') left bottom no-repeat;
  padding-bottom:5px;
}
.gradient-box {
  background:#001123 url('/resources/images/shared/featured_back.jpg') left top repeat-x;
  margin:20px 0;
  border:1px solid #182b3e;
}
.arrow-link,
.light-bg .sidebar-links .arrow-link {
  background:url('/resources/images/shared/arrow.png') left 2px no-repeat;
  padding-left:10px;  
}
.light-bg .arrow-link {
  background:url('/resources/images/shared/arrow-light.jpg') left -1px no-repeat;
}
.sidebar-header {
  background:url('/resources/images/shared/subright_titleback.jpg') left top repeat-y;
  margin:0 -10px;
  padding-left:10px;
}
.sidebar-links {
  text-align:center;
  margin:10px 0 20px 0;  
}
.sidebar-links > a {
  display:inline-block;
  padding:0 10px; 
}
.paged-result .arrow-link, .paged-result .arrow-link {
  font-weight:bold;
}
.paged-result article {
  margin:15px 0;
  min-height:105px;
}
.paged-result-thumb {
  margin:0 10px 10px 0;
  border:1px solid #999999;
  float:left;
}
.paged-result-header {
  margin:0;
}
.paged-result-description {
  margin:5px 0;
}
.paged-results #pages {
  text-align:center;
  margin-top:20px;
}
.paged-results #pages .page {
  font-weight:bold;  
  display:inline-block;
  padding:10px;
}
.content-tabs {
  margin-right:-20px;
  margin-left:-20px;
  padding:0 20px;
  border-top:1px solid #182b3e;
  border-bottom:1px solid #182b3e;
}
.content-tab {
  font-size:112.5%;
  font-weight:bold;
  display:inline-block;
  padding:5px 20px;
}
.content-tab.active {
  background:#192b3f;
}
.content-tab > a {
  color:#a7a7a7;
}
.content-tab.active > a {
  color:#ffffff;
}
.player-wrapper {
  border:1px solid #666666;
}

/* Mobile overrides */

@media screen and (max-width: 767px) {  
  img {
    width:100%;
  }
  .no-resize { 
    width:auto;
  }
  .home #main {
    border-top: 1px solid #182b3e;
  }
  #main-wrapper {
    padding: 0;
  }
  #nsf-logo img {
    margin:0 auto;
  }
  #mobile-menu-button .fa {
    color: #ededed;
    font-size: 30px;
    padding-top: 15px;
  }  
  #mobile-site-search {
    margin: 0 10px 10px 10px;
    position: relative;
  }
  #mobile-site-search input {
    background: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.6);
    font-family: Lato, sans-serif;
    font-size: 14px;
    line-height: 30px;
    outline: none;
    display: block;
    width: 100%;
    height: 30px;
    padding: 0 10px 0 32px;
    border: 0;
    margin: 0;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
  }
  #mobile-site-search ::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.6);
  }
  #mobile-site-search :-moz-placeholder {
    color: rgba(255, 255, 255, 0.6);
  }
  #mobile-site-search ::-moz-placeholder {
    color: rgba(255, 255, 255, 0.6);
  }
  #mobile-site-search :-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.6);
  }
  #mobile-site-search button {
    visibility: hidden;
  }
  #mobile-site-search .fa {
    position: absolute;
    top: 8px;
    left: 11px;
    visibility: visible;
  }
}

@media screen and (min-width: 767px) and (max-width: 1025px) {
  #header-nav .grid-container {
    padding: 0;
  }
  #main-wrapper {
    padding: 0 12px;
  }
}

@media screen and (min-width: 767px) and (max-width: 1025px) and (orientation: portrait) {
  #site-nav > li {
    padding: 12px 25px 12px 20px;
  }
  #s360-nav > li {
    padding: 12px 20px 12px 25px;
  }
}