body {
  background: url('images/bg.png');
  background-repeat: repeat-x;
  background-color: #e2e1e1;
  text-align: center;
  margin: 0;
  padding: 0;
}

a {
	color:yellow; 
	text-decoration:none;
	font-family: helvetica;
}


h2 {
  color: #4A8797;
}

#main {
  height: 356px;
  width: 320px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -178px 0 0 -160px;
  display: none;
}


/* -----------------------------------------------------------------------------
                          H E R N I   P O L E
----------------------------------------------------------------------------- */

/* herni pole */
#gamepad{
  background: url('images/gamepad.png');  
  margin: 0;
  padding: 0;
  width:  320px;
  height: 356px;
  position: relative;
}

.p3x3{
  background: url('images/3x3.png');  
  position: absolute;
	width: 104px;
	height: 104px;
}

.p3x3r0{  top: 2px;}
.p3x3r1{  top: 108px;}
.p3x3r2{  top: 214px;}
.p3x3c0{  left: 2px;}
.p3x3c1{  left: 108px;}
.p3x3c2{  left: 214px;}

/*  bunka herniho pole  */
.hp {
	border: none;
	text-align: center;
	vertical-align: middle;
	position: absolute;
	width: 30px;
	height: 30px;
	font-family: helvetica;
	font-weight: bold;
	font-size: 18px;
  line-height:30px;
  background: url('images/empty.png');  
	cursor: pointer; 
}

/*  radky herniho pole  */
.hp_r0 {top: 5px}
.hp_r1 {top: 39px}
.hp_r2 {top: 73px}
.hp_r3 {top: 111px}
.hp_r4 {top: 145px}
.hp_r5 {top: 179px}
.hp_r6 {top: 217px}
.hp_r7 {top: 251px}
.hp_r8 {top: 285px}

/*  sloupce herniho pole  */
.hp_c0 {left: 5px}
.hp_c1 {left: 39px}
.hp_c2 {left: 73px}
.hp_c3 {left: 111px}
.hp_c4 {left: 145px}
.hp_c5 {left: 179px}
.hp_c6 {left: 217px}
.hp_c7 {left: 251px}
.hp_c8 {left: 285px}

/* pole s pencilmarky */
.pm_policko{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 32px;
  height: 32px;
	font-family: monospace;
	font-weight: bold;
	font-size: 8px;
	letter-spacing: 4px;
	line-height: 95%;
	padding: 4px 0px 0px 2px;
}

/* -----------------------------------------------------------------------------
                          H L A V N I   N A B I D K A
----------------------------------------------------------------------------- */

/* klavesa pro vyvolani menu */
#menu_kl {
  line-height:35px;
  position: absolute;
  top: 320px;
  left: 110px;
  height: 32px;
  width: 207px;
  border: none;
  color: #4a8797;
  background: url('images/menu.png');
  text-align: center;
  vertical-align: middle;
	font-family: helvetica;
	font-size: 20px;
	font-weight: bold;
	cursor: pointer; 
}

/* menu */
#menu {
  position: absolute;
  left:0;
  top:0;
  width: 320px;
  height: 356px;
  background: url('images/bg-pruhledne.png');  
  border: none; 
  display:block;
  z-index: 20;
}

/* polozka menu */
.menu_item {
  line-height:35px;
  position: absolute;
  left: 5px;
  width: 310px;
  height: 35px;
	text-align:center; 
	vertical-align: middle; 
  background: url('images/polozky-menu.png');  
	color:#4a8797;
	font-family: helvetica;
	font-weight: bold;
	font-size: 20px;
	cursor: pointer; 
}

/* tlacitko close */
.menu_close{
	position: absolute; 
  width:31px;
  height:31px;
  left: 283px; 
  top:109px;
  background: url('images/menu-close.png');
	cursor: pointer; 
}

/* konkretni polozky menu */
.menu_item0 {  top: 283px}
.menu_item1 {  top: 248px}
.menu_item2 {  top: 213px}
.menu_item3 {  top: 178px}
.menu_item4 {  top: 143px}
.menu_item5 {  top: 108px}
.menu_item6 {  top: 73px}
.menu_item7 {  top: 38px}
.menu_item8 {  top: 3px}
.menu_item_hidden {display: none;}

/* logo */
#logo {
  position: absolute;
  left:127px;
  top:85px;
  width: 156px;
  height: 54px;
  background: url('images/sudoku-logo.png');  
  border: none; 
	cursor: pointer; 
}

/* menu preference */
#menu_pref {
  position: absolute;
  left:0;
  top:0;
  width: 320px;
  height: 356px;
  background: url('images/bg-pruhledne.png');  
  border: none; 
  display:none;
  z-index: 20;
}


/* menu skin */
#menu_skin {
  position: absolute;
  left:0;
  top:0;
  width: 320px;
  height: 356px;
  background: url('images/bg-pruhledne.png');  
  border: none; 
  display:none;
  z-index: 20;
}


