/* Gas Metering Autralia utilises news layout 2& 3, gallery 3*/

/** basic divs **/

/**  
    { 
    margin: 0; 
    padding: 0; 
    border: 0; 
}*/


body
{
margin:0px;
padding:0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
color: #888888;
line-height:1.6em;
background-color:#FFFFFF;
background-image:url(../images/gasmetdesign-2_bg.jpg);
background-repeat:repeat-x;
}



#Content{	
background-image:url(../images/gasmetdesign-2_footer.jpg);
	background-repeat:repeat-x;
	background-position:left bottom;
	width:100%;
	}

#Site
{
width:1000px;
padding:0;
margin:0 auto 50px;
position:relative;

}

#website_branding
{
width:1000px;
background-image:url(../images/gasmetdesign-2-brandingnoRH.jpg); 
background-repeat:no-repeat;
height:319px;

}

.news_layout3 #website_branding
{
width:1000px;
background-image:url(../images/gasmetdesign-2-branding.jpg); 
background-repeat:no-repeat;
height:319px;

}




#mainpage{
float:left;
width:1000px;
margin-bottom:50px; /* This is adding a margin between this and the footer text */
}




#website_container
{
width:1000px;
min-height:400px;
padding:0px;
margin:0;
background-image:url(../images/gasmetdesign-2_mainbgnoRHS.jpg);
background-repeat:no-repeat;
}

.news_layout3 #website_container
{
width:1000px;
min-height:400px;
padding:0px;
margin:0;
background-image:url(../images/gasmetdesign-2_mainbg.jpg);
background-repeat:no-repeat;
}


#website_footer
{
width:1000px;
margin:0 auto;
text-align:center;
clear:both;

}

#website_footer p{

}
	

#global_footer
{
width:1000px;
margin:0 auto;
/*margin-bottom:40px;*/
text-align:center;
}



#global_footer a
{
text-align:center;
color:#ccc;
}

#widefooter{	
clear:both;

background-image:url(../images/gasmetdesign-2_footer.jpg);
	background-repeat:repeat-x;	
	width:100%;
text-align:center;
color:#ccc;
padding-top:50px;
height:120px;
}

#breadcrumb{display:none;}



/** menu code **/



#website_menu{
background-image:url(../images/gasmetdesign-2_menunoRHS.jpg);	
	height:67px;
	padding:0px;
	margin:0px;
	}


.news_layout3 #website_menu{
background-image:url(../images/gasmetdesign-2_menu.jpg);
	height:67px;
	padding:0px;
	margin:0px;
	}
	

#website_menu ul{
	padding: 21px 0px 0px 0px;
	margin:0px;
	list-style: none;
	line-height: normal;
	}



#website_menu li{
	float:left;
	

	}



#website_menu li a{
	text-decoration: none;
	font-size: 18px;
	color: #FFFFFF;
	padding: 0px 21px;
	}



#website_menu li a.current{
	
	text-decoration: none;
		}
		
#website_menu li a.first{
	padding-left:0px;
		}		



#website_menu li a:hover{
	text-decoration:underline;

	
	}
	



/** basic HTML **/


h1, h2, h3 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	line-height:normal;
	color: #4F4F4F;
	}



h1 {
	letter-spacing: -2px;
	font-size: 250%;
	margin: 20px 0px 20px 0px;
}



h2 {
	letter-spacing: -1px;
	font-size: 180%;
	margin: 20px 0px 5px 0px;
}

h3 {
	letter-spacing: -1px;
	font-size: 130%;
	background-color:#CCCCCC;	
	color:#FFFFFF;
	padding:5px;
	text-align:center;
	margin: 20px 0px 5px 0px;
}



p, ol, ul {
	margin-top: 0px;
	margin-bottom: 30px;
	text-align: justify;
	}

form {
	line-height:normal;
	}
	
input, label, select,textarea {
	margin:10px 0;
	}	


/* unvisited link */
a:link {
	color:#15518A;
		}      
		
/* visited link */		
a:visited {
	color:#3C7AB5;
	}  
	
 /* mouse over link */	
a:hover {
	color:#6A9BE0;
	text-decoration:none;
	} 
	
 /* selected link */
a:active {
	color:#A0B1C1;
	} 
	

img{
	border:none;
	}

ul{
	margin:0;
	margin-left:20px;
	padding:0;
	}
	
blockquote {
	
	}	
	
/**  MISC IDS and Classes - usually site specific **/	
	
.Home #newsrow_1{
	position:absolute;
	top:160px;
	left:700px;
	width:230px;
	border:none;
	margin:0;
	padding:0;
	
		}
		
.Home #newsrow_1 .headline{
	display:none;
	}	
	
.Home #newsrow_2 .headline{
	display:none;
	}
	
.Home #newsrow_4{
	background-color:#F3F3F3;
	padding:10px;
	border:#dfdfdf 1px solid;
	}	
	
.Products .news_row{
	margin:32px 0px;		
}
	
	
.Products #newsrow_1 .headline{
	font-variant:small-caps;
	background-color:#F3F3F3;
	padding:10px;
	border:#dfdfdf 1px solid;
	/*margin-bottom: 32px;*/

}	

.Products .newsimage {
	clear:left;
	float:left;
	margin-right:32px;
	}
	
.Products .news_article{
	margin-left:64px;		
}	


/* this is the border around the home page image manually entered */	
.border1{
	padding:4px;
	border:#dfdfdf 1px solid;
	}		
	
	
.small{
	font-size:80%;
	}	
	

