@charset "iso-8859-1";

/**
 * screen.css
 * 
 * This style sheet does not define any colors, and is designed to be
 * imported into a style sheet that does.
 *
 * This style sheet system is based upon the skidoo 3 column layout:
 *
 *   http://webhost.bridgew.edu/etribou/layouts/skidoo_redux
 *
 * Skidoo is a three-column, 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.
 */

/*************
 *
 * Layout Section
 *
 * The theory behind this layout is fully explained at:
 *
 * http://webhost.bridgew.edu/etribou/layouts/skidoo_redux/css/skidoo_redux.css
 * and
 * http://webhost.bridgew.edu/etribou/layouts/Tank!/css/tank.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
{
    margin: 0;
    padding: 0;
}
#page_container
{
	min-width: 35em; /* limit how narrow the layout will
                    * shrink before horizontal scroll kicks in. */
	margin: 0 1em 0 1em; /* set horizontal margins here instead of on the body  */
    padding: 0;
	width: auto;
	min-height: 100%;
}
#outer_header_container
{
	border-left: solid 12em;	/* left column's width 
                    * Should match #left_column width below. */
    margin-right: 0;

}
#inner_header_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_center_header_container
{
	float: left;		/* float left so the right column, which is
				   outside this element, has a place to go. */
	width: 100%;		/* force this to go as wide as possible */
	margin-right: -1px;	/* make room for the right-column's overlap */
}
#left_header
{
	float: left;		/* float left, where it'll live */
	margin-left: -12em;	 /* the value here should
                * be the same value as the left border width
                * on #outer-column-container, but negative */
	width: 12em;		/* 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. */
    padding: 0;
}

#left_header .inside
{
    text-align: center;
	margin-right: .5em; /* This setting acts like the padding. */
	margin-top: 3em;
}
#scales
{
    width: 50%;
}
#center_header
{
	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 
                *wasn't also at 100% width */
	margin-left: -1px;	/* make room for the left-column's overflap */
}
#center_header .inside
{
    margin: 2em 0 0 1.5em;
    padding: 0;
 	border-bottom: .17em solid ;
}
#right_header
{
	margin-left: 1px;	/* overlap the middle column */
    padding: 0;
}
#outer_column_container
{
	border-left: solid 12em;	/* left column's width
                    * Width should match #left_column width below. */
	border-right: solid 9em;	/* left column's width 
                    * Width should match #right_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). */
}
#source_order_container
{
	float: left;		/* float left so the right column, which is
				   outside this element, has a place to go. */
	width: 100%;		/* force this to go as wide as possible */
	margin-right: -1px;	/* make room for the right-column's overlap */
}
#left_column
{
	float: left;		/* float left, where it'll live */
	margin-left: -12em;	 /* the value here should
                * be the same value as the left border width
                * on #outer-column-container, but negative */
	width: 12em;		/* 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
{
	margin-right: .5em; /* This setting acts like the padding. */
}
#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 */
}
#center_column .inside
{
	margin-left: 1.5em;
}
.slideshow_image
{
    text-align: center;
}
#right_column
{
	float: right;		/* float on the right side of the layout */
	margin-right: -9em;	/* the value here should
                * be the same value as the right border width
                * on #outer_column_container, but negative */
	width: 9em;		/* should be the
                * same width as the right border width on
                * #outer_column_container */
	margin-left: 1px;	/* overlap the middle column */
	margin-top: 4.6em;
    padding: 0;
}
#right_column .inside
{
	margin: .1em .5em;
}
.inside
{
	margin: 1em;			/* margin, instead of padding, used to 
                * induce margin collapse if needed by child elements */
}
#footer
{
	margin: 1em 10.5em 1em 13.5em; /* positions footer under #center_column */
	border-top: .17em solid;
	padding: 1em;
}
.shrink_to_fit /* makes images not overflow */
{
    max-width: 96%;
    height: auto;
    border: 0;
    margin: 0;
    padding: 0;
}
.shrink_to_66 /* makes images not overflow */
{
    max-width: 66%;
    height: auto;
    border: 0;
    margin: 0;
    padding: 0;
}
.shrink_to_50 /* makes images not overflow */
{
    max-width: 50%;
    height: auto;
    border: 0;
    margin: 0;
    padding: 0;
}
.slideshow_image .shrink_to_fit /* makes images not overflow */
{
    width: auto;
    height: 40%;
    max-width: 90%;
    border: solid 1px black;
    margin: 1em;
    padding: 0;
}
.float_left_image /* div used for left floating images*/
{
    float: left;
    width: 20%;
    padding: 0 1em 1em 0;
}
.float_left_image_med /* div used for left floating images*/
{
    float: left;
    width: 35%;
    padding: 0 1em 1em 0;
}
.float_left_image_large /* div used for left floating images*/
{
    float: left;
    width: 50%;
    padding: 0 1em 1em 0;
}
.float_right_image /* div used for right floating images*/
{
    float: right;
    width: 20%;
    padding: 0 0 1em 1em;
}
.float_right_image_med /* div used for right floating images*/
{
    float: right;
    width: 35%;
    padding: 0 0 1em 1em;
}
.float_right_image_large /* div used for right floating images*/
{
    float: right;
    width: 50%;
    padding: 0 0 1em 1em;
}.form 
{
    border: solid 1px;    
}
.form_error 
{
    border: solid 1px;    
    padding: .2em .3em; 
}

