/***
  Main style sheet for the default theme.
 ***/

/***
  HTML Elements.
  */

body, p, td, option, select, input, textarea {
  font-size:           1em;
}

pre {
  font-size:           0.9em;
}

body, p, td, option, select {
  font-family:         Arial, Helvetica, sans-serif;
}

pre, textarea {
  font-family:         monospace;
}

input {
  font-family:         Arial, Helvetica, sans-serif;
}

hr {
}

a {
  text-decoration:     none;
}

form, img {
  padding:             0;
  border:              0;
  margin:              0;
  display:             inline;
}

/* End, HTML Elements
***/

/***
  TWIG classes
  */

.twigheader {
  height:              75px;
}

.twigheaderleft {
  float:               left;
  height:              75px;
}

.twigheaderright {
  float:               right;
  height:              75px;
}

.twigfooter {
   text-align: right;     
}

label {
  font-weight:         bold;
}

.area {
  background-color:    #e0e0e0;
  border:              1px solid #778899;
}

.areatitle {
  font-size:           1.2em;
  font-weight:         normal;
  color:               #ffffff;
  background-color:    #778899;
  vertical-align:      baseline;
  padding:             0.05em;
  margin:              0em;
}

.areamiddle {
  color:               #000000;
  margin-top:          1em;
  margin-bottom:       1em;
  margin-left:         2em;
  margin-right:        2em;
  clear: both;
}

.areainner {
 display: table;
 overflow: scroll;
}

.areaflow {
  border: 1px dashed #333;
  float: left; /* FIXME: This was 'xxfloat', was it broken? */
  display: table-cell;
  width: 100px;
  height: 100px;
 overflow: scroll;
}

.itemtable {
  background-color:    #e0e0e0;
  border-collapse:     collapse;
  empty-cells:         show;
}

.itemtablehead {
  color:               #ffffff;
  background-color:    #778899;
  white-space:         nowrap;
}

.itemtableleft {
/*border:              1px solid #fff899;*/
  font-size:           1.4em;
  float:               left;
  margin:              0em;
  padding:             0em;
}

.itemtableright {
/*border:              1px solid #ffffff;*/
  font-size:           1.1em;
  text-align:          right;
  display:             block;
  bottom:              0em;
}

.listitem {
  display: table;
  border:              1px solid #778899;
  background-color:    #e0e0e0;
}

.listitemheader {
}

.listitemfooter {
  border-top:          1px solid #778899;
  text-align:          center;
  padding:             0.25em;
}

input.listselect { /* class for the checkboxes to the right of all indexes/lists, e.g. in mail, bookmarks, contacts, etc. */
}

.roweven {
  background-color:    #ffffff;
  color:               #000000;
}

.rowodd {
  background-color:    #e0e0e0;
  color:               #000000;
}

table {
  border-collapse:     collapse;
}

td, th {
  padding-left:        0.25em;
  padding-right:       0.25em;
}

.roweven td a,
.rowodd td a {
/* FIXME: This was Block, but it made img tags do weird things in tables. */
  display:             inline;
}

.roweven:hover,
.rowodd:hover
{
  background-color:    #ff6;
}

.rowhead, .rowhead a {
  white-space:         nowrap;
  text-align:          left;
  font-weight:         bold;
  background-color:    #778899;
  color:               #ffffff;
}

.formhead {
  font-weight:         bold;
  background-color:    #778899;
  color:               #ffffff;
}

.formbody {
  background-color:    #e0e0e0;
  color:               #000000;
}

table.index td {
  padding-right:       0.5em;
  border-bottom:       1px solid gray;
/*
 * The following chunk will put a border between rows of index-style lists.
 * The twig-devel mailing list found this interesting, but decided against it.
 * Let us know if it should be part of the defaults.
 */
/*
 *  border-bottom-width:  1px;
 *  border-style:         solid;
 *  border-color:         gray;
 */
}

.tabs {
}

.menubar {
}

.menubarleft {
  float:               left;
  font-size:           1em;
  margin:              0em;
}

.menubarright {
  text-align:          right;
}

div.menuprimary {
  font-weight:         bold;
}

span.menuprimary {
  font-weight:         bold;
}

span.menuprimary_selected {
  font-weight:         bold;
  text-decoration:     underline;
}

.menusecondary {
}

span.nav-first,
span.nav-prev,
span.nav-curr,
span.nav-next,
span.nav-last {
  /* The idea is to make these even across. */
  line-height: 28px;
}

.nav-curr img {
  margin: 0px;
  padding: 0px;
  vertical-align: middle;
}

/* End, TWIG classes
***/

/***
  ID selections
  */

div#endnote {
  text-align:          right;
}

/* End, ID selections
***/

.TWIGSiteBigHeader {
  font-size: 	       2.5em;
}

.TWIGSiteSubHeader {
  font-size:           1.1em;
  margin-left:         4.5em;
  font-style:          italic;
}

/* Olivier's notes plugin v3...
 * Made inline instead of block by Aaron.
 */
.noteclassic, .noteimportant, .notewarning, .notetip {
  margin: 2em 15%;
  width: 70%;
  clear: both;
  display: block;
}

.notetext {
  display: block;
  text-align: justify;
  padding: 1.5em 1.5em 1.5em 0px;
  margin-left: 70px;
}

.noteimage {
  float: left;
  margin-top: 10px;
  margin-left: 10px;
}

.noteclassic {
  /*border: 1px solid #99D;*/
  background-color: #eef;
}
 
.noteimportant {
  /*border: 1px solid #ff0;*/
  background-color: #ffd;
}
 
.notewarning {
  /*border: 1px solid #d99;*/
  background-color: #fee;
}
 
.notetip {
  /*border: 1px solid #9d9;*/
  background-color: #efe;
}
 
/* New JSON style tables with everything build in. */

div.table_outer {
}

div.table_inner {
  border:       1px solid #778899;
  /* FIXME: We need this if the table above-left is
   * taller than the table above-right, which causes
   * the table-inner to shift to the right in a very ugly way.
   * 
   * Setting 'line-height: 28px' below achieves this.
   *
   * clear:        both; */
}

div.table_above {
  clear:        both;
}

div.table_aboveleft {
  float:        left;
}

div.table_aboveright {
  text-align:   right;
}

div.table_below {
  clear:        both;
}

div.table_belowleft {
  float:        left;
}

div.table_belowright {
  text-align:   right;
}