/*******************************************************************
  FONT-FACES
  ******************************************************************/

@font-face {
  font-family: "KarbidComp";
  src: url("../fonts/KarbidWeb.eot?#iefix") format("embedded-opentype"), url("../fonts/KarbidWeb.woff") format("woff"), url("../fonts/KarbidComp.ttf") format("truetype");
  font-style: normal;
  font-weight: normal
}
@font-face {
  font-family: "KarbidComp";
  src: url("../fonts/KarbidWeb-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/KarbidWeb-Bold.woff") format("woff"), url("../fonts/KarbidComp-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: bold
}
/*
@font-face {
  font-family: "KarbidComp-Black";
  src: url("../fonts/KarbidWeb-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/KarbidWeb-Black.woff") format("woff"), url("../fonts/KarbidComp-Black.ttf") format("truetype");
  font-style: normal;
  font-weight: bold
}
@font-face {
  font-family: "KarbidComp-BoldItalic";
  src: url("../fonts/KarbidWeb-BoldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/KarbidWeb-BoldItalic.woff") format("woff"), url("../fonts/KarbidComp-BoldItalic.ttf") format("truetype");
  font-style: italic;
  font-weight: bold
}
@font-face {
  font-family: "KarbidSlabComp";
  src: url("../fonts/KarbidSlabWeb.eot?#iefix") format("embedded-opentype"), url("../fonts/KarbidSlabWeb.woff") format("woff"), url("../fonts/KarbidSlabComp.ttf") format("truetype");
  font-style: normal;
  font-weight: normal
}
@font-face {
  font-family: "KarbidSlabComp-Bold";
  src: url("../fonts/KarbidSlabWeb-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/KarbidSlabWeb-Bold.woff") format("woff"), url("../fonts/KarbidSlabComp-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: bold
}
@font-face {
  font-family: "KarbidSlabComp-Black";
  src: url("../fonts/KarbidSlabWeb-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/KarbidSlabWeb-Black.woff") format("woff"), url("../fonts/KarbidSlabComp-Black.ttf") format("truetype");
  font-style: normal;
  font-weight: bold
}
@font-face {
  font-family: "KarbidSlabComp-BoldItalic";
  src: url("../fonts/KarbidSlabWeb-BoldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/KarbidSlabWeb-BoldItalic.woff") format("woff"), url("../fonts/KarbidSlabComp-BoldItalic.ttf") format("truetype");
  font-style: italic;
  font-weight: bold
}
*/

/*******************************************************************
  HTML
  ******************************************************************/

html {
  font-family: KarbidComp, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body {
  margin-left:auto;
  margin-right:auto;
  max-width:900px;
  width:100%;
  background-color: #ccc;
  background-image: url("http://www.hel.fi/wps/wcm/connect/a622ce10-b0ba-4e08-a29f-f05d878d46f2/kauppahalli.jpg?MOD=AJPERES");
  background-attachment: fixed;
    background-color: #354560;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
h1 {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 8px 0;
  transition: all 0.5s ease-out;
}
div.info {
  border-bottom: 1px solid #06c;
  border-top: 1px solid #06c;
  color: black;
  font-size: 13px;
  margin-bottom: 6px;
  max-height: 6em;
  overflow: hidden;
  padding: 6px 0;
  transition: max-height 0.5s ease-out, color 2s ease-out 1s, padding 0.5s ease-out, border-width 0.5s ease-out;
}
  div.empty {
    border-width: 0px;
    color: #06c;
    max-height: 0px;
    padding: 0;
  }
  div.info > span.title {
    font-weight: bold;
  }

#noSVGWarning {
  display: none;
}
  #noSVGWarning img {
    width: 310px;
    height: auto;
  }
  .no-svg #noSVGWarning, .no-inlinesvg #noSVGWarning {
    display: block;
  }


/*******************************************************************
  SVG
  ******************************************************************/

