/*This is the font family, margins, and background picture.*/



body {

  background: #efe5d0 url(pics/deadpewl.jpg) top left;

  font-family: Verdana, Helvetica, Arial, sans-serif;

  margin: 20px;

}



/* This says that the logo should be absolute positioned so it will always be at the top left and 250px in width and 200px in height */

#logo img{

position:absolute; 

top:-10px; 

left:-10px; 

width:250px; 

height:200px;

}



/*This says that the table border should be dotted, a padding of 10px and the background url in the table should be deadpool5*/



table {

  border: thin dotted red;

  padding: 10px;

  background: url(pics/deadpool5.jpg) right  ;

  color: red;

  background-size: cover;

}





/* This only selects h1's in the div "selectingstoof" and tells it to make the background of those black */

#selectingstoof h1 {

background-color: black;

}





/* This says that everything in the form will be absolute positioned. */

#selectingstoof {

position:absolute;

top:10px;

left:300px;

}



/* This says that anytime you mouse over a paragraph tag in the form the font color will change to white, the background image for that paragraph will change to a new picture. */

#selectingstoof p:hover {

color: white;

background-color: white;

background: url(pics/deadpool.png) center;

}



/* Everything below this line allows the links to change color, have font colors, absolute positioning, margins, etc. */

#sidebar {

position:absolute;

top:100px;

left:-60px;

background-color: black;

width: 100px;

}







#navcontainer ul {

position:absolute;

top:200px;

left:10px; 

margin: 0;

padding: 0; 

list-style-type: none; 

}



#navcontainer a {

 display: block;

 color: red;

 background-color: black;

 width: 9em;

 height: 2em;

 padding: .2em .8em;

 text-decoration: none;

 }

 

 #navcontainer a:hover

{

background-color: red;

color: black;

}

#navcontainer li { 

margin: 0 0 .2em 0; 

}



#logo img{

position:absolute; 

top:-10px; 

left:-10px; 

width:250px; 

height:200px;

}