@charset "utf-8";
/* CSS Document */

*{margin:0;padding:0;}

button{
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
outline:none;
border-radius:0;
resize:none;
border:0;
padding:0;
background:transparent;
}
button::-moz-focus-inner{padding:0;border:0;}
button[disabled=disabled]{opacity:.3;cursor:default;}
.clickable{cursor:pointer;}
.hidden{display:none;}

#map-canvas{width:100%;height:100%;position:absolute;}

.container_position{position:fixed;
	width:300px;
	bottom:20px;
	left:50%;
	margin-left:-150px;
	box-sizing:border-box;
	-ms-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

@media only screen and (max-height: 90px){
	.container_position{bottom:0;}
	.container_transition{
		box-shadow:none;
		-ms-box-shadow:none;
		-moz-box-shadow:none;
		-webkit-box-shadow:none;
	}
}

/*Participation = yes*/
.container_transition{
	width:100%;
	height:90px;
	background:url(../img/appBg.png) 0 0;
	overflow:hidden;
	border-radius:4px;
	box-shadow:0 0 8px rgba(0,0,0,.8);
	-ms-box-shadow:0 0 8px rgba(0,0,0,.8);
	-moz-box-shadow:0 0 8px rgba(0,0,0,.8);
	-webkit-box-shadow:0 0 8px rgba(0,0,0,.8);
}
.container_transition li{list-style:none;font-size:0;}

.top_bar{
	display: flex;
	display: -ms-flexbox;
	display: -moz-box;
	display: -webkit-box;
	display: -webkit-flex;
}
.top_bar{width:100%;height:40px;}

.bottom_bar,.share_bar,#error_bar{width:300px;height:50px;float:left;}
.share_bar,#error_bar{margin-top:-50px;text-align:center;line-height:50px;vertical-align:top;}
.bottom_bar,.share_bar{
	background: #333333; /* Old browsers */
	background: -moz-linear-gradient(top,  #000000 0%, #333333 15%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(15%,#333333)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #000000 0%,#333333 15%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #000000 0%,#333333 15%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #000000 0%,#333333 15%); /* IE10+ */
	background: linear-gradient(to bottom,  #000000 0%,#333333 15%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#333333',GradientType=0 ); /* IE6-9 */
}
.bottom_bar li{float:left;}
.share_bar{font-size:0;
	transform:translate3d(100%,0,0);
	-ms-transform:translate3d(100%,0,0);
	-moz-transform:translate3d(100%,0,0);
	-webkit-transform:translate3d(100%,0,0);
	
	transition:transform .5s;
	-ms-transition:-ms-transform .5s;
	-moz-transition:-moz-transform .5s;
	-webkit-transition:-webkit-transform .5s;
}
.share_bar li{width:60px;display:inline-block;float:left;}

#error_bar{font-size:12px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;color:rgba(244,239,233,1);
	background: #b34048; /* Old browsers */
	background: -moz-linear-gradient(top,  #77121c 0%, #b34048 15%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#77121c), color-stop(15%,#b34048)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #77121c 0%,#b34048 15%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #77121c 0%,#b34048 15%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #77121c 0%,#b34048 15%); /* IE10+ */
	background: linear-gradient(to bottom,  #77121c 0%,#b34048 15%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77121c', endColorstr='#b34048',GradientType=0 ); /* IE6-9 */
	
	transform:translate3d(-100%,0,0);
	-ms-transform:translate3d(-100%,0,0);
	-moz-transform:translate3d(-100%,0,0);
	-webkit-transform:translate3d(-100%,0,0);
	
	transition:transform .5s;
	-ms-transition:-ms-transform .5s;
	-moz-transition:-moz-transform .5s;
	-webkit-transition:-webkit-transform .5s;
}

.top_left,.top_right{width:40px;}
#zzz,#minify,#expand,#back,#help{width:40px;height:40px;background:url(../img/navButtons.png);background-size:200px 80px;}
#zzz{background-position:0 0;}
#zzz:hover{background-position:0 -40px;}
#minify{background-position:-40px 0;}
#minify:hover{background-position:-40px -40px;}
#expand{background-position:-80px 0;}
#expand:hover{background-position:-80px -40px;}
#back{background-position:-120px 0;}
#back:hover{background-position:-120px -40px;}
#help{background-position:-160px 0;}
#help:hover{background-position:-160px -40px;}

.bottom_left,.bottom_right{width:60px;}
#share,#locate,#sms,#mail,#fb,#tw,#gplus{width:60px;height:50px;background:url(../img/bottomButtons.png);background-size:420px 100px;vertical-align:top;}
#share{background-position:0 0;}
#share:hover{background-position:0 -50px;}
#locate{background-position:-60px 0;}
#locate:hover{background-position:-60px -50px;}
#sms{background-position:-120px 0;}
#sms:hover{background-position:-120px -50px;}
#mail{background-position:-180px 0;}
#mail:hover{background-position:-180px -50px;}
#fb{background-position:-240px 0;}
#fb:hover{background-position:-240px -50px;}
#tw{background-position:-300px 0;}
#tw:hover{background-position:-300px -50px;}
#gplus{background-position:-360px 0;}
#gplus:hover{background-position:-360px -50px;}

#share,#locate{
	transition:opacity .3s ease .3s;
	-ms-transition:opacity .3s ease .3s;
	-moz-transition:opacity .3s ease .3s;
	-webkit-transition:opacity .3s ease .3s;	
}

.top_center{
	flex: 1;
	-ms-flex: 1;
	-webkit-flex: 1;
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
}
.top_center{line-height:40px;text-align:center;padding:0 8px;}
#title{line-height:16px;display:inline-block;vertical-align:middle;font-size:13px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;color:rgba(86,65,36,1);max-width:204px;max-height:34px;overflow:hidden;
	transition:color.3s ease .3s;
	-ms-transition:color.3s ease .3s;
	-moz-transition:color.3s ease .3s;
	-webkit-transition:color.3s ease .3s;
}
.bottom_center{padding:8px 10px;width:180px;
	box-sizing:border-box;
	-ms-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
#slide{width:100%;height:34px;border-radius:4px;background:#333;padding-top:1px;
	box-sizing:border-box;
	-ms-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-shadow:inset 0px 0px 5px rgba(0,0,0,1),0 1px 0 rgba(255,255,255,.2);
	-moz-box-shadow:inset 0px 0px 5px rgba(0,0,0,1),0 1px 0 rgba(255,255,255,.2);
	-ms-box-shadow:inset 0px 0px 5px rgba(0,0,0,1),0 1px 0 rgba(255,255,255,.2);
	-webkit-box-shadow:inset 0px 0px 5px rgba(0,0,0,1),0 1px 0 rgba(255,255,255,.2);
	transition:background .3s linear;
	-ms-transition:background .3s linear;
	-moz-transition:background .3s linear;
	-webkit-transition:background .3s linear;
}
#slide_button{background:url(../img/appBg.png) 0 0;width:50%;height:98%;position:relative;border-radius:4px;padding:12px 35px 11px 33px;
	box-sizing:border-box;
	-ms-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
	-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
	-ms-box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
	-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
	
	transform:translate3d(100%,0,0);
	-ms-transform:translate3d(100%,0,0);
	-moz-transform:translate3d(100%,0,0);
	-webkit-transform:translate3d(100%,0,0);
	
	transition:transform .5s;
	-ms-transition:-ms-transform .5s;
	-moz-transition:-moz-transform .5s;
	-webkit-transition:-webkit-transform .5s;
}
.slide_button_grip{width:0;height:10px;border-left:1px solid rgba(86,65,36,.7);border-right:1px solid rgba(244,239,233,.7);margin-left:2px;display:inline-block;float:left;}

#slide_yes,#slide_no{font-family:Arial, Helvetica, sans-serif;font-size:16px;text-transform:uppercase;font-weight:bold;height:34px;line-height:34px;width:80px;text-align:center;position:absolute;
	transition:color.3s linear .3s;
	-ms-transition:color.3s linear .3s;
	-moz-transition:color.3s linear .3s;
	-webkit-transition:color.3s linear .3s;
}
#slide_yes{color:rgba(188,165,125,1);
}
#slide_no{color:rgba(244,239,233,1);margin-left:80px;}

