@charset "utf-8";

/* 	NOTE: to resize the right sidebar "Ads Column" for "Sponsored Links", the following 80px changes must be made:

	ELEMENT				PROPERTY			VALUE FOR 250PX ADS				VALUE FOR 330PX SPONSORED LINKS
	#rightsidebar		width				270px							350px
	.adscontainer		width				250px							330px
	.maincontent		width				710px							630px
  	.maincontent		margin				0px 270px 0px 0px				0px 350px 0px 0px
	#introsection		width				700px							620px
	#infoboxsection		width				700px							620px
	.infoboxdropshadow	width				705px							625px
	.listingtable		width				660px							580px (too narrow, but only occurs on home page)			

	THESE CHANGES MAY AFFECT BOTH PAGES, SO SOME NAME CHANGING WILL NEED TO BE DONE IF ONLY ONE PAGE SHOULD CHANGE!
	MAYBE I SHOULD CHANGE THE NAMES OF THESE, ADDING "home..." FOR HOME PAGE AND "individual..." FOR THE INDIVIDUAL
	RESTAURANT PAGE. OR DO I JUST GIVE THE "body" TAGS ID'S (#home and #individual) AND GIVE TWO DEFINITIONS FOR EACH OF 
	THE ABOVE CLASSES/IDS? THINK.....THE LATTER MAKES FAR MORE SENSE!!!!!!!!
	
	NOTE: if there are no ads at all, then the <div class="rightsidebar"> should be deleted from the html file and then
	.maincontent { margin: 0px 270px 0px 0px; } should be changed to .maincontent { margin: 0px auto; } below in order 
	to center the page contents.
*/


/* 1. Basic Page Styles ----------------------------------------------------------------------------------- */
body  {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 12px;
	background: #ffffff url(/images/ginghamback01.gif);
	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;	
}

#outercontainer { 
	width: 980px;  
	margin: 0px auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0;
	text-align: left; /* this overrides the text-align: center on the body element. */
} 

/* 2. Header Section Styles - Container for banner and Website name title ---------------------------------- */
#header { 
	position: relative;
	background: url(/images/banner01.png) center no-repeat;
	color: #000000;
	text-align: center;
	height: 130px;
	border: 0px; }
#header h1 { 	 							/* Page header, for SEO and accessability only */
	font-size: 1px;
	margin: 0px;							/* Take up only 1px of vertical space */
	padding: 0px;
	position: absolute;
	left:-2000px; }							/* hidden off side of page */

/* 3. Right Sidebar Section Styles - Container for Ads etc, if there are any ------------------------------------ */
#rightsidebar {
	float: right; 
	width: 260px; /* since this element is floated, a width (270px) must be given - "#MAINCONTENT" RIGHT MARGIN MUST EQUAL THIS */
	padding: 15px 0; /* top and bottom padding create visual space within this div */
	border: 0px;
	vertical-align: text-top;
}

.adscontainer { 
	width: 250px;		/* RYAN SAID HE LIKED 250PX ADS */
	text-align: left;				
	vertical-align: text-top;
	border: 0px;
	padding: 0px;	
	margin: 0px auto; /* the left and right margin should be given to every element that will be placed in the side columns */
}


/* 4. Main Content Section Styles - Container for Intro Text and Search/Sort and Listing Sections -------------------- */
/* 4.a. Main Content Container Styles */
#maincontent {
    float: left;
	width: 710px;
  	margin: 0px 0px 0px 0px; 	/* Margin-right is width of right column (ads container) - IF NO ADS, SET THIS TO "0px auto" */
	text-align: center;
	vertical-align: text-top;
	border: 0px;
	padding: 15px 0px;
} 

/* 4.b. Main Content Content Containers Styles - containers for intro section, search/sort and listing outer div */
/* 4.b.i.Intro Section Container Styles - container for Intro heading and Intro text */
#introsection { width: 700px;
	text-align: left;	
	margin: 10px 5px 20px 5px;
	padding: 0px; }
/* 4.b.ii Infobox Container Styles - container for search/sort/listing etc */
#infoboxsection { width: 700px;
	background: #ffffff;
	text-align: center;	
	margin: 0px 5px 0px 5px;
	padding: 0px;
}
/* Infobox Dropshadow Border Styles */
.infoboxdropshadow { position: relative;
	background: url(/images/shadowAlpha.png) repeat bottom right !important;
	background: url(/images/shadow.gif) repeat bottom right;
	margin: 10px 0 10px 10px !important;
	margin: 10px 0 10px 5px;
	width: 705px;
	padding: 0px }
