/*
 * style.css
 * New TwiceTwo styles
 * Andy Clifton
 * 11-08
 */

/* Colors:
   Name          Value         Usage
   --------------------------------------------------------------------
   white         #ffffff       Main background, footer foreground
   dark green    #476f66       Site title background, left sidebar foreground
   medium green  #6f998f       Left sidebar H1 background, footer background
   light green   #b4d1bf       Both sidebars: P, DIV background
   white green   #d7f3e3       Main content sections background

*/   

body {  
  margin: 32px 0 8px 0;
  padding: 0;
  text-align: center; /* Is this still needed on any browser? */
  
  /* Default font */
  font-family: Arial, sans-serif;
  font-size: 8pt;
  line-height: 1.5;
  
  background-color: #ffffff;  
}

#pageBody {
  text-align: justify;
  margin: 0 auto;
  
  /* Create containing block, so children can be positioned absolutely, 
     relative to this.*/
  position: relative; 
  
  /* Width is 170 + 8 + 2.5*170 + 8 + 170 = 781px */
  width: 781px;
}

#siteTitle {
  position: absolute;
  top: 0;
  left: 0;
  width: 170px;
  height: 70px;
  margin-bottom: 8px;
    
  /* In case images are disabled */
  background-color: #476f66; 
  text-align: center;
  color: white;
  
  padding: 0;
  margin: 0;
  border-width: 0;
}

#siteTitle img {
  padding: 0;
  margin: 0;
  border-width: 0;
}

/* Corner divs, for adding rounded corners to block elements, such as sections */
div.cUL, div.cUR, div.cLR, div.cLL {
  background-repeat: no-repeat;
}

div.cUL {
  background-image: url(corner-ul.png);
  background-position: top left; 
}

div.cUR {
  background-image: url(corner-ur.png);
  background-position: top right; 
}  

div.cLR {
  background-image: url(corner-lr.png);
  background-position: bottom right; 
}  

div.cLL {
  background-image: url(corner-ll.png);
  background-position: bottom left; 
}

/* ---- Left-side sidebar ---- */
#sidebar {
  position: absolute;
  top: 70px; /* Bottom of site title */ 
  width: 170px;
  margin-top: 8px;
  font-size: 8pt;
  text-align: left;
}

#sidebar h1 {
  margin-top: 0;
  margin-bottom: -8px;
  padding: 2px 0 2px 16px;
  
  background-color: #6f998f;  
  background-image: url(round-top.png);
  background-repeat: no-repeat;
  background-position: top left;
  
  font-size: 8pt;
  font-family: inherit;
  font-weight: bold;
  color: white;
}

#sidebar h1 a:link {
  color: white;
}


#sidebar div, #sidebar p, #sidebar ul {
  background-color: #b4d1bf;
  color: #476f66;
  background-image: url(round-bottom.png);
  background-repeat: no-repeat;
  background-position: bottom left;  
  
  margin-top: 8px;
  padding: 10px 8px;
}

#sidebar ul {
  list-style-type: none;
  margin-left: 0;
}

/* ---- Right-side notes bar ---- */

/* Per-page title block  */
#pageTitle {
  position: absolute;
  top: 0;
  /* Originally the #pageTitle was going to be outside #content, but we 
     moved it inside to make it easier to adjust. So we had to tweak the position */
  left: 433px; /* 170 + 8 + 425 + 8 - 170 - 8*/
  width: 170px; 
  
  background-color: #b4d1bf;
  background-image: url(corner-ul.png);
  background-position: top left; 
  background-repeat: no-repeat;  
  text-align: left;
}

#pageTitle div.cLL {
  padding-top: 8px;
}

#pageTitle p {
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
  padding-top: 0;
  
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0px;  
}

#pageTitle em {
  font-style: normal;
  font-weight: bold;
}

#content #pageTitle h1 {
  font-family: Arial, sans-serif;
  font-size: 8pt;
  font-variant: normal;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  
  margin: 0;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
  border-bottom-style: none;
}

