/*
css-tiedoston rakenne on seuraava:
1) peruselementteihin liittyviä tyylejä (body, otsikot, linkit)
2) yleiset geneeriset pikkutyylit
3) yleiskäyttöiset ja yhdisteltävät tyylit taustaväreille ja paddingeille
4) sivukohtaiset tyylit: boxien korkeudet ja muut tyylit sisällölle
   - sisäänkirjautuminen
   - aloitussivu (tervetuloa-sivu)
   - viestilistaus (kansion sisältö)
   - nimet
   - nimet pikalista
   - hallinta
   - viestin luku
   - viestin kirjoitus
   - kansioiden hallinta
   - asiakaspalvelu
   - lisäpalvelut
5) elementtien asemointiin ja leveyteen liittyvät tyylit (boxien sijoittelu, harvoin muokattava? - sijoitettu nämä loppuun)
6) Maikkarin navin tyylit (harvoin muokattava?)
7) pyöristettyihin kulmiin liittyvät tyylit (harvoin muokattava?)
*/

/* -----------------------------------------------------------
1) peruselementteihin liittyviä tyylejä (body, otsikot, linkit)
   ----------------------------------------------------------- */
/*
Graafisesta ohjeistuksesta (Grafiikan osuus Luukun uudistuksessa.doc):
Navigaatiopalstojen riviväli on linkkien sisällä 16px, linkkien välillä 24px
Otsikoiden lihavuusaste on bold (700), ja kirjasin (Trebuchet MS) imitoi MTV3:n fonttia (Info Display).
Alleviivaus linkeillä vain hover-tilassa
*/

#portalnav .last a {
color:#FFFFFF;
}


#portalsubnav {
background-color:#ff3300;
color:#FFFFFF;
width:970px;
display:block;
font-family:Calibri,Helvetica,Arial,sans-serif;
font-size:15px;
height:30px;
line-height:20px;
list-style-type:none;
margin:0;
padding:6px 0 0 14px;
word-spacing:0.05em;
}
#portalsubnav li {
display:block;
float:left;
margin-top:5px;
}
#portalsubnav a:hover, #portalsubnav .globcurrent {
background-color:#FFFFFF;
color:#59595B;
text-decoration:none;
}
#portalsubnav a {
color:#FFFFFF;
margin:4px;
padding:3px;
text-decoration:none;
}
#portalsubav .active {
color:#FE2300;
}

body {
  background-color:#ccc;
  background-image: url("http://img.luukku.com/img/luukku-4/tausta_ks.gif");
  padding:0;
  font: 400 11px/16px Tahoma, Verdana, Arial, sans-serif;
  color: #444;
  margin:0px 0px; 
  text-align:center;
}

.wrap {
    width:970px;;
    margin:0px auto;
    text-align:left;
    padding:0px;
    border: none;
}

.wrap .mtv3_wrapper .right {
    padding-right: 30px;
}

.wrap #globnav-wrap {
   width: 984px
}
 
.wrap #globnav-wrap #navi_haku {
   padding-left: 6px;
   padding-right: 6px;
}

form {margin: 0;}

