/***
Multibib project area style sheet for ideoplast.org.
Copyright 2008 Michael Wojcik, wojcikm4@msu.edu.
***/


/***
Is there a way to tell CSS that this div needs to have a minimum
height of at least the height of the div to the left? That would
happen automatically with a table layout. It could be done with
Javascript, but I don't want to have proper rendering depend on
client-side scripting, which may not be enabled.

Consequently, I override the min-height set by main.css for the
content div here.

It might be nice to set a fixed height (rather than min-height and
set overflow set to auto, so that I'd get a scrollbar in the div if
the height exceeded the minimum. (It's arguable whether that's
preferable to having the footer and sidebars extend down, and the
entire page scroll.) But in Firefox, setting overflow to auto changes
the *width* of the div for some reason.
***/

#content, #widecontent {
   min-height: 40em;
}

/* Make anchors in h1 match the color of the rest of the text */
h1 a {
   color: inherit;
}


/***
Numbered Sections

My first attempt was to just make h3 a list item, so I could auto-number it
by wrapping the content in an ol:

   h3.numbered {
      display: list-item;
      list-style-type: decimal;
   }

This works great in Firefox.  Unfortunately, IE (including IE7) has an
amazing brain-dead bug when it comes to numbering items in an ordered list:
any element that's a direct child of the list increments the numbering.
That's true even if the element does not have list-item display type. So if
we just have h3.numbered followed by p, etc, then IE screws up the
numbering.

Also, it's illegal XHTML, because children of ol must be li, according to
the DTD. Rats. (This makes me wonder if "display: list-item" can be usefully
combined with "list-style-type: decimal".)

Wrapping the header and the content beneath it in a no-change div doesn't
help, because IE then treats the h3's as list items in individual embedded
lists and numbers them all "1".

Inserting empty li elements with the "value" attribute doesn't help. They're
given the correct number (as can be seen if they have some dummy content), but
the following h3.numbered gets to be "1" again. Mysterious.

Wrapping the header and content in an li works, but the number isn't formatted
the same as the header text, unless we set a style for it. And I don't think
there's a way to ask CSS to have an li inherit the display style of an h3;
we'd have to explicitly specify the h3 style as well, to be sure they matched.
Plus adding a bunch of tags just to avoid an IE bug annoys me.

IE doesn't support CSS counters. (Why not? They're not hard.) So we can't
fix it that way. But: since IE doesn't support CSS counters, if we use them
to implement h3.numbered, then IE just doesn't number anything, and it looks
OK (if less awesome than under FF).
***/

h3.numbered {
   counter-increment: sec-num;
}

h3.numbered:before {
   content: counter(sec-num) ". ";
}


/* The "viewexample" div is used to frame examples of views */
div.viewexample {
   width: 502px;
   margin-left: 0;
   margin-top: 2em;
   padding: 3px;
   border: 1px black solid;
   background-color: white;
}


/***
Styles for the application itself
***/

/* MultiBib overall styles */
body.mb div {
   border: 0;
   background-color: white;
}

.booktitle {               /* titles of books, etc */
   font-style: italic;
}

.mb_attrib {               /* attribution lines for entries */
   text-align: right;
   font-size: small;
}


/* The MultiBib page areas */

/* Body and outer container */
body.mb {
   background-color: #D6D6BE; /* colourlovers.com, "Tana" */
}

#mb_container {
   width: 800px;
   margin: auto;
   padding: 5px;
}

/* Header at the top of the page, with banner */
#mb_header {
   background-color: #57706B; /* colourlovers.com, "Make Some Lists" */
   padding-top: 3px;
   padding-bottom: 3px;
   margin-bottom: 10px;
   text-align: center;
}

.mb_banner {
	font-family: "Times", "Georgia", serif, monospace;
   padding: 0;
   margin: 0;
}

h1.mb_banner {
	font-size: 40px;
}

/* Wayfinder square, left under banner */
#mb_wayfinder, #mb_wayletter {
   background-image: url("../../image/cc-by-nc-sa/19484.png");
   background-color: #BFCE84; /* ColourLovers.com, "Son of Sage" */
   background-repeat: no-repeat;
   background-attachment: scroll;
}

