@charset "UTF-8";
/***************************************************************/
/***************************************************************/
/*                          SYKE.FI                            */
/***************************************************************/
/***************************************************************/
/*Header*/
/*Top nav*/
/*Extra menu*/
/*Left navi*/
/*TODO pitäskö tämä poistaa?*/
/*Header quick search*/
/*Footer*/
body {
  margin: auto; }

div {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

/*Responsive images*/
.content-main img,
.sidebar img {
  max-width: 100% !important; }

/*Header*/
.header-top {
  border: 0; }

/*Header background*/
.header-middle {
  background-color: none;
  background: none;
  min-height: 120px;
  /*sinivihreä taustakuva pois ja väri tilalle*/
  /*Quick search*/ }
  .header-middle .left {
    background: none; }
    .header-middle .left .image.logo {
      left: 10px; }
  .header-middle .image-bg .title {
    position: absolute;
    top: 30%;
    font-size: 14px;
    color: #000;
    left: 25%; }
  .header-middle .right {
    right: 0; }
    .header-middle .right .search {
      width: 200px;
      padding: 0px;
      background-color: #6DD0F6;
      border-color: none; }
      .header-middle .right .search a {
        color: #fff; }
      .header-middle .right .search input.queryfield {
        width: 68%;
        padding: 4px;
        border-color: none;
        border: solid 2px #6DD0F6;
        border-right: none;
        margin-right: 0;
        border-radius: 0px 0 0 0px; }
      .header-middle .right .search input.button {
        background: #6DD0F6;
        /* background:url("suurennuslasi_white.png") no-repeat;*/
        border-color: none;
        border: solid 2px #6DD0F6;
        border-left: none;
        padding: 4px 8px;
        font-size: 12px;
        color: #fff;
        float: none;
        border-radius: 0 4px 4px 0; }

/*Content area*/
.wrapper {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none; }

.layout {
  max-width: 1016px;
  margin: 0 auto;
  float: none; }

/*Footer*/
.themebottom {
  /*Piiloitetaan viiva*/
  display: none;
  max-width: 1016px;
  margin: 0 auto;
  float: none; }
  .themebottom .image img {
    width: 100%; }

.footer {
  background: #005854; }
  .footer .padder.fleft {
    max-width: 1016px;
    margin: 0 auto;
    float: none; }
  .footer ul.horizontal li {
    width: 214px;
    border-left: 1px solid none; }

/*Copyright link*/
ul.footer-links {
  max-width: 1016px;
  margin: 0 auto;
  float: none; }

.top-navi .nav {
  margin: 0 auto;
  max-width: 1016px; }

/*Nodepage*/
/*556 + 20 padding = 576px*/
.main {
  /*Sidebars 200px + 20 padding = 220px*/
  /*Left*/ }
  .main .content-main {
    max-width: 556px;
    width: 100%;
    margin: 0;
    padding: 0; }
  .main .sidebar {
    max-width: 230px;
    width: 100%;
    padding: 0;
    padding-right: 20px;
    /*Right*/ }
    .main .sidebar.aside {
      padding: 0;
      padding-left: 20px; }

.main.wide-content .content-main {
  max-width: 776px;
  width: 100%;
  margin: 0; }

.wide-content.main .sidebar {
  width: 230px; }

/*Front page*/
/*556 + 20 padding = 576px*/
.frontpage .content-main {
  max-width: 576px;
  width: 100%;
  margin: 0;
  padding: 0;
  padding-right: 20px; }

.frontpage .content-aside {
  max-width: 420px;
  width: 100%; }

/*Search*/
#Main_Main_pnlSearch .sidebar-search input[type=text] {
  max-width: 148px;
  width: 100%; }

table.search-buttons td {
  width: 100%; }

.page-list-controls table {
  width: auto !important; }
  .page-list-controls table img {
    width: auto !important; }

/*556+420+ 60 (20+20+20 paddding)*/
@media only screen and (max-width: 1036px) {
  .wrapper {
    padding: 0 10px; }
  .main {
    /*left*/ }
    .main .content-main {
      width: 55.80%; }
    .main .sidebar, .main.aside {
      width: 22.1%; }
  .main.wide-content {
    /*left*/ }
    .main.wide-content .content-main {
      width: 75.0%; }
    .main.wide-content .sidebar {
      width: 22.1%; }
  /*Järjestyksellä väliä*/
  .frontpage .content-main {
    width: 57.8%; }
  .frontpage .content-aside {
    width: 42.2%; }
  .footer ul.horizontal li {
    width: 22%; } }

@media only screen and (max-width: 768px) {
  .full-width-banner {
    display: none; }
  .wrapper {
    border: none;
    width: auto;
    max-width: 100%;
    border-radius: 0;
    padding: 5px; }
  .layout {
    width: 100%; }
  .frontpage .content-main, .frontpage .content-aside {
    width: 100%;
    max-width: 768px;
    padding: 0; }
  .main .content-main, .main .sidebar {
    width: 100%;
    max-width: 768px; }
  .footer ul.horizontal {
    /*Remove bottom border from last item*/ }
    .footer ul.horizontal li {
      width: 100%;
      border-left: none;
      border-bottom: 1px solid #979595;
      padding-left: 0;
      padding-bottom: 10px;
      padding-top: 10px;
      padding-bottom: 20px;
      margin-left: 0;
      margin-bottom: 10px; }
    .footer ul.horizontal li:last-child {
      border-bottom: 0; }
  .main .sidebar,
  .main .sidebar.aside,
  .main .content-main,
  .main.wide-content .content-main,
  .main.wide-content .sidebar,
  body.frontpage .content-main,
  body.frontpage .columns-2 ul.item-wrap > li {
    width: 100%;
    max-width: 768px;
    float: none;
    padding: 0;
    margin: 0; }
  .nav-mobile {
    display: block; }
  /*Mobile Left navigation. Navigation contains nodes ja extra-menu nodes*/
  .navi-left {
    margin-top: 20px;
    border-top: 6px solid #218b29; }
    .navi-left .nav-list {
      display: none; }
      .navi-left .nav-list.nav-active {
        border-bottom: 6px solid #218b29;
        /*margin-top: 5px;*/ }
      .navi-left .nav-list li {
        text-align: center; }
        .navi-left .nav-list li a {
          color: #fff;
          font-weight: normal;
          line-height: 18px; }
    .navi-left ul.vertical {
      /*Sub nodes*/ }
      .navi-left ul.vertical li {
        /*selected*/
        /*Sub nodes*/ }
        .navi-left ul.vertical li.toplevel {
          background-color: #fff; }
          .navi-left ul.vertical li.toplevel a {
            background-color: #fff; }
        .navi-left ul.vertical li.active-trail a {
          font-weight: bold;
          background-color: #e1efd3; }
        .navi-left ul.vertical li .active-trail a {
          font-weight: bold; }
        .navi-left ul.vertical li ul.level1 li a {
          background-color: #e1efd3; }
        .navi-left ul.vertical li ul.level3 li a {
          background-color: #cde5b7; }
        .navi-left ul.vertical li ul.level3 li.active-trail a {
          background-color: #cde5b7; }
    .navi-left .nav-active {
      display: block; }
  /*Mobile extra navi*/
  .extra-navi {
    margin: 0;
    border-radius: 3px; }
    .extra-navi ul li {
      float: none;
      padding-left: 0;
      text-align: center;
      border-bottom: 1px solid #fff;
      /*Remove vertial line*/ }
      .extra-navi ul li:after {
        border-right: 1px solid #6DD0F6; }
    .extra-navi .nav-list {
      display: none; }
    .extra-navi .nav-active {
      display: block; }
  /*Mobile top navi*/
  .top-navi {
    margin: 5px 0;
    background: none;
    padding: 0; }
    .top-navi li {
      /*Home icon*/ }
      .top-navi li a {
        background-color: #6DD0F6; }
      .top-navi li.home a {
        width: auto;
        text-indent: -9999px;
        background: #6DD0F6 url(icon-home.png) no-repeat 50% 0; }
    .top-navi .nav {
      width: 100%;
      padding: 40px 0 0; }
      .top-navi .nav .nav-list {
        display: none; }
      .top-navi .nav .nav-active {
        display: block; }
      .top-navi .nav ul.horizontal {
        padding: 0; }
        .top-navi .nav ul.horizontal li {
          float: none;
          padding-left: 0;
          text-align: center;
          border: none;
          margin: 0 0 1px 0; }
          .top-navi .nav ul.horizontal li a {
            margin-right: 0;
            max-width: inherit;
            height: auto;
            padding: 5px 9px;
            line-height: 20px;
            display: block;
            width: auto; }
  /*Home icon*/
  .top-navi li.home a.current, .top-navi li.home a.selected, .top-navi li.home a:hover {
    background: #218b29 url(icon-home.png) no-repeat 50% 0px; }
  /*Selected*/
  .top-navi li a.current, .top-navi li a.selected, .top-navi li a:hover {
    color: #fff;
    background: #218b29; } }

@media only screen and (max-width: 570px) {
  .extra-navi {
    margin: 10px 0 10px;
    border-radius: 3px; }
  .header-middle {
    background-color: none;
    background: none; }
    .header-middle .left {
      background: none; }
    .header-middle .right .search {
      width: 100%;
      padding: 0; } }

/*TODO: tämä on vielä omana lohkona jossa kaikki tähän liittyvät css:t*/
/*Banneri*/
.full-width-banner {
  /*TODO: Mobile font-size*/ }
  .full-width-banner h2 {
    font-size: 30px;
    line-height: 42px; }
  .full-width-banner .ingress {
    font-size: 16px; }
  .full-width-banner .banner-inner {
    max-width: 2000px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden; }
    .full-width-banner .banner-inner .banner-item {
      position: relative; }
      .full-width-banner .banner-inner .banner-item .img-fluid {
        max-width: 100%;
        width: 100%;
        height: auto;
        vertical-align: middle; }
      .full-width-banner .banner-inner .banner-item .banner-caption {
        width: 100%;
        max-width: 996px;
        position: relative;
        margin: 0 auto; }
        .full-width-banner .banner-inner .banner-item .banner-caption .banner-caption-inner {
          position: absolute;
          /*TODO: noston tekstilaatikon kohta*/
          bottom: 40px;
          /*Noston teksti kuvan alle*/
          left: 10px;
          z-index: 10;
          color: #fff;
          text-align: center;
          text-shadow: none;
          text-align: left;
          padding: 20px;
          max-width: 450px;
          background: rgba(255, 255, 255, 0.7);
          color: #000;
          word-wrap: break-word; }
          @media only screen and (max-width: 768px) {
            .full-width-banner .banner-inner .banner-item .banner-caption .banner-caption-inner {
              position: static;
              display: block;
              padding: 10px 10px 5px 10px;
              width: 100%;
              max-width: 100%; } }

/*Social links*/
.content-item.box-content.social-links {
  float: left;
  width: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  margin-bottom: 20px; }
  .content-item.box-content.social-links h3 {
    margin: 0; }
  .content-item.box-content.social-links .content-item-inner {
    border: 0;
    margin: 0;
    padding: 0; }
  .content-item.box-content.social-links ul {
    list-style-type: none;
    margin: 0;
    padding: 0; }
    .content-item.box-content.social-links ul li {
      float: left;
      padding-right: 10px; }
      @media only screen and (max-width: 768px) {
        .content-item.box-content.social-links ul li {
          width: auto; } }

/*User control Social links*/
.page-shareandprint {
  height: 50px; }

/*Accessibility: Jump to content */
.jump-to-content {
  padding: 6px;
  position: absolute;
  left: -99999px;
  min-height: 0;
  height: 1px;
  margin-top: -1px;
  background: #fff;
  color: #000;
  font-weight: bold;
  text-decoration: none;
  -webkit-transition: top 1s ease-out,background 1s linear;
  transition: top 1s ease-out,background 1s linear;
  z-index: 100; }
  .jump-to-content:focus {
    top: 0;
    left: 0;
    background: none;
    outline: 0;
    -webkit-transition: top .1s ease-in,background .5s linear;
    transition: top .1s ease-in,background .5s linear;
    height: 35px; }

article a[target^=_blank]:not(.color-alt):after, footer a[target^=_blank]:after, .datatable2-big a[target^=_blank]:after, .frontpage a[target^=_blank]:not(.color-alt):after {
  font-family: "FontAwesome";
  content: " \f08e"; }

.content-picture-new-center a[target^=_blank]:after {
  content: "" !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0; }