/* --------------------------------------------------
CSS Document For RICHARD HADAWAY
-------------------------------------------------- */

/* CONTAINER */

		#container {
			width: 98%;
			margin: 0 auto;
			font-family: Lucida Grande, Tahoma, Arial, Helvetica, sans-serif; /* Lucida Grande for the Macs, Tahoma for the PCs */
			font-size: 80%;
			line-height: 1.6em;
			color: #000000;
			background-color: #FFF;
		}
		
/* GENERAL MOJO AND MULA */
		
		h1 {
			font-family: Arial, Helvetica, sans-serif;
			font-weight: bold;
			font-size: 150%;
			color: #FFFFFF;
			margin-left: 5%;
			margin-bottom: 30px;			
		}
		
		h2 {
			color: #000000;
			font-size: 100%;
			font-family: Arial, Helvetica, sans-serif;
				}
		h3 {
			color: #000000;
			font-weight: normal;
			text-align: center;
			font-family: Lucida Grande, Tahoma, Arial, Helvetica, sans-serif; /* Lucida Grande for the Macs, Tahoma for the PCs */
			font-size: 100%;
margin-bottom: 0px;
								}

		h4 {
			text-align: right;
			font-size: 80%;
			color: #0000FF;
			
					}
		h5 {
			color: #000000;
			font-weight: bold;
			text-align: center;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 100%;
					}
		a {
			color:#00008B;
			text-decoration: none;
		}

		a:hover {
			color:#CCCCCC;
			background-color: #FFFFFF;
			text-decoration: underline;
		}

		
		form {
			float:right;
			margin-top: -45px;
			font-size: 9px;
		}
		
		input {
			background-color: #FFF;
			color: #999999;			
			font-size: 11px;
			padding: 3px;
		}
		
		.button {
			padding: 2px;
		}
		
/* HEADER ELEMENTS */

		#header {
			border-bottom: 4px solid #CCCCCC;
			padding-top: 10px;
			clear: both;
			margin-bottom: 10px;
			background-image:url(images/Banner.gif);
			background-repeat:repeat-x			
		}
		

		/* the slogan */
		#header p { 
			margin-top: -20px;
			margin-left: 10%;
			color: #FFFFFF;
			
		}

/* NAVIGATION ELEMENTS */
	
		 #navigation ul {
			margin-left: 0;
			padding-left: 0;
			list-style-type: none;			
			float: left;
			width: 110px;
		}

		#navigation a {
			display: block;
			padding: 5px;
			width: 110px;			
		}

		#navigation a:link, #navlist a:visited {
			color:#0000FF;
			text-decoration: none;
		}
		
		#navigation a:hover {
		text-decoration: underline;		
		}

		
/* CONTENT ELEMENTS */

		#content {
			width: 48%;
			margin-left: 15%;
			margin-right: 30%;
		}
		
		#content p {
			padding-bottom: 10px;
				}

/* SIDEBAR ELEMENTS */

		#sidebar {
			float: right;
			width: 30%;
		}
		
		#sidebar p {
			padding-bottom: 10px;			
		}
		
/*Gallery CONTENT ELEMENTS */

		#contentgall {
			width: 80%;
			margin-left: 15%;			
		}
		
		#contentgall p {
			padding-bottom: 10px;			
		}


/* Recommend ELEMENTS */

		#contentrec {
			width: 40%;
			margin-left: 15%;
			margin-right: 40%;
		}
		
		#contentrec p {
			padding-bottom: 3px;
					}

		#sidebarrec {
			float: right;
			width: 40%;
		}
		
		#sidebarrec p {
			padding-bottom: 3px;			
		}		
		
/* FOOTER ELEMENTS */

		#footer {
			margin-top: 20px;
			clear: both;
			background-color:#CCCCCC;
			padding: 0px 5px 0px 5px;
			font-size: 10px;
			color: #0000FF;
			
		}
		
		#footer p {
			color:#0000FF;
			padding: 5px;
		}
		
		#footer p a {
			color: #0000FF;
			border-bottom: 1px dotted #89817f;
		}
		
		#footer p a:hover {
			color: #FFFFFF;
			background-color:#575352;
		}
		
/* GALLERY ELEMENTS */

#container2 {
    position:relative; 
    width:550px; 
    height:396px;
    margin:20px auto 0 auto; 
    background:#fff url(images/click.jpg) 15px 10px no-repeat;
    } 
/* Removing the list bullets and indentation */
#container ul {
    padding:0; 
    margin:0; 
    list-style-type:none; 
    } 
/* Remove the images and text from sight */
#container2 a.gallery span {
    position:absolute; 
    width:1px; 
    height:1px; 
    top:5px; 
    left:5px; 
    overflow:hidden; 
    background:#fff;
    }
/* Adding the thumbnail images */
#container2 a.gallery, #container a.gallery:visited {
    display:block; 
    text-decoration:none; 
    border:1px solid #000; 
    margin:1px 2px 1px 2px; 
    text-align:left; 
    cursor:default;
    }
/* change the thumbnail border color */
#container2 a.gallery:hover {
    border:1px solid #fff; 
    }
/* styling the :hover span */
#container2 a.gallery:hover span {
    position:absolute; 
    width:315px; 
    height:372px; 
    top:10px; 
    left:15px; 
    color:#000; 
    background:#fff;
    }
#container2 a.gallery:hover img {
    border:1px solid #fff; 
    float:left; 
    margin-right:5px;
    }
#container2 a.slidea {
    background:url(images/iconimage1.jpg); 
    height:93px; 
    width:60px;
    }
#container2 a.slideb {
    background:url(images/iconimage1a.jpg); 
    height:93px; 
    width:60px;
    }
#container2 a.slidec {
    background:url(images/iconimage3a.jpg); 
    height:93px; 
    width:60px;
    }
#container2 a.slided {
    background:url(images/iconimage2.jpg); 
    height:60px; 
    width:93px;
    }
* html #container2 a.slided {
    width:91px; 
    w\idth:93px;
    }
#container2 a.slidee {
    background:url(images/iconimage5a.jpg); 
    height:60px; 
    width:93px;
    }
#container2 a.slidef {
    background:url(images/iconimage3.jpg); 
    height:60px; 
    width:93px;
    }
* html #container2 a.slidef {
    width:91px; 
    w\idth:93px;
    }
#container2 a.slideg {
    background:url(images/iconimage6.jpg); 
    height:60px; 
    width:93px;
    }
#container2 a.slideh {
    background:url(images/iconimage2a.jpg); 
    height:93px; 
    width:60px;
    }
#container2 a.slidei {
    background:url(images/iconimage4a.jpg); 
    height:93px; 
    width:60px;
    }
#container2 a.slidej {
    background:url(images/iconimage7.jpg); 
    height:93px; 
    width:60px;
    }
#container2 a.slidek {
    background:url(images/p12_t.jpg); 
    height:60px; 
    width:93px;
    }
* html #container2 a.slidek {
    width:91px; 
    w\idth:93px;
    }
#container2 a.slidel {
    background:url(images/p12_t.jpg); 
    height:60px; 
    width:93px;
    }
/* set the size of the unordered list to neatly house the thumbnails */
#container2 ul {
    width:198px; 
    height:386px;
    margin:5px; 
    float:right;
    }
#container2 li {
    float:left;
    }
/* #container2 a.slideb:hover img, #container2 a.slidei:hover img {
    float:right;
    }*/