/*=====================================================================================*\
	|					CSS for CoolTech Roofing  - "Simple & White" theme					|
	|																						|
	|					by Matt Harper @ Site of Hand Web Design (c)2016					|
	\*=====================================================================================*/

	@import "../common.css";
	@import "resizable_div.css";

	
	body.MainSite
	{	
		background-color: #ffffff;
		
		font-family: Verdana, Helvetica, Arial, Geneva;
		color: #666666;	
		text-align: center;
	}
	
	/*----------------------------------------------------*\
	|				Screen Layout Divs					   |
	\*----------------------------------------------------*/
	
/* 	for maxium width display in IE subtract 28 px to allow for sroll-bar 	*/

/*	Remove the following div to create a "liquid" layout 	*/
 
	.Container 
	{		
        width: 100%;
		height: 100%;
	} 

	.Header 
	{
		width: 1000px;
		/* height: (set in mobile / desktop css file)	 */
		
		margin-left: auto;
		margin-right: auto;
		padding-top: 0px;
		padding-bottom: 0px;
 				
		background-image: url('Logo.png');
		background-repeat: no-repeat;
		background-position: 30px 5px;

		
		font-size: 1em; 
		text-align: center;	
		z-index: 1;

	}
	

	.WrapperMenuTop
	{	
		width: 100%;
		/* height: (set in mobile / desktop css file)	 */
		padding: 0;	
		background-color: #e5e5e5;		
	}
	

	.Wrapper3
	{		
		margin-left: auto;
		margin-right: auto;
        width: 1000px;
		height: auto;
		min-height: 540px;
		border: solid white 1px;	/* this is required to centre the CentreColumn in FF */
	}	
	
	.Side1Column
	{ }
	
	.Side2Column
	{ }

	.CentreColumn
	{

		margin-left: auto;
		margin-right: auto;
	    width: 980px;
		height: auto;
		padding: 5px;
		background-color: transparant;
		font-family: "DejaVu Sans", "URW Gothic L", "Helvetica Neue", Helvetica, Arial, "Microsoft Sans Serif", sans-serif;
		/* font-size: 1.2em; */
		text-align: justify;	
		overflow:auto; 

	}

	.Footer
	{
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;		
		/* height: (set in mobile / desktop css file)	 */
		width:964px;
		border-top: solid 1px #aaaaaa;
		padding-top: 10px;
		text-align: center;	
		/* font-size: (set in mobile / desktop css file)	 */
		font-family: Verdana, Geneva, Helvetica, Arial;
	
	}


	 .NewWindow
	{		
		height: 100%;
		padding: 0.5em;	
		text-align: center;
	}
	
	.NewWindow img
	{
		border: ridge 4px #dddddd;
		margin: 0.5em;			
	}
	
	.NewWinText
	{
		height: 100%;

		margin: 1em;
		padding: 2em;
		border: none;
		background-color: #eeeeee;
		
		font-size: 1.1em;
		text-align: justify;
	}	
	

	/*------------------------------------------------*\
	|					FONTS						   |
	\*------------------------------------------------*/
	
/* 	 */
h1	
{
	font-size: 1.5em;
	margin: 0.7em;
}	
	
h2	
{
	font-size: 1.4em;
	margin: 0.7em;	
}		

h3	
{
	font-size: 1.3em;
	margin: 0.6em;
}
	
h4	
{
	font-size: 1.2em;
	margin: 0.5em;
}
		
p	
{
	font-size: 1em;
	margin: 0.4em;
}	
	
.Small
{
	font-size: 0.7em;
	margin: 0.3em;
}

.Large
{
	font-size: 1.1em;
	margin: 0.4em;
}

.Notice	
{
	font-size: 1.1em;
	font-style: italic;
	margin: 0.5em;
}

.WarningMSG	
{
	font-size: 1.1em;
	color: #dd0000;
	margin: 0.5em;
}	
.WarningMSGSmall	
{
	font-size: 0.8em;
	color: #dd0000;
	margin: 0.5em;
}
	
.OkMSG	
{
	font-size: 1.1em;
	color: #00dd00;
	margin: 0.5em;
}



	/*------------------------------------------------*\
	|					LINKS						   |
	\*------------------------------------------------*/	

	/*	Global Links	*/
	
	a:link
	{
		color: #1111bb;
		text-decoration: none;
		outline: none;		
	}
	
	a:visited 
	{				
		color: #4444ff;
		text-decoration: none;
		outline: none;
	}
	
	a:focus
	{				
		text-decoration: underline;
		color: #1111bb; 
		outline: none;
	}
	
	a:active
	{					
		color: #ff0000;
		text-decoration: underline;		
		outline: none;

	}
	
	a:hover 
	{					
		color: #666666;
		text-decoration: none;
		outline: none;
	}
	



 input.FocusField
,textarea.FocusField
{
	background-color: #eeeeee;
	border: solid 2px #8800ff;
}	

	/*	==================	Footer Links	=======================	*/
	
