@charset "utf-8";
/* CSS Document */

body 
{
		font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
		margin: 0;
		padding: 0;
		color:#000;
		background:#FFF;		
}

/************************* BROWSER RESET ********************/
html, body, div, span, applet, object, iframe, blockquote, pre, h1, h2, h3, h4, h5, h6, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike,  sub, sup, tt, var, b, u, i, center, table, caption, tbody, tfoot, thead, tr, th, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	
	
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section 
{
	display: block;
}


a
{
		text-decoration:none;
}


form input, form textarea
{
		max-width:100%;
}


img
{
		border:0;
		max-width:100%;
		height:auto;
}



/********************** IMAGE CLASSESSS ******************************/
.float_left
{
		float:left;
		margin:10px;
		
}

.float_right
{
		float:right;
		margin:10px;
		
}

/******************************** CONTAINER ***************************/
#container 
{
		width:98%;
		max-width:1366px;
		margin: 0 auto;
		
		
			
}

/**************** CONTENT WRAPPER ******************/
#content_wrapper
{
		float:left;
		width:100%;
		margin:0;
		padding-bottom:20px;			
}

/*************** MAIN CONTENT *******************/
#main-content
{
		float:left;
		width:98%;
		height:auto;
		margin:10px 0 10px 10px;
		
}

#main-content h1
{
		padding-bottom:10px;
}


/************* HEADER CONTAINER *****************/
#header_container
{
		float:left;
		width:100%;
		margin:0;
		background:#d2d2d2;
					
}

#header_container img
{
		width:100%;
		height:auto;
}

/***************** HEADER WRAPPER ********************/
#header-wrapper
{
		width:98%;
		max-width:1366px;
		margin: 0 auto;
}

/******************* LOGO *********************/
#logo
{
		float:left;
		width:50%;
		margin:10px 1% 1% 2%;
}


/**************** PHONE NUMBER ******************/
#phone-number
{
		float:left;
		width:45%;
		height:auto;
		margin:10px 0 0 10px;
}

#phone-number p
{
		padding:10px 0 0 120px;
		color:#000;
		font-weight:bold;
		font-size:25px;
		margin:0;
}

/**************** SLOGAN ******************/
#slogan
{
		float:left;
		width:100%;
		height:auto;
		margin:0;
}

/************** EXPERIENCE ***********************/
#experience
{
		float:left;
		width:40%;
		margin:0 0 0 20px;
}

#experience p
{
		font-size:24px;
		margin:20px 0 20px 0;
		
}

/************** MPA ***********************/
#master-member
{
		float:left;
		width:30%;
		margin:20px 0 0 10px;
}


/************** MEMBER NUMEBRS ***********************/
#member-numbers
{
		float:left;
		width:23%;
		margin:20px 0 0 30px;
}


p.number1
{
		font-size:24px;
		margin:0 0 20px 0;
		padding-left:95px;
}


p.number2
{
		font-size:24px;
		margin:0 0 20px 0;
		padding-left:64px;
}

/********************* TOP NAVIGATION ****************************/
#top-nav
{
		float:left;
		width:98%;
		height:auto;
		margin:10px 0 0 10px;
			
			
	
}


/********************* NAV WRAPPER *************************/
#nav-wrapper
{		
		width: 98%;
		max-width:1366px;
		margin: 0 auto;
}


/************* TOGLE MENU*******************************/
.menu_button 
{
    	display: none;
    	text-align: right;
    	color:#05d5fa;
    	text-decoration: none;
} 


/****************** MENU LIST ************************/
ul#menu-list
{
		list-style:none;
		padding-left: 1%;
		float:left;
		position:relative;
		font-weight:bold;
		text-align:center;
		margin:0 0 0 10px;
		
             
}


ul#menu-list li
{
		float:left;
		margin-right:10px;
		position:relative;
}

