/***********************************************************
*  STYLE.CSS  by N3W Media v1.0 Jan 08                     *
*														   *
*  v1.1 Oct 09  Added rules for Contact Page 			   *
* 														   *
*  This style sheet is used by the pages that use FAUX Cols*
*  because they have to expand vertically 				   *
*  These pages also have two images that can ZOOM          *
***********************************************************/


#body { /* this allows me to have a green border with a gap inside it to the content elements */
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	width:790px;
	margin: 0 auto;
	padding:10px;
	border: thin solid #003300;
	}

#wrapper { /* the wrapper is used to create the faux col layout so that the page can grow vertically as required */
	width:790px;
	margin: 0 auto;
	background-color: #FFFFFF;
	background-image: url(/images/faux_cols.gif);
	background-repeat: repeat-y;
	background-position: center;
}

#branding { /* this is the block that holds the logo and in this design connects to the body cols also */
	padding:0px;
}

#content { /* this block sits on the right and is the main space */
	padding-top:15px;
	padding-right:10px;
	width:600px;
	float:right;
	min-height:100%;
}

#contentLeftCol {
}

#contentRightCol {
	float:right;
	width:150px;
}

#siteFooter  {
	font-family:Verdana, Arial, sans-serif;
	font-size:70%;
	font-weight:bold;
	width:811px;
	padding: 15px 0 0 0;
	margin: 0 auto;
	color:#CCCCCC;
}

#siteFooter a {
	color: #CCCCCC;		/* sets the colour of footer items to light grey  */
	text-decoration:none;
}

h1 { /* we need to style the h1 main page title to match the rest of the site */
	font-size:16px;
	font-weight:bold;
	text-align:right;
	color:#244F28;
	}

h2	{
	font-size: 14px;
	font-weight: bold;
	margin-left:10px;	
	}

h3	{
	font-size:14px;
	font-weight:bold;
	margin-left:10px;
	margin-bottom:5px;
	margin-top:10px;
	color:#244F28;
	}

p 	{
	font-size:12px;
	line-height:160%;
	margin-left:10px;
	margin-right:10px;
	margin-top:2px;
	}

li	{
	font-size:12px;
	line-height:130%;
	}
	
a	{  
	color:#294F28;
	/* text-decoration:none; */
	}
fieldset {					/* Space the Enquiry Form Fieldsets out on the page*/ 
	margin-bottom:14px;
	}
	
.lastFieldset {			    /* The last Fieldset needs less space */
	margin-bottom:6px;
	}
	
.bullet_list {              /* Sometimes we have an unordered list that needs to be positioned to its associated heading or text */
	margin-top:5px;
	}
	
.clear { /* this is used to keep both the nav and content within the wrapper by putting something across the whole width at the bottom */
	clear:both;
}
	
.whitetext {
	color:#FFFFFF;
	}

.greenbackground {
	background-color:#244F28;
	}
	
.accenttext {											/* We are using a dark green to accent the text in table titles and odd other places! */
	color:#244F28;
	font-weight:bold;
	}
	
.tablecontentalignment {
	text-align:left;
	font-size:12px;
	}
.tablecontentlong {
	text-align:left;
	vertical-align:top;
	font-size:12px;
	}
/************************************************
LAYOUT
These are the main DIVs that are used to control
site layouts and positioning. 
*************************************************/


/* to save space on the contact page we need a two col layout for the input fields */
.contact_left_col {
	width:250px;
	float:left;
	text-align:right;
	padding: 3px;
}

.contact_right_col {
	width:270px;
	float:right;
	text-align:left;
}

/********************************************************
DESIGN
This section sets up some generic classes that change 
the typography or design. 
********************************************************/
				
.formtext { 											/* this define the way that form fields and labels look */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	width: 250px;
}

.errorfield {											/* This is used to put a red around a field that has an error in it*/
	border: solid thin #FF0000;
	background-color:#FFA8A8;
	color:#000000;
	}

.successfield {											/* This is used to put a green around a field that shows success*/
	border: solid thin #294F28 ;
	background-color:#77BF73;
	color:#000000;
	}

.formgroups {  											/*this heighlights the group text on the form page */
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#000000; 										/* over rides the default in IE7 which would be blue */
	}
	
.whitetext {
	color:#FFFFFF;
	}

.greenbackground {
	background-color:#244F28;
	}
	
	
.accenttext {											/* We are using a dark green to accent the text in table titles and odd other places! */
	color:#244F28;
	}

.tablecontentalignment {
	text-align:center;
	font-size:12px;
	}
.tablecontentlong {
	text-align:left;
	font-size:12px;
	}

.spacedlist li {
	margin: 5px 0 8px 0;
	}

/*------------------------------------------------------------------*/
/* The photobutton & photolinks classes are used to contorl the two */
/* photo buttons                                                    */
/* Because of the fluid design we cant use         */ 
/* absolute positioning like the rest of the site                   */
/*------------------------------------------------------------------*/


.photolinks {            /* this positions the photos within the menu bar and separates them from each other */
	text-align:right;
	padding-top:20px;
	padding-right:10px;
	width:160px;
}

.photobutton {			/*this defines how the image looks so we take off the hyperlink stuff */
	border:none;
	text-decoration:none;
}

#photoButtonOne {
	float:right;
	margin-bottom:10px;
}

#photoButtonTwo {
	float:right;
}
				


/***************************************************************
This handles the dynamic photo enlarger
***************************************************************/
	
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color:#E6DECD;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
	visibility: visible;
	top: -200px;  /* This controls the vertical alignment of the enlarged image */
	left: -350px; /*position where enlarged image should offset horizontally */
}