﻿/***********************************
************************************
***
** 1. Defaults
** 2. Helpers
** 2. Common
** 3. Navigation
** 4. Modules
** 5. Structure
** 6. Installation specific
*

Guidelines:
- Please maintain the files general structure as is.
- Maintain style selectors' (tree like) indentations.
- Insert special pages style overrides next to the original style.
- Exception to previous: Structure overrides of some template pages with major
  modifications are to be placed as a separate block at the end of the file.
- Header styles are in components.css, but place color their definitions here.
- Default font should be placed in components.css AND in the first selector
  of this file.
- ID-selectors must always include the element name (i.e. div#search_box)
- Class-selectors, same thing. If you want to allow all element types
  use the star-selector i.e. *.class
 
/****************************************************************************
					 Defaults
*****************************/

/* Default font (normal_text). Same as in components.css */
body, table, td, li, *.normal_text {
	font-size: 11px; 
	line-height: 14px;
	font-family: Verdana, sans-serif;
	color: #666;
}

body {
	background: white;
	padding: 0; margin: 0;
}
table {
	border-collapse: collapse; /* setting cellspacing is therefore redundant */ 
	empty-cells: show;
	margin: 0;
}
td { vertical-align: top; padding: 0; }
th { text-align: left; font-weight: bold; }

p { margin: 10px 0; padding: 0; }

ul, ol {
	padding: 0;
	margin: 10px 0;
	list-style-position: outside;
	text-indent: 0;
}
ul { list-style-type: none;  }
ol { 
	list-style-type: decimal;
	margin-left: 20px; 
}

li { 
	color: #6b0d0d;
	font-weight: bold;
}

ul li {
	background: url('/images/customer/bullet_keltainen.gif') no-repeat;
	background-position: 0 4px;
	padding-left: 10px;
	
}

form { padding: 0; margin: 0; }


/****************************************************************************
					   Helpers
*****************************/

h1 {
	color: #000;
	border-bottom: 3px solid #e3d2a8;
	text-transform: uppercase;
}
h2 {
	color: #000; 
}

h1.left	 {
	color: #fff;
	font-size: 11px;
	line-height: 13px;
	border-bottom: 3px solid #626262;
	text-transform: uppercase;
}
h1.right { 
	color: #000;
	font-size: 11px;
	line-height: 13px;
	border-bottom: 3px solid #e1d0a2;
	text-transform: uppercase;
}


td#right_cell p,
td#right_cell div,
td#right_cell span {
	font-size: 10px;
}
td#left_cell p,
td#left_cell div,
td#left_cell span {
	font-size: 10px;
}


*.tiny_text					{ font-size: 9px; }
*.small_text				{ font-size: 10px; }
*.large_text				{ font-size: 16px; }
*.huge_text					{ font-size: 18px; }

input.short_width	 { width: 100px; }
input.normal_width { width: 150px; }
input.long_width	 { width: 200px; }

input.button			 {	}
input.text				 {	}

*.nopad							{ margin: 0 !important; padding: 0 !important; }
*.bmargin						{ margin-bottom: 15px; }
*.padblock					{ display: block; padding: 10px 0; }

*.error							{ font-weight: bold; color: red; }
*.ok								{ font-weight: bold; color: green; }

td.align_middle			{ vertical-align: middle; }
td.align_top				{ vertical-align: top; }
td.align_bottom			{ vertical-align: bottom; }
*.align_left				{ text-align: left; }
*.align_center			{ text-align: center; }
*.align_right				{ text-align: right; }

*.verdana						{ font-family: 'Verdana', 'san-serif'; }
*.arial							{ font-family: 'Arial', 'san-serif'; }

/** add you own here **/

/****************************************************************************
					   Common
*****************************/

/****
links
*****/

	/** Normal links within text etc. **/
	a {
		color: #cf5a04;
		text-decoration: none;
	}
	a:hover	{text-decoration: underline;}
	a:visited {
		color: #cf8f04;
	}
	
	/* internal_link and file_link */
	table.link { padding-bottom: 10px; }
		table.link a {  }
	
	table.internal_link   {  }
		table.internal_link td.bullet { vertical-align: top; padding-right: 3px; width: auto; }
		table.internal_link td.link   { vertical-align: top; }
			table.internal_link a {  }
	
	table.file   { margin: 5px 0; }
	table.file * { font-size: 10px !important; }
		table.file td.bullet { padding-right: 3px; width: auto; vertical-align: top; }
		table.file td.link   {  }
			table.file a {  }
			table.file .filesize { color: #b5b5b5; }

/*****
header
******/


/*****
footer
******/

	div#footer {
		background: url('/images/customer/footer_bg.gif');
	}
		div#footer table { width: 1100px; }
			div#footer table td { 
				height: 24px; 
				vertical-align: middle;
			}
			div#footer table td.content {
				width: 100%;
				padding-left: 15px;
				color: #fff;
				font-size: 8px;
				text-transform: uppercase;
			}
				div#footer .footer a,
				div#footer .footer a:visited {}
				div#footer .footer a:hover {}
				div#footer .powered_by, 
				div#footer .powered_by a, 
				div#footer .powered_by a:visited {}
				div#footer .powered_by a:hover {}

