@charset "iso-8859-1";

/**
 * screen.css
 * 
 * This style sheet is based upon the skidoo 3 column layout:
 *
 *   http://webhost.bridgew.edu/etribou/layouts/skidoo_redux
 *
 * without the drop down menus and the right column removed.
 * The horizontal navigation bar and the margins have been removed, 
 * the colors have been changed, and the columns have been resized.
 *
 * Skidoo is a float-based layout utilizing negative margins
 * to provide column placement and cross-browser compatibility. 
 *
 * Most sizes are defined in em's to be flexible across multiple resoultions.
 * Some alignment hacks are defined in px's and left in the layout section.
 * All other hacks are in the hacks section.
 */

/*************
 *
 * Layout Section
 *
 * The theory behind this layout is fully explained at:
 *
 * http://webhost.bridgew.edu/etribou/layouts/skidoo_redux/css/skidoo_redux.css
 */

html, body
{
	height: 100%;	/* need to set the height on these two elements to 100%,
			   otherwise child elements such as #page_container, when
			   its height is set to 100%, will only go as height as
			   the needed to contain the content within the 
			   element */
}
body
{
    background-color: #fff;
    margin: 0;
    padding: 0;
}
#page_container
{
	min-width: 30em; /* limit how narrow the layout will
                    * shrink before horizontal scroll kicks in. */
	margin-left: 2em; /* set horizontal margins here instead of on the body  */
	margin-right: 4em; /* set horizontal margins here instead of on the body  */
    padding: 0;
	width: auto;
	min-height: 100%;
}
#outer_column_container
{
	border-left: solid 14em #fff;	/* left column's width and background
                    * color. Width should match #left_column width below. */
}
#inner_column_container
{
	width: 100%;		/* force this element to take the full width
                * between the left and right columns. this is
                * especially important as children of this
                * element will have width:100%; set, and how
                * that 100% value is interpreted depends on
                * the width of it's parent (this element). */
}
#left_column
{
	float: left;		/* float left, where it'll live */
	margin-left: -14em;	 /* the value here should
                * be the same value as the left border width
                * on #outer-column-container, but negative */
	width: 14em;		/* the value here should
                * be the same value as the left border width
                * on #outer_column_container */
	margin-right: 1px;	/* overlap the middle column to help with
                * clearing. see general notes above. */
	margin-top: 1em;
    padding: 0;
}
#left_column .inside
{
    padding: .5em;
    margin: .5em;
    overflow: hidden; /* IE6 and earlier hack to prevent overflow of image*/
}
#center_column
{
	float: right;		/* goes right of the left column since
                * the two share the same parent element */
	width: 100%;		/* make the middle column as wide as possible
                * for a fluid layout. this is not possible if it's parent element, 
                * #source_order_container, wasn't also at 100% width */
	margin-left: -1px;	/* make room for the left-column's overflap */
	margin-top: 2.5em;
}
#center_column .inside
{
	margin: 1em 1.5em;
}
.inside
{
	margin: 1em;			/* margin, instead of padding, used to 
                * induce margin collapse if needed by child elements */
}
#left_column .inside img
{
	width: 11em;
}
.shrink_to_fit  /* use for images*/
{
    max-width: 96%;
    height: auto;
    border: 0;
    margin: 0;
    padding: 0;
    display: inline;
}
.float_left_image /* div used for left floating images*/
{
    float: left;
    width: 20%;
    padding: 0 1em 0 0;
    text-align: center;
}
.float_left_image_med /* div used for left floating images*/
{
    float: left;
    width: 35%;
    padding: 0 1em 0 0;
    text-align: center;
}
.float_left_image_large /* div used for left floating images*/
{
    float: left;
    width: 50%;
    padding: 0 1em 0 0;
    text-align: center;
}
.float_right_image /* div used for right floating images*/
{
    float: right;
    width: 20%;
    padding: 0 0 0 1em;
    text-align: center;
}
.float_right_image_med /* div used for right floating images*/
{
    float: right;
    width: 35%;
    padding: 0 0 0 1em;
    text-align: center;
}
.float_right_image_large /* div used for right floating images*/
{
    float: right;
    width: 50%;
    padding: 0 0 0 1em;
    text-align: center;
}
table.thumbnail {
  table-layout: fixed;
  width: 100%;
  margin-bottom: 1.5em;
}

td.thumbnail {
  padding: .2ex;
  text-align: center;
  vertical-align: bottom;
}
td.caption {
  padding: .2ex;
  text-align: center;
  vertical-align: top;
}
.form 
{
    border-color: #000;    
    background-color: #DBFFFF; 
}
.form_error 
{
    border-color: #000;    
    background-color: #E6B3C9;
}


/***********
 *
 * Font Section
 *
 */

