@import url('https://fonts.googleapis.com/css?family=Baloo+Thambi');

/*
==================================
	 Table of contents 
==================================
	* Custom Bootstrap Elements
		* Navbar
		* Jumbotron
		* Btn
	* Generic Styles
	* Index page styles
	* Activity
		* Timer
		* circle buttons
		* Activity Media query styles
	* Pair Game Styles
		* Pair Meida query styles
	* Alphabet styles
		* Alphabet Meida query styles
	* word practice stlyes 
	* Word practice single page styles
*/

/**
 * Colour Palette Used here: http://colorpalettes.net/color-palette-2986/
 *
 * Colours in that Palette
 * ====================================
 * Dark Gold - #c17900
 * Gold - #f0bb29
 * Light Grey - #e7eceb
 * Light blue - #b6d1df
 * Navy - #223f4a
 *
 */

/* custom bootstrap navbar */
.navbar-default{
	background-image: none;
	background-color: #F0BB29;
	margin-bottom: 0;
	border: none;
}

.navbar-default .navbar-brand{
	color: #212121;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus{
	color: #FFFFFF;
}

.navbar-default .navbar-nav > li > a{
	color: #212121;
}

.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover{
	color: #FFFFFF;
}

.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover{
	background-color: #F0BB29;
	border-color: #212121;
	color: #212121;
}

.navbar-default .navbar-toggle .icon-bar{
	background-color: #212121;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form{
	border-color: #212121;
}

.navbar-default .navbar-nav > .open,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover{
	background-color: #c17900;
}

.dropdown-menu{
	background-color: #F0BB29;
	border: none;
}

.dropdown-menu > li > a:focus .dropdown-menu > li,
.dropdown-menu > li > a:hover .dropdown-menu > li{
	background-color: #fff;
}

.dropdown-menu .divider{
	background-color: rgb(51, 51, 51);
}

.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover{
	background-color: #fff;
	background-image: none;
}

.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover{
	background-color: #E7ECEB;
}

.navbar-default .navbar-nav >.open > a,
.navbar-default .navbar-nav >.open > a:focus,
.navbar-default .navbar-nav > .open > a:hover{
	background-color: #E7ECEB;
}

.navbar-default .navbar-nav >.active > a, .navbar-default .navbar-nav >.open > a{
	background-image: none; 
}

@media(max-width: 767px){
	.navbar-nav .open .dropdown-menu{
		background-color: #F0BB29;
		border-top: 1px solid rgb(51, 51, 51);
		border-bottom: 1px solid rgb(51, 51, 51);
		border-radius: 0;
	}

	.navbar-default .navbar-nav .open .dropdown-menu > li> a{
		color: rgb(51, 51, 51);
	}
}
/* end of custom boostrap navbar */

/* jumbotron */
.jumbotron{
	height: 350px;
	background-color: #E7ECEB;
	color: rgb(51, 51, 51);
}

.jumbotron h3{
	font-size: 3em;
}

.jumbotron-small{
	height: 250px;
}

/* custom bootstrap btn */

.btn,
.btn:focus{
	text-shadow: none;
	background-image: none;
	border: none;
	background-color: #F0BB29;
	color: #000;
	border-radius: 40px;
}

.btn:hover,
.btn:active{
	background-color: #C17900 !important;
}

/* custom styles */
body, html{
	font-family: 'Baloo Thambi', cursive;
	height: 100%;
	background-color: #fff;
}

#mobile-notice{
	display: none;
}

.btn-game-nav {
	width: 100%;
}

/* links to game and competition styles */
.spell-bee-link,
.spell-bee-link:hover,
.spell-bee-link:focus,
.spell-bee-link:link{
	text-decoration: none;
	color: #FFFFFF;
}

.spell-bee-link:hover > .spell-bee-link-contents{
	background-color: #c17900;
	color: #FFFFFF;
}

.spell-bee-link-contents{
	text-align: center;
	width: 100%;
	height: 250px;
	border-radius: 15px;
	background-color: #f0bb29;
	border: 5px solid #FFFFFF;
}

.spell-bee-link-contents > .spell-bee-link-text > h3{
	margin-top: 0;
}

