@charset "utf-8";
/* CSS Document */


@font-face {
    font-family: GOTHIC;
    src: url(GOTHIC.TTF) ;
}

body{margin:0px; padding:0px;width:100%; margin-left:auto; margin-right:auto;font-family:GOTHIC; color:#2E2E2E;}



h1{font-size:30px; font-weight:bold;}
p { font-size:20px}


#wrapper {width:80%; margin:auto; margin-top:2em;}

#popUpWrapper {
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	display:none;
}

#popUp {
	position:relative;	
	background-color:#FFF;

	width:80%; 
	top:25%;
	margin:auto;
	border:solid 10px #1e83a8;
	padding:3em;
	text-align:center;}

#popClose {position:absolute; right:0px; top:0px; color:#FFF; background-color:#1e83a8; padding:.25em .25em .5em .5em; font-weight:bold; font-family:Arial, Helvetica, sans-serif; cursor:pointer}


#key {width:100%; margin:auto; margin-bottom:2em; text-align:center}
#key table {width:100%;}
table, td, tr {text-align:center; height:4em; width:4em; vertical-align:middle}

td {border:solid 1px #1e83a8}

#bodyText {line-height:2em; padding-bottom:40px}
.question {text-align:center; display:inline-block; background-color:#FAFAFA; height:auto; margin:.05em .5em; padding:.25em}
.question:hover{background-color:#DFDFDF; cursor:pointer}


#eq{font-size:3em; margin:1em .5em;}

.wrong{background-color:#C66}
.attempted{background-color:#9CF; min-width:40px;} 
.correct {background-color:#396}



#check{display:none; width:100%; height:300px;}


.btn{ background-color:#1E83A8; 
	display:inline;
	padding:10px;
	border:none; color:#FFF;
	font-size:30px; font-weight:bold;
	margin:2px;
	cursor:pointer;}

.question, input {text-transform:uppercase}


#questionForm{ height:40px}
input {height:40px; width:300px; font-size:1em}
#submit{height:40px}

/***********************
	CYNNAL HEADER
***********************/


.copy{font-size:10px}

.BocsOws{width:4%; height:37px; background:rgb(15, 93, 134); float:left; margin-right:10px}

#headerWrapper{
background:#1E83A8;
width:100%;
min-height:37px;
font-size:28px;
font-weight:bold; 
color:#FFFFFF;}

.title{ float:left;}

.copyright{float:right;vertical-align: middle;border-top: 37px solid #1E83A8;border-right: 45px solid transparent;height: 1px;width: 70px;display: inline-block;right: 1px;z-index: 100;display: inline-block;background:#FFFFFF;}



@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
#eq {font-size:1em; margin:.25em}


}


@media (max-width : 1200px)
{#eq {font-size:1.2em}}
@media (max-width : 828px)
{
#eq {font-size:1em}
td {height:2em; width:2em; font-size:.75em}
.btn {width:100%; display:inline-block};	
}