/*
BASE (MOBILE) SCREENS
These base styles apply to all screen sizes, but may be overridden on larger screens by the media query-driven styles that appear later in this file.
*/

/* Typography */

h1, h2, h3 {
	font-family: 'Open Sans Condensed', Arial, sans-serif; 
	font-weight:700;
	margin: 0;
}

h2 {
	font-size: 23px;
	line-height: 26px;
	margin: 0 0 0 0;
}

p {
	font-size: 19px;
	line-height: 26px; 
	margin: 0 0 0 0;
}



/* Structure */  

#services {
	padding-top: 20px; 
	padding-bottom: 40px; 
} 

#extras {
	background-color: #e5e5e5;  /* 90% white */
	padding-top: 20px; 
	padding-bottom: 40px; 
}

#plumbing, #heating, #water_treatment, #financing, #about {
	margin-top: 20px; 
	margin-left: 40px;
}


/*
PHONES in LANDSCAPE ORIENTATION

*/
@media only screen and (min-width: 475px) {

}




/*
TABLETS in PORTRAIT ORIENTATION

*/
@media only screen and (min-width: 700px) {
	
/* Typography */

h2 {
	font-size: 17px;
	line-height: 19px;
}

p {
	font-size: 14px;
	line-height: 19px; 
}



/* Structure */  

#services, #extras {
	padding-top: 40px; 
	padding-bottom: 40px; 
} 

#plumbing, #heating, #water_treatment, #financing, #about {
	margin-top: 0; 
}

#plumbing {
	float: left;
	margin-left: 55px;
	width: 22.64%
}

#heating {
	float: left;
	margin-left: 6.72%;
	width: 28.61%
}

#water_treatment {
	float: left;
	margin-left: 7.72%;
}

#about {
	float: left;
	margin-left: 55px;
	width: 54.97%;
}

#financing {
	float: left;
	margin-left: 10.72%;
	width: 20.61%;
}


} 



/*
TABLETS in LANDSCAPE & SMALLER LAPTOPS
This is the first appearance of the "desktop layout"
*/
@media only screen and (min-width: 900px) {
	
h2 {
	font-size: 21px;
	line-height: 24px;
	margin: 0 0 0 0;
}

p {
	font-size: 18px;
	line-height: 24px; 
	margin: 0 0 0 0;
}


}



/*
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*/
@media only screen and (min-width: 1050px) {

h2 {
	font-size: 23px;
	line-height: 26px;
	margin: 0 0 0 0;
}

p {
	font-size: 19px;
	line-height: 26px; 
	margin: 0 0 0 0;
}


/* Structure */  

#services, #extras {
	padding-top: 40px; 
	padding-bottom: 40px; 
} 

#plumbing, #heating, #water_treatment, #financing, #about {
	margin-top: 0; 
}

#plumbing {
	float: left;
	margin-left: 130px;
	width: 22.64%
}

#heating {
	float: left;
	margin-left: 4.72%;
	width: 28.61%
}

#water_treatment {
	float: left;
	margin-left: 5.72%;
}

#about {
	float: left;
	margin-left: 130px;
	width: 49.97%;
}

#financing {
	float: left;
	margin-left: 11.72%;
	width: 20.61%;
}


}