/* HTML5 Boilerplate CSS: h5bp.com/css
********************/

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%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { color: #222; font-family: sans-serif; }
body { margin: 0; font-size: 1em; line-height: 1.4; }

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

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
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; margin: 1em 0; padding: 0; height: 1px; border: 0; border-top: 1px solid #ccc; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-weight: bold; font-style: italic; }
pre, code, kbd, samp { font-size: 1em; font-family: monospace, serif; _font-family: 'courier new', monospace; }
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 { position: relative; vertical-align: baseline; font-size: 75%; line-height: 0; }
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 { margin: 0; padding: 0; list-style: none; list-style-image: none; }

img { border: 0; vertical-align: middle; -ms-interpolation-mode: bicubic; }

svg:not(:root) { overflow: hidden; }

figure { margin: 0; }

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

table { border-spacing: 0; border-collapse: collapse; }
td { vertical-align: top; }
.clear { clear: both; }
.chromeframe { margin: 0.2em 0; padding: 0.2em 0; background: #ccc; color: black; }

/* Non-Semantic Helper Classes
********************/

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

/* Print Styles
********************/
 
@media print {
  * { background: transparent !important; box-shadow:none !important; color: black !important; text-shadow: none !important; -ms-filter: none !important; filter:none !important; } /* Black prints faster: h5bp.com/s */
  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: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  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; }
}

/* Notifications
*******************/
h3.success, h3.notice, h3.error { margin: 0 0 15px 0; padding: 8px 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 2px 3px rgba(0,0,0,0.2); box-shadow: 0 2px 3px rgba(0,0,0,0.2); text-transform: none; letter-spacing: 0; }
h3.success { border: 1px solid #9fc36c; background: #fffbe5; background: -moz-linear-gradient(center top, #d2f5d9,#aadfb4) #e5a713; }
h3.notice { border: 1px solid #e8deb2; background: #fffbe5; background: -moz-linear-gradient(center top, #fffbe5,#fff5c4) #e5a713; }
h3.error { border: 1px solid #ffbebe; background: #ffeaea; background: -moz-linear-gradient(center top, #ffeaea,#ffd1d1) #e5a713; }
.message { position: relative; bottom: 0; padding: 10px 0; width: 98%; background: rgba(0,0,0,0.8); color: #000; text-align: center; left; 0; }

.ajax-message { display: none;  margin: 0 0 13px 0; padding: 13px 13px 13px 52px; border: solid 1px #BD8; left no-repeat #EFA;}
.ajax-message { position: fixed; bottom: 0; padding: 10px 0; width: 100%; background: rgba(0,0,0,0.8); color: #fff; text-align: center; left; 0; }

/* Float fix
*****************/
.container:before, .container:after { display: block; overflow: hidden; height: 0; content: "."; }
.container:after {clear: both;}
.container {zoom: 1;} /* IE < 8 */

@import "Lato/stylesheet.css";


/* Default Layout
*****************/
body { background: #000; font-size: 14px; font-family: "LatoRegular", Arial, sans-serif; }
.page { background: url(../../../../uploads/images/etusivu-slider/tausta-1.jpg) no-repeat center -200px; }
h2 { color: rgb(200,0,0); } div[role=main] h2 { margin-top: 0; }
h3 { color: rgb(200,0,0); font: normal 20px/24px "LatoBold"; }
h4 { color: rgb(200,0,0); font: normal 14px/20px "LatoBold"; }
a, a:visited { color: rgb(200,0,0); text-decoration: none; }

/* =Header
*****************/
header[role=banner] { position: relative; z-index: 20; }
header .content { margin: 0 auto; padding: 10px 0 0; width: 980px; height: 100px; }
header h1 { float: left; margin: 0; padding: 0; width: 810px; color: #fff; font: normal 20px/30px "LatoItalic"; font-size: 16px; }
header .logo { float: right; width: 160px; height: 30px; text-align: right; }

/* =Main Content
*****************/
h1 { margin: 10px auto 30px; padding: 0 480px 0 0; width: 500px; color: #fff; text-shadow: 0 3px 5px rgba(0,0,0,1); font: normal 38px/48px "LatoBold"; }
div[role=main] { position: relative; z-index: 100; padding: 20px 0; background: #fff; }
div[role=main] .content, div[role=main] section  { overflow: hidden; margin: 0 auto; width: 980px; background: #fff; }
div[role=main] .highlights { float: left; margin: 0 40px 0 0; width: 560px; position: relative; }
div[role=main] .help { float: left; width: 360px; }

.home-special { height: 300px; overflow: hidden; width: 560px; margin: 0; padding: 0; position: relative; list-style: none; } .home-special li { margin: 0; padding: 0; }
.home-special a { color: #333; }
.home-special a h4 { color: rgb(200,0,0); font: normal 14px/20px "LatoBold";}
.home-special .item { position: absolute; top: 0; left: 0; width: 560px; display: none; }
.home-special .item .info { float: left; width: 240px; margin: 0 40px 0 0; }
.home-special .item .image { float: left; width: 260px; }
.home-special .item .image img { width: 260px; height: auto; }

.product-nav { position: absolute; top: 0; right: 0; width: 100px; text-align: right; }
.product-nav li { display: inline-block; height: 14px; line-height: 18px; font-size: 18px; padding: 4px 0; }
.product-nav .prev, .product-nav .next { width: 14px; background-repeat: no-repeat; }
.product-nav .prev { background-image: url(../img/arrow-red-left.png); }
.product-nav .next { background-image: url(../img/arrow-red-right.png); }

.columns > section > div { float: left; padding: 0 20px; width: 400px; border-right: 1px dotted #ccc; }
.columns > section > div:last-of-type { border: none; }

/* Page:Home:Slider
********************/	
#background-container { position: absolute; top: 0; right: 0; left: 0; z-index: -1; height: 550px; }
.home #background-container { top: 100px; }
#background-container span { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: center top; background-repeat: no-repeat; }
#background-container span[data-background="1"] { background-image: url(../../../../uploads/images/etusivu-slider/tausta-1.jpg); }
#background-container span[data-background="2"] { background-image: url(../../../../uploads/images/etusivu-slider/tausta-2.jpg); }
#background-container span[data-background="3"] { background-image: url(../../../../uploads/images/etusivu-slider/tausta-3.jpg); }
#background-container span[data-background="4"] { background-image: url(../../../../uploads/images/etusivu-slider/tausta-4.jpg); }
#background-container span[data-background="5"] { background-image: url(../../../../uploads/images/etusivu-slider/tausta-5.jpg); }

ul#slides { position: relative; margin: 0 auto; padding: 0; width: 980px; height: 100px; list-style: none; }
ul#slides li { position: absolute; width: 100%; z-index: -1; }
#background-container span, ul#slides li { opacity: 0; filter: alpha(opacity=0);
	-webkit-transition: opacity 750ms cubic-bezier(0.25, 0, 0.25, 1);
	-moz-transition: opacity 750ms cubic-bezier(0.25, 0, 0.25, 1);
	-ms-transition: opacity 750ms cubic-bezier(0.25, 0, 0.25, 1);
	-o-transition: opacity 750ms cubic-bezier(0.25, 0, 0.25, 1);
	transition: opacity 750ms cubic-bezier(0.25, 0, 0.25, 1); }
ul#slides li {
	-webkit-transition: opacity 250ms cubic-bezier(0.25, 0, 0.25, 1);
	-moz-transition: opacity 250ms cubic-bezier(0.25, 0, 0.25, 1);
	-ms-transition: opacity 250ms cubic-bezier(0.25, 0, 0.25, 1);
	-o-transition: opacity 250ms cubic-bezier(0.25, 0, 0.25, 1);
	transition: opacity 250ms cubic-bezier(0.25, 0, 0.25, 1); }
#background-container span.current, ul#slides li.current { opacity: 1; filter: alpha(opacity=100); z-index: 1; }
ul#slides li * { opacity: 0; filter: alpha(opacity=0); }
ul#slides li.current * { opacity: 1; filter: alpha(opacity=100); z-index: 1; }
ul#slides li a { color: #fff; }

.slider { position: relative; width: 100%; height: 600px; }
.slider h1 { margin: 100px 400px 0 0; padding: 0; width: auto; width: auto; color: #fff; text-shadow: 0 3px 5px rgba(0,0,0,1); font: normal 48px/58px "LatoBold";}
.slider p { position: absolute; top: 290px; display: block; padding: 10px 15px; background: rgb(200,10,20); color: #fff; font-size: 24px !important; font-family: 'LatoBold', Arial, sans-serif; line-height: 1.3; border-radius: 10px; width: 130px; text-align: center; }
.slider #slide-1 p { left: 5px; }
.slider #slide-2 p { left: 210px; }
.slider #slide-3 p { left: 410px; }
.slider #slide-4 p { left: 610px; }
.slider #slide-5 p { left: 815px; }

.slider-control-wrap { position: absolute; bottom: 0; margin: 0; height: 160px; width: 100%; background: rgb(231,7,20); }
ul.slider-control { margin: 0 auto; padding: 20px 0; width: 1020px; background: rgb(231,7,20); text-align:center; text-transform: uppercase; font-size: 13px; }
.slider-control li { display: inline-block; margin: -40px 0 0; padding: 40px 20px 0; width: 160px; height: 130px; color: rgba(255,255,255,0.5); list-style: none; cursor: pointer; }
.slider-control li .slide-category { overflow: hidden; border-radius: 5px;  }
.slider-control li.current { background: url(../img/slide-current.png) no-repeat center top; color: #fff; }
.slider-control li.current .slide-category { }
.slider-control h4 {color: #fff;}

a.next-slide, a.previous-slide { position: absolute; bottom: 60px; z-index: 100; display: block; overflow: hidden; width:30px; height:40px; background-repeat: no-repeat; text-indent:-9999px; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; }
a.next-slide { right: 10px; background-image: url(../img/slide-right.png); background-position: top left; } a.next-slide:hover { background-position: top right; }
a.previous-slide { left: 10px; background-image: url(../img/slide-left.png); background-position: top right; } a.previous-slide:hover { background-position: top left; }
a.next-slide:hover, a.previous-slide:hover { opacity: 0.6; }

/* =Navigation:Main
*****************/
nav.main { float: left; overflow: hidden; margin: 10px 0; padding: 0 10px; width: 960px; height: 50px; border-radius: 10px; background: rgb(200,25,30); box-shadow: 0 3px 5px rgba(0,0,0,.35); text-shadow: 0 2px 2px rgba(0,0,0,.2); font: normal 14px/50px "LatoBlack"; }
nav.main { background: rgb(216,31,41); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(216,31,41,1) 0%, rgba(187,22,31,1) 60%, rgba(193,23,32,1) 90%, rgba(143,2,34,1) 100%, rgba(156,19,26,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(216,31,41,1)), color-stop(60%,rgba(187,22,31,1)), color-stop(90%,rgba(193,23,32,1)), color-stop(100%,rgba(143,2,34,1)), color-stop(100%,rgba(156,19,26,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(216,31,41,1) 0%,rgba(187,22,31,1) 60%,rgba(193,23,32,1) 90%,rgba(143,2,34,1) 100%,rgba(156,19,26,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(216,31,41,1) 0%,rgba(187,22,31,1) 60%,rgba(193,23,32,1) 90%,rgba(143,2,34,1) 100%,rgba(156,19,26,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(216,31,41,1) 0%,rgba(187,22,31,1) 60%,rgba(193,23,32,1) 90%,rgba(143,2,34,1) 100%,rgba(156,19,26,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(216,31,41,1) 0%,rgba(187,22,31,1) 60%,rgba(193,23,32,1) 90%,rgba(143,2,34,1) 100%,rgba(156,19,26,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d81f29', endColorstr='#9c131a',GradientType=0 ); /* IE6-9 */ }
nav.main ul { float: left; width: 770px; }
nav.main li { display: inline; float: left; padding: 0 20px 0 0; text-transform: uppercase; letter-spacing: 1px; }
nav.main a { color: #fff; text-decoration: none; }
nav.main li.current { }
nav.main li#topmenu_etusivu, nav.main li#etusivu { background: url(../img/home-icon.png) no-repeat 5px center; text-indent: -9999px; }
nav.main li#topmenu_etusivu a, nav.main li#etusivu a { display: block; width: 30px;}

/* =Navigation:Sub
*****************/
nav.sub { background: rgb(200,10,20); font-size: 12px; }
nav.sub ul { margin: 0 auto; padding: 0; width: 980px; }
nav.sub li { display: inline-block; margin: 0; padding: 0; background-position: 190px center; background-repeat: no-repeat; }
nav.sub a { display: inline-block; margin: 0; padding: 20px; width: 199px; border-right: 1px solid rgba(0,0,0,.5); color: #fff;}
nav.sub a:hover, nav.sub a.menuactive, nav.sub li.current a { background: url(../img/nav-sub-current.png) no-repeat bottom center; }
nav.sub li:last-of-type a { width: 200px; border:none;}
nav.sub li#mechelin-company { background-image: url(../img/icon-company.png); }
nav.sub li#jalleenmyyjat { background-image: url(../img/icon-sales.png); }
nav.sub li#huoltopisteet { background-image: url(../img/icon-service.png); }
nav.sub li#vuokraamot { background-image: url(../img/icon-rent.png); }

/* =Header:Search
*****************/
div[role=search] { position: relative; float: right; width: 190px; }
nav input[type=search] { padding: 5px; width: 180px; height: 20px; border: none; border-radius: 5px; background: rgba(255,255,255,0.9); box-shadow: inset 0px 1px 3px rgba(0,0,0,.3); }
div[role=search] input[type=image] { position: absolute; top: 15px; right: 5px; padding: 0; background: transparent; }

div[role=search] .input.text { margin: 10px 0; } /* CakePHP fix */
div[role=search] input[type=text] { padding: 5px; width: 180px; height: 20px; border: none; border-radius: 5px; background: rgba(255,255,255,0.9); box-shadow: inset 0px 1px 3px rgba(0,0,0,.3); }

/* =Navigation:Breadcrumbs
*****************/
nav.breadcrumbs { height: 50px; background: rgb(200,10,20); }
.breadcrumbs ul { margin: 0 auto; padding: 0; width: 980px; height: 50px; overflow: hidden; font: normal 12px/50px "LatoLight"; text-shadow: 0 2px 2px rgba(0,0,0,.2); }
.breadcrumbs li { display: inline-block; padding: 0 30px 0 10px; background: url(../img/breadcrumb-div.png) no-repeat center right; color: rgb(255,255,255); }
.breadcrumbs li a { border-bottom: 1px dotted rgb(255,255,255); color: rgb(255,255,255); text-decoration: none; }

/* =Page w. Sidebar
*****************/
div[role=main] .main { float: left; width: 660px; }
.sidebar { float: left; margin: 0 0 0 40px; width: 260px; }

/* =Contact
*****************/
.contactform > div { float: left; clear: both; overflow: hidden; margin: 0 0 5px 0; }
.contactform label { float: left; margin: 0 30px 0 0; width: 140px; line-height: 20px; }
.contactform select { float: left; width: 180px; font-size: 13px; }
.contactform input[type=text] { float: left; width: 170px;} 
.contactform textarea { float: left; margin: 5px 0; width: 345px; }
.contactform .submit { float: right; width: 140px; }
.contactform .submit input { margin: 10px 0 0; padding: 5px 10px; width: 140px; border:none; border-radius: 5px; background: #000; color: #fff; text-align: center; }

/* =Footer
*****************/
footer { overflow: hidden; background: #000; } 
footer .content { margin: 0 auto; padding: 20px 0; width: 980px; color: #fff; }
footer section { float: left;}
section.address { position: relative; margin: 0 10px; width: 960px;}
section.address .logo { float: left; margin: 0 40px 0 0; width: 260px; }
section.address img { width: 260px; height: auto; }
section.address p { float: left; margin-top: 0; width: 660px; font-size: 12px; }
footer .ask-more { color: #fff; width: 150px; position: absolute; top: 0; right: 200px; font-size: 18px; }

#lean_overlay { position: fixed; z-index:100; top: 0px; left: 0px; height:100%; width:100%; background: #000; display: none; }
#modal{ display: none; width: 350px; padding: 5px 30px; background: #fff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
        box-shadow: 0px 0px 4px rgba(0,0,0,0.7); -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7); -moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);}

footer #toggle, footer #mail-toggle { position: absolute; top: 0; right: 0; color: #fff; font-size: 18px; }

section.mailinglist { display: none; margin: 0 10px 20px; padding: 0 0 20px 0; width: 960px; border-bottom: 1px solid #333; }
.mailinglist fieldset { float: left; padding: 0 40px 0 0; width: 160px; font-size: 12px; } .mailinglist fieldset.last { padding: 0; width: 140px; }
.mailinglist fieldset.col-2 { padding: 0; width: 400px; }

fieldset > label { float: left; clear: both; margin-bottom: 5px; font-size: 14px; }
.occupation div, .interests div { clear: both; clear:both; width: 100%;  }
.delivery > label { float: left; clear: both; width: 400px; }
.delivery .toggle-email, .delivery .toggle-paper { float: left; width: 200px; }

.email-inputs { float: left; width: 200px; margin-top: 10px; }
.paper-inputs { float: right; margin-top: 10px; width: 200px; }
.email-inputs label, .paper-inputs label { display: none; }
.paper-inputs div { margin-bottom: 3px; }

.postituslista input[type=text] { font-size: 12px;  }

.mailinglist .submit { float: right; width: 140px; }
.mailinglist .submit input { margin: 10px 0 0; padding: 5px 10px; width: 140px; border: 2px solid #ccc; border-radius: 5px; background: #000; color: #fff; text-align: center; }

/* =Categories
*****************/
.category { float: left; overflow: hidden; margin: 0 40px 20px 0; width: 460px; } .category { margin-right: 0px\9; width: 450px\9; height: 150px\9; }
.category:nth-of-type(2n) { margin: 0 0 20px; }
.category:nth-of-type(2n+1) { clear: left; }
.category .image { float: left; margin: 0 30px 0 0; width: 160px; }
.category .description { float: left; width: 260px; }
.category h3 { margin: 0 0 10px; font-size: 16px; }
.category p { font-size: 12px; }
.intro { overflow: hidden; margin: 0 0 20px; padding: 0 0 15px; border-bottom: 1px solid #ccc;}

/* =Products
*****************/
#productlist { margin: 20px 0 0 0; }
.item { float: left; overflow: hidden; margin: 0 40px 20px 0; width: 460px; } .item { margin-right: 20px\9; width: 460px\9;}
.item:nth-child(2n) { margin: 0 0 20px; }
.item:nth-child(2n+1) { clear: left; }
.item .image { float: left; width: 460px; overflow: hidden; }
.item .image img { width: 500px; height: auto; }
.item.detail .info { display: none; float: left; width: 260px; }
.item .info h3 { margin: 0 0 5px 0; color: #244e95; font-weight: normal; }
.item .info em { display: block; margin: 0 0 10px 0; color: #818181; }
.item .info ul { margin: 10px 20px; padding: 0; font-size: 14px;  }
.item .info li { margin: 0; padding: 0 0 3px; }
.additional-info strong { font-weight: bold; }

.item.detail .sheet-image img { width: 980px; height: auto; }

.downloads > div { float: left; margin: 0 40px 10px 0; width: 260px; } .downloads .tuotekuvat { width: 560px; }
.downloads > div:nth-child(3n+1) { clear: left; }
.downloads h4 { margin-top: 0; padding: 8px 10px 8px 45px; border-radius: 5px; background-color: rgb(200,10,20); background-repeat: no-repeat; background-position: left center; color: #fff; font-size: 16px; }
.downloads h4 a { display: block; color: #fff; }
.downloads > div.disabled h4 { border: 1px solid #ccc; background: #eee; color: #666; }

.varaosakuvat h4 { background-image: url(../img/varaosat.png); }
.kaytto-ohjeet h4 { background-image: url(../img/kayttoohjeet.png); }
.tuote-esite h4 { background-image: url(../img/tuote-esitteet.png); }
.kampanja h4 { background-image: url(../img/icon-star.png); background-position: 10px center; }

.downloads .images-videos { width: 900px; float: left; clear: both; }
.downloads .images-videos h4 { margin-right: 40px; }
.downloads .images-videos div { float: left; width: 300px; height: auto; }

.item-price { float: left; margin: 10px 0 0 0; padding: 15px; width: 120px; border: 1px solid #ccc; border-left: 0; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; background: #eee; text-align: center; }
.item-price strong { float: left; width: 130px; color: #333; font-weight: bold; font-size: 24px; }
.item-price small { float: left; margin: 3px 0 8px 0; width: 129px; color: #545c67; font-weight: bold; font-size: 11px; }

.item-price .basket { float: left; margin: 4px 0 0 0; color: #545c67; font-weight: bold; }
.item-price .basket .input1 { float: left; margin: 0; padding: 0; width: 30px; }
.item-price .basket .input1 label { display: none; }
.item-price .basket .input1 input { margin: 0; padding: 2px; width: 20px; text-align: center; }
.item-price .basket .submit { float: right; width: 90px; text-align: right; }
.item-price .basket .submit input { padding: 3px 5px; width: 80px; border: 0; -moz-border-radius: 5px; border-radius: 5px; background: #244e95; color: #fff; font-size: 11px; }

.item.detail { position: relative; width: 100%; }
.item.detail h2 { margin-bottom: 0; font-size: 32px; }
.item.detail h3.product-number { margin-top: 0; color: #333; font-size: 16px; }
.item.detail .container { float: left; width: 480px; border: none; }
.item.detail .info { float: left; padding: 0 0 10px 40px; width: 360px; }
.item.detail .image { float: left; width: 260px; }
.item.detail .specs-image { float: right; width: 260px; }

.item.detail .item-price { display: none; }


/* =Products:Specials
*****************/
#special-wrapper { float: left; margin: 10px 0 0 0; width: 680px; }
.special-wrap { position: relative; float: left; clear: both; margin: 0 10px 10px 0; width: 150px; height: 200px;  }
.special-price { position: absolute; top: 105px; right: 0; padding: 2px 4px; background: #003479; color: #fff; }
.special-wrap h3 { margin: 5px 0; }

/* Other */
.error { float: left; padding: 10px 0; }

/* Form Controls: Input Text */
input[type=text], input[type=password], textarea { padding: 3px; border: 1px solid #ccc; font-size: 14px; font-family: Lucida Grande; }
input[type=text]:focus, input[type=password]:focus, textarea:focus { border: 1px solid #666; -webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.2); -moz-box-shadow: 0 2px 10px rgba(0,0,0,0.2); box-shadow: 0 2px 10px rgba(0,0,0,0.2); }
.input1, .input2, .input3, .input4, .input5, .input6 { display: inline; float: left; margin: 0 0 0 20px; line-height: 20px; }
.input1 input, .input2 input, .input3 input, .input4 input, .input5 input, .input6 input { display: inline; float: left; margin: 2px 0 10px 0; line-height: 20px; }
.input1 label, .input2 label, .input3 label, .input4 label, .input5 label, .input6 label { display: inline; float: left; clear: both; margin: 0 0 3px 0; color: #666; line-height: 20px; }
.nolabel input { margin: 25px 0 10px 0; }
.input1 { width: 80px; } .input1 input { width: 74px; }
.input2 { width: 180px; } .input2 input { width: 174px; }
.input3 { width: 280px; } .input3 input { width: 274px; }
.input4 { width: 380px; } .input4 input { width: 374px; }
.input5 { width: 480px; } .input5 input { width: 474px; }
.input6 { width: 580px; } .input6 input { width: 574px; }
.error label { color: red; }
.error input { background: #ffcccc; color: red; }
small { color: #666; font-size: 11px; }

/* Form Controls: Textarea */
.textarea2, .textarea3, .textarea4, .textarea6 { display: inline; float: left; margin: 0 0 0 20px; line-height: 20px; }
.textarea2 textarea, .textarea3 textarea, .textarea4 textarea, .textarea6 textarea { display: inline; float: left; margin: 2px 0 10px 0; line-height: 20px; }
.textarea2 label, .textarea3 label, .textarea4 label, .textarea6 label { display: inline; float: left; clear: both; margin: 0 0 3px 0; color: #666; line-height: 20px; }
.nolabel input { margin: 25px 0 10px 0; }
.textarea2 { width: 180px; } .textarea2 textarea { width: 174px; }
.textarea3 { width: 280px; } .textarea3 textarea { width: 274px; }
.textarea4 { width: 380px; } .textarea4 textarea { width: 374px; }
.textarea6 { width: 580px; } .textarea6 textarea { width: 574px; }

/* Form controls: Select */
.select { display: inline; float: left; width: 180px; line-height: 20px; }
.select label { display: inline; float: left; clear: both; margin: 0 0 3px 0; color: #666; font-size: 12px; line-height: 20px; }

/* Form controls: Checkbox */
.check_0_6 { float: left; margin: 3px 10px 10px 0; width: 15px; line-height: 20px; }
.check2 { float: left; margin: 3px 10px 10px 0; width: 200px; line-height: 20px; }
.check4 { float: left; margin: 3px 10px 10px 0; width: 400px; line-height: 20px; }
.check6 { float: left; margin: 3px 10px 10px 0; width: 600px; line-height: 20px; }

/* Checkout Cart:Table */
#checkout { float: left; margin: 0 0 20px 0; padding: 0 0 20px 0; width: 100%; font-size: 14px; }
#checkout td { white-space: nowrap; }
#checkout th { color: rgb(50,50,50); font-weight: bold; font-size: 12px; }
#checkout .product-name { white-space: normal; }

#checkout td, #checkout th { padding: 5px 0px; min-height: 30px; border-bottom: 1px dotted #ccc; vertical-align: middle; text-align: right; }
#cart-th-left { text-align: left; }
#checkout th.product-name, #checkout td.product-name { width: 300px; text-align: left; }
#checkout th#cart-th-left { text-align: left; }
#checkout td.product-total, #checkout .product-total-leasign, #checkout td.product-price, #checkout td.product-price-leasing { text-align: right; }
#checkout td.product-quantity { text-align: center; }
#checkout td.product-quantity .input1 { float: right; padding: 0; width: 20px; height: auto; }
#checkout td.product-quantity .input1 input { float: right; margin: 3px 0 3px; width: 20px; text-align: center; font-size: 11px; }

#cart-checkout { width: 152px;	vertical-align: top; text-align: right;font-weight: bold; }
#cart-table td.product-remove { padding: 0 0 0 5px; width: 16px; }


.cart.total { float: right; padding: 10px 0 15px 0; width: 700px; color: #666; text-align: right; font-size: 14px; }
.cart.total h3 { margin: 0 0 10px 0; font-size: 16px; }
.cart.total p { margin: 0; }
.cart.total strong { font-weight: bold; font-size: 24px; }
.cart.total em { display: block; color: rgb(100,100,100); font-size: 12px; }
#cart-total-price { margin: 5px 0 0; color: #2a2a2a; font-weight: bold; font-size: 20px; }
#checkout td.product-price-leasing, #checkout td.product-total-leasing { color: #999; }

.container.add-to-cart { clear: both; overflow: hidden; }


/* Checkout Cart:Total
********************/
#cart-total { float: right; padding: 10px 0 15px 0; width: 700px; color: #666; text-align: right; font-size: 14px; }
#cart-total-price { margin: 5px 0 0; color: #2a2a2a; font-weight: bold; font-size: 20px; }
#cart-actions { padding: 20px 0; }

/* Checkout Cart:Buttons
********************/
.button { position: relative; overflow: hidden; padding: 5px 12px /*5px 20px*/; border: 1px solid rgba(0,0,0,0.2); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 10px; background: rgb(230,230,230); font-size: 12px; }
a.button { color: #333; }
.button.empty { float: left; margin: 0 10px 0 0; background: rgb(255,100,100); color: rgb(255,220,220); }
.button.print { float: left; }
.button.refresh { float: right; padding: 4px 10px 3px; border: 1px solid rgba(0,0,0,0.2); background: rgb(0,150,0); color: rgb(200,255,200); font-family: Helvetica, arial, sans-serif; }
.button.accept { float: right; margin: 0 0 0 10px; background: rgb(0,150,0); color: rgb(200,255,200); }
.button.accept-disabled { float: right; }
.button.accept-offer { float: right; margin: 0 0 0 10px; }
.button.accept-offer-request { float: right; }

/* .button { background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '<img alt="" src="sprite.png">'+this.innerHTML); */

/* }
.button.empty:before, .button.empty img {

/* position: absolute; */ */

/* top: 5px; */

/* left: 5px; */

/* clip: rect(0 20px 20px 0px); */ content: url(../../../img/client/arrow-blue.gif);

/* _left: -35px; */ /*} */ 


/* TinyMCE styles */
.mcecontentbody { background: none; }
#tinymce p { font-size: 12px; }

/*
 * jQuery UI Slider 1.8.11
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Slider#theming
 */
.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; display: block; border: 0; background-position: 0 0; font-size: .7em; }

.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

.ui-slider-vertical { width: .8em; height: 100px; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-bottom: -.6em; margin-left: 0; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }

.ui-corner-tl { -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topleft: 4px; }
.ui-corner-tr { -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-topright: 4px; }
.ui-corner-bl { -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; }
.ui-corner-br { -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; }
.ui-corner-top { -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topleft: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-topright: 4px; }
.ui-corner-bottom { -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; }
.ui-corner-right {  -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; }
.ui-corner-left { -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; }
.ui-corner-all { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #cccccc; background: #f6f6f6 url(images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x; color: #1c94c4; font-weight: bold; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #1c94c4; text-decoration: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #fbcb09; background: #fdf5ce url(images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x; color: #c77405; font-weight: bold; }
.ui-state-hover a, .ui-state-hover a:hover { color: #c77405; text-decoration: none; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #fbd850; background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; color: #eb8f00; font-weight: bold; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #eb8f00; text-decoration: none; }
.ui-widget :active { outline: none; }

.ui-widget { font-size: 1.1em; font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-size: 1em; font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; }
.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; }
.ui-widget-content a { color: #333333; }
.ui-widget-header { border: 1px solid #e78f08; background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }

/* Autocomplete
*****************/

ul.ui-autocomplete { margin-top:-4px; margin-left:3px; width:250px; border:1px solid gray; background-color:white; font-family:Helvetica, Arial,sans-serif; }
ul.ui-autocomplete li{ margin:0; border-top:1px solid white; border-left:1px solid white; list-style:none; }
ul.ui-autocomplete li:first-child{ border-top:none; }
ul.ui-autocomplete li:last-child{ border-bottom:none; }
ul.ui-autocomplete li a{ display:block; padding:2px; border:none !important; color:black; text-decoration:none !important; }
ul.ui-autocomplete li img{ margin-right:4px; }
ul.ui-autocomplete li span{ }
#ui-active-menuitem{ background-color:#efefef; cursor:pointer; }


/* Success
********************/
.success .item { overflow: hidden; padding: 5px 0; }
.success .item p { float: right; margin: 0 0 3px;width: 40%; text-align: right; font-size: 14px;}
.success .item p strong { width: auto; }
.success p { overflow: hidden; margin: 0 0 8px; }
.success h2 { margin: 0 0 10px; }
.success h3 { margin: 30px 0 10px 0; padding: 0 0 10px 0; border-bottom: 1px solid #ccc;  }
.success h4 { float: left; margin: 0 0 5px 0; width: 60%; color: #333; font-weight: strong; }
.success .list-tax { margin: 0 0 5px 0; color: #999; font-size: 11px; }
.success span.list-tax { display: block; margin: 0 0 0 150px; }
.success p.list-tax { padding: 0 0 5px 0; text-align: right; }
.success em { float: right; font-style: normal; }
.success p strong { display: inline-block; width: 150px; }
.success span.item-name { float: left; width: 420px; }
.success span.item-price { float: left; width: 250px; text-align: right; }
.success .item-price em { font-style: normal; font-size: 14px; }
.success .item-price small { display: block; font-size: 11px; }

/* SoMe
********************/
.some { position: absolute; top:0; right:0; margin: 0; padding: 0 10px; width: 265px; height: 40px; text-align: right;}
.some img { display: inline; cursor: pointer; }
.some h4 { display: inline; }

/* Blocks
********************/
.block { margin: 0 0 30px 0; padding: 5px 15px 10px 15px; border: 1px solid #ccc; }
.block h2 { font-size: 18px; }
.block h3 { margin: 0 0 10px; color: #333; font-size: 14px; }
.new-products { }
.new-categorized { }
.most-bought { }
.last-bought { }
.also-bought { }

/* Nav:Paging
*******************/
.paging { margin-top: 15px; }
.paging span { padding: 0 10px; }
#paging-prev, #paging-num, #paging-next { float: left; padding: 0 5px; }

/* Nyromodal
********************/
.nyroModalBg {position: fixed; top: 0; left: 0; overflow: hidden; width: 100%; height: 100%; background: #000; opacity: 0.7; }
.nmReposition {position: absolute; }
.nyroModalCloseButton {top: -13px; right: -13px; width: 12px; height: 12px; background: url(../../../img/client/close.gif); text-indent: -9999em; }
.nyroModalTitle {top: -26px; left: 0; margin: 0; color: #ddd; font-size: 1.1em; }
.nyroModalCont {position: absolute; margin: 25px; border: 4px solid #777; background: #fff; }
.nyroModalCont iframe {width: 600px; height: 400px; }
.nyroModalError { width: 250px; height: 250px;border: 4px solid red; color: red; }
.nyroModalError div { padding: 10px;min-width: 0; min-height: 0; }
.nyroModalLink, .nyroModalDom, .nyroModalForm, .nyroModalFormFile {position: relative; padding: 10px; min-width: 250px; min-height: 250px; max-width: 1000px; }
.nyroModalImage, .nyroModalSwf, .nyroModalIframe, .nyroModalIframeForm {position: relative; overflow: hidden; }
.nyroModalImage img { vertical-align: top; }
.nyroModalHidden { top: -9999em;left: -9999em; }
.nyroModalLoad {position: absolute; padding: 0; width: 100px; height: 100px; background: #fff url(../../../img/client/ajaxLoader.gif) no-repeat center; }
.nyroModalPrev, .nyroModalNext { position: absolute; top: 0; min-height: 50px; max-height: 300px; width: 150px; height: 60%;outline: none; background: transparent url('data:image/gif;base64,AAAA') left 20% no-repeat; text-indent: -9999em; cursor: pointer; }
.nyroModalImage .nyroModalPrev, .nyroModalImage .nyroModalNext { max-height: none; width: 40%;height: 100%; }
.nyroModalPrev {left: 0; }
.nyroModalPrev:hover {background-image: url(../../../img/client/prev.gif); }
.nyroModalNext {right: 0; background-position: right 20%; }
.nyroModalNext:hover { background-image: url(../../../img/client/next.gif);background-position: right 20%; }

/* Personnel-locations
********************/
.personnel-locations { overflow: hidden; margin: 0; padding: 0; list-style: none; }
.personnel-locations li{ float: left; overflow: hidden; padding: 0 10px 20px; width: 215px; text-align: center; height: 440px; }
.personnel-locations .image { width: 215px; } .personnel-locations .image img { width: 215px; height: auto; }
.personnel-locations .info { float: left; width: 215px; }

.personnel-locations h3 { font-size: 18px; }
.personnel-locations h4 { margin: 0 0 3px 0; font-family: "LatoBold"; padding: 0; }
.personnel-locations p { margin: 0 0 10px; }
.personnel-locations li a { margin-top: 20px; padding: 5px 20px; border-radius: 5px; background: rgb(203,0,0); color: #fff;}

/* Personnel
********************/
.personnel { overflow: hidden; margin: 0; padding: 0; list-style: none; }
.personnel li { float: left; overflow: hidden; padding: 0 10px 20px; width: 215px; text-align: left; }
.personnel li:nth-child(4n+1) { clear: left; }
.personnel .image { float: left; width: 70px; }
.personnel .image img { width: 60px; height: auto; }
.personnel .info { float: left; width: 120px; }
.personnel h4 { margin: 0; padding: 0; font-family: "LatoBold"; }
.personnel h5 { margin: 0 0 10px 0; padding: 0; color: #666; font-weight: normal; font-family: "LatoItalic"; }
.personnel h5.paikkakunta { font-size: 13px; font-family: "LatoBold"; color: #222; text-transform: uppercase; }

.personnel p { margin: 0 0 10px; font-size: 12px; }

/* Contacts
********************/
.contacts .main-info { overflow: hidden; }
.contacts .text { float: left; width: 300px;  }
.contacts .main-info .image { float: right; margin: 0 0 20px 40px; width: 600px; }


/* Maps
********************/
.cggm_sidebar_list { margin: 10px 0 0; padding: 0 10px; width: 100%; list-style: none; font-size: 12px; float: left; clear: both;}
.cggm_sidebar_list.results { width: 325px; }
.cggm_sidebar_list.results li { margin-right: 20px; }
.cggm_sidebar_list > li { position: relative; display: block; float: left; margin: 10px; padding: 0 0 15px; width: 298px; border: 1px solid #ccc; border-radius: 5px; text-align: center; height: 180px; }
.cggm_sidebar_list > li h3 { font-size: 18px; margin-bottom: 5px; }
.cggm_sidebar_list li div ul { margin: 0; padding: 0 5px; }
.cggm_sidebar_list li div li { display: inline-block; margin: 0 5px 3px 0; padding: 2px 5px; border: 1px solid #ccc; }
.cggm_sidebar_list .toggle-address { display: none; }
/*.cggm_sidebar_list li:nth-child(3n+1) { clear: left; }*/
.cggm_sidebar_list li a { position: absolute; bottom: -10px; left: 89px; display: block; padding: 4px 10px; width: 100px; border-radius: 5px; background: rgb(200,0,0); color: #fff; cursor: pointer;; }
.cggm_sidebar_list li a:hover { background: rgb(250,50,50); }
.showhide { z-index: 9999; height: 0; background: #fff; width: 100%; }
h2 a { display: block; float: right; padding: 4px 10px; border-radius: 5px; background: rgb(200,0,0); color: #fff !important; font-size: 14px; cursor: pointer; }
#cggm_map_defn_1 { float: left; clear: both; height: 470px; width: 100%; }

/* Media Queries
********************/
#showhidenav { display: none; }
.mobile-products { display: none; }
@media only screen and (max-width: 600px) /* and (device-width: 800px) */ {
	body { width: 300px; background: #fff;margin: 0 auto;  }
	#showhidenav { display: block; background: url(../img/mobilenav.png) no-repeat top left transparent; width: 30px; height: 30px; margin: 10px 10px 0 0; float: right; text-indent: -9999px; cursor: pointer; }
	.page { width: 300px; background: #fff; margin: 0 auto; }
	header, div[role=main], footer .content{ width: 300px; margin: 0 auto; }
	footer { width: 100%; }
	.page > h1 { padding: 20px 0; margin: 0 auto; width: 300px; display: none; }
	nav.main { width: 300px; padding: 0; height: auto; margin: 0; border-radius: 0 0 10px 10px; }
	nav.main ul { float: left; width: 300px; display: none; border-top: 1px solid rgba(0,0,0,0.2); }
	nav.main li { display: inline-block; width: 100%; float: left; padding: 0 20px 0 0; text-transform: uppercase; letter-spacing: 1px; border-top: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(0,0,0,0.2); text-align: center; }
	nav.main a { color: #fff; text-decoration: none; padding: 0 10px; }
	nav.main li.current { }
	nav.main li#topmenu_etusivu, nav.main li#etusivu { background: url(../img/home-icon.png) no-repeat 5px center; text-indent: -9999px; }
	nav.main li#topmenu_etusivu a, nav.main li#etusivu a { display: block; width: 30px;}
	div[role="search"] { margin: 0 0 0 110px; width: 140px; float: left; }
	div[role=search] input[type=text] { padding: 5px; width: 130px; height: 20px; border: none; border-radius: 5px; background: rgba(255,255,255,0.9); box-shadow: inset 0px 1px 3px rgba(0,0,0,.3); }

	nav.sub { width: 280px; height: auto; margin: 0 auto; overflow: hidden;}
	nav.sub ul { width: 300px; }
	nav.sub li { display: inline-block; width: 100%; border:none; }
	nav.sub a { display: inline-block; margin: 0; padding: 20px; width: 240; border: none; }
	
	header .content { margin: 0 auto; padding: 0; width: 300px; height: auto; }
	header h1 { display: none;  }
	header .logo { position: absolute; top: 10px; left: 10px; float: left; width: 160px; height: 30px; text-align: left; }
	div[role=main] .content, div[role=main] section  { overflow: hidden; margin: 0 auto; width: 300px; background: #fff; }
	div[role=main] { z-index: 1; }
	div[role=main] .main { float: left; width: 300px; }
	.sidebar { float: left; margin: 0 0 0 0; width: 300px; }

	nav.main li#topmenu_etusivu, nav.main li#etusivu { background: none; text-indent: 0; }
	nav.main li#topmenu_etusivu a, nav.main li#etusivu a { display: block; width: auto;}
	
	.contacts .main-info .image { float: left; margin: 0 0 20px 0; width: 100%; }
	section img { width: 100%; height: auto; }
	
	section.address { width: 300px; }
	section.address .logo { margin: 50px 0 5px; }
	footer { text-align: center; }
	footer .ask-more { position: relative; top: auto; width: 100%; margin: 10px 0 30px;  float: left; clear: both;  right: auto; text-align: left;}
	footer #toggle, footer #mail-toggle { position: absolute; top: 0; right: auto; left: 0; width: 200px; padding-bottom: 10px; color: #fff; font-size: 18px; color: #fff; }
	
	section.mailinglist { width: 300px; border-bottom: 1px solid #333; }
	.mailinglist fieldset { float: left; padding: 0 40px 0 0; width: 300px; font-size: 12px; } .mailinglist fieldset.last { padding: 0; width: 300px; }
	.mailinglist fieldset.col-2 { padding: 0; width: 300px; }
	.email-inputs { float: left; width: 300px; margin-top: 10px; }
	.paper-inputs { float: left; margin-top: 10px; width: 300px; }
	
	.category, .item { margin: 0 0 20px; width: 300px; }
	.category .image { width: 100px; } .category .image img { width: 100px; height: auto; }
	.category .description { width: 170px; }
	.item .image { width: 300px; } .item .image img { width: 320px; }
	.some img { width: auto; height: auto; }
	.item.detail .sheet-image img { width: 100%; height: auto; margin-bottom: 20px; }
	.breadcrumbs { display: none; }

	.some { position: relative; padding: 10px 0; text-align: left; width: 100%; }
	
	.item.detail h2 { font-size: 20px; }
	.cggm_sidebar_list { padding: 0 0; }
	.cggm_sidebar_list > li { margin: 10px 0; padding: 0 0 15px; width: 298px; border: 1px solid #ccc; border-radius: 5px; text-align: center; }

	#slider, #background-container { display: none; }
	.home-special { width: 300px; height: auto; overflow: hidden; } .home-special .item { width: 300px; position: relative; }
	
	div[role=main] .highlights { display: none; }
	
	.contactform > div { float: left; clear: both; overflow: hidden; margin: 0 0 5px 0; }
	.contactform label { float: left; margin: 0; width: 300px; line-height: 20px; }
	.contactform select { float: left; width: 300px; font-size: 13px; }
	.contactform input[type=text] { float: left; width: 290px;} 
	.contactform textarea { float: left; margin: 5px 0; width: 270px; }
	.contactform .submit { float: left; width: 300px; }
	.contactform .submit input { margin: 10px 0 0; padding: 5px 10px; width: 290px; border:none; border-radius: 5px; background: #000; color: #fff; text-align: center; }

	.mobile-products { display: block; list-style: none; padding: 0; margin: 0; text-align: center; }
	.mobile-products li { padding: 0; margin: 15px 0; border-radius: 10px; overflow: hidden; }
	.mobile-products li img { width: 100%; height: auto; }
	.mobile-products h4 { font-size: 24px; background: rgb(200,0,0); color: #fff; margin: 0; padding: 20px 0; }

}

/* HTML5 placeholder polyfill */
span.placeholder{
    position:absolute;
    font-size:75%;
    color:#999;
    font-family:sans-serif;
    padding:4px 3px;
    z-index:1;
    cursor:text;
}

span.placeholder-hide-except-screenreader {
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    padding:0 !important;
    border:0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
}

span.placeholder-hide{
	display:none;
}

/* overwrite for the HTML5 Boilerplate way to hide labels */
label.visuallyhidden-with-placeholder{
    /*clip: auto !important;*/
    height:auto !important;
    overflow: visible !important;
    position:absolute !important;
    left:-999em;
}

.banner { display: none; }
.banner-top { text-align: center; height: 100px; background: rgb(200,10,20); }
.banner-top img { max-height: 100px; width: auto; max-width: 100%; }
@media only screen and (max-width: 600px) /* and (device-width: 800px) */ {
  .banner-top { display: none; }
  .home #background-container { top: 0; }
}