@charset "utf-8";
/*************************************************************************************************************************************
 * Smarter Lunchrooms 
 * Elastic Style Sheet
	-by Erin Smith (eas78), 4.22.10
 *************************************************************************************************************************************/

* { margin:0;}

html { height: 100%; } /*height:100% required for sticky footer--don't change*/

body {
	font: 63.125% Verdana, Arial, Helvetica, sans-serif; /*changing font 63.125% will alter the size of all of the divs within the page and everything within them--don't change*/
	background: url(../images/wood.jpg) repeat; /*the gray page background visable on the sides of the page*/
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000; /*font color*/
	height:100%; /*required for sticky footer--don't change*/
}

#container { /*the main div which contains all other divs*/
	width: 104em;
	height: 67.5em;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border-width:0 1px;
	background:url(../images/tray-open.png) no-repeat;
	padding-bottom:2.5em; /*required for sticky footer. Adds padding to the bottom of the page so that on every browser, no matter the length of the content within the page, the footer can be placed within this padding at the bottom of the page with a negative margin. Only change if you change the height of the footer.*/
	position:relative;
	text-align: left; /* this overrides the text-align: center on the body element. */
}

*html #container { /* *html is a special hack for internet explorer*/
	padding-bottom:2.5em; /*required for sticky footer--don't change*/
}

#skipnav { /*used for accessability.  Screenreaders offer people the option of skipping to the maincontent of the page.  Placed offscreen so that it is not visable but screenreaders pick it up*/
	position: absolute;
	top: -1000em;
	left: -1000em;
	}
/*-------------------------------------------------------------------------------------------

		Header

-------------------------------------------------------------------------------------------*/

#header {
	position:relative;
	width:110em;
	margin:1em auto 0 auto;
	padding: 0;  /* this padding matches the left alignment of the elements in the divs that 
	appear beneath it. If an image is used in the #header instead of text, you may want to remove 
	the padding. */
} 

#header p {
	font-family: Arial, Helvetica, sans-serif;
	text-align:center;
	font-size:3.3em;
	padding:1.5em auto .5em auto;
	margin:0;
	color:#ff9a62;
	font-weight:bold;
}

#header a img {color:#ff9a62; text-decoration:none; border:none;}

/*-------------------------------------------------------------------------------------------

		Side Navigation

-------------------------------------------------------------------------------------------*/

#sidenav {
	float: left;
	width: 10.35em; /* since this element is floated, a width must be given */
	padding:0; /* top and bottom padding create visual space within this div */
	float:left;
	background: ;
	border: none;
	margin-right:3em;
	margin-left:4.1em;
	margin-top:4em;
	z-index: 1; /* z-index 1 keeps sidenav underneath main navigation div */
	font-family: Arial, Helvetica, sans-serif;
}

#sidenav ul {list-style-type:none; padding:1em 0;}

#sidenav ul li {display:block; padding: 1em .2em ;  list-style-type:none; background:url(../images/greybrdr.gif) bottom center no-repeat; }

#sidenav li.na {font-size:1.2em; color:#494e69;}

#sidenav li.sub {padding: .3em .3em .3em 2.4em;}

#sidenav li a {
	text-decoration:none;
	display: block;
	color:#006633;
	font-size:1.55em;
	text-align:center;
	padding:.2em 0;
	font-weight:bold;
}

#sidenav ul li:hover  {background:#006633; color:#FFE43F; display:block; font-weight: bold;}
#sidenav ul li:hover a {color:#FFE43F;}
#sidenav ul li a:hover {color:#FFE43F;}

#category { 
	margin:0;
	width:auto;
	padding:.5em 1em .5em 1.3em;
	border-bottom:#494e69 1px solid;
	background: background:url(../images/forkt.gif) no-repeat top;
	font-size:1.1em;
}
#sidenav #category a {color:#ffffff; font-weight:bold; text-decoration:none;}

/*-----------------------------------------------------------------------------------------*/

/*-------#pagebody controls the page width and position when sidenav is used--------*/

#pagebody {width:73em; float:left; padding:1.5em 1em 0 1em; margin-left:4em;}/*Don't Change unless you change #sidenav width*/

#scroll {overflow:auto; height:54em;}
/*-------------------------------------------------------------------------------------------

		MainContent & Text Styling

-------------------------------------------------------------------------------------------*/

#mainContent {
	padding: 3em 20px 0 20px; /* remember that padding is the space inside the div box and margin 
	is the space outside the div box */
	float:left;
	margin:0;
	clear:left;
} 

/*#mainContent p, #mainContent a {
	font-size:1.2em;
	line-height:1.35em;
}*/
#mainContent p {
	font-size:1.2em;
	line-height:1.35em;
}
#mainContent a {
	font-size:1em;
	color: #494e69;
}
#pagebody ul {font-size:1.1em; padding-left:3.3em;}
#pagebody ul li {padding:2px 0; color:#333333; list-style-type:square;}
.lbox {
	float:left;
	width:38em;
	height:30em;
	margin: 0;
	padding:2em 0 3em 1em;
}
.mbox {
	float:left;
	width:22.5em;
	height:30em;
	margin-left:9em;
	padding:3em 0 2em .5em;
}
.sbox {
	float:left;
	width:16.5em;
	height:25em;
	margin: 1.5em 11em 0 0em;
	padding:0 .5em ;
	text-align:center
}

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
	margin-right:1em;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

#mainContent a img, #mainContent a, #mainContent img a, #footer a img {border:0px; text-decoration:none;}

.quote {/*3/12/2009*/
	font-style:italic; 
	margin:0px 0 0px 0px;
	background-color:#f5f3f3;
	padding: .5em .5em .5em .5em;
	}
