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

/* Sets the generic font and font size for body. Also sets background colour. 
Also zeros down margin and padding. Center text to center whole layout in IE5.5. 
Than bring back margin for top. Graphic as background image for whole site. */
body
{
	margin: 0;
	padding: 0;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 70%;
	background-color: #88A5C7;
	margin-top: 30px;
	background-image: url(../images/Logo_Background_Size.gif);
	background-repeat: no-repeat;
	background-position: center 30px;
}


/* Typography sideContent (left)
================================== */

/* Define generic paragraph style with margins and padding.
Margin for distance left and right. Red colour. Font size same as body. */
p
{
	margin: 0 10px 0 10px;
	padding: 0px;
	font-size: 100%;
	color: #D44944;
}

/* Bigger text. Normal h1 used and more top margin. 
Bigger font size. */
h1
{
	margin: 0px 10px 0 10px;
	padding: 0px;
	padding-top: 40px;
	font-size: 170%;
	color: #D44944;
}


/* Typography secondaryContent (right)
================================== */

/* Bold inline text for standard paragraphs. */
#pBold 
{ 
	font-weight: bold; 
}

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

/* Paragraph ID selector for text inside secondary box only. 
Set text colour to dark blue and change margins to give appropriate distances.
No background colour to make right line visible.*/
#boxSecondary p
{
	margin: 10px 60px 0 20px;
	padding: 0px 40px 0px 10px;
	font-size: 100%;
	color: #4D6480;
}

/* Define the paragraph style for list items in unordered list. 
Make margin and padding left smaller compared to p in box. 
Also change top margin from 10px to 7px. */
#boxSecondary ul li p
{
	margin: 7px 60px 0 0;
	padding: 0px 40px 0px 5px;
}

/* Move list items 10px to right. */
#boxSecondary li 
{ 
	margin-left: 10px;
}

