﻿/***********************************
************************************
***
** 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 */
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: 0; padding: 0; */}

ul, ol {
	padding: 0;
	margin: 0;
	margin-left: 15px;
	list-style-position: outside;
	text-indent: 0;
}
ul { list-style-type: disc }
ol { list-style-type: decimal; }

form { padding: 0; margin: 0; }


/****************************************************************************
                       Helpers
*****************************/

h1.left	 { display: block; margin-bottom: 5px; font-weight: bold; }
h1.right { display: block; margin-bottom: 5px; font-weight: bold; }

*.tiny_text					{ font-size: 10px; }
*.small_text				{ font-size: 11px; }
*.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, a:visited {
		color: blue;
		text-decoration: underline;
	}
	a:hover	{
		color: darkblue;
		text-decoration: none;
	}
	
	/* internal_link and file_link */
	table.link { padding-bottom: 10px; }
		table.link a {  }
	
	table.internal_link   { margin: 1px 0; }
	
	table.internal_link td { vertical-align: middle; padding: 3px 0; }
	
		table.internal_link td.bullet {  width: 14px !important; }
		table.internal_link td.link   { padding: 0 3px; }
			table.internal_link a {  }
	
	table.file   { margin: 2px 0;  }
		table.file td.bullet { width: 17px; vertical-align: middle; }
		table.file td.link   {  }
			table.file a {  }
			table.file .filesize {  }
			
/*****
header
******/


/*****
footer
******/



/****************************************************************************
                   Navigation
*****************************/

/***
path
****/

	div#path 
	{
		height: 18px;
		padding: 5px 0 0 7px;
		background: url("/images/customer/top-bg.jpg") no-repeat -225px -85px;
	}
	
	div#path span.separator { font: normal 10px Tahoma; color: #e1e1e1; padding: 0 6px; }
	
		div#path div {  color: #e1e1e1; font: normal 10px Tahoma; }
			div#path a,
			div#path a:visited { text-decoration: none; color: #e1e1e1; color: #e1e1e1; font: normal 10px Tahoma; }
			div#path a:hover   { text-decoration: underline; }

/*************
top navigation
**************/

	div#top_nav { /*border: 1px dashed maroon;*/ }
		div#top_nav table.level_1 { margin-left: 12px; }
			div#top_nav table.level_1 td { 
				/*border-left: 1px solid grey; */
				/*padding: 0 10px; */
				height: 85px;
				vertical-align: bottom;
			}
			div#top_nav table.level_1 td.first { border-left: none; }
				div#top_nav table.level_1 a 
				{
					display: block;
					height: 25px;
					padding: 60px 12px 0 12px;
					text-transform: uppercase;
					vertical-align: bottom;	
				}
			
				div#top_nav table.level_1 a,
				div#top_nav table.level_1 a:visited {
					text-decoration: none !important;
					font: normal bold 13px Tahoma;
					color: #fff;
				}
				
				div#top_nav table.level_1 a:hover   { 
					padding: 56px 12px 4px 12px;
					color: #585858;
					background: transparent url("/images/customer/menu-active-repeater.gif") repeat-x;
				}
				
				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 
				{
					padding: 56px 12px 4px 12px;
					color: #585858;
					background: transparent url("/images/customer/menu-active-repeater.gif") repeat-x;
				}

/**************
side navigation
***************/

	div#side_nav { width: 192px; }
		div#side_nav div.lolder {}
	
		ul#side_menu {
			list-style-type: none;
			
			marker-offset: 0;
			padding: 0;
			margin: 0 0 0 17px;
			text-indent: 0;
			width: 192px;
			background: transparent url("/images/customer/left-navigation-gradient_14.jpg") no-repeat;
			background-color: #1A1A1A;
		}
		
		* html ul#side_menu {}
		
		ul#side_menu li { padding: 0 4px; }
			ul#side_menu li a {
				display: block;
				zoom: 1;
				text-decoration: none;
				font: normal bold 11px Tahoma;
				/*line-height: 14px;*/
			}
			
			ul#side_menu li a.level_1 
			{
				border-top: solid 1px #646464;
				padding: 6px 5px 5px 14px;
				color: #ddd;
				text-transform: uppercase;
			}
			
			ul#side_menu li a.level_1:hover { color: #fff; text-decoration: underline; }
			
			ul#side_menu li a.first { border-width: 0; }
			
			
			
			ul#side_menu li a.inactive { color: #ddd; }
			ul#side_menu li a.active { background: transparent url("/images/customer/bullet-selected.gif") no-repeat 6px 11px; }
			ul#side_menu li a.active_parent   { color: #fff; }
			
			ul#side_menu li.level_2 a
			{
				padding: 1px 4px 4px 14px;
				color: #fd932d;
				font-weight: normal;
				background-position: 6px 6px;
			}
			
			ul#side_menu a.level_2:hover { color: #cc6207; text-decoration: underline; }

