@import url(http://fonts.googleapis.com/css?family=Droid+Serif);

@import url(http://fonts.googleapis.com/css?family=Droid+Sans);



/* CSS variables for colours. */



:root {

    --strFontFace: Geneva, Arial, sans-serif;

    --strFontSize: medium;

    --strTextColor: #000000;

    --strTitleColor: #444444;

    --strFuncLightColor: #fff8f2;

    --strFuncShadeColor: #7f7973;

    --strLinkColor: #0000FF;

    --strVLinkColor: #0000CC;

    --strNavBarColor: #0000ff;

    --strNavLightColor: #7f7fff;

    --strNavShadeColor: #00007f;

    --strNavTextColor: #ffffff;

    --strPageBGColor: #eeeeee;

    --strExBGColor: #FFf2e6;

}



.container {

    clear: both;

    margin: 0px auto;

    max-width: 980px;

    display: flex;

    flex-grow: 1;

    flex-basis: 0;

    flex-direction: column;

    /*flex-wrap: wrap;*/

    justify-content: space-between;

}



.center {

    text-align: center;

}



body {

    font-family: 'Droid Sans', Helvetica, Arial, sans-serif;

    color: #444444;

    line-height: 20px;

    font-size: 1.5em;

    background-color: #eee;

    background-image: linear-gradient(to bottom, transparent 25px, white 25px, #d6d6d6), repeating-linear-gradient(-45deg, #303030, #303030 6px, #2a2a2a 6px, #2a2a2a 12px);

    padding-top: 21px;

}



h2 {

    font-family: 'Droid Serif', Georgia, Times, serif;

    line-height: normal;

    font-weight: normal;

    text-align: center;

    margin-bottom: 2px;

    font-size: 40px;

    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);

    padding: 1em;

}



a {

    /*color: #0fa2ff;*/

    text-decoration: none;

}



a:hover {

    text-decoration: underline;

}



table.CrosswordGrid {

    padding: 3px;

    border: none;

    width: 100%;

    border-collapse: separate;

    border-spacing: 10px;

}



table tbody tr td {

    margin: 1px 1px 1px 1px;

    padding: 2px;

    width: 12%;

    text-align: center;

    border: solid;

    border-radius: 15px;

    font-size: 200%;

}



table tbody tr td a {

    color: #444444;

}



.A {

    background-color: #3399ff;

}



.B {

    background-color: #33cc33;

}



.C {

    background-color: #9966ff;

}



.D {

    background-color: #ff9900;

}



.E {

    background-color: #ffff00;

}



.A0 {

    color: black;

    background-color: #ffc;

}



.A1 {

    background-color: #4da6ff;

}



.A2 {

    background-color: #66b3ff;

}



.A3 {

    background-color: #80bfff;

}



.B1 {

    background-color: #47d147;

}



.B2 {

    background-color: #5cd65c;

}



.B3 {

    background-color: #70db70;

}



.B4 {

    background-color: #85e085;

}



.C1 {

    /*background-color:#bb99ff;*/

    background-color: #47d147;

}



.C2 {

    background-color: #ddccff;

    /*background-color:#ccb3ff;

	background-color:white;

	font-size: 1em;

	text-align: left;*/

}



.C3 {

    /*background-color:#bb99ff;*/

    background-color: #47d147;

    font-size: 0.8em;

}



.D1 {

    background-color: #ffad33;

}



.D2 {

    /* background-color:#ffc266; */

    background-color: #ffb84d;

}



.E1 {

    background-color: #bb99ff;

}



.P1 {

    line-height: 1.2;

    text-align: justify;

}



.F {

    background-color: #ffb366;

}



.G {

    background-color: #339933;

}



.H {

    background-color: #ff5050;

}



div.NavButtonBar {

    text-align: center;

    margin: 0.25rem 0;

    clear: both;

    font-size: 1em;

    padding: 2em;

    box-sizing: border-box;

}



.NavButton {

    border-style: solid;

    border-radius: 0.5em;

    padding: 0.5em;

    min-width: 3em;

    border-left-color: #7f7f7f;

    border-top-color: #7f7f7f;

    border-right-color: #000000;

    border-bottom-color: #000000;

    background-color: #0000FF;

    color: #ffffff;

    border-width: 1pt;

    cursor: pointer;

    box-shadow: 0.2em 0.3em 0.2em #000000;

}



.NavButton:active {

    box-shadow: none;

}



.NavButton:hover {

    color: #0000FF;

    background-color: #ffffff;

}



button {

    font-size: 1em;

}



a,

a:link,

 :visited,

a:focus,

a:active {

    color: black;

    /*text-decoration:none; */

    cursor: pointer

}



.DB {

    display: none;

    font-size: 1em;

}



div#Explanation {

    font-size: 15px;

}



.logo1 {

    top: 10px;

    height: 20%;

    left: 20%;

    position: absolute;

}



.logo2 {

    height: 20%;

    right: 20%;

    top: 10px;

    display: block;

    position: absolute;

}