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

/*
 * Offsetpaino L. Tuovinen Ky
 * 2011
 *
 * style.css
 *
 * 
 */

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

/* Reset */

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

img { border: 0; }
    
ol, ul, dl { list-style: none; }

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

/* HTML5 */

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, mark, time, small {  
	display:block;
}

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

/* Global */

body {
	background: #202020;
	color: #202020;
	font: 12px Arial, Helvetica, sans-serif;
}

p {
	line-height: 18px;
}
  
a {
	color: #B13227;
	text-decoration: none;
}

h1 span {
	display: block;
	font-size: 70px;
	line-height: 30px;
}

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

/* Wrap */

div.wrap {
	margin: 0 auto;
	width: 943px;
}

div.photos-wrap { background: #F1FAFD url(img/ui/bg_banner.jpg) top center no-repeat; }

div.quicklink-wrap { background: #fff; padding: 0 0 0 3px; }

div.content-wrap { background: #fff; }

div.content { padding: 0 0 0 45px; }

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

/* Header */

header {
	background: url(img/ui/sprites.png) 0 -200px no-repeat;
	height: 67px;
	padding: 22px 0 0 24px;
	position: relative;
}

header h1 a {
	background: url(img/ui/sprites.png) no-repeat;
	display: block;
	height: 49px;
	overflow: hidden;
	text-indent: -9999px;
	width: 97px;
}

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

/* Main Navigation */

header ul {
	font-size: 13px;
	/*left: 178px;*/
	line-height: 51px;
	position: absolute;
	text-transform: uppercase;
	/*top: 22px;*/
	right: 20px;
	top: 0;
}

header li {
	float: left;
}

header li a {
	background: url(img/ui/sprites.png) top right no-repeat;
	color: #fff;
	display: block;
	padding: 22px 9px 0 8px;
}

header li a:hover { color: #B13227; }

header li:last-child a { background: none; }

header li.selected { background: url(img/ui/naviselected.png) top center no-repeat; }

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

/* Home page */

section#home-photos {
	height: 419px;
	position: relative;
}

div#photo-mask {
	height: 419px;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 943px;
}

div#photo-content {
	left: 0;
	position: absolute;
	top: 0;
	width: 99999px;
}

div.photo-img {
	float: left;
	width: 943px;
}

section.home-quicklink {
	border-right: 1px #B7B7B7 dashed;
	float: left;
	margin: 30px 00;
	padding: 0 20px 0 32px;
	width: 260px;
}

section.home-quicklink:first-child { padding-left: 20px; }

section.last-quicklink { border: none; }

section.home-quicklink h1 { font-size: 20px; margin: 0 0 8px 0; }

section.home-quicklink h1 img { margin: 0 0 0 10px; }

section.home-quicklink a { color: #202020; }

a#prev {
	background: url(img/ui/sprites.png) -167px 0 no-repeat;
	display: block;
	height: 36px;
	left: 22px;
	overflow: hidden;
	position: absolute;
	text-indent: -9999px;
	top: 364px;
	width: 36px;
}

a#next {
	background: url(img/ui/sprites.png) -213px 0 no-repeat;
	display: block;
	height: 36px;
	left: 885px;
	overflow: hidden;
	position: absolute;
	text-indent: -9999px;
	top: 364px;
	width: 36px;
}

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

/* Content area */

div#main-photo { margin-bottom: 20px; }

section#content {
	border-right: 1px #B7B7B7 dotted;
	float: left;
	margin-bottom: 30px;
	padding: 0 25px 0 0;
	width: 575px;
}

aside {
	float: left;
	padding: 0 0 0 17px;
	width: 273px;
}

section#content-1col {
	padding: 20px 25px 0 0;
	width: 865px;
}

section#content-tarjous {
	float: left;
	padding: 20px 0 0 0;
	width: 615px;
}

