/*Philip's styling*/

/*General*/

a {
       		text-decoration: none;
       		color: #330099;
       		}

			/*body { font: x-small Verdana,Sans-serif; }*/

                        body { font:0.8125em Arial, Verdana,Sans-serif; }

/*Masthead*/





/*Topnav*/

	#topnavLester {clear: both; background-color: #330099; padding-top: 3px; padding-bottom: 3px; margin-bottom: 6px;}
	.topnavLesterLink {font-size: 12px; font-weight: bold; color:#fff;}




		/* Style for left-hand bar heads*/

.tabhead_left {
	  color:#fff; font-weight:bold; text-transform: uppercase; font-weight: 900; font-size: 12px; font-face: medium Verdana,Sans-serif;
	}
	
	
	/*Zoom bar!*/
	
	.zoombar_mainControl {
		display: block;
		clear: left;
		padding-top: 6px;
		padding-bottom: 6px;
		margin-left: 38px; /* Only works with 100px controls */
	}
	
	.zoombar_level {
		display: block;
		margin-top: 4px;
		margin-bottom: 4px;
		margin-left: 18px;
		margin-right: 4px;
	}
	
	.zoombar_divider {
		clear: left;
		width: 150px;
		height: 3px;
		/*border-top:
		1px dashed #330099;*/
		margin-left: 13px;
		margin-top: 3px;
		margin-bottom: 3px;
	}
	
	.zoombar_tabGroup {
		float: left;
		margin-right: 5px;
		margin-left: 5px;
	}
	
	.zoombar_textLine {
		 font-size: 12px;
		 font-weight: bold;
		 color:#330099;
		 /*height: 40px;*/
		 
	}
	
	

        /* The outer division is the "picture frame". Size must be set here AND
        in the JavaScript - as the script needs to know the size before it has
        had the opportunity to load it in. */
        #outerDiv {
                height: 400px; /*Was 70% but can't do % of unspecified-height parents */
                width: 400px;
                position: relative;
                overflow: hidden;
               	display: block;
                }

		/* The inner division is the "map paper". It will be set to the correct
		size later by the script. The border parameter here could be script-set
		rather than fixed, but be careful; some values might cause the tile
		loader to call for tiles that don't exist, leading to broken link icons. */
		
            #innerDiv {
                position: relative;
                left: 0px;
                top: 0px;
                border: 20px solid white;
            	}
            
            /*Map border buttons*/
            
            #borderButtonRight {
        	    /*width: 12px;
   		        border: none;
        	    height: 400px;
            	float: right;
	            position: relative;
	            top: -1px;
	            background-color: #6666cc;*/
            	}
            
            #borderButtonLeft {
   	         	/*width: 10px;
    	        border-left: 1px solid  #330099;
        	    border-right: 1px solid #330099;
            	height: 400px;
            	float: left;
            	position: relative;
            	top: -1px;
            	background-color: #6666cc;*/
            	}
            
            #borderButtonTop {
            	/*background-color: #6666cc;
            	height: 10px;
            	border-top: 1px solid #330099;
            	border-bottom: 1px solid #330099;
            	margin-bottom: 1px; width: 100%;
            	position: relative;*/
            	}
            	
            #borderButtonBottom {
            	/*background-color: #6666cc;
            	height: 10px;
            	border-top: 1px solid #330099;
            	border-bottom: 1px solid #330099;
            	width: 100%;
            	position: relative;
            	top: -1px;*/
            	}
            
            .borderButtonVerticalGraphicDiv {
            	overflow: visible;
            	height: 0px;
            	
        	    }
        	    
        	.borderButtonHorizontalGraphicDiv {
        		overflow: visible;
        		width: 0px;
        		float: left;
        		}
         	   
            .borderButtonVerticalSpacer {
            	width: 12px;
            	height: 50%;
            	position: relative;
            	z-index: 10;
            	}
            
            .borderButtonHorizontalSpacer {
            	height: 12px;
            	width: 50%;
            	position: relative;
            	float: left;
            	z-index: 10;
     	   		}
     	       
     	       
	/* Styles for the bottom (map data) area */
	
	#mapInfoArea {
		/*width: 100%;*/
		background-color: #ffffff;
		margin-top: 6px;
		margin-bottom: 6px;
		margin-left: 192px;
		}
		
	#altitudeBarGraphic {
		position: relative;
		float: right;
		display: block;
		}
		
	#scaleBarGraphic	{
		position: relative;
		margin-bottom: 6px;
		display: block;
		}