/* menu help */
#menu_help {
  position: absolute;
  left:0;
  top:0;
  width: 320px;
  height: 356px;
  background: url('images/bg-pruhledne.png');  
  border: none; 
  display:none;
  z-index: 20;
}

/* menu help */
#menu_difficulty {
  position: absolute;
  left:0;
  top:0;
  width: 320px;
  height: 356px;
  background: url('images/bg-pruhledne.png');  
  border: none; 
  display:none;
  z-index: 20;
}


/* -----------------------------------------------------------------------------
                          K L A V E S N I C K A
----------------------------------------------------------------------------- */

#keypad{
  position: absolute;
  left:0px;
  top:0px;
  width: 320px;
  height: 356px;
  background: url('images/bg-pruhledne.png');  
  border: none; 
  display:none;
  z-index: 21;
}


.keypad_up{
  position: absolute; 
  left:55px; 
  top:107px; 
  width:104px; 
  height:104px; 
  background: url('images/bg-vkladani.png');  
  border: none; 
}

.keypad_dn{
  position: absolute; 
  left:161px; 
  top:107px; 
  width:104px; 
  height:104px; 
  background: none;  
  border: none; 
}


/* numericke klavesy + klavesa clr */
.klavesa_n{
  line-height:30px;
	position: absolute; 
	width:30px; 
	height:30px;
	border:none;
	text-align:center; 
	vertical-align: middle; 
	font-family: helvetica;
	font-weight: bold;
	font-size: 18px;
	cursor: pointer; 
}

.klavesa_n_up{
  background: url('images/ovladani-main.png');
  color:black;
}  

.klavesa_n_dn{
  background: url('images/ovladani-main.png');
  color: #999999;
}  


/* tlacitko clear */
.tl_clear{
  line-height:35px;
	position: absolute; 
	width:105px; 
	height:34px;
	top: 213px;
	left: 55px;
	border:none;
  background: url('images/pencilmarks.png');  
	text-align:center; 
	vertical-align: middle; 
	color:black;
	font-family: helvetica;
	font-weight: bold;
	font-size: 16px;
	cursor: pointer; 
}

/* tlacitko hint */
#tl_hint{
  line-height:35px;
	position: absolute; 
  width:71px;
  height:34px;
  left: 55px; 
  top:72px;
  background: url('images/ovladani-hint.png');
	border:none;
	text-align:center; 
	vertical-align: middle; 
	color:#ffffff;
	font-family: helvetica;
	font-weight: bold;
	font-size: 16px;
	cursor: pointer; 
}

/* tlacitko close */
#tl_close{
	position: absolute; 
  width:31px;
  height:31px;
  left: 128px; 
  top:72px;
  background: url('images/ovladani-close.png');
	cursor: pointer; 
}

/* tlacitko clear */
#tl_pclear{
	position: absolute; 
	width:105px; 
	height:34px;
	top: 213px;
	left: 160px;
	border:none;
  background: url('images/pencilmarks.png');  
	text-align:center; 
	vertical-align: middle; 
	color:black;
	font-family: helvetica;
	font-weight: bold;
	font-size: 16px;
	cursor: pointer; 
}

/* horni klavesnicka sloupce */
.nx0{	left:4px;}
.nx1{	left:37px;}
.nx2{	left:70px;}

/* horni klavesnicka radky */
.ny0{	top:4px;}
.ny1{	top:37px;}
.ny2{	top:70px;}

/* dolni klavesnicka sloupce */
.px0{	left:4px;}
.px1{	left:37px;}
.px2{	left:70px;}

/* dolni klavesnicka radky */
.py0{	top:4px;}
.py1{	top:37px;}
.py2{	top:70px;}

/* tlacitko clear */
.tl_pclear{
  line-height:35px;
	position: absolute; 
	width:105px; 
	height:34px;
	top: 213px;
	left: 161px;
	border:none;
  background: url('images/pencilmarks.png');  
	text-align:center; 
	vertical-align: middle; 
	color:#999999;
	font-family: helvetica;
	font-weight: bold;
	font-size: 16px;
	cursor: pointer; 
}


/* napis pencilmarks */
.pm_nadpis{
  line-height:40px;
	position: absolute; 
	width:104px; 
	height:139px;
	top: 72px;
	left: 161px;
	border:none;
  background: url('images/pm_bg.png');  
	text-align:center; 
	vertical-align: middle; 
	color:#999999;
	font-family: helvetica;
	font-weight: bold;
	font-size: 12px;
	cursor: default; 
}

/* about */
#about {
  position: absolute;
  left:0;
  top:0;
  width: 320px;
  height: 356px;
  background: url('images/bg-pruhledne.png');  
  border: none; 
  display:none;
	cursor: default; 
  z-index: 20;
}