/******************** table version

	div.side_nav {}
	
	div.side_menu_links_lvl1     {}	/ * All lvl 1 items + children * /
	div.side_menu_links_lvl1_act {}	/ * Selected lvl 1 item + children * /
	table.side_menu_links_lvl1 	 {} / * Any one lvl 1 item * /
	a.side_menu_links_lvl1, a.side_menu_links_lvl1:visited { }
	a.side_menu_links_lvl1_act, a.side_menu_links_lvl1_act:visited { 
		font-weight: bold;
	}
	
	div#side_menu_links_lvl2   { padding-left: 10px; } / * All lvl 2 items + children * /
	table.side_menu_links_lvl2 {}
	a.side_menu_links_lvl2, a.side_menu_links_lvl2:visited { }
	a.side_menu_links_lvl2_act, a.side_menu_links_lvl2_act:visited { 
		font-style: italic;
	}
	
	table.side_menu_links_lvl3 {}
	a.side_menu_links_lvl3, a.side_menu_links_lvl3:visited { }
	a.side_menu_links_lvl3_act, a.side_menu_links_lvl3_act:visited { 
		text-decoration: underline;
	}
	
	table.side_menu_links_lvl4 {}
	a.side_menu_links_lvl4, a.side_menu_links_lvl4:visited { }
	a.side_menu_links_lvl4_act, a.side_menu_links_lvl4_act:visited { 
		 font-variant: small-caps;
	}
	
	*/


/****************************************************************************
                      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 { padding-top: 12px; font-family: Tahoma; }
		div#sitemap table { width: 100%; }
			div#sitemap table td      { width: 25%; padding: 0 10px; }
			div#sitemap table td.last { padding-right: 0px; }
				div#sitemap span.level_1 { display: block; margin-bottom: 2px; }
					div#sitemap a.level_1  { font-size: 12px; font-weight: bold; color: #454545; }
				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; }
					div#sitemap li.level_2  { }
						div#sitemap a.level_2 { }
				div#sitemap ul.level_3    { }
					div#sitemap li.level_3  { }
						div#sitemap a.level_3 { }

/***********
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
********/

	table.feedback_form {  }
	td.feedback_error { padding-bottom: 15px; }

/*******
sendlink - kerro kaverille
********/

	table.sendlink_form {}

/************
Search - haku
*************/

	div#search_box        {  }
		div#search_box form {  }
		div#search_box form input.text { width: 99%; }
	
	div#search { }
		div#search table#search_fields td { vertical-align: middle; }
		div#search td.field {  }
		div#search td.submit {  }
	
		div#search form { }
		div#search_results { padding-top: 15px; }
			div#search_results div.no_results { font: normal 12px Tahoma; 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; font: normal 13px Tahoma; }
				div#search_results table.results td.target { padding-bottom: 4px; }
				
					div#search_results div.result_link { font: normal 13px Tahoma; }
					
					div#search_results div.result_description { }
					div#search_results div.result_path { padding-left: 16px; font: normal 11px Tahoma; }
					

