@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);

.transition (@time: .5s, @range: all, @ease: ease-out) {
  -moz-transition: @range @time @ease;
  -webkit-transition: @range @time @ease;
  -o-transition: @range @time @ease;
  transition: @range @time @ease;
}

.transition-delay (@time: .4s) {
	-webkit-transition-delay: @time;  
	-moz-transition-delay: @time;  
	-o-transition-delay: @time;  
	-transition-delay: @time; 
}

.border-radius(@radius) {
	-moz-border-radius:@radius;
	-webkit-border-radius:@radius; 
  border-radius: @radius;
}

.gradient (@coler1: #fff, @coler2: #ccc) {
    background: @coler1;
    background: -moz-linear-gradient(@coler1, @coler2);
    background: -webkit-linear-gradient(@coler1, @coler2);
    background: -o-linear-gradient(@coler1, @coler2);
}

.box-shadow(@dims:0 0 10px, @color:#000) {
	box-shadow: @dims @color; // Opera, FFX4
	-moz-box-shadow:@dims @color; // FFX3.5
	-webkit-box-shadow:@dims @color; // Safari/Chrome/WebKit
	.ie7 { filter: e(%("progid:DXImageTransform.Microsoft.Shadow(color='%d', Direction=135, Strength=3)", @color)); }
}

.inset(@dims:1px 1px 1px, @color:#fff) {
    box-shadow: @dims @color; // Opera, FFX4
    -moz-box-shadow:@dims @color; // FFX3.5
    -webkit-box-shadow:@dims @color; // Safari/Chrome/WebKit
}

body { 
  width: 100%; 
  background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/grid.png) repeat #fefefe;
}

.button {
  margin: 40px auto;
  font-size: 72px;
  font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
  text-decoration: none;
  text-shadow: 1px 1px 0px #fff;
  font-weight: 400; 
  color: #666;
  border: 1px solid #ccc;
  cursor: pointer;
  padding: 20px 70px 30px;
  position: relative;
  top: 50px;
  background: #eee;
  width: 300px;
  display: block;
  text-align: center;
  .inset;
  .border-radius(5px);
  .transition;
  &:hover{ color: #333; background: #eeffff; .transition;}
}

.modalbg {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0);
	z-index: 99999;
	.transition(2s);
  .transition-delay(.2s);
	display: block;
	pointer-events: none;
  .dialog {
    width: 400px;
    position: relative;
    top: -1000px;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    .border-radius(10px);
    .gradient;
    .box-shadow;
  }
}

.modalbg:target {
	display: block;
	pointer-events: auto;
  background: rgba(4, 10 ,30, .8);
  .transition();
  .dialog {
    top: -20px;
    .transition(.8s);
    .transition-delay;
  }
}



.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
  .box-shadow;
  .transition;
  .transition-delay(.2s);
  &:hover { background: #00d9ff; .transition; }
}

.fineprint {
  font-style: italic;
  font-size: 10px;
  color: #646;
}
a { color: #333; text-decoration: none; }


#map {
            height: 400px;
            width: 100%;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 8px;
            text-align: left;
        }

.row {
	width: 100%;
	float : left;
	vertical-align : center;	
  align-items : center;
}
.row:hover {
	background-color: #e6e6ff;
}

.col-fix-20 {
	width:20px;
	float:left;
}
.col-fix-40 {
	width:40px;
	float:left;
}
.col-1 {
	width : 5%;
	float:left;
}
.col-2 {
	width : 10%;
	float:left;
}
.col-3 {
	width : 15%;
	float:left;
}
.col-4 {
	width : 20%;
	float:left;
}
.col-5 {
	width : 25%;
	float:left;
}
.col-6 {
	width : 30.0%;
	float:left;
}
.col-7 {
	width : 35.0%;
	float:left;
}
.col-8 {
	width : 40.0%;
	float:left;
}
.col-9 {
	width : 45.0%;
	float:left;
}
.col-10 {
	width : 50.0%;
	float:left;
}
.col-all {
	width : 100%;
	float:left;
}


.small-font {
	font-size : 10px;
}

.text-right {
	text-align:right;
}

.hidden {
	visibility : none;
	display : none;
}

.text-space-right {
	margin-right : 10px;
}

.background_1 {
	background-color : #ccccff;
}

.background_0 {
	background-color : #ddccff;
}
.backpanel {
	  border-style : solid;
		border-color : #000000;
		border-width : 1px;			
}
.commandpanel {
	  background-color : #d1d1e0;
		height : 25px;
	  border-style : solid;
		border-color : #000000;
		border-width : 1px;
}

.centerimg {
		align-items : center;
	  justify-content : center;
		display : flex;
    cursor: pointer;
}

.innerpanel {
	width:100%;
}

.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.windowheader {
    width: 100%;
    height: 25px;	
		background-color : #505050;
	  border-style : solid;
		border-color : #000000;
		border-width : 1px;					
		float: left;
	  text-align : left;		
}
  
.popup-content {
    position: relative;
    margin: 15% auto;
    padding: 20px;
    background: #fff;
    width: 50%;
    border-radius: 8px;
    text-align: center;
}
  
.close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
}