/* *** Fonts *** */

body {
	font-size: 16px;
	margin:0;
	padding:0;
	color:#555;
}
* html body {
	font-size: 100%;
}
body * {
	font-size: 87.5%;
	font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
}
body * * {
	font-size: 100%;
}
h1 {
	margin: 0 0 1em;
	font-size: 18px;
}
h2 {
	margin: 0 0 1em;
	font-size: 16px;
}
p {
	margin: 0 0 .5em;
}
ul, ol, dl {
	margin: 0 0 .5em;
}
a {
	color:#05a;
	text-decoration: none;
}
a:hover,a:focus {
	color:#5a0;
	text-decoration: underline;
}



/* *** Boxes *** */

.menu li {
	font-size: 12px;
}

p.note {
	font-size: 12px;
	padding: 0 2px 0 20px;
	background: #eec url(../images/icon-note.png) 2px 2px no-repeat;
	border: 1px solid #dd9;
}

p.error {
	font-size: 12px;
	padding: 0 2px 0 20px;
	background: #ecc url(../images/icon-error.png) 2px 2px no-repeat;
	border: 1px solid #d99;
}

.hidden {
	display: none;
}



/* *** Map *** */

.mapcontainer {
	position: relative;
	top:0;
	left:0;
	width: 300px;
	height: 300px;
	border: 1px solid #05a;
	overflow: hidden;
}
.map-image {
	position: relative;
}
#map-bottom {
	width:600px;
	height:600px;
	position: absolute;
	left:-150px;
	top:-150px;
	z-index:101;
}
#map-top {
	width:300px;
	height:300px;
	position: absolute;
	left:0px;
	top:0px;
	z-index:102;
}
#map-click {
	opacity:.5;
	width:300px;
	height:300px;
	position: absolute;
	background: transparent url(../images/blank.gif); 
	left:0px;
	top:0px;
	z-index:200;
}
.map-icon {
	position: absolute;
	left:0px;
	top:0px;
	z-index:300;
}
#map-user-base {
	width:2px;
	height:2px;
	left: 148px;
	top: 148px;
	z-index:199; /* The base area must be below #map-click to not prevent clicking on that area */
}
.place {
	position: absolute;
	left:138px;
	top:138px;
	width:16px;
	height:16px;
	padding:4px;
	z-index:400;
	background: transparent url(../images/icon-found.png) no-repeat;
}
	
#map-user {
	left: 142px;
	top: 142px;
}
.mapselections {
	float:right;
	height: 302px; /* The mapcontainer has 2px border */
	width: 24px;
	overflow: hidden;
}
.mapselections #zoom {
	float: right;
	width: 24px;
	height: 60px;
	padding: 2px 0;
	margin: 0;
	background: transparent url(../images/zoom.png) no-repeat;
}
.mapselections .zoom-indicator {
	display: block;
	width:24px;
	height:15px;
}
.mapselections .zoom-indicator.selected,
.mapselections .zoom-indicator:hover {
	background: transparent url(../images/zoom.png) no-repeat;
}

#zoom-4:hover {
	background-position: -48px -47px;
}
#zoom-4.selected {
	background-position: -24px -47px;
}
#zoom-3:hover {
	background-position: -48px -32px;
}
#zoom-3.selected {
	background-position: -24px -32px;
}
#zoom-2:hover {
	background-position: -48px -17px;
}
#zoom-2.selected {
	background-position: -24px -17px;
}
#zoom-1:hover {
	background-position: -48px -2px;
}
#zoom-1.selected {
	background-position: -24px -2px;
}

.mapselections #center-on-user {
	float: right;
	background-image: url(../images/button-24-centeronuser.png);
}
.mapselections #zoom-in {
	float: right;
	background-image: url(../images/button-24-zoomin.png);
}
.mapselections #zoom-out {
	float: right;
	background-image: url(../images/button-24-zoomout.png);
}



/* *** Icons *** */

.menu li img {
	vertical-align: -3px;
	width: 16px;
	height: 16px;
	border: none;
	margin-right: 2px;
}



/* *** Buttons *** */

.button-24 {
	width: 24px;
	height: 24px;
	background: transparent url(../images/button-24.png) no-repeat;
	border: none;
	cursor: pointer;
}
.button-24:hover {
	background-position: 0 -24px;
}
.button-24:active {
	background-position: 0 -48px;
}
.button-24.disabled {
	background-position: 0 -72px;
}



/* *** Links *** */

p.kaleva {
	font-size:12px;
	padding: 0 0 0 18px;
	background: transparent url(../images/kaleva.png) 0 2px no-repeat;
}

p.ouka {
	font-size:12px;
	padding: 0 0 0 18px;
	background: transparent url(../images/ouka.png) 0 2px no-repeat;
}