.game-panel-content{
	width: 100%;
	display: table;
 	table-layout: fixed;
}

.game-panel-left,
.game-panel-right{
	display: table-cell;
	vertical-align: top;
	width: 50%;
}

.game-panel-right{
	padding-left: 10px;
}

.game-panel-left{
	padding-right: 10px;
}

.tab-row-join{
	overflow:hidden;
}

.tab-row-join div{
	width: 50%;
	float: left;
}

.tab-row-create div{
	width: 100%;
}

.tab-row-join .button,
.tab-row-create .button{
	display: block !important;
}

.cssgradients .tab-row-create .blue-bar,
.cssgradients .tab-row-create .gray-bar{
	border-radius:5px 5px 0 0 !important;
	-moz-border-radius:5px 5px 0 0 !important;
	-webkit-border-radius:5px 5px 0 0 !important;		
}


.cssgradients .button.left-side{
	border-radius:5px 0 0 0 !important;
	-moz-border-radius:5px 0 0 0 !important;
	-webkit-border-radius:5px 0 0 0 !important;
}

.cssgradients .button.right-side{
	border-radius:0 5px 0 0 !important;
	-moz-border-radius:0 5px 0 0 !important;
	-webkit-border-radius:0 5px 0 0 !important;	
	border-left: 0 !important;
}

.create-row{
	text-align: center;
	padding: 0 0 15px 0;
}


/* Games List Areas */

.loading{
	display: table;
	width: 100%;
	height: 100%;
}

.loading div{
	display: table-cell;
	vertical-align:middle;
	text-align:center;
	padding: 10px;
}

#your-game-area{
	display:none;
}

div.odd-row {
 	background-color: #eef8ff;
 	border-bottom: 1px solid #d2e6f5;
}

div.even-row {
 	background-color: #ffffff;
  	border-bottom: 1px solid #d9d9d9;
}

#all-games-list, 
#your-games-list,
#your-game-login {
	height:300px;
	overflow-y:auto; 
 	-ms-overflow-y:auto;
 	overflow-x:hidden; 
 	-ms-overflow-x:hidden;
 	-webkit-overflow-scrolling: touch;
	border-left: 1px solid #aaaaaa;
	border-right: 1px solid #aaaaaa; 
	border-bottom: 1px solid #aaaaaa; 
}

.listed-game div {
	padding: 6px 23px 6px 7px;
}

a.listed-game,
a.listed-game:active,
a.listed-game:hover,
a.listed-game:visited,
a.listed-game:link {
	text-decoration: none !important;
	cursor: pointer;
	text-shadow: 0 1px 0 #FFFFFF;
	color: #2a2a2a;
}

a.listed-game div:hover,
a.listed-game.hover div,
a.listed-game div:active,
a.listed-game.hover div {
 	background-color: #f9ffb6 !important;
   	border-bottom: 1px solid #eaf19f !important;
}

.listed-game div h1{
	font-weight: bold;
	margin: 0;
	padding: 0;
	word-wrap:break-word;
	font-size: 100%;
	line-height: 120%;
}

.listed-game div p{
	color: #666666;
	font-weight: normal;
	font-size: 85%;
	margin: 0;
	padding: 0;
	line-height: 120%;
}

a.quit-link span{
	color: #b5b5b5 !important;
	overflow: hidden;
}

a.quit-link span:hover{
	color: #EF4034 !important;
}

.quit-link span{
    font-size: 40px;
    line-height: 25px;
    vertical-align: top;
    position:absolute;
    top: 0px;
    right: 4px;
}

.listed-game-container{
	position:relative;
}


.listed-game-status span.green{
	color: #1EA844 !important;
}

.listed-game-status span.orange{
	color: #e9482e !important;
}

.listed-game-status span.blue{
	color: #0179dd !important;
}

.active-users.sync, .active-users.async {
	font-size: 80%;
	font-weight: normal;
	color: #FFFFFF;
	padding: 1px 4px 1px 4px;
	margin-right: 6px;
	margin-bottom:2px;
	text-shadow: none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
	vertical-align:text-bottom;
	line-height: 120%;
	display:inline-block;	
}

.active-users.sync{
	background: #2dbc54;
}

.active-users.async{
	background: #fa9441;
}

.sync {
	color: #1EA844;
}

.async {
	color: #f38227
}

/* Create Game */

#new-game-area{
	height:270px;
	overflow-y:auto; 
 	-ms-overflow-y:auto;
 	overflow-x:hidden; 
 	-ms-overflow-x:hidden;
 	-webkit-overflow-scrolling: touch;
	border-left: 1px solid #aaaaaa;
	border-right: 1px solid #aaaaaa; 
	border-bottom: 1px solid #aaaaaa; 
	padding: 15px 10px;
}




/* For mobile screens */
@media (max-width: 767px) {


.game-panel-left{
	padding: 0 !important;
	width: 100% !important;
}


}