/* ---- ALASIVUN TYYLIT ---- */


/* --- YLATUNNISTE --- */
div#header-tools {
  position: absolute;
  top: 0px;
  left: 520px;
  height: 22px;
  width:353px;
  margin: 0px;
  padding: 0px;
  background: transparent url(../pics/header-tools.gif) no-repeat; 
  
}
div#header-tools ul {
  padding: 0px 8px;margin:0px;
}
div#header-tools li {  display: inline; padding: 1em 0.8em; }
div#header-tools li.back_to_fp { border-right: 1px solid #ffffff; list-style-position: inside;}
div#header-tools a { font: normal normal 11px arial,verdana,helvetica,serif; color:#ffffff; text-decoration: none; }
div#header-tools a:hover {text-decoration: underline; }
/* englanninkielien apuvalikko */
div#header-tools-en {
  position: absolute;
  top: 0px;
  left: 520px;
  height: 22px;
  width:353px;
  margin: 0px;
  padding: 0px;
  background: transparent url(../pics/header-tools-en.gif) no-repeat; 
  
}
div#header-tools-en ul {
  padding: 0px 8px;margin:0px;
}
div#header-tools-en li {  display: inline; padding: 1em 0.8em; }
div#header-tools-en li.back_to_fp { border-right: 1px solid #ffffff; list-style-position: inside;}
div#header-tools-en a { font: normal normal 11px arial,verdana,helvetica,serif; color:#ffffff; text-decoration: none; }
div#header-tools-en a:hover {text-decoration: underline; }


/* --- yhteystiedot --- */

div#sp-contact {
  left:0px;
  top: 0px;
  width: 100%;
  background: #E5E5E5;
  margin: 0px;
  padding: 0px;
  }

div#sp-contact h1 { background: transparent url(../pics/title-johnsonmetall.gif) 10px 28px no-repeat; margin:0px; padding: 10px 0px 28px 10px; height: 15px; width: 177px; }
div#sp-contact span { display: none; }
div#sp-contact p  { font: normal normal 12px arial,verdana,helvetica,serif; margin: 0px; padding: 0.5em 0em 0.5em 10px; }
div#sp-contact h5 { font: normal bold  12px arial,verdana,helvetica,serif; margin: 0px; padding: 1em 1em 0em 10px; color:#99999B; }
div#sp-contact a  { color:#000; text-decoration: none;}




/* --- NAVIGOINTI --- */

div#navi {
 width: 100%;
 margin:0px;
 padding:0px;
 background:#E5E5E5;
 }

div#navi ul {
  margin:0px;
  padding:0px;
}

div#navi ul li {
  list-style-type: none;
  padding: 0.2em 0.5em 0.2em 0em;
  margin: 0em;
  border-top:1px solid #fff;
  border-bottom:1px solid #BDBDBD;
}

div#navi ul li a {
  display: block;
  font: normal normal 11px arial,verdana,helvetica,serif;
  color:#757575;
  padding: 0.5em 0em 0.5em 2em;
  margin: 0em;
  text-decoration: none;
  font-weight:bold;
  background: transparent url(../pics/a_basic.gif) 5px 5px no-repeat;
  }

div#navi a:hover  { background: transparent url(../pics/a_hover.gif) 5px 5px no-repeat; } 
div#navi a.active { background: transparent url(../pics/a_active.gif) 5px 5px no-repeat; color:#1964B2;}

div#navi li li { border: none; padding: 0em; margin: 0px;}
div#navi li li a { background: none; font-weight: normal; padding: 0.1em 0em 0.1em 2em; margin: 0px;}

div#navi li li li { border: none; padding: 0em; }
div#navi li li li a { background: none; font-weight: normal; padding: 0.3em 0em 0.3em 2.5em; color:#000; }


div#navi-end {
  clear:both;
  height: 25px;
  width: 198px;
  margin: 0px;
  padding: 0px;
  background: transparent url(../pics/navi-end.gif) no-repeat;
  
}


/* Sisältöalueen oikean reunan viiva */
div#container-sp {
  position:relative;
  top:0px;
  left: 0px;
  width: 862px;
  margin: 0px;
  padding: 0px;
  border-right: 1px solid #CBCCCE;
}

