/* The styles for the body element sets all margins and padding to 0 to overide any defaults. It also make all text black and background white. Font-family and size are not set, so will show the default.   */

body {
		margin:0;
		padding:0;
		background: url('images/image4821lighter50.jpg');		
	}
	
/* these are the link styles for all links, except where specified in the styles for nav  */

nav a:link, a:visited  {
		color: #070075;
	}
	
nav a:hover, a:focus {
		color: #6FABFF;

	}
	
/* by making all the HTML5 elements display "block", we ensure that browsers still confused by these these new element tags will display properly as block-level */	

section, header, footer, aside, nav, article  {
  display: block;
}
	
/* The styles for the wrapper id create a 755 pixel box that is centered in the browser window with auto left/right margins. Top and bottom margins set to 20 pixels, but you can change this and not effect the centering. 
I have also put different color 1pixel borders around each div so that you see what is happening. 
Adding these borders forced me to change the original wrapper size from 750 pixels to 754 pixels in order to accomodate the increased size of the two columns (4 sides increased by 1 pixel= 4 pixels). */
	
	
#wrapper {
		width:1000px;
		margin:50px auto;
		border: none;
	}
	
/* The "header" is a box where the default is 100% width. So it goes to meet the edge of its parent, the wrapper id. 5px top and bottom, 10px left and right padding.   */

header {
		border: 1px solid #ddd;
		font-family: OCR A std, Courier New;
		background-color: #fff;
		color: #000444;
		text-decoration: none;
		word-spacing: normal;
		text-align: left;
		letter-spacing: 0;
		line-height: 1.5em;
		font-size: 1em;
		box-shadow: 0px 0px 10px 0px #444; 
		background: url(images/slivercombo.jpg) no-repeat;

}
	
	
header span {   
	font-family: Verdana;
	font-size: .75em;
	font-weight: bold;
	list-style-type: none
}

/* The styles for the "nav" centers the box with left and right margins set to auto.    */
    

nav {	
		background-color: #fff;
		width: 1000px;
		height: 5em;
		float: right;
		list-style-type: none;
		box-shadow: 0px 0px 10px 0px #444; 
		background: url(images/slivercomboinvert.jpg) no-repeat;
	
		}


nav ul {
		margin: 0;
		padding:0;
		list-style-type: none;
		border: 1px #ddd;
	}


/* The styles for li element (how the listed text appears) of the the unordered list, sets the display to inline, overriding the default block-level. This turns a list into a horizontal nav bar!  */

nav li {
		margin:0;
		padding:0;
		list-style-type: none;
		color: #000;
		box-shadow: 0px 0px 10px 0px #444; 
		font-size: large;
		float: right;
		display: block;
		text-align: center;
		padding: 1px;
		text-decoration: none;
		width: 7.5em;
		margin: 1px;
		font-family: Verdana, sans-serif;	
	}
	
	
/* I don't want the text for this nav to be at .3 opaque, but I couldn't understand how to turn off the opacity for the li. (The styles for li elements in their various link states. The first a element styles set up the basic look, then the a:link, a:visited receive same style, as do a:hover and a:focus.)  */	
	

nav li a {
	color: #000;
	font-weight: bold;

		}
	
nav.navigation li a:link, nav li a:visited  {
		
		background: #890026;
		border: 2px solid #890026;
		border-radius: 15px 15px 0px 0px;
	}
	
nav.navigation li a:hover, nav li a:focus {
		color: #000;
		background: #b6b6b5;
		border: 2px solid #b6b6b5;
	}
		
		
	
	
/* The styles for the Main id (left column), with a width in pixels, padding and the float left. Floating left will make the next column (sidebar) "wrap" or sit adjacent to the main column instead of below with a line-break. allowing room for dropshadows.*/
div.data {
	font-family: OCR A Std, Courier New; 
	font-size: .9em;
	line-height: 2em;
	margin-top: 30px;
	margin-left: 20px;
	margin-bottom: 20px;
	
}

