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

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

/************************* 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, ul, li 
{
	margin: 0;
	padding: 0;
	border: 0;
	
}


/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section 
{
	display: block;
}


/************* FORM INPUT ***************************/
form input, form textarea
{
		max-width:100%;
}


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

/**************** IMAGE CLASSESS ******************/
.float-left
{
		float:left;
		margin:10px;
}

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

figcaption
{
		font-weight:bold;
		font-size:12px;
}


/******************* OUTER WRAPPER *******************/
#outer-wrapper
{
		float:left;
		width:100%;
		margin:0;
		background: url(../images/bodybg.jpg);
   
			
}



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

/****************** CONTENT WRAPPER ****************/
#content-wrapper
{
		float:left;
		width:100%;
		margin:0;
		background:#FFF;
		padding-bottom:20px;
		border-bottom: 1px solid #CCC;
}


/********************* TOP HEADER *************************/
#top-header
{
		float:left;			
		width:100%;
		height:auto;
		margin:0;
		padding:0;
		background:#FFF;
		border-top:5px solid #F90;		
}

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

/****************** LOGO *******************/
#logo
{
		float:left;
		width:40%;
		height:auto;
		margin:10px 1% 1% 30px;
	
				
}


/********************* TELEPHONES ****************/
#phone-numbers
{
		float:left;
		width:90%;
		margin:0 0 0 1%;
		color: #F90;
		
		
								
}

#phone-numbers p
{
		margin:0;
		padding:0;
		
}

#phone-numbers a
{
		color: #F90;
}


#phone-numbers p.mobile
{
		background-image:url(../images/mob.png);
		background-repeat:no-repeat;
		background-position:left;
		padding:0 0 0 50px;
		margin:0;
		font-size:25px;
		height:32px;
}


/****************** FREE QUOTE*****************/
#online-quote
{
		float:right;
		width:30%;
		height:auto;
		margin:8px 0 10px 0;
							
}

#online-quote p
{
		margin:0;
		padding:0;
}


/********************* top banner ******************/
#top-banner
{
		float:left;
		width:100%;
		height:200px;
		margin:0;
		background:url(../images/top-banner.png);
		background-repeat:no-repeat;
		background-size:100% 100%;
		
}



/********************* TOP NAVIGATION ****************************/
#top_nav
{
		float:left;
		width:100%;
		height:auto;
		margin:0;
		background:#F90;
				
}


/************************** SLIDER CONTAINER **************/
#slider_container
{
		float:left;
		width:95%;
		height:auto;
		margin:2% 0 1.5% 2.5%;
		padding:0;			
}


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


#services-container h1
{
		margin:0;
		text-align:center;
		color:#F90;
}

/********************** SERVCES BOX **************************/
.services1
{
		float:left;
		width:31%;
		height:auto;
		margin:2% 0 0 1.5%;
		background:#509629;
			
}

.services1 img
{
		width:100%;
		height:auto;
}

.services2 img
{
		width:100%;
		height:auto;
}

.services3 img
{
		width:100%;
		height:auto;
}
.services2
{
		float:left;
		width:31%;
		height:auto;
		margin:2% 0 0 0;
		background:#f6be27;
		
}



.services3
{
		float:left;
		width:31%;
		height:auto;
		margin:2% 0 0 0;
		background:#05999e;
}


.services1 h2
{
		text-align:left;
		color:#FFF;
		font-size:20px;
		text-align:center;
}

.services2 h2
{
		text-align:left;
		color:#FFF;
		font-size:20px;
		text-align:center;
}

.services3 h2
{
		text-align:left;
		color:#FFF;
		font-size:20px;
		text-align:center;
}

.services1 p
{
		font-size:13px;
		padding-right:10px;
		padding-left:10px;
		text-align:left;
		line-height:190%;
		color:#FFF
}


.services2 p
{
		font-size:13px;
		padding-right:10px;
		padding-left:10px;
		text-align:left;
		line-height:190%;
		color:#FFF
}

.services3 p
{
		font-size:13px;
		padding-right:10px;
		padding-left:10px;
		text-align:left;
		line-height:190%;
		color:#FFF
}

