/* CSS Document */

html {
padding: 0;
margin: 0;
}

input[type="hidden"] { height:0px;}

body {
padding: 0;
margin: 0;
font-size: 10pt;
font-family: Trebuchet MS, Tahoma, Arial, Sans-Serif;
background-image: url(../images/body.jpg);
background-repeat: repeat-y;
background-position: center top;
color: #444;
background-color: #fff;
line-height: 1.30;
}

a {
color: #0069a6;
text-decoration: none;
}

input, textarea, select {
font-family: Trebuchet MS, Tahoma, Arial, Sans-Serif;
padding: 2px;
border: solid 1px #666;
font-size: 9pt;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}

select, option {
font-family: Trebuchet MS, Tahoma, Arial, Sans-Serif;
color: #555;
}

input:focus, textarea:focus {
background-color: #eaeaea;
border: solid 1px #000;
}

input {
background-color: #fff;
border: solid 1px #666;
}

.clear {
clear: both;
}

h1, h2, h3 {
margin: 0 0 20px 0;
text-decoration: none;
font-weight: normal;
}

h1 {
font-size: 17pt;
color: #000;
}

h2 {
font-size: 15pt;
border-bottom: solid 3px #aedcf8;
padding-bottom: 5px;
}

p {
margin: 0 0 10px 0;
padding: 0;
}

#main {
width: 990px;
margin: 0 auto 0 auto;
}

#top {
background-image: url(../images/top.jpg);
background-repeat: no-repeat;
height: 96px;
}

#top-navi {
background-image: url(../images/top-navi-bg.jpg);
background-repeat: repeat-x;
height: 36px;
border-bottom: solid 1px #fff;
}

#content {
padding-top: 30px;

}

#content #whole {
width: 990px;
}

#content #left {
background-image: url(../images/content-left-bg.jpg);
background-repeat: no-repeat;
background-position: right top;
float: left;
width: 750px;
}

#content #right {
background-image: url(../images/content-right-bg.jpg);
background-repeat: no-repeat;
background-position: right top;
float: right;
width: 240px;
}


#bottom {
background-image: url(../images/bottom.jpg);
background-repeat: repeat-x;
height: 113px;
}

#bottom ul {
padding: 30px 20px;
}

#bottom li {
color: #fff;
font-size: 10pt;
float: left;
margin-right: 50px;
}

#bottom a {
color: #339ddb;
}

.padder-left {
padding-left: 20px;
padding-right: 50px;
}

.padder-right {
padding-left: 20px;
padding-right: 20px;
}

.padder-both {
padding-left: 20px;
padding-right: 20px;
padding-bottom: 40px;
}

#actionbox li {
}

#actionbox li h2 {
font-weight: bold;
font-size: 12pt;
border-bottom: solid 3px #fff;
padding-bottom: 4px;
margin-bottom: 8px;
color: #000;
}

#actionbox li .padder {
padding: 10px 15px;
} 

#actionbox li.tuotehaku {
width: 350px;
height: 170px;
background-image: url(../images/top-actionbox-bg.jpg);
background-repeat: repeat-x;
float: left;
border-bottom: solid 1px #969696;
border-right: solid 1px #969696;
}

#actionbox li.pikalinja {
width: 350px;
height: 170px;
background-image: url(../images/top-actionbox-bg.jpg);
background-repeat: repeat-x;
float: left;
border-bottom: solid 1px #969696;
border-right: solid 1px #969696;
}

#actionbox li.kirjautuminen {
width: 287px;
height: 170px;
background-image: url(../images/top-actionbox-bg.jpg);
background-repeat: repeat-x;
float: left;
border-bottom: solid 1px #969696;
border-right: solid 1px #969696;
}

#actionbox li.kirjautuminen p {
margin-bottom: 4px;
}

#nostot-etusivu {
margin-top: 40px;
}

#nostot-etusivu li {
float: left;
width: 180px;
margin-right: 20px;
padding-right: 20px;
border-right: dotted 2px #ccc;
}

