﻿@charset "UTF-8";
/***************************************************************/
/***************************************************************/
/*                          CANEMURE                           */
/***************************************************************/
/***************************************************************/
/*Header*/
/*Top nav*/
/*
.top-floating {
    position: fixed;
    z-index: 1000;
    background-color: #fff;
  left: 0;
  right: 0;
}
*/
/*Extra menu*/
/*Left navi*/
/*TODO pitäskö tämä poistaa?*/
/*Header quick search*/
/*Footer*/
body {
  margin: auto;
  background-color: #fff;
  background-position: 0px 0px; }

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: #fff;
  background: #fff;
  /*sinivihreä taustakuva pois ja väri tilalle*/
  /*Quick search*/ }
  .header-middle .left {
    background: #fff; }
    .header-middle .left .image.logo {
      left: 10px; }
  .header-middle .right {
    background: url(Life.png) no-repeat;
    padding-left: 170px;
    right: 0;
    top: 0;
    height: 100px; }
    .header-middle .right .search {
      width: 200px;
      padding: 5px;
      background-color: #fff; }
      .header-middle .right .search a {
        color: #fff; }
      .header-middle .right .search input.queryfield {
        width: 60%;
        padding: 4px;
        background: #dcd6d0;
        border-right: none;
        margin-right: 0;
        border-radius: 4px 0 0 4px; }
      .header-middle .right .search input.button {
        background: #108082;
        border-left: none;
        padding: 4px 8px;
        color: #fff;
        float: none;
        border-radius: 0 4px 4px 0;
        margin-left: -3px; }

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

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

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

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

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

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

/*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: 260px;
    width: 100%;
    padding: 0;
    padding-right: 20px;
    /*Right*/ }
    .main .sidebar.aside {
      padding: 0;
      padding-left: 20px; }

/*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%; }
  /*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) {
  .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 #fff;
      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,
  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 #91d6d6; }
    .navi-left .nav-list {
      display: none; }
      .navi-left .nav-list.nav-active {
        border-bottom: 6px solid #91d6d6;
        /*margin-top: 5px;*/ }
      .navi-left .nav-list li {
        text-align: center; }
        .navi-left .nav-list li a {
          color: #000;
          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: #fff; }
        .navi-left ul.vertical li .active-trail a {
          font-weight: bold; }
        .navi-left ul.vertical li ul.level1 li a {
          background-color: #fff; }
        .navi-left ul.vertical li ul.level3 li a {
          background-color: #fff; }
        .navi-left ul.vertical li ul.level3 li.active-trail a {
          background-color: #fff; }
    .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 #91d6d6; }
    .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: #91d6d6; }
      .top-navi li.home a {
        width: auto;
        text-indent: -9999px;
        background: #91d6d6 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: #91d6d6 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: #91d6d6; } }

@media only screen and (max-width: 570px) {
  .extra-navi {
    margin: 10px 0 10px;
    border-radius: 3px; }
  .header-middle {
    background-color: #fff;
    background: #fff; }
    .header-middle .left {
      background: #fff; }
    .header-middle .right {
      top: 35px; }
      .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; } }

@media only screen and (max-width: 1200px) {
  body {
    background: none; }
  .header-middle .image-bg {
    display: none; } }

.carousel {
  position: relative; }
  @media only screen and (max-width: 768px) {
    .carousel {
      display: none; } }

.carousel-inner {
  max-width: 2000px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden; }
  .carousel-inner .item {
    position: relative;
    display: none;
    -webkit-transition: 0.6s ease-in-out left;
    -moz-transition: 0.6s ease-in-out left;
    -o-transition: 0.6s ease-in-out left;
    transition: 0.6s ease-in-out left; }
    .carousel-inner .item .img-fluid {
      max-width: 100%;
      width: 100%;
      height: auto;
      vertical-align: middle; }
    .carousel-inner .item .carousel-caption {
      width: 100%;
      max-width: 996px;
      position: relative;
      margin: 0 auto; }
      .carousel-inner .item .carousel-caption .carousel-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) {
          .carousel-inner .item .carousel-caption .carousel-caption-inner {
            position: static;
            display: block;
            padding: 10px 10px 5px 10px;
            width: 100%;
            max-width: 100%; } }

.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block; }

.carousel-inner > .active {
  left: 0; }

.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%; }

.carousel-inner > .next {
  left: 100%; }

.carousel-inner > .prev {
  left: -100%; }

.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  left: 0; }

.carousel-inner > .active.left {
  left: -100%; }

.carousel-inner > .active.right {
  left: 100%; }

.carousel-control {
  position: absolute;
  top: 40%;
  left: 15px;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  font-size: 60px;
  font-weight: 100;
  line-height: 30px;
  color: #ffffff;
  text-align: center;
  background: #108082;
  border: 3px solid #ffffff;
  -webkit-border-radius: 23px;
  -moz-border-radius: 23px;
  border-radius: 23px;
  opacity: 0.5;
  filter: alpha(opacity=50); }

.carousel-control.right {
  right: 15px;
  left: auto; }

.carousel-control:hover,
.carousel-control:focus {
  color: #ffffff;
  text-decoration: none;
  opacity: 0.9;
  filter: alpha(opacity=90); }

.carousel-indicators {
  display: none;
  position: absolute;
  bottom: 15px;
  left: 48%;
  z-index: 5;
  margin: auto;
  list-style: none; }

.carousel-indicators li {
  display: block;
  float: left;
  width: 10px;
  height: 10px;
  margin-left: 5px;
  text-indent: -999px;
  background-color: #ccc;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 5px; }

.carousel-indicators .active {
  background-color: #fff; }

.columns_4 {
  float: left;
  width: 25%; }
  @media only screen and (max-width: 768px) {
    .columns_4 {
      float: none;
      width: 100%; } }

.columns_2 {
  float: left;
  width: 50%;
  padding-right: 30px; }
  @media only screen and (max-width: 768px) {
    .columns_2 {
      float: none;
      width: 100%;
      padding: 0; } }
  .columns_2 img {
    display: block;
    width: 100%; }

.rightside {
  padding-left: 30px;
  padding-right: 0px; }
  @media only screen and (max-width: 768px) {
    .rightside {
      padding: 0; } }

/*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: #fff;
    outline: 0;
    -webkit-transition: top .1s ease-in,background .5s linear;
    transition: top .1s ease-in,background .5s linear;
    height: 35px; }
