html, body {
	margin:0px; padding:0px; 
	background:#fff;

}

body,p,td {font-family:  Tahoma, Verdana;
  font-size: 10pt;  color: #444444;
}




/* стилі гіперпосилань у тексті*/
a { }
A:link {COLOR: #474744; } 
A:visited {COLOR: #474744; }
A:active {COLOR: #c00000; }
A:hover {COLOR: #c00000; text-decoration:underline;}


div {border:none; margin:0px; padding:0px;}


/* це для таблиць, що зустрічатимуться в тексті */
table {width:80%; margin-top: 10pt; margin-bottom: 10pt;}
td {
 vertical-align: top; border: solid 1pt; background-color: #ffffff;  border-color: #aaaaaa; padding : 3 pt;  }



th {
 vertical-align: top; border: solid 1pt; text-align: center; font-weight: bold;  border-color: #000000; background: #eeeeee; padding : 3pt;}

/* це для малюнків, що зустрічатимуться в тексті */
img {
  margin:0pt;  border-bottom-width : 0;
    border-left-width : 0;
    border-right-width : 0;
    border-top-width : 0;
  }



/* стилі всіх заголовків. Основний - h2, решта - для форматування тексту. */
h1 {	font-size: 10pt; font-family: Tahoma, Verdana; color: #aa7369; margin-top:40px; margin-bottom:30px; text-align: center;}
h2 {font-size:150%;	font-family: Tahoma, Verdana; color: #aa7369; margin-top:10px; margin-bottom:10px;text-align:center;}
h3 {	font-size: 130%; font-family: Tahoma, Verdana; color: #aa7369; margin-top:25px; margin-bottom:10px;}
h4 {	font-size: 110%; font-family: Tahoma, Verdana; color: #aa7369; margin-top:25px; margin-bottom:10px;}
h5 {	font-size: 100%; font-family: Tahoma, Verdana; color: #aa7369; margin-top:20px; margin-bottom:5px;}
h6 {	font-size: 80%; font-family: Tahoma, Verdana; color: #aa7369; margin-top:20px; margin-bottom:5px;}


/* так можна позначати повідомлення про помилку */
p.text{line-height:1.5; margin-right:10px; font-size:135%;}
p.error {color: #ee0000;}   
/* так можна позначати повідомлення про вдало виконану дію */
p.vyjshlo {color: #008000;} 

p.big {font-size:150%; font-weight: bold;} 
p.no{font-size:105%; font-weight: bold; text-align:center; text-decoration: line-through;}
.red{color:#ff3300;}


/* стилі списків */
li{list-style-type: square;   padding-top:2pt; padding-bottom:4pt;}


/* обнулила стилі елементів, які задіяні у верстці */
table.verst {width:100%; margin: 0pt; padding: 0pt; border:none; }
td.verst {border: none; padding : 0 pt; margin: 0pt;}
img.verst {
margin:0pt;  border-bottom-width : 0;
    border-left-width : 0;
    border-right-width : 0;
    border-top-width : 0;
  }


img.tovar{margin:10px;}



.descr{margin-left:-1px;  display: -moz-inline-block;
display:inline-block;

}
.descr h2{padding-left:5px;}
p.big a {display:block; font-size:8pt;}

li.verst{list-style-type: none; margin:0px; padding:0px;}
li.verstblok{list-style-type: none; margin-left:10px; margin-right:10px; margin-top:1px;  margin-bottom:1px; }
div.verstblok{margin-left:10px; margin-right:10px; margin-top:-5px;  margin-bottom:-5px;  background-image: url(krapky.gif); background-position: center left; background-repeat: repeat-x;}
ul.verst{ margin:0px; padding:0px;}


div.bk{
  display:-moz-inline-stack;/*Нужно для Firefox*/
  display:inline-block; /*Не применяется в IE и Firefox*/
  _overflow:hidden;/*фикс для IE6*/
  zoom:1;/*включаем hasLayout*/
  *display:inline;/*при hasLayout true display:inline ведёт себя как display:inline-block*/
margin-top:5px; margin-bottom:5px;	
}

div.im{

	float:left;
	width:170px;
	overflow:hidden;
}
div.tx{

	margin-left:180px;
}






#container{
   display:inline-block;
   overflow:hidden;
   position:relative;
}
#storage{
   display:none;
}
#text{
  display:block;
}
#image{
  display:inline-block;
}
span#imagescrollpanel{
  display:inline-block;
  overflow:hidden;
}
a.imageActiveZone{
  display:inline-block;
  position:absolute;
}
span.imageActiveZone{
  display:inline-block;
  position:absolute;
}
a.imageActiveBZone{
  display:inline-block;
  position:absolute;
}
a.imageActiveMAPZone{
  display:block;
  position:absolute;
overflow:hidden;
}
a.imageActiveMAP0{
  display:block;
  position:absolute;
overflow:hidden;
}

a.imageActiveTOPZone{
  display:inline-block;
  position:absolute;
}
a.imageActiveBOTZone{
  display:inline-block;
  position:absolute;
}

a.imageActiveP0Zone{
  display:inline-block;
  position:absolute;
}
a.imageActiveP1Zone{
  display:inline-block;
  position:absolute;
}
a.imageActiveP2Zone{
  display:inline-block;
  position:absolute;
}
a.imageActiveP3Zone{
  display:inline-block;
  position:absolute;
}
a.imageActiveP4Zone{
  display:inline-block;
  position:absolute;
}
a.imageActiveP5Zone{
  display:inline-block;
  position:absolute;
}

/* это можно изменить */
#container{

   width:800px;
   height:533px;
   border:1px solid gray;
}

span#imagescrollpanel{
  width:800px;
  height:533px;

}
a.imageActiveZone{
width:32px; 
height:30px; 
background-image: url(ikinfo.png);
background-position: top center; 
background-repeat: no-repeat;
  margin:1pt;
}
a.imageActiveZone:hover{
border:1pt solid lime;
  margin:0;
}
span.imageActiveZone{
width:32px; 
height:30px; 
background-image: url(ikinfo.png);
background-position: top center; 
background-repeat: no-repeat;
  margin:1pt;
}
span.imageActiveZone:hover{
border:1pt solid lime;
  margin:0;
}
a.imageActiveBZone{
width:32px; 
height:30px; 
background-image: url(ikphoto.png);
background-position: top center; 
background-repeat: no-repeat;
  margin:1pt;
}
a.imageActiveBZone:hover{
border:1pt solid lime;
  margin:0;
}
a.imageActiveMAPZone{
border:1pt solid lime;
background-color:#fff;
opacity:0.3;
width:10px; 
height:10px; 
margin:1pt; 
}
a.imageActiveMAPZone:hover{
border:1pt solid #ff0000;
  margin:0;
}
a.imageActiveMAP0{
border:none;
width:800px; 
height:533px; 
margin:1pt; 
}
a.imageActiveMAP0:hover{
border:1pt solid #ff0000;
  margin:0;
}

a.imageActiveP0Zone{
border:1pt solid lime;
width:92px; 
height:16px; 
background-image: url(0p.png);
background-position: top center; 
background-repeat: no-repeat;
  margin:1pt;
}
a.imageActiveP0Zone:hover{
border:1pt solid #ff0000;
  margin:0;
}
a.imageActiveP1Zone{
border:1pt solid lime;
width:92px; 
height:16px; 
background-image: url(1p.png);
background-position: top center; 
background-repeat: no-repeat;
  margin:1pt;
}
a.imageActiveP1Zone:hover{
border:1pt solid #ff0000;
  margin:0;
}
a.imageActiveP2Zone{
border:1pt solid lime;
width:92px; 
height:16px; 
background-image: url(2p.png);
background-position: top center; 
background-repeat: no-repeat;
  margin:1pt;
}
a.imageActiveP2Zone:hover{
border:1pt solid #ff0000;
  margin:0;
}
a.imageActiveP3Zone{
border:1pt solid lime;
width:92px; 
height:16px; 
background-image: url(3p.png);
background-position: top center; 
background-repeat: no-repeat;
  margin:1pt;
}
a.imageActiveP3Zone:hover{
border:1pt solid #ff0000;
  margin:0;
}
a.imageActiveP4Zone{
border:1pt solid lime;
width:92px; 
height:16px; 
background-image: url(4p.png);
background-position: top center; 
background-repeat: no-repeat;
  margin:1pt;
}
a.imageActiveP4Zone:hover{
border:1pt solid #ff0000;
  margin:0;
}

a.imageActiveP5Zone{
border:1pt solid lime;
width:92px; 
height:16px; 
background-image: url(5p.png);
background-position: top center; 
background-repeat: no-repeat;
  margin:1pt;
}
a.imageActiveP5Zone:hover{
border:1pt solid #ff0000;
  margin:0;
}

a.imageActiveTOPZone{
width:135px; 
height:27px; 
background-image: url(vpered1-zelb.png);
background-position: top center; 
background-repeat: no-repeat;
  margin:0pt;
}
a.imageActiveTOPZone:hover{
background-position: bottom center; 
}
a.imageActiveBOTZone{
width:135px; 
height:27px; 
background-image: url(nazad1-a-zelb.png);
background-position: bottom center; 
background-repeat: no-repeat;
  margin:0pt;
}
a.imageActiveBOTZone:hover{
background-position: top center; 
}


/**
Стрелки 
использовать так:
  <a class="arrow s" style="top:0px;left:0px;"></a>
  <a class="arrow sse" style="top:100px;left:0px;"></a>
  <a class="arrow se" style="top:200px;left:0px;"></a>
  <a class="arrow see" style="top:300px;left:0px;"></a>
  <a class="arrow e" style="top:0px;left:100px;"></a>
  <a class="arrow nee" style="top:100px;left:100px;"></a>
  <a class="arrow ne" style="top:200px;left:100px;"></a>
  <a class="arrow nne" style="top:300px;left:100px;"></a>
  <a class="arrow n" style="top:0px;left:200px;"></a>
  <a class="arrow nnw" style="top:100px;left:200px;"></a>
  <a class="arrow nw" style="top:200px;left:200px;"></a>
  <a class="arrow nww" style="top:300px;left:200px;"></a>
  <a class="arrow w" style="top:00px;left:300px;"></a>
  <a class="arrow sww" style="top:100px;left:300px;"></a>
  <a class="arrow sw" style="top:200px;left:300px;"></a>
  <a class="arrow ssw" style="top:300px;left:300px;"></a
*/
a.arrow{
  background-image:url(arrows.png);
  background-repeat:no-repeat;
  width:60px;
  height:60px;
  display:block;
  position:absolute;
  border:none;
}
a.s{background-position:-1px -2px;}
a.sse{background-position:-65px 0;}
a.se{background-position:-134px 4px;}
a.see{background-position:-203px 0px;}
a.e{background-position:-279px 0px;}
a.nee{background-position:-357px -3px;}
a.ne{background-position:-430px -3px;}
a.nne{background-position:-513px 0px;}
a.n{background-position:-589px 0px;}
a.nnw{background-position:-659px 0px;}
a.nw{background-position:-729px 0px;}
a.nww{background-position:-806px 0px;}
a.w{background-position:-884px 0px;}
a.sww{background-position:-970px -2px;}
a.sw{background-position:-1040px -2px;}
a.ssw{background-position:-1113px 0px;}





a#top{
width:135px; height:27px; background-image: url(vperedb.png);background-position: top center; background-repeat: no-repeat;position:absolute; top:4px;left:315px; display:block;
}
a#top:hover{
background-position: bottom center;
}
a#bottom{align:center; width:135px; height:27px; background-image: url(nazadb.png);background-position: bottom center; background-repeat: no-repeat;position:absolute;top:505px;left:315px; display:block;}
a#bottom:hover{background-position: top center;
}
a#left{width:27px; height:135px; background-image: url(vlivob.png); background-position:  top left; background-repeat: no-repeat;position:absolute; top:209px;left:0px; display:block;}
a#left:hover{background-position:top right;
}
a#right{width:27px; height:135px; background-image: url(vpravob.png);background-position: top right; background-repeat: no-repeat;position:absolute;  top:209px;left:773px; display:block;}
a#right:hover{background-position: top left;
}








/* блоки */
span#supercontainer{
  width:800px;
  height:533px;
  position:relative;
  display:inline-block;
}

span#kozhuh{
padding:0px;
margin:0px;
width:160px;
height:90px;
display:inline-block;
vertical-align:top;
}
span#mapa{

  display:block;
  font-size:130%;
  text-align:left;
  font-size:10pt;
  padding-left:15px;
  padding-top:10px;
  padding-right:70px;
}