#nostot-etusivu li h2 {
background-image: url(../images/h2-bg.jpg);
background-repeat: repeat-x;
padding-top: 12px;
padding-left: 6px;
}

ul.tuotehaku-dropper {
clear: both;
} 

.tuotehaku-dropper li {
float: left;
margin-right: 5px;
}

.tuotehaku-dropper li.name {
width: 70px;
padding: 2px;
}

.tuotehaku-dropper li.variable {
width: 150px;
margin-bottom: 5px;
}

ul.pikalinja-dropper {
clear: both;
} 

.pikalinja-dropper li {
float: left;
margin-right: 5px;
}

.pikalinja-dropper li.name {
width: 180px;
padding: 2px;
}

.pikalinja-dropper li.amount {
width: 30px;
margin-bottom: 5px;
}

.pikalinja-dropper li.amount input {
width: 30px;
margin-top: 2px;
}

.pikalinja-dropper li.buy {
margin-top: 2px;
}

ul.kirjautuminen-dropper {
clear: both;
height: 28px;
} 

.kirjautuminen-dropper li {
float: left;
margin-right: 5px;
}

.kirjautuminen-dropper li.name {
width: 70px;
padding: 2px;
}

.kirjautuminen-dropper li.variable {
width: 150px;
margin-bottom: 5px;
}

.orange {
background-image: url(../images/btn-bg.jpg);
background-repeat: repeat-x;
color: #fff;
font-weight: bold;
}

.contact td {
vertical-align: top;
padding-bottom: 5px;
padding-right: 3px;
}





/**************** menu coding *****************/
#menu {
/* width: 100%; */
float: left;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 164px;
float: left;
}

#menu a, #menu h2 {
display: block;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
text-align: center;
border: 0;
padding: 8px 0px 10px 0px;
border-right: solid 1px #a1a1a1;
color: #0069a6;
}

#menu h2 a, #menu h2 a:hover {
text-align: center;
border: 0;
padding: 0px 0px 0px 0px;
color: #0069a6;
background: none;
}

#menu a {
color: #fff;
background: #5a92c1;
text-decoration: none;
padding: 4px 3px 4px 8px;
}

#menu a:hover {
color: #c9e8ff;
background: #5991c2;
}

#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
border: solid 1px #316387;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

#menu ul li a {height: 1%;} 

#menu a, #menu h2 {
font-size: 10pt;
}

form {
margin: 0;
padding: 0;
}

.formi input {
width: 200px;
}

textarea {
width: 300px;
}

.pager li {
float: left;
padding: 3px;
border: solid 1px #ccc;
margin-right: 6px;
}

.pager li.pager-active {
border: solid 1px #666;
background-color: #ccc;
}

.pager li:hover {
border: solid 1px #666;
}
.row-header li {
float: left;
}
.row-header li {
float: left;
}

.prdc-id {
width: 100px;
font-size: 10pt;
font-weight: bold;
padding-left:5px;
}

.prdc-id img {
float: left;
padding-right: 3px;
}

.prdc-name {
width: 470px;
font-size: 8pt;
padding-right: 20px;
}

.prdc-name img {
float: left;
padding-right: 15px;
}

.prdc-name div {
float: left;
margin-right: 5px;
background-color: #58e657;
padding: 5px 15px 5px 6px;
font-size: 8pt;
}

.prdc-name p {
color: #000;
}

.prdc-price {
width: 160px;
font-size: 8pt;
}

.prdc-free {
width: 90px;
font-size: 8pt;
}

.prdc-amount {
width: 70px;
font-size: 8pt;
}

.prdc-amount input {
width: 30px;
font-size: 8pt;
padding: 1px;
}

.prdc-info {
width: 20px;
}

.prdc-shipping {
width: 90px;
}

.headers {
height: 10px;
}

ul.headers li {
font-weight: bold;
}

ul.data-a p, ul.data-b p {
margin-bottom: 5px;
}

ul.data-a {
padding: 5px 0 5px 0;
background-color: #f1fafd;
height: 60px;
border-top: solid 1px #000;
}

