/*=======================================================
cateringfocus.co.uk CSS
Created by Rich Hinchcliffe
http://www.monkeyfight.co.uk
=======================================================*/

/*START override default styles*/
body {
	font:0.75em Arial, Helvetica, Sans-Serif;
	color:#39513f;
	background:#1D536B url(../images/bgmain.gif) repeat-y center;
	padding:3px 0px 20px 0px;
	margin:0px;
	text-align:center}
	
h1, h2, h3, h4, h5, h6 {
	font:normal 2.5em Trebuchet MS, Arial, Helvetica, Sans-Serif;
	text-transform:uppercase;
	margin-bottom:15px;
	margin-top:0px;
	color:#649a2f}
h2 {font-size:1.6em}
h3 {font-size:1.2em;font-weight:bold}

a {color:#80a519; text-decoration:underline}
a:hover,a:active,a:focus {text-decoration:none; background:#8AC63C;color:#FFF!important}

a img {
	display:block;
	border:0px}

p {margin-top:0px;margin-bottom:15px}

form {margin:0px}
fieldset {border:0px}
label {cursor:pointer}
ul {list-style-image:url(../images/blt.gif)}
.box ul {list-style-image:none}
/*END override default styles*/



/*miscellaneous styles used throughout*/
.hide, .print {display:none}
.floatLeft{float:left}
.floatRight {float:right}
.larger {
	font-weight:bold;
	font-size:1.4em}




/*bit of css to fix the clearing problem with divs containing floats - explained here http://www.positioniseverything.net/easyclearing.html 
might cause some problems? Keep an eye on it, seems to work well though */
.floatfix:after {
	content:"."; 
	display:block; 
	height:0px; 
	clear:both; 
	visibility:hidden}
.floatfix {display:inline-table}
/* Hides from IE-mac \*/
* html .floatfix {height:1%}
.floatfix {display:block}
/* End hide from IE-mac */


/*common styles for main containing elements*/
#header,#nav,#container,#footer {
	width:745px;
	margin:auto;
	text-align:left;
	position:relative}



/*styles for the header area*/
#header {
	background:#FFF url(../images/colouredpeople.jpg) no-repeat bottom;
	height:150px}
#header img {
	position:absolute;
	top:20px;
	right:20px;
	border:0px}



/*navigation styles*/
#nav {
	background:#9BD268 url(../images/navbg.gif) repeat-x;
	height:34px;
	margin:0px auto 0px auto;
	padding:0px}
#nav li {
	display:inline;
	float:left;
	list-style-type:none;
	padding:2px 0px 0px 32px}
#nav li a {
	display:block;
	height:25px;
	background-repeat:no-repeat}
#nav li a span {
	display:none}

#home a {background: url(../images/nav_home.gif);width:41px}
#home a:hover,#home a:active,#home a:focus {background: url(../images/nav_home_over.gif)}

#about a {background: url(../images/nav_about.gif);width:71px}
#about a:hover,#about a:active,#about a:focus {background: url(../images/nav_about_over.gif)}

#audit a {background: url(../images/nav_audit.gif);width:115px}
#audit a:hover,#audit a:active,#audit a:focus {background: url(../images/nav_audit_over.gif)}

#training a {background: url(../images/nav_training.gif);width:68px}
#training a:hover,#training a:active,#training a:focus {background: url(../images/nav_training_over.gif)}

#shopper a {background: url(../images/nav_shopper.gif);width:132px}
#shopper a:hover,#shopper a:active,#shopper a:focus {background: url(../images/nav_shopper_over.gif)}

#contact a {background: url(../images/nav_contact.gif);width:88px}
#contact a:hover,#contact a:active,#contact a:focus {background: url(../images/nav_contact_over.gif)}




/*main container bit - has other containers within it*/
#container {
	padding-top:10px;
	background-color:#FFF;
	border-bottom:40px solid #FFF}

