/*
Theme Name: Pong
Theme URI: http://webpong.dean.co/
Description: webpong.dean.co
Author: Dean Robinson
Author URI: http://dean.co
Version: 1.0
*/


html,body {margin:0;padding:0;font-family:'Courier New',monospace;color:#FFF;background:#111;/*background:linear-gradient(#111,#000);background-size:100vw 100vh;background-attachment:fixed;*/}
body {padding:100px 0;}
article,section,header,footer,figure,picture,nav {display:block;margin:0;padding:0;}
* {box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
.cf:before,.cf:after {display:table;content:" ";}
.cf:after {clear:both;}
.col {display:inline;float:left;position:relative;}
.w50 {width:50%;}
table.stats {font-size:30px;line-height:60px;text-align:center;max-width:1100px;}
table {margin:0 auto;border-spacing:0;width:100%;}
th, td {padding:0;}
.la {text-align:left;}
.ra {text-align:right;}
.date-row {font-size:30px;color:#666;font-weight:bold;text-align:center;line-height:60px;}
.date-row .date {border-bottom:2px solid #333;}
#logo {margin:0 auto 100px;display:block;}
.result-w {background-color:#0C6;color:#FFF;border-radius:100%;height:20px;width:20px;display:inline-block;margin-right:5px;vertical-align:top;margin-top:20px;}
.result-l {background-color:#C06;color:#FFF;border-radius:100%;height:20px;width:20px;display:inline-block;margin-right:5px;vertical-align:top;margin-top:20px;}
.stats th {color:#666;font-weight:normal;}
.stats td {padding:0 10px;}
.stats td.la {padding:0;}

.matches {margin-top:100px;font-size:30px;}
.matches .inner {max-width:1100px;margin:0 auto;overflow:hidden;}
.scroll {position:relative;}
.date-block {display:inline;float:left;position:relative;border:5px solid #333;color:#333;font-weight:bold;line-height:20px;padding:15px 0;text-align:center;font-size:20px;width:80px;border-radius:100%;}
.match-block {width:225px;display:inline;float:left;position:relative;line-height:40px;border-left:5px solid #333;padding:0 20px;}
.date-block + .match-block {border-left:0;}
.name {width:140px;display:inline;float:left;position:relative;}
.winner {color:#0C6;}
.score {text-align:right;width:40px;display:inline;float:left;position:relative;}

#new-game, #cancel-game {color:#000;position:absolute;top:20px;right:20px;font-size:50px;text-decoration:none;background:#666;text-align:center;line-height:50px;width:50px;height:50px;border-radius:100%;font-weight:bold;}
#new-game:hover, #cancel-game:hover {background:#06C;}

#new-game-modal {display:none;}
#new-game-modal {background:#111;position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;font-size:50px;}
#new-game-modal .inner {margin:100px auto;max-width:570px;}
#new-game-modal .inner .cf {margin-bottom:20px;}
#new-game-modal label {color:#666;display:inline-block;width:80px;margin-right:20px;}
#new-game-modal input[type="text"] {border:2px solid #333;padding:20px;font-size:50px;font-family:'Courier New',monospace;line-height:50px;height:90px;background:none;color:#FFF;display:inline-block;border-radius:4px;}
#new-game-modal input[type="text"]:focus {border:2px solid #06C;}
#new-game-modal input.name-field {width:340px;margin-right:20px;}
#new-game-modal input.score-field {width:110px;text-align:center;}
#new-game-modal input#pong-submit {margin-left:100px;border:0 none;background:#333;padding:20px 40px;font-size:50px;font-family:'Courier New',monospace;line-height:50px;height:90px;color:#FFF;display:inline-block;border-radius:50px;cursor:pointer;}
#new-game-modal input#pong-submit:hover {background:#06C;}

@media screen and (max-width:768px) {

	table.stats {font-size:20px;line-height:40px;}
	.result-w, .result-l {height:16px;width:16px;margin-top:12px;}

}

@media screen and (max-width:600px) {

	body {padding:40px 0;}
	#logo {margin:0 auto 40px;}
	.mobile-hide {display:none;}
	.matches {margin-top:40px;font-size:20px;}
	.date-block {line-height:16px;padding:9px 0;font-size:16px;width:60px;}
	.match-block {width:175px;line-height:30px;}
	.name {width:100px;}
	.score {width:30px;}
	
	#new-game-modal {font-size:30px;}
	#new-game-modal .inner {margin:100px auto;max-width:280px;}
	#new-game-modal label {width:50px;margin-right:15px;display:none;}
	#new-game-modal input[type="text"] {font-size:30px;line-height:30px;padding:15px;height:60px;}
	#new-game-modal input.name-field {width:195px;margin-right:15px;}
	#new-game-modal input.score-field {width:70px;}
	#new-game-modal input#pong-submit {margin:0 auto;font-size:30px;line-height:30px;height:60px;padding:15px 30px;display:block;}

}