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

** USAGE:

** NOTES:		These style directives are used on common elements that can
				appear on any page of the site, but are not required on every
				page.



** 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:
**
*/
/* =========================================================================== */
/*
** MASTHEAD
**
** DESCRIPTION:
** USAGE:
** NOTES:
**

*/
#masthead {
  float: left;
}
#masthead h1 {
  text-indent: -999em;
  margin: 24px auto 30px -60px;
  height: 108px;
  width: 459px;
  background: transparent url(../img/logo.png) 0 0 no-repeat;
}
#masthead h1 a {
  display: block;
  height: 108px;
  background: transparent url(../img/logoover.png) 0 0 no-repeat;
  opacity: 0;
}
#masthead h1 a:hover {
  opacity: 1;
}
#site-search {
  display: block;
  float: right;
  height: 53px;
  left: 100px;
  padding-left: 10px;
  position: relative;
  top: 100px;
  width: 24%;
}
#site-search fieldset {
  margin-top: 10px;
  width: 100%;
  padding: 0;
  border-top: 1px solid #404040;
  border-right: 1px solid #4d4d4d;
  border-bottom: 1px solid #666;
  border-left: 1px solid #595959;
  background: #fff;
  -webkit-box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.3);
  -o-box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.3);
}
.subcommittee #masthead h1 {
  background: transparent url(../img/subcommittee-mastheads.png) 0 -6px no-repeat;
}
.subcommittee #masthead a,
.subcommittee #masthead a:hover {
  background: none;
}
.investigations #masthead h1 {
  width: 450px;
  background-position: 0 -6px;
}
.recovery #masthead h1 {
  width: 440px;
  background-position: 0 -135px;
}
.oversight #masthead h1 {
  width: 430px;
  background-position: 0 -263px;
}
.management #masthead h1 {
  width: 400px;
  background-position: 0 -390px;
}
.contracting #masthead h1 {
  width: 470px !important;
  background-position: 0 -518px;
}
.fpfw #masthead h1 {
  width: 470px !important;
  background-position: 0 -778px;
}
.fco #masthead h1 {
  width: 470px !important;
  background-position: 0 -912px;
}
.emdc #masthead h1 {
  width: 470px !important;
  background-position: 0 -647px;
}
.ie7 #masthead h1 a,
.ie8 #masthead h1 a {
  background: none;
}
.ie7 #masthead {
  height: 130px;
}
/*
This is a special media query just for the masthead

	remove the eagle from the masthead  when the eagle�s right wing touches the
	edge of the browser
*/
@media screen and (max-width: 1100px) {
  #masthead h1 {
    margin: 24px auto auto 20px;
    width: 384px;
    background-position: -80px 0;
  }
  #masthead h1 a {
    background-position: -80px -107px;
  }
  #site-search {
    top: 70px ;
  }
  .subcommittee #masthead h1 {
    margin-left: 0;
  }
  .investigations #masthead h1 {
    width: 395px;
    background-position: 0 -6px;
  }
  .recovery #masthead h1 {
    width: 360px;
    background-position: -80px -135px;
  }
  .oversight #masthead h1 {
    width: 330px;
    background-position: -80px -263px;
  }
  .management #masthead h1 {
    width: 300px;
    background-position: -80px -390px;
  }
  .contracting #masthead h1 {
    width: 380px;
    background-position: -80px -518px;
  }
}
/*
** 960 Up
**
** DESCRIPTION:	Styles that apply to screens 960 pixels wide and up
** USAGE:
** NOTES: Typically this means desktop users with minimum screen specs
**
*/
@media only screen and (max-width: 960px) {
  #masthead {
    height: 110px;
  }
  #masthead h1 {
    margin: 24px auto auto 40px;
    height: 72px;
    width: 272px;
    background: transparent url(../img/global-sprites.png) 0 -212px no-repeat;
  }
  #masthead h1 a {
    margin: 0;
    height: 104px;
  }
  #site-search {
    width: 30%;
    font-size: 13px;
    height: 22px;
    top: 50px;
  }
  .subcommittee #masthead h1 {
    margin-left: 1em;
    height: 104px;
  }
}
/*
** 768
**
** DESCRIPTION:	Styles that apply to screens 768 and belows pixels wide and down
** USAGE:
** NOTES: Typically this means mobile phones held in portrait
**
*/
@media only screen and (max-width: 767px) {
  #masthead {
    overflow: hidden;
  }
  #masthead h1 {
    margin: 12px auto 0 auto !important;
    padding: 0;
    text-indent: -999em;
    height: 60px !important;
    background: transparent url(../img/mobile/masthead.png) top center no-repeat !important;
  }
  #site-search {
    width: 95%;
    font-size: 13px;
    height: 27px;
    top: 0px !important;
    position: static;
    display: block !important;
    float: left;
    left: inherit;
    border: none !important;
    margin-bottom: 32px;
  }
  .investigations #masthead h1 {
    background-position: center -74px !important;
  }
  .recovery #masthead h1 {
    height: 69px !important;
    background-position: center -148px !important;
  }
  .oversight #masthead h1 {
    height: 69px !important;
    background-position: center -236px !important;
  }
  .management #masthead h1 {
    height: 68px !important;
    background-position: center -324px !important;
  }
  .contracting #masthead h1 {
    height: 67px !important;
    background-position: center -412px !important;
  }
}
/*
This is a special media query just for the masthead

	remove the eagle from the masthead  when the eagle�s right wing touches the
	edge of the browser

@media screen and (min-width: 1100px) {


	#masthead {
		h1 {
			margin: 24px auto auto -60px;
			width: 404px;
			background-position: 0 0;

		a {
			background-position: 0 -107px; }

		}
	}
}
*/