article {
		float:left;
		margin-top: 20px; 
		width:450px;
		padding: 0px 20px;
		border: 1px solid #444;
		font-family: 'Verdana';
font-size: 1.2em;
line-height: 2em;
letter-spacing: 0;
text-align: left;
word-spacing: normal;
text-decoration: none;
color: #fff;
background-color: #232323;
box-shadow: 0px 0px 10px 0px #444; 

		}

	
/* I have the text in nested divs and want them to line up with the photo images in the aside column, based on the two column system. There is probably a better way to do it. Thumbnails would probably be nice, maybe I can work on that later. I have purposely left the borders a slightly different color than the background, because I like the effect. Others might not agree...(In order to make nestedDiv1 and nestedDiv2 appear side-by-side, we must make them float:left and make sure their widths allow them to fit inside of #main.)  */
	
#nesteddiv0	{
		float:left;
		width:400px;
		height:25px; 
		padding:15px;
		border: 3px solid #000;
		background-color: #000;


	}
#nesteddiv1 {
		float:left;
		width:436px;
		padding:5px;
		border-top:3px solid #444;
		border-right: 3px solid #444;
		border-bottom:280px solid #000;
		border-left: 3px solid #444;
		font-family: 'Verdana', sans serif;
background-color: #fff;
color: #444;
text-decoration: none;
word-spacing: normal;
text-align: left;
letter-spacing: 0;
line-height: 1.5em;
font-size: .75em;
	}
#nesteddiv2 {
		float: left;
		margin: 3px;
		width:436px;
		padding:5px;
		border-top:40px solid #000;
		border-right: 3px solid #444;
		border-bottom:20px solid #000;
		border-left: 3px solid #444;
						font-family: 'Verdana', sans serif;
background-color: #fff;
color: #444;
text-decoration: none;
word-spacing: normal;
text-align: left;
letter-spacing: 0;
line-height: 1.5em;
font-size: .75em;
	}	
	
	
	
	
	
	
	
	
#nesteddiv2 img {
margin: 10px 10px;
padding: 10px;
float: left;
}	



#nesteddiv3 {
		float: left;
		margin: 3px;
		width:436px;
		padding:5px;
		border-top:10px solid #000;
		border-right: 3px solid #444;
		border-bottom:50px solid #000;
		border-left: 3px solid #444;
		font-family: 'Verdana', sans serif;
background-color: #fff;
color: #444;
text-decoration: none;
word-spacing: normal;
text-align: left;
letter-spacing: 0;
line-height: 1.5em;
font-size: .75em;
	}	
#nesteddiv3 img {
margin: 50px 100px;
padding: 10px;
}		
	#nesteddiv4 {
		float: left;
		margin: 3px;
		width:436px;
		padding:5px;
		border-top:13px solid #000;
		border-right: 3px solid #444;
		border-bottom:450px solid #000;
		border-left: 3px solid #444;
		font-family: 'Verdana', sans serif;
		color: #000;
background-color: #fff;
text-decoration: none;
word-spacing: normal;
text-align: left;
letter-spacing: 0;
line-height: 1.5em;
font-size: .75em; 

	}	
	#nesteddiv4 img {
margin: 10px 10px;
padding: 10px;
}
		#nesteddiv5 {
		float: left;
		margin: 3px;
		width:436px;
		padding:5px;
		border-top:15px solid #000;
		border-right: 3px solid #444;
		border-bottom:10px solid #000;
		border-left: 3px solid #444;
		font-family: 'Verdana', sans serif;
background-color: #fff;
color: #444;
text-decoration: none;
word-spacing: normal;
text-align: left;
letter-spacing: 0;
line-height: 1.5em;
font-size: .75em;
	}	
	
