/***
Main style sheet for ideoplast.org.
Copyright 2008 Michael Wojcik, wojcikm4@msu.edu.
***/

/***
The overall color scheme used in this file is based on the colors used in

   http://www.colourlovers.com/pattern/19484/You_Next_To_Me
***/

/* Special styles for printing */
@media print {
   /***
   Make the navbars transparent, but include their boxes in the flow.
   Remove the header and right footer entirely. Keep the left footer.
   ***/

   #leftnav, #rightnav {
      visibility: hidden;
   }
   #leftnav *, #rightnav * {
      visibility: hidden;
   }
   #header, #rightfoot {
      display: none;
   }
   #pagename, #footer {
      background-color: transparent;
   }
}

/* General element styles */
img {
	display: block;         /* make images block elements */
	border: 0;              /* no borders around images */
}

img.inset {
   display: inline;
   border: 1px black solid;
}

div.leftillus, div.rightillus {
   border: 3px #202020 inset;
   margin-top: 5px;
   margin-bottom: 5px;
}

div.leftillus {
   float: left;
   margin-left: 5px;
   margin-right: 1.5em;
}

div.rightillus {
   float: right;
   margin-left: 1.5em;
   margin-right: 5px;
}

div.leftillus, div.rightillus a {
   text-decoration: none;
}


div {
   border: 0;
   background-color: #91BD8F; /* from colourlovers.com, "Back When" */
}

p {
   margin-left: 5px;
   margin-top: 0;
   margin-bottom: 1ex;     /* a bit less than a full line of type */
}

dt {
   margin-left: 15px;
   margin-top: 1ex;
   margin-bottom: 0;
   font-weight: bold;
}


/* General class styles */
.hide {                    /* hide an element from CSS-capable agents */
	display: none;
	text-indent: -9999px;   /* for CSS1-only agents */
}

.booktitle {               /* titles of books, etc */
   font-style: italic;
}

.notice {                  /* inline comment paragraphs */
   font-size: smaller;
   font-family: "Helvetica", "Arial", sans-serif;
   margin-left: +3em;
   margin-right: +3em;
   margin-top: +1em;
   margin-bottom: +1em;
}


/* Style rules for the whole body */
body {
   background-color: #57706B; /* colourlovers.com, "Make Some Lists" */
}


/* Style rules for the outermost container */
#container {
   width: 800px;
   margin: auto;
}


/* Style rules for the header container and banner items at the tops of pages */
#header {
   background-color: #BFCE84; /* colourlovers.com, "Son of Sage" */
   padding-bottom: 1ex;
   padding-top: 1ex;
   padding-left: 1ex;
}

.banner {
	font-family: "Times", "Georgia", serif, monospace;
	margin: 5px 10% 5px 10%;
}

h1.banner {
	font-size: 60px;
}

a.banner {
	text-decoration: none;
	color: black;
	margin: 0;
	padding: 0;
} 


/* Style rules for the footer */
#footer {
   background-color: teal;
   padding-bottom: 1ex;
   padding-top: 1ex;
   padding-left: 1ex;
   font-family: "Helvetica", "Arial", sans-serif;
   font-size: small;
   min-height: 3em;
   height: auto;
}

/***
In the following declarations for background-color, text-decoration, etc,
we frequently want "inherit" as the value. However, IE7 does not handle
inherit correctly, so we have to specify the values explicitly.

IE7 also doesn't handle comments between attribute name and value. Duh.
***/

#leftfoot {
   background-color: teal; /* should be inherit */
   width: 50%;
   text-align: left;
   margin: 0;
   padding: 0;
   float: left;
}

#rightfoot {
   background-color: teal; /* should be inherit */
   width: 15%;
   text-align: right;
   margin: 0;
   padding: 0;
   float: right;
}

#rightfoot ul {
   margin-left: 0;
   margin-top: 0;
   padding-left: 0;
   padding-top: 0;
   padding-right: 1em;
}

#rightfoot li {
   list-style-type: none;
}

#rightfoot a {
   color: black;           /* should be inherit */
   text-decoration: none;  /* should be inherit */
}



