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

/*this sets the default settings for the page. everything will be these unless otherwise stated*/
body{
	
		/*background-image:url(images/bg.jpg);*/
		background-color:#FFFFFF;
		width:980px;
		height:auto;
		margin:auto;
		font-family:Arial, Helvetica, sans-serif;
		font-size:12px;
		color:#000000;
}

a {color:#FF0000}

.history{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:.9em;
font-weight:bold;
letter-spacing:.2em;
color:#FF0000;
}

/*this is the headder. the size is set here and stuff*/
#headder{
		background-image:url(images/headder.png);
		width:972px;
		height:142px;
		margin:auto;
		border:4px solid #FF0000;
}

/*das is mein picture bar it is the red border and sets the size*/
#picbar{
		background-color:#666666;
		width:780px;
		height:100px;
		padding-bottom:4px;
		padding-top:4px;
}

/*here lives the div where all of the content lives. this bit is the red background and sets the size*/
#content{
		width:746px;
		min-height:501px;
		padding-left:10px;
		padding-right:10px;
		padding-bottom:15px;
		float:right;
		border-left:#FF0000 4px solid;
		font-size:18px;
		background-color:#FFFFFF;
}		

/*this adjusts the headding 1 settings in the content*/
#content h1{
	color:#FF0000;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight: normal;
	display: inline;
}

/*this adjusts the headding 2 settings in the content*/
#content h2{
	color:#000000;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight: bold;
	display: inline;
}

/*this adjusts the headding 3 settings in the content*/
#content h3{
	color:#000000;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:21px;
	font-weight: normal;
	display: inline;
}

/*menu for navigation*/
#navmenu{
		
		clear:left;
		font-size:1.5em;
		float:left;
		min-height:300px;
		width:200px;
		background-color:ff9933;
		
		
		}


#bodydiv{
		background-image:url(images/menubg.png);
		background-repeat:repeat-y;
		border:4px solid #ff0000;
		background-color:#ff9933;
		width:972px;
		min-height:300px;
		overflow:hidden;
}

/*this is the background white image in the footer*/
#footerinner{
		border-left:4px solid #ff0000;
		border-right:4px solid #ff0000;
		border-bottom:4px solid #ff0000;
		background-color:#FFFFFF;
		width:972px;
		height:60px;
		margin:auto;
		padding-top:4px;
		text-align:center;
		float:right;
}

/*this says store locations in the footer*/
#fcontent1{
		line-height:2;
	float:left;
	height:20px;
	padding: 5px 20px 5px 20px;
	color:#000000;
	font-size:24px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	text-align:center;
}


/*this is the bar on the contact page that has the thing written in it*/
#divider{
		height:25px;
		text-align:center;
		background-color:#FF0000;
		font-size:20px;
		color:#FFFFFF;
		width:768px;
		position:relative;
		right:10px;
		float:left;
}

/*this is the bar on that page that has the thing written in it*/
#bigdivider{
		height:50px;
		text-align:center;
		background-color:#FF0000;
		font-size:35px;
		color:#0000CC;
		width:768px;
		position:relative;
		right:10px;
		bottom:22px;
		float:left;
}

/*this says the locations of the stores*/
#fcontent2{
		float:left;
		height:42px;
		text-align:left;
		padding: 5px 10px 5px 10px;
		position:relative;
		line-height:normal;
		color:#000000;
		font-family:Geneva, Arial, Helvetica, sans-serif;
		font-size:15px;
}

/*this is setting the properties for the h2 headding in the fcontent2 div*/
#fcontent2 h2{
		color:#FF0000;
		font-family:Geneva, Arial, Helvetica, sans-serif;
		font-size:20px;
		font-weight: normal;
		display: inline;
}

/*this is where the viblock image in the footer lives*/
#fcontent3{
		float:right;
		background-image:url(images/viblockfooter.png);
		background-repeat:no-repeat;
		
		height:60px;
		width:186px;
}