#mb_wayfinder {
   width: 100px;
   min-height: 90px;
   float: left;
   padding: 0;
   margin-top: 0;
   margin-bottom: 10px;
   margin-left: 0;
   margin-right: 5px;
}

#mb_wayletter {
   font-family: "Times", "Georgia", serif;
   font-size: 75px;
   font-weight: bold;
   text-align: center;

   padding: 0px;
}


/* Page header, right of wayfinder */
#mb_pageheader, #mb_phlines {
   background-color: #BFCE84; /* colourlovers.com, "Son of Sage" */
   text-align: center;
}

#mb_pageheader {
   float: right;
   width: 695px;
   min-height: 90px;
}

#mb_phlines {
   margin-top: 10px;
}

#mb_bibname, #mb_pagedesc {
   font-size: large;
   padding: 0;
   margin: 0;
}

#mb_pagetitle {
   padding: 0;
   margin: 0;
}


/***
The type tag and entry title styles are used on the view page to
format the pagetitle. The type tag floats to the right, then
gets adjusted up 1.5 lines to make it more or less on the same
line as the pagetitle. Its presence pushes the entry title to
the left, so to re-center the entry title we position it back to
the right, at 1/2 the number of letters in the tag, plus half a
letter for the 1ex margin to the right of the tag.
**/

#mb_typetag {
   float: right;
   position: relative;
   top: -1.5em;
   left: -1ex;
   border: 1px gray solid;
   color: gray;
   font-variant: small-caps;
}

#mb_pgentrytitle {
   /* Start with everything in mb_pagedesc ... */
   font-size: large;
   padding: 0;
   margin: 0;
   /* ... then add positioning to fix centering, as described above */
   position: relative;
   left: 2.5ex;
}


/* Container for remaining content (to position below floats) */
#mb_midpage {
   clear: both;
}
   
/* Global navigation sidebar */
#mb_globalnav {
   width: 100px;
   float: left;
   font-family: "Helvetica", "Arial", sans-serif;
   margin-right: 5px;
   margin-bottom: 5px;
   background-color: #91BD8F; /* from colourlovers.com, "Back When" */
}

#mb_globalnav ul {
   margin-left: 0;
   margin-top: 0;
   padding-left: 2px;
   padding-top: 1em;
}

#mb_globalnav li {
   list-style-type: none;
   margin-left: 1px;
   padding-bottom: 1em;
}

#mb_globalnav a {
   text-decoration: none;
   display: list-item;
}

#mb_globalnav a:link {
   color: teal;
}

#mb_globalnav a:visited {
   color: gray;
}

#mb_globalnav a:hover {
   font-weight: bold;
}


/* Content window */
#mb_content {
   float: right;
   width: 695px;
   overflow: auto;
}

#mb_content h2 {
   margin-left: 10px;
   margin-top: 0;
   margin-bottom: 1ex;
}

#mb_content h3 {
   margin-left: 10px;
   margin-top: 0.3ex;
   margin-bottom: 0.3ex;
}

#mb_content form.multiline {
   margin: 2px;
   padding: 2px;
   border: thin gray dotted;
}


/* Footer */
#mb_footer {
   clear: both;

   background-color: #5F6163; /* from colourlovers.com, "model schmodels" */
   margin: 0;
   padding: 0;
   font-family: "Helvetica", "Arial", sans-serif;
   font-size: small;
   min-height: 4em;
   height: auto;
}

#mb_footer a {
   color: black;           /* should be inherit */
   text-decoration: none;  /* should be inherit */
}

#mb_leftfoot {
   background-color: #5F6163; /* from colourlovers.com, "model schmodels" */
   width: 80%;
   text-align: left;
   margin-right: 0;
   margin-top: 1.3em;
   margin-bottom: 0;
   padding: 0;
   float: left;
}

#mb_leftfoot a {
   border: 1px black solid;
   margin-left: 1em;
   padding: 1px;
   font-weight: 600; /* between normal (400) and bold (700) */
}

