body {

	height: 100%;
		
	max-width: 100%;

    margin: auto;



	background-repeat: no-repeat;
	
	}

header {

	float: top;

	width: 100%;

	}

article{
	
	float: left;

	width: 80%;


 
	font: 8pt arial; 
		

	color: #990033;

	text-align: center;
 transition: margin-left .5s;
  
	}
	


.sidenav {
    width: 0;
    position: fixed;
    z-index: 1;
    top: 20px;
    left: 0px;
    	background-color: #A9F5F2;
	 
    overflow-x: hidden;
     transition: 0.5s;
    padding: 8px 0;
}

.sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 18px;
    color: #000000;
    display: block;
     transition: 0.3s;
}

.sidenav a:hover {
    color: #064579;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
.main {
    transition: margin-left .5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 8px;}
}

	nav {

	float: left;

	width: 230PX;

	font: 14pt arial; 
	
	color: #990033;

	

	text-align: left;
	


	background-color: #A9F5F2;
	 
	} 

aside {
	
	width: 10%;

    float: right;

	text-align: center;



	background-color: #A9F5F2;

	}

h1     {

	font: 18pt arial; 		

	color: #990033;

	text-align: center;
	
	}


p       { 

        font: 14pt arial; 		

	color: #990033;

	text-align: center;

        }

p.left { 

	font: 16pt arial; 

	color: #990033;

	text-align: left;

        }

p.para { 

	font: 16pt arial; 

	color: #990033;

	text-align: center;

        }

p.under{ 

	font: 18pt arial; 

	color: #990033;

	text-align: center;

        text-decoration: underline;

        }

p.leav { 

        font: 22pt arial; 

	text-align: center;

	color:#FF0000;

        }


p.end {
		
	font-size: 10pt arial;

	text-align: center;

        }
p.finish {
		
	font-size: 10pt arial;

	text-align: center;
	

        }

p.by {
		
	font-size: 8pt arial;

	text-align: left;

        }

table, th, td {

	border: 1px solid black;

	} 

table	{

	float: left;

	background-color: #cccccc;

    max-width:75px;


	}


div#tb {

	text-align: center;
	
       }
			
dt.ids {	


	text-align: center;		
			
       }

dd.ans {
		
	
	text-align: center;

       }

dl	 { 

	font: 8pt arial; 

	color: #990033;

	text-align: left;

	text-indent: 30px;

        }
        
        ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li.home	{
  list-style-type: none;
    margin: 0;
    padding: 0;
   
	 display:block;

	 border: none; /* Remove borders */

       	text-align: left;

	 cursor: pointer; /* Add a pointer cursor on mouse-over */

	 font: 10pt arial; 

		background-color: #A9F5F2;
	 
	   

	 }  /* purple */

