@font-face { /* declare fonts */
    font-family: 'Inconsolata'; /*"Museo 300";*/
    src: url("../fonts/Inconsolata-Regular.ttf");
    src: local("Inconsolata"), local("Inconsolata"),
    url("../fonts/Inconsolata-Regular.ttf") format("truetype");

}




@font-face {
    font-family: SourceSansPro;
    src: url('../fonts/SourceSansPro-Regular.ttf')format("truetype");
}
@font-face {
    font-family: SourceSansPro;
    src: url('../fonts/SourceSansPro-Bold.ttf')format("truetype");
    font-weight: bold;
}
@font-face {
    font-family: SourceSansPro;
    src: url('../fonts/SourceSansPro-Italic.ttf')format("truetype");
    font-style: italic;
}
@font-face {
    font-family: SourceSansPro;
    src: url('../fonts/SourceSansPro-BoldItalic.ttf')format("truetype");
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: SourceSansPro;
    src: url('../fonts/SourceSansPro-Light.ttf')format("truetype");
    font-weight: 300;
}
@font-face {
    font-family: SourceSansPro;
    src: url('../fonts/SourceSansPro-LightItalic.ttf')format("truetype");
    font-style: italic;
    font-weight: 300;
}
@font-face {
    font-family: SourceSansPro;
    src: url('../fonts/SourceSansPro-ExtraLight.ttf')format("truetype");
    font-weight: 200;
}
@font-face {
    font-family: SourceSansPro;
    src: url('../fonts/SourceSansPro-ExtraLightItalic.ttf')format("truetype");
    font-style: italic;
    font-weight: 200;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;

    /*overflow: hidden;*/
    color: #333;
    background-color: #fff;
    font-family: 'SourceSansPro',Helvetica, Arial, sans-serif;
    font-size: 1em;
    line-height: 1.2em;
}


body a, body a:visited {
    color: #333;
}

#wrapper{
    visibility:hidden;
}

#header {
    width:100%;
    background-color: #fff;
    height:40px;

}
#header-inner, #footer-inner{
    overflow: hidden;
    padding: 8px 0 8px 20px;
    width:100%;
    margin: 0px auto
}
#header span{
    display: block;
    float: left;
}

.project-title{
    /*padding: 10px 10px 10px 30px;
    font-family: 'SourceSansPro';
    line-height: 1;
    font-weight: 300;
    font-stretch: expanded;
    font-variant: small-caps;
    font-size: 1.8em;
    color: #292929;
	font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700; */
	font-family: Lato, 'SourceSansPro', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
	font-size: 19px;
	line-height: 25px;
	color: #080808;
	padding: 20px 0 0 30px;    
}
.project-title a { text-decoration: none; }
.project-title a:hover { color: #27be79; }
.project-title .btn_back { 
	margin-right: 10px; 
	font-weight: 400; 
	font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; 
	font-size: 22px;
	line-height: 18px;
	display: inline-block;
	cursor: pointer;
}

#footer{
    width:100%;
    height:12px;
    background-color: #ccedea;
    position:absolute;
    height:0px;
    bottom:0;

}


#diagnostics{
    position:absolute;
    height:600px;
    top:0;
    right:0;
    width:400px;
    overflow: scroll;
    z-index: 1000;
    background-color: #fff;

}




#loader{
    background: #fefefe;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    width: 300px;
    height: 150px;

    margin: auto;
    position: absolute;
    display:block;
    z-index:1500;

}

#loading-text{
    line-height: 150px;
    font-size: 2em;
    text-align: center;
    color: #999;

}


#container-outer {
    width: 100%;
    display: block;
    position: absolute;
    bottom:8px;
    top:40px;
    min-width:1024px;
    min-height:600px;
    overflow: hidden;
}


/*
#container-outer {
    width: 100%;
    display: block;
}
*/

#container {

    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;


    display:block;
}

#map{
    position:relative;
    height:65%;/*60%;*/
    background-color: #fff;
}
#timeline{
    height:35%;/*40%;*/
    width:100%;
    background-color: rgba(255, 255, 255, 0);

}

#score{
    background-color: rgba(255, 255, 255, 0);
    display: inline-block;
    float:right;
    width:600px;
    height:100%;
    margin-right:10px;

}

#slider{
    background-color: #f0f0f0;
    display: block;
    width:100%;
}



#legend{
    width:200px;
    height:100%;

    display: block;
    position:relative;
}

#data-panel{
    width:100%;
    height:60px;
    background-color: #fff;
    display: block;
    position:relative;
}

.data-canvas-overlay{
    position:absolute;
    display:block;
    top:0;
    left:0;

}

#data-type-label{
    position:absolute;
    left:40px;
    top:-24px;
    font-size: 0.9em;
    font-weight: 300;

    text-transform: uppercase;
}

#data-type-title{
    position:absolute;
    left:220px;
    width:200px;
    font-size: 1.2em;
    font-weight: 300;
    text-transform: uppercase;

}