span#text{
   width:600px;
   height:30px;
   display:inline-block;
   vertical-align:top;
   font-family:Tahoma;
   font-size:90%;
   text-align:left;
   border:none;
   padding-right:10px;
   padding-top:10px;
   padding-bottom:5px;
   padding-left:0px;
}

span#notes{
  width:800px;
  height:100px;
  background-image: url(bottom1.png);
  background-position: top center; 
  background-repeat: no-repeat;
  vertical-align:top;
  display:inline-block;
  text-align:left;
}
span#shuba{
   width:610px;
   padding-left:10px;
   vertical-align:top;
   display:inline-block;
   text-align:left;
}

#score{
  height:60px;
  border:none;padding-top:0px;
  vertical-align:top;
  display:inline-block;
}
span.oneScore{
  vertical-align:top;
  display:inline-block;
  width:32px;
  height:42px;
  margin:0px;
  text-align:center;
  overflow:hidden;
  border:none;
  padding:0px;
  font-size:8px;
}

div#content{
  margin:5px;
  text-align:center;
}


div#ramka1{
  background-image: url(sir3.png);
  background-position: top right;
  background-repeat: no-repeat;
  padding-top:3px;
  padding-bottom:2px;
}

div#ramka2{
  background-image: url(sir2.png);
  background-position: top left;
  background-repeat: no-repeat;
}

