/*

  1. $Login page
  2. $Header
  3. $Tuotteet

*/

* {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

header, nav, section, article, aside, footer {
   display:block;
}

body.login-form {
  background: url('images/loginbg.jpg') no-repeat top center;
}
body {
  background: #fff;
  font-family: arial, helvetica, tahoma;
  font-size: 12px;
}

h1, h2, h3, h4, h5 {
  color: #095ba7;
  position: relative;
}

a {
  text-decoration: none;
  color: #2b8ced;
}

.tuotelista ul, .top-links ul, .tilaushistoria ul, .list-reset, .tuotteet-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 800px;
  margin: 0 auto;
}
.palaute-page .wrapper {
  width: 725px;
  margin: 0 auto;
}
.omat-tiedot-page .wrapper {
  width: 500px;
}
.tilaa-page .wrapper {
  width: 450px;
}
.raportit-page .wrapper, .tilauskori-page .wrapper {
  width: 70%;
}
.tilatut-page {
  margin: 0;
}
.tilatut-page .wrapper {
  width: 100%;
}
.tilaa-page .wrapper {
  width: 450px;
}

p {
  line-height: 1.5;
}

.tuotteet-lista {
  font-size: 12px;
}
.tuotteet-lista li {
  margin-bottom: 5px;
  line-height: 1.2;
}

table, table p {
  font-size: 12px;
}

/*
  $Login page
*/
.login-form {
  color: #fff;
  text-align: center;
  margin-top: 150px;
}
.login-form form {
  text-align: left;
  width: 325px;
  margin: 0 auto 100px;
}
.login-form h1 {
  margin-bottom: 55px;
  color: #fff;
}
.login-form label {
  color: #fff;
  display: block;
  font-weight: bold;
}
.login-form input[type="email"], .login-form input[type="password"] {
  border: 1px solid #075da8;
  color: #525252;
  width: 100%;
  padding: 7px 9px;
}
.login-form input[type="submit"] {
  border: none;
  padding: 7px 9px;
  display: inline-block;
  display: block\9\0;
  padding: 10px 25px;
  background: #4ee4ff;
  color: #0057ab;
  font-weight: bold;
  float: right;
  border-radius: 5px;
}
.login-form a {
  color: #4ee4ff;
  font-size: 12px;
}
.login-form .copy {
  font-size: 13px;
  color: #095ba5;
}
.login-form p {
  font-size: 15px;
}

