/*normal size range, from phone to ipad portrait*/
/*@media only screen and (min-width : 481px) and (max-width : 768px) {*/


/*for ipad portrait mode*/	
@media only screen and (min-width : 610px) and (max-width : 819px) {
	
	/*main content box styles*/

	
	.box_left, .box_left2, .box_left3 {
		width: 100%;
		clear: both;
	}
	
	.box_right, .box_right2, .box_right3 {
		float: left;
		width: 100%;
		clear: both;
	}
			
		.box_left div, .box_left2 div, .box_left3 div {
			min-height: 0px;
		}
	
		.box_right div, .box_right2 div, .box_right3 div {
			min-height: 0px;
			float: left; /*these divs need to be floated because they contain floating items.  To contain those items the divs too need to float.  However, this breaks ie 6 rendering.*/
		}	
		
		.box_center div {
			width: 90%;
		}
		
	
	/*EHDI Meeting Sponsor div*/
	div#ehdi-meeting-sponsor {
		width: 100%;
	}
	
	
	/*sidebox social media styles for larger icons*/
	
	
	#inner-4-icons {
		width: 90%;
	}

	.thumbnail-4-icons {
		width: 4.3em;
		margin: 0 3em 0 2.4em;
	}
	
	div.thumbnail-4-icons img {
		width: 150%;
		display: block;
		height: auto;
		margin: 0 10px 0 0;
	}
	
	
	
	
	
	#inner-5-icons {
		width: 90%;
	}

	.thumbnail-5-icons {
		width: 4.3em;
		margin: 0 3em 0 2.4em;
	}

	div.thumbnail-5-icons img {
		width: 150%;
		display: block;
		height: auto;
		margin: 0 10px 0 0;
	}
	
	
	
	
	
	#inner-6-icons {
		width: 90%;
	}

	.thumbnail-6-icons {
		width: 4.3em;
		margin: 0 3em 0 2.4em;
	}

	div.thumbnail-6-icons img {
		width: 150%;
		display: block;
		height: auto;
		margin: 0 10px 0 0;
	}
	
		
}



/*normal iPhone range:*/
/*@media only screen and (min-width : 200px) and (max-width : 480px) {*/


/*mobile styles, for phones*/
@media only screen and (min-width: 200px) and (max-width: 609px) {
	
	.box_right, .box_right2, .box_right3 {
		float: left;
		width: 100%;
		clear: both;
	}
	
	.box_left, .box_left2, .box_left3 {
		width: 100%;
		clear: both;
	}
	
		.box_left div, .box_left2 div, .box_left3 div {
			min-height: 0px;
		}
	
		.box_right div, .box_right2 div, .box_right3 div {
			min-height: 0px;
			float: left; /*these divs need to be floated because they contain floating items.  To contain those items the divs too need to float.  However, this breaks ie 6 rendering.*/
		}
		
		.box_center div {
			width: 90%;
		}
		
		
	
	/*EHDI Meeting Sponsor div*/
	div#ehdi-meeting-sponsor {	
		width: 100%;
	}	
		
		
	
	#inline-top {
		margin: 1em 0 3em 0;
	}
	
	img.archive {
		padding-bottom: 5px;
	}
	
	
	
	
	/*sidebox social media styles for larger icons*/
	
	
	#inner-4-icons {
		width: 90%;
	}

	.thumbnail-4-icons {
		width: 4.3em;
		margin: 0 3em 0 2.4em;
	}
	
	div.thumbnail-4-icons img {
		width: 150%;
		display: block;
		height: auto;
		margin: 0 10px 0 0;
	}
	
	
	
	
	
	#inner-5-icons {
		width: 90%;
	}

	.thumbnail-5-icons {
		width: 4.3em;
		margin: 0 3em 0 2.4em;
	}

	div.thumbnail-5-icons img {
		width: 150%;
		display: block;
		height: auto;
		margin: 0 10px 0 0;
	}
	
	
	
	
	
	#inner-6-icons {
		width: 90%;
	}

	.thumbnail-6-icons {
		width: 4.3em;
		margin: 0 3em 0 2.4em;
	}

	div.thumbnail-6-icons img {
		width: 150%;
		display: block;
		height: auto;
		margin: 0 10px 0 0;
	}
	
	
	
	/*Even larger icons for mobile devices*/
	/*sidebox social media styles for larger icons*/
	
	/*
	#inner-4-icons {
		width: 90%;
	}

	.thumbnail-4-icons {
		width: 4.3em;
		margin: 0 5em 0 1.6em;
	}
	
	div.thumbnail-4-icons img {
		width: 200%;
		display: block;
		height: auto;
		margin: 0 10px 0 0;
	}
	
	
	
	
	#inner-5-icons {
		width: 90%;
	}

	.thumbnail-5-icons {
		width: 4.3em;
		margin: 0 5em 0 1.6em;
	}

	div.thumbnail-5-icons img {
		width: 200%;
		display: block;
		height: auto;
		margin: 0 10px 0 0;
	}
	
	*/
	
	
	
	
	
	
	
	/*video sidebox styles*/
	
	#video_wrap {
		background: #fff url(../img/corners/box-b.gif) no-repeat bottom right;
		width: 100%;	
		margin: 0 0 3em 0;
		float: left;
	}
	
	#video {
		padding: 1.5em 0 1em 0;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		float: right;
	}
	
	.vid_icon {
		float: left;
		width: auto;
		margin: 0 0 0 3.6em;
		_margin: 0 0 0 2em; /*This hack (the underscore before the rule) targets ie6 and lower only*/
		background: #fff;
	}
	
	.vid_icon_right {
		float: left;
		width: auto;
		margin: 0 0 0 3.6em;
		_margin: 0 0 0 2em; /*This hack (the underscore before the rule) targets ie6 and lower only*/
	}

	
	
}