/*************
News - Uutiset
**************/
	
	div#news {} 
		div#news_nav {}
		a.news, 
		a.news:visited, 
		a.news:hover {}
		
	/* Nostot */
	div#news_hoist,
	div#news_list { font-family: Tahoma; }
		div#news_hoist div.list_item { margin-bottom: 10px; }
			a.news_hoist, 
			a.news_hoist:visited, 
			a.news_hoist:hover {}
			
	table.news_hoist td.bullet { padding: 4px; }
		
	div.list_item span.date { color: #595959; }
		
	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 .date,
	div#news_list .date,
	div#news_hoist .date { display: block; font: normal 12px Tahoma; color: #595959; }
	
	div#news h1 { margin-bottom: 2px; }
	div#news h1.news { padding: 0; background: none; font-size: 14px; font-weight: bold; margin: 0 0 6px 0; }
	

/****************************************************************************
                    Structure
*****************************/
	
	/** Outer block *********/
	div#container {
		width: 800px;
		margin: 0 auto 0 auto; /* keskitys (FF, Opera, etc. */
		text-align: left; /* IE keskitys (override) for content */
	}
		/** Inner block (2nd) ***/
		table#inner_container { width: 100%; }
			/****** Header row ******/
			td#header_cell { border: 1px dotted black; }
				td#header_cell div.container { border: 1px dashed Orange; }
					td#header_cell div.container div.content { padding: 10px; }
			/****** Middle row ******/
			td#middle_cell { border: 1px dotted black; }
				td#middle_cell table.container { width: 100%; }
					/****** Left ************/
					td#left_cell { width: 200px; }
						td#left_cell div.container { border: 1px solid DarkGreen; padding: 15px; }
					/****** Center **********/
					td#center_cell { width: 450px; }
						td#center_cell div.container { border: 1px solid red; padding: 15px; }
					/****** Right ***********/
					td#right_cell { }
						td#right_cell div.container {
							width: 125px;
							padding: 15px;
							border: 1px solid lime;
					}
			/****** Footer row ******/
			td#footer_cell { border: 1px dotted black; }
				td#footer_cell div.container { border: 1px dashed grey; padding: 10px 5px; }


/************************/
/******* Frontpage ******/
/************************/
/* Usually quite different from default template and therefore separate 
   block of styles. if there are only minor modifications, please insert 
	 them into the normal structure (above) at the appropriate tree level. 
	 All this applies to other templates also. */

	 #frontpage div#container { }


/****************************************************************************
				 Installation specific
*****************************/

/* *** BEGIN [Structure] *** */
	div#page_title { background: transparent url("/images/customer/top-bg.jpg") no-repeat -7px top; padding: 0; margin: 0; }

	div#page_footer { background: #4f4f4f; }

/* *** END [Structure] *** */

/* *** BEGIN [Header] *** */
	div#page_title { text-align: left; }
	
	td.logo 
	{
		padding-left: 4px;
		height: 85px;
		background: transparent url("/images/customer/logo.gif") no-repeat 4px top;
		width: 212px;
	}
	
	td.navigation { }
/* *** END [Header] *** */

