/* 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 for bottom part (70% blue). 
Center text to center whole layout in IE5.5. Than bring back left later in wrapper. 
Margin for top. */
body
{
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	margin-top: 20px;
	background-color: #5E739D;
	background-image: url(../images/Page_BG.gif);
	background-repeat: repeat-x;
}

/* Standard paragraph. Set dark blue colour for text. 
Line-Height for leading. Padding top for nice distance between paras. */
p
{
	color: #193773;
	line-height: 130%;
	padding-top: 10px;
}

/* Format text in bold. */
.p_bold
{
	font-weight: bold;
}

/* Standard heading h1. Big font. */
h1
{
	color: #193773;
	font-size: 135%;
}

/* Standard heading h2. Bigger font. */
h2
{
	color: #193773;
	font-size: 110%;
}

/* Minor heading h3. Smaller font. */
h3
{
	color: #193773;
	font-size: 100%;
}

/* Minor heading h4. Even smaller font than h3. */
h4
{
	color: #193773;
	font-size: 85%;
}


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

/* Visited links to be light red. */
a:visited
{
	color: #B84C4C;
}

/* Hover and active links to be 80% grey. */
a:hover, a:active
{
	color: #666361;
}


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

/* Order important for search engines. Calculations: 
638px(primary) + 322px(side) = 960px. Here sideContent only 291 (enough).*/

/* 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: 960px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	background-color: #E8EBF1;
}


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

/* Top header with same width as wrapper and set height. Set width and height. Set bg colout top of page. */
#header_one
{
	width: 960px;
	height: 118px;
	background-color: #D1D7E3;
}

/* First box inside header one for the logo on the very left. Float left and set width. */
#header_one_logo
{
	float: left;
	width: 328px;
}

/* Fix vertical gap. */
#header_one_logo img
{
	vertical-align: bottom;
}

/* Second box inside headr one for text. Float left, set width, bold text and position correctly. */
#header_one_text
{
	float: left;
	width: 230px;
	margin-top: 22px;
	font-weight: bold;
}

/* Third box inside header one for address. Float left, set width, bold text and position correctly. */
#header_one_address
{
	float: left;
	width: 170px;
	margin-top: 22px;
	font-weight: bold;
}

/* Search inside header one
================================== */

/* Fourth box inside header one. Float left. Position from top correctly. */
#header_one_search
{
	float: left;
	margin-top: 45px;
}

/* CSS for search field. Set Min-height for Mozilla only. Set width and margin from the left. Border around. */
#header_one_search #sfield
{
	min-height: 20px;
	width: 130px;
	margin-left: 30px;
	border: 1px #193773 solid;
}

/* Hack for IE. IE does not understand min-heigth, but understands height. */
* html #header_one_search #sfield
{ 
	height: 20px; 
}

/* CSS for "go" button for search. Set width. Image placed in HTML. Align image on bottom.*/
#header_one_search #go
{
	width: 18px;
	vertical-align: bottom;
}


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

/* Second header holds navigation, with same width as wrapper and set height. 
Place background image (blue with green lines and drop shadow). */
#header_two
{
	width: 960px;
	height: 102px;
	background-image: url(../images/Header_Two_BG.gif);
	background-repeat: repeat-x;
}

/* Zero down all items for unordered list first. NOT REALLY REQUIRED -> TRY WITHOUT. 
Calculated required gap on left and move whole list over. */
#header_two ul
{
	border: 0;
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
	margin-left: 53px;
}

/* List itmes to be buttons (block). Float left and align their text in center. Move down with margin. */
#header_two ul li
{
	display: block;
	float: left;
	text-align: center;
	padding: 0;
	margin: 0;
	margin-top: 25px;
}

/* Navigation buttons. Set width and white border. Text colour white. Display block for buttons. 
Padding top and bottom for nice position of text inside. Margin right for distance between them. 
Background colour. Padding top and bottom. Smaller font size to allow for longer text. */
#header_two ul li a
{
	width: 120px;
	font-size: 90%;
	border: 4pt #FFF solid;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	text-align: center;
	background-color: #A61F1F;
	padding-top: 25px;
	padding-bottom: 10px;
	margin-right: 15px;
	background-image: url(../images/Nav_Gradient.gif);
	background-repeat: repeat-x;
}

/* On hover, leave text white and have flat red bg colour. */
#header_two ul li a:hover
{
	color: #FFFFFF;
	background: #A61F1F;
}

