@charset "utf-8";
/* Vocab UI */

/* Fonts : "Great Vibes", "EB Garamond" */
@import url(http://fonts.googleapis.com/css?family=Great+Vibes|EB+Garamond);

body {
	background:#E9E9E9 url(../img/background-noise.png);
	font-family:"EB Garamond", Georgia, "Times New Roman", Times, serif;
}

nav {
	width: 390px;	/* will be device responsive */
	background: #fff;
	border-right: 3px solid #fff;
	float:left;
	box-shadow:0px 0px 4px rgba(0,0,0,0.5);
}

div#logo {
	background-color: #b4da55;	
	font-size:2.5em;
	padding:.1em .6em .1em 2.2em;
	font-family:"Great Vibes";
	background-image:url(../img/larry-logo-med.png);
	background-position:15px 10px;
	background-repeat:no-repeat;

}
div#logo a {text-decoration:none;color:#000;}

nav div a:link {
	color:#000;
	text-decoration:none;
}

nav ul {
	padding:0;
	margin:0;
}

/* first navigation list */
nav ul li {
	border-top:1px solid #fff;
}

nav ul li a {
	display:block;
	background-color:#000;
	color:#fff;
	font-size:1.5em;
	padding:.25em .5em;
	text-decoration:none;
}

/* secondary navigation list */
nav ul ul {
	padding:.25em .5em;
}

nav ul ul li {
	border-bottom:1px dotted #666;
	padding:.5em 0;
	font-size:1.2em;
}

nav ul ul h4 {
	font-size:1.3em;
	margin:0.1em 0;
	padding:0;
	font-weight:normal;
}

.ui-stats {
	font-size:1.5em;
	margin:0 .3em 0 .25em;
	padding:0;
	position:relative;
	top:-.1em;
}

/* page head ui */
header {
	background: #fff;
	padding: .5em;
	border-bottom:1px solid #aaa;
	box-shadow:0px 0px 4px rgba(0,0,0,0.5);
	text-align:center;

}

header span {
	color:#aaa;
	
}

article {

	float:left;
	/*border:1px solid red;*/
	margin:0 2em;
}

div#vocab-word-form {
	
	display:block;
	margin: 1em auto;
}

div#vocab-word-form h1 {
	text-align:center;
	font-size: 2em;
	border-bottom:1px solid #000;
}
div#vocab-word-form h1:after {
	content:" ";
	display:block;
	width:100%;
	margin:3px auto;
	border-bottom:2px solid #000;	
}

#vocab-word-form fieldset {
	width:200px;
}

#vocab-word-form fieldset label input[type="radio"] {
	display:none; /* hide radios */	
}
#vocab-word-form fieldset label:nth-child(2n+1) {
	clear:left; /* make rows of 2 */
}
#vocab-word-form fieldset label {
	cursor:pointer;
	font-size:1.25em;
	padding:.4em;
	display:block;
	float:left;
	min-width:42%;
	margin:.4em;
	background:#fff;
	border-radius:10px;
	border:1px dotted #fff;
}

#vocab-word-form fieldset label:hover {
	border:1px dotted #666;
}

#vocab-word-form fieldset label.correct {
	background-color:#b4da55;
	border:1px solid #b4da55;
}
/*#vocab-word-form fieldset label:before{
	display:inline;
	float:left;
	position:relative;
	left:-20px;
	margin-right:-20px;
	}
#vocab-word-form fieldset label.incorrect:before {

	content:url('../img/ui-icon-answer-correct.png');
}
#vocab-word-form fieldset label.incorrect:before {
	content:url('../img/ui-icon-answer-incorrect.png');
}*/
	#vocab-word-form fieldset label:before {
		display:inline-block;
		float:left;
		position:relative;
		left:-3px;
		margin-right:3px;
		width:16px;
		content: ' ';
	}
	#vocab-word-form fieldset label.correct:before {
	
		content:url('../img/ui-icon-answer-correct-16.png');
	}
	#vocab-word-form fieldset label.incorrect:before {
		content:url('../img/ui-icon-answer-incorrect-16.png');
	}