.infoboxinnerbox { position: relative;
	bottom: 6px;
	right: 6px;
	border: 0px;
	padding: 0px;
	margin: 0px 0px 0px 0px }
.infoboxinnerbox { \margin: 0px 0px -3px 0px;	/* IE5 hack - I don't know exactly the reason for this, but am told IE5 needs it. */
	ma\rgin:  0px 0px 0px 0px }

/* Upper Section Styles - container for search/sort and restaurant info sections as well as upper bracket backgrounds */
#outeruppersection { 	/* Add left bracket background to div */
	background: url(/images/topleftback.gif) top left no-repeat; }
#inneruppersection { 	/* Add right bracket background to this div */
	background: url(/images/toprightback.gif) top right no-repeat;
	padding: 30px 0px 30px 0px; }
.sortsection {			/* Container for all search and sort contents - STILL TO BE DISCUSSED */
	height: 120px; 		/* IF CONTENTS ARE NOT THIS HIGH, THIS VALUE MUST BE ADDED TO SHOW BRACKETS */
	background: #f5f7f0;
	color: #9c3838;
	margin: 0px 30px 0px 30px;	/* WHAT IS THE PROBLEM WITH THE UPPER MARGIN ON THIS? VERY CONFUSING! */
	padding: 10px;
	text-align: left; }
.restaurantinfosection {			/* Container for restaurant info */
	background: #f5f7f0;
	color: #9c3838;
	margin: 0px 30px 0px 30px;
	padding: 10px;
	text-align: left; }

.uppernotessection {
    padding: 0px 40px 15px 40px;
	text-align: left; 
}

	
/* Lower Section Styles - container for lower notes section as well as lower bracket backgrounds */
#outerlowersection { 	/* Add left bracket background to this div */
	height: 120px;
	background: url(/images/bottomleftback.gif) bottom left no-repeat;}
#innerlowersection { 	/* Add right bracket background to this div */
	height: 120px;
	background: url(/images/bottomrightback.gif) bottom right no-repeat; }
.lowernotessection {	/* Container for notes and restaurant owners link */
	padding: 20px 20px 20px 40px;
	text-align: left; }
.lowernotessection h3 {
	font-weight: bold;
	font-size: 14px;
	text-align: left; }
/* List Section and Map Section Styles - this is the center section between the upper and lower sections */
.listsection {}
.mapsection {}

.listingtable thead {
    cursor: pointer;
}

/* 4.b.iii. Restaurant Listing Table Styles - PUT STYLES FOR TABLE AND CELLS ETC HERE */
.listingtable { width: 660px;
	margin: 0 auto;
	padding: 0px;
	border: 0;
	text-align: left;
}
/* Restaurant Listing Styles - table contents styles */
.listingtable th {
	font-weight: bold;
	font-size: 14px;
	color: #345070;
	border: 0;
	border-bottom: 1px solid #000000; /* Put text-decoration: underline, but then they looked like links */
	padding: 0 5px 0 0; }
.listingtable td {
	font-weight: normal;
	font-size: 12px;
	vertical-align: text-top;
	white-space: nowrap;
	color: #345070;
	border: 0;
	padding: 10px 10px 0 0; }
.listingtable td.wrap { white-space: normal; }
/* Restaurant Info Styles - table contents styles */
.infotable { width: 100%;
	margin: 0 auto;
	padding: 0px;
	border: 0;
	text-align: left;
}
.infotable td, .infotable th {
	font-weight: normal;
	font-size: 12px;
	text-align: left;
	vertical-align: top;
	white-space: nowrap;
	color: #9c3838;
	border: 0;
	padding: 10px 10px 0px 0px; }
.infotable th { font-weight: bold; }
.infotable td.wrap { white-space: normal; }
/* Home Button Styles */
div.homebutton {
	position: absolute;
	left: 530px;
	top: 40px;
	width: 124px; height: 43px;
	margin: 0 3px 0 0;
	background: url( '/images/homebuttonhover.gif' ) top left no-repeat;	}
div.homebutton a {
	display: block;
	margin: 0; 
	padding: 0;
	width: 100%; 
	height: 100%;
	overflow: hidden;
	font-size: 13px;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	background: url( '/images/homebuttonup.gif' ) top left no-repeat; }
