@charset "UTF-8";
 
/*******************************************************************************
*  skidoo_redux.css : 2008.09.30 : ruthsarian@gmail.com
* -----------------------------------------------------------------------------
*  Three-column, float-based layout utilizing negative margins to 
*  provide column placement and cross-browser compatibility. 
/*******************************************************************************
 * BASIC LAYOUT MECHANICS
 *
 *   - yes, that's a lot of DIVs for a three-column layout. there is a reason
 *     it all. first, all the columns must be floated to prevent a 3-pixel text
 *     jog (a bug) that IE/Win 6 and earlier have. I can't use CSS hacks around
 *     this one and need the extra markup. But using all floats can have
 *     positive consequences, especially when using floated elements that need
 *     to be cleared, but without clearing the other columns of the layout.
 *   - NEGATIVE MARGINS is an approach to the three-column CSS layout that seems
 *     to have the most compatibility and potential. the real strength of this
 *     idea is to have the ability to provide different colors (or images) as
 *     the background for each column. traditional three-column layouts can't
 *     do this because the columns are only as tall as needed to fit their
 *     content. in other words they don't run the full height of the layout.
 *     negative margins gives us a means to fake this functionality. borders
 *     (or padding, or margins) applied on #outer-column-container reserve the
 *     space where the left and right columns will live. all three columns are
 *     floated. since the columns are cleared inside #inner-column-container,
 *     #inner-column-container (and #outer-column-container) will be as tall as
 *     the tallest of the three columns. this means the borders will also be 
 *     this tall, giving the visual appearance that all three columns are the
 *     same height. 
 *
 * #page-container
 *   - wraps the entire page. use this to set min/max widths and set any margins
 *     or border that wraps the whole layout.
 *
 * #outer-column-container
 *   - reserves space for the left and right columns. using borders allows you
 *     to use the border color to act as the background color for the left and
 *     right columns. background color could then act as the background of the
 *     middle column.
 *
 * #inner-column-container
 *   - provides the single-pixel black border between the middle column and
 *     its outside brothers.
 *
 * #source-order-container
 *   - source ordered layouts place the main content at the top of the page. to
 *     do this with CSS in a three-column layout you need to wrap two of the
 *     three columns in an element (DIV) to float them together as if it was a
 *     a single column.
 *   - this element contains both the #middle-column and #left-column elements.
 *
 * #middle-column, #left-column, #right-column
 *   - containers for the each of the three columns in the layout
 *
 * #footer
 *   - bottom of your webpage. a place to put copyright and contact information
 *
 * .clear-columns
 *   - this class is assigned to an empty div placed after the last (floating)
 *     column inside a block that contains two or more floating columns. it 
 *     clears the floats, forcing the element containing the columns to 
 *     visually contain all of its columns. there are alternative approaches
 *     to clearing which do not require this extra markup (see
 *     http://www.positioniseverything.net/easyclearing.html) however I find
 *     this method is much more effective and compatible for the task at hand.
 *     also, it should be evident by now that markup bloat is not a concern
 *     with this particular layout. 
 */
.clear-columns{
	clear: both;
}
#outer-column-container{
	border-left: solid 200px #fff;	/* left column's width and background color */
	border-right: solid 150px #fff;	/* right column's width and background color */
}
#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 */
}
#left-column{
	float: left;		/* float left, where it'll live */
	margin-left: -200px;	/* move it further left. the value here should
						   be the same value as the left border width
						   on #outer-column-container, but negative */
	width: 200px;		/* need to set a definite width, should be the
						   same width as the left border width on
						   #outer-column-container */
}
#middle-column{
	float: right;		/* middle column 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 */
}
#right-column{
	float: right;			/* float on the right side of the layout */
	margin-right: -150px;	/* move it further right. the value here should
							   be the same value as the right border width on #outer-column-container, but negative */
	width: 150px;			/* need to set a definite width, should be the same width 
							as the right border width on #outer-column-container */
}

