/* 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;
	margin: 0;
	padding: 0;
}


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

/* Sets the generic font and font size for body. Also sets background colour. 
Center text to center whole layout in IE5.5. Than bring back left later in wrapper. 
Margin for top. Place background image with drop shadow for top part. */
body
{
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	margin-top: 30px;
	background-image: url(../images/Screenstyle_BG.gif);
	background-repeat: repeat-x;
	background-color: #F2F1E4;
}

/* Standard paragraph. Set brown colour for text. 
Line-Height for leading.*/
p
{
	color: #5A3F22;
	line-height: 130%;
}

/* Standard heading h2. Bigger font. Padding bottom for distance. */
h2
{
	padding-bottom: 10px;
	color: #5A3F22;;
	font-size: 130%;
}

/* Standard heading h3. Smaller font. Padding bottom for distance. */
h3
{
	padding-bottom: 10px;
	color: #5A3F22;;
	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: #C62421;
}

/* Visited, hover and active links to be beige. */
a:visited, a:hover, a:active
{
	color: #BCB977;
}


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

/* Order important for search engines. Calculations: 
240px(side) + 415px(primary) + 345px(secondary). */

/* Main wrapper with 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. */
#wrapper
{
	width: 1000px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
}


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

/* Position Flash content absolut inside relative container. Move into correct position. */
#flashcontent
{
	position: absolute;
	top: 121px;
	left: 643px;
}

/* Relative positioned container for absolute positioned Flash container. */
#flashrelative
{
	position: relative;
	top: 0px;
	left: 0px;
}

/* Header zero containes only secondary navigation on the right. Set width and height. 
Positione background image for line on top and set border left and right. */
#header_zero
{
	width: 1000px;
	height: 25px;
	background-image: url(../images/Header_Zero_Topline.gif);
	background-repeat: no-repeat;
	background-position: left top;
	border-right: 1px #5A3F22 solid;
	border-left: 1px #5A3F22 solid;
}

/* ID for secondary navigation. Set height and width, also float right. Brown border top. */
#header_zero_secnav
{
	height: 24px;
	width: 345px;
	background-color: #686633;
	float: right;
	border-top: 1px #5A3F22 solid;
}

/* Move text for three secondary links down a bit. */
#header_zero_secnav p
{
	padding-top: 2px;
}

/* First top navigational link in header_zero. Font size same as in menubar for main navigation. 
No underline. Padding left to give big distance from left. */
#header_zero_secnav a.linkOne
{
	font-size: 88%;
	text-decoration: none;
	padding-left: 20px;
}

/* Second and third top navigational links in header_zero. Same as above but smaller padding left. */
#header_zero_secnav a.linkTwo, #header_zero_secnav a.linkThree
{
	font-size: 88%;
	text-decoration: none;
	padding-left: 35px;
}

/* Set colour for all link stages. Same as colours inside main navigation. */
#header_zero_secnav a:link
{
	color: #CCCC20;
}

#header_zero_secnav a:visited, #header_zero_secnav a:hover, #header_zero_secnav a:active
{
	color: #BCB977;
}

/* Top header with same width as wrapper and set height. Define background colour. 
Place background image - header text. */
#header_one
{
	width: 1000px;
	height: 155px;
	background-color: #E4E3C9;
	background-image: url(../images/Screenstyle_Header_Text.jpg);
	background-repeat: no-repeat;
	background-position: 221px 20px;
}

/* Position Screenstyle logo correctly. */
#header_one img
{
	margin-left: 35px;
}

/* Second header with same width as wrapper and set height. Border top in dark brown. */
#header_two
{
	width: 1000px;
	height: 25px;
	background-color: #686633;
	border-top: 1px #5A3F22 solid;
}

/* Third header with same width as wrapper and set height. Used for tint with drop shadow. */
#header_three
{
	width: 1000px;
	height: 64px;
	background-color: #BCB977;
}


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

