/* active color 2005: #883052 */
/* active color 2006: #00356A */
/* active color 2007: #422C5A */
/* active color 2008/temp: #000 */
/* active color autumn/2008: #58415d; text on background: #fff; */

/* body */

body {background: #4f5450; margin: 0px; padding: 0px; font-family: verdana, arial, sans-serif; font-size: 11px; color: #7f7f7f;}
div#wrapper {width: 100%; text-align: center;}
div#main {margin: 0px auto; text-align: left; width: 902px; }
div#content {width: 902px; background: #ffffff; position: relative; margin: 0px; padding: 0px;}
span.hide {display: none;}
div.clear {clear: both; height: 62px; margin: 0px;}

/* headers */

div#header_top {width: 902px; height: 77px; position: relative; margin: 0px; padding: 0px;}
div#header_bottom {width: 902px; height: 170px; margin: 0px; padding: 0px; clear: both;}

/* kokeiltu parantaa taustakuosin vaikutusta */
p#language {width: 235px; height: 18px; position: absolute; right: 0px; top: 45px; margin: 0px; text-align: right; }
/*
a#lang_fin {display: block; width: 54px; height: 16px; position: absolute; right: 175px; top: 5px; background: url(images/lang_fin.gif) no-repeat transparent;}
a#lang_eng {display: block; width: 59px; height: 16px; position: absolute; right: 93px; top: 5px; background: url(images/lang_eng.gif) no-repeat transparent;}
a#lang_swe {display: block; width: 64px; height: 16px; position: absolute; right: 5px; top: 4px; background: url(images/lang_swe.gif) no-repeat transparent;}
*/
p#language a { font-family: Verdana, Arial, sans-serif; color: #fff; font-weight: bold; }
p#language span.separator { visibility: hidden; }
/*
a#lang_fin { position: absolute; right: 175px; top: 5px; }
a#lang_eng { position: absolute; right: 93px; top: 5px; }
a#lang_swe { position: absolute; right: 5px; top: 4px; }
*/
p#language a.active {border-bottom: 1px solid #fff;} 

div#header_bottom h1 {width: 156px; height: 149px; position: absolute; left: 62px; top: -17px; background: url(images/logo_autumn2008.jpg) no-repeat transparent; z-index: 100; margin: 0px; padding: 0px;}
div#header_bottom h2 {margin: 0px; padding: 0px; width: 584px; height: 57px; border-left: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8; position: absolute; left: 256px; top: 74px;}
h2#section_news 	{background: url(images/section_news.gif) no-repeat transparent; background-position: 28px 0px;}
h2#section_faceit 	{background: url(images/section_faceit.gif) no-repeat transparent; background-position: 28px 0px;}
h2#section_trend 	{background: url(images/section_trend.gif) no-repeat transparent; background-position: 28px 0px;}
h2#section_collections {background: url(images/section_collections.gif) no-repeat transparent; background-position: 28px 0px;}
h2#section_vip 		{background: url(images/section_vip.gif) no-repeat transparent; background-position: 28px 0px;}
h2#section_contacts {background: url(images/section_contacts.gif) no-repeat transparent; background-position: 28px 0px;}
h2#section_partners {background: url(images/section_partners.gif) no-repeat transparent; background-position: 28px 0px;}

/* menu items */

p#menu {height: 18px; width: 483px; margin: 0px; padding: 0px; position: absolute; left: 256px; top: 28px;}
a#b_news, a#b_faceit, a#b_trend, a#b_collections, a#b_vip, a#b_contacts, a#b_partners {display: block; position: absolute; top: 0px; height: 24px; border-top: 1px solid #ffffff;}
a#b_news 			{width: 32px; left: 0px; background: url(images/button_news.gif) no-repeat transparent;}
a#b_faceit 			{width: 46px; left: 57px; background: url(images/button_faceit.gif) no-repeat transparent;}
a#b_trend 			{width: 38px; left: 128px; background: url(images/button_trend.gif) no-repeat transparent;}
a#b_collections 	{width: 80px; left: 191px; background: url(images/button_collections.gif) no-repeat transparent;}
a#b_vip 			{width: 18px; left: 296px; background: url(images/button_vip.gif) no-repeat transparent;}
a#b_contacts 		{width: 60px; left: 339px; background: url(images/button_contacts.gif) no-repeat transparent;}
a#b_partners 		{width: 58px; left: 424px; background: url(images/button_partners.gif) no-repeat transparent;}
a#b_news, a#b_faceit, a#b_trend, a#b_collections, a#b_vip, a#b_contacts, a#b_partners {background-position: 0px 8px;}
p#menu a.active {border-top: 1px solid #7F7F7F;}


div.submenu {width: 180px; float: left;} /* default submenu column settings */
div.submenu ul {width: 110px; list-style: none; margin: 40px 30px 40px 40px; padding: 0px;}
div.submenu ul li {margin: 0px 0px 9px 0px; padding: 0px;}
div.submenu ul li.active {color: #58415d;}
div.submenu a {color: #8d8d8d; text-decoration: none;}
div.submenu a:hover {color: #555555;}

/* funktionaliset linkit ("news headlines" etc - tarviikohan erotella normilinkeista?) */
p.func { text-align: right; }
p.func a { color: #58415d; text-decoration: none;}
p.func a:hover { text-decoration: underline; }

a { color: #58415d; text-decoration: none;}
a:hover { text-decoration: underline; }

/* content columns ------------------------------------------------------ 
	
	c1right: submenu gradient image, text on the right
	c1left:  normal image on the right, text on the left
	c1wide:  wide text column
	c2:      two equal width columns

*/

div#c1right div.submenu {width: 381px; height: 376px;}
div#c1right div.text {width: 418px; float: left; margin-right: -1px; margin-left: 3px; background: url(images/bg_col_right.gif) repeat-y transparent; padding: 42px 56px 42px 42px; min-height: 292px;}

div#c1left div.text {width: 288px; float: left; background: url(images/bg_col_wide.gif) repeat-y transparent; padding: 42px; min-height: 292px;}
div#c1left div.image {width: 282px; float: left; margin-left: 6px; background: url(images/bg_col_wide.gif) repeat-y transparent;}

div#c1wide div.text {width: 624px; float: left; padding: 42px 56px 42px 42px; background: url(images/bg_col_wide.gif) repeat-y transparent;}

div#c2 div.text {width: 722px; float: left; background: url(images/bg_col_wide.gif) repeat-y transparent; }
div#c2 div.text div.left  {width: 257px; padding: 42px 36px 42px 42px; float: left; border-right: 1px solid #f0f0f0;}
div#c2 div.text div.right {width: 257px; padding: 42px; float: left;}

/* c1right (gradient menu) backgrounds ---------------------------------- */

div#c1right div.submenu {background: no-repeat transparent; height: 376px; background-position: 62px 0px;}

/* gallery -------------------------------------------------------------- */

div#selectedImage {width: 425px; border: 1px solid #ebebeb; text-align: center; float: left;}
div#selectedImage img {border: 7px solid #ebebeb; margin: 0px 0px -2px 0px;}
div#selectedImage p.description { text-align: left; }
div#thumbnails {width: 194px; margin-left: 38px; float: left;}
div#thumbnails h2 {margin: 0px; font-size: 25px; font-weight: normal; font-family: arial, verdana, sans-serif; color: #B2B2B2; text-align: right; padding-bottom: 16px; border-bottom: 1px solid #d8d8d8;}
div#grid {width: 207px; margin: 0px; overflow: hidden; padding: 11px 0px; line-height: 1px;}
div#grid a {display: block; margin: 6px 14px 6px 0px; float: left;}
div#grid img {border: none; margin: 0px; display: block;}
div#grid div.noImage {margin: 6px 14px 6px 0px; width: 55px; height: 55px; background: #eee; float: left; }

div#browse {width: 194px; height: 30px; position: relative; padding-top: 0px; border-top: 1px solid #d8d8d8;}
a#prev, a#next {display: block; width: 75px; height: 20px; position: absolute; top: 10px; color: #b2b2b2; text-decoration: none;}
a#prev {left: 6px; background: url(images/arrow_prev_gray.gif) no-repeat transparent; background-position: 0px 3px; padding-left: 13px;}
a#next {right: 6px; background: url(images/arrow_next_gray.gif) no-repeat transparent; background-position: 100% 3px; padding-right: 13px; text-align: right;}

p.galleryDescription { clear: both; margin-left: 180px; margin-top: 0px; padding-top: 3px;}

/* text based popup */

div.popupbody {margin: 10px;}

/* news */
div.newsList p {margin: 8px 0px; }

/* footer */

div#footer {width: 902px; height: 70px; position: relative; background: transparent; margin-bottom: 20px;}
div#footer a { color: #fff; }
/* p#copyright {width: 72px; height: 8px; background: url(images/copyright.gif) no-repeat transparent; position: absolute; right: 21px; top: 17px; margin: 0px;} */
p#copyright {height: 8px; position: absolute; right: 10px; top: 17px; margin: 0px; color: #fff; font-weight: bold;}

/* login info */

div.loginForm {padding: 17px 0px 0px 21px; }
div.loginForm form {margin: 0px; padding: 0px;}
div.loginForm label {font-size: 10px; color: #fff;} 
div.loginForm label input {width: 80px; background: #ebebeb; border: 1px solid #bbbbbb; font-size: 11px;  height: 14px; padding: 2px;}
div.loginForm label span, div.loginForm span.submit {display: block; margin-right: 5px; margin-bottom: 2px;}
div.loginForm label, div.loginForm span.submit {float: left;}
div.loginForm span.failed {display: block; float: left; color: #58415d; margin-left: 5px; margin-top: 18px; }
div.loginForm input.button {margin-top: 13px; border: 1px outset #cccccc; color: #666666; background: #f0f0f0; }

div.loginInfo {margin: 0px; padding: 15px 0px 0px 21px; }
div.loginInfo span.spacer {color: #bbbbbb; padding: 0px 4px;}
div.loginInfo p {margin: 0px; color: #fff; }
div.loginInfo a:link, div.loginInfo a:visited {font-weight: bold; color: #fff; text-decoration: none;}
div.loginInfo a:hover {color: #fff; text-decoration: underline;}

/* body styles */

p,ul,ol,dl,address {line-height: 1.5em; margin: 1.7em 0em;}
h1 {font-family: arial, verdana, sans-serif; font-size: 18px; color: #58415d; font-weight: normal; }
h1 span.date {display: block; margin-top: 2px; color: #a1a1a1; font-size: 10px;}
h1 {margin-top: 10px;}
p + h1 {margin: 1.1em 0em 0.8em 0em;}

h2,h3,h4,h5,h6 {font-size: 11px; font-weight: bold;}

/* forms */

form { margin: 0; }
table.form td p, table.form th p {margin: 0px; padding: 0px; font-size: 11px;}
table.form td.label, table.form td.element, table.form th {padding: 6px; vertical-align: top;}
table.form td.label {white-space: nowrap; font-weight: bold; text-align: right;}
form label { vertical-align: top; }
input, select {font-size: 12px;}
span.required {font-weight: bold; color: #58415d; }
.error { color: #58415d; font-weight: bold; }
input.button {background: #fafafa; font-size: 12px; border: 1px outset #777777; color: #666666; padding: 2px 4px;}
input.save {font-weight: bold;}


/* store locator */

table.stores {}
table.stores th, table.stores td {vertical-align: top; padding: 2px 5px;}
table.stores th p, table.stores td p {padding: 0px; margin: 0px;}
table.stores th {text-align: right;}
table.stores p { font-size: 11px; }	

ul.countrySelector {list-style: none; margin: 0px 0px 1em 0px; padding: 0px; position: relative;}
ul.countrySelector li {display: block; width: 120px; float: left; text-align: center; padding: 2px; background: #f5f5f5; margin: 0px 2px 2px 0px; border: 1px solid #f7f7f7;}
ul.countrySelector li a {color: #7f7f7f; text-decoration: none; }
ul.countrySelector li a:hover {color: #555555;}
ul.countrySelector li.active {color: #58415d; background: #ffffff; border: 1px solid #f7f7f7;}
h1.country {clear: left; padding-top: 1em;}

/* folders */


/* extra tricks */


/* IE-fixes here  \*/
* html div.content {height: 292px;}
* html div.loginForm input.button {margin-top: 15px; height: 19px; padding: 0px 2px; font-size: 11px;}
* html div#c1right div.text, * html div#c1left div.text {height: 292px;}
/* end fix */