/*
==============================================================================
**
** AMEND BASE CSS
**
** SCOPE: 		GLOBAL
** REVISION:	0.1
** DATE:		05/26/10
** AUTHORS:		DUNCAN MCALESTER (DUNCAN@LAYER-51.COM)
** USAGE:		This is a base CSS for all Amend based sites. Specific design
				styles should be applied in their own style sheets
** NOTES:		Includes a modified HTML5 boilerplate CSS http://html5boilerplate.com/
				


** REVISION HISTORY
------------------------------------------------------------------------------
12/30/10:	Replaced the meyer reset with the HTML5 boilerplate - DM




==============================================================================
*/

#main-nav select,
#office-locations-mobile,
#mobile-contact {
  display: none;
}


@media screen and (max-width: 960px) {
  
	.fixed #container {
		width: 			100%;
	} 
	
	#main-nav {
		height: 		auto;
	}
	
	#main-nav li {
		margin-right: 	35px;
		margin-left: 	0;
	}
	
	
	
	#map {
		float: none;
	}
	
	/*  home page */
	
	/* hide all sliders and then show the first one... for the sake of simplicity and in case there are more sliders added */
	
	#breaking-news h1 {
		float:			none;
		margin-bottom:	0;
		width:			140px;
		
	}
	
	#breaking-news-items {
		float:			none;
		margin-bottom:	10px;
		width:			96%;
		height: 		auto;
		padding:		16px 2% 16px 2%;
	}
	
	
	
	#featured-area {
		width: 			728px;
		height: 		514px;
		margin:			0 auto 20px;
	}
	
	#featured-area section {
		width: 	100%;
		height: 359px;
		float: none;
		margin: 0 auto;
	}
	
	#featured-area section.collapsed {
		height: 31px;
		width: 100%;
	}
		
	#featured-area section h1 {
		margin-bottom: 0;
		height: auto;
	}
	
	#featured-area section h1 a {
		text-indent: -10000px;
		height: auto;
		width: 100%;
		float: none;
	}
		
	#featured-area section#slide1 {
		display: 		block;
	}
	
	#featured-area section .slide-content {
		width: 100%;
		margin-left: 0;
	}
	
	#slide1 h1 a {		
		background-position: -351px -227px;
	}
	#slide2 h1 a {		
		background-position: -351px -195px;
	}
	#slide3 h1 a {		
		background-position: -351px -165px;
	}
	#slide4 h1 a {		
		background-position: -351px -131px;
	}
	#slide5 h1 a {		
		background-position: -351px -100px;
	}
	#slide6 h1 a {		
		background-position: -351px -68px;
	}
	
	.article-container {
		width: auto;
	}
	
	#action-center {
		height: 		auto;
		width:			98%;
		overflow:		auto;
		margin: 		auto auto 20px;
	}
	
	#action-center li,
	#action-center li:first-child {
		margin-right: 6%;
		margin-left: 7%;
		width: 20%;
	}
	
	#social-media {
		margin-left: 	1%;
		overflow:		auto;
	}
	
	#recent-news {
		width: 			60%;
		margin-left:	2%
	}
	
	/*  internal pages */
	
	.fixed .col66 {
		width: 			96%;
		margin:			0 auto;
	}
	
	.fixed .col33 {
		width: 96%;
		margin-left: 0;
	}
		
	
	.issue-description {
		width: 71%;
	}
	
	#asides div#search-thomas-pod {
		float: none;
		overflow: auto;
	}
	
	#sam-main ul {
		float:	left !important;
	}
	
	footer {
		width: 98%;
		margin: 0 auto;
	}
}


@media screen and (max-width: 820px) {
	
	#main-nav li {
		margin-right: 20px;
	}
	
}


@media screen and (max-width: 790px) {
	
	
	#masthead {
		width: 						100%;
	}
	
	header {
		margin-bottom: 55px;
	}
	
	#page-tools {
		top: 						111px;
		-webkit-border-radius: 		10px 10px 0 0;
		-moz-border-radius: 		10px 10px 0 0;
		border-radius: 				10px 10px 0 0;
		behavior: 					url(/styles/PIE.htc);
	}
	
	
	#main-nav {
		-webkit-border-radius: 		0 0 10px 10px;
		-moz-border-radius:			0 0 10px 10px;
		border-radius: 				0 0 10px 10px;
		behavior: url(/styles/PIE.htc);
	}
	
	#main-nav li {
		margin-right: 17px;
	}
	
	#main-nav li a {
		text-indent: 	0;
		display: 		block;
		height: 		30px;
		background: 	none;
		color: 			#fff;
		font-family: 	 "FuturaBTW01-LightConden";
		font-size: 		18px;
		width:			auto !important;
	}
	
	
	#map {
		float: 						left;
	}
	
	#office-locations li {
		width: 95%;
	}
	
	#office-locations li img {
		display:					none;
	}
	
	#office-locations .vcard {
		width:						200px;
		float: 						none;
	}
	
	input, select, textarea {
		width: 93%;
	}
	
	.issue-description {
		float: none;
		width: 100%;
		padding-top: 3px;
	}

}

