@import "stryde.css";
/* HTML5 ✰ Boilerplate
 * ==|== normalize ==========================================================
 */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

a { color: #06e; }
a:visited { color: #06e; }
a:hover { color: #09e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }
table button, table input { *overflow: auto; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }


/* ==|== primary styles =====================================================
   Author: Jarkko Tuomala - komee
   ========================================================================== */

.tarocco { font-family:"Tarocco Bold", Garamond, 'Times New Roman', Times, serif; font-weight:bold; font-style:normal; }
.abril { font-family:"Abril Text Bold", Georgia, 'Times New Roman', Times, serif; font-size-adjust:0.5; font-weight:bold; font-style:normal; }
.barber { font-family:"Barber 2", 'Lucida Calligraphy', 'Apple Chancery', cursive; font-size-adjust:0.68; font-weight:normal; font-style:normal; }
.familiar { font-family:"Familiar Pro Regular", 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight:normal; font-style:normal; }
.line44 { font-family:"Line44 Outline", sans-serif; font-weight:300; font-style:normal; }
.kirimomi { font-family:"Kirimomi Geometric Sans Light", Arial, sans-serif; font-weight:200; font-style:normal; }
.calluna { font-family:"Calluna Sans Italic", 'Lucida Sans Unicode', 'Lucida Sans', Verdana, sans-serif; font-size-adjust:0.46; font-weight:normal; font-style:italic; }
.kyrial { font-family:"Kyrial Display Pro Black", sans-serif; font-size-adjust:0.48; font-weight:800; font-style:normal; }
.rubrik { font-family:"Rubrik Medium", Verdana, sans-serif; font-weight:500; font-style:normal; }

a span{font-size:2em;vertical-align:-3px;padding:0 2px;line-height:0.5}

p.info{color:#193717;}
body{background:url("../img/bg_lightgrey.jpg") repeat 0 0 grey;}
#container{position:relative;}
#main,#container > header{width:90%;margin:0 auto;max-width:1280px;position:relative;}
#container > header h1{background:url("../img/logo-pp-85x115.png") no-repeat 15px 15px transparent;padding:40px 120px;margin:0;text-transform:uppercase}
#container > header h2{position:absolute;top:545px;left:30px;z-index:1000;color:#fff;}
#container > header h3{font-size:1.2em;color:#193717;position:relative;top:-25px;left:122px;margin:0;width:350px}
#container > header p{font-size:1.2em;font-family:"StRydeRegular", "Rubrik Medium", Verdana, sans-serif; font-weight:500; font-style:normal;position:absolute;top:90px;right:0}
h1 {font-family:"StRydeRegular", "Rubrik Medium", Verdana, sans-serif; font-weight:500; font-style:normal;font-size:3.4em;margin:20px 0 10px;color:#193717}
h2{font-size:2.2em;color:#193717;font-family:"StRydeRegular", Verdana, sans-serif;}
h3{font-family:"StRydeRegular", Verdana, sans-serif;font-size:1.231em;}
h4{margin:20px 0 10px 0;color:#397c12;text-shadow:#111 0px -2px 3px;font-size:1.2em;font-family:"Barber 2", 'Lucida Calligraphy', 'Apple Chancery', cursive; font-size-adjust:0.68; font-weight:normal; font-style:normal;}
h5{font-family:"StRydeRegular", Verdana, sans-serif;font-size:1em;margin:0}
aside{font-family:"Rubrik Medium", Verdana, sans-serif; font-weight:500; font-style:normal;}
p{font-size:1.1em;font-family: "Familiar Pro Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:normal; font-style:normal;}
li{background:url("../img/icon_correct_2.png") no-repeat 0 50% transparent;padding:0 0 0 32px;margin:8px 0;list-style:none}

#bambuparketti{background: url("../img/valmis_lattia_2.jpg") no-repeat 50% 70% transparent;border:5px solid #193717;-moz-border-radius:5px;height:460px;overflow:hidden;box-shadow:0 2px 4px rgba(68, 68, 68, 0.6), 2px 6px 10px rgba(68, 68, 68, 0.3)}
#bambuparketti aside{background: rgba(0,0,0,0.6);width:19%;min-width:175px;height:100%;margin:0;padding:5px 2%;float:right;color:#fff;font-size:1.2em}
#bambuparketti ul{margin:0;padding:0}
#main{position:relative}
#asiakaspalaute{position:absolute;top:0px;left:10px;width:100%;border-top:470px solid transparent;background:transparent;}

blockquote{margin:15px 0;padding:10px 0 0 10px; background:url("../img/bg_quote.png") no-repeat 0 8px transparent;position:relative;overflow:hidden;height:140px;}
blockquote > p:first-child:first-line{font-size:1.2em;line-height:1}
blockquote > p:first-child:first-letter{font-size:1.2em;}
blockquote.roller p{position:absolute;top:-195px;width:95%;background:transparent;border-top:200px solid transparent;}
blockquote.roller a{text-decoration:none;position:absolute;bottom:-20px;left:0px;}
blockquote.roller p:target, #asiakaspalaute blockquote p.showParagraph{opacity:1;top:-195px;left:30px;position:absolute;}
blockquote.roller p:not(:target){opacity:0;top:inherit;left:100%;position:absolute}
cite{position: absolute;bottom:5px;left:30px;}
blockquote.simple > p{margin:10px 0 0 20px;}

#uutuus{background: url("../img/uutuus_bambu.png") no-repeat 50% 59% transparent;margin:185px 0 20px 0;clear:both;border:5px solid #193717;-moz-border-radius:5px;height:300px;position:relative;overflow:hidden;box-shadow:0 2px 4px rgba(68, 68, 68, 0.6), 2px 6px 10px rgba(68, 68, 68, 0.3)}
#uutuus h2{position:relative;z-index:2;background:rgba(22,55,23,0.6);color:#fff;padding:15px 0 10px 5px;top:-16px;left:0;font-size:1.462em;text-align:left;line-height:1.35;width:100%}

#badget{position:absolute;top:150px;right:10px;z-index:1000}
#badget p{position:absolute;top:0px;left:23px;width:90px;font-size:1.7em;line-height:1.2;text-align:center;color:#333;-moz-transform:rotate(7deg);-webkit-transform:rotate(7deg)}
#badget span{font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;font-style: italic;font-weight: normal;font-size:1.2em}

#parketit{clear:both;overflow:hidden}
#parketit div{width:22.4%;height:240px;float:left;overflow:hidden;padding:0;border:2px solid #193717;background: #fff;margin:5px 1% 20px 1%;position:relative;box-shadow:0 2px 4px rgba(68, 68, 68, 0.6), 2px 6px 10px rgba(68, 68, 68, 0.3)}
#parketit div img{width:96%;height:96%;background: url("../img/bambubanneri.jpg") no-repeat 50% 50% transparent;position:absolute;top:2%;left:2%;}
#parketit div:hover{background-color:#193717;}
#parketit div h2{position:relative;z-index:2;background:rgba(22,55,23,0.6);color:#fff;padding:10px 0 0 0;top:-16px;left:0;font-size:1.462em;text-align:center;line-height:1.35}
#parketit p{position:absolute;bottom:0;left:0;margin:0;width:100%}

#yritys{margin:10px 0;overflow:visible;float:left}
#yritys > div{float:left;width:36%;margin-right:1%}
#yritys > div+div{float:left;width:60%;margin-left:2%;position:relative}
#yritys h3{margin:2px 0 8px 0} 
#yritys p{font-size:1em;text-align:justify;margin:0}
#twitter_div{position:absolute;top:15px;left:80px;z-index:10100;}
#twitter_div li{padding:5px 0 5px 32px}
a[rel=author]{display:block;position:absolute;top:88px;left:120px;z-index:1000}
a.foursquare{display:block;position:absolute;top:87px;left:160px;z-index:1000}
#___plusone_0{display:block;position:absolute;top:88px;left:202px;z-index:1000}

footer{clear:both;overflow:hidden;border-top:5px solid #193717;background:#282828;color:#fff;margin-top:20px;box-shadow:0 -4px 2px rgba(68, 68, 68, 0.2), 0px -10px 10px rgba(68, 68, 68, 0.1);width:100%}
footer section{padding:20px;max-width:1240px}
footer a{color:#fff;font-size:0.907em}
footer h5{color:#fff}
footer section > div{width:45%;margin:0 2%;float:left}
footer form label{display:none}
footer form{margin:0}
footer fieldset{margin:5px 0;padding:0}
footer input{padding:8px 4px;color:#636366;width:200px}
footer form button{float:none;margin:0}
footer form+p{clear:both;font-size:0.95em}

p.button a,button{background:url("../img/btn_bamboo.gif") repeat-x 0 -17px #fff;text-transform:uppercase;text-decoration:none;color:#fff;font-size:.9em;text-align:center;border:none;box-shadow:0 2px 4px rgba(99,99,102,0.5);-moz-box-shadow:0 2px 4px rgba(99,99,102,0.5);-webkit-box-shadow:0 2px 4px rgba(99,99,102,0.5);padding:10px 0px;width:100%;display:inline-block}
p.button a:hover,button:hover{background-position:0 0;-moz-transform:scale(1.1);-webkit-transform:scale(1.1);-o-transform:scale(1.1)}
button{font-size:1.1em;}
button::-moz-focus-inner,p.button a::-moz-focus-inner{border:0;padding:0}

.copy{font-size:0.907em}

#parketit-esittely{margin:40px auto 20px auto;width:690px}
#parketit-esittely .fluxslider{border:5px solid #193717;-moz-border-radius:5px;height:460px;overflow:hidden;box-shadow:0 2px 4px rgba(68, 68, 68, 0.6), 2px 6px 10px rgba(68, 68, 68, 0.3);-moz-transform:rotate(5deg);-webkit-transform:rotate(5deg);transform:rotate(5deg)}
#parketit-esittely h2{text-align:right;font-size:1.8em}
#parketit-esittely h2 a{color:#193717}

header a{text-decoration:none}
.currency{display:none}
.hproduct{position:relative;margin:0 50px 20px 0;overflow:visible;width:450px;float:left}
.hproduct section{position:absolute;top:240px;left:5px;width:450px;height:75px;border-top:2px solid rgb(25,55,23);border-bottom:2px solid rgb(25,55,23);background:rgba(25,55,23,0.7);color:#fff;box-shadow:0px 6px 14px rgba(68, 68, 68, 0.6), 0px 16px 70px rgba(68, 68, 68, 0.8)}
.hproduct section p.description{margin:10px 0 0 85px}
.hproduct p[itemprop="offers"]{border-radius:50%;background:rgba(25,55,23,1);border:2px solid rgba(255,255,255,0.9);width:100px;height:100px;overflow:hidden;position:absolute;top:10px;left:-30px;margin:0}
.hproduct p[itemprop="offers"] strong{position:absolute;top:35px;left:10px;font-size:1.6em;-moz-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);transform:rotate(-30deg)}
.hproduct p[itemprop="offers"] del{position:absolute;top:60px;left:40px;font-size:1em;-moz-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);transform:rotate(-30deg)}
.hproduct .taso p[itemprop="offers"] strong {left:0;top:35px}
.hproduct .taso p[itemprop="offers"] del {left:30px;top:60px}
.hproduct header{width:460px;}
.hproduct header h1{margin:5px 0 0 0;font-size:1.6em;font-weight:bold;text-shadow:0px 0px 1px rgba(255,255,255,0.8)}
.hproduct header h2{margin:0 0 2px 0;font-size:1.2em;font-weight:normal;text-shadow:0px 0px 1px rgba(255,255,255,0.8)}
.hproduct img{border:5px solid #193717;-moz-border-radius:5px;border-radius:5px;box-shadow:0 2px 4px rgba(68, 68, 68, 0.6), 2px 6px 10px rgba(68, 68, 68, 0.3)}
.hproduct figcaption{margin:10px 0}
.hproduct p.button{position:absolute;bottom:41px;left:5px;width:450px;margin:0;padding:0}
.hproduct p.button a{box-shadow:none}
.hproduct p.button a:hover{-moz-transform:none;-webkit-transform:none;transform:none}
.hproduct .tumma p[itemprop="offers"]{background:url("../../img/bambuparketti-tumma-450x450.png") no-repeat 100% 100%}
.hproduct .vaalea p[itemprop="offers"]{background:url("../../img/bambuparketti-vaalea-450x450.png") no-repeat 100% 100%}
.hproduct .tumma2 p[itemprop="offers"]{background:url("../../img/bambuparketti-tumma2-450x450.png") no-repeat 100% 100%}
.hproduct .vaalea2 p[itemprop="offers"]{background:url("../../img/bambuparketti-vaalea2-450x450.png") no-repeat 100% 100%}
.hproduct .vaalea3 p[itemprop="offers"]{background:url("../../img/bambuparketti-vaalea3-450x450.png") no-repeat 0% 95%}
.hproduct .vaalea4 p[itemprop="offers"]{background:url("../../img/bambuparketti-vaalea4-450x450.png") no-repeat 100% 95%}
.hproduct .tosikova p[itemprop="offers"]{background:url("../../img/bambuparketti-vaalea-tosikova-450x450.png") no-repeat 100% 100%}
.hproduct .metsa p[itemprop="offers"]{background:url("../../img/bambuparketti-bambu-450x450.png") no-repeat 100% 100%}
.hproduct .valko p[itemprop="offers"]{background:url("../../img/Valkolakattulauta.png") no-repeat 100% 100%}
.hproduct .valkolankku p[itemprop="offers"]{background:url("../../img/valkolakattu-lukkopontti.png") no-repeat 100% 100%}
.hproduct .musta p[itemprop="offers"]{background:url("../../img/mustatosikova.png") no-repeat 10% 10%}
.hproduct .taso p[itemprop="offers"]{background:url("../../img/bambutaso-tummapysty.png") no-repeat 10% 85%}
.hproduct fieldset{position:absolute;top:48.3%;left:-20%;padding:0 10px;font-size:2em;color:rgb(255,60,150);border-top:5px solid rgb(255,60,150);width:139%;-moz-transform:rotate(-45deg);-moz-transform-origin:center;-webkit-transform:rotate(-45deg);-webkit-transform-origin:center;transform:rotate(-45deg);transform-origin:center;text-shadow:0px 6px 14px rgba(68, 68, 68, 0.6)}
.hproduct fieldset legend{display:block;padding:0 10px;font-family:"Familiar Pro Regular","Helvetica Neue", Helvetica,Arial,sans-serif;text-transform:uppercase;text-align:right;margin-left:70%;}

.tarjous p{max-width:650px}
/* =form */
form h2 {
	font-size: 1.8em;
	font-weight: bold;
	margin: 5px 0;
	padding: 0;
	letter-spacing: -1px;
	text-transform: capitalize;
	color: #07481f;
}
form h3 {
	font-size: 1.4em;
	font-weight: bold;
	margin: 5px 0;
	padding: 5px 0 0 0;	
}
#button_area{overflow:hidden}
form button {
	margin: 10px 2px;
	cursor: pointer;
	padding: 10px 20px;
	width:auto;
	float:left;
}
form button:hover {
	-webkit-transfrom:none;-moz-transform:none;transform:none;
}
form button + p{float:left;width:auto;margin-left:40px}
form button + p a{color:#193717}
/* fieldset */
fieldset {
	border: none;
	padding: 0px;
}
fieldset legend {
	display: none;
}
fieldset p {
	padding-bottom: 5px;
}
fieldset label {
	display: block;
	font-weight: bold;
	font-size: 1.1em;
	margin: 5px 0;
}
fieldset input + label {
	display:inline;
	vertical-align:middle;
}
fieldset label.radio {
	font-weight: normal;
	display: block;
	margin: 5px;
}
fieldset label.radio input {
	margin: 0 4px 0 0;
}
fieldset textarea {
	width: 400px;
}
#content fieldset p span,
fieldset em {
	display: block;
	font-size: 0.85em;
}

/* =ie */
.ie8 p.button a, .ie8 button{zoom:1}
.ie8 #bambuparketti aside{background:rgb(0,0,0);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60)}
.ie8 #parketit div h2{background:rgb(0,0,0);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60)}
.ie8 #uutuus h2{background:rgb(255,60,150);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60)}
.ie8 .hproduct section{background:rgb(25,55,23);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70)}
.ie8 .hproduct fieldset{width:98%;left:0;top:20%}

.ie8 #uutuus{margin-top:20px}
.ie8 #asiakaspalaute{position:static;border:0}
.ie8 blockquote > p:first-child:first-line{font-size:1em;line-height:1}
.ie8 blockquote.roller{height:300px;overflow:hidden}
.ie8 blockquote.roller p{position:static;top:0;left:0;border:none}
.ie8 blockquote.roller a{display:none}
.ie8 blockquote.roller p:target, .ie8 #asiakaspalaute blockquote.roller p.showParagraph{opacity:1;position:static}
.ie8 blockquote.roller p:not(:target){opacity:1;position:static}
.ie8 cite{position:static}

/* ==|== non-semantic helper classes ======================================== */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


/* ==|== media queries ====================================================== */

@media only screen and (max-width: 480px) {
body,#container{width:100%}
.hproduct{width:100%}
#container{margin:0}
#main,#container > header,#yritys{width:100%;margin:0;overflow:hidden;}
aside li,blockquote{font-size:0.85em}
#bambuparketti{height:760px;background-position:50% 100%}
#bambuparketti aside{float:none;width:100%;margin-top:460px}
#asiakaspalaute{border-top:770px solid transparent;}
#yritys > div{float:none;width:100%;margin:0}
#yritys > div+div{float:none;width:100%;margin:20px 0;}
#parketit div{width:47%;}
header h2{left:30px;top:208px}
footer section > div{width:95%;}
.hproduct{margin:0 0 20px 0}
.hproduct p[itemprop="offers"]{left:0;width:80px;height:80px;font-size:0.85em}
.hproduct p[itemprop="offers"] strong{top:25x}
#container > header p{top:120px}
#parketit-esittely{width:94%}
}

@media only screen and (max-width: 768px) {
body,#container{width:100%}
#container{margin:0}
#main,#container > header,#yritys{width:98%;margin:0 1%;}
aside li,blockquote{font-size:0.85em}
#bambuparketti{height:760px;background-position:50% 100%}
#bambuparketti aside{float:none;width:100%;margin-top:460px}
#asiakaspalaute{border-top:770px solid transparent;}
#yritys > div{float:none;width:100%;margin:0}
#yritys > div+div{float:none;width:100%;margin:20px 0;}
#parketit div{width:47%;}
header h2{left:30px;top:208px}
.hproduct{margin:0 0 20px 0}
.hproduct p[itemprop="offers"]{left:0;width:80px;height:80px;font-size:0.85em}
.hproduct p[itemprop="offers"] strong{top:25px}
#container > header p{top:120px}
#parketit-esittely{width:94%}
}

@media only screen and (max-width: 1024px) {
*{box-sizing:border-box}
body,#container{width:100%;box-sizing:border-box;margin:0;padding:0}
#main,#container > header,#yritys{width:96%;margin:0 2%;}
.hproduct{margin:0 40px 20px 0}
.hproduct p[itemprop="offers"]{left:-20px;width:80px;height:80px;font-size:1em}
.hproduct p[itemprop="offers"] strong{top:20px;left:5px}
.hproduct p[itemprop="offers"] del{top:45px;left:25px}
#container > header p{top:110px}
#parketit-esittely{width:94%}
}


/* ==|== print styles ======================================================= */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}