#data-type-buttons{
    position:absolute;
    top:0;
    left:40px;
    height:30px;
    background-color: #ffffff;

}

.data-type-but{
    padding:0 3px;


}


.data-type-but a{
    outline:0;

}

/*a:link.tooltip {*/
    /*opacity: 0.6;*/
/*}*/
/*a:hover.tooltip {*/
    /*opacity: 0.9;*/
/*}*/
/*a.selected.tooltip {*/
    /*opacity: 1;*/
/*}*/


.data-type-but a:link{
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1em;

}

.data-type-but > a:link > .sensor-but {
    width:20px;
    height:20px;
    opacity: 0.5;
    color: #373737;

    border-radius:20px;


}

.data-type-but > a:link > .sensor-but > i{
    width:20px;

    padding: 3px 0px;
    text-align: center;
    line-height: 1em;
    opacity: 0.8;
    color: #373737;


}
.data-type-but > a:hover > .sensor-but {
    /*background: #888888;*/
    opacity: 1;
    color: #373737;


}
.data-type-but > a:active > .sensor-but {
    /*background: #888888;*/

}
.data-type-but > a.selected > .sensor-but {
    /*background: #666666;*/
    opacity: 1;

}
.place{
    position:absolute;
    display:block;
    cursor:pointer;
}

.place img {
    /*opacity: .7;*/

    transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;

}
.place img:hover{
    opacity: 1;
    -webkit-transform: scale(1.2) rotateZ(2deg);
    -ms-transform: scale(1.2) rotateZ(2deg);
    transform: scale(1.2) rotateZ(2deg);


}

.place a{
    position: relative;
    right: -15%;

}

.place a.place-name{
    font-variant: small-caps;
    font-weight: 300;
    font-size: 1.4em;
    line-height: 1.4em;
    text-decoration: none;
    font-stretch: expanded;

    /*top: 108%;*/
}

.place a.place-desc{
    left: -5%;
    font-weight: 300;
    font-size: 1em;
    line-height: 1.4em;
    text-decoration: none;
    font-stretch: expanded;
    color: #141414;
    background-color: rgba(255, 255, 255, 0.85);
    top: -50px;
    min-width: 270px;
    /*text-align: center;*/
}




.legend-label{
    position:absolute;
    display:block;
    text-align: right;
    width:170px;
    right:10px;
    font-size: 0.9em;
    font-weight: 300;

    text-transform: uppercase;
}

.timeline-date-label{
    position:absolute;
    display:block;
    text-align:left;
    bottom:0;
    font-size: 0.75em;
    font-weight: 300;
    font-style: italic;

}

.timeline-tooltip{
    position:absolute;
    color: #4f4f4f;
    background-color: rgba(255, 255, 255, 0.75);
    padding: 3px;
    font-size:  0.8;
    font-style: italic;
}

#play-but{
    position:absolute;
    bottom:0px;
    right:10px;
    width:50px;
    height:30px;
    background-color: #bbb;


    border: none;
    color: white;

    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    outline: none;

}

#play-but:hover{
    background-color: #666;
}

.timeline-image-thumb{
    position:absolute;
    top:3px;
    color:#666666;

}



.timeline-image{
    position:absolute;
    top:-50px;
    display:none;
    border: 6px solid #ffffff;

}

.timeline-audio{
    position:absolute;
    top:3px;
    color:#666666;
}

.timeline-image img:hover {

}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
   /* border-bottom: 1px dotted black;*/ /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgb(57, 57, 57);
    color: #fff;
    text-align: center;
    padding: 5px 2px;
    border-radius: 0;
    opacity: 1;
    font-size: 0.85em;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;

    /* left tooltip */
    /*
    top: -5px;
    right: 105%;
    */

    /* bottom */
    width: 200px;
    top: 120%;
    left: 50%;
    margin-left: -100px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

.tooltip .tooltiptext.type-buts {
    width: 120px;
    margin-left: -60px;
    opacity: 1;
}
/* right arrow */
/*
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
}
*/

/* top arrow */
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}
/**
 * Dragdealer.js 0.9.8
 * http://github.com/skidding/dragdealer
 *
 * (c) 2010+ Ovidiu Cherecheș
 * http://skidding.mit-license.org
 */

.dragdealer {
    position: relative;
    height: 30px;
    background: #EEE;

}
.dragdealer .handle {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}
.dragdealer .grey-bar {
    width: 30px;
    height: 30px;
    background: #888;
    color: #FFF;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
}
.dragdealer .disabled {
    background: #c0c0c0;
    color: #e0e0e0;
}

.dragdealer .grey-bar:hover {
    background: #666;
}


.lightcolor {color: #eecd41;}
.airtempcol {color: #f46873;}

.airHumcolor {color: #25c1e1;}
.soilTemptempcol {color: #ea9161;}

.soilHumcolor {color: #69d37a;}
.airpresscol {color: #9c95e0;}