@import "reset.css";

html, body { width:100%;height:100%;font-family: 'Open Sans',Helvetica, Arial, sans-serif;font-size:13px; }
body { background-color: #e8e9ee; }

.clear { clear:both; }
.wrapper { width: 300px;margin:0 auto; }

#header { height:60px; background-color: #3c424b; }
	#logo { height:60px;font-size:25px;line-height:60px;text-align:center;color:#fff; }
		#logo span { color:#e9573f; }
	
#form { padding:20px 0; }
	#form .field { border-radius:3px;padding:15px;width:270px;height:16px;margin-bottom:20px;background-color:#fff; }
		#form .field input { border:none;width:225px;height:16px;float:left; }
		#form button { border-radius:3px;width:300px;height:46px;background-color: #e9573f;border: none;color: #fff;font-size: 12px;text-transform:uppercase;letter-spacing:1px;cursor:pointer;font-weight:bold; }
		
		
.players_form{ display: inline-block; width: 37%; float: left; padding-left: 15px; padding-top: 15px; }
.form_input{ margin: 5px 0; width: 95%; height: 30px; border: 1px solid #ccc; }
.form_input > label{ width: 30%; height: 30px; line-height: 30px; padding-right: 1%; display: inline-block; text-align: right; color: #fff; background-color: #ccc; float: left; }
.form_input input{ width: 67%; height: 20px; padding: 5px 1%; border: none; }
.form_input select{ width: 69%; height: 30px; border: none; background: url('../img/select_gray.png') no-repeat right center; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: white !important; background-position-x: calc(100% - 5px) !important; }
.form_input select:focus { background: url('../img/select_red.png') no-repeat right center; }

.form_line{ text-align: center; }
.form_submit{min-width: 118px; max-width: 200px; height: 32px; font-size: 12px; padding: 3px 15px; background-color: #666; color: #fff; border: none; }
.form_submit:hover{ background-color: #e9573f; cursor: pointer; }


.games_table{ display: inline-block; width: 60%; float: right; padding-right: 5px; padding-top: 15px; }
.games_table.whole{ display: block; float:none; margin:0 auto; padding:0; }
.games_table table{ width: 99%; border-collapse: collapse; margin-top: 6px; }
.games_table table th{ background-color: #f9f9f9; color: #656565; font-weight: bold; text-align: center; height: 10px; line-height: 25px; font-size: 14px; border: 1px solid #ccc;}
.games_table table td{ padding: 7px; border: 1px solid #ccc; font-size: 13px; background: #fff;}
.games_table table td.l{ padding: 7px; border: 1px solid #ccc; font-size: 13px; background: #fff;}
.games_table table th, .games_table table .game_no, .games_table table .bb td{ border-bottom: 1px solid #333; }
.games_table table td.score { width:80px; }

.games_table table .game_no{ text-align: center; vertical-align: middle; }

.repeat { color:#e10000;font-weight:bold; }

 @media screen and (max-width: 768px) { 
	 .players_form{ display: block; width: unset; float: unset; padding: 15px; padding-bottom: 0;}
	 .players_form .form_input { width: 100%; }
	 .games_table{ display: block; width: unset; float: unset; padding: 15px; }
	 .games_table table{ width: 100%; }
 }