/* the layout used here was inspired by an article at "A List Apart." See:
   http://alistapart.com/articles/conflictingabsolutepositions */

html {
   overflow: hidden;
   }

body {
   height: 100%; /* width and height need to be explicitly set for IE */
   width: 100%;
   overflow: hidden;
   font-family: Arial, Helvetica, sans-serif;
   font-size:  100%;  /* normally 16px by default */
   line-height: 18px; /* 16 x 1.125 = 18px */
   }

/* typography rules follow...this is a test implementation 
 *
 *  we want to set the font-size and line heights, padding, margin, etc.
 *  so that lines break consistently on a grid...not working so far
 */

p {
  margin: .5em 0;
  max-width: 650px;
  font-size: 14px;
  line-height: 16px;
  }

li {
   max-width: 650px;
   font-size: 14px;
   }

.sidebar li {
   }

tr {
   font-size: 14px;
   }

ul, ol {
   margin: .25em 0 .75em 0;
   }

li {
   padding: .25em 0;
   }

h1, h2, h3, h4, h5, h6 {
   max-width: 650px;
   }

h1 {
   color: #445914;
   margin: .25em 0 .75em 0;
   font-size: 2em;
   }

h2 {
   color: #445914;
   margin: .5em 0 .725em 0;
   font-size: 1.75em;
   }

h3 {
   color: #445914;
   margin: 2.25em 0;
   font-size: 1.5em;
   }

h4 {
   color: #445914;
   margin: .5em 0 0 0;
   padding: .25em 0;
   font-size: 1.25em;
   }

h5 {
   color: #445914;
   margin: .5em 0 0 0;
   padding: .25em 0;
   font-size: 1.15em;
   }

h6 {
   color: #445914;
   padding: .25em 0;
   margin: .5em 0;
   max-width: 650px;
   font-size: 1em;
   }

table {
   margin: .5em 1px;
   }

td {
   padding: 5px;
   }

/*
 * Begin header section
 */

#header {
   width: 100%;
   height: 80px;
   position: absolute;
   top: 0px;
   left: 0px;
   overflow: hidden;
   background-image: url("./images/header-repeat.jpg");
   border-style: solid;
   border-color: #445914;
   border-width: 0 0 1px 0;
   color: white;
   }

/* following title styles define the text title in header */
/* setting the line-ht here helps v-align the title text */
#sitetitle {
   line-height: 80px;
   }

#sitetitle span {
   vertical-align: middle;
   color: white;
   font-weight: bold;
   }

#maintitle {
   font-size: 3em;
   padding-left: 10px;
   font-family: "Bitstream Vera Sans", "Arial", "Trebuchet MS", sans-serif;
   }

#subtitle {
   font-size: 1.25em;
   }

/* the circular LONI logo */
#logo {
   position: absolute;
   right: 50px;
   top: 12px;
   }


/*
 * Begin sidebar section
 */
.sidebar {
   position: absolute;
   top: 81px;
   bottom: 0px;
   width: 226px;
   overflow: auto;
   background-image: url("./images/sidebarbg.gif");
   background-repeat: repeat;
   color: #445914; /* dark brown font-color */
   font-weight: bold;
   border-style: solid;
   border-color: #445914;
   border-width: 0 1px 0 0;
   }

.minsidebar {
   position: absolute;
   top: 81px;
   bottom: 0px;
   width: 5.25em;
   overflow: auto;
   background-image: url("./images/sidebarbg.gif");
   background-repeat: repeat;
   color: #445914; /* dark brown font-color */
   font-weight: bold;
   border-style: solid;
   border-color: #445914;
   border-width: 0 1px 0 0;
   }

.sidebar img {
   width: 100%;
   }

#mainmenu {
   margin: 2em 0; 
   /* font-size: 1.2em; */
   }

#mainmenu li {
   text-align: center;
   padding: .5em 0;
   }

.sidebar a {
   display: block;
   text-align: center;
   }

.sbinsert {
   /* border-style: solid;
   border-color: #445914;
   border-width: 1px 0; */
   background-color: #A2B768;
   padding: .5em 0;
   }


.larger {
   font-size: 1.25em;
   }

/* 
 * Begin main body section
 */

/* content hold main body of pages */
#content {
   position: absolute;
   overflow: auto;
   top: 100px;
   bottom: 10px;
   left: 246px;
   right:10px;
   margin: 20px 0 0 0;
   }

/* picgroup styles used for cluster of LONI pics on front page */
#picgroup ul {
   width: 600px;
   }

#picgroup li {
   display: inline;   
   }

#picgroup img {
   vertical-align: top;
   }

#picgrouplast {
   position: relative;
   left: 225px;
   bottom: 65px;
   }


/* styles for the news section, including title and table */

