/*********************************  GENERAL CSS *********************************************************/
	
	
	@import url(http://fonts.googleapis.com/css?family=Teko:400,600);
	@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css);
	
	body {
		font-family: 'Teko', sans-serif; 
		color: #fff;
		background-image: url("../images/black_abstract.jpg");
		background-color: #000;
		background-size: 100% auto;
		background-attachment: fixed; 
		background-repeat: no-repeat;
		margin: 0;
		padding: 0 0 50px 0;
	}
	
	header {
		background-color: rgba(255,165,0,0.5);
		color: #000;
		padding: 20px 0px 0px 20px;
	}
	
/************************************  TYPOGRAPHY  **********************************/	
	header h1 {
		font-size: 3.9em;
		margin-top: 0;
		margin-bottom: 0;
		line-height: 1em;
	}
	
	h2 {
		font-size: 2.5em;
		margin-top: 0;
		margin-bottom: 0;
		line-height: 1em;
	}
	
	main {
		background-color: rgba(0,0,0,0.85);
		margin: 10px auto 25px;
		padding: 0 5px;
		text-align: center; 
		width: 640px;
	}
	
	main > h3 {
		color: #fff;
		text-align: center;
		font-size: 2em;
		margin-top: 0;
		margin-bottom: 0;
	}
	
	nav {
		background-color: black;
		display: inline-block;
	}
	
	nav ul {
		list-style: none;
		margin-top: 0;
		margin-bottom: 0;
		line-height: 1em;
    }
    
	nav li {
		margin: 5px;
		float: left;
		min-width: 115px;
    }
	
/*********************************  UI CONTROLS ********************************/	
	.drop-content {
		position: absolute;
		display: none;
		min-width: 100px;
		padding: 2px;
		width: 17%;
	}
	
	.drop-down:hover .drop-content {
		display: block;
	}
	
	.drop-content a {
		display: inline-block;
		width: 90%;
		text-decoration: none;
		color: orange;
	}
	
	nav a {
		font-size: 1.3em;
		text-decoration: none;
		color: orange;
	}
	
	a:hover{
		color: black;
		background-color: orange;
	}
	
	footer {
		text-align: center;
		background-color: rgba(0,0,0,0.5);
		position: fixed;
		line-height: 0.5em;
		bottom: 0;
		left: 0;
		right: 0;
	}
	
	div > a {
		list-style: none;
		display: inline-block;
		color: orange;
	}
	
	address > p {
		color: #fff;
		line-height: 0.5em;
	}
	
	input[type="button"] {
			background-color: orange;
			border: 1px #fff solid;
			border-radius: 5px;
			color: #fff;
			cursor: pointer;
			font-size: 1.2em;
			padding: 18px 10px;
			text-decoration: none;
			width: 180px;
			margin: 10px;
		}	
/******************************** CSS-RESPONSIVE ******************************/

	@media screen and (max-width:420px) and (orientation: portrait) {
		/* For mobile phones: */
		
		body {
			background-image: none;
		}
		
		header {
			display: none;
		}
		
		main {
			max-width: 95%;
		}
		
		.rightSide {
			width: 99%;
			line-height: 0.8;
		}
		
		.leftSide {
			width: 50%;
		}
		
		.drop-content a {
			width: 175%;
			background-color: white;
		}
		
		nav li {
			margin: 5px;
			float:left;
			min-width: 50px;
		}
		
		div.game {
			height: 350px;
		}
		
		.board input {
			height: 25px;
		}
		
		.board li {
			line-height: 1;
		}
		
		.alpha li {
			line-height: 0;
			
		}
	}
	
	@media screen and (max-width:768px) and (orientation: portrait) {
		/* For tablets: */
		main {
			width: 100%;
		}
	}