/* Sidenotes still need a lot of work to make them look just right. */
div.sidenote {
  display: block;
  position: absolute;
  left: 432px; 
  
  background-color: #b4d1bf;
  background-image: url(round-top.png);
  background-repeat: no-repeat;
  background-position: top left;  
  text-align: left;
  
  /* margin-top: -8px; */ /* Needed for section-notes */
  margin-top: 2px;  /* Needed for normal sidenotes */  
}

div.sidenote div {
  padding: 8px;
  width: 154px; /* 170px - 8 - 8 */
  
  background-image: url(round-bottom.png);
  background-repeat: no-repeat;
  background-position: bottom left;      
}
     

/* ---- Page Content region ---- */
#content {
  position: absolute;
  top: 0;
  left: 178px;
  width: 425px; /* 170 * 2.5 */  
  background-color: #ffffff;
}

/* Within the page content, text is contained within one or more 
   div.sections. There must be at least one. */
#content div.section {
  background-color: #d7f3e3;
  background-image: url(corner-ul.png);
  background-repeat: no-repeat;
  background-position: top left;  
  
  /*margin-bottom: 8px; /* Spacing between sections */
}

/* The corners on sections are added using a set of nested divs. Because we need
   margins and padding on sections, we have to add them on the innermost div,
   which has two classes, a corner class cLL and innerSection. The same trick
   is used on the footer, which luckily can reuse innerSection, as it has the
   same padding as a normal section. */
div.innerSection {
  padding: 8px 12px;
}

/* Every section needs to be followed by a div.sectionSpace.
   Stupid IE. For some reason IE does not like a bottom margin on div.section,
   filling it in with the section background color. */
div.sectionSpace {
  height: 8px;
  background-color: #ffffff;
}

div#footer {
  clear: both;
  font-style: italic;
  background-color: #b4d1bf;
  background-image: url(corner-ul.png);
  background-repeat: no-repeat;
  background-position: top left;    
  color: #ffffff;
  text-align: center;  
} 

div#footer p {
  margin-top: 0;
  margin-bottom: 0;
}

div#stupidIE {
  height: 8px; 
  background-color: #ffffff;
}

/* Standard HTML element styles */
p, h1, h2, h3, h4, h5, h6 {
  margin-top: 1em;
  margin-bottom: 1em;
}

/* h1's are used a few places other than in #content, so we have to qualify
   these. */
#content h1 {
  font-family: "Palatino Linotype", "Palatino", serif;
  font-size:130%;
  font-weight: bold;
  color: black;
  text-transform: capitalize;
  font-variant: small-caps;
  
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

#content h1 span {
  padding-left: 16px;
  padding-right: 16px;
}
  

h2 {
  font-size: 115%;
  font-weight: bold;
  color: black;
  letter-spacing: 1px;
  
  height: .80em;
  margin-bottom: 1.2em; /* Make up the space we eliminated with 80% height */
  
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #6f998f;
  padding-left: 12px;
}

h2 span {
  background-color: #d7f3e3;
  padding-right: 4px;
  padding-left: 4px;
}

h3 {
  font-family: "Palatino Linotype", "Palatino", serif;
  letter-spacing: 1px;
  margin-top: 1.5em;
  text-transform: uppercase;
  margin-left: 16px;
}

h4, h5, h6 {
  text-transform: uppercase;
  font-size: .80em;
  letter-spacing: 1px;
  margin-left: 16px;
}

h5 {
  font-size: .90em;
  font-family: "Palatino Linotype", "Palatino", serif;
}

h5, h6 {
  font-weight: normal;
}
  
h6 {
  color: #476f66;
  letter-spacing: inherit;
}

blockquote {
  padding-left: 8px;
  padding-right: 16px;
  border-style: solid;
  border-width: 0 0 0 8px;
  border-color: #b4d1bf;
}

pre, code, kbd {
  font-family: "Lucida Console", monospace;
}

pre, code {
  background-color: #eef6ee;
}

