canvas {
    position: relative;
}

canvas#background {
    background-color: #ccc;
}

/* HTMLowe boksy wyskakujące jako pop-up; */
div.ui-dialog {
    position: relative;
    z-index: 20000;
}

body,html{
width:100%;
height:100%;
margin:0;
padding:0;
background-color: #e7ebf2;
}

div.gameMenuBox {
    /* Początkowo boksy powinny być niewidoczne; Pojawiać się będą na stronie w miarę potrzeby; */
    display: none;
    /* Boks powinien się pojawić powyżej wszystkich warstw płótna; Wartość 20000 jest bezpieczna; */
    z-index: 20000;
	max-height:450px !important;
	padding:0px !important;
}

#friendsContainer{
padding:0;
margin:0;
list-style:none;
}
#friendsContainer li{
padding:0;
margin:0;
list-style:none;
font-size:12px;
line-height:14px;
clear:both;
position:relative;
padding:5px 0 0 0;
height:45px;
border-top:solid 1px #665c4d;
}
#friendsContainer img{
width:40px;
height:40px;
float:left;
margin:0 10px 0 0;
border-radius:4px;
}
#friendsContainer span{
display:block;
}
#friendsContainer button{
position:absolute;
bottom:5px;
right:0;
padding:2px 6px;
font-size:13px;
}
*:focus{  
    outline: none;  
} 


#menu-ranking-table{
	font-size:12px;
	line-height:14px;
	border-collapse:collapse;
	width:100%;
}
#menu-ranking-table img{
	width:40px;
	height:40px;
	float:left;
	margin:0 7px 0 0;
	border-radius:4px;
}
#menu-ranking-table th{
	font-size:11px;
	line-height:12px;
	color:#e7d4a9;
	padding:4px 2px 5px 2px;
	border-top:solid 1px #665c4d;
	border-bottom:solid 1px #665c4d;
	min-width:20px;
}

.menu-ranking-table-header{
	width:85px;
	cursor:pointer;
}

#menu-ranking-table th.active-asc,#menu-ranking-table th.active-desc{
	background:#e7d4a9;
	color:#1d0e09;
}

#menu-ranking-table td{
	padding:5px 5px 4px 0;
	border-bottom:solid 1px #665c4d;
	text-align:center;
}
#menu-ranking-table td span{
	display:block;
	text-align:left;
}


#menu-ranking-paging{
	height:20px;
	padding:10px 0 10px 10px;
}
#menu-ranking-paging a{
	background:#e7d4a9;
	color:#1d0e09;
	border-radius:3px;
	padding:1px 4px 2px 4px;
	margin:0 3px 0 0;
	
	display:block;
	float:left;
	cursor:pointer;
	font-size:11px;
	line-height:11px;
	font-weight:bold;
}
#menu-ranking-paging span.active a{
	background:#1d0e09;
	color:#e7d4a9;
}


#menu-end-game{
border-top:solid 1px #665c4d;
padding:10px !important;
text-align:center;
}
#menu-end-game-contentMessage{
padding:6px 0 0 0;
}
.scoreBox{color:#e7d4a9;}
.chocoScore{color:#b3765a;}

/********************************
* Menu wyboru litery dla blanka *
********************************/

div#menu-blank {
    clear: both;
    border-top:solid 1px #8d7d65;
}

/* Pudełko zawierające wszystkie litery do wyboru; */
div#menu-blank ul#menu-blank-lettersContainer{
    list-style: none;
    padding: 0;
    width: 298px;
    margin: 5px 0 0 2px;
    clear:both;
   
}

/* Pojedyncza litera, którą można wybrać; */
div#menu-blank ul#menu-blank-lettersContainer li{
    float: left;
    margin:0;
    padding:0;
    
}

/* Przycisk wyboru konkretnej litery */
div#menu-blank ul#menu-blank-lettersContainer li button{
	border:none;
    padding: 0px 0 0 0;
    margin: 0;
    text-align: center;
    display: block;
    background:#e3e3e3;
    float: left;
	width:37px;
	height:37px;
	font-size:20px;
	line-height:22px;
	font-weight:normal;
	color:#000000;
	border-right:dotted 1px #cccccc;
	border-bottom:dotted 1px #cccccc;
	cursor:pointer;
}
div#menu-blank ul#menu-blank-lettersContainer li button:hover{
background:#ffffff;
}

/* Pudełko zawierające wyłożone przez gracza litery; */
div#menu-blank-wordContainer {
    clear: both;
    border-bottom:solid 1px #8d7d65;
    padding:0 0 5px 2px;
    height:40px;
}

/* Pojedyncza płytka z literą wyłożoną przez gracza; */
div#menu-blank div#menu-blank-wordContainer span.menu-blank-wordLetter {
    padding: 5px 0 0 0;
    margin: 5px 5px 5px 0;
    text-align: center;
    display: block;
    background-color: #f6f6f6;
    float: left;
	width:35px;
	height:30px;
	font-size:20px;
	line-height:22px;
	font-weight:bold;
	color:#000000;
	border-radius:4px;
	box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.4) inset;
}

/* Wyłożona przez gracza płytka blank, dla której właśnie podejmowana jest decyzja; */
div#menu-blank div#menu-blank-wordContainer span.menu-blank-wordLetter.active {
    color: #55372c;
}

.rules{
	font-size:13px;
	text-align:left;
	padding:40px;
	border: 8px solid #e7d4a9;
	border-radius:6px;
	background: #210f09;
	margin:20px;
	color:#fce4c3;
}
.rules p{
	vertical-align:middle;
}
.rules p img{
	vertical-align:middle;
}
.rules h1,.rules h2,.rules h3{font-weight:normal;}
.rules h1{
	font-size:30px;
	line-height:33px;
	margin:0 0 10px 0;
	padding:0;
}
.rules h2{
	font-size:25px;
	line-height:27px;
	margin:30px 0 10px 0;
	padding:0;
}
.rules h3{
	font-size:20px;
	line-height:22px;
	margin:10px 0 10px 0;
	padding:0;
}
.aiUserButton,.friendUserButton,.randomUserButton{
	width:220px !important;
	padding:0 0 0 36px !important;
	margin:7px 0 7px 10px !important;
	font-size:15px !important;
	text-align:left !important;
}
.aiUserButton{
	background: transparent url("../images/buton1a.png") top left no-repeat !important;
}
.friendUserButton{
	background: transparent url("../images/buton2a.png") top left no-repeat !important;
}
.randomUserButton{
	background: transparent url("../images/buton3a.png") top left no-repeat !important;
}
.aiUserButton:hover{
	background: transparent url("../images/buton1.png") top left no-repeat !important;
}
.friendUserButton:hover{
	background: transparent url("../images/buton2.png") top left no-repeat !important;
}
.randomUserButton:hover{
	background: transparent url("../images/buton3.png") top left no-repeat !important;
}
.ui-dialog-buttonset{
	padding:20px 0;
}