#nesteddiv5 img {
margin: 10px 10px;
padding: 10px;
}		
		#nesteddiv6 {
		float: left;
		margin: 3px;
		width:436px;
		padding:5px;
		border-top:43px solid #000;
		border-right: 3px solid #444;
		border-bottom:180px solid #000;
		border-left: 3px solid #444;
		font-family: 'Verdana', sans serif;
background-color: #fff;
color: #444;
text-decoration: none;
word-spacing: normal;
text-align: left;
letter-spacing: 0;
line-height: 1.5em;
font-size: .75em;
	}	
		#nesteddiv7 {
		float: left;
		margin: 3px;
		width:436px;
		padding:5px;
		border-top:10px solid #000;
		border-right: 3px solid #444;
		border-bottom:380px solid #000;
		border-left: 3px solid #444;
		font-family: 'Verdana', sans serif;
background-color: #fff;
color: #444;
text-decoration: none;
word-spacing: normal;
text-align: left;
letter-spacing: 0;
line-height: 1.5em;
font-size: .75em;
	}	
#nesteddiv8 {
		float: left;
		margin: 3px;
		width:436px;
		padding:5px;
		border-top:100px solid #000;
		border-right: 3px solid #444;
		border-bottom:135px solid #000;
		border-left: 3px solid #444;
		font-family: 'Verdana', sans serif;
background-color: #fff;
color: #444;
text-decoration: none;
word-spacing: normal;
text-align: left;
letter-spacing: 0;
line-height: 1.5em;
font-size: .75em;
	}	
#nesteddiv8 img {
margin: 10px 50px;
padding: 10px;
}	
#nesteddiv9 {
		float: left;
		margin: 3px;
		width:436px;
		padding:5px;
		border: 3px solid #988;
		font-family: 'Verdana', sans serif;
		border-top:13px solid #000;
		border-right: 3px solid #444;
		border-bottom:70px solid #000;
		border-left: 3px solid #444;
background-color: #fff;
color: #444;
text-decoration: none;
word-spacing: normal;
text-align: left;
letter-spacing: 0;
line-height: 1.5em;
font-size: .75em;
	}	
#nesteddiv10 {
		float: left;
		margin: 3px;
		width:436px;
		padding:5px;
		border: 3px solid #988;
		font-family: 'Verdana', sans serif;
		border-top:13px solid #000;
		border-right: 3px solid #444;
		border-bottom:175px solid #000;
		border-left: 3px solid #444;
background-color: #fff;
color: #444;
text-decoration: none;
word-spacing: normal;
text-align: left;
letter-spacing: 0;
line-height: 1.5em;
font-size: .75em;
	}	
#nesteddiv11 {
		float: left;
		margin: 3px;
		width:436px;
		padding:5px;
		border: 3px solid #988;
		font-family: 'Verdana', sans serif;
background-color: #fff;
color: #444;
text-decoration: none;
word-spacing: normal;
text-align: left;
letter-spacing: 0;
line-height: 1.5em;
font-size: .75em;
	}	
/* The styles for the Sidebar id (right column) can be floated left or right. Try both. It depends on what you want to happen in-between the two columns. Right now the width for left and right columns are set exactly so they sit next to eachother. Try changing these widths to see what happens.   */
	

aside {
		float:left;
		width:120px;
		margin-top: 20px;
		padding:5px;
		margin-left: 20px;
		border: 12px dotted #fff;
		font-family: 'Verdana', sans serif;
		border-top:10px dotted #fff;
		border-right: 10px dotted #fff;
		border-bottom:10px dotted #fff;
		border-left: 10px dotted #fff;
color: #fff;
background: #232323;
text-decoration: none;
word-spacing: normal;
text-align: left;
letter-spacing: 0;
line-height: 1.5em;
font-size: .75em;
box-shadow: 0px 0px 10px 0px #444; 
	}
	
	
footer {
	clear: both;
	padding: 20px;
	text-align: center;
	color: #444;
	}
		
	
	
img {
box-shadow: 0px 0px 10px 0px #444; 
}
 	
	
/* End  */