/* the container for the newstable...provides scroll bar via max-ht + overflow */
#newstable { 
   width: 600px;
   border-style: dotted;
   border-color: gray;
   border-width: 1px 0 1px 1px;
   max-height: 300px;
   overflow: auto;
   }

#newstable li {
   width: 600px;
   }

#newstable td {
   vertical-align: top;
   color: #3E4B17;
   font-weight: bold;
   padding: 5px;
   border-style: none;
   /* font-size: .98em; */
   }

#newstable tr {
   border-style: none;
}

#newstable tr.highlight {
   background-color: #DDE5BC;
   }

.highlight {
   background-color: #DDE5BC;
   }

/*
 *  General styles section
 */

/* used to add a title to a page, generally using <h[1-5]> tags */
#pagetitle {
   /* color: #A3C232;*/
   border-style: dotted;
   border-width: 0 0 1px 0;
   border-color: gray;
   padding-bottom: 5px;
   max-width: 650px;
   margin: 0 0 1em 0;
   }

/* subsection titles should use this style */
.sectiontitle {
   /* color: #A3C232; */
   margin: 1em 0 0 0; 
   }

/* used to simulate the code block used in mediawiki and elsewhere */
.code {
   background-color: #F1F1F1;
   border-style: dotted;
   border-color: black;
   border-width: 1px 0;
   padding: 1em 0 1em 10px;
   margin: 1em 0;
   font-family: monospace;
   /* font-size: 1.2em; */
   }

pre {
   background-color: #F1F1F1;
   border-style: dotted;
   border-color: black;
   border-width: 1px 0;
   padding: 1em 0 1em 10px;
   margin: 1em 0;
   font-family: monospace;
   }


/* styles used in tgfooter.php */

#tgfooter {
   text-align: center;
   width: 650px;
   font-size: 11px;
   margin-top: 2em;
   }

#tgimgleft {
   float: left;
   width: 60px;
   height: 65px;
   clear: left;
   }

#tgimgright {
   float: right;
   width: 65px;
   clear: right;
   }

#tgtext {
   text-align: center;
   margin: 0 auto;
   }


/*
 *  Link/Anchor styles 
 */

/* setup styles for basic links */
A:link {
   text-decoration: none;
   }

A:visited {
   text-decoration: none;
   }

A:hover {
   text-decoration: none;
   }

A:active {
   text-decoration: none;
   }

/* sidebar links */
.sidebar A:link {
   color: #445914;
   }

.sidebar A:visited {
   color: #445914;
   }

   .sidebar A:hover {
   color: #D2D512;
   }


.sidebar A:active {
   color: #445914;
   }


/* content links */
/*
#content A:link {
   color: #445914;
   }

#content A:visited {
   color: #445914;
   }

#content A:hover {
   color: #A3C232;
   }

#content A:active {
   color: #A3C232;
   }

*/

/* white links used in the visitor section in menu */
.whitetxt A:link {
   color: #FFFFFF;
   }

.whitetxt A:visited {
   color: #FFFFFF;
   }

.whitetxt A:hover {
   color: #CBD5C0;
   }

.whitetxt A:active {
   color: #FFFFFF;
   }

/* links in section titles...we want the color to match other titles */
.sectiontitle A:link {
   color: #A3C232;
   }

.sectiontitle A:visited {
   color: #A3C232;
   }

.sectiontitle A:hover {
   color: #A3C232;
   }

.sectiontitle A:active {
   color: #A3C232;
   }

/* links in page titles...we want the color to match other titles */
#pagetitle A:link {
   color: #445914;
   }

#pagetitle A:visited {
   color: #445914;
   }

#pagetitle A:hover {
   color: #445914;
   }

#pagetitle A:active {
   color: #445914;
   }

/*
 * bylaw / boilerplate element definitions 
 * used in the LMC bylaw section
 */

.boilerplate p {
   padding-left: 2em;
   }

.boilerplate ul {
    padding-left: 1em;
    }
.boilerplate li {
    padding-left: 1em;
    padding-bottom: .5em;
    }

#subscript {
   margin: 0;
   padding: 0 0 0 .25em;
   /* font-size:.9em; */
   }

/* contentlist defines an unordered, style-less, non-indented list that should suit
   situations where a list of items needs to be displayed */

.contentlist {
   max-width: 650px;
   }

.contentlist ul {
   margin: 0 0 1em 0;
   }
   
.contentlist li {
   padding: .1em 0;
   }

.shortlist {
   margin: 0;
   padding: 0;
   }


table.infotable {
   border-collapse: collapse;
   border: solid black 1px;
   margin-left: 1px;
}

.infotable td,th {
   padding: 5px;
   border: solid black 1px;
}

.infotable caption {
   caption-side: top;
   color: #445914;
   font-weight: bold;
}