@import url("reset.css");
@import url("style.css");


/*TYPE PROPERTIES REFERENCE*/



/*
    width:100%; can be % px  auto
    height: auto;  % px  auto
    text-align: left; left right center
    font-size:125px;  px vh vw
    font-weight: 100; bold Extra bold etc or 100,200,...900
    line-height:150px; px %
    letter-spacing: -5px; px %
    padding: T R B L; % px 
    margin: T R B L;

*/
main{background-image: url(../Images/map.jpg);
     background-position: top center;
	 background-origin: content-box;
	 background-repeat: no-repeat;
	 background-size: contain;
     position:relative;}
     



/*ids */ 



#gramophone{ left: 690px; top: 450px; }

#Book{ left: 1100px; top: 70px;  }

#Horse{ left: 110px; top: 150px; }

#Flowers{ left: 320px; top: 460px; }

#Tiara{ left: 970px; top: 340px; }

/*Classes*/

.info{ width:200px; height:200px}

.red:hover{ width:150px; height: 150px; background-color: darkgreen; }

.blink:hover{ content:url(../Images/horseblink.png)}

.turn:hover{ content:url(../Images/Violetsturn.png)}

.flash:hover{ content:url(../Images/Tiaraflash.png)}

.music:hover{ content:url(../Images/gramphonemusic.png)}

.close:hover{ content:url(../Images/bookclose.png)}

.apDiv{ position:absolute;    }

/*Images*/
img{width:100%; height:auto; display:block; }