/* For small desktop and laptop screens */

@import url("css/elements.less");

@media screen and (max-width: 970px), 
       screen and (max-device-width: 970px) {

	body { font-size: 100%;	}

	.body {
		clear: both; 
		margin: 0 auto; 
		width: 100%; 
		max-width:970px; 
		min-width: 460px;
	}
	
	section#content {
		padding: 0px 0px 30px 0; 
		
		.columns3, .columns2 {
			.columns(auto, 1, 1.5em, #fff, solid, 0px);
		}

		p {	font-size: 0.875em;	padding: 0 20px; }
		h3 {font-size: 1.25em;	padding: 0 20px; }
		h4 {font-size: 1em; 	padding: 0 20px; }
		h5 {font-size: 1em; 	padding: 0 20px; 	margin-left: 0; }
		
		li {font-size: 0.875em;	padding: 0px; 		margin-left: 22px; 
			h4 { }
			h5 { padding: 0px; }
		}

		aside.idealproducts {
			float: left;
			clear: both;
			margin: 20px 20px 0;
		}
	}
	
	section#featuredlinks {
		.gradient(#00477b, #007ca8, #00477b);
		width: 100%;
		height: auto;
	
		a {
			width: 33%;
			min-width: 220px;
		}
	}
	
	body#index section#content { background: url('images/logo-trans-pipe.png') no-repeat; }
	
	div#transparentlogo { display: none; }

	ul#subnav {
		position: relative;
		top: -29px;
	
		li {
			width: 11.5em;
			margin-bottom: 5px;
			height: 30px;
				
			a {
				width: 13em;
				height: 30px;
				font-size: 0.875em;	
				line-height: 2.1;
			}
		}
	}
	
	table td { font-size: 1em; }
	
	table.DataTable { padding-left: 20px; }
	
	table.DataTable td { font-size: 1em; }
}


/* For iPad and netbooks */
@media screen and (max-width: 700px) {

	header#mainheader {	height: 154px; }
	header#mainheader nav {	height: 65px; }
	ul#topnav {	width: 28em; }
	ul#topnav a { width: 7em; font-size: 1.25em; line-height: 65px; }
	ul#topnav li { width: 7em; }
	ul#topnav li a { width: 5.5em; }
	ul#topnav li ul#topnavproducts, ul#topnav li ul#topnavproducts li a { width: 8em; }
	ul#topnav li ul#topnavscenarios, ul#topnav li ul#topnavscenarios li a { width: 12em; }
	ul#topnav li ul#topnavtools, ul#topnav li ul#topnavtools li a { width: 12em; }
	ul#topnav li ul#topnavaboutus, ul#topnav li ul#topnavaboutus li a { width: 12em; }
	ul#topnav li ul li a { line-height: 1.5em; padding: .6em 8px; }
	ul#topnav li ul li a span {	padding-left: 0px; }
}


/* For iPhone and other mobile devices */
@media screen and (max-device-width: 480px), 
       screen and (-webkit-min-device-pixel-ratio: 2) {

	body {
		-webkit-text-size-adjust: none;
	}
	img {
		max-width: 100%;
		height: auto;
	}
}