/*
  $Header
*/
.main-header {
  background: #1379cc url('images/headerbg.png') repeat-x 0 0;
  color: #fff;
  position: relative;
  width: 100%\9;
}
.logo-grp {
  padding: 15px 0 11px;
  background: url('images/header.jpg') no-repeat 0 0;
  width: 100%\9;
}
.main-header .logo {
  float: left;
  margin: 0 25px 0 15px;
  background: url('images/home_icon.png') no-repeat 0 25px;
}
.main-header .logo a {
  outline: none;
  border: none;
}
.main-header .logo img {
  border: none;
}
.main-header .search-box {
  float: left;
  width: 450px;
}
.main-header .cart {
  float: right;
  width: 15%;
  margin-right: 15px;
}
.main-header .user-box {
  float: right;
  position:absolute\9;
  right: 0\9;
  top: 0\9;
  width: 120px\9;
}
.main-header .logo h1, .main-header .logo a {
  color: #fff;
}
.main-header .logo a {
  display: block;
  padding-left: 25px;
}
.main-header .search-box {
  padding-left: 25px;
}
.search-box input[type="text"] {
  border: 1px solid #095da6;
  background: #2f8bd4;
  color: #fff;
  width: 60%;
  float: left;
  padding: 3px 10px;
}
.search-box input[type="submit"] {
  border: none;
  background: #0a5ca6;
  color: #fff;
  padding: 9px 12px;
}
.main-header .cart {
  text-align: right;
  padding-right: 20px;
  position: absolute;
  bottom: 2px;
  bottom: 20px\9;
  right: 0;
  width: 150px;
  border-left: 1px solid #248eed;
}
.cart a {
  color: #096ad9;
  text-transform: uppercase;
  font-size: 12px;
}
.cart a span {
  color: #248eed;
}
.main-header .user-box p {
  line-height: 1.2;
  margin-bottom: 5px;
}
.main-header .user-info {
  position: relative;
  float: right;
  font-size: 13px;
  color: #efefef;
  margin-right: 15px;
}
.user-info p {
  margin-top: 0;
}
.logout {
  display: block;
  color: #4ee4ff;
  height: 23px;
  line-height: 23px;
  font-size: 12px;
  background: url('images/logout.png') no-repeat 0 50%;
  padding-left: 25px;
}
.main-header .user-panel {
  position: absolute;
  display: none;
  top: 100%;
  right: 0;
  z-index: 10;
  padding: 10px 20px;
  background: #fff;
}
.main-header .top-links {
  float: left;
  margin-top: 25px;
  margin-right: 70px;
}
.top-links li {
  float: left;
  margin: 0 10px;
}
.top-links a {
  text-transform: uppercase;
  color: #fff;
  font-size: 12px;
}
.top-links a:hover {
  color: #4ee4ff;
}
.user-panel a {
  font-size: 12px;
}
.user-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary {
  background: #fff;
}
.primary ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary ul li {
  float: left;
  position: relative;
}
.primary .page-links {
  margin-right: 60px;
  float: left;
}
.primary .page-links li {
  margin: 0;
}
.primary .page-links li a {
  display: block;
  padding: 15px 50px 15px 25px;
  color: #096ccd;
  background: #e4e4e4;
  font-size: 16px;
}
.primary .ohje {
  position: absolute;
  top: 13px;
  right: 15px;
  z-index: 10;
  background: #888;
  background: rgba(0,0,0, .1);
  color: #fff;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 100%;
  cursor: default;
}
.primary ul li:hover .arrow, .primary ul li.current .arrow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 9px;
  background: url('images/nuoliy.png') no-repeat top center;
}
.primary .info-nav {
  float: left;
  margin-top: 6px;
}
.primary .info-nav li {
  margin: 0 25px 0 0;
}
.primary .info-nav a {
  color: #fff;
  font-size: 12px;
  text-shadow: 1px 1px 1px rgba(0,0,0, .19);
}

.primary .page-links .tekstiilit-link a {
  background: #e5475e;
  color: #fff;
}
.primary .page-links .tyovaatepalvelut-link a {
  background: #00cb78;
  color: #fff;
}
.primary .page-links .kertavuokrattavat-link a {
  background: #248eed;
  color: #fff;
}

.left-menu {
  background: #f8f8f8;
  padding: 25px 15px;
}
.sidemenu h3 {
  color: #085ca5;
  text-transform: uppercase;
  font-size: 20px;
}
.sidemenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidemenu ul li {
  border-bottom: 1px solid #fff;
}
.sidemenu ul li:hover, .sidemenu ul li.current {
  background: #c9e2f5;
}
.sidemenu .current {
  font-weight: bold;
}
.sidemenu h3 {
  font-size: 14px;
}
.sidemenu h3 a {
  color: #095ca6;
}
.sidemenu h3 span {
  padding-right: 10px;
}
.sidemenu ul li a {
  font-size: 13px;
  color: #095ca6;
  display: block;
  padding: 7px 0 7px 10px;
}
.sidemenu ul li ul {
  border-top: 1px solid #fff;
}
.sidemenu ul li ul li {
  padding-left: 15px;
  background: #bde7ff;
}
.sidemenu ul li ul li:last-child {
  border-bottom: none;
}
.sidemenu .current-page {
  background: #bee79b;
}
.sidemenu .current-page a {
  font-weight: bold;
}
.sidemenu form, .tuotelista-column form {
  width: 100%;
  position: relative;
}
.sidemenu input[type="text"], .tuotelista-column input[type="text"] {
  border: 1px solid #d0d0d0;
  padding: 5px 7px 6px;
  background: transparent;
  margin-right: 0;
  width: 100%;
}
.sidemenu input[type="submit"], .tuotelista-column input[type="submit"] {
  border: none;
  border-left: none;
  margin-left: 0;
  position: absolute;
  top: 2px;
  right: 0;
  z-index: 10;
  padding: 5px 7px 6px;
  background: transparent;
  color: #888;
}

