/*
 * Authors: Vainikka Mika (vami), Vartiainen Matti (vama)
 * Date	Version	Author	Changes
 * 080512	0.1		vami		File created: added main sections.
 * 080513	0.2		vami		Added styling for headings, lists, paragraphs, images, tables and links.
 * 080516	0.2.1		vami		Added experimental styling for contact form.
 * 080519	0.2.2		vami		Added styling for product cards.
 * 080519	0.3		vami		Changed from div.section_img_text-div.p3 layout to a table layout -> added table.img_text.
 * 080519	0.3.1		vami		Added more comments, better grouping.
 * 080520	0.3.2		vami		Added form#contact input#send.
 * 080520	0.3.3		vami		Fixed h1 and h2 heading positions.
 * 080520	0.3.4		vami		Added hidden input field to contact form.
 * 080520	0.4		vami		Added shopping cart styling.
 * 080521	0.5		vami		Added order process styling.
 * 080522	0.6		vami		Added styling for Itula Easy order form.
 * 080527	0.6.1		vami		Added styling for product group description tables.
 * 080527	0.6.2		vami		Added div.column4 for full width box columns.
 * 080528	0.6.3		vami		Added border for contact form select element.
 * 080528	0.7		vama		Fonts, headers and spacing changes.
 * 080528	0.7.1		vami		More spacing changes (tighter layout) and gave all text links different hover color.
 * 080529	0.7.2		vami		Even more spacing changes and changed h2 link color from orange to black.
 * 080529	0.7.3		vami		Added #main_content font fix to override Wosbee's font settings.
 * 080529	0.7.4		vami		Added styling for sub-menu items.
 * 080530	0.8		vami		Material calculator.
 * 080602	0.8.1		vami		Some more image-styled buttons and added div#cart_actions table styling.
 * 080603	0.8.2		vami		Changed front page accessories table styling.
 * 080605	0.8.3		vami		Added td.product_info styling to fix product info texts without paragraph tags.
 * 080610	0.8.4		vami		Increased #container_inner and #main_content heights because more product categories were added.
 * 080612	0.9		vama		Price labels.
 * 080616	0.9.1		vami		Added left margin for large top and bottom dividers, removed line-height from #top_text.
 * 080616	0.9.2		vami		Changed price label properties (floating off, width and height changes, display as block).
 * 080624	0.9.3		vami		Added a new image-styled button: laskuri, removed font-weight setting from box_middle -> added new class "bold".
 * 080626	0.9.4		vami		Styling for alternative product images.
 * 080627	0.9.5		vami		Added a new image-styled button: laske.
 * 080702	0.9.6		vami		Main menu items, class selected: changed class name to "sel" (same with Wosbee's selected product category class name).
 * 080703	0.9.7		vami		Added img#wosbee_logo and gave left column some bottom margin to keep it away from the logo.
 * 080704	0.9.8		vama		Proheat Free image.
 * 080707	0.9.9		vami		Added image-styled button "Nettotukku: Free", removed material calculator input element styling (not used).
 * 080730	1.0		vami		Changed the position of img.person_front.
 */

/* ### Common ### */

* {
	margin: 0;
	padding: 0;
	border: 0;
}

body {
	background-color: white;
	background-image: url("../img/bg.jpg");
	background-repeat: no-repeat;
	background-position: top center;
	background-attachment: fixed;
	font-family: Verdana, sans-serif;
	font-size: 11px;
}

/* ### Main sections ### */

#container {
	margin: 0 auto 0 auto;
	width: 934px;
	position: relative;
}

#top {
	background-image: url("../img/palsta_top.png");
	height: 133px;
	padding-right: 25px;
}

#container_inner {
	width: 100%;
	background-image: url("../img/palsta_middle.png");
	background-repeat: repeat-y;
}

#left {
	width: 220px;
	padding-left: 30px;
	clear: left;
	float: left;
	margin-bottom: 50px;
}

#main {
	margin-left: 235px;
}

#bottom {
	background-image: url("../img/palsta_bottom.png");
	height: 56px;
}

/* ### Top links ### */

#top_text {
	padding-top: 110px;
	float: right;
	margin-bottom: 0;
}

span.cart {
	font-weight: bold;
	color: #02b301;
	margin-right: 1.5em;
}

span.top_link a {
	font-weight: bold;
	color: #ff5000;
	margin-right: 1.5em;
	text-decoration: none;
}