.spell-bee-link-contents > .spell-bee-link-text{
	position: relative;
	top: 18%;
}

.fa-5{
	font-size: 6em;
}

/* end links to game and competition styles */

/*please wait styles*/
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: transparent;
	z-index: 9999;
	display: inline-block;
	visibility: visible;
}

#spell-bee-please-wait{
	background-color: white;
	color: black;
	height: 300px;
	position: relative;
	top: 150px;
	box-shadow: 2px 3px 18px 5px #000;
}

#spell-bee-please-wait > h1{
	position: absolute;
	font-size: 4em;
	left: 35%;
	top: 30%;
}

@media(max-width: 740px){
	#spell-bee-please-wait > h1{
		left: 27%;
	}
}

@media(max-width: 442px){
	#spell-bee-please-wait > h1{
		left: 17%;
	}
}

@media(max-width: 380px){
	#spell-bee-please-wait > h1{
		left: 86px;
		font-size: 3em;
	}
}

/* end of please wait */

@media(max-width: 991px){
	.btn-spacing{
		margin-top: 5%;
	}

	.spell-bee-row-split{
		margin-top: 2%;
	}

	.spell-bee-row-bottom{
		margin-bottom: 4%;
	}	
}

#login-wrapper{
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin-top: 50px;
}

/* resource styles */
.spell-bee-std-link:hover,
.spell-bee-std-link:active{
	text-decoration: none;
}

/* index page styles */
.spell-bee-index-flag, .spell-bee-index-flag:visited{
	background-color: #fff;
	color: #000;
	width: 100%;
	border-radius: 10px;
	display: block;
	border: 1px solid #e7eceb;
	line-height: 1.2em;
	min-height: 7em;
	padding: 10px;
	text-align: center;
}

.spell-bee-index-flag:hover,
.spell-bee-index-flag:focus{
	background-color: #e7eceb; 
	text-decoration: none;
	color: #000;
}

.spell-bee-index-flag > h3{
	color: #000;
}

.spell-bee-index-flag:hover > h3{
	color: #000;
}

.spell-bee-index-flag > img{
	display: block;
	margin: 0 auto;
}

.spell-bee-staging-button{
	width: 100%;
}


/* activity */
.spell-bee-language{
	width: 100%;
	height: 30em;
	background-size: cover;
	background-color: rgb(75, 192, 234);
	border-radius: 10%;
	border: none;

}

#spell-bee-stage-header{
	font-size: 6em;
}


#learn-word, #working-word{
	font-size: 9em;
	text-align: center;
}

#working-word{
	color: #737373;
	margin-top: 5%;
}

#utils-row{
	margin-top: 13%;
}

/* timer */
.spell-bee-timer{
	width: 70%;
	position: relative;
	left: 13%;
	height: 135px;
	background-color: #66ccff;
	border-radius: 5px;
	font-size: 7em;
	padding-bottom: 1em;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Chrome/Safari/Opera */
	 -khtml-user-select: none; /* Konqueror */
	   -moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
			user-select: none;

}

#minutes-row{
	margin-left: 13px;
}

.spell-bee-timer .spell-bee-time{
	vertical-align: middle;
	text-align: center;
}


/* circle buttons */
.spell-bee-circle-btn, 
a.spell-bee-circle-btn:visited{
	display: block;
	background-color: #b6d1df;
	width: 100%;
	height: 10em;
	border-radius: 100%;
	border: 3px solid #fff;
	box-shadow: 0px 0px 10px 4px #737373;
	color: #000;
	position: relative;
}

.spell-bee-circle-btn > span{
	font-size: 3em;
}


a.spell-bee-circle-btn > span{
	position: absolute;
	left: 34%;
	top: 33%;
}

#go-back{
	background-color: #83a267;
}

#play-sound{
	background-color: #ff66b3;
}

#spell-bee-next{
	width: 100%;
	position: relative;
	top: 30px;
}

.spell-bee-game-study-header{
	text-align: center;
}

#start-text{
	font-size: 2em;
}