body
{
	font-family: sans-serif; /* by not specifying arial and helvetica, 
                    * the two most commonn defaults, users who have set 
                    * another default sans-serif font will get their preferred font 
                    * displayed instead. All others will get arial or helvetica anyway. */

	font-size: 110.1%;	/* font sizing hack recommended by Dave 
				   * Silvester on the css-discuss list. "the  .1 is important." */

	color: olive; /* default font color for entire page */
}
h1, h2, h3, h4, h5
{ 
    font-family: serif;
    font-style: italic;
    color: teal; 
    font-weight: bold;
}
h1.header
{ 
    font-size: 260.1%;
}
h2
{ 
    font-size: 160.1%;
}
ul, li
{
	color: olive;
}
#left_column .inside
{
    font-size: 75.1%;
}
.menu, .current_page
{
    font-weight: bold;
}
p.menu:first-line, p.current_page:first-line
{
    line-height: 120%;
}
.current_page
{
	color: teal;  /* highlight current page in menu */
}
a { 
    text-decoration: none; 
    font-weight: bold;
}
a:link 
{ 
    color: #936; 
} 
a:visited 
{ 
    color: #936; 
} 
a:hover 
{ 
    color: #fff;
    background-color: #936;
} 
a:active 
{ 
    color: #936; 
}
h1.header a:link 
{ 
    color: teal; 
} 
h1.header a:visited 
{ 
    color: teal; 
} 
h1.header a:hover 
{ 
    color: #fff;
    background-color: #936;
} 
h1.header a:active 
{ 
    color: teal; 
}
.caption
{
    font-size: 63.1%;
    text-align: center; 
    color: black; 
}
.footer
{
    font-size: 80.1%;
    color: teal; 
}
.menu_header
{
    color: olive; 
    font-style: italic;
}
.no_print
{
    font-size: 67.1%;
}
.quote
{ 
    color: teal; 
    font-style: italic;
}
.highlight
{ 
    color: teal; 
}

/*************
 *
 * Hacks Section
 *
 * The theory behind these hacks is fully explained at:
 *
 * http://webhost.bridgew.edu/etribou/layouts/skidoo_redux/css/skidoo_redux.css
 *
 * If you do not understand these hacks just leave them as they are. 
 * They are targeted for specific bugs in specific browsers. 
 * They are written so that most other browsers will ignore them.
 *
 * Some single pixel alignment hacks are in the layout section.
 */

.clear
{
	clear: both;

	/* hide from IE/Mac \*/
	padding-bottom: 1px;
	margin-bottom: -1px;		/* this padding/margin hack is here for
					   older Mozilla engines (Netscape 7, 6,
					   FireFox pre 2.0) which will not allow 
					   an element to clear unless it has some 
					   effect on how the rest of the layout 
					   renders (ie, it takes up space). 
					   Hidden from IE/Mac as it triggers a 
					   horizontal scrollbar. */
}
.hide
{
	/* hide old browser elements that CSS browsers shouldn't show */
	display: none;
}
* html #page_container
{
	/* \*/ height: 0.1%;	/* IE/Win 5 needs this to prevent rendering
				   issues if a minimum width is applied to
				   this element and the viewport is sized
				   narrower than it's minimum width. however
				   this breaks IE/Mac so a comment hack is
				   used to hide it. */
	position: relative;	/* IE/Mac 5.0 seems to need this. without it
				   any child element with position: relative
				   isn't rendered. */
}
* html #center_column, * html #left_column
{
	/* hide from IE/Mac \*/
	overflow: visible;	/* a bug through IE/Win 6 causes the widths of
				   text boxes to be calculated narrower than
				   they render, causing overflow of their parent
				   elements. we need to explicitly handle this
				   overflow. IE/Win 5.0 does not handle visible
				   overflow correctly and so on some layouts,
				   at some viewport widths you'll get a 
				   horizontal scroll bar. */
	/* hide from IE/Mac \*/
	position: relative;	/* this resolves rendering bugs in IE/Win.
				   without this the columns don't render on
				   screen or text jog. */
}
* html #center-column
{
	margin-right: -4px;	/* fix 3-pixel text jog in IE/Win 5.0.
				   -4px because we also have to
				   compensate for the overlaps from
				   the left and right columns */
	margin-right/* */: 0;	/* reset value on 5.5 and later using
				   comment hack to hide this rule from 5.0 */
}
* html #center-column .inside
{
	margin-right: 14px;		/* compensate for negative margin in
					   previous rule */
	margin-right/* */: 10px;	/* reset margins for 5.5 and later */
}
* html .inside
{
	margin: 10px 0.75em;	/* i don't yet understand this bug in IE 5.0
				   which forces the right column down if the
				   side margins are at a very specific value.
				   if your side column widths are set in EMs,
				   0.75em seems to work fine. */
	margin/* */: 10px;	/* reset for IE 5.5 and later */
}
* html #inner_column_container
{
	display: block;
}
#left_column
{
	position: relative;	/* resolve issues with links in left and right
				   columns not being clickable in Safari */
}