/* CSS Document */

/* Dark Red 661800  blue 003366  dk blue 002447  lt. blue BFDFFF gray/blue 5C6773 */

/* Sets the overall font, color and sizes for the page */
body {
	font-family: verdana, Arial, Helvetica, sans-serif;
	font-size: 85%;
	background-color:#BFDFFF;
	color:#333333;
	padding: 0px;
	text-align: center; /* for IE DO NOT change */
	margin: 0;
	}
	
/* container element for all the content on the page. Sets a main border for the page */

div#contain {
	text-align: left; /* counter the body center DO NOT change */
	border: 1px solid #002447;
	background-color:#FFFFFF;
	margin: auto;
	width: 750px;
	}
	
/* This is where the workshop title image lives. */	
div#header {
	text-align:right;
	height:50px;
	}

/* The footer contains the mainained by and copyright info. You may want to chane the border-top color property, otherwise you shouldn't need to change anything  */	
div#footer {
	border-top: 1px solid #002447;
	text-align:center;
	font-size: .8em;
	background-image:url(../assets/assets/graphics/acc_logo_color_small.gif); 
	background-repeat:no-repeat;
	background-position:right;
	height:75px;
	}
	

/* This is where the main content of the workshop lives. You may want to change the border-top color, other than that, this does not really need to changed. */
div#content {
	border-top: 2px solid #002447;
	border-bottom: 1px solid #002447;
	font-size: .9em;
	padding: 10px 10px;
	}
	
#website a:link, a:visited{color:#003366; text-decoration:underline;}
#website a:hover {color:#990000; text-decoration:none;}
	
/*This controls the Previous and Next text. You can change the color of the text and the border color properties */
div#nav {
	padding:5px;
	color:#333333;
	font-size: 1em;
	border-top: 1px solid #002447;
	border-bottom:1px solid #002447;
	}
div#next {display:inline; margin-left: 555px;}
/* controls the colors and styles for the previous and next link text */	
div#nav a:link {color:#661800; text-decoration:none;}
div#nav a:visited {color:#661800; text-decoration:none;}
div#nav a:hover {color:#333333; text-decoration:none;}


/*This controls the numbers area. You can change the color and background-color elements of the #num id. Also the a:link, etc, controls the color and styles of the links. Change accordingly */
div#num {font-size: .8em; color:#EDDD9E; background-color:#003366;}
div#num a:link {color:#EDDD9E; text-decoration:none;}
div#num a:visited {color:#EDDD9E; text-decoration:none;}
div#num a:hover {color:#ffffff; text-decoration:none;}

/*Controls the color and style of links in the general Content area of the page. */	
a:link {color:#661800; text-decoration:underline;}
a:visited {color:#661800; text-decoration:none;}
a:hover {color:#999999; text-decoration:none;}

/*Controls the header elements of the page. Change accordingly */
h1 {color:#333333; font-size: 1.3em; text-align: center;}
h2 {color:#661800; font-size: 1.1em; text-decoration:underline; font-weight:bold;}
h3 {color:#993300; font-size: 1em; font-weight:bold; text-align:center;}
h4 {color:#661800; font-size: 1.1em; font-weight:bold; text-align:left; text-decoration:underline;}

/* This is a special class. DO NOT change */
#vs table {font-size: .8em; padding: 2px; vertical-align:middle;}

/* This is a special class that I apply to paragraph elements to make them stand out. It indents the paragraph and creates a colored box with border around text to make it stand out. You can change the color, background-color or any other elements. Apply it as a class as needed */
.tip {background-color:#BFDFFF; color:#000000; padding:5px; border: 1px #999999 solid; margin-left: 25px; width:500px;}

/* classes that allow greater control of images. This is applied as a class to the img property. Use as needed. */
.rimage {float:right; padding-left: 5px;}
.limage {float:left; padding: 3px;}