/*<license>
Copyright (c) 2010, 2011, triptic bv
All Rights Reserved.

This source is subject to the qdo LICENSE AGREEMENT.
Please see the 'License.txt' file for more information.
All other rights reserved.

THIS CODE AND INFORMATION ARE PROVIDED "AS IS" WITHOUT WARRANTY OF ANY
KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
PARTICULAR PURPOSE.
</license>*/

/* SYSTEM MESSAGE */
div.system-message                                          { position: relative; top: 0; right: 0; left: 0; height: 66px; padding: 0 20px; background: #074c64; text-align: center; }
div.system-message div.centersite                           { display: table; height: 100%; color: #ffffff; font-size: 15px; font-weight: bold; }
div.system-message div.centersite button                    { position: absolute; right: -16px; margin: 12px 0; padding: 2px; background: transparent; }
div.system-message span.system-message-wrapper              { display: table-cell; vertical-align: middle; }
div.system-message span.system-message-text                 { padding-right: 5px; }
div.system-message span.system-message-links                { color: #ffffff; }
div.system-message span.system-message-links>span,
div.system-message span.system-message-links>a              { display: table-row; text-decoration: underline; text-align: left; cursor: pointer; color: #ffffff; }
div.system-message span.system-message-links>span:hover,
div.system-message span.system-message-links>a:hover        { color: #eeeeee; }

div.sitewrap.system-message-active                          { padding: 120px 0 0 0; }

/* intro */
div.mainwrap.centersite.homepage                        { max-width: none; background: #ffffff url("../images/background_forest.svg") center bottom  no-repeat; -webkit-background-size: 100% auto; background-size: 100% auto; }
div.hpwidecontent                                       { max-width: 1200px; margin: 0 auto; }
div.intro                                               { font-size: 15px; }
div.intro>div.itemleft                                  { margin: 0; padding: 0; background: none; border: none; text-align: left; line-height: 20px; color: #313131;  }
div.intro>div.itemleft a.flowbutton                     { max-width: 300px; padding-left: 35px; padding-right: 35px; margin: 0 0 6px; }
div.intro>div.itemleft h1                               { display: none; }
div.intro>div.itemleft h3                               { color: #98194e; }
div.intro>div.itemright                                 { margin-bottom: 30px; background: #ffffff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.2); -moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.2); box-shadow: 1px 1px 5px rgba(0,0,0,0.2); }

/*tabbox*/
div.intro div.tabbox                                                  {  }
div.intro div.tabbox>ul                                               { position: relative; display: block; margin: 0; padding: 0; list-style: none; background: #c8ca4f; behavior: url('htc/PIE.htc'); border: 2px solid #c8ca4f; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
div.intro div.tabbox>ul>li                                            { border-bottom: 2px solid #ffffff; }
div.intro div.tabbox>ul>li:last-child                                 { border-bottom: none; }
div.intro div.tabbox>ul>li>a                                          { position: relative; display: block; color: #074c64; text-decoration: none; padding: 10px; border: solid transparent; border-width: 2px; }
div.intro div.tabbox>ul>li>a>img                                      { position: absolute; right: 10px; top: 17px; -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg);
                                                                        -webkit-transition: transform 350ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
                                                                           -moz-transition: transform 350ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
                                                                             -o-transition: transform 350ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
                                                                                transition: transform 350ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */

                                                                        -webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);
                                                                           -moz-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);
                                                                             -o-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);
                                                                                transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
}

div.intro div.tabbox>ul>li.selected>a                                 { background: #ffffff; }
div.intro div.tabbox>ul>li.selected>a>img                             { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); }
div.intro div.tabbox>ul>li>div.tabcontent                             { display: none; overflow: hidden; background: #ffffff; border-top: 1px solid #cfd065; }
div.intro div.tabbox>ul>li.selected>div.tabcontent                    { display: block; }
div.tabcontent div.innertab                                           { padding: 15px; }
div.tabcontent div.note                                               { font-style: italic; font-size: 12px; color: #333333; }
div.tabcontent div.note a                                             { color: #16576d; }

/*lyme tool*/
div.lymetool                                                          { position: relative; margin: 40px 0 0; }
div.lymetool>div.map                                                  { padding-top: 110px; }
div.lymetool>div.map>img                                              { max-width: 100%; height: auto; }
div.lymetool>div.options                                              { margin: 0 6px 0 0; }

/*LymeTool slider*/
div.lymetool div.sliderwrap div.slider                                { height: 31px; }
div.lymetool div.yearslider                                           { }
div.lymetool div.sliderwrap ul.years                                  { position: absolute; z-index: 0; top: 18px; left: 0; margin: 0; padding: 0; list-style: none; }
div.lymetool div.sliderwrap ul.years li                               { float: left; display: inline; width: 19px; margin: 0 0 0 21px; text-align: right; }
div.lymetool div.sliderwrap ul.years li:first-child                   { margin: 0; }

/*LymeTool townselector autocomplete*/
div.lymetool div.townselector                                         { margin: 0 0 8px; display: inline-block; }
div.lymetool div.townselectorLoading                                  { background: red; }
div.lymetool div.townselector input.ui-autocomplete-input             { position: relative; float: left; width: 178px; border: 1px solid #9e9e9e; padding: 4px; height: 16px; -webkit-border-radius: 3px 0 0 5px; -moz-border-radius: 3px 0 0 5px; border-radius: 3px 0 0 5px; behavior: url('htc/PIE.htc'); }
div.lymetool div.townselector a.selectbutton                          { float: left; cursor: pointer; font-family: Arial, Helvetica, sans-serif; padding: 0; margin: 0; width: 25px; height: 26px; border: none; overflow: visible; position: relative; display: inline-block; background: #98194e url(../images/sprite_tool.png) 8px -254px no-repeat; color: #ffffff; font-weight: bold; font-size: 14px; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; behavior: url('htc/PIE.htc'); }
div.lymetool div.townselector a.selectbutton:hover                    { background: #4d4d37 url(../images/sprite_tool.png) 8px -254px no-repeat; }
div.lymetool div.townselector a.selectbutton::-moz-focus-inner        { border: 0; padding: 0; }
ul.ui-autocomplete                                                    { z-index: 99; width: 172px; background: #FFFFFF; max-height: 200px; overflow-y: scroll; margin: 0; padding: 4px; list-style: none; border: 1px solid #9e9e9e; -webkit-border-radius: 5px; -moz-border-radius: 3px; border-radius: 5px; behavior: url('htc/PIE.htc'); }
ul.ui-autocomplete li                                                 { padding: 2px 0; }
ul.ui-autocomplete li a                                               { cursor: pointer; display: block; }

/*LymeTool lymeinfo*/
div.lymetool div.lymeinfo                                             { }
div.lymetool div.lymeinfo h5                                          { font-size: 16px; color: #000000; }
div.lymetool div.legenda div.note                                     { margin: 12px 0; }

/*LymeTool legenda*/
div.lymetool div.legenda                                              { position: absolute; z-index: 10; bottom: calc(100% - 110px); margin: 0 0 22px; color: #333333; }
div.lymetool div.legenda>ul                                           { margin: 5px -13px 0 0; padding: 0; list-style: none; font-size: 12px; }
div.lymetool div.legenda>ul>li                                        { float: left; width: 100px; height: 14px; background: red; margin: 3px 13px 0 0; background: url(../images/sprite_tool.png) 0 -350px no-repeat; }
div.lymetool div.legenda>ul>li span                                   { display: block; float: left; width: 29px; margin: 0 4px 0 0; height: 12px; border: 1px solid #000000; }
div.lymetool div.legenda>ul>li span.levelone                          { background: #ffffd4; }
div.lymetool div.legenda>ul>li span.leveltwo                          { background: #fff433; }
div.lymetool div.legenda>ul>li span.levelthree                        { background: #fecc5c; }
div.lymetool div.legenda>ul>li span.levelfour                         { background: #fd8d3c; }
div.lymetool div.legenda>ul>li span.levelfive                         { background: #f03b20; }
div.lymetool div.legenda>ul>li span.levelsix                          { background: #bd0026; }

/*expectationtool and explanationtool*/
div.expectationtool                                                   {}
div.map                                                               { position: relative; z-index: 0; }
div.mapcontrols                                                       { position: absolute; z-index: 999; top: 0; left: 0; }
div.toolbar                                                           { position: relative; padding: 15px; background: #ffffff; }

/*player expectationtool and explanationtool */
div.expectationtool div.map                                           { padding-top: 95px; max-width: 361px; }
div.expectationtool div.player                                        { position: relative; padding: 12px 9px 9px; margin: 0 0 16px; background: #e9e9bf; border: 1px solid #cfd065; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
div.expectationtool div.sliderwrap                                    { width: 193px; margin: 0 auto; background: url(../images/sprite_tool.png) 0 -523px no-repeat; }

div.expectationtool div.sliderwrap div.slider                         { height: 31px; width: 187px; }
div.expectationtool div.sliderwrap ul.indicator,
div.explanationtool div.sliderwrap ul.indicator                       { position: absolute; z-index: 0; top: 17px; left: 0; margin: 0; padding: 0; list-style: none; width: 193px; }
div.expectationtool div.sliderwrap ul.indicator li,
div.explanationtool div.sliderwrap ul.indicator li                    { float: left; width: 49%; text-align: right; }
div.expectationtool div.sliderwrap ul.indicator li:first-child,
div.explanationtool div.sliderwrap ul.indicator li:first-child        { text-align: left; }

/*expectationtool*/
div.expectationtool div.player div.controlbtn                         { position: absolute; z-index: 99; top: 20px; left: 76px; width: 40px; height: 37px; }
div.expectationtool div.player div.controlbtn a                       { display: block; width: 40px; height: 37px; background: url(../images/sprite_tool.png) 0 -614px no-repeat; }
div.expectationtool div.player div.controlbtn a.pause                 { background: url(../images/sprite_tool.png) -180px -614px no-repeat; }
div.expectationtool div.player div.controlbtn a:hover                 { text-decoration: none; }

div.expectationtool div.legenda                                       { color: #333333; }
div.expectationtool div.legenda.note                                  { margin: 0 0 16px; }
div.expectationtool div.legenda>ul                                    { margin: 5px -13px 0 0; padding: 0; list-style: none; font-size: 12px; }
div.expectationtool div.legenda>ul>li                                 { float: left; width: 106px; height: 14px; margin: 3px 7px 0 0; padding: 0; }
div.expectationtool div.legenda>ul>li span                            { display: block; float: left; width: 29px; margin: 0 4px 0 0; height: 12px; border: 1px solid #000000; }
div.expectationtool div.legenda>ul>li span.low                        { background: #c8ca4f; }
div.expectationtool div.legenda>ul>li span.medium                     { background: #42828d; }
div.expectationtool div.legenda>ul>li span.high                       { background: #d78369; }
div.expectationtool div.legenda>ul>li span.extreme                    { background: #981a4d; }

/*explanationtool*/
div.explanationtool div.map                                           { padding-top: 138px; }
div.explanationtool div.slider span.ui-slider-handle>span             { width: 83px; min-height: 47px; margin: -56px 0 0 -37px; text-align: center; }
div.explanationtool div.slider span.ui-slider-handle:hover>span.tooltip,
div.explanationtool div.slider span.ui-state-focus>span.tooltip       { display: block; }

div.explanationtool div.playerwrap                                    { margin-bottom: 16px; }
div.explanationtool div.sliderwrap ul.indicator                       { width: 223px; }
div.explanationtool div.sliderwrap div.slider                         { height: 31px; }
div.explanationtool div.legenda                                       { color: #333333; padding: 15px 0 0; }
div.explanationtool div.legenda>ul                                    { margin: 5px 0 0 0; padding: 0; list-style: none; font-size: 12px; }
div.explanationtool div.legenda>ul>li                                 { position: relative; float: none; width: auto; min-height: 21px; margin: 3px 7px 4px 0; padding: 0 0 0 26px; line-height: 21px; }
div.explanationtool div.legenda>ul>li span:first-child                { position: absolute; left: 0; width: 21px; height: 21px; margin: 0 4px 0 0;}
div.explanationtool div.legenda>ul>li span.tb                         { background: url(../images/sprite_legenda_melding.png) 0 0 no-repeat; }
div.explanationtool div.legenda>ul>li span.em                         { background: url(../images/sprite_legenda_melding.png) -39px 0 no-repeat; }
div.explanationtool div.legenda>ul>li span.other                      { background: url(../images/sprite_legenda_melding.png) -78px 0 no-repeat; }
div.explanationtool div.legenda>ul>li span.fever                      { background: url(../images/sprite_legenda_melding.png) -117px 0 no-repeat; }

/* show legenda above map */
div.expectationtool div.legenda:not(.note),
div.explanationtool div.legenda                                       { position: absolute; z-index: 10; bottom: calc(100% + 505px); left: 15px; right: 15px; }
div.expectationtool div.legenda:not(.note)                            { bottom: calc(100% + 511px); }

/* newslist */
div.hpnews>div.item                                                   { margin-bottom: 30px; }
div.hpnews>div.item>div.metadata                                      { font-size: 14px; }
div.hpnews>div.item>div.thumb                                         { float: none; overflow: hidden; width: 80px; height: 80px; margin: 8px 0 0 0; border: none; background: #FFFFFF; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
div.hpnews>div.item>div.thumb a                                       { display: table-cell; width: 80px; height: 80px; vertical-align: middle; }
div.hpnews>div.item>div.thumb img                                     { width: 80px; height: auto; }
div.hpnews div.item div.thumb                                         { width: 80px; }
div.hpnews div.item div.thumb+div.summary                             { margin: -2px 0 0 100px; min-height: 80px; }

/*registratiebuttons tekenmeldingen */
a.flowbuttontab                                                       { position: relative; background: #98194e; display: block; padding: 2px; margin: 0 0 10px 0; color: #ffffff; font-weight: bold; font-size: 14px; line-height: normal; cursor: pointer; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
                                                                        behavior: url('htc/PIE.htc'); }
div.wysiwyg p a.flowbuttontab                                         { text-decoration: none; }
a.flowbuttontab>span.corner                                           { display: block; text-align: left; padding: 6px 8px; }
a.flowbuttontab:hover                                                 { text-decoration: none; background: #074C64; }

/* Responsive */
@media screen and (min-width: 630px) {
    div.map                                     { float: left; position: relative; width: 60%; z-index: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    div.explanationtool div.map,
    div.expectationtool div.map,
    div.lymetool div.map                        { padding-top: 0; border-top: 0; }

    div.expectationtool div.legenda:not(.note),
    div.explanationtool div.legenda             { position: relative; left: 0; right: 0; bottom: 0; margin: 30px 0; background: none; border: none; }
    div.expectationtool div.legenda.note        { margin: 0 0 32px; }

    div.itemright div.toolbar                   { float: left; width: 40%; padding: 10px 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; vertical-align: top; }

    div.lymetool > div.options                  { float: right; width: 213px; }
    div.lymetool div.legenda                    { position: relative; bottom: 0; }

    div.hpnews                                  { margin: 0 -10px 0;}

    div.hpnews div.item                         { float: left; width: 50%; margin: 0; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; vertical-align: top; }
    div.hpnews div.item ~ div.item              { margin: 0; padding: 0 10px 30px; }

    div.hpnews div.item:last-child              { padding-bottom: 0; }


}

@media screen and (min-width: 768px) {
    /* Intro homepage */

    div.intro div.tabbox>ul                     { height: 543px; border: none; }
    div.intro div.tabbox>ul>li                  { float: left; }
    div.intro div.tabbox>ul>li>a                { float: left; padding: 5px 35px 10px 10px; margin: 5px 5px 0 5px; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; }
    div.intro div.tabbox>ul>li>a>img            { top: 12px; }
    div.intro div.tabbox>ul>li>div.tabcontent   { position: absolute; top: 42px; left: 0; right: 0; bottom: 0; }
    div.intro div.tabbox>ul>li.selected>div.tabcontent   {
                                                -webkit-transition: all 10ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
                                                   -moz-transition: all 10ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
                                                     -o-transition: all 10ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
                                                        transition: all 10ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
    }

    div.tabcontent div.innertab                 { padding: 27px 19px 20px 25px; }

    div.explanationtool div.playerwrap          { margin-top: 32px; }

    /*lyme tool*/
    div.lymetool                                { margin: 40px 0 0; }
    div.lymetool>div.map                        { float: left; }
    div.lymetool>div.options                    { width: calc(40% - 6px); }
}

@media screen and (min-width: 1024px) {
    div.sitewrap.system-message-active                          { padding: 0; }

    div.itemleft                               { float: left; width: 33.33333333333333%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    div.itemright                              { float: right; width: calc(66.66666666666667% - 5px); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

    div.intro>div.itemleft div.wysiwyg         { padding: 0 60px 0 0; }

    div.hpnews div.item                        { width: 33.33333333333333%; margin: 0; padding: 0 10px; }
    div.hpnews div.item ~ div.item             { padding: 0 10px 0 0; }
}