.sidemenu .treenav {
  margin: 0 0 15px;
}
.sidemenu .treenav ul {
  border: none;
}
.sidemenu .treenav li {
  border-bottom: 0;
  background: transparent;
}
.sidemenu .treenav li:hover {
  background: none;
}
.treenav {
  font-size: 12px;
  text-transform: uppercase;
}
.sidemenu .treenav a {
  font-size: 12px;
}
.treenav strong {
  display: block;
  padding: 7px 0 7px 10px;
}
.treenav .henkilo strong {
  padding: 0;
  display: inline-block;
}
.tyovaate .treenav li:hover {
  background: transparent;
}

.quickorder {
  margin-top: 35px;
  font-weight: bold;
  font-size: 12px;
}

.quick-links {
  float: left;
  width: 440px;
  margin: 0 0 35px;
}
.quick-links ul {
  list-style: none;
  padding: 0;
}
.quick-links li {
  float: left;
  width: 50%;
  font-size: 14px;
  padding: 5px 15px 15px;
}
.fp-quick-order {
  float: right;
  width: 200px;
  text-align: right;
  padding-top: 5px;
}

.tekstiilit, .page, .content, .tilauskori-page, .raportit-page, .henkilotiedot, .tekstiilit-lista, .tuotelista-column, .henkilostohallinta-page, .omat-tiedot-page, .palaute-page {
  background: url('images/bg.jpg') repeat 0 0;
}
.content {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 25px;
}

.user-quicklinks ul {
  list-style: none;
  margin: 5px 0 0;
  padding: 0;
  float: right;
}
.user-quicklinks li {
  float: left;
  margin-left: 35px;
}
.user-quicklinks li a {
  font-size: 12px;
}

.tab-nav {
  padding-bottom: 4px;
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
}
.tab-nav ul {
  list-style: none;
  margin: 15px 0 0;
  padding: 0 0 4px;
  border-bottom: 1px solid #dedede;
}
.tab-nav ul li {
  float: left;
  border-right: 1px solid #dedede;
}
.tab-nav ul li a {
  display: block;
  padding: 2px 20px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 13px;
}

.fp-columns .column {
  float: right;
  width: 49%;
  background: #fff;
  margin-bottom: 2%;
  padding: 25px 30px 15px;
  font-size: 12px;
}
.fp-columns .first {
  float: left;
  margin-right: 2%;
}
.fp-columns .small {
  height: 165px;
}
.column h3 {
  font-size: 18px;
  margin-top: 0;
}
.tilaushistoria h3 {
  margin-top: 0;
}
.tilaushistoria ul li {
  margin: 0 0 10px;
}
.tilaushistoria ul li .pvm {
  display: block;
}
.tilaushistoria .btn {
  display: inline-block;
  padding: 4px 6px;
  margin: 0;
}
.ilmoitukset h2 {
  font-size: 18px;
  margin-top: 0;
}
.uutinen h3 {
  margin: 0;
  color: #111;
  font-size: 12px;
}
.ilmoituset small {
  color: #111;
}
.ilmoitukset p {
  margin-top: 0;
  font-size: 12px;
}

.fp-columns .palauteboxi {
  float: left;
  width: 49%;
  background: #095ca6;
  color: #fff;
}
.palauteboxi h3 {
  color: #fff;
  font-size: 18px;
  margin-top: 0;
}

.tooltip {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 10px;
  position: relative;
  top: -3px;
  text-align: center;
  background: #f5f5f5;
  border: 1px solid #eee;
  border-radius: 100%;
  font-size: 12px;
  font-weight: normal;
  color: #ccc;
  font-style: italic;
  font-family: 'Georgia', sans-serif;
}
#powerTip {
  width: 200px;
  height: auto;
}

.recent-orders {
  margin-bottom: 25px;
}
.recent-orders td {
  padding: 5px 0;
  font-size: 12px;
}

.breadcrumbs {
  float: left;
  width: 50%;
  font-size: 12px;
  margin: 20px 0 0 30px;
  color: #999;
}
.breadcrumbs a {
  color: #999;
}

.recent-orders {
  border-top: 1px solid #e7e7e7;
}
.recent-orders td {
  border-bottom: 1px solid #e7e7e7;
  padding: 10px 0;
}
.recent-orders td a {
  color: #ababab;
  text-align: right;
  display: block;
}

