body
{
   width: 1160px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;
   background-color: blue;
}



/* Header */

#header
{
   width: 1150px;
   height: 160px;
   background-image: url("media/banner.png");
   background-repeat: no-repeat;
   background-position: center center;
   margin-bottom: 10px;
}






/* Menu */

#menu
{
	margin-top:10px;
   float: left; /* The menu will float left */
   width: 180px; /* Very important: set a size to the menu */
}

.menu_item
{
	width: 180px;
   background-color: #626262;
   background-repeat: repeat-x;
   border: 2px solid black;
   margin-bottom: 20px; /* To make it so there is some space in the item list */
}

/* Some improvements on the menu */


.menu_item h3 /* All menu's titles */
{    
   color: #B3B3B3;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
   padding:2px;
   margin: 2px;
}

.menu_item ul /* All bulleted lists within a menu */
{
	list-style-type:none;
   padding: 0px; /* 0 pixels inner margin for all sides */
   padding-left: 5px; /* ... but then we set the left inner margin to 20px */
   margin: 0px; /* Same for margin, to not have to write 4 (margin-left, margin-right...) */
   margin-top: 10px;
   margin-bottom: 5px; /* Same as before, we just change it for this one */
}

.menu_item li /* All bulleted lists within a menu */
{
	padding: 0px;
}	


.menu_item a /* All the links withing the menu */
{
   color: yellow;
   text-decoration:none;
}

.menu_item a:hover /* When the mouse touches the menu link */
{
   background-color: #9595ec;
   padding: 5px;
   color: black;
}






/* Body*/

#body
{
	width: 750px;
	float: left;
   margin:10px;

   padding: 5px;
   
   color: #B3B3B3;
   background-color: black;
   background-repeat: repeat-x;
   
   border: 2px solid grey;
}

#body h1 /* All the h1 body's titles */
{
   color: #FFFFFF;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#body h2 /* All the h1 body's titles */
{
   height: 30px;
   padding-left: 30px;
   color: gold;

}

#body p /* All the p body's titles */
{
   color: #FFFFFF;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}


#body a /* All the links withing the menu */
{
   color: yellow;
   text-decoration: none;
}


#body a:hover /* When the mouse touches the menu link */
{
   background-color: #B3B3B3;
   color: black;
}

#body table
{
   border-collapse: collapse;
}

#body td
{
   /*height: 80px;  I am widening the height of the cells in order for you to see the vertical alignment */
   vertical-align: bottom; /* Vertical alignment, the cells contents will be placed at the bottom */
   font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
   text-align: center;
   padding: 1px;
}

#body ul /* All bulleted lists within a menu */
{
	font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
	list-style-type:none;
   padding: 10px; /* 0 pixels inner margin for all sides */
   margin: 10px; /* Same for margin, to not have to write 4 (margin-left, margin-right...) */
	color: #FFFFFF;
}


.photocenter
{
}

.photocenter img
{
	border: 4px solid yellow;
	align: center;
}

.floatingpictureR
{
   float: right;
}

.floatingpictureL
{
   float: left;
}

.photoleft
{
  float: left;
  padding:2px 10px 8px 0px; 
  margin: 2;
  font-size:90%; 
  color: #7F8E29; 
  font-style:italic; 
  width: 202px;
}

.photocenter
{
  float: center;
  padding:2px 0px 8px 10px; 
  margin: 2;
  font-size:90%; 
  color: #7F8E29; 
  font-style:italic; 
  width: 200px;
}

.photoright 
{
  float: right; 
  padding:2px 0px 8px 10px; 
  margin: 0;
  font-size:90%; 
  color: #7F8E29; 
  font-style:italic; 
  width: 202px;
}



/* Menu */

#rightpane
{
	margin-top:10px;	
   float: left; /* The menu will float left */
   width: 180px; /* Very important: set a size to the menu */
}


/* The footer (at the bottom of the pages, usually for copyrights) */

#footer
{
   padding: 5px;
   clear: both;
   text-align: center;
   color: #B3B3B3;
   background-color: #626262;
   background-repeat: repeat-x;
}