@charset "UTF-8";
/***********************************************************
*  SCREEN.CSS  by N3W Media v1.0 Jan 08                    *
*                           v1.1 Jul 08 Added GALLERY	   *
*														   *
*  This style sheet is used by the pages that are fixed    *
*  length and do not grow vertically     				   *
*                                                          *
***********************************************************/


/************************************************

TYPOGRAPHY

Set up some general styles for the main mark-up
elements.
 
*************************************************/

#body{
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	position:relative;
	margin: 0 auto;
	width:811px;
	height:712px;
	border-color:#294f28;
	border-style:solid; 
	border-width:thin;
	}

h1 {
	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;
	}

.italic {
	font-style:italic;
	}

li	{
	font-size:12px;
	line-height:130%;
	}
	
a	{  
	color:#294F28;
	/* text-decoration:none; */
	}

/************************************************

LAYOUT

These are the main DIVs that are used to control
site layouts and positioning. 
 
*************************************************/
	
	
	
#bodyLeftBlock {			/* the body block elements contain the changeable text and graphic areas for each page  */
	position:absolute;
	background-color:#E2DACD;
	left:178px;
	top:135px;
	width:274px;
	height:547px;			/* this reduced by 20px to allow for the padding */
	padding-top:20px;		/* this pushes the h1 tag down so that it aligns with the start of the menu */
	visibility:visible;
	z-index:1;
}

#bodyLeftBlock h1 {         /* This is used to control the h1 on the home page only as it has a different layout to the rest of the site */
	font-size: 14px;
	font-weight: bold;
	margin-left:10px;
	text-align:left;
	color:#244F28;	
}

#bodyLeftBlockInternal {
	position:absolute;
	background-color:#E2DACD;
	left:178px;
	top:135px;
	width:602px;			/* this is reduced by 20px to allow for the padding */
	height:547px;			/* this reduced by 20px to allow for the padding */
	padding:10px;			/* keep all the text away from the edge of the box */
	visibility:visible;
	z-index:1;
}

	
/* #bodyLeftBlockInternal p {
	font-size:12px;
	line-height: 120%;
	}
*/

#bodyRightBlockHomePage {
	position:absolute;
	background-color:#E2DACD;
	left:452px;
	top:111px;
	width:348px;
	height:591px;
	visibility:visible;
}

#bodyRightBlockInternal {
	position:absolute;
	background-color:#E2DACD;
	left:452px;
	top:111px;
	width:348px;
	height:24px;
	visibility:visible;
	text-align:right;
}


/* 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;
}
	

/* Because the banner and the body have a stepped overlap design, we need a two part banner */
#banner {
	position:absolute;
	left:10px;
	top:10px;
	width:790px;
	height:101px;
	visibility:visible;
}

#subBanner {
	position:absolute;
	left:10px; 
	top:111px;
	width:434px;
	height:24px;
	visibility:visible;
}

/* This is vertical menu down the left hand side of the page */
#menuBar {
	position:absolute;
	left: 10px;
	top:125px;
	width:160px;
	height:577px;
	visibility:visible;
	background-color:#294F28;
	z-index:2;
}

#photoButtonOne {
	position:absolute;
	bottom: 135px;
	left:50px;
}

#photoButtonTwo {
	position:absolute;
	bottom: 0px;
	left:50px;
}

#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;
}


.photobutton {			/*this defines the generic class for photo buttons on the site */
	border:none;
	text-decoration:none;
}

/********************************************************
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;
	}

/********************************************************
SITE SPECIFIC FUNCTIONS
Anything that is developed specifically for the site
and therefore might be an oddball - like Google Map API
********************************************************/
	

/* On the directions page we have a map and a set of directions that need to be placed side by side and formatted */
/* Some text is hidden for screen users and is only shown on the printed page */

#map_canvas {
	width: 290px; 
	height: 350px; 
	float:left; 
}

#directions {	
	width: 300px;
	height: 350px;
	float:right;
	overflow:scroll;
}

#mapTableHeader {
	width:290px;
}

#directionsTableHeader {
	width:300px;
}

.googleTableHeader {
	background-color:#EEEEEE;
}

#printerpara {
	display:none;
}

.printedPara {
	display:none;
}

/***************************************************************
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: 0px;  /* This controls the vertical alignment of the enlarged image */
	left: 50px; /*position where enlarged image should offset horizontally */
}
/*------------------------------------------------------------------*/
/* This is the styling for the Gallery Pages                        */
/*                                                                  */
/*                                                                  */ 
/*                                                                  */
/*------------------------------------------------------------------*/

#GalleryPageSelector p {
	display:inline; 
	color:#294F28; 
	margin-left:67px;
	}
	
#GalleryPageSelector ul {
	display:inline; 
	margin:0; 
	padding:0;
	}
	
#GalleryPageSelector li {
	display:inline;
	}

#GalleryPageSelector a:hover {
	border-top: #294F28 2px solid;
	}
	
#GalleryPageSelector a.selected {
	border-top: #294F28 2px solid;
	}
	
#selectorContainer a img {
	text-decoration:none;
	border:none;
	}
			
#BigPictureContainer {
	display:block; 
	text-align:center; 
	margin-top:5px; 
	margin-bottom:17px;
	}
	
#selectorContainer {
	text-align:center;
	}
	
.selectorObject {
	margin-right:5px;
	}