.bghome {background:#FFF url(../images/large_bainMarie.jpg) no-repeat bottom}
.bgabout {background:#FFF url(../images/large_food.jpg) no-repeat bottom}
.bgcatering {background:#FFF url(../images/large_peppers.jpg) no-repeat bottom}
.bgtraining {background:#FFF url(../images/large_squeezy.jpg) no-repeat bottom}

.bgtraining2 {background:#FFF url(../images/large_food_b.jpg) no-repeat bottom}
.bgtraining3 {background:#FFF url(../images/large_waiter.jpg) no-repeat bottom}
.bgtraining4 {background:#FFF url(../images/large_restaurant.jpg) no-repeat bottom}
.bgtraining5 {background:#FFF url(../images/large_salad.jpg) no-repeat bottom}
.bgtraining6 {background:#FFF url(../images/large_serving.jpg) no-repeat bottom}

.bgmystery {background:#FFF url(../images/large_mystery.jpg) no-repeat bottom}
.bgcontact {background:#FFF url(../images/large_tomatos.jpg) no-repeat bottom}
.bghealth {background:#FFF url(../images/large_serving.jpg) no-repeat bottom}
.bgprivacy {background:#FFF url(../images/large_salad2.jpg) no-repeat bottom}


/*area within the container that has all the relevant padding etc*/




#columnL {
	width:425px;
	float:left;
	margin-left:30px;
	padding-bottom:245px;}
* html #columnL {
	margin-left:15px}

#columnR {
	float:right;
	margin-right:20px;
	width:257px}
* html #columnR {
	margin-right:10px}

#ColumnFull {
	margin:0px 35px 260px 35px}





/*style for the main large image present on most pages*/
/*#largeimage {
	background:#EEE url(../images/shared/large_bainMarie.jpg) no-repeat;
	height:230px;
	clear:left}*/



/*coloured box styles*/
.boxtop,.boxend {
	height:5px;
	background-repeat:no-repeat}
.boxtop span,.boxend span {display:none}

.box {
	font-size:0.95em;
	position:relative;
	height:auto;
	padding:5px 20px 10px 20px;
	font-weight:bold;
	color:#FFF}
	
.box h2 {
	margin-bottom:5px}

.box p {margin:0px}




.box ul {margin:5px 5px 10px 20px;padding:0px}
.box li {margin:0px 0px 5px 0px;padding:0px}

.boxend {margin-bottom:20px}

.green {background:#8FCB45}
.pink {background:#D9407F}
.blue {background:#50ABCF}

.greentop {background: url(../images/box_green_top.gif)}
.pinktop {background: url(../images/box_pink_top.gif)}
.bluetop {background: url(../images/box_blue_top.gif)}

.greenend {background: url(../images/box_green_bottom.gif)}
.pinkend {background: url(../images/box_pink_bottom.gif)}
.blueend {background: url(../images/box_blue_bottom.gif)}

.box.green h2,.box.green a {color:#cbff70}
.box.pink h2,.box.pink a {color:#ffd5e4}
.box.blue h2,.box.blue a {color:#c8f1ff}

.box.green a:hover,.box.green a:focus,.box.green a:active {background:#cbff70;color:#8FCB45!important}
.box.pink a:hover,.box.pink a:focus,.box.pink a:active {background:#ffd5e4;color:#D9407F!important}
.box.blue a:hover,.box.blue a:focus,.box.blue a:active {background:#c8f1ff;color:#50ABCF!important}

.arrowlink {
	position:absolute;
	top:5px;
	right:10px}

.green a.arrowlink {background:#b5ff33}
.pink a.arrowlink {background:#ffa1c3}
.blue a.arrowlink {background:#92e4ff}

.green a.arrowlink:hover,.green a.arrowlink:active,.green a.arrowlink:focus {background:#e2ffb0}
.pink a.arrowlink:hover,.pink a.arrowlink:active,.pink a.arrowlink:focus {background:#ffd3e3}
.blue a.arrowlink:hover,.blue a.arrowlink:active,.blue a.arrowlink:focus {background:#b7f6ff}


.box strong {font-weight:normal;}



#info ul {
	margin:0px 0px 0px 20px;
	padding:0px;
}


/*styles for the page footer*/
#footer {
	font:0.9em Tahoma, Arial, Helvetica, sans-serif;
	border-top:4px solid #BBFF0D;
	text-align:center;
	color:#FFF;
	padding-top:10px;
	clear:both}
#footer a {
	color:#FFF}