#about_text {
  position: absolute;
  top: 143px;
  left: 3px;
  height: 75px;
  width: 313px;
  border: none;
  color: #000000;
  padding: 100px 0px 0px 0px;
  background: url('images/about.png');
  text-align: center;
  vertical-align: middle;
	font-family: helvetica;
	font-size: 12px;
	font-weight: 900;
	display: block;
  z-index: 20;
}


/* support */
#support {
  position: absolute;
  left:0;
  top:0;
  width: 320px;
  height: 356px;
  background: url('images/bg-pruhledne.png');  
  border: none; 
  display:none;
	cursor: default; 
  z-index: 20;
}

#support_text {
  position: absolute;
  top: 178px;
  left: 3px;
  height: 141px;
  width: 313px;
  border: none;
  color: #000000;
  background: url('images/support.png');
  text-align: center;
  vertical-align: middle;
	font-family: helvetica;
	font-size: 12px;
	font-weight: 900;
  z-index: 20;
}

/* rules */
#rules {
  position: absolute;
  left:0;
  top:0;
  width: 320px;
  height: 356px;
  background: url('images/bg-pruhledne.png');  
  border: none; 
  display:none;
	cursor: default; 
  z-index: 20;
}

#rules_text {
  position: absolute;
  top: 178px;
  left: 3px;
  height: 141px;
  padding: 0px 5px 0px 5px;
  width: 303px;
  border: none;
  color: #000000;
  background: url('images/support.png');
  text-align: center;
  vertical-align: middle;
	font-family: helvetica;
	font-size: 12px;
	font-weight: 900;
  z-index: 20;
}

#support_a {
  color:#000000;
  text-decoration: underline;
	cursor: pointer; 
}

#about_a {
  color:#000000;
  text-decoration: underline;
	cursor: pointer; 
}

#support_h {
  color:#4a8797;
}

#about_h {
  color:#4a8797;
}

#rules_h {
  color:#4a8797;
}


/* help */
#help {
  position: absolute;
  left:0;
  top:0;
  width: 320px;
  height: 356px;
  background: url('images/bg-pruhledne.png');  
  border: none; 
  display:none;
	cursor: default; 
  z-index: 20;
}

#help_text {
  position: absolute;
  top: 38px;
  left: 3px;
  height: 281px;
  width: 303px;
  border: none;
  padding: 0px 5px 0px 5px;
  color: #000000;
  background: url('images/help.png');
  text-align: center;
  vertical-align: middle;
	font-family: helvetica;
	font-size: 12px;
	font-weight: 900;
  z-index: 20;
}

/* download */
#download {
  height: 356px;
  width: 320px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -178px 0 0 -160px;
  border: none; 
  cursor: wait;
  z-index: 100;
}

#download_text{
  color: #ff0000;
  position: absolute;
  top: 142px;
  left: 5px;
  height: 35px;
  width: 310px;
  border: none;
  color: #000000;
  text-align: center;
  vertical-align: middle;
  line-height:37px;
	font-family: helvetica;
	font-size: 15px;
	font-weight: 900;
	cursor: default; 
  z-index: 20;
}

/* stopky */ 
#stopky{
  color: #69bfde;
  position:absolute; 
  top: 330px; 
  left:30px;
  font-weight: bold; 
  font-family: helvetica;
  font-size: 15px;
  z-index: 10;
  cursor: default;
}

/* odkaz */ 
.odkaz{
  color: #69bfde;
  position:absolute; 
  top: 340px; 
  left:15px;
  font-weight: bold; 
  font-family: helvetica;
  font-size: 9px;
  z-index: 10;
}

.odkaz a{
  color: #69bfde;
}

.odkaz a:hover{
  color: #ffffff;
}

/* prvek zakazany v demoverzi */
.disabled{
	color: silver;
  cursor : default;
}

/* neviditelny prvek */
.skryty {
  display: none;
}

#msie {
  height: 130px;
  width: 320px;
  margin: 0 auto;
  padding: 10px;
  background-color: #333333;
  text-align: center;
  position: absolute;
  color: #ffffff;
  top: 50%;
  left: 50%;
  margin: -70px 0 0 -160px;
  border: 2px solid;
  display: none;
  font-family:helvetica;
  text-decoration:none;  
  z-index: 90;
}

/* blok pro zobrazeni hlasky */
.blok{
  background: url('../img/panel-cerny.png');
  background-repeat: no-repeat;
  margin: 0 auto;
  width: 319px;
  height: 319px;
  top: 50%;
  left: 50%;
	font-family: helvetica;
}

.blok-nadpis{
  font-size:22px;
  font-weight:normal;
  height:30px;
  line-height:52px;
  text-align:center;
  color: #ffffff;
}

.inside{
  font-size:14px;
  height:250px;
    top:20px;
  line-height:140%;
  top:20px;
  left:10px;
  padding-left:10px;
  padding-right:30px;
  position:relative;
  color: #eeeeee;
}