/* Style rules for vertical side bars (navigation and page labels) */
.sidebar {
   width: 125px;
   float: left;
   font-family: "Helvetica", "Arial", sans-serif;
}

.sidebar ul {
   margin-left: 0;
   margin-top: 0;
   padding-left: 1em;
   padding-top: 1em;
}

.sidebar li {
   list-style-type: none;
   margin-left: 0;
   padding-bottom: 1em;
}

.sidebar a {
   text-decoration: none;
   display: list-item;
}

.sidebar a:link {
   color: teal;
}

.sidebar a:visited {
   color: gray;
}

.sidebar a:hover {
   font-weight: bold;
   list-style-type: disc;
}

/***
pagename implements vertical text using a list; this idea came from
Stu Nicholls, http://www.cssplay.co.uk/menus/vertical.html.
***/
#pagename {
   list-style-type: none; 
	font-family: "Times", serif, monospace;
   font-size: 1.4em; 
   font-weight: bold;
}

#pagename ul {
   padding-left: 0;
}

#pagename li {
   margin: 0;
   display: block; 
   text-align: center; 
   padding-bottom: 0;
}


/* Styles that differ for left and right sidebars */
#leftnav, #pagename {
   float: left;
}

#rightnav {
   float: right;
}

#rightnav ul {
   padding-right: 1ex;
}

/* rightnav_contents is a rightnav subcontainer used for table of contents */
#rightnav_contents {
   position: fixed;  /* floats as the page scrolls */
   width: inherit;
}

#rightnav_contents ul {
   padding-right: 2px;
   padding-top: 0;
   margin-top: 0;
}

#rightnav_contents li {
   list-style-type: none;
   margin-left: 0;
   padding-bottom: 2px;
   text-indent: -1ex;
}

#rightnav_contents a {
   text-decoration: none;
   display: list-item;
}

#rightnav_contents a:link {
   color: black;
}

#rightnav_contents a:visited {
   color: black;
}

#rightnav_contents a:hover {
   color: gray;
   font-weight: normal;
   list-style-type: none;
}


/* Style rules for the framed content area */
#content, #widecontent {
   margin-left: 130px;        /* to allow for the nav bars */
   margin-right: 130px;
   padding-left: 1ex;
   padding-right: 1ex;
   border: 1px black solid;
   min-height: 30em;          /* always at least as tall as pagename sidebar */
   background-color: #E7E9EB; /* from colourlovers.com, "Designers Trash - 1" */
}

#content div, #widecontent div {
   background-color: #E7E9EB; /* from colourlovers.com, "Designers Trash - 1" */
}

#widecontent {
   margin-right: 10px;     /* widecontent doesn't have a right-side sidebar */
   text-align: justify;
}

#content h1, #widecontent h1 {
   /***
   h1 in the content area is a box that echoes the visual style of the page
   banner. Its margin and padding are specified in pixels because they're
   purely visual decor, not sensitive to font size like most of the visual
   elements controlled by this sheet.
   ***/

   margin: 5px;
   padding: 5px;
   background-color: #BFCE84; /* colourlovers.com, "Son of Sage" */
   text-align: center;
}

#content h1 > span,         /* ie "span in h1 within #content area" */
#widecontent h1 > span {
   /***
   There may be multiple lines in a content-area title box; we indicate that
   by putting them in separate spans. This rule prevents the spans from
   changing the background color.

   "background-color: inherit" should work, and it does in Firefox, but IE7
   screws it up. Really, how hard could this be?
   ***/

   /* background-color: inherit; */
   background-color: #BFCE84; /* colourlovers.com, "Son of Sage" */
}

#content h1 > span.subtitle, #widecontent h1 > span.subtitle {
   /***
   In an h1 in the content area, we may have both a "title" and a "subtitle".
   The subtitle is marked as a span in the h1 with the class "subtitle".
   It's presented in a smaller font than the main title, and it's given
   block display mode so that it forms a separate line.
   ***/

   font-size: smaller;
   display: block;
}