pre {
  border: dashed 1px #6f998f;
  padding: 4px;  
  overflow: auto;
}

table {
  margin: 0 auto 1em auto;
  border: dotted 1px #b4d1bf;  
}

table caption {
  margin-bottom: 2px;
  font-style: italic;
  margin-top: 1em;
  caption-side: top;
}

th, td {
  padding: 2px;
}

th, thead th {
  border-bottom: solid 1px #b4d1bf;
  font-weight: bold;
}

tbody th {
  border-bottom-style: none;
}

tfoot th {
  border-bottom-style: none;
  border-top: solid 1px #b4d1bf;
}
  

abbr {
  text-transform: capitalize;
  font-variant: small-caps;  
}

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

code {
  padding-left: 2px;
  padding-right: 2px;
}

del { 
  text-decoration: line-through;
}

sub, sup { font-size: .83em }
sub      { vertical-align: sub }
sup      { vertical-align: super }

ins {
  color: #000088;
  text-decoration: underline overline;
}
  
kbd:before {
  content: "<";
}

kbd:after {
  content: ">";
}

/* ---- Lists ---- */

ul, ol, dl { 
  margin: 1.12em 0; 
}

ol, ul, dd { 
  margin-left: 20px; 
}

ol { 
  list-style-type: decimal; 
}

ul {
  list-style-type: disc;
}

ul ul {
  list-style-type: circle;
}

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

ol ul, ul ol, ul ul, ol ol  { 
  margin-top: 0; 
  margin-bottom: 0; 
}

li { 
  display: list-item 
}

dt {
  font-style: italic;
}

dt:after {
  content: " ~ ";
}

dd {
  margin-bottom: .3em;
}

img.footMark {
  cursor: pointer;
}

span.footNote {
  cursor: pointer;
  font-style: italic;
  background: #DEFBEA;
  text-decoration: underline;
}

/* Applets */
span.applet {
  border-style: solid; 
}
div.applet {
  border-style: solid; 
  border-width: 1px; 
  margin-left: auto;
  margin-right: auto; 
  text-align: center; 
}

/* ---- Images ---- */
/* Normal images for us have the form div.imgbox(a(img)). Of course, non-linked 
images have no a. */

div.imgbox {
  text-align: center;
}

div.imgbox a img {
  background-color: #B4D1BF;
  padding: 2px;  
}

div.imgbox a:link:hover img, div.imgbox a:visited:hover img {
  background-color: #476F66;
}

div.imgbox a:visited img {
  background-color: #D7F3E3;
}

/* ---- Forms ---- */
form {
  border: solid 2px #b4d1bf;
  padding: 0 8px 8px 8px;
  -moz-border-radius: 4px;
} 

legend {
  background-color: #b4d1bf;
  color: #476f66;
  margin-bottom: 8px;
  padding: 0 5px;
  -moz-border-radius: 0 0 3px 3px;
}

textarea:focus, input[type=text]:focus, select:focus {
  border: solid 2px #b4d1bf;
  margin: 0px;
} 

textarea {
  font-family: "Lucida Console", monospace;
  font-size: 11px;
  border: solid 1px #b4d1bf;
  margin: 1px;  
}
 
input[type=text] {
  font-size: 8pt;
  border: solid 1px #b4d1bf;
  margin: 1px;
}

input[type=button] {
  font-size: 8pt;
}

input[type=checkbox] {
  margin: 2px;
}  

select {
  font-size: 8pt;
  border: solid 1px #b4d1bf;
  margin: 1px;  
}
 
/* ---- Links ---- */
a:link { 
  color: #0088ff;
  text-decoration: none;
}
a:visited { 
  color: #552288;
  text-decoration: none;
}
a:hover { 
  color: #004488;
  text-decoration: underline;
}
a:active { }
a:visited:hover {
  color: #331166;
  text-decoration: underline;
}
  

#footer a:link {
  color: #ffffff;
  text-decoration: underline;
}

#footer a:hover {
  color: #004488;
}