/***************************************************************************
screen.css - style sheet for "Hypermedian perusteet"
 ----------------------------------------------------------------------
 by Ilkka Kaikuvuo, ilkka.kaikuvuo@tut.fi
***************************************************************************/

/* ////////////////////////////////////////////////// */
/* ---------------------- BASE ---------------------  */
body
{  
  margin:           0;
  padding:          0.5em 0em 0.5em 0.5em;
  font-family:      Verdana, Arial, sans-serif;
  font-size:        95%;
  background-color: #FFFFFF; 
  color:            #000000; 
}

div.wrap 
{  
  margin:             0.5ex;
  background-color:   inherit;
  color:              inherit;
}

div.content 
{ 
  border-right:   2px solid gray;
  width:          85%;
  padding:        0.5ex 2ex 0.5ex 0.5ex;  
  background:     #FFFFFF url("gradient.png") repeat-y right;;
  color:          inherit;  
}

div.footer 
{
  font-size:  smaller;
  text-align: left;
  padding:    0.5ex;
  clear:      both;
  border-top: 1px dotted gray;
  width:      85%;
}

div#blogsummary, div#info
{
  border:           1px dotted gray;
  border-right:     2px solid gray;
  margin:           0ex;
  padding:          0ex 0ex 0.2ex 0.2ex;
  color:            inherit;
  background:       #F6F7F8 url("gradient.png") repeat-y right;
}

div.linklist 
{
  width: 12%;
  min-width: 18ex;
  float: left;
  margin: 0ex;
}

/* ////////////////////////////////////////////////// */
/* ---------------------- MENU ---------------------  */
div.menu 
{   
  margin:             0ex;
  padding-left:       0.1ex;
  border-bottom:      3px solid gray;
  border-left:        1px solid gray;
  position:           fixed;
  right:              0.2ex;
  top:                3ex;
  min-width:          15ex;
  width:              14%; 
  background-color:   #FFFFFF;
  color:              inherit;
  font-size:          90%;
}

/* sorry IE hack. Why do we have to do this? */
* html div.menu
{
  position:               absolute;
  right:                  0.2ex;
  top:                    3ex;
  width:                  14%;
  border-bottom:          3px solid gray;
  border-left:            1px solid gray;  
  background-color:       #FFFFFF;
  color:                  inherit;  
}

div.menu ul 
{
  list-style:   none;
  margin:       0.1ex 0ex 0.2ex 0ex;
  padding:      0ex;
  display:      block;
}

div.menu li 
{
  display:          block;
  list-style-type:  none;
}

div.menu li a
{
 display:                 block; 
 padding:                 4px;
}

* html div.menu li a
{
 width:     100%;
}

div.menu li.active
{
  border-top:         1px solid #000000;
  border-bottom:      1px solid #000000;  
  color:              inherit;
  background-color:   #F6F7F8;
}

/* ////////////////////////////////////////////////// */
/* ---------------------- TABLES ---------------------  */
td.viikko 
{
  vertical-align: top;
}

table.paivakirja strong 
{
  font-style: normal;  
}

/* ////////////////////////////////////////////////// */
/* ---------------------- TYPO ---------------------  */

h1 
{
  margin-top:             0.5ex;
  color:                  white;
  background:             black url("gradient_black.png") repeat;
  padding-left:           0.1em;          
}

h2 , h3
{
  margin-top:             0.5ex;
  width:                  100%;
  color:                  white;
  background:             black url("gradient_black.png") repeat;
}

em 
{
  font-weight:  bold;
  font-style:   normal;
}

strong 
{
  font-weight:  bold;  
}

ins 
{
  text-decoration: none;
  font-style: italic;
}

ins:before 
{
  content: ">> ";
}

del * 
{
  color:            #CCCCCC;
  text-decoration:  line-through;
  background-color: #FFFFFF;
}

dl 
{


}

/* ////////////////////////////////////////////////// */
/* ---------------------- LINKS ---------------------  */
/*Normal link*/
a:link
{
  color:                  black;
  background:             inherit;
  font-weight:            bold;
}

/* Hovering over the link... */
a:hover
{
  color:                  white;
  background:             black url("gradient_black.png") repeat-x;
}

a:visited:hover
{
  color:                  white;
  background:             black url("gradient_black.png") repeat-x;
}

/* Visited link*/
a:visited
{
  color:                  black;
  background-color:       inherit;  
}

/* Active link */
a:active
{
  color:                  white;
  background:             black;
  text-decoration:        none;
}

/* Small screen... */

@media handheld 
{

  div.content 
    {
    width: 100%;
  }

  div.menu 
    {
    width: 100%;
  }
}

/* valikko aiheuttaa ongelmia tulostusversiossa */

@media print 
{

  div.menu 
    {
    display: none;
    min-width: 0ex;
    width: 0ex;
  }

}