/*broswers add padding to divs,body etc unless you set it all to zero like this*/
			body {margin: 0px; padding: 0px; text-align:center;} 
				h1 {margin: 0px; padding: 0px; } 
				h2 {margin: 0px; padding: 0px; } 
				p {margin: 0px; padding: 0px; }
				img {margin: 0px; padding: 0px; } 
				block { margin: 0px; padding: 0px; height: 25px; width: 150px;} 
			li {margin:0px; padding: 0px;}
			ul{margin: 0px; padding: 0px;}
			/*the img border none below is to stop browsers putting a 
blue border - yuk- around the link*/
			img
{  border-style: none;
}
/*the a outline none below is to stop firefox putting that 
'cute' little border - yuk- around the link once it has been clicked */
 
a {
    outline: none;
}

h1{
	text-align:left;
	font-weight: strong; 
	 color:#96999C;
}
.floatedleft{
	float:left;
}
#centre p{
	text-align:left;
	line-height: 1.5em;
	font-family: Arial;
	padding: 5px;
	color:#1C3340;
	font-size:medium;
}

		
			
			#leftside {
				
				width: 200px;
				height: inherit;
				float: left;
				margin-left: 8px;

padding: 0;
				/*border: solid blue 2px;*/
				background-color: #dfe2e5;
			}
			#leftmenu{
				width: 100%;
				font-size: 11px;
				height: 500px;
				padding-top: 20px;
			}
			
				#leftmenu ul{
					list-style-type: none;
				
					padding: 0;
					margin: 0;

					}
				#leftmenu ul li{
					/*height: 15px; height makes a terrible mess of the menu don't use it!!*/
					margin: 0 5px;
					border-bottom:solid #96999C 1px;
					color:#CCD2D6; 

		
			}
					#leftmenu ul li a{
 text-decoration:none;
 color: #3E6786;
 
 display: block;
 padding: 5px 20px;
}
#leftmenu ul li a:hover{
	 /*background: #fff url(arrow1.gif)*/
	 left center no-repeat; 
 text-decoration:none;
 color: white;
border-bottom: solid 1px #3E6786;
 background-color: #96999C;




}	
			
			#rightside {
				width: 760px;
				height:inherit;
				
				float: right;
				
margin: 0;
padding: 0;
			}
			
			#centre {
				width: 750px;
			/*it is important that this is not given a height. It used
			 * to have a height of 1000px but IE can't cope and makes a whole extra overflow of it which
			 * shows white at the foot of the page
			 */
				margin-left: auto;
				margin-right: auto;
				clear: both;
				margin-top: 8px;
				background-color: white;
			}
			#slideshow {
				margin-top: 10px;
				width: 740px;
				text-align: center;
				margin-left: auto;
				margin-right: auto;
				clear: both;
				
				
			}
			/* because this is*/
			/* strict html1 the height of the header has to be specified */
			/*otherwise a padding of 3 pixels is added to the bottom of the image*/
#header {
				width: 760px;
			height:118px;
				float: left;
		
				clear: both;
margin: 0;
padding: 0;
			}
			

			
#menu{
margin: 0;
padding-left: 50px;
      width: 710px;
      background-color: navy; 
      height: 35px;
     margin-left: auto;
 margin-right: auto;
      clear: both;
      font-weight: bold;
	   background-color: #1C3340;

  
    
        
  }
#menu ul{ margin-left: -2.5em;
}
#menu li { list-style-type: none;
margin-top: 6px;
width: 7em;
text-align: center;
float: left;
color: #dfe2e5;
font-family: "Arial";
font-size: 11px;



}
#menu a{
 text-decoration:none;
 color: #999999;
 
}
#menu a:hover{
 text-decoration:none;
 color: white;
 font-weight: bold;


}
			




			
			
#footer {
				width: 740px;
				height: 20px;
				margin-left:auto;
		margin-right:auto;
				/*border: solid black 2px;*/
				clear: both;
				background-color: #96999C;
				
			}
			
div.img
{
  margin: 0px;
  border: 1px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}	