#mb_rightfoot {
   background-color: #5F6163; /* from colourlovers.com, "model schmodels" */
   width: 15%;
   text-align: right;
   margin-top: 0.8em;
   margin-bottom: 0;
   padding: 0;
   float: right;
}

#mb_rightfoot ul {
   margin: 0;
   padding-left: 0;
   padding-top: 0;
   padding-bottom: 0;
   padding-right: 1em;
}

#mb_rightfoot li {
   list-style-type: none;
}



/***
The browselist table displays entries as a series of single-column rows,
with alternating background colors. Browselist anchors are not decorated,
as the content of the entire row is an anchor to the detailed view.
The table is borderless; whitespace is used for visual separation.
***/

table.browselist {
   table-layout: fixed;
   border: none;
   border-collapse: collapse;
   width: 695px;
   text-align: left;
}

/* A narrower version for view examples in views.html */
.viewexample table.browselist {
   width: 500px;
}

table.browselist tr {
   border: none;
   margin-left: 2px;
   margin-right: 2px;
}

table.browselist a {
   color: black;
   text-decoration: none;
}

table.browselist td.odd {
   border: none;
   padding-bottom: 1em;
   padding-left: 5ex;
   text-indent: -5ex;
   background: #c9d3c9; /* lighter, less-saturated version of "Back When" */
}

table.browselist td.even {
   border: none;
   padding-bottom: 1em;
   padding-left: 5ex;
   text-indent: -5ex;
   background: #dadfc5; /* lighter, less-saturated version of "Son of Sage" */
}


/***
The entrydetail table displays a single entry in detailed form, with
each field and its label on a row.
***/

table.entrydetail {
   border: none;
   border-collapse: collapse;
   width: 695px;
   text-align: left;
}

.viewexample table.entrydetail {
   width: 500px;
}

table.entrydetail tr {
   border-bottom: thin gray solid;
}

table.entrydetail caption {
   font-weight: bold;
   font-family: "Helvetica", "Arial", sans-serif;
}

table.entrydetail td.label {
   font-weight: bold;
   width: 40%;
}


/***
The mb_comment class formats a comment for an entry. div.mb_comment includes
"!important" rules to override the "body.mb div" rules. (TODO: this shouldn't
be necessary, I think. Find the problem.)
***/

div.mb_comment {
   padding: 2px !important;
   margin: 4px !important;
   border: 1px black solid !important;
   background-color: yellow !important;
}

div.mb_comment * {
   background-color: yellow !important;
}

div.mb_comment p {
   margin: 0;
   padding: 0;
}

div.cm_author {
   font-style: italic;
   font-size: small;
   font-weight: bold;
   float: left;
   width: 50%;
}

div.cm_date {
   font-style: italic;
   font-size: small;
   float: right;
   text-align: right;
   width: 40%;
}
   


/***
Classes used in input forms
***/

span.formlabel {
   font-weight: bold;
}

p.formfield {
   margin-top: 1em;
}

span.formdesc {
   display: block;
   clear: both;
   font-style: italic;
}


/***
The "formbuttons" class and its descendants are used in two different ways.
On pages like Add and Edit, there's one form and input elements of class
leftbutton and rightbutton. On the View page, there are two forms (because
there are two actions, Edit and Comment), of class leftbutton and rightbutton.
So sometimes leftbutton applies to an input element, and sometimes to a
form element (and ditto for rightbutton).
***/

div.formbuttons {
   border: none !important;
}

div.formbuttons form {
   border: none !important;
}

div.formbuttons input {
   display: inline;
   clear: none;
   width: 20%;
   margin-top: 1ex;
   margin-bottom: 2px;
}

div.formbuttons .leftbutton {
   float: left;
   padding-left: 0 !important;
   margin-left: 0 !important;
}

div.formbuttons .rightbutton {
   float: right;
   padding-right: 0 !important;
   margin-right: 0 !important;
}



/***
Classes used for special text, eg error messages.
***/

div.mb_error {
   border: 2px red solid !important;
   margin: 4px;
   padding: 4px;
}

div.mb_error p {
   color: red;
   font-weight: bold;
   font-family: "Helvetica", "Arial", sans-serif;
   margin: 1em;
}