/*
 * style.css
 * Andy Clifton
 * 1-09
 */

/* Palette (dark to light):
     Shades of gray:  #3B3B41 (#585861) #757581  #9292A1  #AFAFC1  #C6C6DB
     Blue (highlights):                          #8586C1  #9899DC  #C9C3EF
     Orange (links): #FFB03D
*/   
 
body {
  position: relative;
  width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-size: 8pt; 
  font-family: Georgia, serif;
  color: #3B3B41;
  padding-top: 8px;
}

#siteTitleBox {
  border-bottom: solid 1px #C6C6DB; 
}

#siteTitle {
  font-size: 8em;  
  letter-spacing: -.2em;
  color: #C6C6DB;
} 

#siteSubTitle {
  text-transform: uppercase;
  letter-spacing: .25em;
  font-size: 7pt;
  color: #757581;
  padding-bottom: 3px;
  margin-left: 1em;
} 

#menuBox {
  width: 140px;
  position: absolute;
  left: 460px;
  top: -1px; /* Why is this needed? */
  border-top: solid 1px #C6C6DB;
  border-bottom: solid 1px #C6C6DB;
  text-align: right;
  padding: 0;
}

#menu ul {
 padding: 0;
 margin: 0;
}

#menu li {
  list-style-type: none;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 9pt; 
  border-bottom: dashed 1px #C6C6DB;
  height: 16px;
  line-height: 16px;
  margin: 0;
  padding: 0;
}

#menu li.selected {
  font-weight: bold;
}

#menu a {
  height: 16px;
  line-height: 16px;
  display: block;
  padding-right: 8px;  
  color: #757581;
  text-decoration: none;
}

#menu a:hover {
  background-color: #C9C3EF;
  color: #3B3B41;
}

#content {
  width: 450px; /* 75% */ 
  position: relative;
  padding-top: 1em;
}

#footer {
  margin-top: 16px;
  margin-bottom: 8px;
  padding-top: 8px;
  padding-bottom: 4px;
  color: #AFAFC1;
  text-align: center;
  border-top: dashed 1px #C6C6DB;
  font-variant: small-caps;
  letter-spacing: 1px;
}

/* ---- Formatting styles ---- */

/* Rightboxes do not work right in IE, so don't use them yet. */
.rightBox {
  float: right;
  width: 140px;
  margin-right: -150px;
  border-bottom: dashed 1px #C6C6DB;
  border-top: dashed 1px #C6C6DB;
  color: #757581;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 9pt;   
}

p {
  margin-top: .75em;
  margin-bottom: .75em;
  line-height: 1.5;
}

/* Horizontal rules */
div.hr {
  background-color: #AFAFC1;
  height: 1px;
}

/* Headings */

/* H1's are a bit special. If an H1 is the _first_ child of #content, then
   it is basically left alone. All the others, however, get transformed
   into special structures. */

h1, h2, h3, h4, h5, h6 {
  margin-top: 1em;
  margin-bottom: 1em;
  font-weight: bold;
}
     
h1, h2, h3, h4 {
  font-variant: small-caps;
}

h1 {
  margin-bottom: 4pt;
  margin-top: 8pt;  
  color: #AFAFC1;
  font-size: 16pt;
}
   
h2 {
  color: #9292A1;  
  font-size: 13pt;
  letter-spacing: 1px;
}

h3 {
  font-size: 11pt;
  letter-spacing: 1.5px;
  color: #757581;
}  

h4 {
  font-size: 10pt;
  letter-spacing: 1px;
  color: #585861;
}

/* h5 is fine, but it would be this: 
h5 {
  color: #3B3B41;
  font-size: 8pt;
}
*/

h6 {
  font-size: 7pt;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #585861;
}

/* Lists */
li {
  line-height: 1.5;
  margin-top: .2em;
  margin-bottom: .2em;
}

ul {
  margin-left: 1.5em;
  margin-top: .75em;
  margin-bottom: .75em; 
}

ul ul {
  margin-top: .35em;
  margin-bottom: .35em; 
}

ul li {
  list-style-type: disc;
}

ol {
  margin-left: 1.5em;
  margin-top: .75em;
  margin-bottom: .75em;  
}

ol {
  margin-top: .2em;
  margin-bottom: .2em;
}

ol ol {
  margin-top: .35em;
  margin-bottom: .35em;
}

dl {
  margin-top: 1em;
  margin-bottom: 1em;
}

dt {
  font-style: italic;
  margin-top: .2em;
  margin-bottom: .4em;  
}

dd {
  margin-left: 2em;
  margin-top: .2em;
  margin-bottom: .75em;  
}

/* Links */
a:link {
  color: #C77311;
  text-decoration: none;
}

a:link:hover, a:visited:hover {
  text-decoration: underline;
}

a:visited {
  color: #97684C;
  text-decoration: none;
}

/* Misc stuff */
blockquote {
  padding-left: 13px;
  padding-right: 13px;
  border-left: dotted 3px #C6C6DB;
  border-right: dotted 3px #C6C6DB;
}

pre {
  margin-top: 16px;
  margin-bottom: 16px;
}

abbr {
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: solid 1px #C6C6DB;
}

acronym {
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 1px;  
}

/* Bylines are used under news articles. They're like h6, but lighter */
div.byline {
  font-weight: bold;
  font-size: 7pt;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #AFAFC1;
  margin-left: 1em;
  margin-top: 1em;
  margin-bottom: 1em;  
}

.bullet {
  display: list-item;
  list-style-type: disc;
  margin-left: 1.5em;
}  

/* Tables */
table {
  margin: 1em auto 1em auto;
  padding: 2px;
  border: dotted 1px #C6C6DB;
}

caption {
  margin-top: 1em;
  color: #757581;
  text-decoration: underline;
}

td, th {
  padding: 4px;
}

th {
  background-color: #C6C6DB;
}

/* Tables with vertically-centered cell contents */
table.vcenter th, table.vcenter td {
  vertical-align: middle;
}

/* Forms */
form {
  border: solid 1px #C6C6DB;
  -moz-border-radius: 0 6px 6px 6px;
  padding: 6px;
  position: relative;
}

legend {
  background-color: #C6C6DB;
  margin-bottom: 1em;
  padding: 3px;
  font-weight: bold;
}
  

textarea, input, select, button {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 8pt; 
  vertical-align: bottom;
}

label {
  line-height: 18px; 
}