div#container-sp-wide {
  position:relative;
  top:0px;
  left: 0px;
  width: 100%;
  margin: 0px;
  padding: 0px;
  xborder-right: 1px solid #CBCCCE;
}

/* --- SISALTO --- */

div#container-sp div#right-col  {
  float:left;
  width: 664px;
  margin: 0px;
  padding: 0px;
}




div#content {
  padding: 0em 0.5em;
  min-height: 500px;
  height:auto;
  _height: 500px;

}


div#content h1 { font: normal bold 24px arial, verdana, helvetica,serif; color:#99999B; padding: 1em 0em; margin: 0px;}
div#content h2 { font: normal bold 16px arial, verdana, helvetica,serif; color:#99999B; padding: 0.5em 0em; margin: 0px;}
div#content h3 { font: normal bold 16px arial, verdana, helvetica,serif; color:#99999B; padding: 0.5em 0em; margin: 0px;}
div#content h5 { font: normal bold  12px arial,verdana,helvetica,serif; margin: 0px; padding: 0em; color:#99999B; }

div#content p { font: normal normal 12px arial, verdana, helvetica,serif; color:#000; padding: 0.5em 0em; margin: 0px;}
div#content a { text-decoration: none; color:#1964B2; font-weight:bold;}

/* - listat - */ 
  
div#content ul, div#content ol {  padding: 0.5em 0em; margin:0em 2.5em;}
div#content ul li { list-style-image: url(../pics/li.gif);   }
div#content li    { padding: 0em 0em; margin: 0em; font:normal normal 12px arial, verdana, helvetica,serif; color:#000; }


/* - taulukot - */

div#content table {}
div#content table tr {}
div#content table tr td {}


/* - kuvat - */
div#content img { padding: 4px; margin: 10px; border: 1px solid #E5E5E5;}
div#content img.noborder { border:none; }
div#content img.pic-email { border:0px; padding:0px; margin:0px; }

/* -- LOMAKKEET -- */

div#content form {}

div#content fieldset {}

div#content input {}

div#content input.submit {}


/* --- ALATUNNISTE --- */



/* -- sivukohtaiset tyylit -- */

/* tuoteluetteloiden tyylien määrittely */

/* yksittäisen tuotteen kuvaustaulukon tyylit */

table.prd_overview { 
  width: 100%;
  border: 1px solid #eee;  

}
table.prd_overview tr { vertical-align: top; }
table.prd_overview td {
  background: #eee;
  padding: 1em 1em;
 font-size: 11px;
}


/* yksittäisen tuotteen tietojen esitykseen käytetyn taulukon tyylimäärittelyt */

table.prd_sheet {
  width: 100%;
  border: 1px solid #808080;
  margin: 1em 0em;  

}
table.prd_sheet tr {
  margin:0px;
  padding: 0px;
 
}
table.prd_sheet th { 
  font-weight: bold;
  padding: 0.2em 0.2em;
  font-size: 11px;
  text-align: center;
  background: #ddd;
  border-bottom: 1px solid #808080;
  border-right: 1px solid #808080;
  }

table.prd_sheet td {
 background: #F3F3F3;
 padding: 0.2em 0.2em;
 font-size: 11px;
 
 vertical-align: top;
 border-top:1px solid #fff;
 border-bottom: 1px solid #808080;
 border-right:1px solid #808080;
 border-left: 1px solid #fff;
}

table td span.txt_left { text-align: left; }
table.prd_sheet  a { text-align: center;}

/* -- toimistot -- */

table.office {
  width: 100%;
  border: 1px solid #808080;
  margin: 1em 0em;  
  padding: 0.2em;
}

table.office tr { border: 1px solid #808080; }
table.office td {
  background: #F3F3F3;
  margin: 1em 0em;  
  padding: 5px;
  
}

table.office h4 { 
  width: 97%;
  font: normal bold 16px arial, verdana, helvetica,serif; 
  color:#fff; 
  padding: 0.2em 0.1em; 
  margin: 0.1em;
  background:#D1D2D3;
  text-align: center;
  border: 1px solid #808080;
  }

  table.office td p  { padding-left: 1em;}
  
  
 div#content td img.office {
      margin: 0px;
      padding: 0px;
      border: none;
    }