/* Wrapper for dropdown navigational menu. Left margin. Set height. */
#menuwrapper
{
	margin-left: 8px;
	margin-right: 350px;
	min-height: 25px;
}

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

/* 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. Add top padding for horizontal alignment. 
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 yellow. */
#menubar a
{
	display: block;
	text-decoration: none;
	padding: 5px 20px 0px 30px;
	font-size: 88%;
	color: #CCCC20;
}

/* Each link in MENUBAR with a submenu needs trigger class assigned.
Same padding (must) as menubar links. Background image (arrow) in yellow positioned with no repeat. */
#menubar a.trigger
{
	padding: 5px 20px 0px 30px;
	background-image: url(../images/Down_Arrow_Beige.gif);
	background-repeat: no-repeat;
	background-position: 100% 9px;
}

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

/* SUB-MENU links. Set padding to suit drop down indents. */
#menubar ul li a
{
	padding: 5px 20px 0px 30px;
}

/* 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.
(According to manual the background color [here FFFFFF] must be set or problems will be 
encountered in MSIE -> did not happen -> no background colour set) */
#menubar li ul
{
	position: absolute;
	display: none;
}

/* 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
{
	color: #BCB977;
	padding-bottom: 5px;
}

/* Change the arrow from yellow to white when trigger menu is hovered over. 
It will revert back to the yellow arrow once moved down to submenus. Trigger text still stays white 
to indicate the active "column". */
#menubar a.trigger:hover
{
	background-image: url(../images/Down_Arrow_Yellow.gif);
	background-repeat: no-repeat;
	background-position: 100% 9px;
}

/* 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 for distance between first item in dropdown list 
and trigger text above. */
#menubar li:hover ul, #menubar li.hvr ul
{
	display: block;
	color: #FFF;
	background-color: #686633;
	padding-top: 2px;
	margin-bottom: 2px;
}

/* 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. 
Pading bottom to give distance between submenu ntext and line underneath. */
#menubar li:hover ul a, #menubar li.hvr ul a 
{
	color: #CCCC20;
	background-color: #686633;
	padding-bottom: 5px;
}

/* The normal hover class for SUB-MENU Sub-Level links. The Important directive
is required for older browsers. Set a background color. Text color set to yellow. */
#menubar ul a:hover
{
	background-color: #686633!important;
	color: #BCB977!important;
	border-left: 10px #CCCC20 solid;
	padding-left: 20px;
}

/* 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: 1000px;
	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 415. Margin on left to allow for sideContent with 240px width. */
#threeColLayout #primaryContent
{
	float: left;
	width: 415px;
	margin: 0 0 0 240px;
}

/* Box inside primary content in the middle. Margin on top. */
#boxPrimary
{
	margin-top: 45px;
}

/* Format main text in primary content. Only here is padding set and not in general p style. */
#boxPrimary p
{
	padding-bottom: 10px;
	padding-right: 10px;
}

/* Horizontal rule under heading. */
.rule
{
	border-top-width: 1px;
	border-top-style: solid;
	border-color: #5A3F22;
	margin: 0px 20px 10px 0px;
}

/* Set width and height for flashcontent (gallery). */
#primaryContent #gallery
{
	height: 570px;
	width: 395px;
}

/* Class for top link in smaller font size. */
.topLink
{
	font-size: 75%;
}

/* List inside primary content. Square bullets. Move in from left. 
Also move 20px in from right for correct right alignment. */
#boxPrimary ul li
{
	list-style-type: square;
	margin-left: 25px;
	margin-right: 20px;
	color: #5A3F22;
}



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

/* Secondly content to the right of primary content. Float left. 
Set width to 345px. Also margin top. */
#secondaryContent
{
	float: left;
	width: 345px;
	margin-top: 20px;
}