/*
  $Tuotteet
*/
.tuotelista-column, .tekstiilit, .page {
  padding: 25px 15px;
}
.tuotelista li, .page ul.top-layer li, .tuotteet-lista li {
  margin-bottom: 8px;
  font-size: 13px;
  color: #888;
}
.tuotelista a, .page ul.top-layer li a, .tuotteet-lista li a {
  color: #085ca5;
  font-size: 12px;
}
.tuotelista .current {
  font-weight: bold;
}
.tuotteet {
  margin-top: 25px;
}
.tuotteet p {
  font-size: 12px;
}
.tuotteet .tuote {
  text-align: center;
}
.tuote {
  float: left;
  width: 23%;
  margin-right: 1%;
}
.tuote .image {
  display: block;
  width: 100%;
  height: 225px;
  margin-bottom: 15px;
  position: relative;
}
.tuote .image .available {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px;
  font-size: 12px;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  background: #fff;
}
.tuote input[type="submit"] {
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 7px 9px;
  background: #f1f1f1;
  font-size: 12px;
}

#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #092c4a;
    display: none;
}

.modal-box {
  width: 790px;
  padding: 30px; 
  display:none;

  background: #FFF;
  border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
  box-shadow: 0px 0px 4px rgba(0,0,0,0.7); -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7); -moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);       
}

.product-image {
  float: left;
  margin-right: 30px;
  margin-top: 25px;
  border: 1px solid #3a7db8;
}
.product-info {
  float: left;
  width: 445px;
  padding-top: 15px;
  padding-left: 30px;
  padding-bottom: 25px;
}
.product-info h3 {
  margin-bottom: 0;
}
.product-info h4 {
  margin-top: 0;
  font-size: 16px;
  font-weight: normal;
}
.product-info h5 {
  font-size: 16px;
  color: #333;
  text-transform: uppercase;
  margin: 35px 0 25px;
}
.product-info p, .tilaa-page p {
  overflow: hidden;
  font-size: 12px;
}
.product-info label, .tilaa-page label {
  float: left;
  display: inline-block;
  display: block\9\0;
  width: 130px;
  padding-top: 8px;
  font-weight: bold;
}
.product-info input, .product-info select, .product-info textarea, .tilaa-page input, .tilaa-page textarea, .kertavuokrattavat select {
  display: inline-block;
  display: block\9\0;
  float: left;
  width: 315px;
  border: 1px solid #71a0cc;
  padding: 7px 9px;
}
.kertavuokrattavat select {
  width: 100%;
}
input[type="number"], input[type="select"] {
  border: 1px solid #71a0cc;
  padding: 7px 9px;
}
.product-info textarea {
  height: 100px;
}
.product-info input[type="submit"], .tilaa-page input[type="submit"] {
  margin-left: 130px;
  background: #7cb645;
  color: #fff;
  display: inline-block;
  display: block\9\0;
  padding: 10px 10px;
  width: 120px;
  margin-right: 10px;
  border: none;
}
.product-info .form-cancel {
  display: inline-block;
  display: block\9\0;
  padding: 8px 10px;
  background: #eee;
}

.main-footer {
  overflow: hidden;
}

.henkilotiedot {
  position: relative;
}
.henkilo-left {
  padding: 10px 0 15px 20px;
}
.henkilo-left h3 {
  font-weight: normal;
  color: #000;
  font-size: 26px;
  margin-bottom: 15px;
}
.henkilo-left h4 {
  font-size: 14px;
  margin-top: 25px;
  margin-bottom: 10px;
}
.henkilo-info {
  font-size: 13px;
  color: #818181;
  margin-top: 0;
}
.henkilo-info span {
  margin: 0 10px;
}
.henkilo-left .product-image {
  float: left;
  margin: 0 0 0 30px;
}
.product-selection {
  float: left;
}

.user-links ul {
  list-style: none;
  margin: 35px 0 0;
  padding: 0;
  float: left;
}
.user-links ul li {
  float: left;
  margin: 0 20px;
}
.user-links ul li a {
  color: #095ca6;
  font-size: 12px;
}

