/* Generic
================================== */
/* Sets all margins and padding initially to zero. */
* {margin:0; padding:0;}

/* Eliminates problem with Firefox who sees image as a hyperlink. 
Will disappear with border set to 0pt. */
img
{
	border-width: 0pt;
}


/* Typography generic
================================== */

/* Sets the generic font and font size for body. Also sets browser background colour. 
Center text to center whole layout in IE5.5. Than bring back left later in wrapper. */
body
{
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	background-color: #8A874B;
	margin-top: 5px;
}

/* Standard paragraph. Left, right and bottom padding. Set olive green colour. 
Line-Height for leading.*/
p
{
	padding: 0 10px 10px 10px;
	color: #5A5730;
	line-height: 125%;
}

/* Standard heading h2. Same padding as paragraph. Dark green text colour. Bigger font. */
h2
{
	padding: 0 10px 10px 10px;
	color: #41594F;
	font-size: 110%;
}

/* Standard heading h3. Same padding as paragraph. Dark green text colour. Bit smaller than h2.
A bit less padding on bottom, so distance to paragraph is smaller. */
h3
{
	padding: 0 10px 5px 10px;
	color: #41594F;
	font-size: 100%;
}


/* Links generic
================================== */

/* Define generic properties for all links. No underline and set font size.
Also background colour to be inherited. Then set colour for all link states. */
a
{
	text-decoration: none;
	font-size: 100%;
	background-color: inherit;
}

/* Links to be red. */
a:link
{
	color: #8F0000;
}

/* Visited links to be brown. */
a:visited
{
	color: #8D9B95;
}

/* Hover and active states to be lighter blue. */
a:hover, a:active
{
	color: #8D9B95;
}

/* Wrapper
================================== */

/* Order important for search engines. Calculations: 
230px(side) + 450px(primary) + 70px(secondary). */

/* Main wrapper centres the whole page with set width. 
Re-align the text again to the left, after it was all centred in body tag for IE5.5. 
Background filler image for faux-columns. Faux Filler also contains right vertical strip. */
#wrapper
{
	width: 750px;
	margin: 0 auto;
	background-color: #FFF;
	padding: 0;
	text-align: left;
	background-image: url(../images/Faux_Filler.gif);
	background-repeat: repeat-y;
	background-position: left top;
}


/* Header
================================== */

/* Top header with same width as wrapper and set height. Faux Filler positioned 
as background image with different center colour. */
#header_one
{
	width: 750px;
	height: 127px;
	background-image: url(../images/Faux_Filler.gif);
	background-repeat: repeat-y;
	background-position: left top;
}

/* Gap caused by default vertical alignment of inline elements is fixed through setting the
vertical-alignment of the image itself to bottom. Without this there would be a gap below images, 
regardless if height is fixed or not. */
#header_one img
{
	vertical-align: bottom;
}

/* First box inside header_one for the logo on the left. 
Set width and float left. Padding left one pixel less than expected. */
#header_one #box1
{
	width: 200px;
	float: left;
	padding-left: 29px;
}

/* Second box inside header_one contains the image. Float left. 1px wider than expected in html. */
#header_one #box2
{
	float: left;
}

/* Second header with same width as wrapper and set height. Faux Filler positioned 
as background image with different center colour. */
#header_two
{
	width: 750px;
	min-height: 24px;
	background-image: url(../images/Faux_Filler_Footer.gif);
	background-repeat: repeat-y;
	background-position: left top;
	background-color: #9A1400;
}

/* Hack for IE. IE does not understand min-height, but understands height. */
* html #header_two 
{ 
	height: 24px; 
}

/* Div for line above and below header. Same width as wrapper and set height. Faux Filler positioned 
as background image with different center colour. */
.header_line
{
	width: 750px;
	min-height: 2px;
	font-size: 0;
	line-height: 0;
	background-image: url(../images/Faux_Filler_Header_Line.gif);
	background-repeat: repeat-y;
	background-position: left top;
}

/* Hack for IE. IE does not understand min-height, but understands height. */
* html .header_line 
{ 
	height: 2px; 
}


/* Navigation
================================== */

/* Wrapper for dropdown navigational menu. Margin left to line up with image and content. */
#menuwrapper
{
	margin-left: 230px;
}

/* Clears the floated menu items on both sides. Assigned to class just before
menuwrappers closing div tag. */
.clearit 
{
	clear: both;
}

/* MENUBAR is the root unordered list and menubar ul applies to all the sub-menu ul's.
Zero down padding and margins. Turn bullet points off. Do not add a font-size here. */
#menubar, #menubar ul
{
	padding: 0;
	margin: 0;
	list-style: none;
}