/* Box inside secondary content on the right. Margin on top and right.
Left rectangle placed as background image. Set height to allow for gap below rectangle. */
#boxSecondary1, #boxSecondary2, #boxSecondary3
{
	margin-top: 25px;
	margin-right: 5px;
	padding-left: 53px;
	padding-top: 10px;
	background-image: url(../images/Quick_Links_BG.gif);
	background-repeat: no-repeat;
	background-position: 30px 0px;
}

/* Boxes inside secondary boxes. Set width and correct padding. 
Min-height is height minus paddding 2x. */
#boxQuick1, #boxQuick2, #boxQuick3
{
	width: 238px;
	background-color: #686633;
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 10px;
	min-height: 50px;
}

/* Define paragraph style for text inside QuickLink boxes. */
#boxQuick1 p, #boxQuick2 p, #boxQuick3 p
{
	font-size: 90%;
	color: #CCCCCC;
	margin-right: 0px;
}

/* Format image (left) inside QuickLink boxes. */
#boxQuickImage1, #boxQuickImage2, #boxQuickImage3
{
	float: left;
	padding-right: 10px;
}

/* Define boxes for arrow, set as link in html. Position relative. */
#boxQuickArrow1, #boxQuickArrow2, #boxQuickArrow3
{
	position: relative;
	float: right;
	left: 0px;
	right: 0px;
	bottom: 0px;
	top: 20px;
}

/* Links inside quick links to be yellow. The other link stages are the same as normal links. */
#secondaryContent a:link
{
	color: #CCCC20;
}

/* Visited, hover and active links to be beige. (Same as rest). */
#secondaryContent a:visited, #secondaryContent a:hover, #footerBar a:active
{
	color: #BCB977;
}


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

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

/* Breadcrumbs inside sideContent. Position corretly with margins. */
.breadcrumbs
{
	margin-top: 10px;
	margin-left: 35px;
	font-size: 80%;
}

/* Boxes inside side content on the left. Margin and padding all around for proper position. 
Padding left 1pox less because of border. Top and left border. */
#boxSideNews, #boxSideImage
{
	margin-top: 23px;
	margin-left: 35px;
	margin-right: 40px;
	margin-bottom: 30px;
	padding-left: 9px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top: 1px #5A3F22 solid;
	border-left: 1px #5A3F22 solid;
}


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

/* Footer with same width as wrapper. Cleared both sides. Footer is required for faux-columns. 
Contains clouds. */
#footerBar
{
	clear: both;
	width: 1000px;
	background-color: #686633;
}

/* Paragraph style for footer text. Centred and smaller. 
Padding top and bottom to even out vertically. Margin left and right. */
#footerBar p
{
	font-size: 80%;
	text-align: center;
	margin-left: 20px;
	margin-right: 20px;
	padding-top: 5px;
	padding-bottom: 8px;
	line-height: 1.3;
	border-top: 1px #5A3F22 solid;
}

/* Links inside footer bar for clouds to be yellow. The other link stages are the same as normal links. */
#footerBar a:link
{
	color: #CCCC20;
}

/* Visited, hover and active links to be beige. */
#footerBar a:visited, #footerBar a:hover, #footerBar a:active
{
	color: #BCB977;
}


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

	width: 395px;
	height: 420px;
	overflow: hidden;
}


/* Web Design
================================== */

/* Class for Web Design Ottimoto text and link outside wrapper and below footer. */
.webdesign
{
	font-size: 80%;
	text-align: center;
	padding-top: 10px;
}

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

/* Fieldset groups related block. */
fieldset
{
	padding: 10px 10px 15px 30px;
	border: 1px #5A3F22 solid;
	color: #5A3F22;
	background-color: #E4E3C9;
	width: 350px;
}

/* Label for headings above form input boxes. */
label
{
	display: block;
}

/* Define length of input boxes. */
input
{
	width: 250px;
	margin-bottom: 10px;
}

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

/* Give distance for submit button from top and bottom. Colour button. */  
.zemContactForm .zemSubmit 
{ 
	margin: 10px 0 10px 0px;
	background-color: #E4E3C9;
	color: #5A3F22;
}

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