.henkilostohallinta-page, .uusikayttaja-page, .omat-tiedot-page, .palaute-page, .tilauskori-page, .raportit-page {
  padding: 45px 50px;
}
.henkilostohallinta-page h3 {
  font-size: 14px;
  color: #111;
}
.henkilostohallinta-page .cf {
  margin-bottom: 35px;
}
.henkilostohallinta-page .left-column {
  width: 410px;
  float: left;
}
.henkilostohallinta-page .right-column {
  float: left;
  margin-left: 80px;
  margin-top: 28px;
}
.raportit-page .right-column {
  float: right;
}
.raportit-page .right-column .btn {
  display: inline-block;
  display: block\9\0;
  margin-left: 5px;
}

.henkilostohallinta-page select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid #71a0cc;
}

.btn {
  display: block;
  padding: 10px 20px;
  background: #fff;
  border-radius: 5px;
  margin: 15px 0;
  text-align: center;
  color: #095ca6;
}
table td .btn {
  font-weight: normal;
  background: #eee;
}
.btn span {
  color: red;
  text-transform: uppercase;
  font-weight: bold;
  margin-right: 5px;
}
.btn.tilaa {
  background: #8bc755;
  color: #fff;
}
.btn.small {
  display: inline-block;
  display: block\9\0;
}
.btn.red {
  background: #e5475e;
  color: #fff;
  display: inline-block;
  display: block\9\0;
}
.lista-cart td .btn {
  width: 50px;
  display: inline-block;
  display: block\9\0;
}

.uusikayttaja-page label, .omat-tiedot-page label, .palaute-page label {
  display: inline-block;
  display: block\9\0;
  float: left;
  width: 150px;
  padding-top: 10px;
}
.palaute-page label {
  width: 100px;
}
.uusikayttaja-page fieldset, .omat-tiedot-page fieldset {
  width: 350px;
}
.omat-tiedot-page input[type="submit"] {
  border: none;
}

.uusikayttaja-page input, .omat-tiedot-page input, .palaute-page input, .kertavuokrattavat input {
  padding: 7px 9px;
  border: 1px solid #71a0cc;
}
.kertavuokrattavat input {
  width: 100%;
}
.palaute-page textarea {
  width: 350px;
  height: 150px;
}

.raportit-page table td {
  background: #fff;
  border-bottom: 1px solid #dedede;
}
.tablehead, .tablefooter, .raportit-page table .tablehead td {
  background: #f7f7f7;
}
.tilauskori-page td, .raportit-page td {
  padding: 10px 15px;
}

.cart-item {
  background: #fff;
}
.tilauskori-page .cart-item td {
  padding-top: 25px;
  border-bottom: 1px solid #dedede;
}
.cart-item .btn {
  margin-top: 0;
}

.tilauskori-page td a {
  color: #095ca6;
  font-weight: bold;
}
.tilauskori-page .left-column {
  float: left;
}
.tilauskori-page .right-column {
  float: right;
  margin-top: 35px;
}
.tilauskori-page .right-column .btn {
  display: inline-block;
  display: block\9\0;
  margin-left: 10px;
}
.right-column.bottom {
  margin-top: 0;
  margin-bottom: 35px;
}

.added {
  margin-top: 35px;
}
.added h3 {
  font-size: 12px;
  color: #e26500;
  margin-bottom: 15px;
}
.added ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.added ul li {
  background: #f1f1f1;
  margin-bottom: 2px;
  padding: 8px 10px;
  font-size: 12px;
}
.added ul li a {
  color: #095ca6;
  font-style: italic;
}
.added ul li .remove {
  float: right;
  font-style: normal;
  color: red;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 14px;
}
.added ul li span {
  display: inline-block;
  display: block\9\0;
  margin: 0 5px;
}

.tekstiilit .tuote h2 {
  font-size: 16px;
}

.pallot {
  overflow: hidden;
  text-align: center;
}
.pallot span a {
  background: #095ca6;
  opacity: 0.2;
  text-indent: -9999px;
  display: inline-block;
  display: block\9\0;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  margin: 0 10px;
}
.pallot .current a {
  opacity: 1;
}

.content h1 {
  margin-top: 50px;
  font-size: 30px;
  font-weight: normal;
}

