/* new styles */

/* global reset */
* {
	margin: 0;
	padding: 0;
}

/* 
change how hyperlinks are displayed 
remove the underline, make them dark grey
*/
a:link {
	text-decoration:none;
	color: #333;
}

/* change the background color of links when the cursor is over them */
a:hover {
	background-color: #6e9cb1;
}

/*
set a background image called "bgTile.gif" in the "images" folder
repeat this both horizontally and vertically, anchored at the top, left.
also, set the default font.
*/

body {
	background-image: url(images/bgTile.gif);
	background-repeat: repeat;
	background-position: top left;
	font-family: verdana, sans-serif;
}

/* this is the main ID. everything else is contained within this box.
it will be 800 pixels wide, centered (margin-left and margin-right auto does this)
*/
#wrapper {
	width: 800px;
	background-color: #f1f1f1;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 15px;
	margin-left: auto;
}

/* this is the top box, containing the logo and navigation boxes */
#masthead {
	height: 116px;
	background: url(images/mastheadBG.gif);
}

/* 
the box will display the logo in the background.
the "div" tag which calls this style has no content, so we
need to define the size of the box explicitly here.
also, float it on the left so the nav box can stay up to the right.
*/
#logo {

	background: url(images/logo.gif);
	width: 307px;
	height: 116px;
	float: left;
}

/*
the nav box is also within the #masthead id in the HTML
however, this box should float on the right.
also, we want to bump this down (74 pixels) from the top
within the enclosing #masthead box
*/
#nav {

	float:right;
	top:74px;
	position:relative;
}

/* remove the borders from the images */
#nav img {
	border: 0;
	margin:0px;
}

/* a hack to keep the linked images from displaying the 
blue background when the mouse rolls over them
*/
#nav a:hover {
	background-color: #f1f1f1;
}

/* 
this box falls underneath the masthead box
and contains the central content
*/
#content {
	width:760px;
	margin:20px;
}

/*
the main box has our text, and sits on the right of the content window
it floats left to allow the sidebar to sit next to it on the right
*/
#main {
	width: 400px;
	float:left;
	font-size: 12px;
}

/* 
changes the text in of anything set to class="heading" in our html 
this is a class. note the "." you can use classes in yout html 
as many times as you like.
*/
.heading {
	font-family: Georgia, serif;
	font-size: 20px;
	color: #333; /* this is shorthand for #333333 */
}

/*
the sidebar box sits to the right of the main box.
it uses float right to press itself against the right side of the content box.
*/
#sidebar {

	float: right;
	width: 250px;
	padding: 10px;
	padding-top: 0px;
	font-size: 10px;
}

/*
the footer box appears underneath the content box. the "clear:both" line
tells the box to display only when there is no other 
objects to the right or left of it...
...essentially making it underneath the previous box.
*/
#footer_bg {
	width:760px;
	clear:both;
	border-top: 1px solid #6e9cb1;
	padding: 5px 20px 10px 20px;
	font-size:10px;
}