/****************************************************************************
				   Navigation
*****************************/

/***
path
****/

	div#path { height: 20px; }
		div#path * { color: #b5b5b5; font-size: 11px; }
		div#path span.separator { padding: 0 2px; }
		div#path div {  }
			div#path a,
			div#path a:visited { text-decoration: none; }
			div#path a:hover   { text-decoration: underline; }

/*************
top navigation
**************/

	div#top_nav { }
		div#top_nav table.level_1 { height: 30px; }
			div#top_nav table.level_1 td { 
				vertical-align: middle;
			}
			div#top_nav table.level_1 td.first { border-left: none; }
				div#top_nav table.level_1 a,
				div#top_nav table.level_1 a:visited {
					text-decoration: none !important;
					font-size: 11px;
					font-weight: bold;
					line-height: 13px;
					text-transform: uppercase;
					color: #fff;
					display: block;
					height: 22px;
					padding: 0 15px;
				}
				div#top_nav table.level_1 a div { 
					padding: 4px 0;
				}
				
				div#top_nav table.level_1 a:hover   { 
					background: #fff;
					color: #2a2a2a;
				}
				div#top_nav table.level_1 td.active { }	
				div#top_nav table.level_1 a.active,
				div#top_nav table.level_1 a.active:visited,
				div#top_nav table.level_1 a.active:hover {
					background: #fff; 
					color: #2a2a2a;
				}
				div#top_nav td { padding-right: 5px; }
				div#top_nav tr#topnav_links td {
				}
				
				div#top_nav tr#topnav_images td {
					height: 8px; 
					font-size: 0;
					line-height: 0;
					text-align: center;
				}

/**************
side navigation
***************/

	div#side_nav {  }
		div#side_nav div.current_page {
			text-transform: uppercase;
			text-align: right;
			font-weight: bold;
			color: #fff;
		}
	
		ul#side_menu {
			list-style-type: none;
			marker-offset: 0;
			padding: 0;
			margin: 0;
			text-indent: 0;
			margin-top: 10px; 
		}
		ul#side_menu li { 
			padding-bottom: 10px; 
			background: none; 
			text-align: right;
		}
			ul#side_menu li a {
				text-decoration: none;
				font-weight: normal;
				font-size: 11px;
				line-height: 13px;
			}
			ul#side_menu li a.inactive { color: #c0c0c0; }
			ul#side_menu li a.active   { color: #d09f05; text-decoration: none;; }
			ul#side_menu li a.active_parent {  }
			
		ul#side_menu li.level_1 { 
			padding-right: 16px;
			text-transform: uppercase;
			background: url('/images/customer/bullet1.gif') no-repeat;
			background-position: right 4px;
		}
			ul#side_menu li.level_1 a {
			}
			
		ul#side_menu li.level_2 { 
			padding-right: 10px; 
			margin-right: 12px;
			background: url('/images/customer/bullet2.gif') no-repeat;
			background-position: right 4px;
		}
			ul#side_menu li.level_2 a {
			}
			
		ul#side_menu li.level_3 { 
			padding-right: 12px; 
			margin-right: 28px;
			background: url('/images/customer/bullet3.gif') no-repeat;
			background-position: right 5px;
		}
			ul#side_menu li.level_3 a {
				font-size: 10px;
				line-height: 15px;
			}


/****************************************************************************
					  Modules
*****************************/

/**
FAQ
***/

	*.faq_question, *.faq_questioner,
	*.faq_answer, *.faq_answerer { display: block; margin-bottom: 15px; }
	
	*.faq_answer     { }
	*.faq_answerer   { }
	*.faq_question   { }
	*.faq_questioner { }
	
	*.faq_back { }