svg#TA {
  background-color: #fff;
  font-size: 13px;
  max-width: 860px;
  width:100%;
  margin-left:auto;
  margin-right:auto;
  margin-top:0;
  margin-bottom:0;
  overflow:hidden;
}
  text {
    cursor: default;
  }
  text.units {
    font-size: 11px;
    text-transform: uppercase;
  }
  .breadcrumbs {
    color: rgb(0, 114, 198);
    font-weight: bold;
  }
  .breadcrumbs .bcNormal, .breadcrumbs .bcRoot {
    font-size: 11px;
  }
  .breadcrumbs .title {
    font-size: 14px;
  }
  .bcSeparator {
    fill: none;
    stroke: #005eb8;
    stroke-width: 1px;
  }
  .breadcrumbs .sum text {
    font-size: 14px;
    font-weight: normal;
  }
  .percentage {
    fill: #999;
  }
  .stay rect {
    opacity: 0.7;
  }
  g.startData rect, g.startData text {
    cursor: pointer;
  }
  g:hover.startData rect {
    stroke: black;
    stroke-width: 1px;
  }
  g:hover.startData text {
    fill: #06c;
    text-decoration: underline;
  }
  g.startData text {
    font-size: 18px;
    font-weight: bold;
  }
  .startTitle {
    font-size: 22px;
    font-weight: bold;
  }
  g.startData text.value {
    font-weight: normal;
  }
  g.startData text.firstUnits {
    font-weight: normal;
    text-transform: lowercase;
  }
  polygon.wedge {
    opacity: 0.15;
  }
  .stay .wedge {
    opacity: 0.15;
  }
  g:hover.datarow rect {
    stroke: black;
    stroke-width: 1px;
  }
  g:hover.datarow path.connector {
    stroke: black; /* #06c; */
  }
  g:hover.datarow text {
    fill: #c60;
  }
  g.hasChildren,
  g.hasDetails,
  g.hasChildren text,
  g.hasDetails text {
    cursor: pointer;
  }
    g:hover.hasChildren text,
    g:hover.hasDetails text {
      fill: #06c;
      text-decoration: underline;
    }
  g.smallSum text {
    /* fill: #999; */
  }
  path.connector {
    fill: none;
    stroke: #999; /* #06c; #fc6; */
    stroke-width: 1px;
  }
  path.separator {
    fill: none;
    stroke: #ccc; /* #06c; #fc6; */
    stroke-width: 1px;
  }
  g.sum text {
    font-weight: bold;
  }
  g.valueSwapper rect {
    fill: none;
  }
  .quotas {
    margin: 0;
    min-height: 450px;
    padding: 15px 15px 15px 15px;
  }
    .quotas table {
      margin: 0;
      padding: 0;
      width: 100%;
      border-collapse: collapse;
    }
    .quotas h3 {
      font-size: 14px;
      margin: 0px 0px 15px 0px;
      padding: 0px;
    }
    .quotas td {
      font-size: 13px;
      padding: 0.4em 0;
      border-bottom: 1px dotted #005eb8;
    }
      .quotas .value {
        text-align: right;
      }
    .quotas .subheading {
      font-weight: bold;
      padding-top: 20px;
    }
  g.back > rect {
    cursor: pointer;
    fill: none;
    pointer-events: all;
    stroke: none;
  }
  g.back > path {
    cursor: pointer;
    fill: none;
    pointer-events: all;
    stroke: black;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
    g:hover.back > path {
      stroke: #06c;
    }
  rect.background {
    fill: none;
    pointer-events: all;
    /* cursor: w-resize; */
  }
   /*
  g.back > text {
    font-size: 36px;
  }
  */
  
   
  /* Valikko */
  
  select {
    -moz-appearance: none;
    background: #ccc none repeat scroll 0 0;
    border-radius: 4px;
	border: medium none;
    color: #333;
    cursor: pointer;
    display: inline-block;
    font-family: "KarbidComp","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 1.2em;
    margin: 0;
    min-height: 30px;
    padding: 3px;
    width: 95%;
}

select::-ms-expand {
    display: none;
}

@media not all {
select {
    padding-right: 18px;
}
}
label {
    border-radius: 4px;
    min-height: 30px;
    position: relative;
    width: 100%;
	margin-left:18px;
	padding-left:4px;
	padding-right:4px;
}
label::after {
    border-bottom: 1px solid #ddd;
    color: #333;
    content: "<>";
    padding: 0 0 2px;
    pointer-events: none;
    position: absolute;
    right: 8px;
    top: 0px;
    transform: rotate(90deg);
}
label::before {
    background: #f8f8f8 none repeat scroll 0 0;
    content: "";
    display: block;
    pointer-events: none;
    position: absolute;
    right: 6px;
    top: 0;
}
option {
    min-height: 20px;
    padding: 5px 0 5px 5px;
}
div.main-content label {
    width: 100%;
}