/* 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. */
body
{
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	margin-top: 30px;
	background-color: #CCDFEF;
	background-image: url(../images/Pressure_Dynamics_BG.gif);
	background-repeat: repeat-x;
	background-position: left top;
}

/* This id contains top page background image on the right only, additionally to the normal 
background image applied on the body tag. The div wraps around everything (even around wrapper). */
#rightbg
{
	height: 100%;
	background-image: url(../images/Pressure_Dynamics_Top_BG.gif);
	background-repeat: no-repeat;
	background-position: right top;
}


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

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

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

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

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

.p_bold
{
	font-weight: bold;
}


/* 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 green. */
a:link
{
	color: #B1AB00;
}

/* Visited links to be dark blue. */
a:visited
{
	color: #132940;
}

/* Hover links to be ????. */
a:hover
{
	color: #4D8FC9;
}

/* Active links to be red. */
a:active
{
	color: #B10005;
}


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

/* Order important for search engines. Calculations: 
650px(primary) + 330px(side). */

/* 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: 980px;
	margin: 0 auto;
	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. Define white as background colour. 
Set width and height as well as background colour to cover faux filler. */
#header_one
{
	width: 980px;
	height: 125px;
	background-color: #FFF;
}

/* ID inside id header_one for Pressure Dynamics logo (link). Float left. Set width and height. 
Logo placed in html is 3px smaller (IE6). */
#header_one_logo
{
	float: left;
	height: 125px;
	width: 400px;
}

/* Second id inside header_one for address. Float left. Set width and height. Move text down for line-up. */
#header_one_address
{
	float: left;
	height: 92px;
	width: 250px;
	padding-top: 33px;
}

/* Define paragraph for address inside id. */
#header_one_address p
{
	color: #005EB1;
	padding-top: 0;
}

/* Third id inside header_one for secondary navigation. Float right!!. Set height only because of IE6. 
Padding-right to move links from outside in. Place background image (blue bar) under link text. */
#header_one_navigation
{
	float: right;
	height: 125px;
	padding-right: 32px;
	background-image: url(../images/Faux_Filler_Sec_Nav.gif);
	background-repeat: repeat-x;
	background-position: 0px 44px;
}

/* Move text for four secondary links down. */
#header_one_navigation p
{
	padding-top: 48px;
}

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

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

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

#header_one_navigation a:visited, #header_one_navigation a:hover, #header_one_navigation a:active
{
	color: #B1AB00;
}

/* Second header with same width as wrapper and set height. Holds main navigation. 
Move 20px from left and place faux filler for white gap on left. Define background colour. */
#header_two
{
	width: 980px;
	background-color: #005EB1;
	background-image: url(../images/Faux_Filler_Nav.gif);
	background-repeat: repeat-y;
	background-position: left top;
}


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

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

/* 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. Turn bullet points off. Do not add a font-size here. */
#menubar, #menubar ul
{
	padding: 0;
	margin: 0;
	list-style: none;
	background-color: #996;
}

/* 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 20px 0px 20px;
	font-size: 88%;
	color: #FFFFFF;
}

/* Each link in MENUBAR with a submenu needs trigger class assigned.
Same padding (must) as menubar links. Background image (arrow) in white positioned with no repeat. */
#menubar a.trigger
{
	padding: 5px 20px 0px 20px;
	background-image: url(../images/Down_Arrow_White.gif);
	background-repeat: no-repeat;
	background-position: 92% 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: 16em;
}

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

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

/* Change the arrow from white to yellow when trigger menu is hovered over. 
It will revert back to the white arrow once moved down to submenus. Trigger text still stays yellow 
to indicate the active "column". */
#menubar a.trigger:hover
{
	background-image: url(../images/Down_Arrow_Yellow.gif);
	background-repeat: no-repeat;
	background-position: 92% 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: #005EB1;
	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: #FFFFFF;
	background-color: #005EB1;
	padding-bottom: 5px;
	border-bottom: 1px #FFF solid;
	border-left: 1px #FFF solid;
}