.triangle_kingslanding{z-index:15;width:16px;height:10px;overflow:hidden;bottom:60px;position:fixed;left:50%;margin-left:-8px;}
.triangle_kingslanding_inside{width:8px;height:8px;background:url(../img/appBg.png) 0 0;margin-top:-4px;margin-left:4px;
	transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	box-shadow:2px 2px 5px rgba(0,0,0,1);
	-moz-box-shadow:2px 2px 5px rgba(0,0,0,1);
	-ms-box-shadow:2px 2px 5px rgba(0,0,0,1);
	-webkit-box-shadow:2px 2px 5px rgba(0,0,0,1);
}

#app_buttons{width:300px;font-size:0;text-align:center;}
#launch_app,#download_app{
width:48%;
margin:0 1% 10px 1%;
height:40px;
background:#b34048;
border-radius:4px;
box-shadow:0 0 5px rgba(0,0,0,.8);
-moz-box-shadow:0 0 5px rgba(0,0,0,.8);
-ms-box-shadow:0 0 5px rgba(0,0,0,.8);
-webkit-box-shadow:0 0 5px rgba(0,0,0,.8);
color:rgba(244,239,233,1);
font-size:12px;
}

/*Participation = No*/
.no_participation #title{color:rgba(86,65,36,.3);
	transition:color .3s ease .3s;
	-ms-transition:color .3s ease .3s;
	-moz-transition:color .3s ease .3s;
	-webkit-transition:color .3s ease .3s;
}
.no_participation #share,.no_participation #locate{opacity:.3;cursor:default;
	transition:opacity .3s ease;
	-ms-transition:opacity .3s ease;
	-moz-transition:opacity .3s ease;
	-webkit-transition:opacity .3s ease;
}
.no_participation #share:hover{background-position:0 0;}
.no_participation #locate:hover{background-position:-60px 0;}

