/* BEGIN UNIVERSAL RESPONSIVE STYLES */

/* Move to main_screen.css */

	body
	{ 
		font-size: 100%;  /* When this is added to live site, all subsequent font-sizes will need to be bumped down in size. */
   	} 

/* END UNIVERSAL RESPONSIVE STYLES */


/**  RETINA IMAGES **/
@media all and (-webkit-min-device-pixel-ratio: 2) {}


/* 
For screen sizes 1920px or smaller.
The styles in the media query can become the default styles.
The styles for subsequent media queries can be left in a stylesheet
called responsive-max-1200.css;
*/

@media only screen
/* and (max-device-width: 1920px) */
and (max-width: 1920px) {
	
   	body
   	{
   		max-width: 1920px;
   	}
	
	div#skeptic_wholepage 
	{
		width: 80%;
		/* remove background image from default styles.	 */
		background-image: none; 
		background-color: transparent;
		border: none;
		margin: 0 auto;
		padding: 0;
	}
	
	div#skeptic_wholepage h1
	{
		width: 100%;
		height: auto;
		/* 	auto height required */
	}

	div#skeptic_wholepage h1 a
	{
		width: 100%;
		height: auto;
		/* 	auto height required */
	}
		
	div#skeptic_wholepage h1 a img
	{
		width: 100%;
		height: auto;
		/* remove px height from img in html in local and live site */
	}
	
	div#MainContent
	{
		width: 100%;
		background-image: none;
	}
	
	/*
	  sub_navigation, bannerandbodycopy, and  NewsColumnD fit
	  inside of MainContent. Width/margin percentages must total 100%.
	*/
	#sub_navigation
	{
		/* 	important styles can be moved to main css */
		width: 21% !important;
		margin: 1% 1% 0 1% !important;
		padding: 0 !important;
		/* 
			background-image: url(http://www.skeptic.com/images/subnav-fader.png);
		    background-repeat: repeat-x;
		    background-position: 0 0;
			background-color: #bbcccc; */
	}
	
	div.sub_nav_heading 
	{ 
		color: #98A786;
		font-size: 1em;
		line-height: 1.2em;
	}
	
	div#sub_navigation ul.sub_subnav
	{ 
		margin: 0 0 0 0 !important;
	}
	
	div#sub_navigation ul.sub_subnav li a,
	div#sub_navigation ul li a,
	div#sub_navigation div.store_subnav_lv1 a
	{ 
		color: #4F98A6 !important;
		padding: 8px;
		line-height: 1em;
	}
	
	div.store_subnav_lv2 a { color: #4F98A6; }
	
	div#sub_navigation ul.sub_subnav li a:hover,
	div.store_subnav_lv1 a:hover
	{ 
		color: #eeffdd !important;
	}
	
	div#sub_navigation ul.sub_subnav li.this_section a,
	div#sub_navigation ul li.this_section a,
	div.store_subnav_lv1
	{ 
		color: #eeffdd !important;
	} 
	
	#bannerandbodycopy,
	#eskeptic_wholepage
	{
		width: 55% !important;
		margin: 1% 1% 0 0 !important;
	}
	
	/*
	  sub_navigation and storetopbannerandproductarea fit
	  inside of MainContent. Width/margin percentages must total 100%.
	*/
	.storetopbannerandproductarea
	{
		width: 77% !important;
	}
	
	div#eskeptic_wholepage
	{
		border: none !important;;
		padding: 0 !important;
		background-color: transparent;
	}
	
	div#eskeptic_wholepage h3
	{
		height: auto !important;
		width: 100%;
		border: none;
	}
	
	div#eskeptic_wholepage h3,
	div#permalink,
	div.Buzz,
	div.SkepticBlogBuzz,
	div.Introduction,	
	div.Story,
	div.Announcement,
	div#Footnote,
	div.Wiki,
	div.LectureSeries,
	div.MysteryPhoto
	{
		/* Change globally in eskeptic_screen.css once responsive is live */
		border: none;
	}
	
	#bodycopy,
	.Story,
	#Comments,
	.Buzz
	{
		padding: 6% !important;
	}
	
/* BEGIN news responsive box structure */

	div#NewsColumnABCD
	{
		width: 100%;
		margin: 0;
		padding: 0;
	}

	div#NewsColumnABC
	{
		float: left;
		width: 78%;
		margin: 0 1% 0 0;
		padding: 0;
		overflow: hidden;
		clear: none;
	}
	
	div#NewsColumnD
	{
		float: left;
		width: 21%;
		margin: 1% 0 0 0;
		padding: 0;
		overflow: hidden;
		clear: right;
		font-size: 0.85em;
	}
	
	div#NewsColumnAB
	{
		float: left;
		width: 66%;
		margin: 0 1.25% 0 0;
		padding: 0;
		clear: none;
	}
	
	div#NewsColumnC
	{
		float: left;
		width: 32.75%;
		margin: 0 0 0 0;
		padding: 0;
		overflow: hidden;
		clear: none;
	}

	div#NewsColumnAB_JrS /* for Junior Skeptic section only */
	{
		width: 516px;
		margin: 30px auto 0 auto;
		padding: 0;
		clear: none;
	}

	/*  "NewsColumnA" and "NewsColumnB" fit inside of "NewsColumnAB" */
	div#NewsColumnA
	{
		float: left;
		width: 49.075%;
		margin: 0 1.85% 0 0;
		padding: 0;
		overflow: hidden;
		clear: none;
	}

	div#NewsColumnB
	{
		float: left;
		width: 49.075%;
		margin: 0 0 0 0;
		padding: 0;
		overflow: hidden;
		clear: none;
	}

	div.NewsImage, div.NewsImage img
	{
		width: 100%;
	}

/* END news responsive box structure */
	
	div#footer,
	div#copyrightContact
	{
		width: 80%;
		margin: 0;
		padding: 0 10% 0 10%;
		border: none;
	}
	
	div#copyrightContact
	{ 
		padding-top: 2%;
		padding-bottom: 2.5%;
	}
	
}



/*
For screen sizes 1200px or smaller
*/

@media only screen
/* and (max-device-width: 1200px) */
and (max-width: 1200px) {

 	body
	{
		max-width: 1200px;
	}

	div#skeptic_wholepage
	{
		width: 100%;
	}
	
	/* 	sub_navigation, bannerandbodycopy, and NewsColumnD widths, margins, and padding must total 100% */
	#sub_navigation
	{
		width: 22% !important;
		margin: 1% 1% 0 1% !important;
	}	
	
	#bannerandbodycopy,
	#eskeptic_wholepage
	{
		width: 54% !important;
		margin: 0 1% 0 0 !important;
	}
	
	.storetopbannerandproductarea
	{
		width: 76% !important;
	}
	
	div#NewsColumnD
	{
		margin: 0 0 0 0;
	}

}




/* For screen sizes 1000px or smaller */

@media only screen
/* and (max-device-width: 1000px) */
and (max-width: 1000px){

	/* 
	   Remove column D, topnav becomes slidernav, make containers responsive to 1000px. 
	   These style apply to screens 1000px or less, and work in addition to
	   the media queries for smaller devices further down this page. 
	*/
	
   	body
	{
		max-width: 1000px;
	}
		
	div#bodycopy iframe,
	div#bodycopy object,
	div#bodycopy embed,
	div#bodycopy video
	{ 
		width: 97% !important;
	}
	
	.hideOnMobile { display: none; }
	
	div#store_navigation p#storeNavMessage
	{
		margin: 0 1em 0 1.2em;
		font-size: 0.8em;
	}
	
	#headerBanner, .cd-main-header { width: 100%; }
	
	div#skeptic_wholepage
	{
		position: relative;
		width: 100%;
		left: 0;
	}

	div#MainContent
	{
		width: 100%;
		/* background color prevents footer nav from showing through gaps */
		background-color: #36342d;
	}
	
	div#NewsColumnABCD,
	div#NewsColumnABC,
	.cd-search
	{
		width: 100%;
	}
	
	div#NewsColumnABC
	{
		float: none;
	}

	/* 
	  "NewsColumnA" and "NewsColumnB" fit inside of "NewsColumnAB"
	   So, their widths and margin need to add up to 100%
	*/
	div#NewsColumnA
	{
		float: left;
		width: 49.075%;
		margin: 0 1.85% 0 0;
		/* padding: 0; */
	}

	div#NewsColumnB
	{
		float: left;
		width: 49.075%;
		margin: 0 0 0 0;
		/* padding: 0; */
	}

	/*  
	  "NewsColumnAB" and "NewsColumnC" fit inside of "NewsColumnABC"
	   So, their widths and margin need to add up to 100%.
	*/
	
	div#NewsColumnAB
	{
		float: left;
		width: 65%;
		margin: 0 1.25% 0 0;
		/* padding: 0; */
	}
	
	div#NewsColumnC
	{
		float: left;
		width: 33.75%;
		margin: 0 0 0 0;
		/* padding: 0; */
	}
	
	/* 	sub_navigation, bannerandbodycopy widths, margins, and padding must total 100% */
	#sub_navigation
	{
		width: 28% !important;
		margin: 1% 1% 0 1% !important;
	}	
	
	#bannerandbodycopy,
	#eskeptic_wholepage,
	.storetopbannerandproductarea
	{
		width: 70% !important;
		margin: 0 0 0 0 !important;
	}
	
	div#NewsColumnD { display: none; }
	
	.gsc-control-cse { padding: 20px 10px !important; }
	.gsc-input-box { height: 4em; }
	.gsc-input-box table { padding: 0.7em; }
	
	div#footer
	{	
		background: transparent;
		border: 0;
		font-size: 1.1em;
		line-height: 2.4em;
	}
	
	div.column
	{
		width: 250px;	
	}
	
}







/* For screen sizes 768px or smaller */

@media only screen
/* and (max-device-width: 768px) 
max-device-width is the width of the device's entire rendering area, i.e. the actual device screen, the viewport size of the device regardless of orientation
max-width is width of the target display area, e.g. the browser
Makes iPad respond as desired to not use max-device-width.
On iPhone and iPad devices, the device-width always corresponds to the width of the device in portrait mode (ie: 768px), regardless of whether the device is in portrait or landscape orientation. With other devices, device-width changes depending on orientation.
*/
and (max-width: 768px) {

	/* 
	  Set containers to full-width for devices 768px and smaller
	*/
	
	body
	{
		max-width: 768px;
	}
	
	#sub_navigation { display: none; }
	
	#bannerandbodycopy,
	#eskeptic_wholepage,
	.storetopbannerandproductarea
	{
		float: none;
		/* width: auto; */
		width: 100% !important;
	}
	
	#eSkepticDate { display: none; }
	
	div.Story h4
	{
		margin-right: 0;
		margin-left: 0;
	}

	iframe#twitter-widget-0.twitter-timeline-rendered
	{
    	width: 100% !important;
	}
	
	div.backissuelisting
	{
		width: 100%;
	}
	
	div#shareThisArticle div#shareButtons
	{
		float: none;
		margin: 0;
	}
	
	div.pullquote
	{
		float: none;
		width: 92%;
		margin: 1.5em 0;
		padding: 1em;
	}

	div.imageclearall,
	div.imageclearall img
	{
		max-width: 97%;
	}
	
	.imagefloatleft,
	.alignleft,
	.imagefloatright,
	.alignright,
	div.productad 
	{
		float: none;
		margin: 0 0 20px 0;
		max-width: 100%;
	}
	
	img.play, img.thumb, .found_in
	{
		float: none !important;
	}
	
	.digitalEditions 
	{
		float: none;
		width: 90%;
		margin: 1em 0;
	}
	
	img.google
	{
		float: none;
		width: 100%;
	}
	
	div.NewsItem
	{
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
	}
	
	div#NewsColumnAB,
	div#NewsColumnABC
	{
		float: none;
		width: 100%;
	}
		
	/*  "NewsColumnA" and "NewsColumnB" fit inside of "NewsColumnAB" */
	div#NewsColumnA,
	div#NewsColumnB,
	div#NewsColumnC,
	div#NewsColumnD,
	div#NewsColumnAB_JrS
	{
		float: none;
		width: 100%;
		margin: 0;
	}
	
	div.NewsImageSkepticCover
	{
		float: none;
		width: 100%;
	}
	
	div.NewsDescriptionCover
	{
		float: none;
		width: 100%;
	}
	
	div.divider
	{
		width: 100%;
	}
	
	div#share .addthis_sharing_toolbox { display: none; }
	
	div#share p.shareMessage { display: none; }
	
	/* store */
	
	#ship-to,
	#bill-to,
	#login-details
	{
		width: 93%;
	}

	#basket-contents .basket-charges .charge-description,
	#basket-contents .basket-charges .formatted-charge
	{
		white-space: normal;
	}
	
	#storebuttons { max-width: 465px; }
	
	.storeHomeProd, .storeHomeProd.lastinrow 
	{ 
		float: none; 
		width: 100%; 
		margin: 6em 0 1.5em 0;
	}
	
	#storeproductdisplay .product-item
	{
		width: 100% !important;
		float: none;
		min-height: 20em;
		font-size: 0.8em;
	}
	
	#storeproductdisplay .product-item .padding { padding: 2em 0 3em 0; }
	
	#SUBSpage { width: 100%; }
	#subscribePrint, #subscribeDigital { width: 100%; float: none; }
	
	#subscribeDigital h3 { margin-top: 3em; }
}



/* For screen sizes 580px or smaller */

@media only screen
/* and (max-device-width: 580px) */
and (max-width: 580px) {

	div#columnA,
	div#columnB
	{
		float: none !important;
		width: 100% !important;
		margin-right: 0 !important;;
	}
	
	div#magimage img
	{
		width: 96%;
	}
	
	.cd-main-header { height: 3.2em; }
	
	.ORDL .section { float: none; width: 45%; height: auto; }
	.section.grey-border-right { border: none; }
	
	aside,
	div.sidebar
	{
		float: none;
		width: 90%;
		margin: 2% 0 0 0;
		padding: 5%;
	}
	
	.endorsementsColumn
	{
		float: none !important;
		padding-right: 0;
		border-right: none !important;
	}
}

/* For screen sizes 525px or smaller */

@media only screen
/* and (max-device-width: 525px) */
and (max-width: 525px) {

	.bio img.authorphoto { float: none; }
	div.prev-next a { padding: 0.5em 1em; }
	#storeproductdisplay table { font-size: 10px; line-height: 14px; }
	#storeproductdisplay #basket-contents .basket-qty-input { display: block; }

	#storebuttons { max-width: 220px; }
	
}