/*    text-align: center;
      vertical-align: middle;
*/

/* 0px -29  0px -58 */

#import {
  margin: 0em 0em 0em .2em;
  content: 'Import Settings';
  display: inline-block;
  border: 1px solid;
  border-color: #ddd #bbb #999;
	-webkit-border-radius: 18;
  -moz-border-radius: 18;
  border-radius: 18px;
  padding: 5px 10px 5px 15px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  font-size: 16px;
  /*font: bold 12px/1.2 Arial,sans-serif !important;*/
	font-family: Georgia, serif;
	color: #ffffff;
  /* fallback */
  background-color: #34b8d9;
	background-image: -webkit-linear-gradient(top, #34b8d9, #482cb8);
  background-image: -moz-linear-gradient(top, #34b8d9, #482cb8);
  background-image: -ms-linear-gradient(top, #34b8d9, #482cb8);
  background-image: -o-linear-gradient(top, #34b8d9, #482cb8);
  background-image: linear-gradient(to bottom, #34b8d9, #482cb8);
	
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C2C1C1), to(#2F2727));
}

.hideMe{
    display: none;
}

.btn {
  background: #2ba83c;
  background-image: -webkit-linear-gradient(top, #2ba83c, #163d17);
  background-image: -moz-linear-gradient(top, #2ba83c, #163d17);
  background-image: -ms-linear-gradient(top, #2ba83c, #163d17);
  background-image: -o-linear-gradient(top, #2ba83c, #163d17);
  background-image: linear-gradient(to bottom, #2ba83c, #163d17);
  -webkit-border-radius: 18;
  -moz-border-radius: 18;
  border-radius: 18px;
  font-family: Georgia, serif;
  color: #ffffff;
	cursor: pointer;
  font-size: 16px;
  padding: 5px 10px 5px 15px;
  text-decoration: none;
}

.btn:hover {
  background: #34b8d9;
  background-image: -webkit-linear-gradient(top, #34b8d9, #482cb8);
  background-image: -moz-linear-gradient(top, #34b8d9, #482cb8);
  background-image: -ms-linear-gradient(top, #34b8d9, #482cb8);
  background-image: -o-linear-gradient(top, #34b8d9, #482cb8);
  background-image: linear-gradient(to bottom, #34b8d9, #482cb8);
  text-decoration: none;
}

.btnSmall {
  background: #34b8d9;
  background-image: -webkit-linear-gradient(top, #34b8d9, #482cb8);
  background-image: -moz-linear-gradient(top, #34b8d9, #482cb8);
  background-image: -ms-linear-gradient(top, #34b8d9, #482cb8);
  background-image: -o-linear-gradient(top, #34b8d9, #482cb8);
  background-image: linear-gradient(to bottom, #34b8d9, #482cb8);
  -webkit-border-radius: 14;
  -moz-border-radius: 14;
  border-radius: 14px;
  font-family: Georgia, serif;
  color: #ffffff;
  font-size: 12px;
  padding: 5px 10px 5px 15px;
  text-decoration: none;
}

.btnSmall:hover {
  background: #2ba83c;
  background-image: -webkit-linear-gradient(top, #2ba83c, #163d17);
  background-image: -moz-linear-gradient(top, #2ba83c, #163d17);
  background-image: -ms-linear-gradient(top, #2ba83c, #163d17);
  background-image: -o-linear-gradient(top, #2ba83c, #163d17);
  background-image: linear-gradient(to bottom, #2ba83c, #163d17);
  text-decoration: none;
}

.inpHaekoodi {
    background-image: url('../img/nappi/haekoodi3_nappi.png');
	background-position: 0px 0px;
	background-repeat: no-repeat;
    width: 89px;
    height: 30px;
	border: 0px;}
.inpHaekoodi:hover {background-position: 0px -29px;}
.inpHaekoodi:active {background-position: 0px -59px;}

.inpUusikoodi {
    background-image: url('../img/nappi/uusikoodi3_nappi.png');
	background-position: 0px 0px;
	background-repeat: no-repeat;
    width: 89px;
    height: 30px;
	border: 0px;}
.inpUusikoodi:hover {background-position: 0px -29px;}
.inpUusikoodi:active {background-position: 0px -59px;}

.inpLaheta {
    background-image: url('../img/nappi/laheta3_nappi.png');
	background-position: 0px 0px;
	background-repeat: no-repeat;
    width: 89px;
    height: 30px;
	border: 0px;}
.inpLaheta:hover {background-position: 0px -29px;}
.inpLaheta:active {background-position: 0px -59px;}
	
.inpTyhjenna {
    background-image: url('../img/nappi/tyhjenna3_nappi.png');
	background-position: 0px 0px;
	background-repeat: no-repeat;
    width: 89px;
    height: 30px;
	border: 0px;}
.inpTyhjenna:hover {background-position: 0px -29px;}
.inpTyhjenna:active {background-position: 0px -59px;}

.inpVahvista {
    background-image: url('../img/nappi/vahvista3_nappi.png');
	background-position: 0px 0px;
	background-repeat: no-repeat;
    width: 89px;
    height: 30px;
	border: 0px;}
.inpVahvista:hover {background-position: 0px -29px;}
.inpVahvista:active {background-position: 0px -59px;}

.inpTakaisin {
    background-image: url('../img/nappi/takaisin3_nappi.png');
	background-position: 0px 0px;
	background-repeat: no-repeat;
    width: 89px;
    height: 30px;
	border: 0px;}
.inpTakaisin:hover {background-position: 0px -29px;}
.inpTakaisin:active {background-position: 0px -59px;}

.inpPeruuta {
    background-image: url('../img/nappi/peruuta3_nappi.png');
	background-position: 0px 0px;
	background-repeat: no-repeat;
    width: 89px;
    height: 30px;
	border: 0px;}
.inpPeruuta:hover {background-position: 0px -29px;}
.inpPeruuta:active {background-position: 0px -59px;}

.inpHyvaksy {
    background-image: url('../img/nappi/hyvaksy3_nappi.png');
	background-position: 0px 0px;
	background-repeat: no-repeat;
    width: 89px;
    height: 30px;
	border: 0px;}
.inpHyvaksy:hover {background-position: 0px -29px;}
.inpHyvaksy:active {background-position: 0px -59px;}

.inpPalaa {
    background-image: url('../img/nappi/palaa3_nappi.png');
	background-position: 0px 0px;
	background-repeat: no-repeat;
  width: 89px;
  height: 30px;
	border: 0px;
}
.inpPalaa:hover { background-position: 0px -29px;}
.inpPalaa:active {background-position: 0px -59px;}

.koti {
  left: 0px;
  width: 46px;
  background: url('../img/nappi/img_navsprites_hover.gif');
  background-position: 0px 0px;
}

.edellinen {
  left: 63px;
  width: 43px;
  background: url('../img/nappi/img_navsprites_hover.gif');
  background-position: -47px 0;
}

.seuraava  {
  left: 129px;
  width: 43px;
  border: 0px;
  background: url('../img/nappi/img_navsprites_hover.gif');
  background-position: -91px 0;
}

.koti:hover {
  background: url('../img/nappi/img_navsprites_hover.gif');
  background-position: 0 -45px;
}

.edellinen:hover {
  background: url('../img/nappi/img_navsprites_hover.gif');
  background-position: -47px -45px;
}

.seuraava:hover {
  border: 0px;
  background: url('../img/nappi/img_navsprites_hover.gif');
  background-position: -91px -45px;
}

.roskakori  {
  border: 0px;
  background: url('../img/nappi/trashcan.gif');
  background-position: 0 -45px;
}

.roskakori:hover {
  left: 0px;
  width: 46px;
  border: 0px;
  background: url('../img/nappi/trashcan.gif');
  background-position: 0 0;
}

.mailing  {
  border: 0px;
  width: 45px;
  background: url('../img/nappi/mail.gif');
  background-position: 0 0;
}

.mailing:hover {
  left: 0px;
  width: 45px;
  border: 0px;
  background: url('../img/nappi/mail.gif');
  background-position: 0 -45px;
}

  #clockdiv{
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 12px;
    }

    #clockdiv > div{
      padding: 2px;
      border-radius: 15px;
      background: #00BF96;
      display: inline-block;
    }

    #clockdiv div > span{
      padding: 10px;
      border-radius: 15px;
      background: #00816A;
      display: inline-block;
    }

    .smalltext{
      padding-top: 2px;
      font-size: 10px; /* 16 */
    }

  #navlist {
    position: relative;
  }

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 0px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;