/*Portrait Tablet Exceptions to adjust padding in content areas. In this query we include a simple 
exception rule to adjust the padding in all content areas to a value less than the default.*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	.wrapper{
		width: 100%;
	}
	.mainnav{
		padding-left: 10px;
	}
	.subnav{
		padding: 0 0 0 10px;
	}
	.header .logo{
		padding-right: 10px;
	}
	
	/* == knowledge page == */
	.boxes, 
	.boxes.pressroom{
		width: 95%;		
	}
	.boxes .left{
		width: 32%;
		margin: 0;
		padding: 0;
	}
	.boxes .middle{
		width: 32%;
		margin: 0 0 0 2%;
		padding: 0;
	}
	.boxes .right{
		width: 32%;
		margin: 0;
		padding: 0;
	}
	.boxes.pressroom .left{
		background-image: url(../images/pressroom_icon.png);
		background-position: left middle;
		background-repeat: no-repeat;
		width: 25%;
		padding: 0 0 0 5%;
	}
	.boxes.pressroom .middle{
		background-image: url(../images/pressroom_icon.png);
		background-position: left middle;
		background-repeat: no-repeat;
		width: 25%;
		padding: 0 0 0 5%;
	}
	.boxes.pressroom .right{
		background-image: url(../images/pressroom_icon.png);
		background-position: left middle;
		background-repeat: no-repeat;
		width: 25%;
		padding: 0 0 0 5%;
	}
	#supplydemandimage,
	.supplydemandchart,
	.banner2 img{
		width: 700px;
		height: auto;
	}
	#supplydemandcharttext{
		width: 230px;
	}
	/* == santuaries page == */
	#design .linemarker{
		position: absolute;
		margin-left: 48%;
		z-index: 100;
	}
	#location .linemarker{
		float: left;
		margin-left: 48%;
	}
	
	/* == contact page == */
	.boxes.contact .left{
		width: 20%;
		height: 70px;
		padding: 10px 0 0 10%;
		margin-right: 2%;
	}
	.boxes.contact .middle{
		width: 20%;
		height: 70px;
		padding: 10px 0 0 10%;
		margin-left: 3%;
		margin-right: 3%;
	}
	.boxes.contact .right{
		width: 20%;
		height: 70px;
		padding: 10px 0 0 10%;
		margin-left: 2%;
	}
}
/*Landscape Tablet Exceptions to adjust padding and reduce font size. When a tablet is turned sideways, 
the text will appear larger so this query contains rules that reduces the font-size and padding.*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	.wrapper{
		width: 100%;
	}
	.mainnav{
		padding-left: 10px;
	}
	.subnav{
		padding: 0 0 0 10px;
	}
	.header .logo{
		padding-right: 10px;
	}

}

/* this is a hack to allow fixed width on everything EXCEPT for phones (below) */
@media only screen and (min-device-width : 680px){
}


/*1 Column for Narrow Browser Windows (between 0 and 679 pixels) and Smartphones in both orientations. 
In this query we linearize all of the columns so that they stack vertically by setting float to none and width to auto. We also use this query to move the menu to the top of the layout and stack its links neatly in a vertical orientation. */
@media only screen and (min-width: 0px) and (max-width: 679px) {
	.wrapper,
	p.italic,
	.boxes,
	.boxes.pressroom{
		width: 95%;
	}
	.header{
		height: 100px;
	}
	.mainnav{
		width: 100%;
		margin-top: 20px;
		float: right;
		text-align: center;
	}
	.mainnav ul li{
		margin: 0 3px 0 3px;
	}
	.header .logo{
		width: 100%;
		text-align: center;
		padding-top: 10px;
	}
	.subnav{
		text-align: center;
		padding: 0 0 0 0px;
	}
	.subnav ul li{
		margin-right: 8px;
		margin-left: 8px;
	}
	.subnav ul li a{
		font-size: 10px;
	}
	.linemarker{
		display: none;
	}
	#design p.italic{
		font-size: 9px;
	}
	h1{
		font-size: 30px;
	}
	
	.banner,
	.banner2{
		height: 200px;
	}
	.banner img,
	.banner2 img,
	.supplydemandchart{
		width: 95%;
		height: auto;
	}
	.boxes .left,
	.boxes .right,
	.boxes .middle{
		margin: 0 0 10px 0;
		padding: 0 0 0 0;
		float: left;
		width: 100%;
	}
	
	/* == home page == */
	#homebanner img{
		width: 95%;
		height: auto;
	}
	#homepage #logo{
		padding-top: 20px;
	}
	#learnmore{
		padding-top: 30px;
	}
	
	/* == knowledge page == */
	#supplydemandimage{
		display: none;
	}
	#supplydemandimage_fixed{
		display: block;
	}
	#supplydemandimage_fixed img{
		width: 100%;
		height: auto;
	}
	.boxes.pressroom p{
		margin-top: 0px;	
	}
	.boxes.pressroom .left,
	.boxes.pressroom .middle,
	.boxes.pressroom .right{
		margin: 0 0 10px 0;
	}
	.boxes.pressroom .clear{
		padding: 0px;
	}
	
	/* == santuaries == */
	ul.bxslider li h2{
		font-size: 9px;
	}
	.bx-wrapper .bx-controls-direction a {
		top: 10%;
		display: none;
	}
	#location{
		height: 248px;
		background-image: url(../images/zinnia-map_fixed.jpg);
	}
	/* == contact page == */
	.boxes.contact .left,
	.boxes.contact .right,
	.boxes.contact .middle{
		padding: 15px 0 10px 70px;
	}
	.map{
		display: none;
	}
	.map_fixed{
		display: block;
	}
	.map_fixed img{
		width: 100%;
		height: auto;
	}
	
	#footer p{
		color: #AAA;
	}
	#footer a{
		color: #AAA;
	}
}