.palaute-page h2 {
  color: #000;
  font-weight: normal;
  font-size: 18px;
}
.hymio-palaute {
  list-style: none;
  margin: 0 0 25px;
  padding: 0;
  text-align: center;
}
.hymio-palaute .thead {
  background: #fff;
}
.hymio-palaute label {
  cursor: pointer;
  font-size: 14px;
  background: #f7f7f7;
}
.hymio-palaute .hymio {
  display: inline-block;
  display: block\9\0;
  width: 30px;
  height: 29px;
  margin-bottom: 15px;
  opacity: .5;
  background: url('images/smileysprites.png') no-repeat 0 0;
}
.hymio.vgood {
  background-position: 0 0;
}
.hymio.good {
  background-position: -30px 0;
}
.hymio.ok {
  background-position: -60px 0;
}
.hymio.bad {
  background-position: -90px 0;
}
.hymio.none {
  background-position: -120px 0;
}
input[type="radio"]:checked+label span {
  opacity: 1;
}
input[type="radio"]:checked+label {
  background: #fff;
}
.palaute-kategoria {
  text-align: left;
  background: #f4f4f4;
  color: #000;
  padding: 10px 25px;
}
.hymio-palaute td {
  border: 2px solid #fff;
}

.showstyle {
  font-size: 12px;
}
.lista-showstyle {
  margin: 0 0 35px;
  font-size: 12px;
}
.henkilotiedot .lista-showstyle {
  margin-bottom: 15px;
  margin-top: 25px;
}

.tilauskori-page .korilista td {
  padding: 5px;
}
.korilista .btn {
  margin: 0;
}
.tilauskori-page .korilista .tablehead td {
  padding: 10px 5px;
}

.henkilotiedot .product-info {
  width: auto;
}

.sidemenu .treenav.startpage {
  margin-top: 32px;
}

.sizes span {
  display: block;
  width: 100%;
  clear: both;
}
.sizes input {
  width: 60px;
}

.fa-close {
  color: red;
}

.sort {
  margin: 20px 0 30px;
}
.sort label {
  font-weight: bold;
}
.sort input[type="date"] {
  background: #fff url('images/calendar.png') no-repeat 5% center;
  padding-left: 28px;
  margin: 0 10px;
}

.sort input, .sort select {
  border: 1px solid #d8d8da;
  background: #fff;
  padding: 7px 9px;
}
.select-raportti {
  float: right;
}
.select-raportti label {
  margin-right: 5px;
}
.sort select {
  width: 350px;
}

/* CLEARFIX */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

.page ul {
  line-height: 1.5;
}
.page ul li {
  margin-bottom: 5px;
}

/* HELP TIP */
.help-tip{
    position: absolute;
    top: -5px;
    right: 0;
    text-align: center;
    background-color: #f5f5f5;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 26px;
    cursor: default;
}

.help-tip:before{
    content:'?';
    font-weight: bold;
    color:#ccc;
}

.help-tip:hover p{
    display:block;
    transform-origin: 100% 0%;

    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;

}

.help-tip p{  /* The tooltip */
    display: none;
    text-align: left;
    background-color: #1E2021;
    padding: 20px;
    width: 300px;
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    right: -4px;
    color: #FFF;
    font-size: 13px;
    line-height: 1.4;
}

.help-tip p:before{ /* The pointer of the tooltip */
    position: absolute;
    content: '';
    width:0;
    height: 0;
    border:6px solid transparent;
    border-bottom-color:#1E2021;
    right:10px;
    top:-12px;
}

.help-tip p:after{ /* Prevents the tooltip from being hidden */
    width:100%;
    height:40px;
    content:'';
    position: absolute;
    top:-40px;
    left:0;
}

/* CSS animation */

@-webkit-keyframes fadeIn {
    0% { 
        opacity:0; 
        transform: scale(0.6);
    }

    100% {
        opacity:100%;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    0% { opacity:0; }
    100% { opacity:100%; }
}

@media(max-width: 1400px) {
  .tilauskori-page, .raportit-page {
    width: 100%;
  }
}

@media(max-width: 450px) {
  body.henkilotiedot .user-links ul li {
    float: none;
    margin-bottom: 10px;
  }
}