body {
	background-color: #000; /*full page background color*/
	font-family: arial, verdana, sans-serif;
	font-size: 100%;	
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. 
	For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) 
	they contain. Remember that what you do here will cascade to the .nav list unless you write a more 
	specific selector. */
	padding: 0;
	margin: 0;
}

h1, h2, h3, h4, h5, h6, p {

	margin-top: 0; 

	/* removing the top margin gets around an issue where margins can escape from their containing div. The remaining 
	bottom margin will hold it away from any elements that follow. */

	padding-right: 15px;
	padding-left: 15px; 

	/* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any 
	box model math. A nested div with side padding can also be used as an alternate method. */
}

/* ~~ Top part of every page, background of the banner image, and set up of the banner ad. ~~ */

.header {
	padding-bottom: 10px;
	color: #000;
	background-color: #bababa; /*background of header. If your header picture does not show up, this color, should be same as 
	container below, is what visitors will see.*/
	padding: 00px 0px 00px 00px;
	margin-bottom: 10px;	
}

.banner_ad {
	padding-bottom: 10px;
	float: right;
	color: #212121;
	background-color: #bababa; /*background of header, same as container below so that an odd color does not appear to the right
	of the banner ad*/
	padding: 00px 40px 00px 00px;
	margin-bottom: 10px;	
}

/*~~ The link attributes are for the buttons on the menu ~~*/

a:link {
	text-decoration: underline;
	color: blue;
}

a:visited {
	text-decoration: none;
	color: blue;
}

a:hover, ul.nav a:active, ul.nav a:focus {
	 /* this changes the background and text color for both mouse and keyboard navigators */
	background-color: #9933FF;/*this is the background color of the main content section  when you hover over it*/
	color: #fff; /* When the background turns yellow, the text turns black. */
}

#container {
	width: 1000px;
	background-color: #bababa; /*background of center area of page, where the "main" section is, banner_ad, above, should use this 
	same color.*/
	margin: auto;	
}

/*~~ Sidebar 1 is the navigation section on the left side of the page. ~~*/

.sidebar1 {
	float: left;
	width: 180px;
	background: #212121;/*this is the background color of the sidebar other than the menu buttons*/
	padding-bottom: 10px;
	margin-bottom: 10px;
	color: white; /* This is the color of the text that is below the nav buttons.*/	
}

.sidebar2 {
	float: left;
	width: 180px;
	background: #212121;/*this is the background color of the sidebar other than the menu buttons*/
	padding-bottom: 10px;
	margin-bottom: 10px;
	color: white; /* This is the color of the text that is below the nav buttons.*/	
}

/*~~ "content," and "jd_content," are the main box of text for each page. ~~*/

.content {
	text-align: justify;
	margin: 0px 0px 10px 10px;
	padding-top: 10px;
	width: 810px;
	font-size: .85em;
	background: #ffffff;
	float: right;
}

.jd_content {
	text-align: justify;
	margin: 0px 0px 10px 10px;
	padding-top: 10px;
	width: 810px;
	font-size: .85em;
	background: #ffffff;
	float: right;
}

/* ~~ This grouped selector gives the lists in the .content area some space (padding) ~~ */

.content ul, .content ol { 
	padding: 0 15px 15px 40px;
	/* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the 
	bottom for space between other elements on the lists and on the left to create the indention. These may be 
	adjusted as you wish. */
}

/* ~~ The navigation list styles - this is specifically for the menu area of the sidebars ~~ */

#nav {
	list-style: none; /* this removes the list marker */
	text-decoration: none;
	border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom 
	border on the LI */
	margin-bottom: 15px; /* this creates the space between the navigation on the content below */
	margin-left: 10px;
	margin-right: 10px;
	/*padding: 8px 0px 8px 0px;*/
}


#nav li {
	border-bottom: 1px solid #666; /* this creates the button separation, it is the bottom line of the button */
	/*padding: 5px 0px 5px 0px;*/
}

#nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	/*padding: 3px 3px 3px 10px; changed 5's to 3's*/
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire 
	area to react to a 	mouse click. */
	text-decoration: none;
	background: #212121;/*background color of the buttons.*/
	color: #ffffff;
}

#nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	text-decoration: none;
	background-color: #9933FF;/*this is the background color of the button when you hover over it*/
	color: #fff;/*this is the text color when you hover over a button.*/
}

/* ~~The footer ~~ */

.footer {
	font-size: .5em;/*added from my code*/
	color: #ffffff;  /*color of font*/
	text-align: center;/*added from my code*/
	/*padding: 10px 0; */ /*pulling this makes the footer a thinner line, padding is inside the color band*/
	background: #000;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both;  /*this clear property forces the .container to understand where the columns end and contain them */
}

/* ~~miscellaneous float/clear classes~~ */

.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be 
	next to on the page. */
	float: right;
	margin-left: 8px;
}

.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be 
	next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the 
	#container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

.box {
	margin: 5px 15px 15px 15px;
	padding: 15px;
	background-color: #ddee33;
	border: 3px solid #ddaa22;	
}