div.homebutton span {
	display: block;
	margin: 3px 0 0 45px; 
	padding: 0;	}
div.homebutton a:hover {
	background-image: none;
	color: #9c3838;	}
	
/* Other Main Content Section Contents Styles - Styles for actual text of main content section */
/* Heading Styles */	
h2 {	 					
	font-size: 16px;
	margin: 0px 0px 30px 0px;				
	padding: 0px; }	
h2.restaurantname { font-size: 16px;
	margin: 0px 0px 10px 0px;				
	padding: 0px; }
.introheading { font-size: 16px;
	margin: 0px 0px 10px 30px;				
	padding: 0px;
	text-align: left; }
.introheadingslogan { font-size: 14px;
	margin: 0px 0px 20px 100px;				
	padding: 0px;
	text-align: left; 
	color: #9c3838; }
	
/* Paragraph Styles */									
.introtext { 								/* Text paragraphs with extra emphasis for introduction */
	text-align: justify;	
	color: #000000;	
	font: bold 12px verdana, arial, helvetica, sans-serif;	
	line-height: 18px;
	margin: 0px 30px 10px 30px; }					
.regulartext { 								/* Regular text paragraphs */
	text-align: justify;
	color: #000000;	
	font: normal 12px verdana, arial, helvetica, sans-serif;	
	line-height: 18px;
	margin: 0px 0px 10px 0px }

/* Link Styles */
.regulartext a { text-decoration: underline; }		/* regular text section link */
.regulartext a:link { color: #000000; }
.regulartext a:visited{ color: #000000; }
.regulartext a:hover { color: #9c3838; }
.introtext a { text-decoration: underline; } 		/* introduction text section link */
.introtext a:link { color: #000000; }
.introtext a:visited{ color: #000000; }
.introtext a:hover { color: #9c3838; }
.listingtable td a { text-decoration: underline; } 	/* restaurant list table link */
.listingtable td a:link { color: #345070; }
.listingtable td a:visited{ color: #345070; }
.listingtable td a:hover { color: #9c3838; }

.listingtable th a { text-decoration: none; } 	/* restaurant list table header */
.listingtable th a:link { color: #345070; }
.listingtable th a:visited { color: #345070; }
.listingtable th a:hover { color: #9c3838; }

.infotable td a { text-decoration: underline; }		/* restaurant info table link */
.infotable td a:link { color: #9c3838; }
.infotable td a:visited { color: #9c3838; }
.infotable td a:hover { color: #345070; }
#copyright a { text-decoration: underline; }		/* copyright section links */
#copyright a:link { color: #000000; }
#copyright a:visited { color: #000000; }
#copyright a:hover { color: #9c3838; }

/* Search/Sort Section Styles - WAITING FOR RYAN ON MOST OF THIS */

/* 5. Footer Section Styles - Container for Bookmark and Copyright Info Sections -------------------------------- */
#footer { 
	padding: 4px 0px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	text-align: center;
	color: #000000;
} 

/* Bookmark Links Styles */
.bookmarkbar { 
	text-align: center;
	font-size: 12px;
	font-weight: normal;
	border: 0px;
	margin: 0px;
	padding: 5px 0px 0px 0px }
/* 5.c.ii. BOP Contents Styles */
.bookmark { text-decoration: none; margin: 0px 10px 0px 10px; }
a.bookmark:link { color: #000000 }			/* bookmark unvisited links */	
a.bookmark:visited { color: #000000 }		/* bookmark visited links */
a.bookmark:hover { color: #990000 }			/* bookmark hover links */

/* Copyright Section Styles */
#copyright { 
	text-align: center;
	background: transparent;
	color: #000000;
	font-size: 10px;
	border: 0px;
	margin: 0px;
	padding: 25px 0px 7px 0px }


/* 6. Miscellaneous classes for reuse ------------------------------------------------------ */
.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;
}

/* ads */
.adbox { background: #f5f7f0; margin: 10px 5px 0px 5px; padding: 10px; border: 2px solid #666; }
span.resultsHeader { color: #aaa; font-weight: bold; font-size: 11px;}
span.resultsHeader a { color: #aaa; } 
ul.resultList { margin: 5px 0.5em 0 0; padding: 0; list-style-type: none; }
a.resultTitle {
    color: #9c3838;
    font-size: 12px; 
}

a.resultDesc, a.resultHost {
    color: #345070;
    font-size: 11px; 
    text-decoration: none;
}