/* Extra external styles   */
/* tranferred top nav bar styles from SitePoint */
.top-bar {
  color: #262626;
  cursor: default;
  display: block;
  font: 400 15px 'Noto Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
  height: 60px;
  line-height: 60px;
  margin-bottom: 0px;
  position: relative;
  background: #3a3a3a;
  *zoom: 1;
  overflow: visible; }
  .top-bar .name {
    height: 60px;
    margin: 0;
    font-size: 16px; }
    .top-bar .name .logo {
      font-size: 1.375em;
      line-height: 60px;
      margin: 0; }
      .top-bar .name .logo .logomark {
        -webkit-transition: opacity 0.2s cubic-bezier(0.64, 0.01, 0.42, 1);
        -moz-transition: opacity 0.2s cubic-bezier(0.64, 0.01, 0.42, 1);
        -o-transition: opacity 0.2s cubic-bezier(0.64, 0.01, 0.42, 1);
        transition: opacity 0.2s cubic-bezier(0.64, 0.01, 0.42, 1);
        color: #adadad;
        display: block;
        height: 60px;
        line-height: 60px;
        font-weight: 400;
        padding: .9em 10px; }

.top-bar-section li.has-dropdown {
  position: relative; }
.top-bar-section li:hover a {
  color: #fff;
  background: #1e1e1e; }
  .top-bar-section li:hover a ~ ul.dropdown {
    display: block; }
.top-bar-section li a {
  color: #aaa;
  background: #3a3a3a;
  padding: 0 20px;
  display: block; }
.top-bar-section li ul.dropdown {
  display: none;
  position: absolute;
  z-index: 99;
  background: #3a3a3a; }
  .top-bar-section li ul.dropdown li {
    margin: 0;
    line-height: 2.5em;
    float: none; }
    .top-bar-section li ul.dropdown li .category-html.menuitem {
      color: #fca13f; }
      .top-bar-section li ul.dropdown li .category-html.menuitem:hover {
        color: #fff; }
    .top-bar-section li ul.dropdown li .category-css.menuitem {
      color: #248aaf; }
      .top-bar-section li ul.dropdown li .category-css.menuitem:hover {
        color: #fff; }
    .top-bar-section li ul.dropdown li .category-javascript.menuitem {
      color: #fac552; }
      .top-bar-section li ul.dropdown li .category-javascript.menuitem:hover {
        color: #fff; }
    .top-bar-section li ul.dropdown li .category-php.menuitem {
      color: #666699; }
      .top-bar-section li ul.dropdown li .category-php.menuitem:hover {
        color: #fff; }
    .top-bar-section li ul.dropdown li .category-ruby.menuitem {
      color: #eb5745; }
      .top-bar-section li ul.dropdown li .category-ruby.menuitem:hover {
        color: #fff; }
    .top-bar-section li ul.dropdown li .category-mobile.menuitem {
      color: #1076b9; }
      .top-bar-section li ul.dropdown li .category-mobile.menuitem:hover {
        color: #fff; }
    .top-bar-section li ul.dropdown li .category-ux.menuitem {
      color: #3cbc8d; }
      .top-bar-section li ul.dropdown li .category-ux.menuitem:hover {
        color: #fff; }
    .top-bar-section li ul.dropdown li .category-design.menuitem {
      color: #3dbfd9; }
      .top-bar-section li ul.dropdown li .category-design.menuitem:hover {
        color: #fff; }
  .top-bar-section li ul.dropdown a {
    background: #1e1e1e;
    width: 7em;
    color: #aaa;
    display: block;
    line-height: 2em;
    margin-top: 1px; }
    .top-bar-section li ul.dropdown a:hover {
      color: #fff;
      background: #3a3a3a; }

/* cross site search bar */
.top-bar_search .searchquery {
  font-size: 0.9375em;
  background: #3a3a3a;
  height: 37px;
  font-weight: bold;
  margin: 0;
  font: 400 15px 'Noto Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
  opacity: 1;
  float: left;
  padding: 0.75em;
  color: #fff;
  top: 0;
  width: 14em;
  border: 0 none; }

.top-bar_search .searchquery:hover,
.top-bar_search .searchquery:focus {
  background: #1e1e1e; }

.top-bar_search button {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  height: 60px;
  margin: 0;
  padding: 0 2em;
  width: 2em;
  background: #323232;
  color: #000;
  display: block;
  float: left;
  overflow: hidden;
  border: 0 none;
  position: relative; }
  .top-bar_search button:before {
    font-size: 1.3em;
    height: 30px;
    margin: 0px;
    position: absolute;
    top: 0.75em;
    left: 0.75em;
    padding: 0px;
    width: 30px;
    color: #fff;
    content: "";
    background: url(/forums/images/styles/TheBeaconLight/style_blue/search.svg) center center no-repeat;
    display: block; }

/* old Code  */
.top-bar:before,
.top-bar:after {
  content: " ";
  display: table; }

.top-bar:after {
  clear: both; }

.top-bar .toggle-topbar {
  display: none; }

.top-bar .title-area {
  float: left; }

.top-bar .name h1 a {
  width: auto; }

.top-bar input,
.top-bar .button {
  line-height: 2em;
  font-size: 0.875em;
  height: 2em;
  padding: 0 10px;
  position: relative;
  top: 8px; }

.top-bar.expanded {
  background: #3a3a3a; }

.top-bar-section {
  -webkit-transition: none 0 0;
  -moz-transition: none 0 0;
  transition: none 0 0;
  left: 0 !important; }

.top-bar-section ul {
  width: auto;
  height: auto !important;
  display: inline; }

.top-bar-section ul li {
  float: left; }

.top-bar-section .has-dropdown > a {
  padding-right: 40px !important; }

.top-bar-section .has-dropdown > a:after {
  content: "";
  display: block;
  width: 0;
  right: 1em;
  height: 0;
  border: inset 5px;
  border-color: white transparent transparent transparent;
  border-top-style: solid;
  margin-top: -2.5px;
  position: absolute;
  top: 1.85em; }

.top-bar-section .has-dropdown.hover > .dropdown {
  visibility: visible; }

.top-bar-section .dropdown {
  left: 0;
  top: auto;
  background: transparent;
  min-width: 100%; }

.top-bar-section .dropdown li a {
  color: white;
  line-height: 1;
  white-space: nowrap;
  padding: 7px 20px;
  background: #474747; }

.top-bar-section .dropdown li label {
  white-space: nowrap;
  background: #474747; }

.top-bar-section .dropdown li .dropdown {
  left: 100%;
  top: 0; }

.top-bar-section > ul > .divider,
.top-bar-section > ul > [role="separator"] {
  border-bottom: none;
  border-top: none;
  border-right: solid 1px #545454;
  border-left: solid 1px #212121;
  clear: none;
  height: 60px;
  width: 0px; }

.top-bar-section .has-form {
  background: #3a3a3a;
  padding: 0 20px;
  height: 60px; }

.top-bar-section ul.right li .dropdown {
  left: auto;
  right: 0; }

.top-bar-section ul.right li .dropdown li .dropdown {
  right: 100%; }

.top-bar-section ul li li.dropdown {
  display: block;
  clear: right;
  outline: 1px dashed #f00; }

html body .pageWrap {
  margin: 1em 35px 0px 35px; }