section#content h1, section#content-1col h1, section#content-tarjous h1 {
	font-size: 36px;
	margin-bottom: 10px;
	text-transform: uppercase;
}

section#content p, section#content-1col p {
	margin-bottom: 20px;
}

aside li { 
	font-weight: bold;
	margin-bottom:  5px; 
	text-transform: uppercase;
}

aside ul a {
	color: #202020;
}

aside ul a:hover, aside ul li.selected a { color: #B13227; }

aside h2 {
	font-size: 16px;
	text-transform: uppercase;
}

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

/* Footer */

footer {
	/*background: url(img/ui/sprites.png) 0 -299px no-repeat;	*/
	color: #fff;
	clear: left;
	font-size: 11px;
	height: 250px;
	margin: 0 auto 30px auto;
	padding: 4px 0 0 20px;
	position: relative;
	width: 923px;
}

small {
	font-size: 11px;
}

small span {
	background: url(img/ui/bg_foodot.png) center right no-repeat;
	display: block;
	float: left;
	height: 37px;
	line-height: 37px;
	padding: 0 10px 0 7px;
}

small span:first-child { padding-left: 4px;}
small span:last-child { background: none;}

a#foo-ymparisto {
	background: url(img/ui/bg_fooymparisto.png) no-repeat;
	display: block;
	float: left;
	height: 66px;
	overflow: hidden;
	text-indent: -9999px;
	width: 247px;
}

div#foo-cont {
	/*background: url(img/ui/sprites.png) 0 -299px no-repeat;*/
	background: url(img/ui/kotka.png) 15px 13px no-repeat;
	/*float:  left;*/
	left: 385px;
	padding: 0 0 0 65px;
	position: absolute;
	top: 5px;
	width: 590px;
}
/*div#foo-top {
	float: left;
}*/

div#foo-bot {
	clear: left;
	color: #a2a2a2;
	float: left;
	padding: 0 0 0 4px;
	width: 300px;
}

div#foo-bot a { background: url(img/ui/bg_foodot.png) center left no-repeat; color: #a2a2a2; margin: 0 0 0 5px; padding: 0 0 0 10px; }

div#foo-facebook {
	background: url(img/ui/sprites.png) 12px -58px no-repeat;	
	float: right;
	height: 42px;
	line-height: 42px;
	margin: -15px 0 0 0;
	padding: 0 0 0 37px;
	width: 185px;
}

div#foo-facebook span {
	background: url(img/ui/sprites.png) 7px -93px no-repeat;
	display: block;
	float: right;
	height: 18px;
	line-height: 18px;
	padding: 12px 0 0 27px;
	width: 40px;
}

div#foo-facebook a { color: #fff; }

/*div#ymparistomerkki {
	position: absolute;
	right: 25px;
	top: 6px;
}

div#ymparistomerkki a {
	background: url(img/ui/sprites.png) -107px 0 no-repeat;
	display: block;
	height: 51px;
	overflow: hidden;
	text-indent: -9999px;
	width: 50px;
}*/

div#laatu {
	left: 276px;
	position: absolute;
	top: 10px;
}

img#suomenvahvimmat {
	left: 335px;
	position: absolute;
	top: 10px;
}


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

/* Tarjouspyynt? */

div.important { display: none; }

div#foo-wrap form {
	margin: 0 auto;
	position: relative;
	width: 900px;
}

div#foo-wrap {
	background: url(img/ui/bg_footerform.jpg) top center no-repeat;
}

div#foo-wrap h1 {
	color: #fff;
	margin-bottom: 20px;
	text-transform: uppercase;
}

div#foo-wrap label {
	color: #fff;
	display: block;
}

section.form_left {
	float: left;
	padding: 30px 0 20px 0;
	width: 475px;
}

section.form_right {
	float: left;
	padding: 30px 0;
	width: 422px;
}

div#foo-wrap form input, div#foo-wrap form select {
	margin-bottom: 5px;
	width: 420px;
}