/* Header ID selector for headings inside secondary box only. Bigger font.
Set text colour to dark blue. No background colour to make right line visible. 
Change margins and padding to give distance to image above and to allow for logo at heading. */
#boxSecondary h1
{
	margin: 20px 60px 0 10px;
	padding: 20px 40px 0px 15px;
	font-size: 130%;
	color: #4D6480;
	background-image: url(../images/KP_Logo_Small_Red.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

/* Breadcrump inside secondary Content on top.
Smaller font size. */
.breadcrump
{
	margin: 10px 60px 0 20px;
	padding: 0px 40px 0px 10px;
	font-size: 85%;
	color: #4D6480;
}

/* Typography footer inside secondaryContent (right)
================================== */

/* Text aligned centered. Horizontal line above. Smaller font. */
.footer
{
	margin: 40px 100px 0 30px;
	padding: 10px 0px 0px 0px;
	font-size: 85%;
	color: #4D6480;
	text-align: center;
	background-image: url(../images/Horiz_Green_Line.gif);
	background-repeat: repeat-x;
}


/* Typography footerBar below all content but inside wrapper
================================== */

/* Paragraph style for footerBar. Smaller font size. 
Colour changed to nearly white -> needed to be done for css validation. */
#footerBar p
{
	margin: 0;
	padding: 3px 0px 3px 10px;
	font-size: 90%;
	color: #fdfeff;
}

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

/* Fieldset groups related block. */
fieldset
{
	margin: 10px 0px 5px 30px;
	border: 1px #A5A837 solid;
	color: #4D6480;
	background-color: #CCEBFD;
	width: 320px;
	padding-bottom: 15px;
}

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

/* Define length of input boxes. */
input
{
	width: 250px;
}

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

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

/* Style the submit button. */
.button 
{
	background-color: #CCEBFD;
	color: #4D6480;
}

/* Id inside div for googler map to position map correctly. */
#map
{
	margin-top: 15px;
	margin-left: 30px;
}

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

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

a:link
{
	color: #A6B1BF;
}

a:visited
{
	color: #A5A837;
}

a:hover, a:active
{
	color: #D44944;
}


/* Links inside header
================================== */

/* Navigational links in header. Class for each link inside boxHeader id. 
No underline and set font size. Also background colour to be inherited. 
Then set colour for all link states. Place background image for symbol in all stages. */
#boxHeader a.linkOne, #boxHeader a.linkTwo, #boxHeader a.linkThree
{
	text-decoration: none;
	padding: 5px 10px 5px 15px;
	border-right: 1px solid #4D6480;
	font-size: .85em;
}

/* Set colour for all link stages for all three classes inside boxHeader id. */
#boxHeader a.linkOne:link, #boxHeader a.linkTwo:link, #boxHeader a.linkThree:link
{
	color: #A6B1BF;
}

#boxHeader a.linkOne:visited, #boxHeader a.linkTwo:visited, #boxHeader a.linkThree:visited
{
	color: #A5A837;
}

#boxHeader a.linkOne:hover, #boxHeader a.linkTwo:hover, #boxHeader a.linkThree:hover,
#boxHeader a.linkOne:active, #boxHeader a.linkTwo:active, #boxHeader a.linkThree:active
{
	color: #D44944;
}

/* Set background image for first link. Different position in each stage for correct colour. */
#boxHeader a.linkOne:link
{
	background-image: url(../images/Home3States.gif);
	background-repeat: no-repeat;
	background-position: 0px 3px;
}

#boxHeader a.linkOne:visited
{
	background-image: url(../images/Home3States.gif);
	background-repeat: no-repeat;
	background-position: 0px -97px;
}

#boxHeader a.linkOne:hover, #boxHeader a.linkOne:active
{
	background-image: url(../images/Home3States.gif);
	background-repeat: no-repeat;
	background-position: 0px -47px;
}

/* Set background image for second link. Different position in each stage for correct colour. */
#boxHeader a.linkTwo:link
{
	background-image: url(../images/Sitemap3States.gif);
	background-repeat: no-repeat;
	background-position: 0px 3px;
}

#boxHeader a.linkTwo:visited
{
	background-image: url(../images/Sitemap3States.gif);
	background-repeat: no-repeat;
	background-position: 0px -97px;
}

#boxHeader a.linkTwo:hover, #boxHeader a.linkTwo:active
{
	background-image: url(../images/Sitemap3States.gif);
	background-repeat: no-repeat;
	background-position: 0px -47px;
}

/* Set background image for third link. Different position in each stage for correct colour. */
#boxHeader a.linkThree:link
{
	background-image: url(../images/Links3States.gif);
	background-repeat: no-repeat;
	background-position: 0px 3px;
}

#boxHeader a.linkThree:visited
{
	background-image: url(../images/Links3States.gif);
	background-repeat: no-repeat;
	background-position: 0px -97px;
}

#boxHeader a.linkThree:hover, #boxHeader a.linkThree:active
{
	background-image: url(../images/Links3States.gif);
	background-repeat: no-repeat;
	background-position: 0px -47px;
}



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

/* Wrapper for dropdown navigational menu. Left margin to push over next to vertical red box. */
#menuwrapper
{
	margin-left: 315px;
}

/* Clears the floated menu items on both sides. Assigned to class just before
menuwrappers closing div tag with faux filler placed in html. */
.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. 
Border right creates separator between links. Smaller font-size for menu links.
Set colour for border and links. */
#menubar a 
{
	display: block;
	text-decoration: none;
	padding: 5px 10px 5px 10px;
	border-right: 1px solid #CCEBFD;
	font-size: .85em;
	color: #CCEBFD;
}

/* Each link in MENUBAR with a submenu needs trigger class assigned.
Same padding (must) as menubar links plus more right padding for sub-menu symbol. 
Background image (symbol) positioned correctly with no repeat. */
#menubar a.trigger
{
	padding: 5px 16px 5px 10px;
	background-image: url(../images/Down_Arrow.gif);
	background-repeat: no-repeat;
	background-position: right center;
}

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

/* 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 color. Turn off the right border -> otherwise inherited from link css. 
Top and bottom padding less than the root items and increase the left padding
to indent the sub-menu links a small amount in from the root links. */
#menubar ul li a  
{
	color: #4D6480;
	border-right: 0;
	padding: 3px 12px 3px 16px;
}

/* SUB-MENU unordered lists describes each dropdown SUB-MENU group. 
Positioned absolutely 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.
Borders set to simulate a raised look. */
#menubar li ul
{
	position: absolute;
	display: none;
	background-color: #FFFFFF;
	border-right: 1px #4D6480 solid;
	border-bottom: 1px #4D6480 solid;
	border-left: 1px #CCEBFD solid;
}

/* 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. */
#menubar li:hover a, #menubar a:focus,
#menubar a:active, #menubar li.hvr a
{
	color: #D44944;
	background-color: #CFECFD; /* Slightly different colour for validation */
}

/* 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. */
#menubar li:hover ul, #menubar li.hvr ul 
{
	display: block;
	background-color: #CFECFD; /* Slightly different colour for validation */
}

/* 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 march the normal Sub-Level link color
in the rule: #menubar ul li a. */
#menubar li:hover ul a, #menubar li.hvr ul a 
{
	color: #D44944;
	background-color: #CFECFD; /* Slightly different colour for validation */
}

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


/* Layout wrapper
================================== */

/* Order important for search engines. Calculations: 
170px(width sidebar) + 
140px(width primary) + 5px(margin primary) + 
0px(margin secondary) + 435px (width 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. 
Background filler image for faux-columns. */
#wrapper
{
	width: 750px;
	margin: 0 auto;
	background-color: #FFF;
	padding: 0;
	text-align: left;
	background-image: url(../images/Faux_Filler_New.gif);
	background-repeat: repeat-y;
	background-position: left top;
}


/* Layout header
================================== */

/* Top header with same width as wrapper and defined height. 
Logo as background image positioned to suit. */
#header_one
{
	width: 750px;
	height: 95px;
	background-color: #FFF;
	background-image: url(../images/KP_Logo_tiny_text.jpg);
	background-repeat: no-repeat;
	background-position: 5px 8px;
}

/* Second header with same width as wrapper and defined height. 
Background filler image for vertical box (red). */
#header_two
{
	width: 750px;
	height: 31px;
	background-image: url(../images/Header_Filler.gif);
	background-repeat: repeat-y;
	background-position: left top;
}

/* Third header with same width as wrapper and defined height. 
This contains margin, padding and border on top to create line to work in all browsers. 
Zero padding. Background filler image for vertical box (red). This will contain navigation. */
#header_three
{
	width: 750px;
	margin-top: 1px;
	padding-top: 1px;
	border-top: 1px #CCEBFD;
	background-image: url(../images/Header_Filler.gif);
	background-repeat: repeat-y;
	background-position: left top;
}

/* Fourth header with same width as wrapper and defined height. 
Background filler image for vertical box (red). */
#header_four
{
	width: 750px;
	height: 15px;
	background-image: url(../images/Header_Filler_Bottom.gif);
	background-repeat: repeat-y;
	background-position: left top;
}


/* Layout primaryContent (red box)
================================== */

/* Three main columns, named in order of importance and 
display when styles switched off.
Firstly this is required for IE6 without #threeColLayout in front. */
#primaryContent 
{
	float:left;
	width: 750px;
	display:inline;
	margin: 0 0 20px 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 140. Margin on bottom and most importantly on left 
to allow for side bar with 170px with -> 170px + 5px gutter = 175px. */
#threeColLayout #primaryContent 
{
	float:left;
	width: 140px;
	margin: 0 0 20px 175px;
}


/* Layout secondaryContent (right/text)
================================== */

/* Secondly content to the right of primary content. Float left and set width to 435px. 
Margin bottom again and most importantly a 0px gutter to the left. 
Background image to create vertical line as long as paragraph. 
Ensure to use px and px for background position. px and keywords won't work in Opera. */
#secondaryContent
{
	float: left;
	width: 435px;
	margin: 0 0 20px 0px;
	background-image: url(../images/Vertical_Green_Line.gif);
	background-repeat: repeat-y;
	background-position: 374px 0px;
}


/* Layout sideContent (left)
================================== */

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


/* Layout Containers/Boxes
================================== */

/* Box for links in top header. No margin, but padding to give same distance over all browsers.
Float right. No background colour. */
#boxHeader
{
	margin: 0px;
	padding: 20px;
	background-color: #FFF;
	float: right;
}

/* Only one id possible to assign, thats why class now. 
This is used in the side bar on the left. Top margin to move box from top. 
Top and bottom adding to move text/content inside box away from border. 
No background colour in this case. */
.boxSide
{
	margin: 10px 0 0 0;
	padding: 5px 0 5px 0;
}

/* All images inside class .boxSide should be positioned with 10px from left and 10px from top.*/
.boxSide img
{
	margin: 20px 0 0 10px;
}

/* Same as side box, but top margin increased to suit image. 
This is used for primary content. */
.boxPrimary
{
	margin: 85px 0 0 0;
	padding: 5px 0 5px 0;
}

/* Same as side box, but no margin and padding changed to suit image. 
This is used for secondary content. */
.boxSecondary
{
	margin: 0;
	padding: 0 0 5px 0;
}


/* Layout misc
================================== */

/* Footer with same width as wrapper. Cleared both sides. Footer is required for faux-columns. 
Background image same filler as for wrapper. Footer contains only link to ottimoto. 
Font size same as footer in content.*/
#footerBar
{
	clear: both;
	width: 750px;
	padding: 0px;
	background-color: #88A5C7;
	background-image: url(../images/Header_Filler.gif);
	background-position: left top;
	font-size: 90%;
}

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