/* General page layout formatting */
html, body {
	margin:0;
	padding:0;
	height:100%;
	overflow: hidden;
	font-family:TrebuchetMS,Arial,Verdana,Sans-serif,serif;
}

#container {
	margin: 0 0 0 0;
	height:100%;
	width:100%;
	position:absolute;
}

#header {
	background:#ffffff;
	padding:0;
	text-align:center;
	border:1px solid #ccc;
}

#header p, #header h1 {
	margin:0;
	padding:5px 0 0 5px;
}

.title {
	font-family:Arial,serif;
	font-size: 22px;
	color:#000000;
}

.subtitle {
	font-family:Arial,serif;
	font-size: 18px;
	color: #FF0000;
}

#body {
   	position:relative;
	padding-bottom:0;	/* Height of the footer */
	height:90%;
}

#body p {
	position:relative;
	font-size:14px;
}

.backimg {
	height:100%;
	width:100%;
	margin:0 0 0 0; 
	padding:0 0 0 0;
}

.backimg2 {
	margin:0 0 0 0; 
	padding:0 0 0 0;
	position:absolute; top:-40px; left:79%;
}

.breadcrumb {
	color:#fff;
	position:absolute; top:-3.5%; left:0.5%;
}

#footer {
	position:absolute;
	bottom:0;
	width:100%;
	background:#ffffff;
	display:block;
	z-index:30;
}

#footer p {
	margin:0;
	padding:0 0 5px 0;
}

/* Mapz and Hotspot CSS */
.map-viewport {
	position:absolute; top:5%; left:0; width:63%; height:92%;
	border:4px solid black; overflow:hidden;
	margin:0 0 0 0;
}

.level {
	position:absolute;
	left:0; top:0;
	z-index:10;
}

.current-level {
	z-index:20;
}

.draggable_map {
	position:relative; left:0; top:0;
	cursor:move;
}

.plus,
.minus,
.arrow {
    background-color: #0099FF;
    opacity: 0.35;
    z-index:200;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
}

.plus:hover,
.minus:hover,
.arrow:hover {
    opacity: 0.85;
}

.arrow-up {
    position:absolute; top:0%; left:48%;
    width:35; height:25;
}

.arrow-down {
    position:absolute; top:94.6%; left:48%;
    width:35; height:25;
}

.arrow-left {
    position:absolute; top:45%; left:0%;
    width:25; height:35;
}

.arrow-right {
    position:absolute; top:45%; left:96.5%;
    width:25; height:35;
}

.hotspot-data {
	overflow:auto;
	background-color:white; 
	color: #000;
	opacity:0.65;
	position:absolute; top:5%; left:65%; width:32.5%; height:92%;
	border:4px solid black;
	margin: 0 0 0 0;
	padding:0 10px 10px 10px; /* This param sets whitespace around descriptions, but messes up overall height */
}

.plus,
.minus {
    position:absolute;
    width:25; height:25;
}

.pdflink {
	position:relative;
	text-align:center;
	padding:30% 0 0 0;
}

.instructions {
	position:relative;
	padding:10px 10px 10px 10px;
	color: #000;
}

/* General CSS */
.code_element {
	font-family: "Courier New", Courier, mono,serif;
}

a {
	color:#0000FF;
	text-decoration:none;
}

a:hover {
	color:#09F;
	text-decoration:underline;
}