/*
   New Perspectives on HTML and CSS
   Tutorial 4
   Case Problem 3

   Trail Map Style Sheet
   Author: David Katelansky
   Date:   05/26/2015

   Filename:         map.css
   Supporting Files: 

*/

nav
{
   display: block;
}

section
{
   display: block;
}

figure
{
   display: block;
}

figcaption 
{
   display: block;
}

time 
{
   display: inline;
}

* 
{
   margin: 0px;
   padding: 0px;
}

body 
{
   font-family: Verdana, Geneva, sans-serif;
}

#page 
{
   background-color: rgb(255, 255, 128);
   background-image: url('bluebar.png');
   background-repeat: repeat-y;
   border-radius: 15px;
   border-style: ridge;
   border-color: rgb(70, 76, 222);
   -moz-border-radius: 50px;
   -webkit-border-radius: 50px;
   border-radius: 50px;
   height: 750px;
   margin-top: 10px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 200px;
   width: 900px;
}

nav.vertical 
{
   float: left;
   width: 230px;
}

nav.vertical li 
{
   list-style: none;
   margin-top: 25px;
   margin-bottom: 25px;
   margin-left: 20px;
   margin-right: 20px;
}

nav.vertical li a 
{
   color: white;
   text-decoration: none;
}

nav.vertical li a:hover 
{
   color: yellow;
}

#summary 
{
   float: left;
   margin-left: 30px;
   width: 600px;
}

#summary h1 
{
   color: rgb(70, 76, 222);
   font-size: 24px;
   font-weight: normal;
   letter-spacing: 5px;
   margin: 20px;
}

#summary p 
{
   margin: 10px;
}

#map 
{
   position: relative;
   background-color: white;
   background-image: url('lpmap.jpg');
   background-position: 0% 0%;
   background-repeat: no-repeat;
   border-radius: 1px;
   border-style: solid;
   border-color: black;
   float: left;
   margin-left: 30px;
   width: 600px;
   height: 294px;
}

figure  
{
   background-color: rgb(70, 76, 222);
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   border-radius: 15px;
   clip: rect(0px, 20px, 20px, 0px);
   color: white;
   position: absolute;
   width: 150px;
   z-index: 1;
}

figure:hover 
{
   clip: auto;
   z-index: 2;
}

figure figcaption 
{
   margin: 10px;
   font-size: 12px;
}

figcaption time 
{
   color: yellow;
}

#point0 
{
   top: 60px;
   left: 560px;
}

#point1 
{
   top: 90px; 
   left: 277px;
}

#point2 
{
   top: 0px; 
   left: 175px;
}

#point3 
{
   top: 115px; 
   left: 110px;
}

#point4 
{
   top: 165px; 
   left: 55px;
}

#point5 
{
   top: 180px; 
   left: 5px;
}

#point6 
{
   top: 222px; 
   left: 15px;
}

#point7 
{
   top: 245px; 
   left: 50px;
}

#point8 
{
   top: 245px; 
   left: 100px;
}

#point9 
{
   top: 220px; 
   left: 90px;
}