/******
sitemap
*******/

	div#sitemap { margin-bottom: 40px; }
		div#sitemap table { width: 100%; }
			div#sitemap table td      {  }
			div#sitemap table td.content {
				padding: 0 20px 30px 20px;
				border-bottom: 1px dotted #666;
				width: 33%;
			}
			
			div#sitemap table td div.container {   }
			div#sitemap table td.last { padding-right: 0px; }
				div#sitemap span.level_1 { display: block; margin-bottom: 5px; }
					div#sitemap a {
						text-decoration: none;
						font-weight: normal;
					}
					div#sitemap a:hover {
						text-decoration: underline;
					}
					div#sitemap a.level_1 { 
						font-size: 11px;
						color: #000;
						text-transform: uppercase;
						font-weight: bold;
					}
				div#sitemap ul       { margin-left: 0; padding-left: 15px; list-style-type: none }
					div#sitemap ul li  { }
						div#sitemap ul a { color: #000 !important; }
						
				div#sitemap ul.level_2    { margin-left: 0px; padding-left: 0; }
					div#sitemap li.level_2  { background: url('/images/customer/bullet_sitemap1.gif') no-repeat; background-position: 0 3px; }
						div#sitemap a.level_2 { font-weight: normal; text-transform: uppercase; }
						
				div#sitemap ul.level_3    { padding-left: 10px; margin: 3px 0 0 0; }
					div#sitemap li.level_3  { background: url('/images/customer/bullet_sitemap2.gif') no-repeat; background-position: 0 4px; }
						div#sitemap a.level_3 { }
						
				div#sitemap ul.level_4    { padding-left: 8px; margin: 3px 0 0 0; }
					div#sitemap li.level_4  { padding-bottom: 2px; background: url('/images/customer/bullet_sitemap3.gif') no-repeat; background-position: 0 4px; }
						div#sitemap a.level_4 { font-size: 10px; }

/***********
product card - tuotekortti
************/

	div.product_link { padding-bottom: 15px; }
	*.product_category_link {  }

/************
person folder - henkilökortti
*************/

	div.embedded_person {  }
	table.view_person_folder {  }

/*******
feedback - palaute
********/

div#feedback table.checkboxes { width: 80%; }

	table#feedback_form { width: 100%; margin-top: 15px; }
		table#feedback_form th { 
			color: #666;
			text-align: left;
			vertical-align: top;
			font-weight: normal;
		}
		table#feedback_form td { 
			text-align: left;
			vertical-align: top;
			padding-right: 30px;
			width: 50%;
		}
		table#feedback_form td.submit { text-align: right; padding-top: 5px; }
		table#feedback_form input.text,
		table#feedback_form textarea { width: 100%; }

/*******
sendlink - kerro kaverille
********/

	table.sendlink_form {}

/************
Search - haku
*************/

	div#search_box        { display: inline; }
		div#search_box form { display: inline; }
		div#search_box form input.text { width: 100px; }
		div#search_box input.text { 
			font-size: 9px; 
			line-height: 9px; 
			padding: 0; 
			height: 14px;
			border: 1px solid #ccc;
			margin: 0 5px;
		}
		
	
	div#search { }
		div#search form { }
		div#search_results { padding-top: 15px; }
			div#search_results div.no_results { font-size: 16px; line-height: 20px; }
			div#search_pages { width: 250px; padding-top: 15px; }
				div#search_pages span.previous { padding-right: 15px; }
				div#search_pages span.next { }
				div#search_results table.results td { padding-bottom: 3px; }
				div#search_results table.results td.number { width: 20px; }
				div#search_results table.results td.target { }
					div#search_results div.result_link { }
						a.search_result, 
						a.search_result:visited { color: black; }
						a.search_result:hover   { color: #666666; }
					div#search_results div.result_description { }
					div#search_results div.result_path { }
						a.search_result_path, 
						a.search_result_path:visited { color: #666666; }
						a.search_result_path:hover   { color: black; }

/*************
News - Uutiset
**************/
	
	div#news       {  }
		div#news_nav {  }
		a.news, 
		a.news:visited, 
		a.news:hover {  }
		
	/* Nostot */
	div#news_hoist * {  }
		div#news_hoist div.list_item { margin-bottom: 10px; }
			a.news_hoist, 
			a.news_hoist:visited, 
			a.news_hoist:hover {  }
			div#news_hoist div.date { 
				display: block; 
				padding-bottom: 2px;
				padding-left: 13px; 
				background: url('/images/customer/bullet_keltainen.gif') no-repeat;
				background-position: 2px 5px;
				color: #c0c0c0;
				font-size: 10px;
			}
			div#news_hoist div.show_all { text-align: right; }
			
	td#right_cell div.news_container {
		background: #e0cca1; /* #e0cfa1 */
		margin-left: 7px;
		padding: 10px 8px 5px 10px;
	}
	td#right_cell div.news_container h1 {
		border-bottom: 3px solid #c2af77;
	}
	
	td#right_cell div#news_hoist div.date {
		background: url('/images/customer/bullet_harmaa.gif') no-repeat;
		background-position: 2px 5px;
		color: #000;
	}
	div#news_hoist a {
		font-size: 10px;
	}
	td#right_cell div#news_hoist a {
		color: #8e0000;
	}
		
	div#news_list  {  }
		div#news_list  div.list_item { margin-bottom: 10px; }
	
	div#news .news_lead,
	div#news_list .news_lead,
	div#news_hoist .news_lead { display: block; }
	
	div#news h1.title { margin-bottom: 3px; }
	
	div#news .date,
	div#news_list .date { display: block; padding-bottom: 4px; }
	

