@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Arvo:400,400i,700,700i');

*{margin:0; padding:0;}
html{height:80%}
body{
width:99%;
height:100%;
padding:0;
font-size:12px;
margin:0 auto; 
line-height:1.6;
color:#222; 
background-color:#fff; 
text-align:left;
font-family:Lato,sans-serif;

}

#wrapper{
	height:100%;
	width:97%;
	margin:1% auto;
}

form{height:100%;}


#header{
border-top:3px solid #2A8CC4;
padding:5px 5px 10px 5px;

}

#header::after{
content: "";
  display: block;
  clear: both;

}

#header h1{
font-family:Arvo;
color:#2A8CC4;
font-size:26px;
line-height:1;
}

#header .headnavi{
}

#header .headnavi::after{
content: "";
  display: block;
  clear: both;

}

#header .typediagram{
float:left;
padding:5px 10px 10px 10px;
}

#header .typediagram dt{
	font-weight:bold;
}

#header .typediagram dt i{
	padding-right:0.2em;
	color:#2A8CC4;
}

#header .typediagram dd{
	text-align:center;
}

#header .typegl{
float:left;
padding:2em 5px 5px 5px;
}

#header .typesearch{
float:left;
padding:1.5em 5px 5px 5px;
vertical-align:bottom;
}

input[type="checkbox"], input[type="radio"] {
	padding-right:3px;
}

input[type="text"]{
	width:11em;
	border:1px solid #999;
	border-radius:3px;
	padding:0.5em 1em;
}

button{
	font-size:14px;
	padding:4px 10px;
	background:#2A8CC4;
	border-radius:3px;
	border:none;
	color:#FFFFFF;
	margin:0 0 0 3px;
}

label{
	padding:0 10px 0 3px;
}

#map_canvas{
width:100%;
height:100%;
border:1px solid #eee;
}

#footer{
background:#2A8CC4;
padding:2px 1em;

}

#footer::after{
content: "";
  display: block;
  clear: both;
}

#footer .iclist{
list-style:none;
float:left;
background:#FFFFFF;
padding:1px 5px;
border-radius:3px;
}

#footer .iclist li{
display:inline-block;
padding:2px 3px;
}

#footer .iclist .icnew{
color:#cb333e;
padding-right:0.5em;
}

#footer .iclist .icmol{
color:#31a1d5;
padding-right:0.5em;
}

#footer .iclist .icpol{
color:#81d350;
padding-right:0.5em;
}

#footer .copy{
float:right;
color:#FFFFFF;

}

@media only screen and (max-width: 600px) {
html{height:70%}
#header h1{
text-align:center;
}
#header .typediagram{
float:none;
padding:5px 5px 5px 5px;
text-align:center;
}
#header .typegl{
float:none;
padding:5px 5px 5px 5px;
text-align:center;
}
#header .typesearch{
float:none;
padding:5px 5px 5px 5px;
vertical-align:bottom;
text-align:center;
}

}

@media only screen and (max-width: 400px) {

#footer{
font-size:11px;

}
}