/*
==============================================================================
**
** MEDIA QUERIES
**
** SCOPE: 		GLOBAL
** REVISION:	0.1
** DATE:		03/21/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:
**
*/
/*
** SPECIFIC COLORS
**
** DESCRIPTION:	Define the shape color and size of the container
** USAGE:		
** NOTES:
**
*/
/*
** CONTAINER
**
** DESCRIPTION:	Define the shape color and size of the container
** USAGE:		
** NOTES:
**
*/
/*
This is not working, but eventually I think it makes more sense to define border radius
here than have each element need a border radius element that get's set to zero;
.container-radius() {
	.less-radius(10px,10px,10px,10px);
	.ie-pie();
}
*/
/*
** MAIN NAV
**
** DESCRIPTION:	Class to be applied to any button
** USAGE:		
** NOTES:
**
*/
/*
** BUTTON
**
** DESCRIPTION:	Variables for standard buttons
** USAGE:		
** NOTES:
**
*/
/* Over Button Variables */
/* Pressed Button Variables */
/* Asides Figure Image Shadow */
/* =========================================================================== */
@media screen and (max-width: 1021px) {
  body {
    background-position: 137px 0;
  }
  #masthead hgroup h1 {
    background-position: -120px -110px;
  }
}
/*
** 768 Up
**
** DESCRIPTION:	Styles that apply to screens 768 pixels wide and up
** USAGE:		
** NOTES: Typically this means tablets users in portrait mode and desktop users smaller than average screens
**
*/
@media only screen and (max-width: 768px) {
  body {
    font-size: 90%;
  }
  h1 {
    font-size: 1.431em;
  }
  header h2 {
    font-size: 1em;
  }
  #site-search {
    display: none !important;
  }
  #toolbar {
    position: relative;
  }
  #main-nav {
    width: 100%;
    -webkit-transform: translate3d(0, 0, 0);
  }
  #main-nav h1 {
    margin: 0;
    width: 100%;
    height: 25px;
    font-size: 1.231em;
    text-align: center;
    display: block;
    padding: 11px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.33);
  }
  #main-nav h1 a {
    color: #fff;
  }
  #main-nav h1 a:hover {
    text-decoration: none;
    background: none;
  }
  #main-nav ul {
    font-family: sans-serif;
    position: absolute;
    background: #1f3352 !important;
    overflow: hidden;
    font-size: .825em;
    width: 100%;
    padding: 0;
    margin-top: 0;
    height: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.6);
    -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;
    border-bottom: 1px solid #fff;
    width: 49% !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 #mn1 {
    background: none;
    padding: 0;
    height: auto;
    margin: 0;
  }
  #main-nav #mn1:hover {
    background: none !important;
  }
  #main-nav .sub {
    display: none;
  }
  #social-media {
    display: none;
  }
  #home #container,
  #home #main,
  #action-center,
  #recent-news,
  #hot-topics {
    width: 100% !important;
    overflow: hidden;
    padding: 0;
    margin: 0 auto;
  }
  #home #content {
    width: 90%;
    padding: 5%;
  }
  #featured-area {
    background: #264765 url(/styles/img/noise.png) 0 0 repeat;
    width: 100%;
    height: auto;
  }
  #featured-area article {
    padding: 5%;
    height: 420px !important;
    min-height: 420px;
  }
  #featured-area article .text {
    width: 100%;
    padding: 0;
    margin: 0;
    float: none;
  }
  #featured-area article .media,
  #featured-area article object {
    margin-bottom: 1em;
    width: 100%;
    float: none;
  }
  #featured-area nav {
    background: url(/styles/img/mobile-sprites.png) center -162px no-repeat;
    margin: 0 auto;
    width: 100%;
    padding: 2.618em 0;
  }
  #action-center {
    background: none;
    position: relative;
    height: auto;
    padding-bottom: 1em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.8);
    background: #761312;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #761312), color-stop(1, #580a11)) !important;
    background: -webkit-linear-gradient(top, #761312 0%, #580a11 100%) !important;
    background: -moz-linear-gradient(top, #761312 0%, #580a11 100%) !important;
    background: -o-linear-gradient(top, #761312 0%, #580a11 100%) !important;
    background: linear-gradient(top, #761312 0%, #580a11 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= #761312 , endColorstr= #580a11 );
  }
  #action-center li:first-child {
    margin: 0;
    padding: 0;
  }
  #action-center li {
    float: none;
    text-align: left;
    background: none;
    margin: 0.9em 2% 0.06666666666666667em 0;
    padding-left: 3%;
  }
  #recent-news {
    background: none;
    background: #f2eddc;
  }
  #recent-news h1 {
    text-align: left;
    margin: .625em 30px .625em 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }
  #recent-news ul {
    margin: 0;
    padding: 0 30px 30px 30px;
  }
  #hot-topics > h1 {
    margin: 5% 5% -2% 5%;
  }
  #hot-topics li {
    width: 90% !important;
    padding: 5%;
    margin: 0;
    float: none;
  }
  html {
    background-attachment: scroll;
  }
  #masthead {
    position: relative;
    height: 100px;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }
  #masthead h1 {
    margin: 2px auto 0 auto;
    padding: 0;
    text-indent: -999em;
    width: 360px;
    background: url(/styles/img/mobile-sprites.png) center -242px no-repeat;
  }
  #container,
  #site-footer,
  #asides,
  #main {
    width: 100% !important;
    overflow: hidden;
    padding: 0;
    margin: 0 auto;
  }
  #main {
    float: none;
  }
  #asides {
    float: none;
    clear: both;
    margin: 2em auto;
    width: 100% !important;
  }
  .ie7 #content {
    width: 90%;
    padding: 5%;
    top: 30px !important;
    margin-bottom: 30px;
  }
  #content {
    width: 90%;
    padding: 5%;
  }
  #office-locations {
    position: relative;
    background: none;
    float: none;
    width: 100%;
    height: auto;
    padding-bottom: 2em;
    overflow: auto;
    background: #56412b;
    /* 	
			Note: The smaller radius is for older WebKit browsers 
			that had major performance issues when using large radii. 
			Leave as is, modern WebKit will use the vendor-less 
			box-shadow rule 
		*/
    -webkit-box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.33);
    -moz-box-shadow: inset 0 0 85px rgba(0, 0, 0, 0.33);
    -o-box-shadow: inset 0 0 85px rgba(0, 0, 0, 0.33);
    box-shadow: inset 0 0 85px rgba(0, 0, 0, 0.33);
  }
  #office-locations li {
    margin-bottom: 1em;
  }
  #newsletter-cta {
    display: none;
  }
  #email-sign-up {
    position: relative;
    background: url(/styles/img/mobile-sprites.png) 0 -410px repeat-x;
    float: none;
    width: 100%;
  }
}
/*
** 480
**
** DESCRIPTION:	Styles that apply to screens 480 and belows pixels wide and down
** USAGE:		
** NOTES: Typically this means mobile phones held in portrait
***/
@media only screen and (max-width: 479px) {
  #container {
    background: none;
    width: 100%;
  }
  #content {
    width: 100%;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
  }
  #site-footer {
    padding: 5%;
    width: 90%;
  }
  #asides {
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }
}
@media only screen and (max-width: 320px) {
  #masthead h1 {
    margin: 2px auto 0 auto;
    padding: 0;
    text-indent: -999em;
    width: 310px;
    background: url(/styles/img/mobile-sprites.png) center -205px no-repeat !important;
    background-size: 211% 800% !important;
  }
  #featured-area article {
    padding: 4% 2% 0 3%;
    height: auto !important;
    overflow: visible;
  }
  #featured-area article iframe {
    width: 100% !important;
  }
}