/* dyslexiadictionary.com - wordspeller.css
   Main CSS Stylesheet
   Jeremy Sarka, 03-20-2013 */

/* General Styles */
body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12pt;
}

a img {
   border: 0;
}

h1 {
   font-family: Courier, Courier New, Times New Roman, Times, serif;
   font-size: 18px;
   text-align: center;
   margin: 0;
   border-top: 10px solid #9999cc;
   padding-top: 8px;
}
h1 span {
   padding: 7px 10px 5px 10px;
   background-color: white;
   border: 2px solid black;
}
h1 span span {
   padding: 1px;
   border: none;
}

h2 {
   font-size: 16pt;
   color: #800080;
   text-align: center;
}
h3 {
   font-size: 20pt;
   color: #003366;
   text-align: center;
   font-style: italic;
}
h4 {
   font-size: 12pt;
   text-align: center;
}
h5 {
   font-size: 10pt;
   font-weight: normal;
   text-align: center;
}

/* Special Purpose Styles */

.cp {
   font-size: 0.8em;
   vertical-align: middle;
}

.quote {
   padding-left: 40px;
   padding-right: 40px;
}
.attr {
   text-align: right;
   font-weight: bold;
   font-style: italic;
   font-size: 10pt;
   margin-top: -10px;
}
.smallprint {
   font-size: 10pt;
}

.blue {
   color: #003366;
}
.purple {
   color: #800080;
}

.center {
   text-align: center;
}

.scrnshot {
   text-align: center;
}
.scrnshot img {
   margin: 0px 20px;
}

.required {
   color: #CC0000;
}

/* Layout Styles */
.container {
   width: 680px;
   margin: 0 auto;
   background-color: #9999cc;
}
.top-nav {
   width: 680px;
   min-height: 110px;
   float: none;
   clear: both;
   background-image: url(images/nav_bg.gif);
   background-repeat: repeat-x;
}
.side-nav {
   width: 120px;
   float: left;
   clear: left;
   padding-top: 40px;
}
.content {
   width: 550px;
   min-height: 860px;
   float: left;
   background-color: white;
   padding-left: 10px;
}
.footer {
   width: 680px;
   padding-top: 5px;
   float: none;
   clear: both;
   background-color: white;
   text-align: center;
}

.side-nav img {
   margin: 8px 2px;
}
.side-nav p {
   margin: 8px 2px;
   font-size: 10pt;
   text-align: center;
}
.side-nav a {
   display: block;
}

p.spacer {
   padding-top: 50px;
}

/* Menu Styles */
ul.nav {
   /*width: 100%;*/
   margin: 0px; padding: 0px;
   list-style: none;
}

ul.nav li {
   float: left;
   margin: 0px; padding: 0px 5px;
   text-align: center;
   font-family: Courier, Courier New, Times New Roman, Times, serif;
   font-size: 18px;
   color: black;
}

ul.nav a, ul.nav a:link, ul.nav a:visited {
   display: block;
   text-decoration: none;
   color: black;
   min-width: 97px;
   padding-top: 46px;
   padding-bottom: 46px;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
   text-decoration: none;
   color: white;
}

ul.nav a span.off, ul.nav a:link span.off, ul.nav a:visited span.off {
   display: block;
}
ul.nav a span.on, ul.nav a:link span.on, ul.nav a:visited span.on {
   display: none;
}

ul.nav a:hover span.off, ul.nav a:active span.off, ul.nav a:focus span.off {
   display: none;
}
ul.nav a:hover span.on, ul.nav a:active span.on, ul.nav a:focus span.on {
   display: block;
}