/* All MENUBAR links (a).  Display block to get links to behave like buttons. No underline. 
Padding around link text to create space between edges -> button. 
Smaller font-size for menu links. Colour for text is white. */
#menubar a
{
	display: block;
	text-decoration: none;
	padding: 5px 15px 0px 15px;
	font-size: 80%;
	color: #FFF;
}

/* Each link in MENUBAR with a submenu needs trigger class assigned.
Same padding (must) as menubar links. Background image (symbol) positioned with no repeat. */
#menubar a.trigger
{
	padding: 5px 15px 0px 15px;
}

/* List items in MENUBAR. Float left for horizontal display. Set width for IE5 Mac. 
See last rule in Navigation CSS -> sets width to auto for all other browsers 
(hides it from IE5 Mac). The width is proportional.
As you add and edit root menu items, you will need to test this width
to ensure it is wide enough to accomodate all text. */
#menubar li 
{
	float: left;
	width: 12em;
}

/* Set width for SUB-MENU box and the SUB-MENU list items inside - in proportional em units. 
This allows the sub-menu width to expand if users resize the text in their browsers. */
#menubar li ul, #menubar ul li  
{
	width: 12em;
}

/* SUB-MENU links. Set padding to suit drop down indents. */
#menubar ul li a
{
	padding: 5px 0px 5px 15px;
	background-color: #8F0000;
}

/* SUB-MENU unordered lists describes each dropdown SUB-MENU group. 
Positioned absolute to appear below their root trigger.
Set to display none to hide them until trigger is moused over.
Background color must be set or problems will be encountered in MSIE. */
#menubar li ul
{
	position: absolute;
	display: none;
	background-color: #FFFFFF;
}

/* Changes the text color and background color when the Root-Level
MENUBAR items are moused over. The second selector sets color and background
when Root-Level MENUBAR items are accessed with the keyboard tab key. The third
selector sets an active state to support keyboard access in MSIE. The fourth 
selector is assigned to IE5 and IE6 Windows via the javascript.
Note that IE7 supports hover on elements other than links and so behaves
like Firefox, Opera, and Safari - making the menu operable even if JavaScript
is not enabled. Padding bottom to align with background navigation image. */
#menubar li:hover a, #menubar a:focus,
#menubar a:active, #menubar li.hvr a
{
	min-height: 14px;
	color: #FFF;
	background-color: #8F0000;
	padding-bottom: 5px;
}

/* Hack for IE. IE needs more padding at the bottom when hover over. */
* html #menubar li:hover a, #menubar a:focus,
#menubar a:active, #menubar li.hvr a
{ 
	padding-bottom: 5px;
}

/* Set the SUB-MENU unordered list to be visible when its associated
Root-Level MENUBAR link is moused over. The second selector is assigned to IE5 and IE6 
via the javascript. Top padding zero to avoid long bar under main hover. */
#menubar li:hover ul, #menubar li.hvr ul 
{
	display: block;
	color: #FFF;
	background-color: #8F0000;
	padding-top: 0px;
}

/* Set text color of the SUBMENU links when the root-level
MENUBAR items are moused over. The second selector is 
assigned to IE5 and IE6 via javascript.
The color set should match the normal Sub-Level link color
in the rule: #menubar ul li a. Set left border. */
#menubar li:hover ul a, #menubar li.hvr ul a 
{
	color: #FFF;
	background-color: #001A2E;
	border-bottom: 1px #FFF solid;
}

/* The normal hover class for SUB-MENU Sub-Level links. The Important directive
is required for older browsers. We set a background color, which shows
over the gradient background. We set text color to white. */
#menubar ul a:hover 
{
	background-color: #8F0000!important;
	color: #FFFFFF!important;
}

/* The single backslash \ character inside this comment
causes IE5 Mac to ignore the following rule, which allows other
browsers to render top-level menu items to their natural width.
Do not edit this rule in any way. */
#menubar li 
{
	width: auto;
}


/* PrimaryContent (middle column)
================================== */

/* Three main columns, named in order of importance and display when styles switched off.
Firstly display:inline is required for IE6 for correct column display. Margin bottom. */
#primaryContent
{
	float: left;
	width: 750px;
	display: inline;
	margin: 0;
}

/* Specifying threeColLayout in the body will activate the following div 
instead of the default primaryContent -> not IE 5.5 + 6. Float left, set width to 449 (450-1 border). 
Margin on left to allow for sideContent with 230px width. Border left. */
#threeColLayout #primaryContent
{
	float: left;
	width: 449px;
	margin: 0 0 0 230px;
	border-left: 1px #41594F solid;
}

/* ID for box inside primaryContent. Margin all around. */
#boxPrimary
{
	margin: 10px 30px 10px 20px;
}

/* Smaller font size for breadcrumbs inside boxPrimary. */
.p_breadcrumbs
{
	font-size: 75%;
	padding-top: 3px;
}