ul#menu-list a
{
		display:block;
		padding:10px;
		color:#000;
		text-decoration:none;
		font-weight:bold;
		text-transform:uppercase;
		font-size:18px;
		background:#979696;
		background: -webkit-linear-gradient( #767474, #c6c5c5); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(#767474, #c6c5c5); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(#767474, #c6c5c5); /* For Firefox 3.6 to 15 */
		background: linear-gradient(#767474, #c6c5c5); /* Standard syntax */
}


ul#menu-list a:hover
{
		
		text-decoration:underline;
		color:#FFF;
		background:#454343;
}


/*************** TOP CONTENT *******************/
#top-content
{
		float:left;
		width:98%;
		height:auto;
		margin:20px 0 10px 10px;
}

/*************************BANNER FLASH ANIMATION ****************/
#banner_container
{
		float:left;
		width:100%;
		height:auto;
		margin:0;
		padding:0;
			
				
}


table.contact
{
			
			
		font-weight:bold;
		font-size:13px;
}

table.contact td
{
	padding:5px;
}


/*************** SERVICES CONTAINER *******************/
#services-container
{
		float:left;
		width:100%;
		height:auto;
		margin:10px 0 10px 10px;
		
}

#services-container p
{
		text-align:justify;
		line-height:30px;
		padding-right:20px;
}


#services-container h1
{
		color:#000;
		font-size:24px;
		padding-bottom:10px;
		padding-left:5px;
}

#services-container h2
{
		color:#000;
		font-size:24px;
		padding-bottom:10px;
		
}

#services-container a
{
		color:#000;
}

#services-container a:hover
{
		color:#FFF;
		text-decoration:underline;
}

/************** HOME PAGE SERVICES BOX **************/
#services1
{
		float:left;
		width:31%;
		margin:10px 10px 0 4px;
		background:#979696;
		background: -webkit-linear-gradient( #767474, #c6c5c5); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(#767474, #c6c5c5); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(#767474, #c6c5c5); /* For Firefox 3.6 to 15 */
		background: linear-gradient(#767474, #c6c5c5); /* Standard syntax */
}

#services2
{
		float:left;
		width:31%;
		margin:10px 10px 0 10px;
		background:#979696;
		background: -webkit-linear-gradient( #767474, #c6c5c5); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(#767474, #c6c5c5); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(#767474, #c6c5c5); /* For Firefox 3.6 to 15 */
		background: linear-gradient(#767474, #c6c5c5); /* Standard syntax */
		
		
}

#services3
{
		float:left;
		width:31%;
		margin:10px 10px 0 10px;
		background:#bcbbbb;
		background: -webkit-linear-gradient( #767474, #c6c5c5); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(#767474, #c6c5c5); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(#767474, #c6c5c5); /* For Firefox 3.6 to 15 */
		background: linear-gradient(#767474, #c6c5c5); /* Standard syntax */
		
		
}


#services-container  #services1 h5
{
		text-align:center;
		line-height:190%;
		font-size:18px;
		color:#000;
			
		
}

#services-container #services2 h5
{
		text-align:center;
		line-height:190%;
		font-size:18px;
		color:#000;
		
}

#services-container  #services3 h5
{
		text-align:center;
		line-height:190%;
		font-size:18px;
		color:#000;
		
}


#services-container  #services1 p
{
		text-align:center;
		line-height:190%;
		font-size:20px;
		color:#FFF;
		margin:10px 0 0 0;
		padding:0;
		
}

#services-container #services2 p
{
		text-align:center;
		line-height:190%;
		font-size:20px;
		color:#FFF;
		margin:10px 0 0 0;
		padding:0;
		
}

#services-container  #services3 p
{
		text-align:center;
		line-height:190%;
		font-size:20px;
		color:#FFF;
		margin:10px 0 0 0;
		padding:0;
		
}


/*************************** LEFT CONTENT **************/
#leftcontent 
{
		
		width: 68%;
		float:left;
		margin:1% 0 0 1%;
		padding:0;			
}




#leftcontent h1
{
	
		color: #00;
		margin:0;
		padding-top:10px;
		font-size:18px;
}


#leftcontent h2
{
	
		color: #666;
		margin:0;
		font-size:20px;
}

#leftcontent p
{
		text-align:justify;
		line-height:190%;
		font-size:16px;
		color:#000;
		
}

.home-boxes
{
		float:left;
		width:48%;
		margin:10px 0 15px 0;
		
}

.home-boxes ul
{
		font-size:20px;
		line-height:40px;
		list-style-type:circle;
}


/*************************** RIGHT CONTENT ****************************/
#rightcontent
{
		float:right;
		width:29%;
		height:auto;
		padding-bottom: 10px;
		margin:0 1% 2% 1%;			
}

#rightcontent p
{
		
		margin-left:10px;
		margin-right:10px;
		line-height:190%;
}


/************* RIGHT BOXES *********************/
.headingbg
{
		float:left;
		width:100%;
		margin:0;
		padding:0;
		background: #000;
		border-radius:8px 8px 0 0;
}


.box-content
{
		float:left;
		width:99.7%;
		margin:0;
		padding:0;
		background:#bcbbbb;	
		border-radius:0 0 8px 8px;			
}


/*************** FREE QUOTE *************************/
#free-quote
{
		float:left;
		width:94%;
		margin:10px 0 2% 3%;
		padding-top:10px;
		padding-bottom:10px;			
}


#free-quote h6
{
	
		font-family:Verdana, Geneva, sans-serif;
		font-size:18px;
		color: #FFF;
		text-align:center;
		
}


/*************** CONTACT CONTAINER *******************/
#contact-container
{
		float:left;
		width:100%;
		height:auto;
		margin:0;
		border-radius:8px;
		background:#979696;
		background: -webkit-linear-gradient( #767474, #c6c5c5); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(#767474, #c6c5c5); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(#767474, #c6c5c5); /* For Firefox 3.6 to 15 */
		background: linear-gradient(#767474, #c6c5c5); /* Standard syntax */
		
}

/*************** ADDRESS *******************/
#address
{
		float:left;
		width:45%;
		height:auto;
		margin:20px 0 10px 20px;
		
}

#address p
{
		font-size:20px;
		
}

/*************** CONTACT FORM *******************/
#contact-form
{
		float:left;
		width:50%;
		height:auto;
		margin:10px 0 10px 10px;
		
		
}

/**************** SERVICES PAGE ***********************/
#bathroom-renovation
{
		float:left;
		width:100%;
		margin:10px 0 10px 0;
		border-radius:8px;
		background: url(../images/bathbg.jpg);
		
}

#bathroom-renovation h2
{
		padding-top:10px;
		padding-left:10px;
		padding-right:10px;
		font-size:20px;
}

#bathroom-renovation ul
{
		list-style-type:circle;
		font-size:18px;
		line-height:30px;
}

/***************** GAS SERVICES *********************/
#gas-services
{
		float:left;
		width:100%;
		margin:10px 0 10px 0;
		background: url(../images/gasbg.gif);
		border-radius:8px;
		color:#FFF;
}

#gas-services h2
{
		padding-top:10px;
		padding-left:10px;
		padding-right:10px;
		font-size:20px;
}

#gas-services ul
{
		list-style-type:circle;
		font-size:18px;
		line-height:30px;
}

/********************* PLUMBING SERVICES *********************/
#plumbing-services
{
		float:left;
		width:100%;
		margin:10px 0 10px 0;
		background: url(../images/plumbingbg.png);
		border-radius:8px;
}

#plumbing-services h2
{
		padding-top:10px;
		padding-left:10px;
		padding-right:10px;
		font-size:20px;
}

#plumbing-services ul
{
		list-style-type:circle;
		font-size:18px;
		line-height:30px;
}

/***************** CLEARING BLOCK *********************/
#clearing-blocked
{
		float:left;
		width:100%;
		margin:10px 0 10px 0;
		background: url(../images/clearingbg.jpg);
		border-radius:8px;
		color:#FFF;
}

#clearing-blocked h2
{
		padding-top:10px;
		padding-left:10px;
		padding-right:10px;
		font-size:20px;
}

#clearing-blocked ul
{
		list-style-type:circle;
		font-size:18px;
		line-height:30px;
}


/********************************* FOOTER *****************************/
#footer_content
{
		float:left;
		width:100%;
		height:auto;
		background:#000;
		margin:0;
		padding:0;
			
			
			
}

/********************* FOOTER WRAPPER *************************/
#footer-wrapper
{		
		width: 98%;
		max-width:1366px;
		margin: 0 auto;
}

#footer_content h3
{
		color:#FFF;
		padding-left:2%;
}


#footer_content p
{
		padding-left:2%;
		font-size:12px;
		color:#FFF;
}


#footer_content a
{
		color:#FFF;
}




/********* Tablet Layout: 768px****************/
@media only screen and (max-width: 768px) 
{
#phone-number p
{
		
		color:#000;
		font-weight:bold;
		font-size:14px;
		margin:0;
}

ul#menu-list a
{
		
		font-size:13px;
}

#leftcontent h1
{
			font-size:20px;
}

form input, form textarea
{
			width:90%;
}

/*************** SERVICES CONTAINER *******************/
#services-container
{
		float:left;
		width:98%;
		height:auto;
		margin:20px 0 10px 10px;
		
}

/************** HOME PAGE SERVICES BOX **************/
#services1
{
		float:left;
		width:45%;
		margin:10px 10px 0 4px;
		background: #666;
		
		
}

#services2
{
		float:left;
		width:45%;
		margin:10px 10px 0 10px;
		background: #CCC;
		
		
}

#services3
{
		float:left;
		width:45%;
		margin:20px 10px 0 0;
		background: #999;
		
		
}

#services-container  #services1 h2
{
		text-align:center;
		font-size:14px;
		color:#FFF;
			
		
}

#services-container #services2 h2
{
		text-align:center;
		font-size:14px;
		color:#FFF;
		
}

#services-container  #services3 h2
{
		text-align:center;
		font-size:14px;
		color:#FFF;
		
}

/************** MEMBER NUMEBRS ***********************/
#member-numbers
{
		float:left;
		width:20%;
		margin:20px 0 0 20px;
}

p.number1
{
		font-size:24px;
		margin:0 0 20px 0;
		padding-left:20px;
}


p.number2
{
		font-size:24px;
		margin:0 0 20px 0;
		padding-left:20px;
}

}