/* map.css for the manonabeach fife and lothian map */


body {
   background-color: #fff;
   font-family: Verdana, Arial, sans-serif;
   min-width: 1100px;
   height: 800px;
}
p{
   color: #000;
   margin: 0px;
   font-size: 8px;
}
h1{
   color: #000;
   font-size: 36px;
   font-weight: 100;
   margin: 0px 10px 10px 20px;
}
h2{
   color: #2e2e2d;
   font-size: 16px;
   margin: 0 10px 0 20px;
   font-weight: 500;
}
h3{
   font-size: 14px;
   margin: 0 10px 0 20px;
   font-weight: 500;
   color: #dfa045;
}

h3.lothian{
   color: #dfa045;
}
h3.fife{
   color: #913e2e;
}


h4{
   font-size: 12px;
   margin: 0 10px 0 20px;
   font-weight: 100;
   color: #666;
}


#wrapper{
   width: 900px;
   min-width: 900px;
   height: 800px;
   margin: 0px auto 20px auto;
   background-image: url('fifeandlothian.jpg');
   padding: 0px;
}
#container{
   position: absolute;
   width: 900px;
   min-width: 900px;
   height: 800px;
   padding: 0px;

}

#titleStuff{
   position: absolute;
   width: 400px;
   padding: 0px;
   left: 0px;
   top: 10px;
   text-align: left;
}

/* The beach overlays */

/* The expand class */



#belhaven{
   position: absolute;
   left: 810px;
   top: 610px;
   z-index: 50;
}

#belhaven:hover{
   background-color: #fff;
   opacity:0.8;
   filter:alpha(opacity=80);
   z-index: 70;
   border: 1px solid #666;
   border-radius: 10px;
   padding: 0 10px 5px 10px;
   -moz-box-shadow: 3px 3px 3px #333;
   -webkit-box-shadow: 3px 3px 3px #333;
   box-shadow: 3px 3px 3px #333;
   color: #000;
}

#milsey{
   position: absolute;
   left: 722px;
   top: 559px;
   z-index: 50;
}

#milsey:hover{
   background-color: #fff;
   opacity:0.8;
   filter:alpha(opacity=80);
   z-index: 70;
   border: 1px solid #666;
   border-radius: 10px;
   padding: 0 10px 5px 10px;
   -moz-box-shadow: 3px 3px 3px #333;
   -webkit-box-shadow: 3px 3px 3px #333;
   box-shadow: 3px 3px 3px #333;
   color: #000;
}

#westbeach{
   position: absolute;
   left: 680px;
   top: 580px;
   z-index: 50;
}

#westbeach:hover{
   background-color: #fff;
   opacity:0.8;
   filter:alpha(opacity=80);
   z-index: 70;
   border: 1px solid #666;
   border-radius: 10px;
   padding: 0 10px 5px 10px;
   -moz-box-shadow: 3px 3px 3px #333;
   -webkit-box-shadow: 3px 3px 3px #333;
   box-shadow: 3px 3px 3px #333;
   color: #000;
}

#yellowcraig{
   position: absolute;
   left: 630px;
   top: 552px;
   z-index: 50;
}

#yellowcraig:hover{
   background-color: #fff;
   opacity:0.8;
   filter:alpha(opacity=80);
   z-index: 70;
   border: 1px solid #666;
   border-radius: 10px;
   padding: 0 10px 5px 10px;
   -moz-box-shadow: 3px 3px 3px #333;
   -webkit-box-shadow: 3px 3px 3px #333;
   box-shadow: 3px 3px 3px #333;
   color: #000;
}

#gullane{
   position: absolute;
   left: 595px;
   top: 572px;
   z-index: 50;
}

#gullane:hover{
   background-color: #fff;
   opacity:0.8;
   filter:alpha(opacity=80);
   z-index: 70;
   border: 1px solid #666;
   border-radius: 10px;
   padding: 0 10px 5px 10px;
   -moz-box-shadow: 3px 3px 3px #333;
   -webkit-box-shadow: 3px 3px 3px #333;
   box-shadow: 3px 3px 3px #333;
   color: #000;
}

#portobello{
   position: absolute;
   left: 424px;
   top: 695px;
   z-index: 50;
}

#portobello:hover{
   background-color: #fff;
   opacity:0.8;
   filter:alpha(opacity=80);
   z-index: 70;
   border: 1px solid #666;
   border-radius: 10px;
   padding: 0 10px 5px 10px;
   -moz-box-shadow: 3px 3px 3px #333;
   -webkit-box-shadow: 3px 3px 3px #333;
   box-shadow: 3px 3px 3px #333;
   color: #000;
}

#silversands{
   position: absolute;
   left: 294px;
   top: 594px;
   z-index: 50;
}