/* Box inside boxPrimary to move the gallery images in the right spot. */
#boxPrimary .padleft
{
	padding-left: 12px;
	padding-top: 10px;
}

/* Float all gallery images left. Allow for margin right and bottom for proper distance. */
#boxPrimary .padImage
{
	float: left;
	margin-right: 30px;
	margin-bottom: 15px;
}

/* Clear the top link on both sides. Important for the above floating images in the gallery. */
#boxPrimary .pLeft_text
{
	clear: both;
}


/* SecondaryContent (right column)
================================== */

/* Secondly content to the right of primary content. Float left and set width to 70px. 
Image positioned in HTML. */
#secondaryContent
{
	float: left;
	width: 70px;
}


/* SideContent (left column)
================================== */

/* Last comes the side content on the left hand side. 
Width 230px and negative margin of -750px to the left. */
#sideContent
{
	float: left;
	width: 230px;
	margin: 0 0 0 -750px;
}

/* Class for box inside sideContent. Holds all three Quick link boxes. 
Set only margins for box. */
#boxSideContent
{
	margin: 12px 25px 20px 55px;
}

/* Heading inside boxSideContent in white. Blue background and olive borders. Font weight back to 
normal since h2 but used as p really. Smaller font size. Top margin.
Line-height to center inside heading box (only if single line of text). ???????*/
#boxSideContent h2
{
	margin-top: 12px;
	color: #FFF;
	line-height: 20px;
	padding-bottom: 0px;
	background-color: #001A2E;
	border-top: 2px #8A874B solid;
	border-bottom: 2px #8A874B solid;
	font-weight: normal;
	font-size: 90%;
}

/* Text inside boxSideContent. Bottom margin to give even distance between second box 
(same as other distances). Light colour background behind text. Again normal font weight 
and smaller font size. */
#boxSideContent p
{
	margin-bottom: 15px;
	color: #41594F;
	padding: 5px 10px 5px 10px;
	background-color: #EFECCA;
	font-weight: normal;
	font-size: 90%;
}


/* Google Map
================================== */
/* Class inside div for google map to position map correctly. 
Overflow hidden to avoid bottom trademark text to go outside div. */
#map
{
	padding-top: 15px;
	padding-bottom: 15px;
	margin-left: 12px;
	overflow: hidden;
}

/* Class inside div for google map to position map correctly. */
.ns
{
	padding-top: 15px;
	margin-left: 15px;
	padding-bottom: 15px;
}


/* Styles for form on contact page
================================== */

/* Fieldset groups related block. */
fieldset
{
	margin: 10px 0px 5px 10px;
	border: 1px #001A2E solid;
	color: #41594F;
	background-color: #EFECCA;
	padding-bottom: 15px;
	padding-left: 15px;
	padding-top: 10px;
}

/* Label for headings above form input boxes. */
label
{
	margin-top: 5px;
	display: block;
}

/* Define length of input boxes. */
input
{
	width: 250px;
	margin-top: 5px;
	padding-left: 0;
	margin-left: 0;
}

/* Creates anchor for user in field. */
input:focus, textarea:focus
{
	background: #C6CDCA;
}

/* Class for "required" text. */
.required
{
	font-size: 80%;
	color: #BE3509;
}

/* Style the submit button. */
.button 
{
	background-color: #EFECCA;
	color: #41594F;
	width: 250px;
	height: 25px;
	border: 1px #001A2E solid;
}

/* Red inline text for php messages. Used with span in html. */
#pRed 
{ 
	color: #BE3509;
}

/* Give distance for submit button from top and bottom. Colour button. */  
.zemContactForm .zemSubmit 
{ 
	background-color: #C6CDCA;
	color: #41594F;
	width: 200px;
	height: 25px;
	border: 1px #001A2E solid;
	margin-top: 10px;
}

/* Error messages to be displayed without bullet points. Colour red.
Margin and padding to zero to start at beginning of column. */
.zemContactForm ul.zemError li
{
	list-style: none;
	color: #F03;
	margin-left: 0px;
	padding-left: 0px;
}

/* Display messge sent in red colour. */
.zemThanks p
{
	margin-left: 10px;
	padding-left: 0px;
	color: #F03;
}

/* Footer
================================== */

/* Footer with same width as wrapper. Cleared both sides. Footer is required for faux-columns. 
Footer contains copyright and link to ottimoto. Different background filler image for faux-columns. */
#footerBar
{
	clear: both;
	width: 750px;
	background-image: url(../images/Faux_Filler_Footer.gif);
	background-repeat: repeat-y;
	background-position: left top;
}

/* Paragraph style for footer text. Centred and smaller. White text. 
Padding top and bottom to even out vertically. */
#footerBar p
{
	font-size: 75%;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	color: #FFF;
}