/*
FINAL APRIL10 COLOURS, NEW CMYK PALETTE -> RGB IN PS
maroon #780031
peach #F7905D
blue #00A0B0
green #B8B308
*/


* { /*this sets ALL margins/pads/borders to zero, thus removing browser variations, then I can respecify them as needed */
margin:0;
padding:0;
border:none;
}


html, body {
font-family : Helvetica, Verdana, Geneva, sans-serif;
font-size:13px; /*larger to display helvetica properly*/
color : white;
line-height: 140%; /*increases legibility*/
height:100%; /*required to make the LHS bg full height and not stop at the end of the content and not stop at the end of the content*/
}


html { /*force the browser to allow space for the scrollbar on short pages so that the centre-alignment of the site doesn't change from page to page*/
/*see old/unused versions of this file for alt but inferior solutions */
/*this solution is the best (see http://www.phwinfo.com/forum/macromedia-dreamweaver/351587-vertical-scroll-bar-creating-centered-layout-issue.html)*/

/*WHILE THE CONTENT ISNT LONG ENOUGH TO GO BELOW THE FOLD, AND/OR WHILE THERE IS ONLY 1 PAGE, LEAVE THIS COMMENTED OUT*/
/*height: 102%;*/
}


body {
background-color : #780031; /*maroon*/
}



/*===================================================================*/
/* FRAMEWORK */
/*===================================================================*/


#lefthalf {
/*width:380px;*/ /*logo plus 40 either side*/
width:50%;
float: left;
}

#righthalf {
width:49%; /*50% led to a bug in IE6 where righthalf started below lefthalf*/
float: right; /*using this instead of left seems to fix the FF short maroon bg bug*/
}


#leftcontent {
float:right;
text-align:right;
margin-top:40px;
padding-right:30px;
}

#rightcontent {
text-align:left;
margin-top:40px;
padding-left:30px;
width: 400px; /*set the width of the text paragraphs*/
}

#ofthedayblock, #menulinkblock {
float:right;
background-color:white;
padding:10px;
/*width:278px;*/ /*width plus double padding = 300-2 = the width of the slogan under the 300w logo */
width:272px; /*width plus double padding plus double border = 298 = 300-2 = the width of the slogan under the 300w logo */
margin-top:20px;
line-height: 180%; /*increases legibility*/
font-weight:bold;
border: 3px solid #F7905D;
}

#menulinkblock {
margin-top:40px;
}

#newmenulinkblock {
float:right;
background-color:white;
padding:10px;
/*width:278px;*/ /*width plus double padding = 300-2 = the width of the slogan under the 300w logo */
width:272px; /*width plus double padding plus double border = 298 = 300-2 = the width of the slogan under the 300w logo */
margin-top:20px;
line-height: 180%; /*increases legibility*/
font-weight:bold;
border: 3px solid #F7905D;

	color: #F7905D; /*peach*/
	font-size:22px;
	margin-top:50px;
	text-align:center;
}


#categoriesblock {
float:right;
width:298px; /*width plus double padding plus double border = 298 = 300-2 = the width of the slogan under the 300w logo */
margin-top:20px;
}

.ofthedayheading {
color: #780031; /*maroon*/
}

.ofthedaycontent {
color: #F7905D; /*peach*/
}

#addressphone {
color: #F7905D; /*peach*/
margin-top:20px;
padding-right:2px; /*to ensure that text below logo lines up with the end of the tagline, not the edge of the i dot*/
}

.fix { /*this is a rudimentary 'clearfix' to fix the prob caused by floated content no longer being contained by its parent ("You've got to clear the floats before the container div closes, to force the container to wrap the floats")*/
clear:both;
/*NB this is prob a better method: http://blogs.sitepoint.com/2005/02/26/simple-clearing-of-floats
i.e. set overflow:auto in the container div, i.e. mainbody */
}

/*===================================================================*/
/* HYPERLINK STYLING*/
/*===================================================================*/

A,A:link,A:active,A:visited {
color: #780031; /*maroon*/
text-decoration:underline;
font-weight:bold;
}

A:hover, A.overlink {
color: #F7905D; /*peach*/
text-decoration:underline;
}