/* Default - smartphone / small tablet layout */
@font-face {
    font-family: break_it;
    src: url("BREAKIT.ttf");
}
.sidebar{
  	/*background-color: #200;*/
    /*background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.0));*/
    background-color: rgba(254,240,240,0.30);
    border-bottom: solid 2px #fff;
  	position:absolute;
  	width: 100%;
  	height: 160px;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 21;
}
#whole-label{
    margin-bottom: -2px;
    padding-bottom: 0;
    vertical-align: bottom;
}
.cal-wrapper {
	position: absolute;
	width: inherit;
    z-index:  1;
	text-align: center;
	padding-bottom: 10px;
}
#fatal-info-wrapper{
    text-align: center;
}
.main-content{
	display: absolute;
  	height: 100%;
  	padding-left: 0;
  	margin-left: 0;
}
#map-container{
    position: absolute;
    height: 100%;
    width: 100%;
    text-align: center;
}
#map {
    display: block;
    position: absolute;
    top: 0;
	/*top: 160px;*/
    width: 100%;
	bottom:0;
}
#loading-img{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    margin-top: -62px;
    left: 140px;
}
/*.pure-menu .pure-menu-open .pure-menu-horizontal *{
	background-color: rgba(1,0,0,1);
}*/
.narrow-button{
    width: 16px;
    margin: 2px;
    padding: 2px;
    height: 36px;
}
#current-date-text{
    /*color: #000;*/
    /*text-shadow: 2px 2px 10px #444;*/
}
.slider-menu{
   	position:fixed;
   	height: 80px;
   	bottom: 0; 
   	left: 0;
   	right: 0;
   	/*(background-color: #000;
	background-color: rgba(0, 0, 0, 0.0);
    background: linear-gradient(rgba(250,0,0,0.0), rgba(127,50,50,0.2), rgba(0,0,0,0.4));*/
    background-color: rgb(254,240,240);
    background-color: rgba(254,240,240,0.30);
    border-top: 2px solid #fff;
    border-top: 2px solid rgba(254, 254, 254, 0.5)
}
.play-button{
	border-radius: 24px;
	height: 48px;
	width: 48px;
}
.slider-wrapper{
	position: absolute;
	left: 10px;
}
.button-wrapper{
	bottom: 0;
	left: 10px;
	text-align: center;
	margin: 0 auto;
	margin-top: 10px;
}
#restart-button{
	position: absolute;
	right: 10px;
	top: 18px;
}
#map #attribution{
	top: 0;
}
#restart *{
	color: #fff;
}
#restart *:hover{
	color: #000;
}
.date-wrapper{
	position: absolute;
	color: #fff;
	padding-top: 15px;
	padding-left: 5px;
	font-size: 10pt;
	width: 70px;
}
.year-info{
	position: relative;
	color: #f00;
	padding-left: 10px;
	padding-top: 15px;
	font-size: 16pt;
}

.app-title{
	text-align: center;
	color: #fff;
	margin-top: 0px;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	height: 44px;
	font-size: 48pt;
	font-weight: 100;
	font-family: break_it;
	-moz-animation-delay: 0.2s;
	-moz-animation-duration: 2s;
	background-image: url('../../govhack/img/crash.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 128px;
}
.cal-container{
  	text-align: center;
  	padding: 4px;
}
#cal-heatmap{
  	padding: 5px;
  	color: #000;
}
.cal-wrapper{
    position: relative;
    top: 25%;
}

.text-container div{
  	padding-right: 4px;
  	color: #fff;
}
.form-container{
	margin-top: 0;
	padding-top: 0;
}
.pure-form legend{
    padding-left: 15px;
    padding-right: -15px;
    font-weight: normal;
    /*width: inherit;*/
	margin-top: 0;
}
#cal-heatmap .graph-label{
    fill: #000000;
    fill: rgba(0, 0, 0, 0.66);
    font-size: 12pt;
}
.pure-form-aligned .pure-control-group label,
.pure-form legend,
#fatal-info,
#current-date-text,
h6{
    color: #000000;
    color: rgba(0, 0, 0, 0.66);
}
.pure-form hr{
    color: #000;
}

.pure-form-aligned
.pure-control-group{
	display: inline-block;

}
.pure-form-aligned
.date-options{
	text-align: center;
}
.pure-form legend{
    border-bottom: 2px solid #fff;
    border-bottom: 2px solid rgba(254, 254, 254, 0.5);
    /*width: 265px;*/
}

/*TODO: small landscape screen layout - month picker + heatmap too tall, so remove heatmap but keep vertical layout, maybe narrower */
@media(min-width:34em){
	.app-title{
		margin-top: 20px;
		margin-bottom: 10px;
		height: auto;
		-moz-animation-delay: 0.2s;
	}
    #current-date-text{
        color: #000000;
        color: rgba(0, 0, 0, 0.66);
    }

	.form-container{
		display: block;
	}
    .pure-form-aligned .pure-control-group label{
        left: 0;
        margin-left: -89px;
    }
    .pure-form-aligned .pure-control-group label,
    .pure-form legend,
    #fatal-info,
	.pure-form-aligned 
	.pure-control-group label{
		width: 100px;
	}
	.pure-form select{
		width: 100px;
    }
    .pure-form legend{
        width: 265px;
    }
	.sidebar{
		width: 280px;
		height: 100%;
		bottom: 0;
		top: 0;
        max-height: 100%;
		/*background-color: rgba(192, 64, 32, 0.5);*/
		background-color: rgba(254,240,240,0.30);
		z-index: 999;
        border-right: 2px solid #fff;
        border-right: 2px solid rgba(254, 254, 254, 0.5);

	}
    #whole-label{
        margin-bottom: inherit;
        padding-bottom: inherit;
    }
	.main-content{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		/*left: 280px;*/
		right: 0;
		margin-top: 0;
		z-index: 3;
	}
	.slider-menu{
		left: 280px;
	}

	#map { 
		top: 0;
	}
}