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

* {
margin:0;
padding:0;
}

html, body {
width:100%;
text-align:center;
background:#cccccc;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#000;
}


h1 {
font-family:Verdana, Geneva, sans-serif;
font-size:24px;
color:#000;
}
h2 {
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
color:#000;
margin:20px 0px 30px 0px;
}
h3 {
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
color:#000;
margin:20px 0px 20px 0px;
}

p {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#000;
margin:0px 0px 15px 0px;
}

a {
color:#333;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}

ul {
margin:0px 0px 15px 15px;
}
ol {
margin:0px 0px 15px 15px;
}
li {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#000;
}

table {
width:100%;
border-collapse:collapse;
}
td {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#000;
padding:4px;
}

div.clear {
clear:both;	
}

/*** LAYOUT ***/

#wrapper {
width:900px;
margin: 0px auto;
text-align:left;
background:url("../images/South_Western_Cape_ED2_2000_AERO_200909.gif") top left no-repeat;
}

#truenorth {
display:none;
width:450px;
height:450px;
background:url("../images/TrueCompass.png") center center no-repeat;
padding:75px 75px;
}
#magneticnorth {
width:450px;
height:450px;
background:url("../images/MagneticCompass.png") center center no-repeat;
}

#forms_placeholder {
position:fixed;
right:0;
margin:25px;
padding:10px 25px;
border:1px solid #000;
background:url("../images/bg_forms.png") top left repeat;
border-radius:11px;
box-shadow: 5px 5px 3px #333;
}

.showhide {
text-align:right;
}
.showhide a {
color:#fff;
}

a.bringcompass {
display:block;
width:70%;
margin:10px auto;
padding:5px;
color:#fff;
border-top:1px solid #999;
border-left:1px solid #999;
border-bottom:1px solid #333;
border-right:1px solid #333;
border-radius:11px;
background: -webkit-linear-gradient(#bbb, #666); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#bbb, #666); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#bbb, #666); /* For Firefox 3.6 to 15 */
background: linear-gradient(#bbb, #666); /* Standard syntax */
}
a.bringcompass:hover {
text-decoration:none;
background: -webkit-linear-gradient(#ccc, #777); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#ccc, #777); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#ccc, #777); /* For Firefox 3.6 to 15 */
background: linear-gradient(#ccc, #777); /* Standard syntax */
}

#forms_placeholder input[type=text] {
padding:0px 4px;
}

.alphabettest {
float:left;
padding:5px;
border:1px solid #000;
}
.alphabettest input {
width:25px;
border:1px solid #fff;
}

.wordtest input[type=text] {
margin:0px 10px;
border:1px solid #fff;
}
.wordtest span {
padding:2px 10px;
background:#DDD;
text-align:center;
}
.wordtest em {
color:#000;
}

.identifyletter input[type=text] {
margin:0px 10px;
border:1px solid #fff;
width:25px;
text-align:center;
text-transform:uppercase;
}
.identifyletter span {
padding:2px 10px;
background:#ffffff;
text-align:center;
}