span.top_link a:hover {
	color: #FF2800;
}

/* ### Dividers (images), left column ### */

div.divider_small_top {
	background-image: url("../img/divider_small_top.gif");
	background-repeat: no-repeat;	
	height: 5px;
}

/* Menu items go here */
div.menu {
	background-image: url("../img/divider_small_middle.gif");
	background-repeat: repeat-y;
	padding: 2px 20px 0 10px;
}

div.divider_small_bottom {
	background-image: url("../img/divider_small_bottom.gif");
	background-repeat: no-repeat;	
	height: 5px;
	margin-bottom: 2em;
}

/* ### Dividers (images), right column ### */

div.divider_large_top {
	background-image: url("../img/divider_large_top.gif");
	background-repeat: no-repeat;
	height: 5px;
	margin-left: -30px;
}

#main_content {
	background-image: url("../img/divider_large_middle.gif");
	background-repeat: repeat-y;
	padding-left: 30px;
	width: 620px;
	position: relative;
}

div.divider_large_bottom {
	background-image: url("../img/divider_large_bottom.gif");
	background-repeat: no-repeat;	
	height: 5px;
	margin-left: -30px;
}

/* ### Headings ### */

span.menu_heading {
	background-image: url("../img/header_arrow_small.gif");
	background-repeat: no-repeat;		
	background-position: 4px 3px;
	padding-left: 16px;
	font-size: 18px;
	color: #000000;
	line-height: 1em;
}

h1 {
	background-image: url("../img/header_arrow_large.gif");
	background-repeat: no-repeat;		
	background-position: center left;
	padding-left: 17px;
	font-size: 40px;
	color: #000000;
	font-weight: normal;
	font-family: Arial;
}

h2 {
	background-image: url("../img/header_arrow_small.gif");
	background-repeat: no-repeat;		
	background-position: 0px 4px;
	padding-left: 13px;
	font-size: 18px;
	color: #000000;
	font-weight: normal;
	font-family: Arial;
}

h2 a {
	text-decoration: none;
	color: #000000;
	font-weight: normal;
}

h2 a:hover {
	color: #000000;
}

/* ### Main menu items ### */

#left ul {
	margin: 3px 0 0 3px;
	list-style-type: none;
	line-height: 1.7em;
	font-weight: normal;
}

#left ul a {
	font-weight: bold;
	font-family: Arial;
	font-size: 15px;
	color: #ff5000;
	text-decoration: none;
}

#left ul a:hover {
	color: #FF2800;
}

#left li.sel {
	color: #ff5000;
	margin-left: -10px;
	padding-left: 10px;
}

#left div.menu_selected li.sel {	
	background-image: url("../img/menu_selected_arrow.gif");
	background-repeat: no-repeat;		
	background-position: 0 3px;
}

/* Sub-menu */
#left ul li ul {
	margin: 0 0 0 20px;
}

/* ### Content columns ### */

/* On front page */
div.column1 {
	width: 370px;
}

/* On Yritysasiakkaat page */
div.column2 {
	width: 270px;
}

/* With balls on the right side*/
div.column3 {
	width: 300px;
	background-image: url("../img/divider_balls.gif");
	background-repeat: repeat-y;		
	background-position: top right;
	padding-right: 2em;
}

/* Full width */
div.column4 {
	width: 570px;
}

/* ### Main boxes ### */

div.box {
	padding: 1em;
	margin-left: -1em;
	position: relative;
	left: -10px;
}

div.box_top {
	height: 30px;
	width: 598px;
	background-image: url("../img/minipalsta_top.gif");
	background-repeat: no-repeat;
	padding: 1em 0 0 1em;
}

div.box_middle {
	background-image: url("../img/minipalsta_middle.gif");
	background-repeat: repeat-y;
	width: 598px;
	padding: 0 0 0.5em 1em;
}

div.box_bottom {
	height: 7px;
	width: 598px;
	background-image: url("../img/minipalsta_bottom.gif");
	background-repeat: no-repeat;
}

/* ### Main images (girl) ### */

img.person_front {
	position: absolute;
	right: -70px;
	top: 50px;
}

img.person_avaimet {
	position: absolute;
	right: 50px;
	top: 10px;
}

img.person_easy {
	position: absolute;
	right: -90px;
	top: -6px;
}

img.person_yrityksille {
	position: absolute;
	right: -40px;
	top: 0;
}

