body {
  margin: 0px;
  padding: 0px;
}
#history-masthead-container {
  position: relative;
  z-index: 99;
  overflow: hidden;
  margin: 0px 0px -5px 0px;
  padding: 0px;
  width: 100%;
  height: 50px;
  background: transparent url('http://www.monasticmatrix.org/sites/all/themes/monasticmatrix/masthead/images/masthead-bg.png') repeat-x;
  font-family: Arial, Helvetica, sans-serif;
}
#history-masthead-container a:link, #history-masthead-container a:visited {
  color: #000;
  text-decoration: none;
}
#history-masthead-container a:active, #history-masthead-container a:hover {
  text-decoration: underline;
}
#history-masthead-container ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
#history-masthead-container li {
  display: inline;
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  list-style-image: none;
  font-size: 12px;
  line-height: 40px;
}
#history-masthead-container .history-masthead-960holder {
  margin: 0px auto;
  min-width: 860px;
  max-width: 960px;
}
#history-masthead-container .history-masthead-leftside {
  float: left;
  margin: 0px;
  padding: 0px;
  text-align: left;
}
#history-masthead-container .history-masthead-rightside {
  float: right;
  margin: 0px;
  padding: 0px;
  text-align: right;
}
#history-masthead-container .history-masthead-rightside li {
  padding-left: 10px;
}
#history-masthead-container .history-masthead-redside {
  float: left;
  margin-top: -3px;
  width: 50%;
  height: 7px;
  background-color: #900;
}
#history-masthead-container .history-masthead-greyside {
  float: right;
  margin-top: -3px;
  width: 50%;
  height: 7px;
  background-color: #ccc;
}
#history-masthead-container .history-masthead-greyside-fade {
  float: left;
  width: 50%;
  height: 7px;
  background: #CCC url('http://www.monasticmatrix.org/sites/all/themes/monasticmatrix/masthead/images/gradient.png') no-repeat;
}
#history-masthead-container .history-masthead-osu a:link, #history-masthead-container .history-masthead-osu a:visited {
  color: #900;
  text-decoration: none;
  font-weight: bold;
}
#history-masthead-container .history-masthead-osu a:active, #history-masthead-container .history-masthead-osu a:hover {
  text-decoration: underline;
}
#history-masthead-container .history-masthead-arrow {
  padding-left: 10px;
  width: 5px;
  height: 8px;
  background: transparent url('http://www.monasticmatrix.org/sites/all/themes/monasticmatrix/masthead/images/arrow.png') no-repeat;
  line-height: 16px;
}
.mobile-only {
  display: none;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~ Tabby ~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~ */
#history-tabby {
  position: relative;
  z-index: 98;
  display: inline;
  min-width: 100%;
}
#history-tabby .tabby-content {
  margin: 0px auto;
  max-width: 960px;
  width: 100%;
}
#history-tabby .tabby-content .tabby {
  display: block;
  float: right;
  width: 262px;
  height: 25px;
  border: 1px solid #850000;
  background-color: #990000;
  -webkit-box-shadow: 0px 0px 1px #333333;
  -moz-box-shadow: 0px 0px 1px #333333;
  box-shadow: 0px 0px 1px #333333;
  color: #fff;
}
#history-tabby .tabby-content .tabby .logo a {
  float: left;
  width: 163px;
  height: 25px;
  background: #990000 url('http://www.monasticmatrix.org/sites/all/themes/monasticmatrix/masthead/images/history-logo.png') no-repeat;
  color: #fff;
  line-height: 25px;
}
#history-tabby .tabby-content .tabby .logo {
  float: left;
  padding-right: 7px;
  padding-left: 5px;
  border-right: 1px solid #850000;
  line-height: 25px;
}
#history-tabby .tabby-content .tabby .menu {
  position: relative;
  z-index: 99;
  float: right;
  padding-left: 5px;
  line-height: 25px;
}

/*

http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

*/