/***********
 *
 * 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." */

}
#center_header .inside
{
	font-size: 110.1%;
}
#left_column .inside
{
	margin-right: .5em; /* This setting acts like the padding. */
	font-size: 80.1%;
}
.menu, .current_page
{
    font-size: 70.1%;
}
.title
{
    font-weight: bold;
}
.subtitle
{
    font-size: 90.1%;
}
p.menu:first-line, p.current_page:first-line
{
    line-height: 90%;
}
a { 
    text-decoration: none; 
    font-weight: bold;
}
a.anchor 
{ 
    text-decoration: none; 
    font-weight: normal;
}
h1, h2, h3, h4, h5, h6
{
	text-align: left;
}
#footer
{
	text-align: center;
}
.slideshow_caption
{
    font-style: italic;
}
.slideshow_footer
{
   	font-size: 80.1%;
}
.faq 
{ 
    font-weight: bold; 
}
.news_date
{
   	font-size: 80.1%;
}
.testimonial_quote
{
   	font-size: 100.1%;
}
.testimonial_author
{
   	font-size: 80.1%;
}

/*************
 *
 * 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 allignment 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 !important;
}
* 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, * html #right_column,
* html #source_order_container
{
	/* 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 #middle-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 #middle-column .inside
{
	margin-right: 14px;		/* compensate for negative margin in
					   previous rule */
	margin-right/* */: 10px;	/* reset margins for 5.5 and later */
}
* html #header, * html #footer
{
	/* hide from IE/Mac \*/
	height: 0.1%;		/* this is to fix an IE 5.0 bug. setting this
				   value forces these elements to contain their
				   child elements, meaning margins will no
				   longer collapse. */
	height/**/: auto;	/* reset for IE/Win 5.5 and later by hiding
				   this rule from 5.0 with the empty comment
				   hack. also hidden from IE/Mac for the same
				   reason. */
}
* html #header .inside, * html #footer .inside
{
	margin-top: 0;
	margin-bottom: 0;	/* since margins no longer collapse due to 
				   previous rules we remove vertical margins
				   from the .inside class */
	margin/* */: 10px;	/* reset for IE 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 */
}
.inside
{
    overflow: hidden; /* IE6 and earlier hack to prevent overflow of images*/
}
* html #inner_column_container 
{
	display: block;
}
* html #source_order_container
{
	margin-right: -100%;	/* IE/Mac will force #source-order-container
				   to the width of #left-column, even though
				   that element is no longer inside it. this
				   negative margin will help IE/Mac keep the
				   three columns together under narrower 
				   viewports than normal.
	/* \*/ margin-right: -1px; /* reset the above hack for IE/Win */
}
#left_column, #right_column
{
	position: relative;	/* resolve issues with links in left and right
				   columns not being clickable in Safari */
}