/*i be messing with the stuff here. changing it up if you catch my drift*/
h2{
		color:#000000;
		font-family:Geneva, Arial, Helvetica, sans-serif;
		font-size:20px;
		text-decoration:none;
		font-style:normal;
		font-weight: normal;
}

/*this is a small panel that should be used to divide the content area into three bits*/
#smpanel{
		padding-top:20px;
		min-height:200px;
		width:252px;
		float:left;
		text-align:center;
		
}

/*this is the bar on that page that has the thing written in it*/
#bigdivider2{
		text-align:center;
		background-color:#FF0000;
		font-size:2.5em;
		color:#FFFFFF;
		width:100%;
		position:relative;
		float:left;
}

/*this is the wee download bitty*/
#download{
		float:left;
		padding:10px;
}

/*this makes the image on the homepage float right and defines its size*/
.homeimg {
		float:right;
		padding:10px;
		 
		
}
/*------------------------------------------------------------------------------------------------------------------------------------*/
/*contact us page---------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------*/
		
		
/*this is where the location details on the conatct page live*/
#contacttop{
		float:left;
		text-align:left;
		height:auto;
		font-size:16px;
		padding:10px;
}

/*have a guess at what this does i dare you */
#contacttop strong{
		color:#FF0000;
		
}

/*this is what has the google map in it. its being made to float left*/
#mapdiv{
		border-left:4px solid #FF0000;
		float:right;
		width:379px;
		padding:10px;
		
}

/*setting the properties for the contact us page. this is the bit where all the names of the people are listed*/
#contactnames{
		min-height:300px;
		width:200px;
		background-image:url(images/menubg.png);
		background-repeat:repeat-y;
		float:left;
		font-size:16px;
		color:#000000;
		text-align:center;
}

/*getting rid of the annoying things in the a tag*/
#contactnames a{display:block;
		font-family:Arial, Helvetica, sans-serif;
		text-decoration:none;
		padding-top:10px;
		padding-bottom:10px;
		color:#000000;
		border-bottom:0px solid #ff0000;

}

/*i need the h2 to be inline */
#contactnames h2{
		display:inline;
		font-size:20px;
		font-weight:bold;
}

#products p{
padding:10px;
}

#products_villa p {
		  padding:10px;
		  }
		  
#products_villa img {float:left;
padding-bottom:10px;}

#products img {float:left;
			    padding:30px 0px 0px 30px;}		  

/*----------------------------------------------------------------------------------------------------------------------------------
---------------paving stones prpduct page-------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------*/

/*this holds everything that is special about the pavers page and sets the properties of it*/
#pavercontent{
		width:758px;
		min-height:300px;
		position:relative;
		float:left;
		clear:both;
}

/*here is where i change how the h1 tag looks*/
#pavercontent h1{
		color:#000000;
		font-size:26px;
}

/*this is changing the h2 tag so it looks more differenter and the such*/
#pavercontent h2{
		color:#FF0000;
		font-size:18px;
		display:inline;
}

/*this div is to hold the colour image1 on the pavers page*/
#colour1{
		background-image:url(images/colour1.png);
		width:161px;
		height:242px;
		float:left;
}

/*this holds the colour2 image and stuff.*/
#colour2{
		background-image:url(images/colour2.png);
		width:161px;
		height:242px;
		float:left;
}

/*this is where the names of the colours goes. it is used twice on the pavers page*/
#colourdescription{
		padding-left:10px;
		float:left;
		font-size:22px;
}

/*these panels are just collumns that things can go into in the content area. there are 2 panels wide*/
#panel{
		padding-top:20px;
		min-height:200px;
		width:379px;
		float:left
}


/*-------------------------------------------------------------------------------------------------------------------------------
tasman retainer -----------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------*/

/*this is the colour pictures for the tasman retainers*/
#tasman1{
		background-image:url(images/tcol1.png);
		width:161px;
		height:176px;
		float:left;
}

/*this is also the colour example pictures for the retainers*/
#tasman2{
		background-image:url(images/tcol2.png);
		width:161px;
		height:176px;
		float:left;
}

/*this makes the image up in the headding of the retainers*/
.right {float:right;
padding:10px;
}