@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; width:580px; height:580px; margin:2em auto;}
.cell {padding:1px; display:inline-block; width:60px; height:60px; border:solid 1px; #AAA}
.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}



#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}	

	}