/* Active links specified in html with class to have flat red bg and triangle at the bottom. 
Here it is assigned to the a tag and not to the li tag (because of TXP ako_nav). */
#header_two li a.active
{
	border: 4pt #FFF solid;
	color: #fff;
	background-image: url(../images/Nav_Triangle.gif);
	background-color: #A61F1F;
	background-repeat: no-repeat;
	background-position: center bottom;
}


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

/* Third header contains Flash. Set height. */
#header_three
{
	width: 960px;
	height: 70px;
	background-color: #E8EBF1;
}

/* Position flash animation inside header three container. Move left.
No need for width since restricted through #header_three. */
#header_three #flashContent
{
	margin-left: 10px;
}


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

/* Two main columns, named in order of importance and display when styles switched off.
Margin bottom is zero. */
#primaryContent
{
	float: left;
	width: 960px;
	margin: 0;
}

/* Specifying twoColLayout in the body will activate the following div 
instead of the default primaryContent -> not IE 5.5 + 6. 
Float left, set width to 638px. */
#twoColLayout #primaryContent
{
	float: left;
	width: 638px;
}

/* Box inside primaryCOntent to hold all main content including product boxes. 
Also holds left grey border as bg image. */
#primaryContent #contentBox
{
	background-image: url(../images/Left_Grey_Border.gif);
	background-repeat: repeat-y;
	background-position: 31px;
}

/* Main heading inside primary content based on generic h1. Move left and from top with margin. 
Also padding to allow for border left (placed in contentBox) and distance to text below. 
Normal font weight (not bold). Sizes defined on top of css. */
#primaryContent h1
{
	margin-left: 31px;
	margin-top: 30px;
	padding-bottom: 15px;
	padding-left: 15px;
	font-weight: bold;
}

/* All smaller headings without top margin but padding top instead. Sizes defined on top of css. */
#primaryContent h2, #primaryContent h3, #primaryContent h4
{
	margin-left: 31px;
	padding-top: 10px;
	padding-bottom: 5px;
	padding-left: 15px;
	font-weight: bold;
}

/* Larger font for first letter inside heading words. */
.largeWord
{
	font-size: 150%;
}

/* Heading inside primary content based on generic p. Move left with margin. 
Also padding to allow for border left (placed in contentBox) and nice distance right. */
#primaryContent p
{
	margin-left: 31px;
	padding-left: 15px;
	padding-right: 30px;
	padding-top: 0px;
	padding-bottom: 10px;
}

/* Word "top" in toplink below main contetn to be smaller fontsize. 
Padding bottom here if text is longer then side content.*/
#primaryContent #toplink
{
	font-size: 80%;
	padding-bottom: 20px;
}

/* Class inside main content box for all left product boxes. Class since it has to be unique for more usage.
Set width and height. Display inline-block to have left and right boxes next to each other. Set bg colour.
Set margins and vertical align on top. */
.productboxleft
{
	width: 268px;
	height: 90px;
	float: left;
	background-color: #D0D688;
	margin-left: 46px;
	margin-bottom: 7px;
	vertical-align: top;
}

* html .productboxleft
{
	margin-left: 23px;
}

/* Class inside main content box for all right product boxes. Same as above, but different margins. */
.productboxright
{
	width: 268px;
	height: 90px;
	float: left;
	background-color: #D0D688;
	margin-left: 7px;
	margin-bottom: 7px;
	vertical-align: top;
}

/* Clear the floats. */
.floatclear
{
	clear: both;
}

/* Align image on top and float right. */
.productboxleft img, .productboxright img
{
	float: right;
	vertical-align: top;
}

/* Container inside the product boxes to hold text and headings. 
Float left to allow for image later to sit next to it. Set width, taking paddings of header and text in consideration. */
#primaryContent .producttext, #primaryContent .productheader
{
	float: left;
	width: 158px;
	margin: 0px;
	padding: 0px;
}

/* Format heading inside product text boxes. Bigger font and different padding as text. */
#primaryContent p.productheader
{
	margin: 0px;
	padding: 10px 0px 0px 15px;
	color: #193773;
	font-size: 100%;
}

/* Format text inside product text boxes. Set colour and font-size (smaller). Adjust padding. */
#primaryContent span.producttext
{
	margin: 0px;
	padding: 5px 0px 0px 0px;
	color: #193773;
	font-size: 90%;
}



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

/* Last comes the side content on the right hand side. 
Width 291px and floating left (next to primary content). */
#sideContent
{
	float: left;
	width: 291px;
	margin-top: 30px;
}

/* Define two rows to hold the logos with set height. */
#sideContent #row1, #sideContent #row2
{
	height: 50px;
}