/*******************************************************************************
 * BASE THEME
 * Setup basic styling for the layout. This will set gutterspace and generate a
 * basic border structure for the layout. 
 */
body{
	background-color: #dbdfec;
	background-image:url(http://www.plymouth.edu/dining/temp/images/pagebg.gif);
	background-repeat:repeat-x;
	background-position:top left;
	color: #000;
	padding: 0;		/* padding on the body element when javascript min-width is in use will
					   create problems in IE/Win 6. */
	margin: 20px 0;	/* horizontal margins belong on #page-container. vertical margins
					   are not there as well due to small rendering issues in IE/Win 5 when
					   viewport is shorter than webpage */
}
#page-container{
	background-color: #fff;	/* background for the middle column */
	border: solid 1px #fff;	/* border around the entire layout, color assigned in _theme.css */
	min-width: 50em;		/* limit how narrow the layout will
							   shrink before it stops. */
	margin: 0 20px;			/* horizontal margins here instead of on 
							   the body because we're setting min-width on this element. 
							   if margins set on body users will see an odd skip in 
							   the layout's rendering as it's resized below min-width.
							   (JS-based min-width only.) */

/* Fixed Width Layout NOTE: disable min-width javascript */
 	width: 900px;		
	margin-left: auto;		
	margin-right: auto;
/* */

}
#masthead{
	border-bottom: solid 1px #fff;	/* three of the four sides of this block will already have borders courtesy of
									   the #page-container element so we only need to render the bottom.
									   color assigned in _theme.css */
/*	padding-top: 1px;				 prevent margin collapse. would need 1px
									   bottom padding too if we didn't have the 1px bottom border. */
}
#inner-column-container{
	border: solid 1px #fff;			/* color assigned in _theme.css */
	border-width: 0 1px;
	margin: 0 -1px;					/* compensate for the borders because of
							   		100% width declaration */
}

#footer{
	border-top: solid 1px #00CC00;	/* same situation as the masthead but this time we're rendering the top border. */
	padding-bottom: 1px;		/* prevent margin collapse. would need a top
								   padding of 1px too if we didn't have that 1px border. */
}
.inside{
	margin: 10px;			/* margin, instead of padding, used to induce margin collapse if needed by child elements */
}

/*******************************************************************************
 * HACKS  */
.clear-columns{
	padding-bottom: 1px;	/* hide from IE/Mac \*/
	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. */
}
* html #page-container{
	/* hide from IE/Mac \*/
	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 #middle-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 #masthead, 
* 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 #masthead .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 */
}
* 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 */
}

/*******************************************************************************
 * OVERSIZED SYSTEM FONT HACK
 *
 * Windows machines can have their screen DPI altered among other features 
 * to provide accessibility to those with vision impairments. One relatively
 * obscure feature increases font sizes in such a way that rounding errors
 * in calculating font sizes are triggered in IE. The result is floating boxes
 * start dropping or become misaligned. The fix is a negative 1 pixel margin 
 * to certain floated elements to resolve the issue. Below is a set of a rules
 * that targets this issue for all versions of IE up through IE7.
 */
*:first-child+html #middle-column {
	margin-right: -1px;
}
*:first-child+html #source-order-container {
	margin-left: -1px;
}
* html #middle-column {
	margin-right: -1px;
}
* html #source-order-container {
	margin-left: -1px;
}

/*******************************************************************************
 * OVERLAP HACK
 *
 * Some browsers, most notably older versions of Gecko (Netscape 7, FF 1.5
 * & earlier) have a problem with the negative margin approach used in this 
 * layout: the two side columns won't be cleared if they exist entirely outside 
 * the space of the parent element (#inner-column-container) where we clear the 
 * three columns. So they need to be made to overlap the area of the middle 
 * column by at least 1 pixels. This is why the outer columns have a 1 pixel 
 * margin on their inner edge and the middle column (and source-order-container)
 * have negative margins (to make room for the 1px margin from the outer
 * columns).
 *
 * 
 */
