/* BODY */ 
body {
	/* background-image: url("../assets/stars.png"); */
	background-color: #aaa;
	font-family: helvetica, sans-serif;
	font-size: 14pt;
	letter-spacing: .25px;
	text-align: center;
	font-weight: 300;
	line-height: 1.25em;

}

/*button {
	background-color: #fff;
	font-size: 1.25em;
	padding: 10px;
	border-radius: 10px;
	box-shadow: 0 4px 10px -4px #333;
	border-style: 1px solid red;
	text-transform: uppercase;
	color: #AAA;
	margin: auto;
}*/

/* HEADER */
nav {
/*	background-color: rgba(200, 255, 235, .95);*/
	background-color: rgba(60, 35, 20, .95);
	padding: 30px 100px;
	box-shadow: 0 4px 10px -4px #333;
	text-align: center;
	position: fixed;
	width: 100%;
	left: 0;  
    top: 0;  
}

a {
	text-decoration: none;
	color: white;
}

.game-title-tag {
	display: inline-block;
	margin-right: 40px;
}

.game-title {
	text-decoration: none;
	font-size: 1em;
	text-transform: uppercase;
	display: inline;
/*	width: 15%;
	height: 15%;*/
	padding: 10px;
	border: 2pt solid rgba(50, 150, 30, 1);
}

.game-title a {
	color: rgba(50, 150, 30, 1);
}

.tagline {
	font-size: .75em;
	color: rgba(50, 150, 30, .65);
	padding: 0 5px;
}


.game-mainLinks {
	font-size: .75em;
	display: inline-block;
	text-align: right;
	padding: 0 20px;
	text-transform: uppercase;
	/*float: right;*/
}

.game-mainLinks a{
	padding: 0 2px;
}

a.nav-game {
	color: rgba(100, 200, 200, 1);
}

a.nav-game-underlined {
	text-decoration: underline;
	color: white;
}

a.nav-game:hover {
	color: #EA0;
}

/* GAME CONTAINER */
h2 {
	font-size: 3em;
	font-weight: 100;
	color: rgba(255, 255, 255, .2);
	padding-bottom: 15px;
}

nav p {
	display: inline;
}

div.intro {
	margin-top: 50px;
	font-size: 4em;
}

div.game-container {
	text-align: center;
	width: 100%;
	/*padding: 30px;*/
	 background-image: url("../assets/pin_dots_brn.png"); 
	/*background-color: rgba(80, 55, 40, .95);*/
	margin: auto;
	margin-top: 50px;
	box-shadow: 0 4px 10px -4px #333;
	color: #FFF;
	padding-bottom: 150px;
}

.game-instructions-01 {
	padding: 22% 0 22% 0;
	color: #fff;
	background-color: rgba(50, 150, 30, 1);
	border-bottom: 10px solid rgba(255, 255, 255, .5);
}

.game-instructions-02 {
	padding: 22% 0 22% 0;
	color: #fff;
	background-color: rgba(205, 150, 0, 1);
	border-bottom: 10px solid rgba(255, 255, 255, .5);
}

.game-instructions-03 {
	padding: 22% 0 22% 0;
	color: #fff;
	background-color: rgba(240, 80, 100, 1);
	border-bottom: 10px solid rgba(255, 255, 255, .5);
}



/* GAMEPLAY UI BUTTONS & DIALOG MSGS */

button.start-01, button.start-02, button.start-03, button.guess, button.deal {
	margin-top: 35px;
	color: rgba(25, 125, 125, 1);
/*	color: rgba(60, 45, 45, 1);*/
	font-size: 2em;
	padding: 10px 80px;
	font-weight: 700;
	text-transform: uppercase;
	background-color: rgba(85, 185, 185, 1);
	border-radius: 8px;
	box-shadow: 0 4px 8px -1px #222;
	border: none;
    outline: none;
}


button.start-01:hover, button.start-02:hover, button.start-03:hover, button.guess:hover, button.deal:hover {
	background-color: rgba(70, 170, 170, 1);
}

button.deal {
	text-align: center;
	margin-bottom: 50px;
}

button.guess {
	margin-top: 0px;
	padding: 10px 15px;
	font-size: 1em;
}