@media screen and (max-width: 680px) {
	
	#featured-area {
		width: 98%;
	}
	
	#featured-area article {
		margin: 1% auto 2% auto;
		width: 98%;
		height: 250px;
		overflow: hidden;
	}

	
	
	#featured-area section.expanded {
		width: 100%;
	}
	
	.article-container {
		background:		none !important;	
	}
	
	#featured-area nav {
		margin: 0 auto 20px;
		width: 120px;
	}
	
	#featured-area .media-caption {
		float: 		none;
		width: 		98%;
	}
	
	#featured-area .media-container {
		display:		none;
	}

	
}
   
   
@media screen and (max-width: 640px) {
	
	#main-nav {
		text-align:		center;
	}
	
	#main-nav ul {
		display:		none;
	}
	
	#main-nav select {
		display:		inline-block;
	}
	
	#mobile-contact {
	  display:			block;
	  margin:			5px auto 15px;
	  
	position: 			relative;
	
	background-color: 	#E7BC3B;
	background: 		-webkit-gradient( linear, left top, left bottom, color-stop(0, #E7BC3B),color-stop(1, #d88c23));
	background: 		-moz-linear-gradient(center top, #E7BC3B 0%, #d88c23 100%); 
	-pie-background: 	linear-gradient(#E7BC3B, #d88c23); 
	/* behavior: url(/styles/PIE.htc); */ 

	font-family:		"FuturaBTW01-LightConden";
	font-size: 			2em;
	color: 				#9b1c34; 

	text-shadow: 		1px 1px 1px rgba(255,255,255,.33);
	
	border-right: 		1px #d78f28 solid;
	padding: 			15px 0 15px 0;
	text-align:			center;
	width:				200px;
	
	overflow: 			hidden;
	
	-webkit-border-radius: 	10px;
	-moz-border-radius: 	10px;
	border-radius: 			10px;
	behavior: 				url(/styles/PIE.htc);
	 }
	
	#content {
		padding-top: 0;	
	}
	
	div.share {
		float: 		none;
		padding: 	.5em 0;
	}

	#breadcrumbs {
		list-style: none;
		position: relative;
		top: auto;
		left: auto;
		overflow: hidden;
	}
	
	#recent-news {
		width: 			50%;
		margin-left:	2%
	}

	
}
   
   
   
@media screen and (max-width: 480px) {
	
	header {
		margin-bottom: 	0;
	}
	
	#masthead {
		height: 146px;
		-webkit-border-radius: 	0;
		-moz-border-radius:		0;
		border-radius: 			0;
	}
	
	#newsletter-button {
		display: none;	
	}
	
	#page-tools {
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		width: 100%;
	}
	
	#site-search {
		float: none;
		margin: 7px auto auto auto !important;
		width: 300px;
	}
	
	#content aside.right {
		float: 			none;
	}
	
	
	#action-center li,
	#action-center li:first-child {
		margin-right: 	5%;
		margin-left: 	5%;
		width: 			40%;
	}
	
	#twitter-feed {
		padding: 15px 0 10px 15px;
		width: 96%;
	}
	
	#social-media {
		margin: 		10px auto;
		float: 			none;
		width:			96%;
	}
	
	#social-media li,
	#social-media li + li {
		display: 		block;
		width: 			46%;
		margin:			0 2% 20px;
		float: 			left;
		max-width: 		203px;
	}
	
	#recent-news {
		float: 			none;
		width: 			95%;
		margin-left:	auto;
		margin-right:	auto;
	}
	
	#office-locations-mobile {
		display:				block;	
		overflow: 				auto;
		background: 			#8d8d8d;
		border-bottom: 			1px #707070 solid;
		padding: 				20px;
		color: 					#fff;
		-webkit-border-radius: 	10px 10px 0 0;
		-moz-border-radius: 	10px 10px 0 0;
		border-radius: 			10px 10px 0 0;	
	}
	
	#office-locations {
		display:		none;
	}
	
	#site-map {
		display:		none;	
	}
	
	#issues article img {
		max-width: 100%;
		height: auto;
	}
	
	#page-tools {
		top: 101px;
	}
  
  /* Prevent iOS, WinMobile from adjusting font size */
  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } 
}





/*
 * Media queries for responsive design
 */

@media all and (orientation:portrait) { 
  /* Style adjustments for portrait mode goes here */
  
}

@media all and (orientation:landscape) { 
  /* Style adjustments for landscape mode goes here */
  
}

/* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome)  
   Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */