/** Add css rules here for your application. */
body {
	font-family: 'Roboto', sans-serif;
	/*margin: 0px;*/
	/*padding: 0px;*/
	/*background-color: red;!*#E9E9E9;*!*/
	min-height: 100vh;
	background-image: url("/puzzle/images/bg/bg2.jpeg");
	background-size: cover;
}

.union__content {
	margin-top: 30px;
	background-color: #ffffff;
}
.union__text {
	padding: 15px;
	background-color: #ffffff;
	font-size: 18px;
	font-weight: 300;
	text-align: center;
	margin: 0;
}
.union__image {
	max-width: 100%;
}
#mainBox {
	width: 796px;
	height: 526px;
	margin-left: auto;
	margin-right: auto;	
	border: 2px solid white;
	background: #ffffff;/*url("puzzle/images/main_bg.jpg") repeat-x;*/
}
#topBox {
	height: 100px;
	display: flex;
	justify-content: space-between;
}
#topBox img {
	height: 80px;
}
#logo {
	float: left;
	background: url("puzzle/images/logo.png") no-repeat;
	width: 135px;
	height: 69px;
	position: absolute;
}
#menuBox {
	float: left;
	/*background: url("puzzle/images/menu_bg.jpg") no-repeat;*/
	list-style-type: none;
	margin: 0px;
	margin-left: 0px;
	margin-top: 10px;
	padding: 0px;
}
#menuBox li{
	margin: 0px;
	padding: 0px;
	float: left;
	font-size: 13px;
	font-weight: 500;
	line-height: 40px;
	text-transform: uppercase;
	color: #ffffff;
	text-align: center;
}
#game1Btn p, #game2Btn p, #game3Btn p, #game4Btn p {
	padding-top: 10px !important;
	height: 33px !important;
}
.game1Color {
	background-color: #7dbbdf;
}
.game2Color {
	background-color: #3798cf;
}
.game3Color {
	background-color: #2a5e94;
}
.game4Color {
	background-color: #c32d54;
}
#menu_saveGameButton {
	background-color: #7dbbdf;
	width: 150px;
	height: 40px;
	cursor: pointer;
}
#menu_recommendGameButton {
	background-color: #3798cf;
	width: 150px;
	height: 40px;
	cursor: pointer;
}
#menu_fbButton {
	background: url("puzzle/images/ico-fb.png") no-repeat #2a5e94;
	background-position: 120px center;
	width: 150px;
	height: 40px;
	cursor: pointer;
}
#menu_fbButton a {
	color: #ffffff;
	text-decoration: none;
}
#menu_topScoresButton {
	background-color: #c32d54;
	width: 150px;
	height: 40px;
	cursor: pointer;
}
/*
#gameTimeCounter {
	background-color: #ff00ff;
	width: 50px;
	font-size: 8px;
	color: #000000;
	font-weight: 300;
}
*/

/* panels */
#canvasHolder {
	cursor: pointer;
	width: 796px;
	height: 420px;
	position: absolute;
}
/* --------------------------- */
#selectPuzzlesPanel {
	width: 796px;
	height: 426px;
	background: #ffffff;
	position: absolute;
	margin-top: 100px;
}
#selectPuzzlesPanel .header {
	margin-top: 5px;
	font-size: 24px;
	font-weight: 300;
	color: #3798cf;
	/*background: url("puzzle/images/bg-tytul-puzzla.jpg") repeat-x;*/
	width: 500px;
	height: 40px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
#selectPuzzlesPanel .header .bold {
	font-weight: 500 !important;
}
#selectPuzzlesPanel table {
	margin-left: auto;
	margin-right: auto;
}
#selectPuzzlesPanel td {
	color: #ffffff;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	text-transform: uppercase;
}
#selectPuzzlesPanel td p {
	font-size: 12px;
	margin: 0px;
	padding: 0px;
	color: #ffffff;
	position: absolute;
	bottom: 0px;
	width: 225px;
	padding-top: 3px;
	padding-bottom: 3px;
	height: 40px;
	font-weight: 500;
}
#selectPuzzlesPanel td div {
	height: 158px;
	position: relative;
	cursor: pointer;
}
#selectPuzzlesPanel p {
	font-size: 16px;
	color: #2a5e94;
	font-weight: 300;
	text-align: center;
	margin: 0px;
	padding-left: 10px;
	padding-right: 10px;
}
/* --------------------------- */
#saveGamePanel {
	width: 796px;
	height: 426px;
	position: absolute;
	background: #ffffff;
	margin-top: 100px;
}
#saveGamePanel .header {
	margin-top: 5px;
	font-size: 24px;
	font-weight: 300;
	color: #3798cf;
	/*background: url("puzzle/images/bg-tytul-puzzla.jpg") repeat-x;*/
	width: 200px;
	height: 40px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
#saveGamePanel .content {
	width: 500px;
	background: #e8edf3;
	padding: 20px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
}
#saveGamePanel p {
	font-size: 14px;
	color: #2a5e94;
	font-weight: 300;
	text-align: center;
	margin: 0px;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 10px;
}
/* --------------------------- */
#puzzlesFinishedPanel {
	width: 796px;
	height: 426px;
	position: absolute;
	background: #ffffff;
	margin-top: 100px;
}
#puzzlesFinishedPanel .header {
	margin-top: 5px;
	font-size: 24px;
	font-weight: 300;
	color: #3798cf;
	/*background: url("puzzle/images/bg-tytul-puzzla.jpg") repeat-x;*/
	width: 200px;
	height: 40px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
