/* CSS Document */

body 
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
}

/* Standard Links */
a:link, a:visited
{
	color:#000000;
}

a:hover, a:active
{
	color:#666666;
}	

/* email links */
a.black_rollover:link, a.black_rollover:visited
{
	color:#FFFFFF;
}

a.black_rollover:hover, a.black_rollover:active
{
	color:#666666;
}

/* #################### PAGE LAYOUT #################### */

#total /* # refers to ID=total (unique on page) */
{
	background-color: #FFFFFF;
	width:1050px;
	position:relative; /* required for Absolute positioning of later items */
	margin:0 auto 0 auto; /* places total content in centre of screen */
	text-align:center;	
}

#main
{
	background-color: #000000;
}

#index_sidebar
{
	float:left; /* 'floats' content to left so that image sits to right */
	width: 300px; /* when using 'float' always specify width */
	padding:0 50px 0 50px;
}

.index_logo /* . refers to Class (can have many of same class on same page) */
{
	position:absolute;
	left:100px;
	top:230px;
}

#portfolio_sidebar
{
	float:left; /* 'floats' content to left so that portfolio image sits to right */
	width:300px;
	padding:0 50px 0 50px;
}

.portfolio_logo
{
	position:absolute;
	left:100px;
	top:150px;
}

#info_sidebar
{
	float:right; /* 'floats' content to right so that image sits to left */
	width:300px;
	margin:100px 30px 50px 30px;
}

#contact_sidebar
{
	float:left; /* 'floats' content to left so that image sits to right */
	width:300px;
	padding:150px 50px 0 50px;
}

/* #################### PORTFOLIO IMAGES #################### */

/* Thumbnails */

#thumbnails
{
	margin-top:220px;
	
}

.image_imagelinks
{
	float:left; /* 'floats' thumbnails to left so they line up. They start new line when container width reached */
	width: 50px; 
	height: 50px;
	border:2px solid;
	margin: 5px 5px 5px 5px; 
}

/* Set border around thumbnail images. Changes colour on mouseover. */
a.image_imagelinks:link, a.image_imagelinks:visited 
{
	border-color:#FFFFFF;
}

a.image_imagelinks:hover, a.image_imagelinks:active
{
	border-color:#000000;
}	

/* Thumbnail images presented as background image on hyperlink. Saves reloading for each page. */
.ladle 
{
	background: url(images/thumbs/ladlethumb1.jpg) no-repeat center top;
}

.fondue
{
	background: url(images/thumbs/fonduethumb.jpg) no-repeat center top;
}

.cocktail
{
	background: url(images/thumbs/cocktailthumb.jpg) no-repeat center top;
}

.menu1
{
	background: url(images/thumbs/menu1thumb.jpg) no-repeat center top;
}

.apples
{
	background: url(images/thumbs/applesthumb.jpg) no-repeat center top;
}

.tuna
{
	background: url(images/thumbs/tunathumb.jpg) no-repeat center top;
}

.spaghetti
{
	background: url(images/thumbs/spaghettithumb.jpg) no-repeat center top;
}

.juicer
{
	background: url(images/thumbs/juicerthumb.jpg) no-repeat center top;
}

/* images */

.index_image
{
	margin: 75px 0px 75px 360px;
	border:#FFFFFF 3px solid;
}

.portfolio_image 
{
	margin: 50px 30px 50px 0;
	border:#FFFFFF 3px solid;
}

.portfolio_mainimage 
{
	margin: 75px 40px 75px 0;
	border:#FFFFFF 3px solid;
}

.info_image
{
	margin: 75px 0px 75px 20px;
	border:#FFFFFF 3px solid;
}

.contact_image
{
	margin: 75px 30px 75px 0;
	border:#FFFFFF 3px solid;
}

/* #################### FOOTER #################### */

#footer
{
	clear:both; /* stops footer contents from 'floating' */
}

#footer a
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none;
	padding: 30px 20px 10px 20px;
}

#footer p
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#000000
}