@media (max-width: 1199px){
	.spell-bee-language{
		width: 100%;
		height: 25em;
		background-size: cover;
		background-color: rgb(75, 192, 234);
		border-radius: 10%;
		border: none;
	}

	#spell-bee-stage-header{
		font-size: 5em;
	}


	.spell-bee-timer{
		width: 80%;
		position: relative;
		left: 13%;
		height: 135px;
		background-color: #66ccff;
		border-radius: 5px;
		font-size: 7em;
		padding-bottom: 1em;
		-webkit-touch-callout: none; /* iOS Safari */
		-webkit-user-select: none; /* Chrome/Safari/Opera */
		 -khtml-user-select: none; /* Konqueror */
		   -moz-user-select: none; /* Firefox */
			-ms-user-select: none; /* Internet Explorer/Edge */
				user-select: none;
	}


	.spell-bee-circle-btn, 
	a.spell-bee-circle-btn:visited{
		display: block;
		background-color: red;
		width: 100%;
		height: 9em;
		border-radius: 100%;
		border: 3px solid #fff;
		box-shadow: 0px 0px 10px 4px #737373;
		color: #000;
		position: relative;
	}

	a.spell-bee-circle-btn > span{
		position: absolute;
		left: 35%;
		top: 33%;
	}
}

@media (max-width: 991px){
	.spell-bee-language{
		width: 100%;
		height: 25em;
		background-size: cover;
		background-color: rgb(75, 192, 234);
		border-radius: 10%;
		border: none;
	}
	
	.spell-bee-timer{
		width: 96%;
		position: relative;
		left: 2%;
		margin-top: 2%;
		height: 135px;
		background-color: #66ccff;
		border-radius: 5px;
		font-size: 7em;
		padding-bottom: 1em;
		-webkit-touch-callout: none; /* iOS Safari */
		-webkit-user-select: none; /* Chrome/Safari/Opera */
		 -khtml-user-select: none; /* Konqueror */
		   -moz-user-select: none; /* Firefox */
			-ms-user-select: none; /* Internet Explorer/Edge */
				user-select: none;
	}


	.spell-bee-circle-btn, 
	a.spell-bee-circle-btn:visited{
		position: relative;
		left: 32%;
		display: block;
		background-color: red;
		width: 45%;
		height: 9em;
		border-radius: 100%;
		border: 3px solid #fff;
		box-shadow: 0px 0px 10px 4px #737373;
		color: #000;
		position: relative;
	}

	a.spell-bee-circle-btn > span{
		position: absolute;
		left: 35%;
		top: 33%;
	}

	#utils-row{
		margin-top: 9%;
	}

	#spell-bee-next{
		position: relative;
		top: 0px;
	}
}

@media(max-width: 572px){
	a.spell-bee-circle-btn > span{
		position: absolute;
		left: 31%;
		top: 30%;
	}

	#spell-bee-stage-header{
		font-size: 4em;
	}
}

@media(max-width: 414px){
	#learn-word, #working-word{
		font-size: 4em;
		text-align: center;
	}

	.spell-bee-timer{
		width: 96%;
		position: relative;
		left: 2%;
		margin-top: 2%;
		height: 111px;
		background-color: #66ccff;
		border-radius: 5px;
		font-size: 6em;
		padding-bottom: 1em;
		-webkit-touch-callout: none; /* iOS Safari */
		-webkit-user-select: none; /* Chrome/Safari/Opera */
		 -khtml-user-select: none; /* Konqueror */
		   -moz-user-select: none; /* Firefox */
			-ms-user-select: none; /* Internet Explorer/Edge */
				user-select: none;
	}

	.spell-bee-circle-btn, 
	a.spell-bee-circle-btn:visited{
		position: relative;
		left: 20%;
		display: block;
		background-color: red;
		width: 69%;
		height: 8em;
		border-radius: 100%;
		border: 3px solid #fff;
		box-shadow: 0px 0px 10px 4px #737373;
		color: #000;
		position: relative;
	}

	a.spell-bee-circle-btn > span{
		position: absolute;
		left: 32%;
		top: 32%;
	}

	.spell-bee-game-study-header{
		font-size: 30px;
	}
}