.game1-counter, .game1-timer {
	width: 40%;
	padding: 20px 0 20px 0;
	background-color: rgba(70, 45, 30, .9);
	display: inline-block;
	font-size: 2em;
}

.counter-timer, .game2-counter, .game3 {
	margin: 100px 0 40px 0;
}

.game3 {
	padding: 0 150px;
	overflow: auto;
}

.game2-counter {
	width: 80%;
	padding: 20px 0 20px 0;
	background-color: rgba(70, 45, 30, .9);
	display: inline-block;
	font-size: 2em;
}

.timer {
	width: 100px;
	height: 50px;
	/*	display: inline;*/
	/* background-color: rgba(); */
}

/*#dialog-message-win, #dialog-message-lose {
	display: none;
}*/

input.gnome-guess {
	width: 80px;
	height: 50px;
	display: inline-block;
	font-size: 1em;
	text-align: center;
}

.your-side, .gnome-side {
	display: inline-block;
}
.your-side {
	float: left;
	width: 45%;
	padding: 0 15px 0 25px;
/*	border-right: 3px solid rgba(90, 65, 50, 1);*/
}

.gnome-side {
	width: 45%;
}

.score {
	width: 100%;
	padding: 30px 0;
	background-color: rgba(70, 45, 30, .9);
	display: inline-block;
	font-size: 2em;
	margin-bottom: 20px;
}
/* GAME ASSETS */

.garden, .gnomes, .cards {
	/*width: 50%;*/
	padding: 0 150px 0 150px;
}
.radish-top {
	width: 90px;
	height: 160px;
	margin-top: 20px;
	background-image: url("../assets/radish_top.png");
	/*	background-color: green;*/
	background-size: contain;
	background-repeat: no-repeat;
	display: inline-block;
}

.radish-pulled {
	width: 90px;
	height: 160px;
	background-image: url("../assets/radish_02.png");
	background-size: contain;
	background-repeat: no-repeat;
	display: inline-block;
}

.carrot-top {
	width: 90px;
	height: 160px;
	margin-top: 20px;
	background-image: url("../assets/carrot_top.png");
	/*	background-color: green;*/
	background-size: contain;
	background-repeat: no-repeat;
	display: inline-block;
}

.carrot-pulled {
	width: 90px;
	height: 160px;
	background-image: url("../assets/carrot_02.png");
	background-size: contain;
	background-repeat: no-repeat;
	display: inline-block;
}

.radish-3 {
	width: 90px;
	height: 160px;
	background-image: url("../assets/radish.png");
	background-size: contain;
	display: inline-block;
}

.gnome-field {
	width: 1024px;
	height: 724px;
	background-image: url("../assets/gnome_field.png");
	background-size: contain;
	background-repeat: no-repeat;
	display: inline-block;
}

.gordon {
	display: inline-block;
	color: #aaa;
}

.gnome-01 {
	width: 100px;
	height: 200px;
	background-image: url("../assets/gnome_01.png");
	background-size: contain;
	background-repeat: no-repeat;
	display: inline-block;
	font-size: .75em;
}

.your-card-unflipped, .gnome-card-unflipped {
	width: 277px;
	height: 400px;
/*	margin-top: 5px;*/
/*	box-shadow: 0 4px 10px -4px #000;*/
/*	display: inline-block;*/
/*	background-image: url("../assets/card_load.png");
	background-size: contain;
	background-repeat: no-repeat;*/
}

#blue-carrot {
	color: rgba(0, 75, 125, 1);
	font-weight: 700;
	text-transform: uppercase;
}


/* RESPONSIVE LAYOUTS Small screens */

/*@media only screen and (max-device-width: 800px)  {
	h1.game-title {
		font-size: 2em;
		color: rgba(100, 155, 255, .75);
		text-transform: uppercase;
		display: inline;
		background-color: #F00;
	}

	button {
		background-color: red;
		font-size: 1em;
		display: block;
	}

	a {
		color: #FFF;
	}

	.radish {
		width: 25px;
		height: 50px;
	}

	.radish-pulled {
		width: 25px;
		height: 50px;
		background-image: url("../assets/radish.png");
		background-size: contain;
		display: inline-block;
	}

}*/