.no_participation #slide{background:#b34048;
	transition:background .3s linear;
	-ms-transition:background .3s linear;
	-moz-transition:background .3s linear;
	-webkit-transition:background .3s linear;
}
.no_participation #slide_button{left:0;
	transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	-webkit-transform:translate3d(0,0,0);
}

/*Minified*/
#menu_container.minified{width:80px;margin-left:-40px;}
.minified #app_buttons{display:none;}
.minified .container_transition{width:80px;height:40px;margin:auto;}
#menu_container:not(.minified) #expand{display:none;}
.minified #minify{display:none;}
.minified .top_center{padding:0;}
.minified #title{color:rgba(86,65,36,0);width:0;
	transition:color .5s ease;
	-ms-transition:color .5s ease;
	-moz-transition:color .5s ease;
	-webkit-transition:color .5s ease;}
.minified .triangle_kingslanding{bottom:10px;}
.minified .triangle_kingslanding_inside{
	box-shadow:2px 2px 5px rgba(0,0,0,.4);
	-moz-box-shadow:2px 2px 5px rgba(0,0,0,.4);
	-ms-box-shadow:2px 2px 5px rgba(0,0,0,.4);
	-webkit-box-shadow:2px 2px 5px rgba(0,0,0,.4);
}
.minified #slide_yes,.minified #slide_no{
	transition:color 0s linear;
	-ms-transition:color 0s linear;
	-moz-transition:color 0s linear;
	-webkit-transition:color 0s linear;
}
.minified #slide_yes{color:rgba(188,165,125,0);}
.minified #slide_no{color:rgba(244,239,233,0);}

/*Share*/
.share .share_bar{
	transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	-webkit-transform:translate3d(0,0,0);
}
.share #zzz{display:none;}
.share #minify{display:none;}
#menu_container:not(.share) #back{display:none;}

/*Error*/
.error #error_bar{
	transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	-webkit-transform:translate3d(0,0,0);
	font-size:12px;
	line-height: 22px; /*TODO fix that. Random number only for a message in 2 lines....*/
}

#menu_container:not(.error) #help{display:none;}

/*Disabled*/
.disabled #locate{opacity:.3;cursor:default;}
.disabled #locate:hover{background-position: -60px 0;}

/*##########*/
/*# MARKER #*/
/*##########*/
.geoloc_container{width: 54px;height: 54px;text-align: center;position:relative;margin:auto;}
.geoloc_center{background:url(../img/geoloc.png) 0 0 no-repeat;width:24px;height:24px;position:absolute;top:-12px;left:-12px;background-size:24px 24px;}
.geoloc_aura{border:solid #0A3D33;background-color:#7AE5D0;opacity:.5;position:absolute;}
.pulse_animation{-moz-animation: pulse_animation 1.3s infinite linear;-webkit-animation: pulse_animation 1.3s infinite linear;-ms-animation: pulse_animation 1.3s infinite linear;animation: pulse_animation 1.3s infinite linear;}

@-webkit-keyframes pulse_animation {
 from{
  -webkit-transform:scale(1,1);
 }
  70%{
  -webkit-transform:scale(1.3,1.3);
  border:2px solid #44B0C1;
 }
 to{
  -webkit-transform:scale(1,1);
 }
}
@-moz-keyframes pulse_animation {
 from{
  -moz-transform:scale(1,1);
 }
  70%{
  -moz-transform:scale(1.3,1.3);
  border:2px solid #44B0C1;
 }
 to{
  -moz-transform:scale(1,1);
 }
}
@-ms-keyframes pulse_animation {
 from{
  -ms-transform:scale(1,1);
 }
  70%{
  -ms-transform:scale(1.3,1.3);
  border:2px solid #44B0C1;
 }
 to{
  -ms-transform:scale(1,1);
 }
}