#silversands:hover{
   background-color: #fff;
   opacity:0.8;
   filter:alpha(opacity=80);
   z-index: 70;
   border: 1px solid #666;
   border-radius: 10px;
   padding: 0 10px 5px 10px;
   -moz-box-shadow: 3px 3px 3px #333;
   -webkit-box-shadow: 3px 3px 3px #333;
   box-shadow: 3px 3px 3px #333;
   color: #000;
}


#pettycur{
   position: absolute;
   left: 378px;
   top: 575px;
   z-index: 50;
}

#pettycur:hover{
   background-color: #fff;
   opacity:0.8;
   filter:alpha(opacity=80);
   z-index: 70;
   border: 1px solid #666;
   border-radius: 10px;
   padding: 0 10px 5px 10px;
   -moz-box-shadow: 3px 3px 3px #333;
   -webkit-box-shadow: 3px 3px 3px #333;
   box-shadow: 3px 3px 3px #333;
   color: #000;
}


#kinghorn{
   position: absolute;
   left: 393px;
   top: 553px;
   z-index: 50;
}

#kinghorn:hover{
   background-color: #fff;
   opacity:0.8;
   filter:alpha(opacity=80);
   z-index: 70;
   border: 1px solid #666;
   border-radius: 10px;
   padding: 0 10px 5px 10px;
   -moz-box-shadow: 3px 3px 3px #333;
   -webkit-box-shadow: 3px 3px 3px #333;
   box-shadow: 3px 3px 3px #333;
   color: #000;
}

#seafield{
   position: absolute;
   left: 398px;
   top: 513px;
   z-index: 50;
}

#seafield:hover{
   background-color: #fff;
   opacity:0.8;
   filter:alpha(opacity=80);
   z-index: 70;
   border: 1px solid #666;
   border-radius: 10px;
   padding: 0 10px 5px 10px;
   -moz-box-shadow: 3px 3px 3px #333;
   -webkit-box-shadow: 3px 3px 3px #333;
   box-shadow: 3px 3px 3px #333;
   color: #000;
}

#lowerlargo{
   position: absolute;
   left: 510px;
   top: 365px;
   z-index: 50;
}

#lowerlargo:hover{
   background-color: #fff;
   opacity:0.8;
   filter:alpha(opacity=80);
   z-index: 70;
   border: 1px solid #666;
   border-radius: 10px;
   padding: 0 10px 5px 10px;
   -moz-box-shadow: 3px 3px 3px #333;
   -webkit-box-shadow: 3px 3px 3px #333;
   box-shadow: 3px 3px 3px #333;
   color: #000;
}

#earlsferry{
   position: absolute;
   left: 610px;
   top: 418px;
   z-index: 50;
}

#earlsferry:hover{
   background-color: #fff;
   opacity:0.8;
   filter:alpha(opacity=80);
   z-index: 70;
   border: 1px solid #666;
   border-radius: 10px;
   padding: 0 10px 5px 10px;
   -moz-box-shadow: 3px 3px 3px #333;
   -webkit-box-shadow: 3px 3px 3px #333;
   box-shadow: 3px 3px 3px #333;
   color: #000;
}
#earlsferry2{
   position: absolute;
   left: 562px;
   top: 412px;
   z-index: 50;
}

#earlsferry2:hover{
   background-color: #fff;
   opacity:0.8;
   filter:alpha(opacity=80);
   z-index: 70;
   border: 1px solid #666;
   border-radius: 10px;
   padding: 0 10px 5px 10px;
   -moz-box-shadow: 3px 3px 3px #333;
   -webkit-box-shadow: 3px 3px 3px #333;
   box-shadow: 3px 3px 3px #333;
   color: #000;
}

#elieharbour{
   position: absolute;
   left: 635px;
   top: 416px;
   z-index: 50;
}

#elieharbour:hover{
   background-color: #fff;
   opacity:0.8;
   filter:alpha(opacity=80);
   z-index: 70;
   border: 1px solid #666;
   border-radius: 10px;
   padding: 0 10px 5px 10px;
   -moz-box-shadow: 3px 3px 3px #333;
   -webkit-box-shadow: 3px 3px 3px #333;
   box-shadow: 3px 3px 3px #333;
   color: #000;
}

#rubybay{
   position: absolute;
   left: 655px;
   top: 402px;
   z-index: 50;
}

#rubybay:hover{
   background-color: #fff;
   opacity:0.8;
   filter:alpha(opacity=80);
   z-index: 70;
   border: 1px solid #666;
   border-radius: 10px;
   padding: 0 10px 5px 10px;
   -moz-box-shadow: 3px 3px 3px #333;
   -webkit-box-shadow: 3px 3px 3px #333;
   box-shadow: 3px 3px 3px #333;
   color: #000;
}

#anstruther{
   position: absolute;
   left: 746px;
   top: 350px;
   z-index: 50;
}

