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


body {margin:0; padding:0}
body,input {font-family:GOTHIC; color:#2E2E2E; }

#wrapper{ 
width:80%;
margin:auto;
}

/*
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;}




/**/


#grid {
    border:solid 5px #000;
    width:580px;
	margin:2em auto;
}
.cell {
    padding:1px;
    display:inline-block;
    width:60px;
    height:60px;
    border:solid 1px;
    color:#000;
}
.cell input {
    color:#000;
}
.row {
    width:582px;
}
.row:nth-child(3n+3) {
    border-bottom:solid
}
input {
    height:60px;
    width:60px;
    text-align:center;
    font-size:2em;
    border:none;
    background:none;
	padding:0;
}
.wrong {
    background-color:rgba(255, 0, 0, .5)
}
.cell:nth-child(3n+3) {
    border-right:3px #000 solid
}
.cell > .sup {
    position:absolute;
    left:1px top:1px;
}
.a {
    background-color:#FFF
}
.b {
    background-color:#CCC
}
.c {
    background-color:#AAA
}
.d {
    background-color:#888
}

#print, #check {
	display:none;
	background:url(../images/SeeAnswer.png) no-repeat;
}

#reset {background:url(../images/SeeAnswer.png) no-repeat;}



.btn{
	height:48px; width:249px; border:none; color:#FFF;
	font-size:23px; font-weight:bold; padding-left:25px; padding-top:10px;
	cursor:pointer;
	}
	
	
	
	
#popUpWrapper {
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	display:none;
}

#popUp {
	position:relative;	
	background-color:#FFF;
	width:50%; 
	top:25%;
	margin:auto;
	border:solid 10px #1E83A8;
	padding:3em;
	text-align:center;}

.xClose {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; display:none}

.popClose span {background-color:#1E83A8; padding:10px 20px; margin:auto; cursor:pointer; color:#FFF; font-weight:bold}

.breadcrumb {color:#1E83A8; font-size:18px; padding:5px}
.breadcrumb ul {padding-left:4%; margin-top:2px; list-style:none;}
.breadcrumb ul li {display:inline;}
.breadcrumb a {text-decoration:none; color:#1E83A8; padding:2px;}
.breadcrumb li:after {content:' > '; padding-left:2px; padding-right:2px; color:#0F5D86;}
.breadcrumb .active {text-decoration:underline}
.breadcrumb a:hover {text-shadow:1px 1px 1px #AAA}
.breadcrumb li:last-child:after {content:''}


.activeButtons{float:right;height:37px;background: #FFFFFF; }
	
.iaith {cursor:pointer; display:none}
		
@media print {
#btns{display:none}

.a,.b,.c,.d {-webkit-print-color-adjust:exact;}

}