@charset "UTF-8";
body  {
	font:100% Georgia, "Times New Roman", Times, serif;
	font-size:14px;
	background: #666666;
	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 */
	background-image:url(images/BG.jpg);
	
}
/*contains all*/
#container { 
	width: 800px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #58AAc0;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	background-image:url(images/Mexicali-Blue-Web-Flower.jpg);
	background-repeat:no-repeat;
	background-position:bottom;
	padding:0;
} 

/*HEADER BEGINS*/
/*top header contains the logo and info*/
#header { 
	margin:0;
	padding:10px 0 0 0;

} 

/*contains the info for mexicali*/
#headerRight{
	float: right;
	width: 200px; 
	padding: 0px 10px;
	margin:0;
	}

/*contians the logo*/	
#headerLeft {
	margin: 0 250px 0 0; 
	padding: 0 20px 50px 20px; 
	}

/*positions the logo*/	
#headerLogo {
	width:200px;
	margin: 0px 0 0 260px;
	/*background-color:#33FF33;*/
	text-align:center;
	padding:10px 0 0 0;
	}
	
#headerLogo img {
	margin: 0 20px 5px 0;}
/*HEADER ENDS*/

	
/*NAVIGATION BEGINS*/
#navlist
{
/*background:#33FF33;*/
	margin: 0;
	padding: 0 0 20px 40px;
	border-bottom: 1px solid #7BCED1;
}

#navlist ul, #navlist li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#navlist a:link, #navlist a:visited
{
float: left;
line-height: 14px;
font-weight: normal;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #FFF;
}

#navlist a:link#current, #navlist a:visited#current, #navlist a:hover
{
border-bottom: 4px solid #7BCED1;
padding-bottom: 2px;
background: transparent;
color: #FFF;
}

#navlist a:hover { color: #FFF; 
}
/*NAVGITION ENDS*/

/*MAIN CONTENT BEGINS*/	
/*wraps the content and sidebar*/	
#introContain {
	/*border: 1px solid #7BCED1;*/
	margin:0;
	padding:10px 0 0 0;
	}
/*header background*/	
#introContain2 {
	/*border-bottom: 1px solid #7BCED1;*/
	margin:0;
	padding:0;
	background-image:url(images/headerBG.jpg); 
	background-repeat:repeat-x;
/*	background:#CC0099;*/
	}

/*sidebar right*/	
#sidebar {
	float: right;
	width: 200px; 
	padding: 0px 10px;
	margin:0;
	}

/*first paragraph for specials*/	
#introContent { 
	/*background:#CCFF33;*/
	margin: 0 250px 0 0; 
	padding: 0 20px 40px 20px; 
	
} 

/*daily special header with ornament*/
#dailySpecial {
	float:left;
/*	background-image:url(images/button.png);*/
	background-repeat:no-repeat;
	padding:0 20px 10px 0;
	margin:0;}
	
/*positions the ornament below dailyspecials*/	
#introContent img {	
	padding:0 0 0 30px;
}

/*main content holds the table for the menu*/	
#mainContent { 
	/*background:#CCFF33;*/
	margin: 0 0px 0 5px; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0 0 0 0px; 
} 

/*headline below logo*/
h1 {
	font-weight:normal;
	color:#FFFFFF;
	font-size:14px;
	padding:0px;
	margin:0px;
	}
	
/*info in the header*/	
h2{
	font-weight:normal;
	color:#FFFFFF;
	font-size:14px;
	padding: 10px 0 0 30px;
	margin:0px;
	 }
	 
/*sidebar headline*/	 
h3{
	padding: 0px 0 0 30px;
	}

/*specials headline in white*/
h4{
	font-weight:normal;
	color:#FFF;
	font-size:28px;
	padding: 0 0 0 30px;
	margin:0;
	}
	
/*headline for sections*/	
h5 {
	color:#FFF;
	font-size:18px;
	padding: 0 0 0 50px;
	margin:0;
}

/*paragraphs in black*/
p {
	padding: 0 0 0 30px;
	color:#000000;
	font-size:14px;}

/*link style in white underlined*/	
a:link, a:visited{
	color:#FFF;
	}
	
/*no underline when over link*/
a:hover {
	text-decoration:none;}

/*over menu with border bottom*/	
.headline {
	border-bottom: 1px solid #7BCED1;
	margin:0 0 10px 0;
	padding:0 0 5px 0px;
	height:20px;
}

/*spacer pushes the bottom image out of the text*/	
#spacer {
	height:420px;
	}
	
/*contains contact information*/
#footer { 
	background: #58AAc0;
	padding: 1px 10px 1px 30px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	margin:0;
} 

.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;
}
.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;
}