div.img img
{
  display: inline;
  margin: 1px;
  border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
  text-align: center;
  font-weight: normal;
  width: 181px;
  margin: 1px;
}



/*so this is a way of handling opacity that means a.visited is 
full opacity, however further down in the gallery opacity is handled 
at present with javascript. ie doesn't support the opacity 
done this way within the boxes container, but the 
javascript leaves the image iopaque after visiting which also
  may not be ideal - the client will have the final choice*/
#boxescontainer{
	margin-top: 20px;
	width:750px;
	height: 184px;
padding-left:2px;

}


#boxescontainer a{
opacity:1;filter:alpha(opacity=100)	
}
#boxescontainer  a:visited{
opacity:1;filter:alpha(opacity=100)	
}
#boxescontainer  a:hover{
opacity:0.6;filter:alpha(opacity=60)	
}
#box{
	width: 182px;
	height: 182px;
	float:left;
	margin-right:6px;
}
#lastbox{
	width: 182px;
	height: 182px;
	float:right;
	padding-right:2px;

}
.greybox{
	margin-top:124px;
	filter:alpha(opacity=50);
	opacity:0.5;
	width: 178px;
	height: 60px;
	background-color: black;
	position: absolute;
    color: white;
	font-family:Times New Roman; 
	font-size: 24px;

	text-align:center;	
}

#logo{
padding-top:80px;
padding-bottom:37px;
	max-height:143px;
	background-color: #1C3340;
	text-align:center;
	color: white;
font-size:medium;
	
}
#latest{
	font-family: Times New Roman;
	font-size:large;
	margin-top: 15px;
	text-align: left;
margin-left: 30px;
margin-right: 20px;
padding-bottom: 5px;
border-bottom: solid gray 1px;
	
	
}

	#gallery{
				margin-left: 70px;
padding-top:20px;
				width: 680px;
				height: 430px;
				
			}
			#galleryholder{
				float: left;
				width: 225px;
				height: 350px;	
				}	

			#galleryholderbottom{
				float: left;
				width: 145px;
				height: 160px;	
			}	
			#galleryholdertop{
				float: left;
				width: 160px;
				height: 220px;
			}
#imageholderleft{
width: 310px;
float:left;

}
#imageholderright{
width: 310px;
float:right;

}
div.img
{
  margin: 2px;
  
  height: auto;
  width: auto;
  float: left;
  text-align: center;
   border-style: none;
}	
div.img img
{
  display: inline;
  margin: 3px;
 
}

div.desc
{
  text-align: center;
  font-weight: normal;
 
  margin: 2px;
}

#FrogJS{
width: 740px;
height: 600px;
margin: 0 auto;
padding-top: 100px;
}
#FrogJSCredit{
text-align: right;
font-size: 80%;
color: #999;
padding: 1px;
}
#FrogJSCaption{
text-align: left;
line-height: 140%;
}
/*css for the contact form*/
fieldset {
	background-color: #AAAAFF;
margin-bottom: 10em;
}
label{
margin-top: 1em;
	clear: left;
	float: left;
	width: 10em;
	text-align: right;
	margin-right:.5em;
}

input{
	background-color: #CCCCFF;
	float: left;
margin-top: 1em;
}
button{
clear:both;
	float: left;
	width: 10em;
	margin-left: 30em;
	margin-top: 1em;
	background-color: #000000;
color: #FFFFFF;
}
select{
margin-top: 1em;
background-color: #CCCCFF;
float: left;
}
textarea{
background-color: #CCCCFF;
	clear: left;
float: left;
width: 29em;
	margin-left: 9.5em;
	margin-top: 1em;
}
#featuredgalleryholder{
	float:left;
clear:left;
	
}
#featuredgalleryholderbottom{
	position:absolute;
	top:910px;
	right: 50px;
}	
#featuredworkcolorband{
	background:#CCCCFF;
clear:both;
height:440px;	}
/*index css*/
.stepcarousel{
position: relative; /*leave this value alone*/

overflow: scroll; /*leave this value alone*/
width: 748px; /*Width of Carousel Viewer itself*/
height: 265px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 1px; /*margin around each panel*/
width: 746px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}