/** news core **/


#image{ /* this is the container for the main image on a page */
	width:380px;
	padding:4px;
	border:#dfdfdf 1px solid;
	margin-bottom:10px;
	margin-right:10px;
	}
	
/* this is the actual image width - without which the default will be taken from that in the admin*/	
#image img{
	width:380px;
	}	


/* why is this twice? */
.date, .date{
display:none;
}



.headline{
	margin: 5px 0px 5px 0px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	color: #4F4F4F;
	letter-spacing: -1px;
	line-height:normal;
	font-size: 180%;
}



.headline a{

}



#caption{
background-color:#cccccc;
color:#fff;
text-align:center;
padding:5px;
}



/** News Layout 1 **/



.news_layout1 .news_row{
width:315px;
background-color:#cccccc;
float:left;
/*margin:3px;*/
}



.news_layout1 .newsimage{
float:left;
width:150px;
}

.contact_layout1 #image{
float:right;
width:253px;
}


.news_layout1 h1{
	clear:left;
	}





/** News Layout 2 **/

.news_layout2 .news_row{
/*width:230px;
float:left;
padding:5px;
border:1px solid #888888;
margin:4px;*/

}



.news_layout2 .newsimage{
/*float:left;
width:230px;*/

}



.news_layout2 #image{
float:left;
}

/*.news_layout2 #image img{
width:200px;
}*/



.news_layout2 #newsarticles{
clear:both;
}



/* If the image is to sit above the article */
.news_layout2 .headline{
/*background-color:#888888;
color:#FFFFFF;
padding:3px;
clear:left;*/
} 


.news_layout2 .headline a{

} 


/** News Layout 2 with banner **/ /* the page name is put in to force the page to pick up the non default style */

.PAGENAME #image{
position:absolute;
top:150px;
left:335px;
}



.PAGENAME h1{
padding-top:120px;
}



/** News Layout 3 - DEFAULT **/


.news_layout3  #newsarticles { /* these float left to put them in the space next to the mainpage if they didnt float they would begin  a new line */
float:left;
width:230px;
margin-top:50px;
margin-left:50px;
/* right margin will happen by default */
}

.news_layout3 .news_row{
margin-bottom:35px;

}

.news_layout3 .newsimage{
	width:220px;
	padding:4px;
	border:#dfdfdf 1px solid;

}


.news_layout3 .newsimage img{
	width:220px;
	}

.news_layout3 #content{
float:left;
width:650px;
}







/** News Layout 3 floating on the left - add the page name in the first class - or change the default if the same layout will be used throughout the site **/

.pagename #newsarticles {
float:right;
width:225px;
margin-right:10px;
margin-left:0px; /* This cancels the above - default- left margin */
}



.pagename #content{
float:right;
width:400px;
}



/** News Layout 3 main image as column on the left**/
/*need to look at this layout!!!!*/

.pagename #image{
position:absolute;
left:175px;
width:148px;
}



.pagename #content{
padding-left:158px;
width:465px;
}



/** News Layout 5 **/

.news_layout5 .news_row{
width:800px;
background-color:#cccccc;
float:left;
margin:3px;
}



.news_layout5 .newsimage{
float:left;
width:180px;
}



.news_layout5 #image{
float:left;
}



.news_layout5 #newsarticles{
clear:both;
}



/** contact **/

.contactmessage{
	float:left;
	width:500px;
	}

label{
    width: 120px;
    float: left;
    text-align: left;
    margin-right: 0.5em;
    display: block;/* had missing colon */
}



input{
    width:300px;
}



textarea{
    width:300px;
    height:200px;
}



.submit{
    border:solid 1px #ffffff;
    text-align:center;
    float:left;
    width:50px;
}



#submit {
    padding-left:780px;
}





/** Gallery core **/

/* The rows are not used in layout 3 */
.image_row{
width:237px;
/*background-color:#EEDBB4;*/
float:left;
margin: 10px 40px;

}

.imageimage{
	padding:4px;
	border:1px solid #560B06;
	text-align:center;
	}


#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 10px;
padding-bottom: 0;
background: #313131;
visibility: hidden;
z-index: 10;
cursor: hand;
cursor: pointer;
}



#thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */
font: bold 16px Tahoma;
letter-spacing: 5px;
line-height: 1.1em;
color: white;
padding: 5px 0;
text-align: right;
}





#thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */
background-color: white;
}



#thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/
position: absolute;
visibility: hidden;
border: 1px solid black;
background-color: #EFEFEF;
padding: 5px;
z-index: 5;
}



/** Gallery layout3 **/


#gallery_main{
float:left;
border:#560b06 1px solid;
padding:4px;
width:520px;
}

#gallery_main img{
width:520px;
}

#galleryimages{
	width:400px;
	float:right;
	}



/* this affects the size of the displaying thumb - if removed will default to the size set in the admin */
.gallery_layout3 .imageimage img{
width:175px;
}

/* I have reduced the size by 5px as IE6 is not liking the full width which should be set as 180px */

.gallery_layout3 .imageimage{
width:175px; /*This is the box size - which should match the image size and what is enter directly above - then the padding and border (in the generic settings above) is added*/
float:left;
margin:0 5px 8px; /* there is also a 1px border to account for above */

}




/* I have added this as it wasnt clearing properly */
.clear{
	clear:left;
	}
	
	
/* The title of gallery images */
.imagealt{	
padding:5px;
text-align:center;
font-variant:small-caps;

}

/* The description text */
.imagecaption{	
padding:5px;
}