/*
-------------------------------

SOK
Required CSS file

File: 	sokos.css
Media:	all

-------------------------------
*/


/* ----- Common elements ----- */

html, body {min-height: 100%; margin:0;  }
body { background: #fff; color: #000; padding: 0; height: 100%; font: 62.5%/1.2em Verdana, Helvetica, Tahoma, Geneva, sans-serif;}
body.large_font { font-size:80%; }

input, select, textarea {font: 1em Arial, Helvetica, Geneva, sans-serif;}
select[multiple] {height: 5.5em;}

form, fieldset, div {margin: 0; padding: 0;}
h1, h2, h3, h4, h5, h6 {margin: 0 0 0.6em 0;  padding: 0; line-height:1em;}
p, pre, blockquote, ul, ol, dl, address, code, fieldset, table {margin: 0 0 1em 0; padding: 0;}
fieldset { margin:0; }

h1 {font-size: 1.8em; font-weight: bold; margin-bottom: 0.7em; clear: both; }
h2 {font-size: 1.4em;}
h3 {font-size: 1.045em;}
h4 {font-size: 1.1em;}
h5 {font-size: 1em;}
h6 {font-size: 1em;}

caption { font-size:1em; }

ul, ol {list-style: none;}
li, dd, blockquote {margin:0; padding:0;}
.content ul { list-style: disc; }
.content li { padding:0; margin:0; list-style-type:none; list-style-position:inside; list-style-type:disc; padding:0 0 0 12px; }
.content ol {list-style: decimal;}
.content li, dd, blockquote {margin-left: 20px;}

form label, a span {cursor: pointer;}

a, a:link {color:#50585f; font-weight:normal; text-decoration: none;}
.content a { text-decoration:underline; }
a:visited {}
a:hover { text-decoration:underline; }
a:active {}

a img, :link img, :visited img, fieldset {border:0;}
address, abbr {font-style:normal;}

table {width: 100%; border-collapse: collapse;}
td, th, caption {text-align: left; vertical-align: top;}

img {display: block;}
img[usemap] {border: 0;}
p img {display: inline;}
.content img { padding:0 0.5em; }
.figure img { padding:0; }

.small { font-size:0.9em; }
a.back { font-weight:bold; color:#000; text-decoration:none;}
a.back:hover { text-decoration:underline; }

/*.hide {position: absolute; left: -9999px !important; top:0 !important; width: 1px;}*/
.hide { display:none; }

/* ----- Layout framework -----  */

/* Skip links */
p#skip {position: absolute; left: 0; top: 0; width: 100%;}
p#skip a {position: absolute; left: -999em; top: 0; margin-bottom: -8px; padding-bottom: 8px;}
p#skip a:focus, p#skip a:active {display: block; position: absolute; left:0; top:0; z-index: 1000; width: 99.9%; color: #fff; font-size: 1.2em; font-weight: bold; text-align: center; }
p#skip a span {width: 100%; display: block; background: #0774b9; padding: 0.5em 0 0.7em;}

.site { width:1024px; position:relative; margin:4px auto; }
/*div[class~="site"] { width:85.333em; max-width:60em; min-width:1024px; }*/
div[class~="site"] { width:auto; max-width:85.333em; min-width:1024px; }

/* Header */
.site .header { display:none;}

/* Navigation */
.navigation { display:none; }

/* link path */
.path { display:none;}

/* Footer */
.footer { display:none; }

/* Content */
#content { clear:both; height:1%; }
#content:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

/* content */
.content { font-family:georgia, helvetica, verdana, sans-serif; font-size:1.1em; margin:0 20px 9px; position:relative; }
.aside { display:none;}

.three_columns {  margin:0 0 0 -27px; padding:0.75em 0; height:1%; }
.three_columns:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.three_columns .section { width:28%; float:left; margin:0; padding:0 0 0 27px; }
.three_columns .section .content { margin:0.75em 0 0 0; width:auto; }

.benefits a, .scent a, .benefits h2, .scent h2  { font-size:1em; font-weight:bold; margin-bottom:0.25em; color:#000; text-decoration:none; }
.benefits a:hover, .scent a:hover { text-decoration:underline; }
.benefits p, .scent p { margin-bottom:0.5em;  }

/* Frontpage content */
.frontpage .content { width:76.563%; float:left; margin:0 0 9px 0; }
.frontpage .aside { width:22.657%; float:right; }

/* front page img / flash container */
.frontpage .figure img { margin:0; }

/* frontpage article sections */
.frontpage .content .article { float:left; margin:11px 0 0 0; border-right:1px solid #d9d9d9; width:33.2%; }
.frontpage .content .article.first { border:0; }
.frontpage .content .article .content { margin:15px 15px 0 18px; padding:0 0 5px 0; float:none; width:auto; }
.frontpage .content .article .figure { display:block; margin:0 auto; }

.frontpage .content .article h2 { font-weight:normal; }
.frontpage .content .article a { font-weight:bold; }

/* frontpage services */
.frontpage .services { position:relative; clear:both; margin:0; border-top:1px solid #d9d9d9; height:1%;}
.frontpage .services:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.frontpage .services .article { width:25.4%; float:left; border-left:1px solid #d9d9d9; padding:0; margin:5px 0 0 0; }
.frontpage .services .article.last { width:23.5%; }
.frontpage .services .article .content { float:left; padding: 12px 10px 5px 19px; margin:0; width:46%; height:1%; }
.frontpage .services .article .content:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.frontpage .services .article.first { border:0; }
.frontpage .services .article .figure { float:right; width:38%; padding:0; margin:0; }
.frontpage .services .article img { float:right; padding:7px 10px 0 0; margin:0 0 0 0; }
.frontpage .services .figure { float:left; }
.frontpage .services a { font-weight:bold; color:#000; text-decoration:none; }
.frontpage .services a:hover { text-decoration:underline; }
.frontpage .services h2 { font-size:1.2em; }

/* second level article section */
.content .article { float:right; width:49.905%; margin:5px 0 15px 0; overflow:hidden; }
.content div[class~="article"] { overflow:visible; }
.content .article.first { float:left; }
.content .article .content { width:auto; margin:0; padding:10px 10px 0 3px; }
.content .article .figure { padding:0; }
.content .article .content h2 { color:#000; font-weight:bold;  }
.content .article .content p { margin:0 0 5px 0; }
.content .article .content a { color:#000; font-weight:bold; text-decoration:none; }
.content .article .content a:hover { text-decoration:underline; }

/* dropdown without javascript */
.contact_search #select_store { height:2.6em; }
.contact_search #select_store_list, #select_product #select_product_list { float:left; padding:0; margin:0; font-size:1.1em;}
.contact_search button, #select_product button, .select_store_location button, .product_info button { line-height:17px; float:left; background:transparent; border:0; margin:0 0 0 5px; padding:0 0 0 0; cursor:pointer; font-size:1.2em; float:left; color:#cbcac9; text-transform:uppercase; }

#select_product #select_product_list { }
#select_product button { color:#fff; }
.select_store_location button { float:none; color:#000; margin:0.25em 0 0 0; display:block; padding:0; }
.product_info #select_store_list, .product_info #select_store button { float:left; color:#000; margin-bottom:1em; }

.dropdown_list { position:relative; display:block; margin:0; padding:0; border:0; z-index:100; }
.content .dropdown_list h3, .contact_search .dropdown_list h3 { position:relative; display:block; margin:0; padding:0; height:auto; background:none; color:#000; border:0; }
.dropdown_list h3 span { display:block; padding:0; }
.dropdown_list li { position:relative; margin:0; padding:0; float:left;  list-style-type:none;}
ul[class~="dropdown_list"] li { float:none; }
.dropdown_list li li { padding:0; margin:0; position:relative;  z-index:100;  }
.dropdown_list ul { height:auto; display:none; background:#fff; width:21.2em; position:absolute; top:25px; left:-1px; border:0; border-left:1px solid #cbcac9; border-right:1px solid #cbcac9; }
.dropdown_list ul.show { display:none; }

.select_brand .dropdown_list, #select_store .dropdown_list { border:0; margin:0; padding:0; }
.select_brand .dropdown_list h3, #select_store .dropdown_list h3 { background:none; margin:0; padding:0; }

/* select store dropdown list */
#select_store { position:relative; margin:0 0 1em 0;}

/* store contacts */
.stores .contact .organization-name { font-weight:bold; }

/* news */
.news { background:#e4e3e2; padding:9px; height:200px; }
div[class~="news"]  { height:auto; min-height:200px; }
.news h2 { margin:0 0 12px 0; text-transform: uppercase; }
.news ul { list-style-type:disc; list-style-position:inside; margin:0; padding:0; }
.news ul li { margin:8px 0 0 0; }

/* page title */
h1  { margin-top:12px; }

/* select brand */
.content .select_brand { display:none; }

/* brand list */
.brands { margin:10px 0 0 0;  }
.brand { clear:both; margin:0 0 10px 0; height:1%; position:relative; }
.brand:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.brand .figure { float:left; }
.brand .content { float:left; width:63%; margin:2px 0 0 23px; z-index:10;}
.content .brand a, .content .brand a:link { color:#000; font-weight:bold; text-decoration:none; }
.content .brand a:hover { text-decoration:underline; }

/* store location and brand info */
.select_store_location { }
.select_store_location #select_store { width:auto; float:none; }
.select_store_location #select_store .dropdown_list, .select_store_location #select_store .dropdown_list ul { width:15em; border:0; }
.select_store_location .brand_info { float:none; margin:0; }
.select_store_location .brand_info h3 { color:#000; }
.select_store_location .brand_info ul { margin:0; padding:0; }
.select_store_location .brand_info ul li { margin:0; padding:0; list-style-type:none; }

/* department and product info*/
.department, .product_info { width:49%; float:left;}
.department_figure, .product_info_figure { float:right; margin:4.5em 0; }
.department_figure a, .product_info_figure a { display:block; font-size:1.1em; color:#000; font-weight:bold; text-decoration:none; margin:5px; }
.department_figure a:hover, .product_info_figure a:hover { text-decoration:underline; }
.department, .product_info .benefit { }
.product_info #select_store .dropdown_list, .product_info #select_store .dropdown_list ul { width:270px; }

.product_info h1, .product_info h2 { text-transform: none; margin-bottom:0.5em;}
.product_info .product_price { font-size:1.053em; line-height:1.3em; }
.price { color:#970237; font-size:1.329em; font-weight:bold; line-height:1.2em; }

.product_info_figure { margin:2em 0; }

/* services and top 5 */
.service { padding:8px 0; clear:both; height:1%; }
.service:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.service .figure { float:left;  }
.service .figure img { margin:0; padding:0; }
.service .content { float:left; width:63%; margin:2px 0 0 23px; }
.service .content h2 { color:#000; font-size:1.2em; margin-bottom:2px; }

/* Top 5 */
.top5 { padding:8px 0; clear:both; height:1%; }
.top5:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.top5 .figure { float:left; }
.top5 .figure img { margin:0; padding:0; }
.top5 .content { float:left; width:63%; margin:2px 0 0 23px; }
.top5 .content h2, .top5 .content .info .product { display:block; color:#000; text-transform: uppercase; font-size:1.4em; margin-bottom:0.25em; font-weight:bold; }
.top5 .content .info .product { margin-bottom:1em; }
.top5 .content a { text-decoration:none; }
.top5 .content .info { margin-left:1.95em; }

/*events */
.events { clear:both; padding:1em 0 2em; }
.events ul { }
.events ul li { margin:0; padding:0 0 1em; }
.events a { font-weight:bold; display:block; color:#000; text-decoration:none; }
.events a:hover { text-decoration:underline; }
.events h2, .event_times  h2 { font-size:1.8em; }

.event_times { clear:both; padding:1em 0 0 0; height:1%; }
.event_times:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.event_times  li { margin:0; padding:0; font-size:1.1em; margin:0 0 0.2em; }
.event_times a { color:#000; text-decoration:none;}
.event_times a.selected { font-weight:bold;;}
.event_times a:hover { text-decoration:underline; }

.event_times ul { float:left; width:30%; }
.event_info { float:right; width:65%; border:1px solid #ccc; padding:1em 1em 0.5em; }
.event_info h2 { font-size:1.1em; }

.event_times .read_more { display:block; clear:both; font-weight:bold; }

/* feedback */
.feedback .content { padding-left:25.4%; }
form.sokos_form { padding-top:1em; }
form.sokos_form .section { margin:0 0 6px; height:1%; }
form.sokos_form .section:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
form.sokos_form label, form.sokos_form .section .label { float:left; width:34%; }
form.sokos_form fieldset label { float:none; width:auto; }
form.sokos_form fieldset .item { margin:0 0 5px; }
form.sokos_form fieldset.no_title { margin-left:34%; }

form.sokos_form input.textbox, form.sokos_form textarea, form.sokos_form input.textbox.short { width:20em; border:1px solid #000; }
form.sokos_form input.textbox.short { width:8.6em; }
form.sokos_form textarea { height:15em; width:20em; }
form.sokos_form input.yhteydenotto_email { width:9.5em; }
form.sokos_form input.yhteydenotto_puh { width:11.4em; }
form.sokos_form .footer { padding:0; margin:1em 0 0 0; background:none; border:0;}
form.sokos_form .footer input { border:0; padding:0.5em 1em;  margin:0 0 0 34%;  background:#d2d2d1; cursor:pointer; font-weight:bold;  font-size:1.1em;}