@charset "UTF-8";
/* CSS Document */
/* This is a general setup for the style - getting rid of the padding and margin around the document - I'm also setting a default font in case I forget a tag - if you're interested in using em for font size - set the font to 62.5% in this tag and then 1.0em will equal 10px in most browsers with font set at medium -- Also, IE treats the page elements as text so you have to tell it to align the text to center if you want your content centered */
body {
	margin: 0;
	padding: 0;
	font-family: Tahoma, Arial, Helvetica, Verdana, sans-serif;
	font-size: 62.5%;
	color: #000000;
	background: #ffffff;
	text-align: center;
}

/* Because I'm using ems for my font height - 1.1em is 11px - I'm also setting my line spacing for good readability*/
p {
	font-family: Tahoma, Arial, Helvetica, Verdana, sans-serif;
	line-height: 150%;
	font-size: 1.1em;
	color: #cccccc;
}

/* take of the image border that would show in IE */
img {
	border: none;
}

/*because we centered our text in the body tag for IE to show everything in the middle, I'll wrap all of my content with a container and align the text back to the left, for safari and firefox to center the content here I'll tell the margins to be auto for the left and right, and 20px at the top -- i'm also setting the position to relative so my absolute divs will position off of it */
#container {
	width: 770px;
	min-height: 425px;
	height: auto !important;
	height: 400px;
	text-align: left;
	margin: 20px auto 0 auto;
	position: relative;
	background: #FFFFFF;
}

/*left side for the thumbnails*/
#thumbs {
	width: 325px;
	padding: 0 10px 0 10px;
	margin: 0;
	left: 0px;
	top: 172px;
	position: absolute;
}

#thumbs2{
	width: 325px;
	padding: 0 10px 0 10px;
	left: 0px;
	margin: 0;
	top: 247px;
	position: absolute;
}

#thumbs3{
	width: 325px;
	padding: 0 10px 0 10px;
	left: 0px;
	margin: 0;
	top: 322px;
	position: absolute;
}

#thumbs4{
	width: 325px;
	padding: 0 10px 0 10px;
	left: 0px;
	margin: 0;
	top: 397px;
	position: absolute;
}

#thumbs5{
	width: 325px;
	padding: 0 10px 0 10px;
	left: 0px;
	margin: 0;
	top: 472px;
	position: absolute;
}

#thumbs6{
	width: 325px;
	padding: 0 10px 0 10px;
	left: 0px;
	margin: 0;
	top: 547px;
	position: absolute;
}

#nav{
	width: 800px;
	padding: 0 15px 0 15px;
	margin: 0;
	Top: 120px;
	Position: absolute;
}

#con{
	width: 50px;
	left: 684px;
	padding: 0 15px 0 15px;
	margin: 0;
	Top: 120px;
	Position: absolute;
}

#about{
	width: 453px;
	margin: 0;
	left: 15px;
	Top: 172px;
	Position: absolute;
	height: 349px;
}

#news{
	width: 312px;
	margin: 0;
	Left: 551px;
	Top: 174px;
	Position: absolute;
}

#links{
	width: 312px;
	margin: 0;
	Left: 552px;
	Top: 345px;
	Position: absolute;
}

/* I apply this class to each thumbnail which will cause them to line up in a row with 10px between each one*/
#thumbs .thumb {
	float: left;
	margin: 10px;
}

#thumbs2 .thumb {
	float: left;
	margin: 10px;
}

#thumbs3 .thumb {
	float: left;
	margin: 10px;
}

#thumbs4 .thumb {
	float: left;
	margin: 10px;
}

#thumbs5 .thumb {
	float: left;
	margin: 10px;
}

#thumbs6 .thumb {
	float: left;
	margin: 10px;
}

#button .nav {
	float: left;
	margin: 10px;
}
/* this is where the big image will be, absolutely positioned on the right side */
#big {
	width: 377px;
	hight: 400px;
	margin: 0;
	position: absolute;
	top: 171px;
	left: 375px;
}

#title{
	margin: 0;
	Top: 5px;
	left: 16px;
	Position: absolute;
}

#contact{
	margin: 0;
	Top: 550px;
	left: 15px;
	Position: absolute;
}

#caption{
	Margin: 0;
	Top: 400px;
	left: 375px;
	Position: absolute;
}

.body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333;
}
.news {
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	color: #FF6600;
}

.links {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}
.headlines {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #FF0099;
	font-weight: bold;
}