ul.data-b {
padding: 5px 0 5px 0;
background-color: #ddf4fb;
height: 60px;
border-top: solid 1px #000;
}

ul.data-a:hover, ul.data-b:hover {
background-color: #ccc;
}

ul.data-a-extra {
padding: 4px 0 4px 0;
background-color: #fff;
height: 18px;
margin-bottom: 8px;
}

a img {
border: 0;
}

.red {
color: #c80000;
}

.prdc-card {
width: 330px;
float: left;
} 

.prdc-card ul {
clear: both;
border-bottom: dotted 1px #bbb;
padding-top: 5px;
}

.prdc-card li {
float: left;
}

.prdc-card-label {
width: 100px;
}

.prdc-card-value {
width: 230px;
}

.prdc-actions {
float: right;
}

.prdc-actions a {
padding: 4px;
font-weight: bold;
font-size: 10pt;
}

.prdc-hakunimi1 {
width: 170px;
font-size: 8pt;
}

.prdc-hakunimi2 {
width: 170px;
font-size: 8pt;
}

.prdc-pricealkuperainen {
width: 90px;
font-size: 8pt;
}

.prdc-pricenyt {
width: 80px;
font-size: 8pt;
}

.prdc-yksikko {
width: 80px;
font-size: 8pt;
}

.prdc-rivi {
width: 100px;
font-size: 8pt;
}

.prdc-tilausmaara {
width: 80px;
font-size: 8pt;
}

.prdc-tilausmaara input {
padding: 1px;
font-size: 8pt;
width: 30px;
}

.prdc-tilattu {
width: 70px;
font-size: 8pt;
}


a img {
border: 0;
}

.red {
color: #c80000;
}

.prdc-card {
width: 400px;
float: left;
} 

.prdc-card ul {
clear: both;
border-bottom: dotted 1px #bbb;
padding-top: 5px;
}

.prdc-card li {
float: left;
}

.prdc-card-label {
width: 150px;
}

.prdc-card-value {
width: 250px;
}

.prdc-actions {
float: right;
}

.prdc-actions a {
padding: 4px;
font-weight: bold;
font-size: 10pt;
}

.prdc-hakunimi1 {
width: 170px;
font-size: 8pt;
}

.prdc-hakunimi2 {
width: 170px;
font-size: 8pt;
}

.prdc-pricealkuperainen {
width: 90px;
font-size: 8pt;
}

.prdc-pricenyt {
width: 80px;
font-size: 8pt;
}

.prdc-yksikko {
width: 80px;
font-size: 8pt;
}

.prdc-rivi {
width: 100px;
font-size: 8pt;
}

.prdc-tilausmaara {
width: 80px;
font-size: 8pt;
}

.prdc-tilausmaara input {
padding: 1px;
font-size: 8pt;
width: 30px;
}

.prdc-tilattu {
width: 70px;
font-size: 8pt;
}


a.action-button {
    background: transparent url('/images/bg-active-button-a.gif') no-repeat scroll top right;
    display: block;
    float: left;
    font-size: 10px;
    color:#000000;
    height: 24px;
    margin-right: 6px;
    padding-right: 5px;
    text-decoration: none;
}