div#ramka3{

}
div#ramka4{
  background-image: url(tr.png);
  background-position: top right;
  background-repeat: no-repeat;
  padding-top:1px;
  padding-right:5px;
  padding-left:5px;
}
div#ramka5{
   background-image: url(br.png);
   background-position: bottom right;
   background-repeat: no-repeat;
}
div#ramka6{
  background-image: url(bl.png);
  background-position: bottom left;
  background-repeat: no-repeat;
}

div#ramka7{
  background-image: url(tl.png);
  background-position:top left;
  background-repeat:no-repeat;
}
div#ramka8{
  background-image: url(b.png);
  background-position: bottom center;
  background-repeat: repeat-x;
}
div#ramka9{
  background-image: url(t.png);
  background-position: top center;
  background-repeat: repeat-x;
}
div#ramka10{
  background-image: url(l.png);
  background-position: center left;
  background-repeat: repeat-y;
}
div#ramka11{
  background-image: url(r.png);
  background-position: center right;
  background-repeat: repeat-y;
}

div#ramka12{
  margin-bottom:0px;
}




/* game styles */
a.surprise{
  display:inline-block;
  position:absolute;
  border:none;
background:none;
}


a.surprise img,
span.oneScore img{
  display:block;
  width:32px;
  height:32px;background:none;
}


span#text p{
  margin:0px;
}