.page 
{
margin:0;
padding:0;
background-color:#aaccee;
border-style:solid;
border-width:6px;
border-color:Green;
}

.panel 
{
position:relative;
margin:0;
padding:0;
height:100%; /* this is the key! */
width:100%; /* this is the key! */
} 

.header
{
    position:relative;
    padding:15px;
    border-style:solid;
    border-width:0px;
    border-color:Blue;
    font-family:Helvetica;
    line-height:normal;
}

.info
{
    position:relative;
    top:0px;
    height:15px;
    overflow:hidden;
    background-color:#ffffff;
    border-style:solid;
    border-width:1px;
    border-color:Yellow;
    font-family:Helvetica;
    line-height:normal;
    font-size:"small";
    z-index:100;
    
}

.infoLabel
{
    position:relative;
    font-size:"small";
    float:inherit ;
	display:inline;
    background-color:#ffffff;
    width:100%;
}

.infoWindow
{
	font-size:"small";
	width:450px;
}

.dataEntry
{
    width:90%;
}
.player
{
    position:relative;
    top:0px;
    vertical-align:text-bottom;
   	background-color:#ffffff;
    border-style:dotted;
    border-width:1px;
    border-color:Red;
    font-family:Helvetica;
    line-height:normal;
}        

.instructions
{
   font-family:Helvetica;
 
}

body
{
    width:100%;
    height:100%;
}
.map
{
	background-color:#000000;
    left:29%;
    width:70%;
    height:95%; 
	border-width: 3px;
    border-color:blue;
    position:absolute;
    float:left;
    /*
	
   top: 0px;
    left: 0px;*/
}

.mapControls
{
	width:28%;
	height:95%; 
	position:absolute;
	float:left;
    background-color:#ffffff;
    border-style:dotted;
    border-width:0px;
    border-color:Red;
    font-family:Helvetica;
    line-height:normal;
}

.mapHiddenMenu
{
	float:left;    
    background-color:#ffffff;
    visibility:hidden;
    border-style:solid;
    border-width:0px;
    border-color:blue;
    font-family:Helvetica;
    line-height:normal;	
    height:0px;
    padding:5px;
}

.mapVisibleMenu
{
    background-color:#ffffff;
    border-style:solid;
    border-width:0px;
    border-color:blue;
    font-family:Helvetica;
    line-height:normal;	
    
    padding:5px;
}

/* 
Style from dragresize library
Required CSS classes: must be included in all pages using this script */

/* Apply the element you want to drag/resize */
.drsElement {
	 position: absolute;
	 border: 1px solid #333;
}

/*
 The main mouse handle that moves the whole element.
 You can apply to the same tag as drsElement if you want.
*/
.drsMoveHandle {
	 height: 20px;
	 /*background-color: #CCC;*/
	 border-bottom: 1px solid #666;
	 padding:5px;
	 cursor: move;
}

/*
 The DragResize object name is automatically applied to all generated
 corner resize handles, as well as one of the individual classes below.
*/
.dragresize {
	 position: absolute;
	 width: 5px;
	 height: 5px;
	 font-size: 1px;
	 background: #EEE;
	 border: 1px solid #333;
}

/*
 Individual corner classes - required for resize support.
 These are based on the object name plus the handle ID.
*/
.dragresize-tl {
	 top: -8px;
	 left: -8px;
	 cursor: nw-resize;
}
.dragresize-tm {
	 top: -8px;
	 left: 50%;
	 margin-left: -4px;
	 cursor: n-resize;
}
.dragresize-tr {
	 top: -8px;
	 right: -8px;
	 cursor: ne-resize;
}

.dragresize-ml {
	 top: 50%;
	 margin-top: -4px;
	 left: -8px;
	 cursor: w-resize;
}
.dragresize-mr {
	 top: 50%;
	 margin-top: -4px;
	 right: -8px;
	 cursor: e-resize;
}

.dragresize-bl {
	 bottom: -8px;
	 left: -8px;
	 cursor: sw-resize;
}
.dragresize-bm {
	 bottom: -8px;
	 left: 50%;
	 margin-left: -4px;
	 cursor: s-resize;
}
.dragresize-br {
	 bottom: -8px;
	 right: -8px;
	 cursor: se-resize;
}