#title{
top:
50px;
left:
50px;
color:
red;
background-color:
black;
font-size:
60px;
position:
absolute;
z-index:
2;
}

#play{
bottom:
50px;
right:
50px;
color:
red;
background-color:
black;
font-size:
60px;
position:
absolute;
z-index:
2;
}

#start a:visited{
color:
red;
}
#start a:link{
color:
red;
}

#start{
background-image:
url('images/CaveEntrance.bmp');
width:
900px;
Height:
600px;
}

#shop{
background-image:
url('images/Shop.bmp');
width:
900px;
Height:
600px;
}

#townCentre{
background-image:
url('images/townCentre.png');
width:
900px;
Height:
600px;
}

#crossRoads{
background-image:
url('images/crossRoads.png');
width:
900px;
Height:
600px;
}

#mainRoad{
background-image:
url('images/travelledPath.png');
width:
900px;
Height:
600px;
}

#forestRoad{
background-image:
url('images/forrestpath.png');
width:
900px;
Height:
600px;
}

#bar{
background-image:
url('images/bar.png');
width:
900px;
Height:
600px;
}

#wizard{
background-image:
url('images/wizardBar.png');
width:
900px;
Height:
600px;
}

#bartender{
background-image:
url('images/bartenderBar.png');
width:
900px;
Height:
600px;
}

#knight{
background-image:
url('images/knightBar.png');
width:
900px;
Height:
600px;
}

#thief{
background-image:
url('images/thiefBar.png');
width:
900px;
Height:
600px;
}

#forestFork{
background-image:
url('images/forrestFork.png');
width:
900px;
Height:
600px;
}

#nicePath{
background-image:
url('images/nicePath.png');
width:
900px;
Height:
600px;
}

#darkPath{
background-image:
url('images/darkPath.png');
width:
900px;
Height:
600px;
}

#deathValley{
background-image:
url('images/deathValley.png');
width:
900px;
Height:
600px;
}

#hauntedForest{
background-image:
url('images/hauntedForrest.png');
width:
900px;
Height:
600px;
}

#sunshineValley{
background-image:
url('images/sunshineValley.png');
width:
900px;
Height:
600px;
}

#puppyMeadow{
background-image:
url('images/puppyMeadow.png');
width:
900px;
Height:
600px;
}

#dungeon1{
background-image:
url('images/dungeon1.png');
width:
900px;
Height:
600px;
}

#dungeon2{
background-image:
url('images/dungeon2.png');
width:
900px;
Height:
600px;
}

#bridge{
background-image:
url('images/bridge.png');
width:
900px;
Height:
600px;
}

#trogdor{
background-image:
url('images/trogdorsLair.PNG');
width:
900px;
Height:
600px;
}

#win{
background-image:
url('images/win.PNG');
width:
900px;
Height:
600px;
}

#barSelect{
width:
200px;
height:
500px;
position:
absolute;
z-index:
3;
right:
0;
bottom:
0;

}

#road1Select{
width:
150px;
height:
300px;
position:
absolute;
z-index:
3;
left:
325px;
top:
50px;
}

#wizardSelect{
width:
150px;
height:
300px;
position:
absolute;
z-index:
3;
left:
25px;
top:
150px;
}

#bartenderSelect{
width:
150px;
height:
200px;
position:
absolute;
z-index:
3;
left:
350px;
top:
100px;
}

#knightSelect{
width:
150px;
height:
300px;
position:
absolute;
z-index:
3;
right:
180px;
top:
80px;
}

#thiefSelect{
width:
150px;
height:
300px;
position:
absolute;
z-index:
3;
right:
0px;
bottom:
50px;
}

#trogdorSelect{
width:
50px;
height:
100px;
position:
absolute;
z-index:
0;
left:
420px;
top:
255px;
background-color:
black;
}


#mainRoadSelect{
width:
300px;
height:
50px;
position:
absolute;
top:
100px;
left:
150px;
padding-left:
15px;
padding-top:
0px;
font-size:
30px;
color:
black;
}

#forestRoadSelect{
width:
300px;
height:
50px;
position:
absolute;
top:
100px;
left:
450px;
padding-left:
15px;
padding-top:
0px;
font-size:
30px;
color:
black;
}

#nicePathSelect{
width:
150px;
height:
50px;
position:
absolute;
top:
50px;
right:
150px;
padding-left:
15px;
padding-top:
0px;
font-size:
30px;
color:
black;
border:
5px solid black;
border-radius:
5px;
background-color:
rgba(250,250,250,0.6)
}

#darkPathSelect{
width:
150px;
height:
50px;
position:
absolute;
bottom:
50px;
right:
20px;
padding-left:
15px;
padding-top:
0px;
font-size:
30px;
color:
black;
border:
5px solid black;
border-radius:
5px;
background-color:
rgba(250,250,250,0.6)
}

#sunshineValleySelect{
width:
120px;
height:
80px;
position:
absolute;
top:
150px;
right:
50px;
padding-left:
15px;
padding-top:
0px;
font-size:
30px;
color:
black;
border:
5px solid black;
border-radius:
5px;
background-color:
rgba(250,250,250,0.6)
}