/****************************************************************************
					Structure
*****************************/
	
	/** Outer block *********/
	div#container {
		text-align: left;
	}
		div#header {
		}
			div#header div.top { 
				height: 26px; 
				clear: both; 
				background: #2a2a2a; 
			}
			div#header div.top table td { vertical-align: middle; height: 26px; }
			div#header div.container {
				width: 1040px;
			}
			
			div#header div.middle {
				height: 124px; 
				clear: both; 
			}
			div#header div.bottom { 
				height: 30px; 
				clear: both; 
				background: url('/images/customer/topnav_bg.gif') repeat-x;
			}
				div#header div.logoimage { float: left; }
				
			div#content { width: 955px; }
			#frontpage div#content { width: 1028px; }
				table#middle_content { width: 100%; }

					/****** Left ************/
					td#left_cell { 
						width: 235px; 
						color: white; 
						background: url('/images/customer/left_bg.gif') left repeat-y;
					}
					#frontpage td#left_cell { 
						width: 303px;
						background: url('/images/customer/left_bg_frontpage.gif') left repeat-y;
					}
						td#left_cell div.container {
							margin: 15px 28px 10px 20px;
						}
						td#left_cell div.gray_container {
							margin: 0 18px 10px 11px;
							padding: 10px;
							background: #424242;
						}
						#frontpage td#left_cell div.gray_container {
							margin: 8px 18px 10px 11px;
							padding: 10px;
						}
						
					/****** Center **********/
					td#center_cell {
						padding: 9px 7px 15px 7px;
					}
						td#center_cell div.container {
							padding-bottom: 30px;
						}
					/****** Right ***********/
					td#right_cell {
						width: 215px;
						background: url(/images/customer/oikea_reuna.gif) left repeat-y;
					}
					#frontpage td#right_cell {
						width: 241px;
					}
						td#right_cell div.container {
							margin: 15px 0 0 15px;
							color: #6c6c6c;
						}
						
						
						div#frontpage_link1 {
							margin-bottom: 10px;
						}
						td#frontpage_link2 {
							background: url('/images/customer/legalett_boxi.jpg') no-repeat left top;
						}
							td#frontpage_link2 a.logo_link {
								display: block;
								position: absolute;
								margin-left: 30px;
								margin-top: 25px;
								width: 160px;
								height: 45px;
							}

							td#frontpage_link3 a.logo_link {
								display: block;
								position: absolute;
								margin-left: 30px;
								margin-top: 7px;
								width: 170px;
								height: 65px;
							}
						.frontpage_box {
							width: 463px;
							border: 1px solid #ccc;
							padding: 2px;
							margin-bottom: 15px;
						}
						.frontpage_box a				{display: block; text-decoration: none; border: 1px solid #eee; color: #666; padding: 13px; text-shadow: 1px 1px 0 white; line-height: 15px; transition: all 0.15s ease-in-out; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out;}
						.frontpage_box a:hover			{background: #eee; }
						.frontpage_box a:hover strong	{color: #CF5A04;}
						.frontpage_box img				{float: left;}
						.frontpage_box span				{margin-left: 160px; display: block;}


/****************************************************************************
				 Installation specific
*****************************/

div#print_icon {
	text-align: right;
}

div#top_quicklinks { 
	display: inline; 
	padding-left: 240px; 
}
	div#top_quicklinks * { 
		color: #c0c0c0; 
	}
	div#top_quicklinks a.active {
		color: #cf8f04;
		text-decoration: none !important;
	}
	
	div.quicklinks {
		display: inline;
	}
	div.quicklinks * {
		font-size: 10px; 
		text-transform: uppercase;
		
	}
	div.quicklinks a {
		text-decoration: none !important;
	}
	div.quicklinks span.separator { padding: 0 8px; }
	
	div#bottom_line { height: 25px; }
		div#bottom_quicklinks {
			position: absolute;
			margin-top: 5px;
			margin-left: 380px;
		}
			div#bottom_quicklinks * { 
				color: #7a7a7a; 
			}
			div#bottom_quicklinks a.active {
				text-decoration: none !important;
			}
			
		div#powered {
			position: absolute;
			margin-top: 4px;
			margin-left: 805px;
		}

		/* Murupolku */
		div.breadcrumbs {
			color: #888;
			font-size: 10px;
			padding-bottom: 8px;
		}
		
		div.breadcrumbs span.separator { padding: 0 4px 0 4px; }
		
		div.breadcrumbs a { color: #888; text-decoration: none; }
		div.breadcrumbs a.last,
		div.breadcrumbs a.active {}
		div.breadcrumbs a.inactive { color: #aaa; }
		
		div.breadcrumbs a:hover { text-decoration: underline; }

