* CSS Document */
@font-face {
	font-family: Oswald-Bold;
	src: url('fonts/Oswald-Bold.ttf');
}
@font-face {
	font-family: OpenSans-Bold;
	src: url('fonts/OpenSans-Bold.ttf');
}
@font-face {
	font-family: OpenSans-Light;
	src: url('fonts/OpenSans-Light.ttf');
}
@font-face {
	font-family: OpenSans-Regular;
	src: url('fonts/OpenSans-Regular.ttf');
}
@font-face {
	font-family: OpenSans-Italic;
	src: url('fonts/OpenSans-Italic.ttf');
}
@font-face {
	font-family: Oswald-Regular;
	src: url('fonts/Oswald-Regular.ttf');
}
body {
	margin:0;
	padding:0;
	background:url(images/Interface_BackgroundDarkConcreteGrey_Content.jpg);
	min-height:640px;
}
img {
	border:0;
}
#header {
	position:absolute;
	z-index:2;
	background:url(images/Interface_BackgroundLightConcrete_HeaderFooter.jpg);
	width:100%;
	height:120px;
	min-width:960px;
}
#logocontainer {
	width:100%;

	height:140px;
	position:absolute;
	top:0px;
	z-index:2;
}
#logo {
	margin:0 auto 0 auto;
	width:255px;
	height:140px;
}
#header-shadow {
	position:absolute;
	top:110px;
	width:100%;
	height:10px;
	background:url(images/Interface_Shadow_Header.png);
	z-index:1;
}
#footer {
	position:fixed;
	background:url(images/Interface_BackgroundWhiteConcrete_Modal.jpg);
	height:20px;
	width:100%;
	min-width:960px;
	bottom:0px;
	font-family:OpenSans-Regular;
	color:#666666;
	font-size:9px;
	text-align:center;
}
#footer-shadow {
	position:absolute;
	width:100%;
	height:10px;
	background:url(images/Interface_Shadow_Footer.png);
}
#beats-container {
	bottom:20px;
	position:fixed;
	width:100%;
	min-width:960px;
	height:70px;
	background:url(images/Interface_BackgroundDarkConcreteBlack_Beats.jpg);
	overflow:hidden;
}
#beats-container-shadow {
	position:fixed;
	bottom:90px;
	width:100%;
	min-width:960px;
	height:10px;
	background:url(images/Interface_Shadow_Beats.png);
}
#vocab-container {
	top:120px;
	position:absolute;
	width:100%;
	min-width:960px;
	height:70px;
	background:url(images/Interface_BackgroundDarkConcreteGrey_Vocab.jpg);
	z-index:1;
}
#vocab-container-shadow {
	position:absolute;
	width:100%;
	height:30px;
	background:url(images/Interface_Shadow_Vocab.png);
	bottom:-30px;
}
.header-link {
	font-family:Oswald-Regular;
	font-size:14px;
	color:#333;
	text-transform:uppercase;
}
.header-link a {
	color:#333;
	text-decoration:none;
}
.header-link a:visited {
	color:#333;
	text-decoration:none;
}
.header-link a:hover {
	color:#000;
	text-decoration:none;
}

