/* Common CSS to all */
@media screen{


.hotspots .hotspot{display:none}
#multispot .hotspots{position:absolute;width:827px; height:423px;left:5px; bottom:30px}
#multispot .hotspots #transparent{width:827px; height:423px;}	
#multispot .hotspots .popUp{position: absolute;width:0px;height:0px;top:0px;left:0px;-moz-box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.35); box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.35);}
#multispot .hotspots .popUp .popupcon{position: absolute;top:0; left:0;width: 100%; height: 100%;background-color: white; }
#multispot .hotspots .popUp .close{right:0px; top:0px; z-index: 111;}
#multispot .hotspots .clicked{}
#multispot .hotspots .visited{}
#multispot .hotspots .popUp .text{position: absolute;left:55px;top:15px;font-family: Verdana;font-size: 18px;font-weight: bold;}
#multispot .hotspots .popUp #write{position: absolute;left:10px;top:100px;font-family: Verdana;font-size: 18px/26px;width:400px}
#multispot .hotspots .popUp #write1{position: absolute;left:10px;top:50px;font-family: Verdana;font-size: 18px/26px;width:400px}
#multispot .hotspots .popUp #write2{position: absolute;left:10px;top:70px;font-family: Verdana;font-size: 18px/26px;width:400px}
#multispot .hotspots .popUp #write3{position: absolute;left:100px;top:5px;font-family: Verdana;font-size: 18px/26px;width:400px}
#multispot .hotspots .popUp #write33{position: absolute;left:100px;top:5px;font-family: Verdana;font-size: 18px/26px;width:370px}
#multispot .hotspots .popUp #write4{position: absolute;left:10px;top:60px;font-family: Verdana;font-size: 18px/26px;width:455px}
#multispot .hotspots .popUp #write5{position: absolute;left:70px;top:5px;font-family: Verdana;font-size: 18px/26px;width:400px}
#multispot .hotspots .popUp .imgs{position: absolute;top:10px;left:10px}
#multispot .hotspots .popUp .imgss{position: absolute;top:10px;left:10px;}
area{cursor: pointer;}

#multispot2 .hotspots{position:absolute;width:645px; height:415px;background-color: white;left:95px; top:10px}
#multispot2 .hotspots #transparent{width:645px; height:415px;}	
#multispot2 .hotspots .popUp{position: absolute;width:0px;height:0px;top:0px;left:0px;-moz-box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.35); box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.35);}
#multispot2 .hotspots .popUp .popupcon{position: absolute;top:0; left:0;width: 100%; height: 100%;background-color: white; }
#multispot2 .hotspots .popUp .close{right:-13px; top:-13px; z-index: 111;}
#multispot2 .hotspots .popUp #topbar{position: absolute; top:0px; width:100%; height: 10px;background-color: gray}
#multispot2 .hotspots .clicked{}
#multispot2 .hotspots .visited{}
#multispot2 .hotspots .popUp #playbotton{position: absolute; left:10px; top: 13px;}	
#multispot2 .hotspots .popUp .imgs{position: absolute;top:60px;left:10px}
area{cursor: pointer;}


}   

/* Desktop, iframe of (800~960) within big browser (>1024) */
@media screen and (min-device-width:1025px) and (min-width:800px) and (max-width:960px) 
{
  
}

/* Desktop, iframe of (960~1024) within big browser (>1024) */
@media screen and (min-device-width:1025px) and (min-width: 961px) and (max-width: 1024px) 
{
  
    
}

/* Desktop, "full screen" within big browser (>1024) */
@media screen and (min-device-width:1025px) and (min-width: 1025px) 
{
  
    
}

/* Portrait mode for common tablets by exact aspect ratio*/
@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)/*ipad */
{




}

/* Landscape mode for common tablets by exact aspect ratio*/
@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)/*ipad */
{
  
}

/* Portrait mode for common tablets by exact aspect ratio*/
@media screen and (min-device-width: 1025px) and (orientation:portrait)/*Xoom and Nook */
{
  
}