#anstruther:hover{
   background-color: #fff;
   opacity:0.8;
   filter:alpha(opacity=80);
   z-index: 70;
   border: 1px solid #666;
   border-radius: 10px;
   padding: 0 10px 5px 10px;
   -moz-box-shadow: 3px 3px 3px #333;
   -webkit-box-shadow: 3px 3px 3px #333;
   box-shadow: 3px 3px 3px #333;
   color: #000;
}

#roomebay{
   position: absolute;
   left: 805px;
   top: 302px;
   z-index: 50;
}

#roomebay:hover{
   background-color: #fff;
   opacity:0.8;
   filter:alpha(opacity=80);
   z-index: 70;
   border: 1px solid #666;
   border-radius: 10px;
   padding: 0 10px 5px 10px;
   -moz-box-shadow: 3px 3px 3px #333;
   -webkit-box-shadow: 3px 3px 3px #333;
   box-shadow: 3px 3px 3px #333;
   color: #000;
}

#kingsbarns{
   position: absolute;
   left: 783px;
   top: 258px;
   z-index: 50;
}

#kingsbarns:hover{
   background-color: #fff;
   opacity:0.8;
   filter:alpha(opacity=80);
   z-index: 70;
   border: 1px solid #666;
   border-radius: 10px;
   padding: 0 10px 5px 10px;
   -moz-box-shadow: 3px 3px 3px #333;
   -webkit-box-shadow: 3px 3px 3px #333;
   box-shadow: 3px 3px 3px #333;
   color: #000;
}

#eastsands{
   position: absolute;
   left: 672px;
   top: 209px;
   z-index: 50;
}

#eastsands:hover{
   background-color: #fff;
   opacity:0.8;
   filter:alpha(opacity=80);
   z-index: 70;
   border: 1px solid #666;
   border-radius: 10px;
   padding: 0 10px 5px 10px;
   -moz-box-shadow: 3px 3px 3px #333;
   -webkit-box-shadow: 3px 3px 3px #333;
   box-shadow: 3px 3px 3px #333;
   color: #000;
}

#westsands{
   position: absolute;
   left: 655px;
   top: 190px;
   z-index: 50;
}

#westsands:hover{
   background-color: #fff;
   opacity:0.8;
   filter:alpha(opacity=80);
   z-index: 70;
   border: 1px solid #666;
   border-radius: 10px;
   padding: 0 10px 5px 10px;
   -moz-box-shadow: 3px 3px 3px #333;
   -webkit-box-shadow: 3px 3px 3px #333;
   box-shadow: 3px 3px 3px #333;
   color: #000;
}


#tentsmuir{
   position: absolute;
   left: 658px;
   top: 115px;
   z-index: 50;
}

#tentsmuir:hover{
   background-color: #fff;
   opacity:0.8;
   filter:alpha(opacity=80);
   z-index: 70;
   border: 1px solid #666;
   border-radius: 10px;
   padding: 0 10px 5px 10px;
   -moz-box-shadow: 3px 3px 3px #333;
   -webkit-box-shadow: 3px 3px 3px #333;
   box-shadow: 3px 3px 3px #333;
   color: #000;
}


/* Other structural items */



#credits{
   position: absolute;
   right: 10px;
   bottom: 5px;
   z-index: 50;
   text-align: right;
}


/* Overlay fonts */
a:link {
        text-decoration: none; 
        font-weight: 900;
        color: #333;

}
a:visited {
        text-decoration: none; 
        font-weight: 900;
        color: #333;
}

a:hover {
        text-decoration: none; 
        font-weight: 200;
        color: #000;
}

a:active {
        text-decoration: none; 
        font-weight: 900;
        color: #333;
}


h1 a:link {
        text-decoration: none; 
        font-weight: 200;
        color: #000;

}
h1 a:visited {
        text-decoration: none; 
        font-weight: 200;
        color: #000;

}
h1 a:hover {
        text-decoration: none; 
        font-weight: 200;
        color: #000;
}

h1 a:active {
        text-decoration: none; 
        font-weight: 200;
        color: #000;

}

h4 a:link {
        text-decoration: none; 
        font-weight: 200;

}
h4 a:visited {
        text-decoration: none; 
        font-weight: 200;

}

h4 a:hover {
        text-decoration: none; 
        font-weight: 200;
}

h4 a:active {
        text-decoration: none; 
        font-weight: 200;

}

a.lothian:link{ color: #000;}
a.lothian:visited{ color: #000;}
a.lothian:hover{ color: #dfa045;}
a.lothian:active{ color: #000;}

a.fife:link{ color: #000;}
a.fife:visited{ color: #000;}
a.fife:hover{ color: #913e2e;}
a.fife:active{ color: #000;}


a.crow:link{ color: #666;}
a.crow:visited{ color: #666;}
a.crow:hover{ color: #333;}
a.crow:active{ color: #666;}