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


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


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

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

input { float:left; height:100%; width:100%; padding:0; margin:0; text-align:center; font-size:2em; border:none; background:none}

.wrong {background-color:rgba(255,0,0,.5)}



.dark {background-color:#AAA;}
.split {padding:auto; height:60px; width:60px; margin:auto;background-color:#000; overflow:hidden}

.triangleTop {
float:right;
top:-1px;
right:-1px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 60px 60px 0;
border-color: transparent #aaa transparent transparent;
position:relative;
}

.triangleTop span {position:absolute; left:35px; top:10px}


.triangleBottom{
bottom:-1px;
left:-1px;	
width: 0;
height: 0;
border-style: solid;
border-width: 60px 0px 0px 60px;
border-color: transparent transparent transparent #aaa;
position:relative;
}

.triangleBottom span {position:absolute; left:-45px; top:-20px;}

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

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

#print {
	display:none;
	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 {
.dark, .split{-webkit-print-color-adjust:exact;}
#btns{display:none}
}