div.MenuFooter
{
	padding: 10px 5px 10px 5px;
}
	
ul.MenuFooter
{	
	text-align: center;
	list-style-type: none;
}
	
li.MenuFooter 	
{	
	display: inline;
}


a.MenuFooter:link
{
	color: #6666ff;
	text-decoration: none;		
	font-family: Verdana, Helvetica, Arial, Geneva, sans-serif;
}
	
a.MenuFooter:visited 
{				
	color: #aaaaaa;
	text-decoration: none;		
}
	
.MenuFooter a:focus
{				
	text-decoration: underline;
	color: #0000ee; 	
}
	
.MenuFooter a:active
{					
	color: #444444;					
}
	
.MenuFooter a:hover 
{					
	color: #3333ff;
	text-decoration: none;
}


	


	/*========================================================*\
	|				Styles unique to MODULEs				   |
	\*========================================================*/


	/*	========	ALL AREAS	==========		*/	

ul
{
	margin: 1em 2em 1em;
	text-align: left;
	list-style-type: disc;
}

 .Image1Caption
,.BrochureImageCaption
{	
	display: block;
	margin-bottom: 1em;
}


	/*	========	Header	==========		*/
	

/*	Header - phone number	*/	
.Mod_1_1
{
	position: relative;	
	
	left: 500px;
	width: 400px;
	
	text-align: center;
	line-height: 150%;

	color: #666666;
	font-size: 1.3em;
	font-weight: bold;
	background-color: transparent;
/* border: solid 1px pink; */		
}	
	
/*	Header - Email	*/
.Mod_1_2
{
	position: relative;	
	/* top: 40px; */
	left: 500px;
	width: 400px;
	text-align: center;
	padding: 5px 5px;	
}	


/*	Header - Address	*/
.Mod_1_3
{
	position: relative;	
	/* top: 40px; */
	left: 500px;
	width: 400px;
	text-align: center;
	padding: 5px 5px;
}	

	/*	========	Side 1 	  ==========		*/

	/*	==========	Footer		==============	*/
	
	
.SiteCredit
{
	margin: 10px;
}
	
.Mod_5_1 .Text1
{
	text-align: center;
}


div.ValidateLinks
{	
	height: 0;	/*	this is needed to collaps the div lying over the site credit link and preventing access to the link - in chrome and FF */	
	position: relative;	
	top: -40px;	
}

div.ValidateLinksXHTML
{
	position: relative;
	display: inline;
	left: -300px;
}

div.ValidateLinksCSS
{
	position: relative;
	display: inline;
	left: 300px;
}


/*	=====================	Center of Page	=====================		*/


/*	Home Page  Items	*/

	/* Images */	
	
	 #Mod_3_1068
	,#Mod_3_1069
	{
		float: left;
		width: 400px;
		margin: 20px 20px;
	/* border: solid 1px pink;	 */	
		
	}
	
	 #Image1_1068 img
	,#Image1_1069 img
	{		
		width: 400px;
	}

	 #Mod_3_1068
	{
		float: left;	
	}
	
	#Mod_3_1069
	{
		float: right;	
	}	
	
	#Mod_3_1016
	{
		clear: both;
	}
	

/* Testimonials - Brochure */

.BrochureList
{
	float: left;
}
/* 
fieldset.BrochureSelectBox
{

	margin-left: auto;
	margin-right: auto;	
	width: 300px;
	padding:10px;
	border: solid 1px #dddddd;
	clear: both;
}

.BrochureCatHeading
,.BrochureCatDesc
{
	float: left; 
	width: 960px;
	margin: 5px;
}
  */


 .BrochureItem
{
	float: left;
	width: 960px;
	margin-top: 10px;
	padding: 10px 10px;
	border-top: solid 1px #333333;
	/* border-bottom: solid 1px #bbbbbb; */
}

.BrochureItemHeading
{
	position: relative;
	/*  */
	top: 10px;
	
	text-align: left;
}

.BrochureThumb
{
	position: relative;	
	top: -30px;
	float: left;
	width: 30px;
}

.BrochureThumb img
{
	width: 380px;
}

.BrochureItemText
{
	padding: 10px 10px;
	font-size: 1em;
	font-style: italic;
	text-align: justify;	
}


/*	items with images	*/
 #BrochureItem_1 .BrochureItemHeading
,#BrochureItem_2 .BrochureItemHeading
{
	left: 400px;
	width: 500px;
}
 
 #BrochureItem_1 .BrochureItemText
,#BrochureItem_2 .BrochureItemText
{
	float: right;
	width: 540px;
}


/* Contact us Page */


#Mod_3_1025
{
	float: left;
	margin-left: 20px;
}




 .Text2Image img
{
	border: none;
}

/* Phone Num Link	*/
#PhoneNumLink_1030
{
	margin-left: 2px;
}



	/*----------------------------------------------------*\
	|			CONTACT FORM Styles						   |
	\*----------------------------------------------------*/
		