#vocab-word-form fieldset label.incorrect {
	background-color:#DA5656;
	border:1px solid #DA5656;
	color:#fff;
}


/*Navigation Toggle items */
.ui-toggle {
	border-radius:.25em;
	padding:.2em 1em;
	cursor:pointer;
}
.ui-toggle input[type="checkbox"] { display:none; }
.ui-toggle span {padding-left:.2em;}
.toggled {
	background-color:#b4dA55;	
}


#menu-toggle {
	float:right;
	
	background:url(../img/ui-icon-menu-hide.png) top right no-repeat;
	width:42px;
	height:32px;
	dsiplay:none;
}
/* ICONS */
.ico {
	padding-left:20px;
	background-position:4px center;
	background-repeat:no-repeat;
}
.ico-x-15  {
	background-image:url('../img/ui-icon-x-15.png');
}
.ico-shuffle-15  {
	background-image:url('../img/ui-icon-shuffle-15.png');
}
.ico-star-15  {
	background-image:url('../img/ui-icon-star-15.png');
}
.ico-repeat-15 {
	background-image:url('../img/ui-icon-repeat-15.png');
}
.ico-restart-15  {
	background-image:url('../img/ui-icon-restart-15.png');
}
.ico-ribbon-15  {
	background-image:url('../img/ui-icon-ribbon-15.png');
}
.ico-check-15  {
	background-image:url('../img/ui-icon-check-15.png');
}

/* LT 400 - 700px */
@media all and (max-width: 649px) {
	div#logo {
		font-size:1.5em;
		background-image:url(../img/larry-logo-sm.png);
		background-position:6px 3px;
	}
	  article {
		margin:0;
		width:100%;
	  }
	  
	  #container {
		width:100%;
	  }
	  
	  nav {
		width: 100%;
		background: #fff;
		margin:0;
		border:0;
		box-shadow:none;
		float:right;
		position:absolute;
		top:450px; /* todo js to help calculation */
	  }
	  div#app {
	    width:100%;
	  }
	  div#vocab-word-form {
		width:100%; 
	 }
	 div#vocab-word-form label {
		width:90%;
	 }
	 #vocab-word-form fieldset {
		width:100%;
		margin:0 auto;
	}
	#vocab-word-form fieldset label:before {
		display:inline;
		float:left;
		position:relative;
		left:-3px;
		margin-right:3px;
	}
	#vocab-word-form fieldset label.correct:before {
	
		content:url('../img/ui-icon-answer-correct-16.png');
	}
	#vocab-word-form fieldset label.incorrect:before {
		content:url('../img/ui-icon-answer-incorrect-16.png');
	}
	#menu-toggle {
		
		display:block;
	}
}

/* 700 - 1100px */
@media all and (max-width: 999px) and (min-width: 650px) {
	div#logo {
		font-size:2em;
		background-image:url(../img/larry-logo-med.png);
		background-position:6px 3px;
	}
	nav {
			
		width:39%;
	}
	
	  article {
		margin:0;
		width:59%;
		float:right;
	  }
	  div#vocab-word-form {
		width:100%; 
	 }
	 div#vocab-word-form label {
		width:90%;
		margin:.25em auto;
	 }
	 #vocab-word-form fieldset {
		width:100%;
		margin:0 auto;
	}
	#menu-toggle{display:none;}
	
}

/* 1000px+ */
@media all and (min-width: 1000px) {
	div#container {
		width:100%;
		max-width:1200px;
		margin:0px auto;
	}
	div#logo {
		font-size:2.5em;	
	}
	nav {
		width:39%;
	}
	header {	margin-left:2em; /* shift left to prevent double shadow */}
	  article {
		margin:0;
		width:59%;
		float:right;
	  }
	  div#vocab-word-form {
		width:100%; 
	 }
	 div#vocab-word-form label {
		width:90%;
		margin:.25em auto;
	 }
	 #vocab-word-form fieldset {
		width:100%;
		margin:0 auto;
	}
	#menu-toggle{display:none;}
}