/* Globals */
  
  html {
    height              : 100%;
  }
  
  * {
    font-family         : arial, sans-serif;
    font-size           : 22px;
    margin              : 0px;
    padding             : 0px;
  }

  body {
    background          : #FFFFFF;
    color               : #000000;
    height              : 100%;
    overflow            : hidden;
    text-align          : center;
  }
  

  a:visited, a:link, a:hover {
    background-color    : inherit;
    color               : blue;
    text-decoration     : none;
  }

  img {
    border              : none;
  }
  
  
  /* Classes */

  .login * {
    font-size           : 10px;
    font-weight         : bold;
  }

  .logoutImageArea {
    background-color    : #82B8D1;
    border-bottom       : 1px solid gray;
    color               : inherit;
    height              : 67px;
    padding             : 2px 4px;
    position            : absolute;
    right               : 0px;
    text-align          : right;
    top                 : 0px;
    width               : 100%;
    z-index             : 2;
  }
  
  .messageArea {
    background-color    : #82B8D1;
    border-top          : 1px solid gray;
    color               : inherit;
    height              : 20%;
    left                : 0;
    overflow            : auto;
    padding             : 0;
    position            : absolute;
    text-align          : left;
    top                 : 80%;
    width               : 100%;
  }

  .userInfo {
    background-color    : #82B8D1;
    border-bottom       : 1px solid gray;
    color               : inherit;
    height              : 67px;
    left                : 0px;
    padding             : 2px 4px ;
    position            : absolute;
    text-align          : left;
    top                 : 0px;
    z-index             : 3;
  }

  .userInfo p,p>b,p>i { font-size: 16px!important; } 
  
  .warning {
    color               : red;
  }

  .wtaTable {
    border              : none;
    border-spacing      : 4px;
    height              : 90%;
    margin-top          : 2.0em;
    width               : 100%;
  }
  
  .wtaTable caption {
    background-color    : #82B8D1;
    border-color        : #000000;
    border-style        : solid;
    border-width        : 0 1px 0 1px;
    color               : #FFFFFF;
    font-weight         : bold;
    line-height         : 3.0em;
    text-align          : left;
  }

/* @JUKKA: Nappikarkkia */
  .wtaTable .button {
/*    border-bottom       : 4px solid gray;
    border-left         : 4px solid silver;
    border-right        : 4px solid gray;
    border-top          : 4px solid silver;*/
    box-shadow          : 0px 2px 5px rgba(0,0,0,0.7);
    border              : 1px solid lightgray;
    background-color    : #eeeeee;
    background-image    : linear-gradient(#ffffff, #dddddd);
    background-image    : -moz-linear-gradient(#ffffff, #dddddd);
    background-image    : -webkit-linear-gradient(#ffffff, #dddddd);
    background-image    : -khtml-linear-gradient(#ffffff, #dddddd);
    background-image    : -o-linear-gradient(#ffffff, #dddddd);            
    background-image    : -ms-linear-gradient(#ffffff, #dddddd);                
    text-shadow         : 0px 1px 1px white;
  }
  
  .wtaTable .button:active {
    border: 0px;
    background-image    : linear-gradient(#dddddd, #ffffff);     
    background-image    : -moz-linear-gradient(#dddddd, #ffffff);     
    background-image    : -webkit-linear-gradient(#dddddd, #ffffff);     
    background-image    : -khtml-linear-gradient(#dddddd, #ffffff);     
    background-image    : -o-linear-gradient(#dddddd, #ffffff);
    background-image    : -ms-linear-gradient(#dddddd, #ffffff);          
    box-shadow          : none;               
}
  
  .wtaTable td {
    background-color    : #F8F8F8;
    color               : inherit;
    cursor              : pointer;
    text-align          : center;
    
    -moz-user-select    : none;
  }

  .wtaTable th {
    background-color    : #82B8D1;
    color               : #000000;
    font-weight         : bold;
    line-height         : 3.0em;
    text-align          : left;
  }

  .wtaLayout {
    background-color    : #FFFFFF;
    color               : inherit;
    height              : 100%;
    text-align          : center;
    width               : 100%;
  }
  
  .wtaTableArea {
    background-color    : #FFFFFF;
    height              : 70%;
    left                : 5%;
    position            : absolute;
    top                 : 10%;
    width               : 90%;
  }

  .popupMessage {
    width               : 100%;
    height              : 100%;
    background-color    : white;
    color               : black;
    z-index             : 1;
  }
  
  .popupMessage .messages {
    position            : absolute;
    top                 : 10%;
    left                : 10%;
    width               : 80%;
    height              : 80%;
    border-width        : 4px;
    border-style        : inset;
    border-color        : #A2D8F1;
    background-color    : #82B8D1;
    text-align          : left;
  }

  .popupMessage .messages h1 {
    margin-top          : 20px;
    margin-bottom       : 20px;
    font-size           : 2em;
    text-align          : center;
  }
  
  .popupMessage .messages p {
    margin              : 4px 4px 4px 40px;
  }
  
  .popupMessage .messages input.button {
    position            : absolute;
    height              : 4em;
    width               : 130px;
    right               : 20px;
    bottom              : 20px;

    background-color    : #FFFFFF;
    border-top          : 2px outset #A2D8F1;
    color               : black;
    font-size           : 1em;
  }
  
  /* -------- @JUKKA: mobiilimeininki ----------- */
  
  #wrapper {
     position: absolute;
     top: 24px; left: 0px;
     right: 0px; bottom: 5%;  
     width: 100%;
     overflow-y: auto;
  }
  
  @media (max-width: 640px)
  {
     .button { font-size: 2em; }
     .wtaTable { width: 100%; position: absolute; }
     .messageArea { height: 5%; top: 95%; }
     .wtaTable td { display: block !important; padding: 1em 0em 1em 0em;  width: 100% !important; }
     .wtaTable tr { display: block !important; width: 100% !important; }
  }