div#foo-wrap form input.inputbtn {
	font-size: 14px;
	width: auto;
}

img#nuolialas {
	left: 0;
	position: absolute;
	top: -20px;
}

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

/* Yhteystiedot */

div#contact-wrap {
	color: #fff;
	margin: 0 auto;
	width: 900px;
}

div#contact-wrap table {
	border-collapse: collapse;
}

div#contact-wrap td {
	padding: 0 0 20px 0;
	vertical-align: top;
	width: 158px;
}

div#contact-wrap td.img {
	width: 76px;
}

div#contact-wrap h2 {
	font-size: 16px;
	margin-bottom: 10px;
}

div#contact-wrap h3 {
	font-size: 12px;
	text-transform: uppercase;
}

div#googlemap {
	float: left;
	margin-right: 14px;
	width: 280px;
}

div#yht-kuva {
	float: left;
	width: 281px;
}

p.yht-oso {
	background: url(img/ui/sprites.png) 0 -380px no-repeat;
	line-height: 29px;
	margin: 20px 0 4px 0;
	padding-left: 38px;
	text-transform: uppercase;
}

p.yht-puh {
	background: url(img/ui/sprites.png) 0 -411px no-repeat;
	line-height: 29px;
	margin-bottom: 4px;
	padding-left: 38px;
	text-transform: uppercase;
}

p.yht-fax {
	background: url(img/ui/sprites.png) 0 -442px no-repeat;
	line-height: 29px;
	margin-bottom: 4px;
	padding-left: 38px;
	text-transform: uppercase;
}

p.yht-ema {
	background: url(img/ui/sprites.png) 0 -473px no-repeat;
	line-height: 29px;
	margin-bottom: 4px;
	padding-left: 38px;
	text-transform: uppercase;
}

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

/* Aineisto-ohje */

div.foo-content-left {
	float: left;
	padding: 30px 115px 0 0;
	width: 595px;
}

div.foo-content-right {
	float: left;
	padding: 90px 0 0 0;
	width: 110px;
}

div.foo-content-left h1 {
	margin-bottom: 0 !important;
}

div.foo-content-left p {
	margin-bottom: 10px;
}

table.aineisto {
	width: 580px;
}

table.aineisto th {
	text-transform: uppercase;
}

/*table.aineisto td {
	border-style: outset;
}*/

div#contact-wrap table.aineisto td, table.aineisto th {
	border: 1px #343434 solid;
	padding: 5px;
	text-align: left;
}

a.profilelink {
	background: url(img/ui/bg_profilelink.jpg) no-repeat;
	color: #fff;
	padding-left: 20px;
	text-transform: uppercase;
}

table.aineisto span {
	color: #a9a9a9;
}

div.ftp a {
	color: #fff;
	font-weight: bold;
	text-decoration: underline;
}

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

/* Ajankohtaista */

article {
	border-bottom: 1px #B7B7B7 dotted;	
	padding: 10px 0 0 0;
}

article h1 {
	font-size: 20px !important;
	margin-bottom: 0 !important;
	text-transform: none !important;
}

article h1 a {
	color: #202020;
}

article p {

}

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

/* Misc */

div.clear { clear: both; height: 1px; }

div.message {
	background: #ccc;
	border: 1px #D6D6D6 solid;
	display: none;
	font-style: italic;
	margin: 10px 0 0 0;
	padding: 10px 20px;
}

a.greenlink {
	background: url(img/ui/bg_greenlink.jpg) no-repeat;
	color: #009761;
	font-weight: bold;
	display: block;
	height: 14px;
	line-height: 14px;
	padding-left: 12px;
	text-transform: uppercase;
}

a.blacklink {
	background: url(img/ui/bg_greenlink.jpg) no-repeat;
	color: #202020;
	font-weight: bold;
	display: block;
	height: 14px;
	line-height: 14px;
	padding-left: 12px;
	text-transform: uppercase;
}