img.proheatfree {
	position: absolute;
	right: 35px;
	top: 47px;
}

/* ### Image-styled buttons ### */

a.tarjous {
	background-image: url("../img/button_tarjous.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

a:hover.tarjous {
	background-image: url("../img/button_tarjous-over.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

a:active.tarjous {
	background-image: url("../img/button_tarjous-down.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

a.tilaus{
	background-image: url("../img/button_tilaukseen.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

a:hover.tilaus {
	background-image: url("../img/button_tilaukseen-over.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

a:active.tilaus {
	background-image: url("../img/button_tilaukseen-down.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

a.laskuri {
	background-image: url("../img/button_laskuriin.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

a:hover.laskuri {
	background-image: url("../img/button_laskuriin-over.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

a:active.laskuri {
	background-image: url("../img/button_laskuriin-down.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

a.laske {
	background-image: url("../img/button_laske.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

a:hover.laske {
	background-image: url("../img/button_laske-over.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

a:active.laske {
	background-image: url("../img/button_laske-down.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

a.nettofree {
	background-image: url("../img/button_nettofree.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

a:hover.nettofree {
	background-image: url("../img/button_nettofree-over.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

a:active.nettofree {
	background-image: url("../img/button_nettofree-down.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

input.ProductAddButton {
	background-image: url("../img/button_ostoskoriin.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

input:hover.ProductAddButton {
	background-image: url("../img/button_ostoskoriin-over.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

input:active.ProductAddButton {
	background-image: url("../img/button_ostoskoriin-down.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

input.ShoppingCartRemoveButton {
	background-image: url("../img/button_delete.gif");
	background-repeat: no-repeat;		
	width: 80px;
	height: 20px;
	display: block;
}

input:hover.ShoppingCartRemoveButton {
	background-image: url("../img/button_delete-over.gif");
	background-repeat: no-repeat;		
	width: 80px;
	height: 20px;
	display: block;
}

input:active.ShoppingCartRemoveButton {
	background-image: url("../img/button_delete-down.gif");
	background-repeat: no-repeat;		
	width: 80px;
	height: 20px;
	display: block;
}

input.ShoppingCartRemoveAll {
	background-image: url("../img/button_clearcart.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

input:hover.ShoppingCartRemoveAll {
	background-image: url("../img/button_clearcart-over.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

input:active.ShoppingCartRemoveAll {
	background-image: url("../img/button_clearcart-down.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

input.ShoppingCartUpdate {
	background-image: url("../img/button_update.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

input:hover.ShoppingCartUpdate {
	background-image: url("../img/button_update-over.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

input:active.ShoppingCartUpdate {
	background-image: url("../img/button_update-down.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

#cart_actions a {
	background-image: url("../img/button_order.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

#cart_actions a:hover {
	background-image: url("../img/button_order-over.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

#cart_actions a:active {
	background-image: url("../img/button_order-down.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

input.OrderFormSendButton {
	background-image: url("../img/button_tilaukseen.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

input:hover.OrderFormSendButton {
	background-image: url("../img/button_tilaukseen-over.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

input:active.OrderFormSendButton {
	background-image: url("../img/button_tilaukseen-down.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

input.OrderFormConfirmButton {
	background-image: url("../img/button_confirm.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

input:hover.OrderFormConfirmButton {
	background-image: url("../img/button_confirm-over.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

input:active.OrderFormConfirmButton {
	background-image: url("../img/button_confirm-down.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

/* ### Miscellaneous ### */

#main_content font {
	font-family: Verdana, sans-serif;
	font-size: 11px;
}

a {
	font-weight: bold;
	color: #ff5000;
	text-decoration: none;
}

a:hover {
	color: #FF2800;
}

p {
	line-height: 1.6em;
	text-align: left;
	margin-bottom: 1em;
}

/*	Used in product list and product page for product information cell.
	Fixes line-height if info text is written with Wosbee's WYSIWYG editor and no paragraph tags are automatically created.
*/
td.product_info {
	line-height: 1.7em;
	text-align: left;
}

/* Alternative product images below the description text */
td.product_info img {
	float: left;
	clear: both;
	margin: 10px 0;
}

p.tight {
	margin: 0;
	line-height: 14px;
}

ul {
	line-height: 1.7em;
	margin: 0.2em 0 1em 1.5em;
}

/* Arrows in front of some links */
span.arrows {
	color: #02b301;
}

/* Product group description images */
img.product_group {
	position: absolute;
	right: 155px;
	top: 60px;
}

/* Product group description tables */
table.product_group {
	position: absolute;
	right: 55px;
	top: 55px;
	width: 200px;
}

/* Product price */
span.price {
	width: 139px;
	height: 57px;
	padding-top: 7px;
	font-family: Arial;
	font-size: 25px;
	letter-spacing: -0.5px;
	color: #ffffff;
	text-align: center;
	background-image: url("../img/hintalappu_medium.gif");
	background-repeat: no-repeat;
	display: block;
}

/* Product amount */
input.ProductAmountField {
	border: 1px solid #777777;
	width: 40px;
	font-size: 24px;
	font-weight: normal;
	font-family: Arial;
	padding-left: 0.2em;
}

/* Table structure used to position image, "balls" background and text */
table.img_text {
	margin-top: 1em;
}

table.img_text td {
	vertical-align: top;
}

table.img_text td.middle {
	background-image: url("../img/divider_balls.gif");
	background-repeat: repeat-y;		
	background-position: top center;
	width: 40px;
}

table.img_text td.lowered {
	padding-top: 0.6em;
}

table.img_text td.lowered_more {
	padding-top: 1em;
}

table.img_text td.centered {
	text-align: center;
}

/* Shopping cart */
table#cart_total {
	margin-top: 1em;
	float: right;
	border-top: 1px solid #cccccc;
}

table#cart_total td {
	text-align: right;
}

table#cart_total td.label {
	padding-right: 0.5em;
}

div#cart_actions {
	clear: right;
	float: right;
	margin-top: 1em;
}

div#cart_actions table td {
	padding-left: 0.3em;
}

/* Order form */
div#order {
	overflow: hidden;
}

div#order table {
	margin-top: 0.5em;
}

div#order label {
	margin-right: 0.3em;
	font-family: Verdana, sans-serif;
	font-size: 12px;
}

div#order input, div#order select {
	border: 1px solid #cccccc;
}

div#order td {
	padding-bottom: 0.2em;
}

div#order input.OrderFormSendButton, div#order input.OrderFormConfirmButton {
	border: 0;
}

/* Product group description tables */
table#product_group_description td {
	vertical-align: top;
	padding-right: 30px;
}

/* Apply bold font on anything */
.bold {
	font-weight: bold;
}

/* Wosbee logo */
img#wosbee_logo {
	position: absolute;
	bottom: 50px;
	left: 75px;
}

/* ### Page specific styling ### */

/* Front page: components */
table.accessories td {
	vertical-align: top;
	width: 150px;
	padding-right: 50px;
}

table.accessories tr.headings td {
	vertical-align: bottom;
}

/* Itula Avaimet käteen: price list */
table.price_list {
	float: left;
	margin-right: 1em;
}

table.price_list td {
	text-align: center;
	padding: 0.3em;
	border: 1px solid #cccccc;
}

/* Contact */
div#contact_left, div#contact_right {
	width: 50%;
	float: left;
	margin-bottom: 1em;
}

form#contact input.textfield {
	width: 200px;
	border: 1px solid #cccccc;
	margin-top: 0.2em;
}

form#contact select {
	border: 1px solid #cccccc;
}

form#contact textarea {
	width: 560px;
	height: 160px;
	border: 1px solid #cccccc;
	margin-top: 0.2em;
}

input.hidden {
	display: none;
}

input#send {
	background-image: url("../img/button_send.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

input:hover#send {
	background-image: url("../img/button_send-over.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

input:active#send {
	background-image: url("../img/button_send-down.gif");
	background-repeat: no-repeat;		
	width: 150px;
	height: 30px;
	display: block;
}

/* Itula Easy: order form */
table#order_easy {
	width: 573px;
}

table#order_easy h2 {
	margin-top: 0.3em;
}

table#order_easy input, table#order_easy textarea {
	margin: 2px 0;
}

table#order_easy textarea {
	width: 570px;
	height: 80px;
}

table#order_easy td.left {
	width: 300px;
}

table#order_easy input.textfield {
	width: 270px;
}

table#order_easy input.textfield_short {
	width: 50px;
}

table#order_easy input.textfield, table#order_easy input.textfield_short, table#order_easy textarea {
	border: 1px solid #cccccc;
}