a:link {text-decoration: none; color:#3777b2;}
a:visited {text-decoration: none; color:#3777b2;}
a:hover {text-decoration: none; color:#d93712;}
a:active {text-decoration: none; color:#3777b2;}

#header {
	float:left;
	width:100%;
	background-color:lightblue;
	height:50px;
}


#searchArea {
	float:left;
	width:100%;
	background-color:cyan;
	min-height:50px;
}

#footer {
	float:left;
	width:100%;
	background-color:lightgreen;
	height:50px;
}


#map {
	box-sizing: border-box;	
	float:left; 
	/*width:calc(100% - 310px); */
	width:60%;
	margin:0; padding:0; 
	background-color:gray;	
}

#data {
	box-sizing: border-box;
	overflow-x:hidden;
    overflow-y:scroll;		
	float:left; 
	/*width:310px; */
	width:40%;	
	margin:0; 
	padding:0; 
	background-color:lightgray;
}

#list {
	width:100%;	
}

#info {
	width:100%;	
}

#list .item {
	box-sizing: border-box;	
	float:left;
	width:100%;	
	padding:10px 0;
	background-color:white;
	border-bottom:1px solid #999;	
	transition: background-color 0.5s ease;
}

#list .item:hover {
	background-color:#eee;
}

.nfo {
	width:250px;
}

#list .item .pic {
	float:left;
	box-sizing:border-box;	
	width:70px;	
	padding-left:10px;
}

#list .item .data {
	float:left;
	box-sizing:border-box;	
	width:calc(100% - 70px);	
	color:gray;
	padding-left:10px;
}

#list .item .data .homedata{	
	width:100%;		
}

.SearchBox {
	box-sizing:border-box;
    border: 1px solid #c3c3c3;
    float:left;
    box-sizing: border-box;
    font-size: 12pt;
    height: 50px;
    letter-spacing: 1px;
    margin: 0;
    padding: 0 10px;
    transition: border-color 0.15s ease-in-out 0.15s, box-shadow 0.15s ease-in-out 0.15s;
    width: 50%;
}

.Filter {
    background-color: white;
    border: 1px solid #c3c3c3;
    border-radius: 4px;
    box-sizing: border-box;
    float: left;
    height: 50px;
    
    /*width:200px;*/
}

.Filter .SpotFilter {
    
    font-size: 12pt;
    letter-spacing: 1px;
    line-height: 50px;
    width:120px;
    text-align:center;
    position: relative;
    transition: border-color 0.15s ease-in-out 0.15s, box-shadow 0.15s ease-in-out 0.15s;
}

.Filter .SpotFilterBox {
    background-color: #f1f1f1;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
    display: none;
    padding: 20px;
    position: absolute;
    /*width: inherit;*/
	width:300px;
    z-index: 1000;
}

.Filter .SpotFilterBox .close {
	float:left;
	width:100%;
	text-align:center;
	line-height:50px;	
}

.Filter .SpotFilter .toggle {
	/*box-sizing:border-box;
	padding:5px;
	background-color:#2777c2;
	color:#f1f1f1;
	
	border-radius:10px;*/
}

.filters #SpotFilter {
    border-radius: 4px;
    font-size: 12pt;
    letter-spacing: 1px;
    line-height: 50px;
    margin: 0;
    padding: 0 20px;
    position: relative;
	
    transition: border-color 0.15s ease-in-out 0.15s, box-shadow 0.15s ease-in-out 0.15s;
}

#filters #SpotFilterBox {
    background-color: #f1f1f1;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
    display: none;
    padding: 20px;
    position: absolute;
    width: inherit;	
    z-index: 1000;
}

.btn {
	box-sizing:border-box;
    background-color: #5cb85c;
    border: 1px solid rgba(0, 0, 0, 0);
    
    color: #ffffff;
    cursor: pointer;
    height: 50px;
    margin: 0;
    padding: 0 10px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
	font-size:21px;
}

.btn:hover {
    background-color: #3c6ec1;
    border: 1px solid #2b79b4;
    outline: 0 none;
    transition: background 0.2s ease 0s;
}

.SearchBox:focus {
    border: 2px solid #66afe9;
    outline: 0 none;
}

.gm-style img { float:left; padding-right:10px;}
.gm-style label { width: auto; display: inline; }

@media only screen and (max-width: 760px), only screen and (max-device-width: 760px){
	#map {width:100%;}
	#data {width:100%;} /*display:none;*/
	#list {display:none;}
	
	.SearchBox {width:calc(100% - 272px);}	
	.btn {width:150px;}
	#SpotFilterBox {width:260px;}
}

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px){
	#header {height:30px;}
	.SearchBox {width:100%; height:40px;}
	.Filter {margin:0; width:100%; height:40px;}
	.btn {width:100%; margin-bottom:5px; height:30px; font-size:14px;}	
	.Filter .SpotFilter {width:100%; line-height:40px;}
	#SpotFilterBox {width:100%;}	
	
}