#source-order-container
{
	margin-right: -1px;	/* make room for the right-column's overlap. */
}
#left-column
{
	margin-right: 1px;	/* overlap the middle column to help with
						   clearing. see general notes above. */
}
#middle-column
{
	margin-left: -1px;	/* make room for the left-column's overflap */
}
#right-column
{
	margin-left: 1px;	/* overlap the middle column */
}
* html #left-column,
* html #source-order-container
{
	margin-right: 0;	/* undo the overlap for IE */
}
* html #right-column,
* html #middle-column
{
	margin-left: 0;		/* undo the overlap for IE */
}
*:first-child+html #left-column,
*:first-child+html #source-order-container
{
	margin-right: 0;	/* undo the overlap for IE */
}
*:first-child+html #right-column,
*:first-child+html #middle-column
{
	margin-left: 0;		/* undo the overlap for IE */
}

/*******************************************************************************
*  sets margins and padding on generic HTML elements so that every browsers has 
*  the same values rather than relying on the default values which vary between browsers
*******************************************************************************/

ul, ol, dl, p, h1, h2, h3, h4, h5, h6{
	margin-top: 10px;
	margin-bottom: 10px;
	padding-top: 0;
	padding-bottom: 0;
}
ul ul, ul ol, ol ul, ol ol{
	margin-top: 0; /* kill margins on sub-lists */
	margin-bottom: 0;
}
ul li, ul ul li, ol li, ol ul li  { 
	margin-top: 5px; 
} 
h1{
	font-size: 240%;
}
h2, .h2span, h3{
	/* font-size: 180%; */
	font-family:georgia, times new roman, serif;
	font-size: 16pt;
	color:#860038
}
.h2span {
	font-size: 13pt;
}
h3{
	/* font-size: 140%; */
	margin-top: 25px;
	font-size: 11pt;
}
h4{
	font-size: 100%;
}
h5{
	font-size: 70%;
}
h6{
	font-size: 50%;
}
a, a:link, a:visited, a:active, a:hover{
	text-decoration: underline;
	color: #253b80;
}
a:hover{
	text-decoration: none;
}
a img{
	border-width: 0px;
}
label{
	cursor: pointer;
}
table{
	font-size: 100%;
}
td, th{
	vertical-align: top;
}
body{
	font-size: 100.1%;
}

/*******************************************************************************
*  navigation/menu system based on unordered lists
*******************************************************************************/

ul.rMenu, ul.rMenu li, ul.rMenu li a{
	display: block;	/* make these objects blocks so they're easier to deal with */
	margin: 0;
	padding: 0;		/* get rid of padding/margin values that these elements may have by default */
}
ul.rMenu{
	list-style: none;
	margin-bottom: 20px;	
}
* html ul.rMenu{
	display: inline-block;	/* this is for IE/Mac. it forces IE/Mac to expand the element's dimensions to contain 
							   its floating child elements without a clearing element. */
	/* \*/ display: block;	/* override above rule for every other browser using IE/Mac backslash hack */
	position: relative;		/* IE 5.0/Mac needs this or it may clip the dropdown menus */
	/* \*/ position: static;/* reset position attribute for IE/Win as it causes z-index problems */
}
ul.rMenu li a{
	border-bottom:1px dashed #860038;
	padding: 7px 2px;
}
ul.rMenu li a{
	position: relative;	/* trigger hasLayout for IE on anchor elements. without hasLayout on anchors
						   they would not expand the full width of the menu. this rule may not trigger
						   hasLayour in later versions of IE and if you find this system broken in new
						   versions of IE, this is probably the source. */
	min-width: 0;		/* triggers hasLayout for IE 7 */
}
ul.rMenu li a:link, ul.rMenu li a:hover, ul.rMenu li a:visited, ul.rMenu li a:active{
	text-decoration: none;
	color: #860038;
	font-weight:bold

}
ul.rMenu li a:hover{
	color: #253b80;
}
/******************************************************************************/