/* Style sheet for Basement Boys web pages */

/* Layout Style */ 
body{
 margin: 0;
 padding:0; 
 
 background:#808080;
 color: #333333;
 }	 
	 
#lh-col{
 position:absolute;
 top:62px;
 left:0;
 width:140px;
 z-index:3;
 background:#c0c0c0;
 color: #333333;}

#rh-col{
 position:absolute;
 top:62px;
 right:0;
 width:140px;
 z-index:2;
 background:#c0c0c0;
 color: #333333;}

#c-block {
 width:100%;
 z-index:1;
 background:#c0c0c0;
 color: #333333;
 height:80%;}

#hdr{
 height:60px; 
 border-bottom:1px solid #000000; 
 width:100%; 


 background:#eeeeee;
 color: #333333; 
 margin:0;
  }

#c-col{
 margin:0 142px 0 142px;
 position:relative;
 background:#ffffff;
 color: #333333;
 z-index:5;
 border: solid #000000;
 border-width:0 1px;
 }

#ftr {
 width:100%;
 height:70px;
 border: solid #000000; 
 border-width:1px 0;
 background:#eeeeee;
 color: #333333;
 margin:0;
 padding: 10px;
 }

/* Presentation Style */ 
p {
 padding: 0 15px;
 }

h1 {
  text-align: center;
} 

h4, h3 {
 margin:0; 
 padding: 5px 0;
 }

p:first-letter {
 font-size: 80%; 
 font-weight: bold;
 color:blue;
 }

li:first-letter {
 font-size: 80%; 
 font-weight: bold;
 color:blue;
 }

/* Image thumb nail expansion */
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}