#puppyMeadowSelect{
width:
120px;
height:
80px;
position:
absolute;
bottom:
50px;
right:
20px;
padding-left:
15px;
padding-top:
0px;
font-size:
30px;
color:
black;
border:
5px solid black;
border-radius:
5px;
background-color:
rgba(250,250,250,0.6)
}

#deathValleySelect{
width:
100px;
height:
80px;
position:
absolute;
bottom:
150px;
right:
50px;
padding-left:
15px;
padding-top:
0px;
font-size:
30px;
color:
black;
border:
5px solid black;
border-radius:
5px;
background-color:
rgba(250,250,250,0.6)
}

#hauntedForestSelect{
width:
130px;
height:
80px;
position:
absolute;
bottom:
20px;
right:
220px;
padding-left:
15px;
padding-top:
0px;
font-size:
30px;
color:
black;
border:
5px solid black;
border-radius:
5px;
background-color:
rgba(250,250,250,0.6)
}

#dungeonEnter{
width:
110px;
height:
40px;
position:
absolute;
bottom:
120px;
right:
400px;
padding-left:
15px;
padding-top:
0px;
font-size:
30px;
color:
black;
border:
5px solid black;
border-radius:
5px;
background-color:
rgba(250,250,250,0.6)
}

#pathContinue{
width:
150px;
height:
50px;
position:
absolute;
bottom:
50px;
right:
20px;
font-size:
30px;
color:
black;
padding:
10px;
border:
5px solid black;
border-radius:
5px;
background-color:
rgba(250,250,250,0.6);
z-index:
10;
}

#scytheText{
width:
300px;
height:
100px;
position:
absolute;
bottom:
20px;
right:
50px;
font-size:
30px;
color:
black;
padding:
10px;
border:
5px solid black;
border-radius:
5px;
background-color:
rgba(250,250,250,0.6);
z-index:
10;
}

.items {

}

#helmet{
/*width: 150px;
height: 50px;*/
position:
absolute;
top:
50px;
left:
10px;
}

#dagger{
position:
absolute;
top:
50px;
right:
150px;
}
#hat{
position:
absolute;
top:
50px;
left:
720px;
}

#map{
position:
absolute;
top:
50px;
left:
200px;
}

#torch{
position:
absolute;
top:
100px;
left:
400px;
height:
232px;
width:
116px;
background-image:
url('images/torchUnlit.png');
}

#trogdorHead{
position:
absolute;
bottom:
250px;
left:
250px;
z-index:
2;
background-image:
url('images/trogdorHead.png');
}

#trogdorBody{
position:
absolute;
bottom:
250px;
left:
250px;
z-index:
2;
background-image:
url('images/trogdorBody.png');
}

#torchLit{
position:
absolute;
top:
100px;
left:
400px;
height:
232px;
width:
116px;
background-image:
url('images/torchLit.png');
}

#torchHeld{
position:
absolute;
bottom:
50px;
left:
50px;
height:
204;
width:
177;
cursor:
move;
z-index:
5;
}

#oldMan{
position:
absolute;
bottom:
-300px;
right:
100px;
}

#scythe{
position:
absolute;
z-index:
5;
}

body {
background-color:
    black;
}

a:link {color:
      black;
     }
	 
a:visited {color:
         black;
        }
		
a:link {text-decoration:
      none;
     }
a:hover {text-decoration:
       underline;
      }


.container {
width:
    900px;
Height:
    600px;
margin:
    auto;
padding-top:
    50px;
position:
    relative;
overflow:
    hidden;
z-index:
    1;
}

.dialogueBox {
position:
    absolute;
bottom:
    50px;
left:
    20px;
max-width:
    400px;
height:
    auto;
padding:
    10px;
border:
    5px solid black;
font-size:
    18px;
border-radius:
    5px;
background-color:
    rgba(255, 255, 255, 0.8);
z-index:
    100;
font-family:
    verdana;
cursor:
    pointer;
}

.dialogueOption {
position:
    absolute;
bottom:
    50px;
right:
    20px;
max-width:
    400px;
height:
    auto;
padding:
    10px;
border:
    5px solid black;
font-size:
    18px;
border-radius:
    5px;
background-color:
    rgba(255, 255, 255, 0.8);
z-index:
    100;
font-family:
    verdana;
cursor:
    pointer;
}

.dialogueOption2 {
position:
    absolute;
bottom:
    110px;
right:
    300px;
width:
    auto;
height:
    auto;
padding:
    10px;
border:
    5px solid black;
font-size:
    18px;
border-radius:
    5px;
background-color:
    rgba(255, 255, 255, 0.8);
z-index:
    100;
font-family:
    verdana;
cursor:
    pointer;
}

.exit {
position:
    absolute;
bottom:
    0px;
left:
    200px;
cursor:
    pointer;
}

.result {
position:
    absolute;
top:
    100px;
left:
    150px;
height:
    350px;
width:
    600px;
    /*margin: 100px;*/
padding:
    10px;
border:
    5px solid black;
font-size:
    24px;
border-radius:
    5px;
background-color:
    rgba(255, 255, 255, 0.9);
}

.instructions {
position:absolute;
top: 700px;
left:25%;
max-width:700px;
    /*height: 50px;
    width: 300px;
    /*margin: 100px;*/
padding:10px;
border:5px solid black;
font-size:24px;
border-radius:5px;
background-color:rgba(255, 255, 255, 0.9);
z-index:20;

}