img.readmore
{
		width:44%;
		height:auto;
}


/********************** LEFT PANEL **************************/
#left-panel
{
		float:left;
		width:65%;
		height:auto;
		margin:2% 0 0 1.5%;
			
}

#left-panel p
{
		text-align:justify;
		line-height:30px;
}


#left-panel h2
{
		font-size:20px;
		color:#000;
}

.home-list
{
		text-align:justify;
		line-height:190%;
		margin-left:27px;
		list-style-image: url(../images/bullets.png);
		
}

/********************** RIGHT PANEL **************************/
#right-panel
{
		float:left;
		width:30%;
		max-width:100%;
		height:auto;
		margin:2% 0 0 2%;
			
}

#right-panel h2
{
		font-size:20px;
		text-align:center;
}

#right-panel p
{
		font-size:13px;
		padding-right:10px;
		padding-left:10px;
		text-align:left;
		line-height:190%;
		
}

.r-logo
{
		margin-top:20px;
}


/******************** FREE QUOTE ************************/
#free-quote
{
		float:left;
		width:100%;
		max-width:100%;
		height:auto;
		margin:2% 1% 2% 1%;
		color:#FFF;
		font-size:14px;
		background:#509629;
		border-radius:8px;
		padding:2% 0 2% 0;
		font-weight:bold;
}

#free-quote h2
{
	color:#FF0;	
}

table.contact
{
			margin-left:10px;
}

table.contact td
{
			padding:5px;
}


/******************** AD CONTENT ************************/
#ad-content
{
		float:left;
		width:100%;
		height:auto;
		margin:1% 0 2% 0;
}

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

#main-content h1, h2
{
		padding-left:10px;
}

#main-content  h2
{
		padding-left:10px;
		color:#090;
}

#main-content h3
{
		padding-left:10px;
		padding-top:10px;
		color:#F90;
}


#main-content p
{
		padding-right:10px;
		padding-left:10px;
		text-align:justify;
		line-height:190%;
		
}

.plantation-list
{
		text-align:justify;
		line-height:190%;
		margin-left:27px;
		list-style-image: url(../images/bullets.png);
		
}

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

#colour-container  h3
{
		text-align:center;
		margin-bottom:10px;
		color:#FFF;
}

/******************** PLANTATION PAGE ************************/
#painted
{
		float:left;
		width:100%;
		height:auto;
		margin:10px 0 10px 0;
		background:#EE9A4D;
		border-radius:8px;
	
}

#stained
{
		float:left;
		width:100%;
		height:auto;
		margin:10px 0 10px 0;
		background:#000;
		border-radius:8px;
	
}



/******************** ALUMINIUM PAGE ************************/
#powder-coat
{
		float:left;
		width:100%;
		height:auto;
		margin:10px 0 10px 0;
		background:#509629;
		border-radius:8px;
	
}

#timber-grain-finish
{
		float:left;
		width:100%;
		height:auto;
		margin:10px 0 10px 0;
		background:#05999e;
		border-radius:8px;
	
}

/*************** COLOUR LISTS **********************/
.colour-list li
{
		list-style-type:none;
}


.colour-list li
{
		float:left;
		width:130px;
		margin:0 10px 8px 10px;
		font-family:Arial, Helvetica, sans-serif;
		color:#FFF;
		text-align:center;
		font-size:14px;
}


.colour-list img
{
		display:block;
		border:1px solid #333300;
}

/******************** GALLERY PAGE ************************/
#gallery-container
{
		float:left;
		width:100%;
		height:auto;
		margin:20px 0 10px 0;
		
		
}

#gallery-container  h2
{
		margin:10px 0 10px 0;
		color:#F90;
}

/******************** PLANTATION SHUTTERS ************************/
#plantation-shutters
{
		float:left;
		width:100%;
		height:auto;
		margin:10px 0 10px 0;
		
		
}


/******************** ALUMINIUM SHUTTERS ************************/
#aluminium-shutters
{
		float:left;
		width:100%;
		height:auto;
		margin:10px 0 10px 0;
		
}

/******************** BLINDS ************************/
#blinds
{
		float:left;
		width:100%;
		height:auto;
		margin:10px 0 10px 0;
		
}


