/* ===== Primary Styles ========================================================
 Author:
 ========================================================================== */
@font-face {
	font-family: arabic;
	src: url( ../assets/fonts/PDMS_Saleem_QuranFont-signed.ttf ) format("truetype"), url( ../assets/fonts/UthmanTN1B Ver10-1.otf ) format("opentype");
}
body {
	padding-top: 60px;
	padding-bottom: 40px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
.table th, .table td {
	vertical-align: middle;
}
table td.arabic, table.answer-sheet td.arabic, #letter-wrapper td.arabic {
	font-size: 2em;
	font-family: arabic;
	line-height: 1.5em;
}
#register-step-two, #register-step-three, #forgot-password, #remind-sucess, #alphabet-retake, #vowel-main {
	display: none;
}
#alphabet-main {
	margin-right: 10px;
}
i {
	margin-left: 5px;
	margin-right: 5px;
}

.word-link, .ayah-link {
	width: 100%;
	height: 100%;
	display: block;
}

.letter {
	font-weight: normal;
	text-align: center;
}
#answers-btn .btn {
	font-size: 3em;
	margin: 20px;
	padding: 30px 30px 50px 30px;
}
table.answer-sheet td {
	text-align: center;
}
table .important {
	color: #fff;
}
table tr.important:hover td {
	color: #000;
}
.answer {
	font-family: arabic;
}
#answers-btn .active {
	background-color: #5BB75B;
	background-image: -moz-linear-gradient(center top , #62C462, #51A351);
	background-repeat: repeat-x;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.margin-right {

}
#main li .thumbnail {
	overflow: hidden;
	padding: 25px 0;
	position: relative;
}
#lesson-title {
	font-size: 2em;
	margin: 0 20px;
}
.important a {
	color: #FFF;
}
.important a:hover, .important td:hover a {
	color: #000;
}

#main .btns {
	position: absolute;
}

.error {
	border-color: #B94A48;
	color: #B94A48;
}
#letter-wrapper {
	font-size: 1.5em;
}
.alphabet {
	font-size: 1.5em;
	margin: 15px, 5px;
}
.alphabet th {

}
.table td {
	text-align: center;
}
.register-table td {
	line-height: 1.2em;
	text-align: center;
}
.table td.question-td {

}

h1, h2, h3, h4, h5, h6 {
	color: #0088CC;
}
#alphabet-retake {
	margin-left: 10px;
}
#pageNum {
	display: inline-block;
	font-size: 1.5em;
	position: relative;
	text-align: center;
	top: 5px;
}

.alphabet-navigation {
	margin: 20px 0;
	position: relative;
	text-align: center;
	overflow: hidden;
}
.success {
	color: #468847;
	border-color: #468847;
}
.important {
	background-color: #b94a48;
}
.footnote {
	margin: 50px 20px 10px;
	padding-top: 30px;
	border-top: 1px solid #c8c8c8;
}

.courseNum {
	position: absolute;
	bottom: 10px;
	right: 10px;
	font-size: 3em;
	color: #c8c8c8;
}

.letter-form {
	margin: 0;
	font-size: 1.5em;
}

.letter-form select {
	padding: 5px;
	width: 80px;
}

.alphabet-navigation .control-group {
	margin-bottom: 0;
}

.alphabet-main {
	text-align: center;
	font-size: 1.5em;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	text-decoration: none;
	background-color: #f7f7f9;
}

a.alphabet-main:hover {
	text-decoration: none;
}

#progress, #progress-vowel {
	margin-left: 10px;
}

#wrapper p {
	font-size: 1.3em;
	line-height: 1.3em;
}
#surah-list th, #alphabet th {
	padding: 20px;
}

/* Landscape phones and down */
@media (max-width: 480px) {

	body {
		padding-top: 0;
		padding-bottom: 0;
		font-size: 90%;
	}
	h1, h2, h3, h4 {
		font-size: 1.5em;
	}
	.hero-unit h1 {
		font-size: 1.5em;
	}
	.hero-unit {
		padding: 10px;
	}

	#answers-btn .btn {
		font-size: 1.2em;
	}
	.page-header {
		border-bottom: 1px solid #EEEEEE;
		margin: 0;
		padding-bottom: 6px;
	}
	#letter-wrapper {

	}
	.thumbnails > li {
		margin-bottom: 18px;
	margin: 10px;
	width:90%;
	}
	.alphabet {

		padding: 0;
		margin: 0;
	}

	.table td {

		text-align: center;
	}

	#lesson-title {
		font-size: 1.5em;
		margin-bottom: 1.5em;
	}
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
	body {
		padding-top: 0;
		padding-bottom: 0;
	}

	#answers-btn .btn {
		font-size: 2em;
	}

	#letter-wrapper {
		font-size: 1.3em;
	}
	.alphabet {
		font-size: 1.5em;
	}

	.table td {
		text-align: center;
	}

	#lesson-title {
		font-size: 1.5em;
		margin-bottom: 1.5em;
	}
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
	body {
		padding-top: 0;
		padding-bottom: 0;
	}

	#answers-btn .btn {
		font-size: 2em;
	}

	#letter-wrapper {

	}
	.alphabet {

	}

	.table td {

		text-align: center;
		font-size: 1.5em;
	}
	.table td.question-td {

	}
	#lesson-title {
		font-size: 2em;
		margin-bottom: 1.5em;
	}
}

/* Large desktop */
@media (min-width: 1200px) {
}


.alpha { margin-left: 0; }
.omega { margin-right: 0; }
footer {
	background-color: #333333;
    border: 0 none;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
    color: #333333;
    outline: 0 none;
    padding: 5px 10px;
    text-shadow: 0 1px 0 #FFFFFF;
}