/*------------Text Style------------*/

h1 {
	font-size:2.2em;
	font-weight:bold;
	padding:.2em 0;
	color:#006633;
	margin:.5em 0 1em 0;
	border-top: 2px solid #cccccc;
	border-bottom: 2px solid #cccccc;
	text-align:center;
	width:33em;
}

h2, h2 a {
	font-size:2.2em;
	font-weight:bold;
	padding:.2em 0;
	margin-left:0;
	color:#494e69;
	text-align:center;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	}

h3 {
	margin-left: .8em;
	font-size: 1.3em;
	line-height: 1.5em;
	color:#006633;
	text-align:center;
	}

h4 {
	margin: 10px 0 3px .5em;
	font-size: 1.3em;
	font-weight: bold;
	color:#494e69;
}

h5 {
	font-size:1em; 
	color: #666666;
	font-weight:100;
}

p {padding:.4em .5em;}

#mainContent .smb {color: #000000; font-size:.9em;}
#mainContent .sm {color: #333333; font-size:.9em; padding-left:1em; font-style:italic;}
#mainContent .psm {color:#666666; font-size:.9em; padding-left:1em; margin:-.5em 0; line-height:1.5em;}
#mainContent .faq {margin-left:.6em; padding:5px 0; margin-bottom:.5em; font-size:1.1em;}
#mainContent .gr {color:#333333; font-style:italic;}
#mainContent .grm {color: #333333; font-size:1.1em; padding-left:1em;}

#mainContent .boxrt {float:right; width:auto; margin-top:-.5em; margin-right:1em; background:#006633; color:#cccccc; border: 2px solid #494e69; border-radius: 8px; /* CSS3 rounded corners */ -moz-border-radius: 8px; /* Mozilla rounded corners */}
#mainContent .boxrt ul {position:absolute; left:-999em;}
#mainContent .boxrt:hover ul {left:78em; width:20em; margin-top:.5em; background:#EFF0F4; color:#494e69; border: 2px solid #494e69; font-size:1em; padding:0 .5em; border-radius: 8px; /* CSS3 rounded corners */ -moz-border-radius: 8px; /* Mozilla rounded corners */}
#mainContent .boxrt:hover ul li {list-style-type:decimal; margin-left:1.9em;}
#mainContent ol li {font-size:1.1em; color:#006633; padding:3px 0; cursor:pointer;}
#mainContent ol li ul {position:absolute; left:-999em;}
#mainContent ol li:hover ul {left:65em; width:42em; margin-top:.5em; background:#006633; color:#cccccc; border: 2px solid #494e69; font-size:.7em; list-style-type:none; padding:0 .5em; border-radius: 8px; /* CSS3 rounded corners */ -moz-border-radius: 8px; /* Mozilla rounded corners */ }
#mainContent ol li:hover {font-weight:bold;}
#mainContent ol li ul li, #mainContent ol li:hover ul li {color:#cccccc; font-weight:100; line-height:1.3em;}

/*-------------------------------------------------------------------------------------------

		Footer

-------------------------------------------------------------------------------------------*/

#footer {
	position: relative;
	margin: -3em auto 0 auto;
	text-align:center;
	width:110em;
	height:auto;
	color:#494e69; 
	height:2em; 
	padding:6px 0 0 0;
	margin-bottom:2em;
}

* html #footer { margin: -2.1em auto 0 auto;}	 /* A CSS hack that only applies to IE -- specifies a different offset for the footer */

#footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the 
	possibility of margin collapse - a space between divs */
	padding:0; /* padding on this element will create space, just as the the margin would 
	have, without the margin collapse issue */
}

#footer a {color:#34633A;}


.xrounded h1, .zrounded h1 {
	margin:0; 
	font-size:1em; 
	padding:0 0px 3px 8px; 
	border-bottom:1px solid #B3BCC9;
	}
.xrounded p, .zrounded p {
	margin:0; 
	padding:5px 0; 
	font-size:10px;
	line-height:125%;
	}
.xrounded {
	background: transparent; 
	line-height:125%;
	}
.xtop, .xbottom {
	display:block; 
	background:transparent; 
	}

/* -------------------Rounded Corners for w/i page (2 colors .xba# and .xbb#)---------------------------------- */

.xba1, .xba2, .xba3, .xba4 {
	display:block; 
	overflow:hidden;
	}
.xba1, .xba2, .xba3 {
	height:1px;
	}
.xba2, .xba3, .xba4 {
	background:#00662b;  /* change this for color of main part of box */
	border-left:1px solid #003300;
	border-right:1px solid #003300;
	}
.xba1 {
	margin:0 5px; 
	background: #003300;
	}
.xba2 {
	margin:0 3px;
	border-width:0 2px;
	}
.xba3 {
	margin:0 2px;
	}
.xba4 {
	height:2px; 
	margin:0 1px;
}

.xboxcontent {
	display:block; 
	border:1px solid #494e69; 
	border-width:0 1px; 
	height:auto;
	background:#00662b; /*change this for color of main part of box */
	color: #494e69;
	}
	
	.xboxcontent h2 {font-size:1.2em; color: #494e69; font-weight:bold;}


div.xboxcontent p, div .xboxcontentb p, div .xboxcontentc p {
	padding: 3px 4px 0 8px;
	}

* html .xboxcontent, * html .xboxcontentb, * html .xboxcontentc {
	height:1px;
	}

.xboxcontent a, .xboxcontentb a, , .xboxcontentc a{
	color: #0000ff;
	text-decoration:none;
	}

.color_a {
	background: #E1EDFD; /* Change the top part color here*/
	color:#4A607D;
	overflow:hidden;
	}
-->