#history-tabby .tabby-content .tabby .menu #nav{
  z-index: 5;
  margin-bottom: 10px;
  color: white;
  list-style: none;
}
#history-tabby .tabby-content .tabby .menu #nav .menu-more-link a {
  display: block;
  padding-left: 10px;
  width: 77px;
  height: 25px;
  border-top: 1px solid transparent;
  border-right: 1px solid transparent;
  border-left: 1px solid transparent;
  color: #fff;
}
#history-tabby .tabby-content .tabby .menu #nav .menu-more-link a .arrow-icon {
  float: right;
  margin-top: 7px;
  margin-right: 7px;
  width: 10px;
  height: 9px;
  /* background: transparent url('http://www.monasticmatrix.org/sites/all/themes/monasticmatrix/masthead/images/tabby-arrow.png') no-repeat scroll 0px 0px; */
}
#history-tabby .tabby-content .tabby .menu #nav .menu-more-link a:hover .arrow-icon {
  background: #eeeeee url('http://www.monasticmatrix.org/sites/all/themes/monasticmatrix/masthead/images/tabby-arrow.png') no-repeat scroll -10px 0px;
}
.arrow-icon-nohover {
  background: transparent url('http://www.monasticmatrix.org/sites/all/themes/monasticmatrix/masthead/images/tabby-arrow.png') no-repeat scroll 0px 0px;
}
.arrow-icon-hover {
  background: transparent url('http://www.monasticmatrix.org/sites/all/themes/monasticmatrix/masthead/images/tabby-arrow.png') no-repeat scroll -10px 0px;
}
#history-tabby .tabby-content .tabby .menu #nav .menu-more-link a:hover, #history-tabby .tabby-content .tabby .menu #nav .menu-more-link a:active {
  /* border-top: 1px solid #850000; */
  border-right: 1px solid #850000;
  border-left: 1px solid #850000;
  color: #000;
  text-decoration: none;
}
#history-tabby .tabby-content .tabby .menu #nav li {
  position: relative;
  float: left;
  margin-left: -89px;
}
#history-tabby .tabby-content .tabby .menu #nav a {
  display: block;
  color: #000;
  text-decoration: none;
}
#history-tabby .tabby-content .tabby .menu #nav a:hover{
  background: #eeeeee;
  color: #000;
  text-decoration: none;
}

#history-tabby .tabby-content .tabby .menu #nav ul{
  position: absolute;
  left: -9999px; /* Hide off-screen when not needed (this is more accessible than display:none; */
  background: #fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
  background: rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
  list-style: none;
}
#history-tabby .tabby-content .tabby .menu #nav ul li{
  float: none;
margin-bottom: 0px;
  padding-top: 0px; /* Introducing a padding between the li and the a give the illusion spaced items */
}
#history-tabby .tabby-content .tabby .menu #nav ul a{
  margin-left: -21px;
  padding: 0px 10px 0px 10px;
  color: #000;
  text-decoration: none;
  white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#history-tabby .tabby-content .tabby .menu #nav li:hover ul { /* Display the dropdown on hover */
  left: 0; /* Bring back on-screen when needed */
}
#history-tabby .tabby-content .tabby .menu #nav li:hover a {
  border-right: 1px solid #850000;
  border-left: 1px solid #850000; /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
  background: #eeeeee;
  color: #000;
  text-decoration: none;
}
#history-tabby .tabby-content .tabby .menu #nav li:hover .last a { /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
  border-bottom: 1px solid #850000;
}
#history-tabby .tabby-content .tabby .menu #nav li:hover ul a { /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
  text-decoration: none;
}
#history-tabby .tabby-content .tabby .menu #nav li:hover ul li a:hover{
  color: #333;
  text-decoration: underline; /* Here we define the most explicit hover states--what happens when you hover each individual link. */
  background: #eee;
}
.masthead-mobile-only {
  display: none;
}

@media all and (max-width: 850px) {
  #history-tabby {
    float: left;
    padding-left: 0%;
    min-width: 0%;
  }
  #history-tabby .tabby-content {
    margin: 0px auto;
    width: 95%;
  }
  #history-tabby .tabby-content .tabby .logo a {
    display: none;
  }
  #history-tabby .tabby-content .tabby {
    width: 88px;
  }
  .history-masthead-960holder {
    display: none;
  }
  .masthead-mobile-only {
    display: block;
  }
  #history-tabby .tabby-content .tabby .menu #nav li {
    margin-left: 2px;
  }
  #history-tabby .tabby-content .tabby .menu {
    margin-right: 0px;
  }
}