/* The normal hover class for SUB-MENU Sub-Level links. The Important directive
is required for older browsers. Set a background color to blue. Text color set to yellow. */
#menubar ul a:hover
{
	background-color: #005EB1!important;
	color: #B1AB00!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)
================================== */

/* Two main columns, named in order of importance and display when styles switched off.
Margin bottom is zero. */
#primaryContent
{
	float: left;
	width: 980px;
	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 650. */
#twoColLayout #primaryContent
{
	float: left;
	width: 650px;
}

/* First box inside primaryContent holds the flash animation and the arrows. Set height.
Define background colour and margin left to reveal the faux filler left. */
#boxPrimaryFlash
{
	margin-left: 20px;
	height: 150px;
	background-color: #99BFE0;
	background-image: url(../images/Flash_Arrows.jpg);
	background-repeat: no-repeat;
	background-position: right top;
}

/* Second box inside primaryContent for main content (text). Left margin to reveal faux filer left. */
#boxPrimary
{
	margin-left: 20px;
	background-image: url(../images/Arrow_Content.gif);
	background-repeat: no-repeat;
	background-position: 0px 82px;
}

/* Format text inside boxPrimary. */
#boxPrimary p
{
	padding-left: 70px;
	padding-right: 55px;
}

/* Format heading inside boxPrimary. */
#boxPrimary h1
{
	padding-left: 20px;
	padding-top: 30px;
}

/* Format heading inside boxPrimary. */
#boxPrimary h2
{
	padding-left: 70px;
	padding-top: 10px;
}

/* Format minor heading inside boxPrimary. */
#boxPrimary h3
{
	padding-left: 70px;
	padding-top: 10px;
}

/* Format minor heading inside boxPrimary. */
#boxPrimary h4
{
	padding-left: 70px;
	padding-top: 10px;
}

/* Breadcrumbs in smaller font. */
#breadcrumbs
{
	font-size: 75%;
}

/* Breadcrumbs paragraph. */
#breadcrumbs p
{
	padding-left: 20px;
}

/* 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: none;
	margin-left: 90px;
	margin-right: 20px;
	padding-left: 12px;
	color: #585858;
}

/* Arrows as background image for link list items. */
#boxPrimary li
{
	background-image: url(../images/List_Arrow.gif);
	background-repeat: no-repeat;
	background-position: 0px 6px;
}

/* Horizontal rule. */
.rule
{
	border-top-width: 1px;
	border-top-style: solid;
	border-color: #585858;
	margin: 0px 55px 15px 70px;
}

/* Text inside main content footer (not whole page footer). Smaller font and centred. */
.footer_text
{
	font-size: 75%;
	text-align: center;
}

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

/* Last comes the side content on the right hand side. 
Width 330px and also floating right (next to primary content). */
#sideContent
{
	float: right;
	width: 330px;
}

/* Class inside sideContent for headings in side panel (Search and News). Set height. Move in from left and right. 
Set background colour. */
#boxHeading, #boxHeading2
{
	height: 25px;
	margin-left: 32px;
	margin-right: 32px;
	margin-top: 20px;
	background-color: #4D8FC9;
}

/* Rounded corner background image for News heading (left and right corner). */
#boxHeading2
{
	background-image: url(../images/Rounded_Corners_News_01.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

/* Text inside headings (here only search field). Zero down all margins and padding first. 
Specify the line height the same as the height of the box to centre the text horizontally. 
Here 2px less. Move left. Set colour. */
#boxHeading p, #boxHeading2 p
{
	margin: 0px;
	padding: 0px;
	line-height: 23px;
	color: #FFF;
	padding-left: 10px;

}

/* Text inside headings (here "Search" and "News"). Line height smaller for alignment. 
Set colour, font weight and font size. */
.searchNewsHeading
{
	line-height: 20px;
	color: #FFF;
	padding-right: 10px;
	font-size: 110%;
	font-weight: bold;
}

/* CSS for search field. Set height. Min-height for Mozilla only. Padding top. */
#sfield
{
	min-height: 14px;
	width: 130px;
	padding-top: 2px;
	margin-right: 10px;
	border: none;
}

/* Hack for IE. IE does not understand min-heigth, but understands height. Different padding on top. */
* html #sfield
{ 
	padding-top: 4px;
	height: 14px; 
}

/* CSS for "go" button for search. Set height and width. Padding top. Whitye bg. */
#go
{
	min-height: 14px;
	width: 30px;
	padding-top: 2px;
	border: none;
	background-color: #FFFFFF;
	color: #005EB1;
}

/* Hack for IE. IE does not understand min-heigth, but understands height. Different padding on top. */
* html go
{
	height: 14px;
	padding-top: 4px;
}

/* Box inside sideContent for text under news heading (quick link). 
Position box with margin left only and set width. Set background colour. */
#boxQuicklink1
{
	margin-left: 32px;
	width: 266px;
	background-color: #005EB1;
}

/* Box inside sideContent for text inside quick links. 
Position box with margin left/top and set width. Set background colour. */
#boxQuicklink2, #boxQuicklink3
{
	margin-left: 32px;
	margin-top: 10px;
	width: 266px;
	background-color: #005EB1;
}

/* Format text inside news box and quick links. Padding for distance three sides. 
Set min-height if text is short. */
#boxQuicklink1 p, #boxQuicklink2 p, #boxQuicklink3 p 
{
	color: #FFF;
	font-size: 85%;
	padding: 0px 10px 10px 10px;
	min-height: 55px;
}

/* Hack for IE. IE does not understand min-heigth, but understands height. */
* html #boxQuicklink1 p
{ 
	height: 65px; 
}

/* Hack for IE. IE does not understand min-heigth, but understands height. */
* html #boxQuicklink2 p
{ 
	height: 65px; 
}

/* Hack for IE. IE does not understand min-heigth, but understands height. */
* html #boxQuicklink3 p
{ 
	height: 65px; 
}

/* Div for top row containing aquare image as background image. 
Also square positioned in html. */
#roundtop1
{
	background-image: url(../images/Rounded_Corners_Main_02.gif);
	background-repeat: repeat-x;
	background-position: left;
}

/* Div for top row containing right-top corner as background image. 
Left-top corner positioned in html. */
#roundtop2, #roundtop3
{
	background-image: url(../images/Rounded_Corners_Main_03.jpg);
	background-repeat: no-repeat;
	background-position: right;
}

/* Div for bottom row containing right-bottom corner as background image. 
Left-bottom corner positioned in html. */
#roundbottom1, #roundbottom2, #roundbottom3
{
	background-image: url(../images/Rounded_Corners_Main_07.gif);
	background-repeat: no-repeat;
	background-position: right;
}

/* Display none in html makes image invisible, unless made visible through stylesheet here. 
That way, we hide the effect from incompatible browsers by not showing them the stylesheet.
Also set bthe radius of the corners. */
img.corner 
{
   width: 10px;
   height: 10px;
   border: none;
   display: block !important;
}

/* Format the quick link image with float left and appropriate padding. */
/* Format images inside QuickLink boxes. */
#boxQuickImage1, #boxQuickImage2, #boxQuickImage3
{
	float: left;
	padding-left: 10px;
	padding-right: 10px;
}

/* Give correct distances for box to hold feature image (below quick links). */
#boxFeatureImage
{
	margin-left: 32px;
	margin-right: 32px;
	margin-bottom: 10px;
	padding-top: 20px;
}

/* Give correct distances for box to hold Anniversary logo. Float left.
Padding left in stead of margin because of IE6. */
#boxAnniImage
{
	float: left;
	padding-left: 55px;
	padding-right: 35px;
	margin-bottom: 10px;
	padding-top: 10px;
}

/* Give correct distances for box to hold ISO logo. Float left.
Padding left in stead of margin because of IE6. */
#boxIsoImage
{
	float: left;
	padding-right: 10px;
	margin-bottom: 10px;
	padding-top: 10px;
}

/* Give correct distances for box to hold ISO text on the right side of the logo. Float left.
Padding left in stead of margin because of IE6. */
#boxIsoText
{
	float: left;
	padding-right: 22px;
	margin-bottom: 10px;
}

/* Text nect to ISO logo proper formatted. */
#boxIsoText p
{
	font-size: 67%;
	color: #FFF;
}


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


/* Fieldset groups related block. Position properly, set blue border and background graphic.*/
.zemContactForm fieldset
{
	margin: 10px 20px 0px 70px;
	padding: 0;
	border: 1px #005EB1 solid;
	background-image: url(../images/fieldsetbg.gif);
	background-repeat: no-repeat;
	background-position: right 20px;
}

/* 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: 1em;
	padding: 5px;
	margin-left: 1em;
	color: #ffffff;
	background: #005EB1;
}

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

/* 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. Border around input and grey text. */	
.zemContactForm input 
{
	color: #585858;
	border: 1px solid #005EB1;
	margin-bottom: 15px;
}

/* Creates anchor for user in field (Standard Browsers). */
input:focus, textarea:focus
{
	background: #CCDFEF;
}

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

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

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


/* 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: 70px;
	width: 540px;
	height: 420px;
	overflow: hidden;
}


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

/* Footer with same width as wrapper. Cleared both sides. Footer is required for faux-columns. 
Set beackground colour. But empty. */
#footer
{
	clear: both;
	width: 980px;
}