/*
 * This file is a part of Total Recall, the flash card webapp.
 * Copyright Brady Bouchard 2010.
 * Available at: http://github.com/brady8/total-recall
 * See the README (README.markdown) for more information.
 */

@font-face {
	font-family: MyHelveticaNeue;
	src: local("HelveticaNeue-Light"), local("Helvetica Neue Light"), local("Helvetica Neue");
	font-weight: 300;
}

body {
	margin: auto;
	width: 660px;
	padding: 0;
	font-family: MyHelveticaNeue, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
	font-size: 62.5%;
}

a, a:visited {
	color: #000;
	text-decoration: none;
}

#container {
	width: 660px;
	margin: auto;
}

/* Choose a study set. */
h1 {
	display: block;
	margin: 40px auto 0px auto;
	text-align: left;
	font-size: 1.8em;
	font-weight: normal;
	font-weight: 300;
}

#set-list {
	margin: auto;
	padding: 30px 30px 10px 30px;
	border: 8px solid #3290fe;
	font-size: 1.8em;
}

#set-list h2 {
	margin: 0;
	padding: 0;
}

#set-list ul {
		
	list-style-type: none;
	font-size: 0.7em;
	margin: 10px 0 20px 40px;
	padding: 0;

}

#set-list ul li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#set-list ul li a {
	font-size: 1.4em;
	display: block;
	margin: 2px 30px;
	padding: 3px 0;
	border-bottom: 1px solid #ccc;
}

#set-list ul li a:hover {
	background-color: #f3f3f3;
}

.b1, .b2, .b3, .b5 {
  width: 161px;
  padding: 0;
}

.b1 { background-image: url(../images/1_button.gif); }
.b2 { background-image: url(../images/2_button.gif); }
.b3 { background-image: url(../images/3_button.gif); }
.b5 { background-image: url(../images/next.gif); cursor:pointer; }

/* Progress bar, and error bar in editing mode. */
#progress-bar, #error-bar {
	margin-top: 30px;
	border: 1px solid #eee;
	height: 2.5em;
	line-height: 2.5em;
	font-size: 1.7em;
	font-weight: bold;
	letter-spacing: 2px;
	text-align: center;
	border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
}

#progress-bar span {
	font-weight: normal;
	font-size: 0.8em;
}

/* Stop studying, and also used for the 'edit question' title. */
#stop-it, #more-info {
	margin-top: 20px;
	border: 1px solid #eee;
	padding: 10px;
	margin-bottom: 20px;
	text-align: center;
	font-size: 1.2em;
	font-weight: bold;
	border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
}
#stop-it a { color: #000; }
#stop-it a:hover { border-bottom-color: #ccc; color:#ccc; }
#more-info { border-color: #333; }
#more-info a { color: #333; }

/* Question box. */
#question-box, #answer-box { text-align: center; }
#question-content, #more-info-content {
	border: 8px solid;
	padding: 20px;
	font-size: 2.5em;
	width: 604px;
	display: table-cell;
	vertical-align: middle;
	height: 150px;
}
#answer-content{
border: 8px solid;
	padding: 20px;
	font-size: 2.5em;
	display: table-cell;
	vertical-align: middle;
	height: 150px;
}

#question-content p, #answer-content p { margin: 0.5em; }
#question-content { border-color: #3290fe; }
#answer-content { border-color: #fa931e; }
#answer-box { display: none; }
#more-info-content { font-size: 1.9em; height: auto; border-color: #ff0043; }
#more-info-content a, #more-info-content a:visited { color: #ff0043; }

#question-content ul, #answer-content ul, #question-content ol, #answer-content ol {
	margin: 0.5em auto;
	display: inline-block;
}

#question-content * ul, #answer-content * ul, #question-content * ol, #answer-content * ol {
	margin: 0 auto;
	display: block;
}


#question-content li, #answer-content li {
	text-align: left;
	line-height: 1.3em;
}

/* You can include images in your question/answer pairs. */
/* They are hidden by default, with Fancybox being used to display them when the link is clicked. */

#question-content img, #answer-content img {
	max-width: 150px;
	max-height: 150px;
	pointer: cursor;
	margin: 0 auto;
	padding: 4px;
	background-color: #3290fe;
}

#question-content a.fancybox, #answer-content a.fancybox {
	pointer: cursor;
	color: #000;
	font-weight: bold;
	font-size: 14px;
	line-height: 14px;
	display: inline-block;
	margin: 0 auto;
	padding: 6px 9px 9px 9px;
}

#question-content a.fancybox { border: 4px solid #3290fe; }
#answer-content a.fancybox { border: 4px solid #fa931e; }

#question-content a.fancybox:hover { background-color: #B6D5FB; }
#answer-content a.fancybox:hover { background-color: #F5D2AB; }

/* Buttons. */
#question-controls, #answer-controls, #edit-controls { margin-top: 10px; }

.edit-button {
	width: 161px;
	height: 51px;
	padding: 0;
}

#save-button { background-image: url(../images/save.gif); }
#delete-button { background-image: url(../images/delete.gif); }
#add-button { background-image: url(../images/add.gif); }

/* Edit textarea boxes. */
textarea {
	margin: 0;
	padding: 5px;
	font-family: MyHelveticaNeue, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", VegurLight, sans-serif;
	font-size: 0.8em;
	width: 564px;
	height: 160px;
	text-align: center;
	line-height: 1.3em;
}

#question-edit-content textarea { border: 8px solid #3290fe; }
#answer-edit-content textarea { border: 8px solid #fa931e; }

button {
	padding: 15px 5px;
	text-indent: -9999px;
	border: none;
	background-color: #fff;
	background-repeat: no-repeat;
	height: 51px;
}

form,fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

#show-answer {
	width: 660px;
	background-image: url(/images/show_answer_button.gif);
}

/* Navigation buttons (top right). */
#nav-buttons {
	position: absolute;
	top: 0px;
	right: 0px;
	padding: 10px 20px;
	font-size: 1.3em;
}

#nav-buttons div {
	margin-left: 20px;
	float: right;
}

#nav-buttons a {
	color: #666;
}

#debug {
	display: none;
}

#footer {
	margin-top: 10px;
	text-align: center;
	font-size: 1.2em;
	text-transform: lowercase;
}

#footer a {
	font-weight: bold;
}