body { font-family: 'Century Gothic', Arial, sans-serif; padding:0; margin: 0px; font-size:100%; }
	
html, body, #container, #main, #map_canvas { width:100%; height:100%; margin:0; padding:0; position:relative; z-index:1; }

header { position:absolute; top:0px; left:0px; padding:15px; width:200px; height:225px; z-index:10; background:rgba(255,255,255,0.8); text-align:center; color:#4F3312; }
header img { margin-bottom:10px; width:200px; }
header input { padding:3px 10px; border: 1px solid #977840; height:22px; font-size:1em; width:120px; }
header p { font-size:0.6em; margin:5px 0; padding:0; }
h1 { font-weight:normal; font-size:1.1em; margin:10px; color:#4F3312; text-shadow:1px 1px #977840; }
footer { position:absolute; bottom:0; right:3px; text-align:right; width:250px; height:33px; z-index:10; font-size:0.7em; color:#ccc; }
footer a { color:#ccc; }
footer a:hover { color:#4F3312; }

/* iPads (landscape) ----------- * /
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles * /
html, body, #container, #main, #map_canvas { width:1024px; height:100%; margin:0; padding:0; position:relative; z-index:1; }
header { top:20px; }
}

/* iPads (portrait) ----------- * /
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles * /
html, body, #container, #main, #map_canvas { width:768px; height:100%; margin:0; padding:0; position:relative; z-index:1; }
header { top:20px; }
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5),
only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
header { position:absolute; top:0px; left:0px; padding:0; width:100%; min-width:320px; height:80px; z-index:10; background:rgba(255,255,255,0.8); text-align:center; color:#4F3312; }
header img { margin:23px 10px 0; height:45px; width:65px; float:left; }
header div { float:left; width:220px; margin:24px 5px; text-align:left; }
header input { padding:3px 10px; border: 1px solid #977840; height:22px; font-size:1em; width:140px; }
header p { display:none; }
}


div.labels { border:1px solid #FFF; padding:10px; width:200px; font-size:0.8em; background:#DDD; color:#000; }
div.labels h1 { font-size:1.5em; margin:0; padding:0; font-weight:normal; }
div.labels p { margin:5px 0 0; padding:0; font-weight:normal; }
.cluster { width:52px; height:52px; line-height:51px; text-align:center; font-size:0.8em; color:#fff; }
.cluster-1 { background:url(/img/map_icons/cluster1.png) no-repeat; }
.cluster-1.hover { background:url(/img/map_icons/cluster1_hover.png) no-repeat; }
.cluster-2 { background:url(/img/map_icons/cluster2.png) no-repeat; }
.cluster-2.hover { background:url(/img/map_icons/cluster2_hover.png) no-repeat; }
.cluster-3 { background:url(/img/map_icons/cluster3.png) no-repeat; }
.cluster-3.hover { background:url(/img/map_icons/cluster3_hover.png) no-repeat; }

div.overlay { border:1px solid #FFF; padding:10px 15px 15px; width:250px; font-size:0.8em; background:rgba(255,255,255,0.9); color:#4F3312; position:relative; -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000; }
div.overlay h1 { font-size:1.6em; letter-spacing:0.1em; margin:0; padding:0; font-weight:boldl; color:#000; text-shadow:0px -1px #977840; }
div.overlay p { margin:5px 0 0; padding:0; font-weight:normal; }
div.overlay p.phone { margin:10px 0 0; }
div.overlay .close, div.overlay .share, #geocode { margin:10px 0 0; padding:0; font-weight:normal; background:#4F3312; text-transform:uppercase; padding:3px 10px; border:1px solid #977840; color:#FFF; font-size:1em; }
div.overlay .close:hover, div.overlay .share:hover { border:1px solid #FFF; }
#geocode:hover { border:1px solid ##977840; }
div.overlay .sells { position:absolute; bottom:15px; right:15px; margin:5px 0 0; padding:0; }