div.ContactForm
{
	
	/* width: (set in mobile / desktop css file)	 */
	margin-top: 10px;
	padding: 10px;
	font-weight: bold;
	/* font-size: (set in mobile / desktop css file)	 */
	background-color: transparant;
	border: solid #666666 1px;
}

 textarea
,input
{
	font-family: Century Gothic, Avant Garde, Helvetica, Arial, Verdana;
}

.ContactForm label
{
	background-color: transparant;
}

.ContactForm fieldset
{
	/* position: relative; */
	border: solid 1px #e9e9e9;
	background-color: transparent;
}

 .ContactForm fieldset legend
 {
/* 		
	position:absolute;
	top: -.5em;
	left: .5em;
 */	
	
}

ul.ContactForm
{
	margin: 1em;
	text-align: left;
	list-style-type: none;
}

ul.ContactForm li
{
	margin: 0.5em;
}

img.ContactFormImageLink 
{
	border: none;
}

ul.ContactFormConfirmMSG
{
	margin: 1em 4em 1em;
	text-align: left;
	list-style-type: disc;
}

ul.ContactFormConfirmMSG li span.Left
{
	font-weight: bold;
	margin-right: 2em;
}

ul.ContactFormConfirmMSG li span.Right
{
	font-style: italic;
}

 .RequiredFormElement input
,.RequiredFormElement textarea
,.RequiredFormElement p
{
	background-color: #fffff0;
	color: #000000;
}

 input.ErrorHilight
,textarea.ErrorHilight
{
	border: solid 2px #dd0000;
}

/*		Captcha Styles		*/

 div.CaptchaDivInput
{
	float: left; 
	padding: 0.2em;
}

 div.CaptchaDivImage
{
	float: right; 
	padding: 0em;	
}

 div.CaptchaDivErrorMSG
{
	float: left;
	padding: 0.2em;
}

/* do CAPTCHA Image font colours here	*/
.ImageCaptcha
{
	/* This is located in the _css.css file */
}


.CaptchaDivImage label
{
	font-size: 0.7em;
}

 div.CaptchaDivImage a
{
	cursor: help;
}

/*	Captcha Explain and Reload Links	*/
input.CaptchaReload
{
	border: none;
	font-size: 0.7em;
	color: #1111ee;
	background-color: #cccccc;
	border-top: solid #eeeeee 1px;
	border-right: solid #777777 1px;
	border-bottom: solid #000000 1px;
	border-left: solid #cccccc 1px; 	
}

.CaptchaExplainLink
{
	font-size: 0.7em;
}

 div.CaptchaDivImage ul
{
	display: block;
	text-align: justify;
	list-style-type: none;	
}

 div.CaptchaDivImage ul li
{
	display: inline;
}

 .CaptchaExplain ul li
{
	position: absolute;	
	left: -999em;
	
}

 .CaptchaExplain li:hover ul li
{
	left: 40em;
	width: 35em;
	padding: 1em;
	
	border-top: solid #cccccc 3px;
	border-right: solid #777777 3px;
	border-bottom: solid #222222 3px;
	border-left: solid #dddddd 3px; 
	
	background-color: #ffffff;
}

/*	submit BUTTON	*/
#ContactFormElement_9_96
{
	text-align: center;
}

/*	HIDDEN submit BUTTON (at top - for usability)	*/
 #ContactFormElement_9_122
,#ContactFormElement_9_122 input
{
	display: none;
	margin: 0;
	padding: 0;
	height: 0;	
	border: none;
	background-color: transparant;
}

	/* ========================end Contact Form styles=================================================== */



	/*	==================	Misc Button Style Links	=======================	*/

 a:link.ButtonLink
,a:active.ButtonLink
,a:visited.ButtonLink
,a:link.ButtonLinkSelected
,a:active.ButtonLinkSelected
,a:visited.ButtonLinkSelected		
{
	margin: 0.5em;
	padding: 0.5em;			
	font-family: Verdana, Helvetica, Arial, Geneva, sans-serif;
	font-size: 0.7em;				
}	
	
	
 a:link.ButtonLink
,a:active.ButtonLink
,a:visited.ButtonLink	
{

	border-top: solid #eeeeee 2px;
	border-right: solid #777777 2px;
	border-bottom: solid #000000 2px;
	border-left: solid #cccccc 2px; 
			
	color: #0000aa;
	background-color: #ededed;			
}
	
a:hover.ButtonLink
{
	background: #ffffff;
	color: #558811;
}

 a:link.ButtonLinkSelected
,a:active.ButtonLinkSelected
,a:visited.ButtonLinkSelected		
{	
	border-top: solid #eeeeee 1px;
	border-right: solid #777777 1px;
	border-bottom: solid #000000 1px;
	border-left: solid #cccccc 1px; 
	
	color: #dd0000;
	background-color: #cccccc;			
}