/* Specify padding for all links inside logo div to achieve nice distance between them. 
#sideContent #logo a
{
	padding-right: 12px
}
*/

/* Set vertical alignment for all images (logos) inside the logo div to middle. 
Allow for padding between the logos. */
#sideContent #logo img 
{ 
	vertical-align: middle; 
	padding-right: 12px
}

/* Define boxes for quick links (three). Set width and bg colour. Margin below each to get distance. */
#sideContent #quicklink1, #sideContent #quicklink2, #sideContent #quicklink3
{
	width: 291px;
	background-color: #D1D7E3;
	margin-bottom: 7px;
}

/* Position bg image for quick link 1. */
#sideContent #quicklink1
{
	background-image: url(../images/Quick_Link_1_Small.jpg);
	background-repeat: no-repeat;
	background-position: 200px 90%;
}

/* Position bg image for quick link 2. */
#sideContent #quicklink2
{
	background-image: url(../images/Quick_Link_2_Small.jpg);
	background-repeat: no-repeat;
	background-position: 200px 90%;
}

/* Position bg image for quick link 3. */
#sideContent #quicklink3
{
	background-image: url(../images/Quick_Link_3_Small.jpg);
	background-repeat: no-repeat;
	background-position: 200px 90%;
}

/* Define heading for quick links. Set bg colour and height. 
Apply line-height for vertical centering of text. Smaller font and padding left. Normal font weight. */
#sideContent h3
{
	background-color: #193773;
	height: 25px;
	color: #FFF;
	line-height: 25px;
	padding-left: 10px;
	font-size: 90%;
	font-weight: normal;
}

/* Define tyext inside quick links. Padding for nice distances and smaller font. */
#sideContent p
{
	padding-left: 10px;
	padding-right: 100px;
	padding-bottom: 10px;
	font-size: 90%;
}



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


/* Fieldset groups related block. Position properly, set blue border.*/
.zemContactForm fieldset
{
	margin: 10px 30px 0px 46px;
	padding: 0;
	border: 1px #193773 solid;
}

/* Define the section heading. 100% font size, small padding around. Also distance from left.
Set text colour to white and background colour to blue. */
.zemContactForm legend
{
	font-size: 90%;
	padding: 5px 15px 5px 15px;
	margin-left: 1em;
	color: #FFF;
	background: #193773;
}

/* Label for headings left of form input boxes. Set width, clear left and float left. Blue text. */
.zemContactForm label
{
	position: relative;
	clear: left;
	float: left;
	width: 8em;
	padding-left: 40px;
	margin-right: 5px;
	padding-right: 10px;
	text-align: left;
	color: #193773;
}

/* required fields and error elements to have little "R" symbol. */
.zemContactForm label.zemRequired, .zemContactForm label.zemRequirederrorElement
{
	background-image: url(../images/Required.gif);
	background-repeat: no-repeat;
	background-position: 120px;
}

/* Clear the break for proper display. */
.zemContactForm br 
{
   clear: left;
}

/* Margin bottom in input to achieve distance between items. Blue border around input. */	
.zemContactForm input 
{
	border: 1px solid #193773;
	margin-bottom: 15px;
}

/* Creates anchor for user in field (Standard Browsers). -> tint when clicked in field. */
input:focus, textarea:focus
{
	background: #ECEFCF;
}

/* Give distance for submit button from top, left and to bottom. Set colour and bg colour. */  
.zemContactForm .zemSubmit
{
	margin: 8px 0 10px 15px;
	background-color: #193773;
	color: #FFFFFF;
	padding: 5px 15px 5px 15px;
	border: none;
	font-size: 90%;
}

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

/* Display message sent in red colour. Only works with message overwritten in TXP. */
.zemThanks
{
	color: #A1AD11;
	padding-left: 40px;
}


/* 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: 46px;
	width: 562px;
	height: 300px;
	overflow: hidden;
}


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

/* Footer with same width as wrapper. Cleared both sides. Footer is required for faux-columns. 
Set beackground colour and height. */
#footer
{
	clear: both;
	width: 960px;
	height: 30px;
	background-color: #8C9BB9;
}

/* Define fonts inside footer for both footer boxes, left and right. Smaller font and padding left and right. */
#footer p
{
	font-size: 80%;
	padding-left: 31px;
	padding-right: 31px;
}

/* Disclaimer to align left. */
.alignleft
{
	float: left;
}

/* Copyright to align right. */
.alignright
{
	float: right;
}