h1 {font: 700 24px/28px "Trebuchet MS", Geneva, sans-serif; color: #444;}
h2 {font: 700 18px/22px "Trebuchet MS", Geneva, sans-serif; color: #444; margin: 0;}
h2.tabheader {clear: both; margin: 0; padding: 10px; background:#efefef; }
h2.inlineheader {display: inline;}
#writemessageheading h2.inlineheader {float:left;}
h2.loginheader { }

h3 {font: 700 11px/16px "Trebuchet MS", Geneva, sans-serif; color: #444;}
.ownblock h3.small {font: 11px/16px Tahoma, Verdana, Arial, Helvetica, sans-serif; font-weight: bold; margin-bottom: 0;}
.colTwoThirds h3.small {font: 11px/16px Tahoma, Verdana, Arial, Helvetica, sans-serif; font-weight: bold; margin-bottom: 0;}
.colOneThird h3.small {font: 11px/16px Tahoma, Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #9b9b9b; margin-bottom: 0;}

/* otsikoiden yhteydessä olevat kuvat */
h2 img {margin: 0 10px 5px 0;}

/* Leipätekstin koko on 11px ja riviväli 16px. Väri ei ole aivan musta vaan tummanharmaa (#444). */
p, #leipis {font: 400 11px/16px Tahoma, Verdana, Arial, sans-serif; color: #444;}

/* Tilaa ilmaisevat tekstit ("Viesti tallennettu lähetetyt -kansioon"), vaaleanharmaa #999 */
/* Linkkivärit Huom: Käyttöliittymän pysyvien linkkien (esim. painikkeet) visited-väriä ei ilmaista. */
/* monet linkit myös ilman alleviivausta! */
a {text-decoration: none;}
a:link{color: #cc0000;}
a:visited{color: #cc0000;}/* Käyttöliittymän pysyvien linkkien (esim. painikkeet) visited-väriä ei ilmaista. Poistettu siis #99c */
a:hover{color: #f90;}

/* poikkeukset: mustat linkkitekstit */
#viestit a, #writemessage_friends a.name, td#kirjoitakaverit a, table#pals a
{color: black;}

img, a img {vertical-align: middle; border: 0;}
input, select {vertical-align: middle;}
input.loginstyle {border-width:1px;font-weight:bold;width:215px;height:19px;}
select.addressbook_groups {width: 250px;}

table.loginwrapper, table.loginwrapper tbody, table.loginwrapper td, table.login wrapper tr {padding: 0px;}

table.contentwrapper {width: 985px;}
table.contentwrapper td.navi{width: 130px;}
table.contentwrapper td.main{width: 690px;}
table.contentwrapper td.main_out{width: 820px;}
table.contentwrapper td.banner{width: 165px;}


table.contentwrapper, table.contentwrapper tbody, table.contentwrapper td, table.contentwrapper tr {margin: 5px 0px 0px; /*padding: 0px;*/ vertical-align: top; border-collapse:collapse; border-spacing:0px;}
table.contentwrapper td.content {padding: 0px 0px 0px 4px;}
table.contentwrapper td.firstcontent {margin-left: 0px;}

table.boxwrapper, table.boxwrapper tbody, table.boxwrapper td, table.boxwrapper tr {margin: 0px; /*padding: 0px;*/ vertical-align: top; border-collapse:collapse; border-spacing:0px;}
table.boxwrapper td.content {padding: 0px 0px 0px 5px;}
table.boxwrapper td.firstcontent {margin-left: 0px; padding: 0px;}

/* -----------------------------------------------------------
2) yleiset geneeriset pikkutyylit
   ----------------------------------------------------------- */

.clear {clear: both;}
.left {float: left;}
.right {float: right;}

td.vasensolu {text-align: right; vertical-align: top;}

/* infoviestien tyylit: error, success ja neutral */
div#errormsg {background-color: #c00; color: white; padding: 0 15px 0 15px; margin-top: 1px; margin-bottom: 1px;}
div#errormsg a {color: white;}

/* success ja neutral halutaan samanväriksi */
div#successmsg {background-color: #efefef; color: #999; padding: 0 15px 0 15px; margin-top: 1px; margin-bottom: 1px;}
/*Tilaa ilmaisevat tekstit ("Viesti tallennettu lähetetyt -kansioon"), vaaleanharmaa #999*/
div#neutralmsg {background-color: #efefef; color: #999; padding: 0 15px 0 15px; margin-top: 1px; margin-bottom: 1px;}
div#neutralmsg a, div#successmsg a {color: #999;}

#inactive, .inactive {color: #999; font-weight: normal;}

.page_heading {border-bottom: solid #ccc 1px;}
.page_content {padding-top: 15px; padding-bottom: 15px;}

.viesti_pieni {font-size:1.0em; font-family:Courier New;}
.viesti_perus {font-size:1.1em; font-family:Courier New;}
.viesti_suuri {font-size:1.3em; font-family:Courier New;}
.viesti_suurin {font-size:1.5em; font-family:Courier New;}

.quote-0 {color: #000000} /*Normaalin sähköpostiviestin tyyli*/
.quote-1 {color: #993300} /*Vastaustasojen värit*/
.quote-2 {color: #666666}
.quote-3 {color: #663300}
.quote-4 {color: #CC6600}
.quote-5 {color: #6598ab}
.quote-6 {color: #ae5700}
.quote-7 {color: #cc9900}
.quote-8 {color: #336699}
.quote-9 {color: #e37d5b}
.quote-10 {color: #669999}
.quote-11 {color: #8a9cc6}
.quote-12 {color: #989f60}
.quote-13 {color: #999999}
.quote-14 {color: #aa89bc}
.quote-15 {color: #c59a70}
.quote-16 {color: #65a8c9}
.quote-17 {color: #aebd71}
.quote-18 {color: #6cc6c4}
.quote-19 {color: #d7b382}
.quote-20 {color: #9fa26f}
.quote-21 {color: #ff9999}

p.ingressi {font-weight: bold;}

/* -----------------------------------------------------------
3) yleiskäyttöiset ja yhdisteltävät tyylit taustaväreille ja paddingeille
   ----------------------------------------------------------- */

/* - - - - - - - - taustavärit boxeille */

.background_heading {background-color: #efefef;}
.background_content {background-color: white;}


/* - - - - - - - - paddingit */

/*
Elementtien väliset marginaalit ovat pääsääntöisesti 5px, ja palstojen sisäiset padding-arvot joko 5 tai 15px,
riippuen siitä onko kyseessä kapea luettelomainen palsta vai väljempi lausemuotoinen palsta tai dialogi.
*/

/* 0:t koska boxeissa ylä- ja alapuolella pyöristetyt kulmat */
.paddingsmall { padding: 0 5px 0 5px;}
.paddingmiddle { padding: 0 10px 0 10px;} /* tätä tarvitaan mm. login-sivun ohje-boxissa */
.paddingnormal { padding: 0 15px 0 15px;}


/* - - - - - - - - ylämarginaalit kaikille yhteisesti */

div.box_small {margin-top: 5px;}
.buttonarea {margin-top: 5px; margin-bottom: 5px; height: 25px;}
/*div.box_content {margin-top: 5px;}*/
div.box_logout {margin-top: 5px;}
div.mtv_content {margin-top: 5px;}

div.first {margin-top: 0;}


/* - - - - - - - - boxien leveydet */

div.box_small {width: 130px; overflow: hidden; } /*padding-right: 5px;*/

div.box_content {width: 685px;}

div.box_writemessage {width: 540px; float: left; }
div.box_writemessage_friends {width: 140px; } /* kavennettu 10px */

div.box_readmessage {min-width: 490px;} /* display: table-cell; padding: 5px;   div.box_readmessage {width: 505px; float: right; margin-left: 5px;}*/
div.box_minilist {width: 195px; float: left; overflow: hidden;}

table.loginwrapper {width: 820px;}
div.box_login {margin-top: 0px; width: 555px; float:left;}
div.box_logininfo {margin-top: 0px; width: 260px; float:right;}

div.box_logout {width: 820px;}

/* Nappien tyylit */

.luukku_button:hover {color: #cc0000;}
.luukku_button:active {color: #cc0000;}
.luukku_button:visited {color: #444;}
.luukku_button:visited:hover {color: #cc0000;}
.luukku_button:visited:active {color: #cc0000;}

input.luukku_button {
    background: transparent url(http://img.luukku.com/img/luukku-4/luukku_button.gif) no-repeat top right;
    font: bold 11px/16px Tahoma, Verdana, Arial, sans-serif;
    margin:  0px 8px 0px 20px;
    padding: 0px 8px 0px 2px;
    text-decoration: none;
    vertical-align: top;
    position: relative;
    overflow: visible;
    cursor: pointer;
    height: 25px;
    color: #444;
    width: auto;
    border: 0;
}

a.luukku_button {
    background: transparent url(http://img.luukku.com/img/luukku-4/luukku_button.gif) no-repeat top right;
    padding: 0px 0px 0px 20px;
    margin: 0px 8px 0px 0px;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    display: block;
    color:#444;
    height: 25px;
    border: 0;
}

a.luukku_button_nopic {
    padding: 0px 0px 0px 2px;
}

input.luukku_button_nopic {
    margin: 0px 8px 0px 0px;
    padding: 0px 8px 0px 4px;
}

.luukku_button_last {
    margin:  0px 0px 0px 20px !important;
}

a.luukku_button span{
    margin:  0px 0px 0px 5px;
    padding: 4px 0px 0px 0px;
    display: block;
}

.luukku_buttonbegin {
    background: url(http://img.luukku.com/img/luukku-4/luukku_button.gif) no-repeat left top;
    margin-left: -4px; /* IE6 fiks */
    vertical-align: top;
    position: absolute;
    display: inline;
    height: 25px;
    width: 25px;
}

.luukku_buttonbegin_nopic {
    width: 4px;
    margin-left: -4px; /* IE6 fiks */
}

.luukku_buttonimg {
    position: absolute;
    display: inline;
    left: 7px;
    top: 4px;
}

.luukku_buttonwrap {
    float: left;
}

/* / Nappien tyylit */

/* -----------------------------------------------------------
4) sivukohtaiset tyylit: boxien korkeudet ja muut tyylit sisällölle
   - sisäänkirjautuminen
   - aloitussivu (tervetuloa-sivu)
   - viestilistaus (kansion sisältö)
   - nimet
   - nimet pikalista
   - hallinta
   - viestin luku
   - viestin kirjoitus
   - kansioiden hallinta
   - asiakaspalvelu
   - lisäpalvelut
   ----------------------------------------------------------- */

/* KIRJAUTUMISSIVU*/

/* loginpage - loginbox */
#logincontainer { height: 100%; }/* 290px; */

/* loginpage - infobox*/
#infocontainer { height: 100%; }

#loginform {margin: 5px 0px 0px; padding: 0px; vertical-align: top; border-collapse: collapse; border-spacing: 0px;}
#loginform td {vertical-align: middle; padding: 3px;}

div.pvm {
  font-family: Tahoma, Verdana, Arial, Geneva, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: normal;
  color: #999999;
  text-align:right;
}

#infocontainer p.teksti {margin: 0; padding: 0;}



/* TERVETULOA -SIVU*/
/* welcomepage after login - welcomebox */
#welcomecontainer {height: 145px;}/* korkeus on nyt kompromissi kahden pahan välillä: a) yhdelle riville mahtuva otsikko - ilman kokeusmääritystä hajoaa IE:llä b) pitkä nimi otsikossa - jos määritetty korkeus liian matala, osa tekstistä jää piiloon FF:lla */

#welcomecontainer  #maininfobox img {float: left; margin: 0 15px 15px 0;}
/* seuraavissa margin-left: 85px = kuvan lev 70 + 15 px margin. Tämä siksi että kuvan jälkeenkin teksti halutaan sisentää.
nämä takaisin kun kuvatoiminto otetaan käyttöön*/
#welcomecontainer #maininfobox h2 {margin-top: 0; margin-bottom: 5px; }
#welcomecontainer #maininfobox .email { }
#welcomecontainer #maininfobox .dateinfo {color: #999; padding-top: 10px; }

/*
#welcomecontainer h2 {margin-top: 0; margin-bottom: 5px; }
#welcomecontainer .email {}
#welcomecontainer .dateinfo {color: #999; padding-top: 10px; }
*/

div#quotainfobox {float: right; width: 195px; color: #999;}
div#maininfobox {float: right; width: 355px; color: #999;}
#quotainfobox img#quotaimg {float: left; margin: 2px 0 0 0;}

#welcomecontainer #saanostobox { width: 160px; }

#welcomecontainer #saanostobox .saaicon { margin-left: 35px; }
#welcomecontainer #saanostobox .saalinks { }
#welcomecontainer #saanostobox .saalinks a {}

.notificationlist {margin: 8px 0px;}


/* KANSION SISÄLTÖ */

div#folderinfo {white-space: nowrap; overflow: hidden; border-bottom: 1px solid #efefef; /* IE6 taustaväri-fix */}
div#foldercontent{ }

table#viestit { width: 100%; margin: 0;}
#viestit th { background-color: #efefef; color: #999; font-weight: normal; text-align: left; border-bottom: solid #ccc 1px; }
#viestit td { border-bottom: solid #ccc 1px; vertical-align: middle; padding-top: 2px; padding-bottom: 2px; line-height: 16px;}
#viestit .noborder {border: 0; vertical-align: top; height: 34px;}

td.folderinfo {background-color: #efefef; color: #999;}

td.dayinfo {background-color: #efefef; color: #999;}

#viestit tr td a:link , #viestit tr td a:visited , #viestit tr td a:hover
{width:100%;display:block;color:#333333;}



#viestit tr.viestitnormal td {background-color: white;}
#viestit tr.viestithilite td {border-color:#999;background-color:#ddd;}
#viestit tr#active.viestithilite td {background-color:#E8D89A;}
#viestit tr.viestithilitehi td {background-color:#f7f7f7;}
#viestit tr.mousehilite td {border-color:#999;background-color:#ddd;}
#viestit tr#active.mousehilite td {background-color:#E8D89A;}

#viestit tr td.importanthilite , #viestit tr#active td.importanthilite {background-color:#F07E7E;}
#viestit tr td.readhilite , #viestit tr#active td.readhilite {background-color:#E8D89A;}

/* muut otsikkorivin tekstit harmaalla, paitsi se minkä mukaan viestit on järjestetty */
#viestit th.checkboxtd a, #viestit th.emailsymboltd a, #viestit th.sendertd a, #viestit th.subjecttd a,
#viestit th.datetd a, #viestit th.attachmenttd a, #viestit th.sizetd a, #viestit th.importancetd a, #viestit th.removetd a
{color: #999;}

#viestit th.checkboxtd a#sorted, #viestit th.emailsymboltd a#sorted, #viestit th.sendertd a#sorted,
#viestit th.subjecttd a#sorted, #viestit th.datetd a#sorted, #viestit th.attachmenttd a#sorted,
#viestit th.sizetd a#sorted, #viestit th.importancetd a#sorted, #viestit th.removetd a#sorted
{color: black;}

#viestit th.checkboxtd a#sorted img, #viestit th.emailsymboltd a#sorted img, #viestit th.sendertd a#sorted img,
#viestit th.subjecttd a#sorted img, #viestit th.datetd a#sorted img, #viestit th.attachmenttd a#sorted img,
#viestit th.importancetd a#sorted img, #viestit th.removetd a#sorted img
{padding-left: 10px; vertical-align: top;}

#viestit th.sizetd a#sorted img
{padding-left: 5px; vertical-align: top;}

#viestit #virusinfo td { padding: 1px 0px 0px 5px;background-color:#ff0000;color:#ffffff;border-style:none;}

div#virus, table#virus td, #viestit tr#virus td {font-size:11px;font-family:Verdana, Arial, Helvetica, sans-serif;color:#ffffff;background-color:#ff0000;}
table#virus td {padding-top:3px; padding-bottom:3px;}
div#virus{padding:3px;}

div#virus a, #viestit #virusinfo td a, #viestit tr#virus td a {display: inline; color: white;}

/* LUUIV-51 leveyksiä muutettu seuraavasti: sendertd 205 -> 195, sizetd 40 -> 60 */
th.checkboxtd {width: 25px;}
th.emailsymboltd {width: 20px; }
th.sendertd {width: 185px;}
th.subjecttd {width: 270px;}
th.datetd {width: 75px;}
th.attachmenttd {width: 20px;}
th.sizetd {width: 50px;}
th.importancetd {width: 20px;}
th.removetd {width: 20px;}

/* tällä otetaan etäisyyttä vasemmanpuoleisessa solussa olevaan symboliin (huom koskee sekä th- että td-soluja) */
.sendertd {padding-left: 25px; }

.dayinfo, .nomessages { padding-left: 5px; }
.removebutton {padding-left: 10px;}

/* sivutus sivun yläosassa (huomioitava #viestit-tyylien peritytyminen) */
div#page {float: right; color: black; text-align: right; padding-right: 5px;}
div#page a {color: #cc0000;}
/* sivutus sivun alaosassa + montako viestiä sivulla näytetään */
div#messagesfooter {margin-top: 10px; padding-bottom: 15px;}

table.selectedmessage {background-color:#ddd;}


/* NIMET -SIVU */

table.names {color: #999; background-color: white; width: 685px; text-align: left;}
table.names th { background-color: #efefef; color: #999; font-weight: normal; padding-left: 5px; }
table.names td {border-top: solid #ccc 1px; height: 20px; padding-left: 5px; vertical-align: middle; white-space: nowrap; overflow: hidden;}
table.names td#all {padding-left: 15px; white-space: normal; overflow: auto;}

table.names th.headingleft {padding-left: 15px; border-top: solid #ccc 1px; padding-top: 5px;}/* otsikko tulee muuten liian ylös: padding-top: 10px;  */
table.names th.headingleft h3 {margin: 0;}
table.names th.headingright {padding-right: 15px; text-align: right; border-top: solid #ccc 1px; padding-top: 5px;} /* padding-top: 10px; */

table.names .groups_image {padding-left: 15px;}
table.names .friend_checkbox { width: 35px; padding-left: 15px;}
table.names .image { width: 20px; }
table.names .name { width: 190px;}
table.names .nick { width: 105px;}
table.names .emails { width: 220px;}
table.names .actions1 { width: 60px; }
table.names .actions2 { width: 60px; padding-right: 5px; }

table.names td.name div, table.names td.nick div, table.names td.emails div{ white-space: nowrap; overflow: hidden;}

/* IE hack, muuten taulukko levähtää */
table.names td.name div { width: 180px;}
table.names td.nick div { width: 95px;}
table.names td.emails div { width: 210px;}


div#addressbook_heading {height: 50px; margin-bottom: 1px;}


/* PIKALISTA */

table#quicklist-popup {width: 100%;}
table#quicklist-popup th {border-bottom: solid #ccc 1px; vertical-align: top; text-align: left; padding-left: 5px; padding-right: 5px; background-color: #efefef;}
table#quicklist-popup td {border-bottom: solid #ccc 1px; vertical-align: top; text-align: left; padding-left: 5px; padding-right: 5px; background-color: white;}

table#quicklist-popup .friend_checkbox { width: 25px; padding-left: 10px;}
table#quicklist-popup .friend_checkbox input { padding-left: 0; margin-left: 0;}
table#quicklist-popup .nickname { padding-left: 10px;}


/* OSOITEKIRJAN SIIRTO */
table#addressbook_import th {text-align: left; vertical-align: top; background-color: #efefef;}
table#addressbook_import td {vertical-align: top; border: solid #ccc 1px;}


/* LISAPALVELUT */

div.accessories {padding-top: 20px;}
div.accessories div.colTwoThirds {width: 60%;}
div.accessories div.colOneThird p {color: #444;}
div.accessories div.colOneThird h3.small {color: #444; margin-bottom: 8px;}

table.accessories {color: #999; background-color: #efefef; width: 100%; text-align: left;}
table.accessories th {border-bottom: solid #ccc 1px; background-color: #efefef; color: #999; font-weight: normal; padding-left: 5px; height: 20px;}
table.accessories td {border-bottom: solid #ccc 1px; padding-left: 5px; height: 20px;}
table.accessories td img, div.listwrapper ul li img {padding-right: 4px;}

div.listwrapper ul {margin: 0px 0px 20px; padding: 0px; list-style: none; float: left; width: 410px;}
div.listwrapper ul li {float: left; width: 130px; margin-top: 5px; }
div.listwrapper ul li.footer {margin-top: 17px; width: 95px;}
div.listwrapper {margin-bottom: 5px;}



/* HALLINTA-OSIO */
div#settings_heading {clear: both; margin: 0; padding-top: 10px; padding-left: 10px;}
div#own_image {width: 80px; height: 70px; padding: 0 5px 5px 0; color:#cc0000; display:table-cell; vertical-align:middle; text-align:center;}/* vertical-align: middle; text-align: center; border: double #efefef 10px; width: 50px; */

div#image_add_div {margin-left: 90px;}

input.input_text {margin-top: 5px; margin-bottom: 5px; width: 300px; }

div#image_add_div input.terms_of_use {margin-left: 0;float: left;}
div#image_add_div div {margin-left: 20px;}

.ownblock {
  margin: 1px 0 0 0;
  padding: 10px;
}

/* HALLINTA-OSIO: Saapuvat viestit */
tr.filter td {border-style: solid; border-color: #afafaf; border-width: 1px 0px 0px 0px; vertical-align: middle;}

.colTwoThirds {width: 62%; float: left; margin-bottom: 10px;}
.colOneThird {width: 38%; float: right;}
.colOneThird p {color: #999; margin-top: 0;}

div.small_info {color: #999; font-size: 90%; margin-top: 10px;}

.mandatory{color: #cc0000;}


/* VIESTIN LUKU */

/* lista */

div.box_minilist div.msglistitem {border-top: solid #ccc 1px; }
div.box_minilist div.msglistitem table {width: 100%;}
div.box_minilist div.msglistitem table td.image_td {width: 20px; vertical-align: middle; text-align: center; }
div.box_minilist div.msglistitem table td.sent_td {width: 70px; text-align: right; vertical-align: top; padding-right: 5px; white-space: nowrap;}
div.box_minilist div.msglistitem table td.email_td {width: 100px;}

#viestit_mini tr td a
{width:100%;display:block;color:#333333; line-height: 16px;}
#viestit_mini tr td.email_td a
{width:90px;overflow: hidden;}

#viestit_mini table.viestitnormal {background-color: white;}
#viestit_mini table.mousehilite {border-color:#999;background-color: #ddd;}
#viestit_mini tr td.readhilite {background-color:#E8D89A;width: 20px;}


/* itse viesti */

div#mail_actions {padding-bottom: 10px;}
table#message_subject_table {border-collapse: collapse; border-spacing: 0px; padding-top: 8px;}
table#message_subject_table h2 {padding-left: 10px;}

div#mail_header_info {border-bottom: solid #ccc 1px;; border-top: solid #ccc 1px;}

div.buttons {margin-bottom: 10px; padding-top: 2px;}

div#message {float: left; margin-left: 15px; border: solid black 1px; }

div#mail_content {padding-top: 15px;}

div.html_mail_open_msg {border-top:1px solid #CCCCCC; margin-top: 15px;}

table#mail_headers {width: 100%;}
table#mail_headers td {vertical-align: top; color: #999;}
table#mail_headers td.button_td {vertical-align: middle;}
table#mail_headers td.sent_td {text-align: right; padding-right: 0px;}


/* VIESTIN KIRJOITUS */

div.message_buttons {text-align: right;}

div#writemessageheading, div#messagesentheading {height: 50px; margin-bottom: 1px;}
div#writemessage {padding-top: 10px;}

div#writemessage_friends {white-space: nowrap; overflow: hidden;} /* IE6 varmistus */

select.senderselect {width: 265px;}
span.huom {background-color: yellow;}

div.writemessage_rightside {margin-left: 545px;}
#writemessage_friends a.name {display: block; padding-top: 2px; padding-bottom: 2px; line-height: 16px;}
#writemessage_friends a.name div {margin-left: 5px; margin-right: 5px; width: 130px; overflow: hidden; white-space: nowrap;}

#writemessage_friends a.name:hover {background-color: #ddd; color: black;}

table#writeform {width: 540px;}


/* KANSIOIDEN HALLINTA */


table.folder-list {border-collapse:collapse; border-spacing:0px;}
table.folder-list td {height: 25px; background-color: #ffffff;}
table.folder-list td a {width: 100%; display: block;}
table.folder-list td a#folder {color: #000000; white-space: nowrap; overflow: hidden;}


/* ASIAKASPALVELU */

a.mne_ohjelinkki, a.mne_tiedotteet {}

/* LISÄPALVELUT */



/* -----------------------------------------------------------
5) elementtien asemointiin ja leveyteen liittyvät tyylit (boxien sijoittelu, harvoin muokattava?)
   ----------------------------------------------------------- */

/* - - - - - - - sijoittelu */

/* sisältää seuraavat boxit: kansiot, pikaviesti, lisäpalvelut, asiakaspalvelu */
div#leftcontainer{
    float: left; width: 130px;
/* FOR DEBUG:
background-color: white;
border: solid black 1px;
height: 500px;
*/
}

/* sivun varsinainen sisältö, joka sijaitsee leftcontainerin vieressä oikealla */
/*div#rightcontainer{*/
  /*float: left; *//* nimestään huolimatta tasattu myöskin vasemmalle, jotta saadaan tasan 5 px päähän leftcontainerista*/
  /*width: 705px;*/
  /*margin-left: 5px;*/
/*border: solid red 1px; */
/*}*/

img.mainosnauha {display: block;
background-color: white;
/*border: dotted red 1px;*/
}

.buttonarea {
    margin-left: 4px;
}

div.mtv_content {clear: both;
/* FOR DEBUG: */
background-color: white;
}

div.ad_content {width: 160px; text-align: center; /*float: right;*/
/* FOR DEBUG:
background-color: white;
height: 500px;
border: solid black 1px;
*/
}


/* - - - - - - - - vasemmassa reunassa olevien sähköpostikansioiden ynnä muiden pikkuboxien tyylit */
/* käyttö:
<a class="node"><div>teksti</div></a>
<a class="node"><div class="level-1">tasolle 1 sisennetty teksti</div></a>
uloimpana oleva a.node määrittelee värit ja se on koko laatikon levyinen.
Sisällä oleva divi määrittelee sisennyksen (erityisesti oikean reunan marginaali), tekstialueen leveyden ja ylivuototapauksen käyttäytymisen.
*/

a.node {display: block; color: black !important; padding-top: 2px; padding-bottom: 2px; line-height: 16px;} /* important: IE6:lla muuten punainen */
a.node img {vertical-align: top; margin-right: 5px;}
a#activefolder {background-color: #ddd; color: black;}
a.node:hover {background-color: #ddd; color: black; cursor: pointer;} /* cursor: IE6 bugfix */

div.trash {position: absolute;}
a.trash {position: relative; top: -18px; left: 110px;}

a.node div {margin-left: 5px; margin-right: 5px; width: 120px; overflow: hidden; white-space: nowrap;}

.level-0 {}
.level-1 {margin-left: 15px !important; width: 110px !important; overflow: hidden; white-space: nowrap;}
.level-2 {margin-left: 25px !important; width: 100px !important; overflow: hidden; white-space: nowrap;}
.level-3 {margin-left: 35px !important; width: 90px !important; overflow: hidden; white-space: nowrap;}
.level-4 {margin-left: 45px !important; width: 80px !important; overflow: hidden; white-space: nowrap;}
.level-5 {margin-left: 55px !important; width: 70px !important; overflow: hidden; white-space: nowrap;}
.level-6 {margin-left: 65px !important; width: 60px !important; overflow: hidden; white-space: nowrap;}


div#messaging div.node {}/* tämä sitten kun tilatietoa aletaan esittää: margin-left: 24px; */

table#pals td.image {width: 18px; text-align: center; vertical-align: middle;}
table#pals div.name {} /*overflow: hidden; padding-right: 5px;*/

/* -----------------------------------------------------------
6) Maikkarin navin tyylit (harvoin muokattava?)
   ----------------------------------------------------------- */

/* - - - - - - - - maikkarin navi, elä koske
(muokatut kohdat on merkitty alle, joten jos tyylejä täytyy kopioida maikkarilta uudestaan, täytyy ottaa huomioon muutetut kohdat)*/

table#globnav { font:10px Verdana, Geneva, Helvetica, Arial, sans-serif; width:985px; line-height:15px; /* width muokattu */
  }
td#globleft { width: 150px; background: url("http://img.mtv3.fi/img/default/lcorner_white.gif") top left no-repeat;
  }
td#globcenter { width: 470px; vertical-align: middle; background-color: white;
  }
td#globright { width: 200px; line-height:10px; color:#444; border-left: 1px solid #ddd; background:  url("http://img.mtv3.fi/img/default/rcorner_gray.gif") top right no-repeat;
  }

/* uusi tyyli globright_in ... */
td#globright_in { width: 320px; line-height:10px; color:#444; border-left: 1px solid white; background:  url("http://img.luukku.com/img/luukku-4/rcorner_white.gif") top right no-repeat;
  }

td#globright_in div#in-search { padding-top: 9px; padding-bottom: 3px; 
}

td#globright_in div#in-search h3 { font-weight: normal; margin: 10px 0 5px 115px; color:#444; font-size:11px;
}

td#globright_in div#in-search form { padding: 0; margin-left: 120px;
  }
/* ... uusi tyyli globright_in */

td#globright form { margin: 0; padding: 0;
  }
td#globright #globradiobuttons { float:left; padding: 2px 0 0 5px;
  }
td#globright #globsearchfield { text-align:right; padding: 5px 10px 0 0;
  }
td#globright h3 { margin:0; padding:5px 0 0 5px; font-size:11px; line-height: 10px; /* line-height lisätty, jotta haku näkyy luukun out-sivuilla oikein. Ongelma oli siinä, että mtv3-tyyleissä ei ole määritelty h3-otsikon tyylejä, mutta luukussa puolestaan on ja siten tulee tälle eri määritykset rivikorkeuden suhteen luukun ja maikkarin sivuille */
  }
img#globgoogle { position:relative; top:-2px; left:5px; margin:-6px 0 0 0;
  }
input.globnappi { color:#444; margin-top: 4px; padding: 2px 5px 0px 5px;
  font: bold 95%/9px Tahoma,Verdana,sans-serif;
  filter:progid:DXImageTransform.Microsoft.Gradient
  (GradientType=0,StartColorStr='#aaffffff',EndColorStr='#ffcccccc');
  }
input.globradio { position:relative; top:3px;
  }

#globcenter ul { list-style-type:none; margin: 0; padding: 5px 2px 5px 2px; float:left;
  }
#globalanavi ul { list-style-type:none; margin: 5px 0 0 5px; padding: 0; line-height:16px;
  }
#globnav a { text-decoration: none; font-weight:800;
  }
#globcenter a { text-transform: uppercase; margin: 0; padding: 2px 5px 2px 5px; color: #444;
  }
#mtv3_fi_logo { margin: 19px 0 0 15px;
  }
#globleft h1 { margin:10px 0 0 0;
  }
#globleft h1 a { color:white; padding: 1px 10px 1px 10px; font: 800 16px/20px "Trebuchet MS",sans-serif; background: url("http://img.mtv3.fi/img/default/rcorner_f00.gif") top right no-repeat;
  }
#globalanavi { background: black;
  }
#globalanavi li { float: left;
  }
#globalanavi li a { color:white; float:left; display:block; width:auto; padding:0px 2px 1px 2px; margin: 0 1px 0 0;
  }
#globalanavi a:hover, #globalanavi a.globcurrent { color:#f00; background:white;
  }
#globleft h1 a:hover { background:url("http://img.mtv3.fi/img/default/rcorner_f00.gif") top right no-repeat;
  }
#globleft h1 a:active { background:url("http://img.mtv3.fi/img/default/rcorner_ccc.gif") top right no-repeat;
  }
#globcenter a:hover { color:white; background-color: #f00;
  }
#globcenter a:active, #globalanavi a:active { color:white; background-color: #ccc;
  }

.linkkikuvaan{
height:15px;
position:relative;
top: -15px;
color:#ffffff;
text-decoration:none;
padding-top: 0px;
vertical-align: middle;
}
.linkkikuvaan img{
margin-left: 3px;
margin-right: 3px;
}
div.linkkikuvaan a, div.linkkikuvaan a:hover, div.linkkikuvaan a:visited{
font-family: Tahoma;
font-size: 9px;
text-decoration:none;
color:#ffffff;
}

.jakauma div { float: right }
.jakauma div { text-align: left; padding: 5px }

/* Emediaten textlink */

div.linkbox {
width:138px;
width: expression(this.width > 138 ? 138: true);
height:343px;
background-color:#fff;
border: 1px solid #555;
padding-top: 5px;
display:block;
word-wrap:break-word;
!important; margin: 0 12px;
}
.linkbox a {
width:100%;
font-family:'Trebuchet MS',arial;
color:#c00;
font-size:11px;
text-decoration:none;
text-align:left;
word-wrap: break-word;
white-space:normal;
display:block;
padding: 0 5px;
}
.linkbox a .linkhead {
color:#000;
font-size:12px;
font-weight:bold;
line-height:14px;
word-wrap: break-word;
width: 130px;
width: expression(this.width > 130 ? 130: true);
display:block;
}
.linkbox a .url {
display:none;
}

/* mainos tyylit, poimittu eri puolilta tyylitiedostoa http://www.mtv3.fi/css_kotisivu2007.css */
.dada_mtv, .dada_mtv a, .dada_yla a, .dada a { color: black; font: 10px Verdana; overflow: hidden; }
.dada_mtv, .dada_mtv a { padding-top: 5px; text-align: center; white-space: nowrap; }

div.jattibanneri { float:left; }
div.silmakulma {  float:left; }
.jattibanneri { padding: 5px 0 0 5px; }

table#bannerit { margin: 5px 0 5px 0; } /* oli: table#bannerit { margin: 5px 0 0 5px; } - left-margin on jo hoidettu bodyssa */
td#banneri_yla { padding-right: 5px; white-space: nowrap; }
td#banneri_silmakulma { background: url(http://www.mtv3.fi/ks/2007/etusivun_mobiili_silmakulma.gif) top right; width: 100%; }


/* -----------------------------------------------------------
7) pyöristettyihin kulmiin liittyvät tyylit (harvoin muokattava?)
   ----------------------------------------------------------- */

/* rounded corners styles -------------------------------------------------------->8 start */

/* pyöristetyt kulmat on toteutettu siten, että sisällön ylä- ja alapuolella on kaksi sisäkkäistä diviä kulmia varten.
    Vasemman kulman divi pitää oikean kulman divin sisällään. Näin ne saadaan skaalautumaan eri kokoisiin boxeihin.
    Kaikki edellä mainitut, kulmapalikat ja sisältödivi, ovat containerin sisällä, joka määrittää koko höskän leveyden.
    Jos korkeutta määritellään, se tulee tehdä sisältödivin avulla. Sisällön korkeudesta vähennetään kulmapalikoiden
    viemä tila sisällön ylä- ja alapuolella.

    erilliset tyylit:
   - vasen yläkulma (erikseen tumma ja vaalea yläosa, kaksi eri korkeutta)
   - oikea yläkulma (erikseen tumma ja vaalea yläosa, kaksi eri korkeutta)
   - vasen alakulma (kaksi eri korkeutta)
   - oikea alakulma (kaksi eri korkeutta)

   kaksi eri korkeutta:
   Pienissä boxeissa ylä- ja alakulmiin tulee pystyä kirjoittamaan, siksi ne ovat korkeammat.
   Isoissa boxeissa marginaali halutaan pieneksi, siksi ne ovat matalammat.

 */

/* todo     vertical-align: middle;*/

/* - - - - - - - - pienet: */

/* styles in common for top rounded corners */
.topleft_smallbox, .topleft_smallbox_dark {
/*border: solid blue 1px;*/
    height: 20px;  /* tekstille tilaa, ei kait välttämätön ainakaan IEllä eikä FFlla */
  font: 11px/20px Tahoma, Verdana, Arial, Helvetica, sans-serif; /* korjattu tähän rivikorkeus 20px, jotta tekstit tulee keskelle */
  margin-right: 3px;
}
.topright_smallbox, .topright_smallbox_dark {
/* border: solid black 1px; */
    height: 20px;
  margin-left: 3px;
  position:relative;
  right:-3px;
}

.topleft_smallbox {
  background: url("http://img.luukku.com/img/luukku-4/topleftcorner_ff.gif") no-repeat top left;
}
.topleft_smallbox_dark {
    color: #cc0000;
  background: url("http://img.luukku.com/img/luukku-4/topleftcorner_ef.gif") no-repeat top left;
  border-bottom: solid #ccc 1px;
}
.topleft_smallbox_dark img {
  vertical-align: middle; margin-right: 3px;
}
.topright_smallbox {
  background: url("http://img.luukku.com/img/luukku-4/toprightcorner_ff.gif") no-repeat top right;
}
.topright_smallbox_dark {
  background: url("http://img.luukku.com/img/luukku-4/toprightcorner_ef.gif") no-repeat top right;
}



.bottomleft_smallbox {

/*  border: solid yellow 1px;*/
  background: url("http://img.luukku.com/img/luukku-4/bottomleftcorner_ff.gif") no-repeat bottom left;
  margin-right: 5px;
  height: 25px;
}

.bottomright_smallbox {
  /*border: solid red 1px;*/
    color: #cc0000;
  text-align: right;
  font: 11px/25px Tahoma, Verdana, Arial, Helvetica, sans-serif;
  height: 25px;
  padding-right: 10px;

  background: url("http://img.luukku.com/img/luukku-4/bottomrightcorner_ff.gif") no-repeat bottom right;

  margin-left: 5px;
  position:relative;
  right:-5px;

}


/* - - - - - - - - isot: */

/* styles in common for top rounded corners */

.topleft_largebox, .topleft_largebox_dark {
/*border: solid blue 1px;*/
    height: 10px;
  margin-right: 3px;
}
.topright_largebox, .topright_largebox_dark {
/* border: solid black 1px; */
    height: 10px;
  margin-left: 3px;
  position:relative;
  right:-3px;
}

.topleft_largebox {
  background: url("http://img.luukku.com/img/luukku-4/topleftcorner_ff.gif") no-repeat top left;
}
.topleft_largebox_dark {
  background: url("http://img.luukku.com/img/luukku-4/topleftcorner_ef.gif") no-repeat top left;
}
.topright_largebox {
  background: url("http://img.luukku.com/img/luukku-4/toprightcorner_ff.gif") no-repeat top right;
}
.topright_largebox_dark {
  background: url("http://img.luukku.com/img/luukku-4/toprightcorner_ef.gif") no-repeat top right;
}


.bottomleft_largebox {

/*  border: solid yellow 1px;*/
  background: url("http://img.luukku.com/img/luukku-4/bottomleftcorner_ff.gif") no-repeat bottom left;
  margin-right: 5px;
  height: 10px;
}

.bottomright_largebox {
/*  border: solid red 1px;*/
  height: 10px;

  background: url("http://img.luukku.com/img/luukku-4/bottomrightcorner_ff.gif") no-repeat bottom right;

  margin-left: 5px;
  position:relative;
  right:-5px;

}

/* rounded corners styles -------------------------------------------------------->8 end */



/* hallinta-osio: tab styles -------------------------------------------------------->8 start */

#tabs {
  margin-bottom: -1px; /* tabien ja contentin välissä oleva 1px väli pois */
  margin-left: -1px; /* jostain syystä täälläkin pikku väli */
  /*float:left; IE bugaa koska tämän yläpuolella on clear - tabit irtoaa sisältöosasta */
  width:100%;
  line-height:normal;
  }
#tabs ul {
  margin:0;
  padding:0px 10px 0 0;
  list-style:none;
  }
#tabs li {
  float:left;
  background:url("http://img.luukku.com/img/luukku-4/toplefttab_9b.gif") no-repeat left top;
  margin:0;
  padding:0 0 0 9px;
  }
#tabs a {
/*
border: solid red 1px;
*/
  float:left;
  display:block;
  background:url("http://img.luukku.com/img/luukku-4/toprighttab_9b.gif") no-repeat right top;
  padding:5px 15px 4px 6px;
  text-decoration:none;
  font-weight:bold;
  color:#000;
  }
/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
#tabs a {float:none;}
/* End IE5-Mac hack */
#tabs a:hover {
  color:#000;
  }
#tabs #current {
  background-image:url("http://img.luukku.com/img/luukku-4/toplefttab_ef.gif");
  }
#tabs #current a {
  background-image:url("http://img.luukku.com/img/luukku-4/toprighttab_ef.gif");
  color:#000;
  padding-bottom:5px;
  }

/* tab styles -------------------------------------------------------->8 end */