.middle-align {
	vertical-align:middle;
}
.vocab-link {
	font-family:Oswald-Regular;
	font-size:13px;
	color:#eee;
	text-transform:uppercase;
}
.vocab-link a {
	text-decoration:none;
	color:#eee;
}
.vocab-link a:hover {
	text-decoration:none;
	color:#fff;
}
.vocab-link a:visited {
	text-decoration:none;
	color:#eee;
}
.active-title {
	font-family:OpenSans-Bold;
	font-size:22px;
	color:#fff;
}
.active-subtitle {
	font-family:OpenSans-Light;
	font-size:18px;
	color:#fff;

}
#content {
	width:100%;
	min-width:960px;
	position:absolute;
	top: 50%;
	height:50%;
}
#schemes {
	position:relative;
	top:-135px;
	width:800px;
	height:375px;
	/*background:#CCCCCC;*/
	margin:0 auto;
	overflow:hidden;
}
#arrow-left {
	width:62px;
	height:142px;
	position:absolute;
	top:-10px;
	background:url(images/Interface_ArrowCircleLeft.png);
	cursor:pointer;
	
	opacity:0.8;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
}
#arrow-left:hover {
	opacity:1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity: 1;
}
#arrow-right {
	width:62px;
	height:142px;
	position:absolute;
	top:-10px;
	right:0px;
	background:url(images/Interface_ArrowCircleRight.png);
	cursor:pointer;
	
	opacity:0.8;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
}
#arrow-right:hover {
	opacity:1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity: 1;
}
#playbtn {
	width:36px;
	height:36px;
	background:url(images/Button_Play.png);
	cursor:pointer;
	display:inline-block;
	
	opacity:0.8;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
}
#playbtn:hover {
	opacity:1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity: 1;
}
#pausebtn {
	width:36px;
	height:36px;
	background:url(images/Button_Pause.png);
	cursor:pointer;
	display:inline-block;
	
	opacity:0.8;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
}
#pausebtn:hover{
	opacity:1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity: 1;
}
.scheme {
	width:250px;
	height:300px;
	display:inline-block;
	position:absolute;
}
.rhym {
	width:250px;
	height:90px;
	cursor:pointer;
	font-family:Oswald-Regular;
	font-size:24px;
	color:#000;
	text-align:center;
	display:table;
	margin-bottom:5px;
	text-transform:uppercase;
	/*background:url(images/Button_Rhyme01.png);*/
}
.rhym p {
	vertical-align:middle;
	display:table-cell;
}
#vocab-detail {
	top:-240px;
	position:absolute;
	width:100%;
	height:240px;
	background:url(images/Interface_BackgroundDarkConcreteGrey_Vocab.jpg);
}
#vocab-listing {
	position:relative;
	margin:0 auto;
	margin-top:20px;
	width:900px;
	height:160px;
}
#vocab-listing-arrow-left {
	display:inline-block;
	width:50px;
	height:160px;
	background:url(images/Button_ArrowLeft.png);
	background-repeat:no-repeat;
	background-position:center;
	cursor:pointer;
	
	opacity:0.8;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
}
#vocab-listing-arrow-left:hover {
	opacity:1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity: 1;
}
#vocab-pack-container {
	display:inline-block;
	width:800px;
	height:160px;
	overflow:hidden;
}
#vocab-listing-arrow-right {
	display:inline-block;
	width:50px;
	height:160px;
	background:url(images/Button_ArrowRight.png);
	background-repeat:no-repeat;
	background-position:center;
	cursor:pointer;
	
	opacity:0.8;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
}
#vocab-listing-arrow-right:hover {
	opacity:1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity: 1;
}
#beat-listing-arrow-right {
	display:inline-block;
	width:50px;
	height:160px;
	background:url(images/Button_ArrowRight.png);
	background-repeat:no-repeat;
	background-position:center;
	cursor:pointer;
	
	opacity:0.8;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
}
#beat-listing-arrow-right:hover {
	opacity:1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity: 1;
}
#vocab-listing-breakline {
	margin: 0 auto;
	background:url(images/Interface_Breakline_Vocab.png);
	width:860px;
	height:20px;
	background-repeat:no-repeat;
	background-position:center;
}
.listing-heading {
	font-family:Oswald-Regular;
	font-size:16px;
	color:#999;
	text-transform:uppercase;
}
.vocab-pack {
	display:inline-block;
	width:150px;
	height:150px;
	background:url(images/Button_VocabBeats01.png);
	cursor:pointer;
	background-position:-5px -5px;
	margin:0px 0px 0px 10px;
}
.vocab-pack-title {
	font-family:OpenSans-Bold;
	font-size:16px;
	color:#000;
	text-transform:capitalize;
	text-align:center;
	vertical-align:bottom;
}
.vocab-pack-author {
	font-family:OpenSans-Regular;
	font-size:12px;
	color:#000;
	text-align:center;
	vertical-align:middle;
}
.vocab-pack-category {
	font-family:OpenSans-Regular;
	font-size:13px;
	color:#FFF;
	text-align:center;
}
#vocab-packs {
	width:2000px;
	height:160px;
	position:relative;
	left:0px;
}
#beats-detail {
	top:0px;
	position:absolute;
	width:100%;
	height:240px;
	background:url(images/Interface_BackgroundDarkConcreteBlack_Beats.jpg);
	display:none;
}
#beats-listing {
	position:relative;
	margin:0 auto;
	margin-top:20px;
	width:900px;
	height:160px;
}
#beats-listing-breakline {
	margin: 0 auto;
	background:url(images/Interface_Breakline_Beats.png);
	width:860px;
	height:15px;
	background-repeat:no-repeat;
	background-position:center;
}
#beat-packs {
	width:2000px;
	height:160px;
	position:relative;
	left:0px;
}
.header-table {
	z-index:3; position:relative; margin:0 auto;
}
#contact-container {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	min-width:960px;
	height:100%;
	z-index:4;

	display:none;
}
#contact-close-area {
	position:absolute;
	width:100%;
	height:100%;
	cursor:pointer;
	background:url(images/dark-bg.png);
}
#contact-content {
	position:relative;
	top:50%;
	margin:0 auto;
	margin-top:-140px;
	width:390px;
	height:280px;
	padding:10px;
	background:url(images/Interface_BackgroundWhiteConcrete_Modal.jpg);
}
#contact-slide1 {
	position:absolute;
	width:600px;
	height:280px;
}
#contact-slide2 {
	position:absolute;
	width:600px;
	height:280px;
	top:25px;
	padding:10px;
	display:none;
}
#contact-content heading {
	font-family:"Times New Roman", Times, serif;
	font-size:16px;
	color:#666666;
	font-weight:bold;
}
#contact-content input {
	width:380px;
	border-radius:5px;
	border:1px solid #cccccc;
	padding:5px;	
}

