/* ................................................................................ Generic Stuff */

body 	{ 
		margin:0;
		padding:0;
		
		font-family: Verdana, Helvetica, sans-serif; 
		font-size: 11px; 
		color: #333; 
		
		text-align:center; /* this is where the centering happens */
		background-color:white;
		background-image: url(page_simplewhite_2012.jpg);
		background-repeat: repeat-y;
		background-position: top center; 
		}
		
a, a:visited, a:active, a:link
		{
		color: black;
		text-decoration: none;
		border-bottom: 1px dotted grey;
		}
		
a:hover 
		{
		color: black;
		background: lightgrey;
		text-decoration: none;
		border-bottom: 1px dotted grey;
		}
		
		
/* ................................................................................ Header img */

div.header {
		position: relative;
		top: 0px;
		left: 0px;
		width: 780px;
		height: 120px;
		background-image: url(header_simplefloor5.jpg); 
		background-color: transparent;
		background-repeat: no-repeat;
		}
	
/* ................................................................................ Nav Bar */


#navigation ul {
		background-color:transparent;
		color:white;
		float:left;
		font-family:Verdana,Helvetica,sans-serif;
		margin:0;
		padding:100px 0 0 30px;
		width:750px;
		}
				
#navigation ul li { display: inline; }

#navigation ul li a 
		{
		padding: 2px 15px;
		/*padding: 2px 15px 2px 15px; i think it goes [top left bottom right] or [topbottom leftright]*/
		background-color: transparent;
		color: white;
		text-decoration: none;
		float: left;
		border-right: 1px solid white;
		border-top: 1px solid white;
		border-bottom: 0px;
		}

#navigation ul li a:hover 
		{
		background-color: black;
		color: white;
		}
		
#nav_buttons li a#current 
		{
		background: white;
		color: black;
		}

#navigation li#first a /* this specifies the first menu item and gives it and only it a left white border*/
		{
		border-left: 1px solid white;
		}
				
/* ................................................................................ Containters */
		
div.container { /* everything is inside the container, the body centers the container */
		position: relative;
		margin: 0 auto; /* the auto margin does the fixed centering trick see bluerobot */
		width: 780px;
		height: 100%;
		text-align: left; 
		}
		
div.main {
		position: absolute;
		top: 180px;/* the distance from the top of the first post */
		left: 0px;
		right: 0px;
		text-align: left;
		}	
			
		
/* ................................................................................ Blog Contents */

div.post {
		position: relative;
		padding: 0px 0px 3px 0px;
		margin: 0px 30px 50px 30px;
		}
		


.blogbar {
		position: relative;
		font-family:helvetica, georgia, times new roman, serif; 
		font-size: 14px; 
		font-weight: normal;
		background-color:white; 
		padding: 0px 0px 3px 0px;
		margin: 0px 0px 0px 0px;
		border-bottom:1px solid #808080;
		color: #c2c2c2;
		line-height:120%;
		}
		
.blogbar b {
		font-weight:normal;
		font-size: 15px;
		color: #171717;
		}
		
.blogbody {
  		line-height:140%;
		margin:0px 0px 0px -2px;
		padding:15px 0px 0px 0px;
		}	
		
/* ................................................................................ images */	
/* apply multiplie styles <img class="outline right"> */		
			
img.outline,
a img.outline,
a:visited img.outline, 
a:active img.outline, 
a:link img.outline 
		{
		background: white;
		border: 1px solid lightgrey;
		padding: 5px;
		}
		
a:hover img.outline
		{
		border: 1px solid #808080;
		}


/* left and right images here, with the paddings set */	
img.left,
a img.left,
a:visited img.left, 
a:active img.left, 
a:link img.left 
		{
		margin: 0px 20px 0px 0px;
		}
	
		
img.right,
a img.right,
a:visited img.right, 
a:active img.right, 
a:link img.right 
		{
		margin: 0px 0px 20px 20px;
		}







/* ................................................................................ objects */	
/* apply multiplie styles <object class="outline right"> */		
			
object.outline,
a object.outline,
a:visited object.outline, 
a:active object.outline, 
a:link object.outline 
		{
		background: white;
		border: 1px solid lightgrey;
		padding: 5px;
		}
		
a:hover object.outline
		{
		border: 1px solid #808080;
		}


/* left and right images here, with the paddings set */	
object.left,
a object.left,
a:visited object.left, 
a:active object.left, 
a:link object.left 
		{
		margin: 0px 20px 0px 0px;
		}
	
		
object.right,
a object.right,
a:visited object.right, 
a:active object.right, 
a:link object.right 
		{
		margin: 0px 0px 20px 20px;
		}