@media(max-width: 320px){
	.spell-bee-circle-btn, 
	a.spell-bee-circle-btn:visited{
		position: relative;
		left: 12%;
		display: block;
		background-color: red;
		width: 82%;
		height: 8em;
		border-radius: 100%;
		border: 3px solid #fff;
		box-shadow: 0px 0px 10px 4px #737373;
		color: #000;
		position: relative;
	}

	#spell-bee-stage-header{
		font-size: 3em;
	}
}

/* pair game styles */
.sound{
	font-size: 6em;
	left: 28%;
	position: absolute;
	top: 35%;
}

.word{
	font-size: 2em;
	position: relative;
	top: 20%;
}

.pair-box{
	perspective: 1000px;
	cursor: pointer;
}

.pair {
	transform: rotateY(0deg);
}

.pair-box, .front, .back {
	width: 100%;
	height: 280px;
}

.front, .back{
	background-color: #e7eceb;
	border-radius: 10px;
	-webkit-backface-visibility: hidden;
}

/* flip speed goes here */
.pair {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	 -webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	visibility: visible;
	/* for firefox 31 */
	/*transform: rotateY(0deg);*/
}

/* back, initially hidden pane */
.back {
	visibility: hidden;
	/*transform: rotateY(180deg);*/
}

@media(max-width: 991px){
	.pair-box{
		margin-bottom: 4%;
	}
	
	.pair-sound{
		position: relative;
		left: -4%;
		top: 26%;
		font-size: 120px;
	}

	.word{
		font-size: 49px;
	}
}

/* alphabet styles */
.spell-bee-letter{
	background-color: #e7eceb;
	text-align: center;
	padding: 3px;
	border-radius: 10px;
	width: 100%;
	cursor: pointer;
}

.spell-bee-letter:hover{
	background-color: #b6d1df;
}

.spell-bee-letter-misc{
	text-align: center;
	cursor: pointer;
	background-color: #b6d1df;
	border-radius: 5px;
}

.spell-bee-letter-misc:hover{
	background-color: #223f4a;
	color: #fff; 
}

#spell-the-word-box{
	cursor: initial;
}

@media(max-width: 1174px){
	.spell-bee-letter-misc{
		font-size: 30px;
	}
}

@media(max-width: 974px){
	.spell-bee-letter-misc{
		font-size: 25px;
	}	
}

/* spell the word */
#counter{
	border: 1px solid black;
	border-radius: 100%;
	padding: 5px;
}

@media(max-width: 1199px){
	#btn-check,
	#btn-clear,
	#btn-help{
		font-size: 11px;
	}
}

@media(max-width: 991px){
	.spell-bee-stw-btn-right{
		margin-top: 2%;
	}

	#btn-check,
	#btn-clear,
	#btn-help{
		font-size: 14px;
	}
}

@media(max-width: 767px){
	.spell-bee-stw-btn-left{
		margin-bottom: 2%;
	}
}

@media(max-width: 320px){
	#spell-bee-pair-header{
		font-size: 21px;
	}
}


/* word practice */
.spell-word-container > p{
	width: 100%;
	padding: 10px 20px;
	text-align: center;
	border-radius: 10px;
	color: #000;
	font-size: 17px;
	background-color: #e7eceb;
}

.spell-word-container:hover{
	text-decoration: none;
}

.spell-word-container:hover > p{
	background-color: #b6d1df;
	text-decoration: none;
}


/* word practice single page */

#spell-bee-practice-word{
	width: 100%;
	text-align: center;
	height: 300px;
	background-color: #b6d1df;
	border-radius: 10px;
}

#spell-bee-practice-word > h1{
	position: relative;
	top: 12%;
	width: 100%;
	padding: 15px 25px;
}

#spell-bee-practice-word > h1:first-child{
	font-size: 4em;
}

#spell-bee-practice-word > h1:nth-child(2){
	font-size: 3em;
}

.btn-practice{
	width: 100%;
	font-size: 3.5em;
}

#spell-bee-practice-sound{
	position: relative;
	top: 67px;
}


@media(max-width: 991px){
	#spell-bee-practice-sound{
		top: 8px;
	}

	#spell-bee-prac-btn-back{
		width: 100%;
	}
}

@media(max-width: 530px){
	#spell-bee-practice-sound{
		top: 4px;
		
	}

	.btn-practice{
		font-size: 2.5em;
	}
}