#start-screen {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	min-width:960px;
	height:100%;
	background:url(images/dark-bg.png);
	z-index:5;
	display:none;
}
.modal-content {
	position:relative;
	width:600px;
	height:410px;
	margin:0 auto;
	top:50%;
	margin-top:-220px;
	padding:25px;
	background:url(images/Interface_BackgroundWhiteConcrete_Modal.jpg);
	font-family:OpenSans-Regular;
	color:#000000;
	font-size:16px;
	line-height:30px;
}
.modal-content heading {
	font-family:Oswald;
	font-size:32px;
	color:#25373a;
	text-transform:uppercase;
	font-weight:bold;
}
.modal-btn {
	width:190px;
	height:80px;
	background:url(images/Button_Start.png);
	color:#FFFFFF;
	text-align:center;
	display:table;
	font-family:Oswald;
	font-weight:bold;
	font-size:19px;
	text-transform:uppercase;
	float:right;
	cursor:pointer;
	background-position:top;
}
.modal-btn:hover{
	background-position:bottom;
}
.modal-btn p {
	display:table-cell;
	vertical-align:middle;
	padding-right:25px;
}
#login-screen {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	min-width:960px;
	height:100%;
	background:url(images/dark-bg.png);
	z-index:5;
	/*display:none;*/
}
.modal-input {
	height:60px;
	width:385px;
	font-family:OpenSans-Regular;
	font-size:20px;
	color:#000000;
	padding:0px 0px 0px 15px;
	margin:0px 0px 0px 0px;
	border:1px solid #999999;
}
.modal-content a {
	color:#ff0000;
	text-decoration:none;
}
.modal-content a:hover {
	text-decoration:underline;
}
.login-error {
	position:absolute;
	font-family: OpenSans-Regular;
	font-size:20px;
	color:#FF0000;
	background:#FFFFFF;
	margin:25px 5px 5px 2px;
	height:40px;
	width:380px;
	display:none;
	margin-left:15px;
}
#contact-content textarea {
	width:380px;
	border-radius:5px;
	border:1px solid #cccccc;
	padding:5px;
}
#overlay {
	position:absolute;
	width:100%;
	min-width:960px;
	height:100%;
	background:#000000;
	opacity:0.7;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	-moz-opacity:0.7;
	-khtml-opacity: 0.7;
	display:none;
}
#overlay2 {
	position:absolute;
	width:100%;
	min-width:960px;
	height:100%;
	background:#000000;
	opacity:0.7;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	-moz-opacity:0.7;
	-khtml-opacity: 0.7;
	display:none;
}
#bullshit {
	position:absolute;
	top:-85px;
	width:100%;
	height:275px;
	display:none;
}
#crab {
	position:relative;
	margin:0 auto;
	width:365px;
	height:275px;
}
#crab heading {
	font-family:Oswald;
	font-weight:bold;
	font-size:32px;
	color:#FFFFFF;
	text-transform:uppercase;
}
#crab detail {
	margin-top:50px;
	font-family:OpenSans-Regular;
	font-size:16px;
	color:#FFFFFF;
}
#reloadbtn {
	width:160px;
	height:80px;
	background:url(images/Button_Reload.png);
	cursor:pointer;
	
	text-align:center;
	display:table;
	font-family:Oswald;
	font-weight:bold;
	font-size:19px;
	text-transform:uppercase;
	position:absolute;
	margin-left:-10px;
	color:#FFFFFF;
}
#reloadbtn p {
	display:table-cell;
	vertical-align:middle;
	padding-right:25px;
}
#reloadbtn:hover {
	background-position:0px -80px;
}
#contact-output {
	margin-top:20px;
}