/* *** BEGIN [Sidebar] *** */
	td.sidebar 
	{
		background: transparent url("/images/customer/left-navigation-shadow.gif") repeat-y 4px;
		width: 212px;
	}
	
	.orz  
	{
		background: transparent url("/images/customer/logo.gif") no-repeat 4px -85px;
		width: 216px;
	}
	
	.sidebar_content { margin-left: 18px; padding-top: 10px; margin-right: 8px; }
	
	.orz_spacer { padding-top: 12px; }
	
	.sidebar_holder { margin: 0 8px; }
	
	h2.sidebar_caption { font: normal bold 10px Tahoma; text-transform: uppercase; }
	
	table.sidebarLoginTable { width: 100%; }
	
	td.sidebarLoginInput { padding-bottom: 4px; }
	td.sidebarLoginInput label { color: #525252; font: normal 11px Tahoma; }
	td.sidebarLoginInput input.inputField { width: 173px; border: solid 1px #acacac; padding: 1px; font-family: Tahoma; }
	
	td.sidebarLoginLinks { width: 101px; vertical-align: middle; padding-right: 4px; }
	td.sidebarLoginButton { width: 74px; vertical-align: middle; }
	
	td.sidebarLoginLinks { text-align: right; }
		td.sidebarLoginLinks a {
			font: normal 10px Tahoma;
			color: #d55d00;
			text-decoration: none; }
			
		td.sidebarLoginLinks a:hover { text-decoration: underline; }
	
	td.sidebarLoginButton { text-align: right; border-left: solid 1px #c2c2c2; }

	div.sidebarBorderTop { padding-top: 8px; border-top: solid 1px #c4c4c4; }
	
/* *** END [Sidebar] *** */

/* *** BEGIN [Content Area] *** */
	div#page_content 
	{
		width: 1000px;
		border: solid 1px #00f;
		margin: 0;
	}
	
	td.content 
	{
		width: 788px;
		background: transparent url("/images/customer/main-content-shadow.gif") repeat-y;
	}
	
	td.content_center { width: 550px; }
	
	td.content_center_wide {}
	
	div.content_holder { padding: 0px 15px 15px 15px; }
	
	div.content_holder p,
	div.content_holder h1,
	div.content_holder label { font-family: Tahoma; }
	
	div.content_holder p { line-height: 1.25em; margin-bottom: 0.8em; }
	div.content_holder p img { border: solid 1px #b2b2b2; }
	
	div.content_holder h1 { font-size: 22px; font-weight: normal; padding-left: 22px; padding-bottom: 4px; background: transparent url("/images/customer/h1-bg.gif") no-repeat left bottom; margin-top: 11px; }
	
	div.content_holder h2 { font: normal bold 13px Tahoma; margin-bottom: 4px; }
	
	div.content_holder a { color: #d47011; text-decoration: none; }
	div.content_holder a:hover { text-decoration: underline; }
	
	table.content_topbar { width: 100%; }
	
	td.content_quicklinks { text-align: right; }
/* *** END [Content Area] *** */

/* *** BEGIN [Right side] *** */
	td.content_right 
	{
		width: 238px;
		background: transparent url("/images/customer/right-column-bg-repeater.gif") repeat-y;
	}
	
	div.container_right 
	{
		padding: 0 12px 0 28px;
	}
	
	.container_right_item { margin-top: 4px; padding-bottom: 8px; }
	
	.container_right_item p { font: normal 11px Tahoma; line-height: auto; color: #454545; margin-bottom: 6px; }
	.container_right_item h1 { margin-top: 8px; border-top: solid 2px #d1d1d1; padding-top: 8px; font: normal bold 12px Tahoma; margin-bottom: 2px; padding: 8px 0 4px 0; color: #454545; }
	
	.container_right_item a { color: #4b6c94; font: normal 11px Tahoma; }
	
/* *** END [Right side] *** */

/* *** BEGIN [Footer] *** */
	div#page_footer div.footer_container 
	{
		width: 1000px;
		color: #d1d1d1;
		font: normal 10px Verdana;
		padding: 6px 0;
	}
	
	div#page_footer div.footer_container a { color: #fd932d; }
/* *** END [Footer] *** */

/* ****** BEGIN [Colors] ****** */
	.red { color: #f00; }
	
	input.error { border: solid 1px #f00; }
	
	td#Body a { color: #d47011; text-decoration: none; }
	td#Body a:hover { text-decoration: underline; }
/* ****** END [Colors] ****** */

/* SEARCH */
table.search_box_table { width: 192px; border: solid 1px #333; margin-top: 8px; }

table.search_box_table td { vertical-align: middle; }

table.search_box_table td.search_input { }

table.search_box_table td.search_input input,
table#search_fields td.field input { height: 16px; border: 0; font: normal 11px Tahoma; padding: 3px 0 0 3px; }
* html table.search_box_table td.search_input input { height: 14px; padding: 2px 0 1px 5px; }

.blur { color: #777 !important; }

table.search_box_table td.search_submit { width: 19px; background: #000;}


table#search_fields { border: solid 1px #333; margin-top: 8px; }
table#search_fields td.submit { background: #000; }
table#search_fields td.field input { width: 300px; }

/* QUICKLINKS */
td.content_quicklinks { font: normal 10px Tahoma; color: #e1e1e1; padding: 5px 0 0 7px; }
td.content_quicklinks a { color: #fd932d; text-decoration: none; }
td.content_quicklinks a:hover { text-decoration: underline; }

/* POWERED BY */
#poweredby { width: 1000px; text-align: right; }
#poweredby img { padding: 8px 12px 8px 8px; }

/* FORMS */
table.formTable { width: 100%; }
	table.formTable td.cellHalf { width: 50%; }
	table.formTable td.cellHalf input.inputField { width: 90%; }
	table.formTable td.cellHalf { padding-bottom: 6px; }

form#formRegistrationExtranet {}
	
	input.inputField { padding: 1px; }

	textarea.inputTextarea { width: 95%; height: 200px; margin-bottom: 8px; }


table.tableFrontpage { width: 100%; }
	td.cellQuarter { width: 25%; text-align: center; }
		
		
/* MISC */
	div#news div.html_area_block { margin-bottom: 8px !important; }

	div#news_nav { text-align: center; }
	div#news_nav a { padding: 0 4px; font-family: Tahoma; }
	
	._ref { margin: 2px 0 0 0 !important; }
	
	.extranet_link { font: normal bold 10px Tahoma; color: #000 !important; text-transform: uppercase; text-decoration: none; }
	.extranet_link:hover { text-decoration: underline; color: #000 !important; }
	
	.content_wide { width: 540px; }

/* Tuotteet */

	/* Tuotehaku/filtteröinti */
	
	div#product_filter { width: 541px; background: url("/images/customer/filter-top.gif") no-repeat right top; }
	
	table#product_filter_table { width: 541px; background: url("/images/customer/filter-bottom.gif") no-repeat right bottom;}
	
	table#product_filter_table td,
	table#product_filter_table th { font-weight: normal; font-family: Tahoma; color: #fff; padding: 2px; }
	
	td.filter_category { width: 165px; padding: 0 5px 2px 14px !important; }
		td.filter_category select { width: 100%; }
	
	td.filter_form { width: 110px; padding: 0 5px 2px 5px !important; }
		td.filter_form select { width: 100%; }
		
	td.filter_material { width: 56px; padding: 0 5px !important; }
		td.filter_material select { width: 100%; }
		
	td.filter_length { width: 56px; padding: 0 5px !important;  }
		td.filter_length select { width: 100%; }
	
	td.filter_submit { width: 65px; padding: 0 14px 0 5px; }
	
	td.product_filter_note { font: normal 9px Tahoma; color: #ffeba5; padding: 4px 14px !important; }
	
	table#product_filter_table td.filter { padding-bottom: 14px; }

	/* Tuotekategoriat */
	table#product_category_table { width: 100%; }
	table#product_category_table td { padding: 4px; width: 50%; }

	a.product_category_holder {
		background: transparent none no-repeat right bottom;
		width: 221px;
		min-height: 68px;
		height: 68px;
		margin-bottom: 8px;
		display: block;
		padding: 10px;
		color: #595959 !important;
		font: normal bold 13px Tahoma;
		zoom: 1;
	}
	
	a.product_category_holder_noimg {
		background: transparent url('/images/customer/product-category-bg-lr.gif') no-repeat right bottom;
		border-left: solid 1px #ff8e04;
		border-top: solid 1px #ff8e04; }
	
	* html div.product_category_holder { height: 80px; }
	
	a.product_category_holder,
	a.product_category_holder:visited,
	a.product_category_holder:hover { color: #595959; }

	div.product_category_description { padding: 10px; font: normal bold 13px Tahoma; }

	/* Tuotesivut */
	table#product_data { width: 100%; }
	
	table#product_data td,
	table#product_data th { padding: 2px; font-family: Tahoma; }
	
	div.images_sidebar { float: right; margin: 0 0 8px 8px; }
	
	.clear { clear: both; }
	
	table.related_product td { vertical-align: middle; }
	table.related_product td.link { padding-left: 4px; }
	
	.image_text { font-size: 10px; padding-top: 4px;} 
	
	tr.zebra td { background: #f3f3f3; }
	
	table.sidebarTable td { padding: 2px; vertical-align: middle; }
	table.sidebarTable td a { color: #000; font: normal bold 10px Tahoma; text-transform: uppercase; }
	
	td.MainProductRow { padding: 8px 0 2px 0 !important; }
	td.MainProductRow a { font-weight: bold; display: block; zoom: 1; padding: 2px; }
	td.MainProductRow a:hover { background: #f3f3f3; }
	
	ul#ProductProperties { list-style-type: disc !important; margin-bottom: 16px; }
	ul#ProductProperties li { font-family: Tahoma; list-style: disc !important; }
	
	/* Referenssit */
	div.content-referenssi {
		padding-top: 8px;
	}
	
	.slideshow-image { width: 545px; height: 125px; }