/*SJWDesign Tutorial Nested Divs Centered content */
*{
	margin:0;
	padding:0;
}

body{
	background:#6b6b6d;
	text-align:center;
		SCROLLBAR-FACE-COLOR: #DAE1E6;
    SCROLLBAR-HIGHLIGHT-COLOR: #DAE1E6;
    SCROLLBAR-SHADOW-COLOR: #DAE1E6;
    SCROLLBAR-3DLIGHT-COLOR: #C0C0C0;
    SCROLLBAR-ARROW-COLOR: #666666;
    SCROLLBAR-TRACK-COLOR: #ffffff;
    SCROLLBAR-DARKSHADOW-COLOR: #C0C0C0;

}

/*<<---------------------------------Begin Layout Section------------------------*/

#HeaderContainer,
#navContainer,
#contentContainer,
#footContainer{
	width:100%;
}
/*Set the width of the content section to the width of the background images */
#Header,
#nav,
#content,
#foot{
	width:1000px;
	margin:0 auto;
	position:relative;
	text-align:left;
}

/*Add the background image for the header section */
#Header{
	background:transparent url(images/.png) 0 100% no-repeat;
	height:60px;
}
/* set the padding for top and bottom, set the margin to align with edge of background graphic */
#mainheaderarea{
	width:500px;
	padding:20px 0 20px 0;
	margin-left:50px;
}
/*Add the background image for the nav section set the height to the background image height*/
#nav {	
	background:transparent url(images/header.jpg) 0 0 repeat-y;
	height: 90px;
}
/* set the padding for top and bottom, set the margin to align with edge of background graphic */

/*Add the background image for the content section, set the height minimums so IE doenst cut it off
and repeat on the y axis so the background repeats down the page according to HMTL content*/
#content{
	background:transparent url(images/bodyback.jpg) 0 0 no-repeat;
		min-height:391px;
	_height:391px;

}
#picture{
	position: absolute;
	top: 10px;
	left: 593px;
	width: 231px;
}
/* set the padding for top and bottom, set the margin to align with edge of background graphic */
#maincontentarea{
	width:300px;
	padding:20px 0 20px 0;
	margin-left:275px;
	height:351px;

}
/*Add the background image for the footer section set the height to the background image height*/
#foot{
	background:transparent url(images/footer.jpg) 0 100% repeat-x;
	height:119px;
}
/* set the padding for top and bottom, set the margin to align with edge of background graphic */
#mainfooterarea{
	width:500px;
	padding:20px 0 20px 0;
	margin-left:100px;
}

#copyright ul{
	position:absolute;
	top:45px;
}

#copyright li{
	list-style-type:none;
}

#mainfooterarea #copyright{
	width:300px;
	position:absolute;
	left:642px;
	top: 29px;
}

/*<<-----------------------------------End of Layout Section----------------------*/

/*<<---------------------------------Beginning of Nav Section------------------------*/

/* prevent background colour showing on site links */
#mainnavarea a:hover{	background:transparent;}

/* position the div absolutely in this section */
#mainnavarea ul{
	display:block;
	position:absolute;
	top:70px;
	left:274px;
	width: 473px;
	height: 20px;
}

#mainnavarea li{
	display:block;
	float:left;
	width:69px;
	margin-left:3px;
}

#mainnavarea li a{
	display:block;
	text-align:center;
}


#scrollingcontent
{height: 375px;
width: 300px;
overflow : auto;}

/*<<--------------------------------------------End of Nav Section-------------------------------*/

/*<<---------------------------------Begin of Typography & Colour Section------------------------*/

/* set main font and main size 100% equals 1.0 em  */
body{
	font:normal ;
	font-family: Georgia, "Times New Roman", Times, serif ;
	font-size:0.7em;
	color: #57565b;
}
/* set any body links to no underline and body colour */
a{
	color:#57565b;
	text-decoration:none;
	font-weight:bold;
}
a:hover{
	color:#bcdbf1;
}

#copyright {
	font-size: 0.7em;
	color: #999999;
}

#copyright a { 
	color:#999999;
}

.picturetext {
		font-size:0.6em;
}
h1 { font-size: 1.1em}
/*<<---------------------------------End of Typography & Colour Section------------------------*/