li.home:hover {background-color: #E8DAEF;}

li.activemap	{
 list-style-type: none;
    margin: 0;
    padding: 0;
	 display: block;

	 border: none; /* Remove borders */

       	text-align: left;

	 cursor: pointer; /* Add a pointer cursor on mouse-over */

	 font: 8pt arial; 

	background-color: #A9F5F2;


	 }  /* yellow */

li.activemap:hover {background-color:#cc9900 ;}
li.water {
 list-style-type: none;
    margin: 0;
    padding: 0;
display: block;

        border: none; /* Remove borders */
	text-align: left;

	cursor: pointer; /* Add a pointer cursor on mouse-over */

	font: 10pt arial; 

	background-color: #A9F5F2;
	

	}  /* light blue */

li.water:hover {background-color: #008fb3;}

li.visit	{
 list-style-type: none;
    margin: 0;
    padding: 0;
display: block;
	 border: none; /* Remove borders */

	text-align: left;

	 cursor: pointer; /* Add a pointer cursor on mouse-over */

	 font: 10pt arial; 

	 	background-color: #A9F5F2;
	 

	 } /* Orange */

li.visit:hover {background-color: #cc5200;}

li.soc{
 list-style-type: none;
    margin: 0;
    padding: 0;
	display: block;
        border: none; /* Remove borders */

 	text-align: left;

	cursor: pointer; /* Add a pointer cursor on mouse-over */

	font: 10pt arial; 

	background-color: #A9F5F2;
 
	}  /* green */

li.soc:hover {background-color: #89CF24;}

li.sub{

	display: inline-block;

        border: none; /* Remove borders */

        padding: 24px 30px; /* Add some padding */

	cursor: pointer; /* Add a pointer cursor on mouse-over */

	font: 22pt arial; 

	background-color: #66FD44;

	}  /* green */

li.sub:hover {background-color: #89CF24;}




li.dinner	{
 list-style-type: none;
    margin: 0;
    padding: 0;
display: block;

	 border: none; /* Remove borders */

     	text-align: left;

	 cursor: pointer; /* Add a pointer cursor on mouse-over */

	 font: 10pt arial; 

	 	background-color: #A9F5F2;
 

	} /* pink */

li.dinner:hover {background-color: #ff00ff;}

li.pubhop	{
 list-style-type: none;
    margin: 0;
    padding: 0;
display: block;

        border: none; /* Remove borders */

	text-align: left;

	cursor: pointer; /* Add a pointer cursor on mouse-over */

	font: 12pt arial;  
 	background-color: #A9F5F2;

	} /* yellow */

li.pubhop:hover {background-color: #e69900;}

li.attic	{
 list-style-type: none;
    margin: 0;
    padding: 0;
display: block;
	 border: none; /* Remove borders */

     	text-align: left;

	 cursor: pointer; /* Add a pointer cursor on mouse-over */
 
	 font: 10pt arial; 

	background-color: #A9F5F2;
	 


	 } /* red */

li.attic:hover {background-color: #cc0000;}

li.golf	{
 list-style-type: none;
    margin: 0;
    padding: 0;
display: block;

	 border: none; /* Remove borders */

	text-align: left;

	 cursor: pointer; /* Add a pointer cursor on mouse-over */

	 font: 10pt arial; 

	background-color: #A9F5F2;



	 } /* green */ 

li.golf:hover {background-color: #006622;}

li.farm	{
 list-style-type: none;
    margin: 0;
    padding: 0;
	display: block;
	 border: none; /* Remove borders */

	 cursor: pointer; /* Add a pointer cursor on mouse-over */

	 font: 10pt arial; 
	 
	 	text-align: left;

	background-color: #A9F5F2;
	  

	 }/* gold */

li.farm:hover {background-color: #e69900;}

li.gallery {
 list-style-type: none;
    margin: 0;
    padding: 0;
display: block;

        border: none; /* Remove borders */

	text-align: left;

	cursor: pointer; /* Add a pointer cursor on mouse-over */

	font: 10pt arial;  

	background-color: #A9F5F2;
	


	} /* yellow */

li.gallery:hover {background-color: #defd44;}

li.form	{
 list-style-type: none;
    margin: 0;
    padding: 0;
display: block;

	 border: none; /* Remove borders */

 	text-align: left;
 
	 cursor: pointer; /* Add a pointer cursor on mouse-over */

	 font: 10pt arial; 

		background-color: #A9F5F2;
	 

	 } /* dark blue */ 

li.form:hover {background-color: #002080;}

li.ref	{
 list-style-type: none;
    margin: 0;
    padding: 0;
	display: block;

	 border: none; /* Remove borders */

	text-align: left;
       
	 cursor: pointer; /* Add a pointer cursor on mouse-over */

	 font: 10pt arial; 

	background-color: #A9F5F2;
	 
	 
	 } /* green */

li.ref:hover {background-color: #46a049;}



footer {

	clear: all;
    background-color: #A9F5F2;
	height: 60px;
 
	width: 100%;
 	
	bottom: 0px;

	right: 0px;

	left: 0px;

	text-align: center;
	
	
	}

figure { 
  display: block; 
  position: relative; 
  overflow: hidden; 
}


figcaption { 
  position: absolute; 
  background: rgba(0,0,0,0.75); 
  color: white; 
  padding: 10px 20px; 

  opacity: 0;
  bottom: 0; 
  left: -30%;
  -webkit-transition: all 0.6s ease;
  -moz-transition:    all 0.6s ease;
  -o-transition:      all 0.6s ease;
}

figure:hover figcaption {
  opacity: 1;
  left: 0;
}

.cap-left figcaption { bottom: 0; left: -30%; }
.cap-left:hover figcaption { left: 0; }

.cap-right figcaption { bottom: 0; right: -30%; }
.cap-right:hover figcaption { right: 0; }

.cap-top figcaption { left: 0; top: -30%; }
.cap-top:hover figcaption { top: 0; }

.cap-bot figcaption { left: 0; bottom: -30%;}
.cap-bot:hover figcaption { bottom: 0; }

figure:before { 
  content: "?"; 
  position: absolute; 
  background: rgba(255,255,255,0.75); 
  color: black;
  width: 24px;
  height: 24px;
  -webkit-border-radius: 12px;
  -moz-border-radius:    12px;
  border-radius:         12px;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  /* Only Fx 4 supporting transitions on psuedo elements so far... */
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  opacity: 0.75;	
}
figure:hover:before {
  opacity: 0;
}

.cap-left:before {  bottom: 10px; left: 10px; }