#puzzlesFinishedPanel .content {
	width: 500px;
	background: #e8edf3;
	padding: 20px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
}
#puzzlesFinishedPanel p {
	font-size: 14px;
	color: #2a5e94;
	font-weight: 300;
	text-align: center;
	margin: 0px;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 10px;
}
/* --------------------------- */
#recommendGamePanel {
	width: 796px;
	height: 426px;
	position: absolute;
	background: #ffffff;
	margin-top: 100px;
}
#recommendGamePanel .header {
	margin-top: 5px;
	font-size: 24px;
	font-weight: 300;
	color: #3798cf;
	/*background: url("puzzle/images/bg-tytul-puzzla.jpg") repeat-x;*/
	width: 200px;
	height: 40px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
#recommendGamePanel .content {
	width: 500px;
	background: #e8edf3;
	padding: 20px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
}
#recommendGamePanel p {
	font-size: 14px;
	color: #2a5e94;
	font-weight: 300;
	text-align: center;
	margin: 0px;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 10px;
}
/* --------------------------- */
#topScoresPanel {
	width: 796px;
	height: 426px;
	position: absolute;
	background: #ffffff;
	margin-top: 100px;
}
#topScoresPanel .header {
	margin-top: 5px;
	font-size: 24px;
	font-weight: 300;
	color: #3798cf;
	/*background: url("puzzle/images/bg-tytul-puzzla.jpg") repeat-x;*/
	width: 300px;
	height: 40px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
#topScoresPanel .content {
	width: 500px;
	background: #e8edf3;
	padding: 20px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
}
#topScoresContent {
	height: 200px;
	width: 300px;
	margin-left: auto;
	margin-right: auto;
}
#topScoresPanel td {
	font-size: 12px;
	color: #2a5e94;
	font-weight: 300;
	text-align: center;
}
#topScoresPanel td.first {
	font-size: 12px;
	color: #2a5e94;
	font-weight: 500;
	text-align: center;
}
#topScoresPanel th {
	font-size: 14px;
	color: #2a5e94;
	font-weight: 500;
	text-align: center;
}
#topBox h2 {
	font-size: 20px;
	color: #525252;
	margin-left: -7px;
	margin-top: 20px;
}

#saveGameCancelButton {
	padding: 8px 15px;
	background-color: #e8edf3;
	border: 1px solid #b8b8b8;
	box-shadow: 2px 2px 2px #8b8b8b;
	cursor: pointer;
}
/* --------------------------- */
#howToPlayOkButton, #saveGameCancelButton, #saveGameButton, #recommendGameOkButton, #recommendGameCancelButton, #topScoresOkButton {
	padding: 8px 15px;
	background-color: #e8edf3;
	border: 1px solid #b8b8b8;
	box-shadow: 2px 2px 2px #8b8b8b;
	cursor: pointer;
}
#howToPlayPanel {
	width: 796px;
	height: 426px;
	position: absolute;
	background: #ffffff;
	margin-top: 100px;
}
#howToPlayPanel .header {
	margin-top: 5px;
	font-size: 24px;
	font-weight: 300;
	color: #3798cf;
	/*background: url("puzzle/images/bg-tytul-puzzla.jpg") repeat-x;*/
	width: 200px;
	height: 40px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
#howToPlayPanel .content {
	width: 500px;
	background: #e8edf3;
	padding: 20px;
	/*height: 300px;*/
	margin-left: auto;
	margin-right: auto;
}
#howToPlayPanel p {
	font-size: 14px;
	color: #2a5e94;
	font-weight: 300;
	margin: 0px;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 10px;
}
/* --------------------------- */
.form {
	font-size: 14px;
	color: #2a5e94;
	font-weight: 300;
	margin-top: 10px;
	margin-bottom: 10px;
}
.form .textCenter {
	text-align: center;
}
.form .line {
	margin-bottom: 10px;
	height: 20px;
}
.form .line .left {
	float: left;
	text-align: right;
	width: 35%;
}
.form .line .right {
	float: right;
	width: 60%;
}
.infoPopupPanel {
	text-align: center;
	border: 5px solid #999999;
	color: #333333;
	font-weight: 300;
	font-size: 14px;
	background-color: #cccccc;
}

/* Dialog boxes */
.dialogTopLeftInner, .dialogMiddleLeftInner, .dialogBottomLeftInner,
.dialogTopRightInner, .dialogMiddleRightInner, .dialogBottomRightInner {
  display: none;
}
.gwt-DialogBox {
  background-color: white;
  border: 1px solid #666;
  z-index: 2;
}
.gwt-DialogBox .Caption {
  background: #d3d6dd repeat-x bottom left;
  font-weight: bold;
  text-shadow: #fff 0 2px 2px;
  cursor: default;
  padding: 5px 10px;
  border-bottom: 1px solid #999;
  text-align: center;
}
.gwt-DialogBox .dialogContent {
	text-align: center;
}
.gwt-DialogBox .gwt-Button {
 	margin: 10px;
}
.gwt-PopupPanelGlass {
	background-color: #000;
	opacity: 0.3;
	filter: literal("alpha(opacity=30)");
	z-index: 2;
}
.gwt-PopupPanel {
	
}