/*
	Here is the stylesheet for the site. If you change the name of this file you will also have to change the corrosponding line
	in the html file. I have documented the things that you will probably want to change which is mainly color and font styles.
	If you are completely unfamiliar with CSS you should definitely visit http://w3schools.com for a brush up on how things
	work. Also I often times use a 3 digit color format which some people may not be familiar with. It's just a shorthand
	way of writing colors. You just duplicate each number and you will get the 6 digit hex code.
	Examples:
	#fff = #ffffff
	#000 = #000000
	#43f = #4433ff
*/

/*
	body
	This is the body tag. The main items you may want to change are background, font, line-height, and color.
	In the background tag change the hex code to the color of your background that you figured out.
	DO NOT change the font size from 0px. It is set that way to fix a design issue, the size of the text for each
	panel is set later in this document. If you change the color tag it will set the default color for text.
*/
body {
	margin: 0px 0px 10px 0px;
	padding: 0px;
	background: #FFFFFF url(layout_images/background.png) repeat left top;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: small;
}

#container {
	margin: 0px auto 0px auto;
	padding: 0px;
	width: 760px;
	top: 12px;
	position: relative;
}
#menuHolder {
	margin: 0 auto;
	padding: 0;
	position: relative;
	top: 10px;
	width: 100%;
	text-align: center;
	display: block;
	left: 20px;
}

#leftright {
	width: 753px;
	position: relative;
	top: -9px;
	height: 657px;
	background: url(layout_images/Left-right.png);
}
#leftMargins {
	margin: 10px;
}



#containerTop {
	margin: 10px auto 0px auto;
	padding: 0px;
	width: 770px;
	height: 20px;
}

#containerBottom {
	margin: 0px auto 0px auto;
	padding: 0px;
	width: 770px;
	height: 20px;
	background: url(images/container_bottom.gif) top left no-repeat;
}

#header {
	margin: 0px;
	padding: 0px;
	background: url(layout_images/header.png) no-repeat center;
	width: 100%;
	height: 154px;
	position: relative;
}


/*
	#mainMenu
	Here you can change the font size and face of the text for the menu items.
	If you change the color tag, it will change the color of the seperator characters which is a pipe | by default.
*/
#mainMenu {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 47px;
	background: url(layout_images/menu.png) no-repeat center top;
	font: 12px Arial, Tahoma, sans-serif;
	color: #fff;
	position: relative;
	top: -1px;
	vertical-align: middle;
}
#contentPanel {
	width: 500px;
	float: right;
	height: 657px;
}
#contentPanelText {
	z-index: auto;
	position: relative;
	left: 10px;
	display: block;
	overflow: auto;
	height: 645px;
	width: 735px;
}



#mainMenu ul {
	display: inline;
	list-style-type: none;
	width: 100%;
	font-family: Arial, Helvetica, sans-serif;
}

#mainMenu li {
	float: left;
	margin-left: 20px;
}
#leftrighttop {
	background: url(layout_images/Left-right-top.png);
	width: 753px;
	height: 13px;
	position: relative;
	top: -2px;
}
#leftrightbottom {
	background: url(layout_images/Left-right-bottom.png);
	height: 13px;
	width: 753px;
	top: -9px;
	position: relative;
}



/*
	#mainMenu a
	If you change the color here, it will change the color of your menu links.
*/
#mainMenu a {
	margin: 0px;
	padding: 0px;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

/*
	#mainMenu a:hover
	This is the color of the menu links when you hover the mouse over them. Change it to whatever you need.
*/
#mainMenu a:hover {
	color: #FF3333;
}
#footer p {
	color: #003333;
	padding: 20px;
}
#contentPanelText li {
	padding-top: 1em;
}



#footer {
	background: url(layout_images/Footer.png) no-repeat left top;
	text-align: center;
	width: 760px;
	height: 75px;
	top: -9px;
	position: relative;
}

/*
------------------------------------------------------------------------------------------------------
	The following tags are not required for the design and you may modify them however you wish.
	You may want to change the color in the h1 and h2 tags as well as the tag labeled h3, h4, h5, h6.
	I have set images to have a padding around them and be displayed in block mode, you may change this.
	I have also set the default link styles in the a tags. If you want to learn more about CSS and how
	it works, visit this page: http://www.w3schools.com/css/default.asp. It's got some great information
	on each property of CSS.
------------------------------------------------------------------------------------------------------
*/

p {
	margin: 0px 0px 20px;
	padding-left: 5px;
}

h1 {
	margin: 0px 0px 5px;
	padding: 0px 0px 0px 5px;
	font-size: x-large;
	color: #003366;
	width: 100%;
	text-align: center;
}

h2 {
	margin: 0px;
	padding: 0px 0px 0px 5px;
	font-size: 18px;
	color: #3656b0;
}

h3, h4, h5, h6 {
	margin: 0px;
	padding: 0px 0px 0px 5px;
	font-size: 16px;
	color: #3656b0;
}

img {
	display: inline;
	margin: 0px;
	padding: 0px;
}

a {
	color: #3656b0;
	text-decoration: none;
}

a:hover {
	color: #FF3333;
}
#footer a {

	margin: 0px;
	padding: 0px;
	color: #003333;
	font-weight: bold;
	text-decoration: none;
}
#footer a:hover {

	color: #fc0;
}