/*
this is the CSS for the TRAIL OF TEARS template. 
by wrapping this text within the forward slash and asterisks the text is not renderd by the style sheet.

NOTE:
the indentations are to inform you visually of the nesting order of page elements.
the # sign is how we call out id's within the xhtml.
the . sign is how we call out classes within the xhtml.
a div acts like a container for smaller page elements like paragraphs and unordered lists. makes it easier to move them around all together.
please be careful when modifying the properties for each element.
changing the floating properties will dramatically alter the layout as will other margins and paddings properties 
CSS properties are cascading, meaning if you alter an elements property further down the css page, it overrwrites the property applied earlier.
*/


/* the body is where your main font properties should be specified. please do not alter the .8125em value which is = to 13px */
body{
	font: .8125em palatino, helvetica, arial;
	text-align: center;
	margin:0;
	padding:0;
	background:black;
	color:white;
}

/* this #wrapper holds the entire page, we call it the "containing" div or "wrapper" div and it is the outer most portion of the visual framework for the information space */
#wrapper{
	text-align:left;
	margin: 0 auto;
	width:800px; 
	background:#f6f6f6  url('../images/bg_tot.jpg') top left no-repeat;
}



/* this is your page titling */
h1.tot_pagetitle, h4.tot_subtitle{
	text-align:center;
	color:white;
	margin:0;
	padding:0;
	font-weight:lighter;
	letter-spacing:.3em;
}
	/* this modifies the previous properties but only for the H1*/
	h1.tot_pagetitle{
		font-size:2.6em;
		letter-spacing:.2em;
		padding-top:18px;
	}



/* this is the white horizontal bar above the navigation */
hr{
	color: #fff;
	background-color: #fff;
	height: 5px;
}



/*Navigation*/

/*This is your top center nav*/
ul#tot_nav{
	text-align:center;
	font-size:1.1em;
	margin:0 0 0 23px;
	padding:0 0 0 0;
	list-style:none;
}
	ul#tot_nav li{
		float:left;
		margin:0;
		padding:2px 15px;
		border-right:2px solid white;
		letter-spacing:.2em;
	}
			/* this tells the last nav cue NOT to have a right 2px solid white border */
			ul#tot_nav li.tot_navlast{
				border:none;
			}
			
	/* this effects the links themselves */
	ul#tot_nav li a{
		text-decoration:none;
		margin:0;
		padding:0;
		color:white;
	}
	ul#tot_nav li a:hover{
		text-decoration:underline;

	}



/* main content under navigation */
/* the width of all page elements combined needs to be < or = to the width set on the wrapper div above. This is the total of all widths, L and R margins and paddings, and borders across the page*/
#wrapper div#content{
	clear:both;
	padding:35px 0 0 0;
}
			/* main content on left of page for copy*/
			#wrapper div#tot_left{
				width:325px;
				float:left;
				margin-left:45px;
				letter-spacing:.08em;
			}
			
			 	/* first left paragraph*/
				div#tot_left p{
					padding-top:20px;
				}
				
				/* left image */
			 	div#tot_left img{
					width:311px;
					height:178px;
					border:none;
					margin-top:10px;
				}
				
				/* left image caption */
				div#tot_left p.center{
					text-align:center;
					margin:2px 0;
					padding:0;
					color:black;
					font-size:.7em;
				}

    		
			/*main content on right of page for flash and copy*/
			#wrapper div#tot_right{
				float:left;
				margin:0;
				width:430px; 
			}
			
					/* this is the div id=flash, inside of the right div, that holds your flash content */
					div#tot_right div#flash{
						width:320px;
						height:180px;
						border:4px solid black;
						margin-left:45px;
						background:black url('../images/tot_flash_bg.jpg') top left no-repeat;
					}
					
					/* this is the containing div found below the flash div */
					div#tot_right_btm{
						margin-top:60px;
					}
					/* this effects the paragraphs of copy found below the flash div */
					div#tot_right_btm p{
						font-size:.8em;
					}					



/*footer information*/
#footer{
	clear:both; /* the clear property makes sure this content does not start until both margins are free and "clear" of any floating elements, forcing it to stay below the floating elements */
}
	#footer ul{
		padding-top:20px;
		padding-bottom:20px;
		margin:0 auto;
		text-align:center;
	}

	#footer ul li{
		display:inline;
		text-align:center;
		margin:0 auto;
		padding:0 8px;
	}
	#footer ul li a{
		color:#000; /* using only 3 numbers is shorthand for black in CSS, #fff for white, etc. */
		text-decoration:none;
		font-size:.8em;
	}
	#footer ul li a:hover{
		text-decoration:underline;
	}