/* Copyright © 2014 Sanborn.  All rights reserved. */

/*
    Header Customization
  
    By default, the viewer shows its title in the header.  You can override this
    by placing your own custom HTML inside Header.ascx.  Style the contents of
    your header by modifying this file. 
*/

/* == default styles, please do not change == */

.embed #header .logoPanel, .embed #header .obliquePanel {
  display: none;
}

#header
{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  height: 40px;
  behavior: url(Styles/PIE.htc);
  background-color: rgba(0, 0, 0, 0.5);
  -pie-background: rgba(0, 0, 0, 0.5);
  z-index: 6;
}

.embed #header {
  background-color: rgb(19, 83, 165);
}

#header div 
{
  color: white;
}

#header .logoPanel
{
  position: absolute;
  left: 0;
  width: 105px;
  height: 100%;
}

.obliquePanel
{
  position: absolute;
  left: 105px;
  width: 140px;
  height: 100%;
}

#header .logoPanel img
{
  height: 30px;
  padding: 5px;
}

.HeaderContent
{
  position: absolute;
  height: 100%;
  left: 245px;
  right: 200px;
}

.embed .HeaderContent {
  left: 0px;
}

.Title {
  position: absolute;
  padding-top: 7.5px;
  padding-left: 8px;
  font-size: 17px;
}

.titleLine 
{
  border-right: 1px solid;
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 0;
}

#datePanel
{
  position: absolute;
  top: 0;
  /*Normal*/
  right: 4px;
  /*End Normal*/
  /*Dubai*/
  /*right: 160px;*/
  /*End Dubai*/
  /*Ford*/
  /*right: 130px;*/
  /*End Ford*/
  /*Normal*/
  width: 200px;
  /*End Normal*/
  /*Santa Clara*/
  /*width: 300px;*/
  /*End Santa Clara*/
  /*Teton WY*/
  /*width: 225px;*/
  /*End Teton WY*/
  /*Bexar*/
  /*width: 300px;*/
  /*End Bexar*/
  height: 100%;
  padding-top: 10px;
  text-align: center;
  z-index: 3;
}

#datePanel label
{
  opacity: 0.6;
}

/*Dubai*/
/*#custLogo
{
  position: absolute;
  top: 0;
  right: 10px;
  width: 150px;
  height: 100%;
  z-index: 3;
}

#custLogo img
{
  width: 100%;
  height: 100%;
}*/
/*End Dubai*/

/*Ford*/
/*#custLogo
{
  position: absolute;
  top: 0;
  right: 10px;
  width: 120px;
  height: 100%;
  z-index: 3;
}

#custLogo img
{
  width: 100%;
  height: 100%;
}*/
/*End Ford*/

/* == your overrides of the default styles above == */

/* Change the height of the header if necessary to accomodate your content.  */
/* You can also change the background color.  Note that we're using CSS3 PIE */
/* (http://css3pie.com) to support HTML 5 colors with transparency in IE.    */

#header
{
  height: 40px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}

/* If you change the height of the header, move the zoom bar and control buttons */
/* down to compensate.  The top of the controlPanel should be 15px greater than  */
/* the header height. */

#controlPanel
{
  top: 80px;
}

/* Change the font and color of the default title if necessary */

.Title
{
}

/* == additional styles for your custom header content == */

@media (max-width: 750px) {
  .obliquePanel {
    left: 0;
  }
  .HeaderContent {
    left: 140px;
  }
  #header .logoPanel {
    display: none;
  }
}

@media (max-width: 600px) {
  .HeaderContent {
    left: 0;
  }
  #header .logoPanel, .obliquePanel {
    display: none;
  }
}

@media (max-width: 500px) {
  .HeaderContent {
    left: 0;
    right: 0;
  }
  #header .logoPanel, .obliquePanel, #datePanel {
    display: none;
  }
}