/****************** CONTACT US PAGE **********************/
#contact-container
{
		float:left;
		width:98%;
		height:auto;
		margin:10px 0 10px 10px;
		border-radius:8px;
		padding-top:10px;
		background:#F60;
}

/***************** CONTACT US FORM *******************/
#contactus-form
{
		float:left;
		width:60%;
		height:auto;
		margin:10px 0 10px 10px;
		border-radius:8px;
		padding-top:10px;
		background:#509629;
		
}


#contactus-form label.c-form
{
		display:block;
		width:40%;
		float:left;
		font-size:18px;
		color:#FFF;
		font-weight:bold;
		margin-left:20px;
		margin-top:10px;		
}

#contactus-form input.c-input
{		width:40%;
		height:30px;
		border-radius:8px;
		
		
}

#contactus-form textarea
{		width:40%;
		height:100px;
		border-radius:8px;
		margin-top:10px;
		
}


#contactus-form .button input
{
		background:#000;
		font-size:16px;
		color:#FFF;
		font-weight:bold;
		border-radius:8px;
		height:30px;
		width:20%;
		margin-bottom:20px;
		margin-left:250px;
		
		
}

/***************** MOBILE *******************/
#main-content p.call
{
		background-image:url(../images/mobile-icon.png);
		background-repeat:no-repeat;
		background-position:left;
		padding:20px 0 0 100px;
		margin:20px 0 0 9px;
		font-size:25px;
		font-weight:bold;
		color:#F90;
		height:85px;
}

/***************** EMAIL *******************/
#main-content p.email
{
		background-image:url(../images/email-icon.png);
		background-repeat:no-repeat;
		background-position:left;
		padding:20px 0 0 100px;
		margin:0 0 0 9px;
		font-size:25px;
		font-weight:bold;
		height:85px;
}

/***************** CONTACT MOBILE *******************/
#contact-mobile
{
		float:left;
		width:98%;
		margin:10px 0 10px 0;
		
		
}

/***************** CONTACT EMAIL *******************/
#contact-email
{
		float:left;
		width:98%;
		margin:10px 0 10px 0;
		
}

/***************** CONTACT ICON *******************/		
#contact-icon
{
		float:left;
		width:30%;
		margin:10px 0 0 30px;
	
}

/******************** TESTIMONAILS PAGE ************************/
#testimonials-container
{
		float:left;
		width:96%;
		height:auto;
		margin:0 0 10px 15px;
		
		
}

#testimonials-container p
{
	text-align:justify;
	line-height:30px;
}

/********************************* FOOTER *****************************/
#footer_content
{
		padding:0;
		width:100%;
		margin:0;
		clear:both;
		float:left;
		background:#3CC;		
}


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


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


#footer_content a
{
			color:#FFF;
			text-decoration:none;
}


#footer_content a:hover
{
			color:#F90;
			text-decoration:underline;
}



/********* MEDIA QUERIES TABLET LAYOUT *********************/
@media only screen and (max-width: 768px) 
{
#services-container h1
{
		font-size:24px;	
}

#phone-numbers p.mobile
{
		background-image:url(../images/mob.png);
		background-repeat:no-repeat;
		background-position:left;
		padding:0 0 0 50px;
		margin:0;
		font-size:20px;
}



#content-wrapper .services1  h2
{
		font-size:16px;
		
		
		
}

#content-wrapper .services2  h2
{
		font-size:16px;
		
		
		
}

#content-wrapper .services3  h2
{
		font-size:16px;
		
		
		
}

img.readmore
{
			width:50%;
}

#contactus-form
{
		float:left;
		width:90%;
		height:auto;
		margin:10px 0 10px 10px;
		border-radius:8px;
		padding-top:10px;
		background:#509629;
		
}

#contact-icon
{
		float:left;
		width:90%;
		margin:10px 0 0 30px;
	
}

form input
{
		width:80%;
}

}


@media only screen and (min-width : 321px) 

{

#phone-numbers p.mobile
{
		font-size:18px;
}

}

/* iPhone 5 landscape */
    @media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape)
{
       #phone-numbers p.mobile
{
		font-size:14px;
}
}