a.action-button span {
    background: transparent url('/images/bg-active-button-span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 5px;
}

.popup {
	position: absolute; 
	width: 200px; 
	left: 1px;
	top: 400px;
	visibility: hidden; 
	color: #ffffff; 
	background-color: #0355b6; 
	layer-background-color: #0355b6; 
	border-left: 1px solid gray; 
	border-top: 1px solid black; 
	border-bottom: 3px solid black; 
	border-right: 3px solid black; 
	padding: 3px; 
}


.btn { font-size:7pt;text-align:center;display: block; position: relative; background: #aaa; padding: 5px; float: left; color: #fff; text-decoration: none; cursor: pointer; }
.btn * { font-style: normal; background-image: url(../images/btn2.png); background-repeat: no-repeat; display: block; position: relative; }
.btn i { background-position: top left; position: absolute; margin-bottom: -5px;  top: 0; left: 0; width: 5px; height: 5px; }
.btn span { background-position: bottom left; left: -5px; padding: 0 0 5px 10px; margin-bottom: -5px; }
.btn span i { background-position: bottom right; margin-bottom: 0; position: absolute; left: 100%; width: 10px; height: 100%; top: 0; }
.btn span span { background-position: top right; position: absolute; right: -10px; margin-left: 10px; top: -5px; height: 0; }

* html .btn span,
* html .btn i { float: left; width: auto; background-image: none; cursor: pointer; }

.btn.gray { background: #666; }
.btn.green { background: #9d4; }
.btn.pink { background: #e1a; }
.btn:hover { background-color: #2ae; }
.btn:active { background-color: #2ae; }
.btn[class] {  background-image: url(shade.png); background-position: bottom; }

* html .btn { border: 3px double #aaa; }
* html .btn.gray { border-color: #666; }
* html .btn.green { border-color: #9d4; }
* html .btn.pink { border-color: #e1a; }
* html .btn:hover { border-color: #a00; }

.list1 {
background-color: #f1fafd;
}

.list2 {
background-color: #ddf4fb;
}

.ovh {
text-align: center;
background-color: #f1fafd;
border-top: solid 1px #000;
}

.netto {
text-align: center;
background-color: #ddf4fb;
border-top: solid 1px #000;
}

.netto input {
width: 30px;
}

.netto table {
margin: auto;
}

.ollakseen {
text-align: center;
background-color: #f1fafd;
border-top: solid 1px #000;
}


#shopcart {
	position: fixed;
	top: 0;
	left: 0;
	background: transparent url('/images/bg-white-transparent.png');
	width:100%;
	height:100%;
	display:block;
	z-index:200;
}

#news {
	position: fixed;
	top: 0;
	left: 0;
	background: transparent url('/images/bg-white-transparent.png');
	width:100%;
	height:100%;
	display:block;
	z-index:300;
}

#news #news-content {
	position: absolute;
	top: 50%;
	left: 50%;
	width:800px;
	margin-top: -200px;
	margin-left: -350px;
	margin-right:10px;
	background-color:white;
	border: solid 1px black;
}

#shopcart #opikalinja {
	position: absolute;
	top: 50%;
	left: 50%;
	width:700px;
	margin-top: -200px;
	margin-left: -350px;
	margin-right:10px;
	background-color:white;
	border: solid 1px black;
}

#notice {
	position: fixed;
	top: 0;
	left: 0;
	background: transparent url('/images/bg-white-transparent.png');
	width:100%;
	height:100%;
	display:block;
	z-index:200;
}

#notice #inv-content {
	position: absolute;
	top: 30%;
	left: 50%;
	width:700px;
	margin-top: -200px;
	margin-left: -350px;
	margin-right:10px;
	background-color:white;
	border: solid 1px black;
}

.ostoskori input {
width: 30px;
}

.ostoskori td {
	padding-right: 10px;
}

.tooltipbody {
	background:white;
	border: solid 1px black;
} 

.tooltiphead {
	color:black;
	font-weight:bold;
	background:#e5f8fe;
	border-top: solid 1px black;
	border-left: solid 1px black;
	border-right: solid 1px black;
} 

.popup-top {
background-image: url(/images/popup-bg.jpg);
background-repeat: no-repeat;
height: 120px;
width: auto;
}

.heavy {
background-color: #1a84c2;
color: #fff;
font-weight: bold;
padding: 5px;
}

.prdc-card-image { 
float: right;
margin-bottom: 30px;
width: 250px;
}

.prdc-card-image p {
margin-bottom: 7px;
font-size: 9pt;
float: left;
width: 110px;
}

.nostot li {
float: left;
margin-right: 16px;
width: 140px;
}

.nostot li div {
text-align: center;
width: 140px;
height: 120px;
overflow: hidden;
border: solid 1px #ccc;
}