/* November 2010 site redesign: styles for new gray stripe header with gradients and W|A search bar
 *
 */
#header {
  display: block;
  width: 100%;
  min-width: 960px;
  height: 44px;
  background: none;
  margin: 0 auto;
  border-bottom: 1px solid #d1d1d1;
/* 
 -moz-box-shadow: 0 -6px 22px #000;
 -webkit-box-shadow: 0 -6px 22px #000;
  box-shadow: 0 -6px 22px #000;
*/
  padding-top: 0;
  position: relative;
  z-index: 2;
}

#headerContent {
  height: 44px;
}

#waLogo {
  display: block;
  position: absolute;
  left: 0;
  top: 10px;
  height: 26px;
  width: 155px;
}

#queryBar {
  display: block;
  width: 200px;
  height: 24px;
  background: #fed085;
  border: 1px solid #feba2b;
 -moz-border-radius: 6px;
  border-radius: 6px;
  position: absolute;
  top: 8px;
  left: 165px;
}

#queryBorder {
  border: 1px solid #fb6d1b;
  background: white;
 -moz-border-radius: 3px;
  border-radius: 3px;
  position: absolute;
  top: 2px;
  left: 2px;
  width: 194px;
  height: 18px; 
}
    
#header #i {
  background: white;
  border: 0 none;
  font-family: Arial, Verdana, Tahoma;
  font-size: 9px;
  height: 15px;
  line-height: 15px;
  margin: 0;
  vertical-align: top;
  outline: none;
  padding: 2px 0px 0px 0px;
  padding-bottom: 0;
  position: relative;
  left: 3px;
  
}

#submitQuery {
  display: block;
  width: 9px;
  height: 10px;
  margin: 0;
  padding: 0;
  background: #fb6c1d;
  border: 0 none;
 -moz-border-radius: 2px;
  border-radius: 2px;
  position: absolute;
  top: 4px;
  right: 4px;
  cursor: pointer;
  color: white;
  -webkit-appearance: none;
}

#eq {
  display: block;
  width: 5px;
  height: 2px;
  border: 1px solid white;
  border-width: 1px 0;
  background: transparent;
  position: absolute;
  top: 7px;
  right: 6px;
}

#eq:hover {
  cursor: pointer;
}

#nav {
  display: block;
  height: 10px;
  position: absolute;
  right: 0;
  top: 17px;
}

#nav a {
  color: #666;
  float: left;
  font-size: 11px;
  font-family: arial, sans-serif;
  font-weight:bold;
  line-height: 10px;
  padding: 0 12px; 
}
#nav a:hover { color:#111; }

#pageTitle {
  display: block;
  background: #222;
  background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(55,55,55)), color-stop(1, rgb(21,21,21)) );
  background: -moz-linear-gradient( center top, rgb(55,55,55) 0%, rgb(21,21,21) 100% );
  z-index:6;
  min-width: 960px;
}  

#pageTitle h1 {
  background: transparent no-repeat 0 20px;
  display: block;
  position: relative;
  width: 960px;
  margin: 0 auto;
  padding: 0;
  height: 63px;
  color: #fff;
  font: normal normal normal 27px/63px Georgia, serif;
  z-index:7;
}

#pageTitle h1 .titletext {
  left: -10000px;
  position: absolute;
}

#pageNav {
    display: block;
    margin-left: 15px;
    /*margin-top: -7px;*/
    vertical-align: middle;
    z-index:8;
}
#pageNav > a {
    color: #ddd;
    display: inline-block;
    float: left;
    font-family: Arial, Verdana, Tahoma;
    font-size: 13px;
    line-height: 54px;
    padding: 9px 15px 0;
    position: relative;
}

#pageNav > a:hover {
    color: #fff;
}

#pageNav > .selected {
    background-color: #767573;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(160, 160, 160)), color-stop(1, rgb(120, 119, 117)));
    background: -moz-linear-gradient(center top, rgb(160, 160, 160) 0%, rgb(120, 119, 117) 100%);
    display: inline-block;
    float: left;
    font-family: Arial, Verdana, Tahoma;
    font-size: 13px;
    line-height: 54px;
    padding: 9px 15px 0;
    position: relative;
    cursor:default;
    color:#fff;
    z-index:9;
}
#pageNav > .selected {
  -moz-box-shadow: inset 0px 3px 5px #666;
  -webkit-box-shadow: inset -0px 5px 5px #666;
  box-shadow: inset 0px 5px 5px #666;
}
#pageNav > .selected:hover {
    color:#fff;
}

#pageNav > .selected > .arrow {
    background: transparent url(/common/alpha/images/header-nav-arrow.png) no-repeat center 0;
    bottom: -10px;
    display: block;
    height: 10px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index:10;
}

#pageTitle > h1 > .selected {
    cursor:default;
}

.pagewidth {
  width: 960px;
  margin: 0 auto;
  position: relative;
}

.spacer {
    clear: both;
    font-size: 0;
    height: 0;
    line-height: 0;
}

/* fallback styles for dinosaur browsers */

.no-cssgradients #header {
  background:url(/common/alpha/images/header-top.png) repeat-x top center transparent;
}
.no-borderradius #queryBar {
  background:url(/common/alpha/images/header-field.png) no-repeat top left transparent;
  border:0px;
  padding:2px;
  width:203px;
  height:22px;
  overflow:hidden;
}
.no-borderradius #queryBorder {
  border:0px;
  margin-top:2px;
  margin-left:3px;
  height:17px;
  overflow:hidden;
}
.no-borderradius #queryBorder #i {
  padding-top:2px;
}

.no-borderradius #submitQuery {
  background:url(/common/alpha/images/header-equals.gif) no-repeat left top transparent;;
}

/* not in the header but shared across pages that has the header */

.heading-shadow {
  text-shadow:0 1px 1px #999;
}
.gradient-banner,
.heading-gradient {
  background-color: #F5F7F8;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(255, 255, 255)), color-stop(1, rgb(236, 240, 242))) !important;
  background: -moz-linear-gradient(center top, rgb(255, 255, 255) 0%, rgb(236, 240, 242) 100%) !important;
}

.proLink, .proLink:link, .proLink:active, .proLink:visited {
    position: absolute;
    right: 0;
    color: #DB0303;
    font: normal normal bold 12px/63px arial, sans-serif;
}

#pageTitle h1#waPro {
    background: transparent url("/pro/images/wa-interactive-pro.png") 0 0 no-repeat !important;
    display: inline-block;
    left: 496px;
    margin: 0;
    text-indent: -9999px;
    top: 19px;
    width: 507px;
    position: relative;
    left: 0px;
}