/*
==============================================================================
**
** NAV
**
** SCOPE: 		GLOBAL
** REVISION:	0.1
** DATE:		03/25/11
** AUTHORS:		DUNCAN MCALESTER (DUNCAN@LAYER-51.COM)

** USAGE:

** NOTES:

** TODO:

** REVISION HISTORY
------------------------------------------------------------------------------






==============================================================================
*/
/* ==================== REQUIRED LIBRARIES DO NOT REMOVE ===================== */
/* Including lib.less - this template is intentionally left blank and does not need to be included  on the live server */
/* ==================== REQUIRED LIBRARIES DO NOT REMOVE ===================== */
/* =========================================================================== */
/*
** COLOR PALETTE
**
** DESCRIPTION:	Class to be applied to any button
** USAGE:
** NOTES:
**
*/
/* =========================================================================== */
#main-nav {
  padding: 0 7px 7px 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -o-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  behavior: url('/styles/pie.htc');
  /* This is for the supplementary nav next to the mast head */

}
#main-nav h1 {
  display: none;
}
#main-nav > ul {
  display: block;
  margin: 0;
  padding: 0;
  height: 53px;
  background: #8b2f1d;
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  background: #98341c;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #98341c), color-stop(1, #792427)) !important;
  background: -webkit-linear-gradient(top, #98341c 0%, #792427 100%) !important;
  background: -moz-linear-gradient(top, #98341c 0%, #792427 100%) !important;
  background: -o-linear-gradient(top, #98341c 0%, #792427 100%) !important;
  background: linear-gradient(top, #98341c 0%, #792427 100%) !important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= #98341c , endColorstr= #792427 );
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  behavior: url('/styles/pie.htc');
  list-style: none;
}
#main-nav > ul > li {
  font-family: 'FuturaW01-LightCondense 774878', "Arial Narrow", Impact, sans-serif !important;
  font-weight: lighter;
  font-size: 17px;
  line-height: 1.3;
  text-transform: uppercase;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
  letter-spacing: 1px;
  color: #fff;
  display: block
			position: 	relative;
  float: left;
  list-style: n;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  list-style: none;
}
#main-nav > ul > li a {
  display: block;
  padding: 16px 18px;
  text-decoration: none !important;
}
#main-nav a {
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
  /* weird bug in Chrome 10 requires color to be set with rgba and 99% */

  color: rgba(255, 255, 255, 0.99);
  padding: 0;
}
#main-nav li:hover,
#main-nav a:hover {
  color: rgba(255, 255, 255, 0.99);
  background: #792427;
}
#main-nav li > .sub {
  opacity: 0;
  visibility: collapse;
  z-index: 1001;
  overflow: hide;
  display: block;
  position: absolute;
  padding: 0;
  margin: 0 auto auto -1px;
  background: #792427;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  width: 220px;
  -webkit-transition: all ease-out 0.2s;
  -moz-transition: all ease-out 0.2s;
  -o-transition: all ease-out 0.2s;
  transition: all ease-out 0.2s;
  -webkit-box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3);
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3);
}
#main-nav li > .sub li {
  border-bottom: 1px solid #6d1f22;
  text-transform: none;
  width: 100%;
  text-shadow: none !important;
}
#main-nav li > .sub a {
  padding: 10px 10px 10px 18px;
}
#main-nav li > .sub a:hover {
  background: #98341c;
}
#main-nav li:hover > .sub,
#main-nav li:focus > .sub {
  opacity: 1;
  visibility: visible;
  height: auto;
}
#main-nav .resource {
  position: relative;
  border: none;
  height: 18px;
  font-size: 13px;
  top: 43px;
  left: 345px;
  margin-bottom: 1px;
  clear: left;
}
#main-nav .resource a {
  padding: 0;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: none !important;
}
#main-nav .resource:hover,
#main-nav .resource a:hover {
  color: #fff;
  background: none;
}
.ie7 #main-nav,
.ie8 #main-nav {
  background: #627a8d;
  border-left: 1px solid #566c7c !important;
  border-bottom: 1px solid #8399a9 !important;
  border-right: 1px solid #8399a9 !important;
}
.ie7 #main-nav > ul,
.ie8 #main-nav > ul {
  border-right: 1px solid #671d1f;
  border-bottom: 1px solid #671d1f;
}
.ie7 #main-nav li a,
.ie8 #main-nav li a {
  color: #fff;
  border-left: 1px solid #883a3a !important;
  border-right: 1px solid #671d1f !important;
  padding: 16px 20px;
}
.ie7 #main-nav li:hover > .sub,
.ie8 #main-nav li:hover > .sub {
  margin: 0;
  display: block;
}
.ie7 #main-nav .sub,
.ie8 #main-nav .sub {
  font-size: 18px;
  display: none;
}
.ie7 #main-nav .sub a,
.ie8 #main-nav .sub a {
  padding: 8px 8px 8px 18px;
}
.ie7 #main-nav .resource,
.ie8 #main-nav .resource {
  top: 44px;
  left: 335px;
}
.ie7 #main-nav .resource a,
.ie8 #main-nav .resource a {
  color: #d5dce1;
  border: none !important;
}
.ie7 #main-nav .resource a:hover,
.ie8 #main-nav .resource a:hover {
  color: #fff;
  background: none !important;
}
.ie7 #main-nav .sub li {
  margin-bottom: -5px;
}
#menu li.selected {
  background: #792427;
}
#menu .resource .selected {
  border-bottom: 1px solid #fff;
  color: #fff;
}
/* This really should use nth-child (thank you very much IE */
#mn5 {
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#mn5 a {
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}
/*
** 960
**
** DESCRIPTION:	Styles that apply to screens 960 pixels wide and down
** USAGE:
** NOTES: Typically this means tablets users in portrait mode and desktop users smaller than average screens
**
*/
@media only screen and (max-width: 960px) {
  #main-nav {
    padding: 0 0 5px 0;
  }
  #main-nav > ul {
    height: 50px;
  }
  #main-nav > ul > li {
    font-size: 15px;
  }
  #main-nav > ul > li .sub {
    margin-top: -1px;
  }
  #main-nav > ul a {
    padding: 10px 0;
  }
  #main-nav .resource {
    top: 30px;
    left: 305px;
  }
}
/*
** 768
**
** DESCRIPTION:	Styles that apply to screens 768 pixels wide and down
** USAGE:
** NOTES: Typically this means mobile phones held in landscape
**
*/
@media only screen and (max-width: 767px) {
  #mn5 {
    border: none !important;
  }
  #site-search {
    display: none !important;
  }
  #main-nav {
    -webkit-transform: translate3d(0, 0, 0);
  }
  #main-nav h1 {
    margin: 0;
    width: 100%;
    font-size: 1.231em;
    text-align: center;
    display: block;
    padding: .23em 0;
    background: #98341c;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #98341c), color-stop(1, #792427)) !important;
    background: -webkit-linear-gradient(top, #98341c 0%, #792427 100%) !important;
    background: -moz-linear-gradient(top, #98341c 0%, #792427 100%) !important;
    background: -o-linear-gradient(top, #98341c 0%, #792427 100%) !important;
    background: linear-gradient(top, #98341c 0%, #792427 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= #98341c , endColorstr= #792427 );
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    -o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  }
  #main-nav h1 a {
    color: #fff;
  }
  #main-nav h1 a:hover {
    text-decoration: none;
    background: none;
  }
  #main-nav ul {
    position: absolute;
    background: #792427 !important;
    overflow: hidden;
    height: 0;
    margin-top: 0;
    height: 0;
    -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
    -o-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
  }
  #main-nav ul .resource {
    display: block;
    top: 0;
    left: 0;
    padding: 16px 18px;
  }
  #main-nav ul li {
    top: 0;
    left: 0;
    position: relative;
    text-transform: none;
    font-size: 1.3em !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none;
    width: 99% !important;
    float: left;
    text-align: center;
    border: none !important;
  }
  #main-nav ul li a {
    padding: .437em 1em !important;
    color: #fff;
    text-shadow: none !important;
  }
  #main-nav ul li a:hover {
    background: none !important;
  }
  #main-nav ul li:last-child {
    border-bottom: none !important;
  }
  #main-nav ul li:hover {
    background: none;
  }
  #main-nav ul li:hover > .sub {
    display: none;
  }
  #main-nav .sub {
    display: none;
  }
}
/*
** 480
**
** DESCRIPTION:	Styles that apply to screens 480 pixels wide and down
** USAGE:
** NOTES: Typically this means mobile phones held in portrait
**
*/
@media only screen and (max-width: 479px) {

}