body {
  margin: 0px;
  padding: 0px;
  font-family: arial,verdana,helvetica,serif;
}

body    { background: #fff url(../pics/bg.gif) repeat-x; }
body.fp { background: #fff url(../pics/bg-fp.gif) repeat-x; }

/* --- YLEISET --- */

p,a,ul,ol,li,dl,dt,form,input,table,tbody,tr,td { margin: 0em; padding: 0em; }


div#max-width {
  position:relative;
  width: 100%;
}


/* --- HEADER --- */

div#header {
  position:relative;
  height: 95px;
  left: 0px;
  top: 0px;
  margin: 0px;
  padding: 0px;
}
div#header div#header-left {
  position:absolute;
  top: 0px;
  left: 0px;
  height:95px;
  width:198px;
  background: transparent url(../pics/header-left.gif) 0px 0px no-repeat;
}
div#header-left div#language { position:absolute;top:73px;left:0.8em;margin:0em;padding:0em;color:#fff;}
div#language span { font-size:11px;}
div#header-left div#language a { font:normal normal 11px arial,verdana,serif;text-decoration:none;color:#fff;}
div#header-left div#language a:hover { text-decoration:underline;}
div#header div#logo {
  position: absolute;
  top: 0px;
  left: 198px;
  margin:0px;
  padding: 0px;
  background: transparent url(../pics/logo.gif) 0px 0px no-repeat;
  width: 106px;
  height:102px;
}
div#header div#header-right {
  position:absolute;
  top: 0px;
  left: 304px;
  width: 600px;
  height: 95px;
  background: transparent url(../pics/header-right.gif) 0px 0px no-repeat;
  margin: 0px;
  padding: 0px;
  
}
div#hexagon {
  position:absolute;
  left:411px;
  top:45px;
  margin:0px;
  padding:0px;
  width:138px;
  heigth:32px;
  
}
div#main-navi {
  position: relative;
  left: 0px;
  top: 69px;
  width: 100%;
  margin: 0px;
  padding: 0px;
  heigth: 26px;
 
}
div#main-navi ul {
 position:relative;
 margin: 0em;
 padding: 0em;
 
 
}

div#main-navi li {  display: inline;  }

div#main-navi li.first  {  position: relative;  width: 112px;  }
div#main-navi li.second {  position: relative;  heigth: 26px; width: 160px;  }
div#main-navi li.third  {  position: relative;  heigth: 26px; width: 112px;  }
div#main-navi li.fourth {  position: relative;  heigth: 26px; width: 74px;   }
div#main-navi li.fifth  {  position: relative;  heigth: 26px; width: 109px;  }

div#main-navi a {} 

div#main-navi a:hover.yritys        { xbackground: transparent url(../pics/navi-yritys-hover.gif) 0px -10px no-repeat; }
div#main-navi a.liiketoimintayritys { xbackground: transparent url(../pics/navi-liiketoimintayritys.gif) 0px 0px no-repeat;}
div#main-navi a.asikastuki          { width: 112px; xbackground: transparent url(../pics/navi-asiakastuki.gif) 0px 0px no-repeat; }
div#main-navi a.varasto             { width: 74px; xbackground: transparent url(../pics/navi-varasto.gif) 0px 0px no-repeat; }
div#main-navi a.hexagongroup        { width: 109px; xbackground: transparent url(../pics/navi-hexagongroup.gif) 0px 0px no-repeat; }

div#main-navi  span { display: none }


/* --- CONTENT AREA --- */

div#container {
  position:relative;
  top:0px;
  left: 0px;
  margin: 0px;
  padding: 0px;

}

/* -- LEFT COLUMN -- */

div#left-col {
  float: left;
  width: 198px;
  margin:0px;
  padding:0px;
}

div#contact {
  left:0px;
  top: 0px;
  width: 100%;
  height: 458px;
  background: transparent url(../pics/contact.gif) 0px 0px no-repeat;
  margin: 0px;
  padding: 0px;
  }

div#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#contact span { display: none; }
div#contact p  { font: normal normal 12px arial,verdana,helvetica,serif; margin: 0px; padding: 0.5em 0em 0.5em 10px; }
div#contact h5 { font: normal bold  12px arial,verdana,helvetica,serif; margin: 0px; padding: 1em 1em 0em 10px; color:#99999B; }
div#contact a  { color:#000; text-decoration: none;}

/* -- RIGHT COLUMN -- */

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

div#right-col-wide {
  float:left;
  width: 800px;
  margin: 0px;
  padding: 0px;
}





/* - FRONT PAGE - */

div#fp-content {
  width: 100%;
  border-left: 6px solid #ffffff;
  margin:0px;
  padding: 0px;
  height: 458px;
 
}

div#ingress {
  width: 242px;
  height: 186px;
  margin: 0px 0px 0px 0px;
  padding: 40px 0px 20px 0px;
}
div#ingress p { font: normal normal 12px arial,verdana,helvetica,serif; color:#99999B; margin: 0px; padding: 0.5em 0em; }

div#pic {
  float: right;
  padding: 0px 0px 0px 0px;
}

div#field {
  height: 210px;
  margin-top:-6px;
  /* mac ie hack \*/
   margin: 0px;
  /* end hack */
  padding: 0px;
  width: 100%;
}

div#field div       {  float: left; height: 210px; margin: 0px; padding:0px;}
div#field div.one   {  width:121px; background: transparent url(../pics/field-valumo.jpg) no-repeat; }
div#field div.two   {  width:130px; background: transparent url(../pics/field-konepaja.jpg) no-repeat; }
div#field div.three {  width:130px; background: transparent url(../pics/field-varasto.jpg) no-repeat; }
div#field div.four  {  width:130px; background: transparent url(../pics/field-projekti.jpg) no-repeat; }
div#field div.five  {  width:130px; background: transparent url(../pics/field-ajankohtaista.jpg) no-repeat; }

div#field .f-button    { margin-top: 126px;}


div#bulletin {
  float: right;
  margin-top: 50px;
  /* mac ie hack \*/
   margin-top:56px;
   height: 155px; 
  /* end hack */
    
  border-left: 1px solid #ffffff;
}
div#bulletin img { border-bottom: 1px solid #fff; }
/* --- FOOTER --- */

div#footer {
  clear:both;
  position: relative;
  top:0px;
  left: 0px;
  width: 100%;
  background: transparent url(../pics/footer.gif) 0px 16px repeat-x;
  margin: 0px 0px 0px 0px;
  padding:0px;

}


/* --- class --- */

.clear { clear: both; }