/*Colourful Ranch website for assignment5-4304 -Karen Passmore.*/


body {
	text-align: center;
	background: #fff url(images/background_cranch.jpg) no-repeat center top;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}

#wrapper {
	width: 735px;
	margin: 0 auto;
	text-align: left;
	background: #be3db4;
}
/*text-align: left; added as IE5.x and IE6 does not recognize the auto margin property, plus the text-align:center: code is added to 'body'*/

#header img {
	float: left;
	padding-bottom: 3px;
	margin: 20px 0px 13px 0px;
	background: #fff;
}


/*navigation.............Marg. was at -20px 20px 25px ..............*/
#navcontainer ul { 
	margin: 0 0 0 20px; 
	padding: 0; 
	list-style-type: none; 
	text-align: center; 
	float: left;
} 

#navcontainer ul li { 
	display: inline;  
}


/*content...for all pages except the home and bird page................*/
#content {
	width: 530px;
	height: 100%;
	float: right;
	color: #069;
	background: #ccc;
	margin: 2px 20px 20px 0;
	border: 5px solid gray;
}

#content h2 {
	font-size: 130%;
	text-align: center;
	font-style: italic; 
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #069; background: #fff;
	
}

#content h3 {
	font-size: 100%;
	text-align: left; 
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #069; background: #ccc;
	padding: 0 5px 0 5px;
	
}

#content p {
	text-align: justify;
	padding: 2px 5px 2px 5px;
}

#content img {
	float: inherit;
	padding: 3px;
	margin: 5px;
	border: 1px solid #fff;
	background: #fff;
 }
 
 /*content...for the home page................*/
#contenthome {
	width: 530px;
	height: 100%;
	float: right;
	color: #069; background: #ccc;
	margin: 2px 20px 20px 0;
	border: 5px solid gray;

}

#contenthome h2 {
	font-size: 130%;
	text-align: center;
	font-style: italic; 
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #069; background: #fff;
	
}

#contenthome h3 {
	font-size: 100%;
	text-align: center; 
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #069; background: #ccc;
	padding: 0 5px 0 5px;
	
}

#contenthome p {
	text-align: left;
	padding: 2px 5px 2px 5px;
}

IMG.slideshow {
    display: block;
    margin-left: auto;
    margin-right: auto;
	padding: 3px;
	border: 3px solid #ccc;
	background: #fff; color: #fff;
}

/*content...for bird page................*/
#contentbird {
	width: 540px;
	height: 100%;
	float: right;
	color: #069; background: #ccc;
	margin: 2px 20px 20px 0;
	border: 5px solid gray;

}

#contentbird h2 {
	font-size: 130%;
	text-align: center;
	font-style: italic; 
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #069; background: #fff;
	
}

#contentbird p {
	text-align: left;
	padding: 2px 5px 2px 5px;
}

#contentbird img {
	position: relative;
	padding: 3px;
	margin: 5px 0px 5px 120px;
	border: 1px solid #fff;
	background: #fff;
 }



/*sidecolumn........................................*/

#sidecolumn {
	width: 120px;
	height: 100%;
	float: left;
	background: #918390;
	color: #000;
	margin: 55px 0 0 20px;
	padding: 2px;
	border: 3px solid white; /* ------works fine with purple BG */
}

#sidecolumn p {
	text-align: center;
	font-size: 14px;
	margin: 1px;
	padding: 5px;
}

/*links---for side Column ------*/ 

#sidecolumn a:link {
	text-decoration: none;
	color: #fff;
	background: #918390;
}  

#sidecolumn a:visited {
	text-decoration: none;
	color: #fff;
	background: #918390;
}

#sidecolumn a:hover {
	text-decoration: none;
	color:#FEEE05;
	background: #918390;
}  

#sidecolumn a:active {
	text-decoration: underline;
	color: #fff;
	background: #918390;
}  



/*SIDE COLUMN B-------------------------------*/
#sidecolumn-b {
	width: 120px;
	height: 100%;
	float: left;
	background: #918390;
	color: #000;
	margin: 40px 0 0 20px;
	padding: 2px; 
	border: 3px solid white; /* --works fine with purple BG */
}

#sidecolumn-b p {
	text-align: center;
	font-size: 14px;
	margin: 1px;
	padding: 5px;
}

#sidecolumn-b img {
	float: inherit;
	padding: 1px;
	margin: 3px;
	border: 1px solid #000;
	background: #369;
 }
 
/*links---for side Column b------*/ 

#sidecolumn-b a:link {
	text-decoration: none;
	color: #fff;
	background: #918390;
}  

#sidecolumn-b a:visited {
	text-decoration: none;
	color: #fff;
	background: #918390;
}

#sidecolumn-b a:hover {
	text-decoration: none;
	color:#feee05;
	background: #918390;
}  

#sidecolumn-b a:active {
	text-decoration: underline;
	color: #fff;
	background: #918390;
}  

 
/*SIDE COLUMN C----------*/
#sidecolumn-c {
	width: 120px;
	height: 100%;
	float: left;
	background: #918390;
	color: #000;
	margin: 40px 0 20px 20px;
	padding: 2px;  
	border: 3px solid white; /* ------works fine with purple BG  */
}

#sidecolumn-c p {
	text-align: center;
	font-size: 12px;
	margin: 1px;
	padding: 5px;
}

#sidecolumn-c img {
	float: inherit;
	padding: 1px;
	margin: 3px;
	border: none;
 }
 
 /*links---for side Column b------*/ 

#sidecolumn-c a:link {
	text-decoration: none;
	color: #fff;
	background: #918390;
}  

#sidecolumn-c a:visited {
	text-decoration: none;
	color: #fff;
	background: #918390;
}

#sidecolumn-c a:hover {
	text-decoration: none;
	color:#feee05;
	background: #918390;
}  

#sidecolumn-c a:active {
	text-decoration: underline;
	color: #fff;
	background: #918390;
}  


/*footer........................................*/
#footer {
	clear: both;
	color: #000; background: #999;
	border: 5px solid gray;
}


#footer p {
	padding: 2px 5px 2px 2px;
	text-align: right;
	font-size: 60%;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}

#footer a:link {
	text-decoration: none;
	color: #000;
	background: #999;
}  

#footer a:visited {
	text-decoration: none;
	color: #000;
	background: #999;
}

#footer a:hover {
	text-decoration: none;
	color:#feee05;
	background: #999;
}  

#footer a:active {
	text-decoration: underline;
	color: #000;
	background: #999;
}  



/*Photo Gallery of Birds */
   
#birds {
    position: relative; 
    width:540px; 
    height:300px; 
    margin:30px 0px 0 auto;  
    border:0px solid #aaa;
	background:#ccc url(images/photogallery/birds/macaw_01.jpg) 5px 5px no-repeat; 
	
    }
	
#birds ul {
    padding:0 2px 0 0; 
    margin:5px 0 0 5px; 
    list-style-type: none;
	width:300px; 
    height:300px; 
    float:right; 
    }
	
#birds li {
    float:right;
    }

/* Removes the images and text from sight */	
#birds a.gallery span {
    position:absolute; 
    width:1px; 
    height:1px; 
    top:5px; 
    left:5px; 
    overflow:hidden; 
    background:#fff;
    }
	
/* Adding the thumbnail images */	
#birds a.gallery, #container a.gallery:visited {
    display:block; 
    color:#000; 
    text-decoration:none; 
    border:1px solid #000; 
    margin:1px 2px 2px 2px; 
    text-align:center; 
    cursor:default;
    }
	
#birds a.slidea {
    background:url(images/photogallery/birds/macaw_thb.jpg); 
    height:70px; 
    width:70px;
    }
#birds a.slideb {
    background:url(images/photogallery/birds/yecrownama_thb1.jpg); 
    height:70px; 
    width:70px;
    }
#birds a.slidec {
    background:url(images/photogallery/birds/lovebirdsgreen_thnb.jpg); 
    height:70px; 
    width:70px;
    }

#birds a.slidee {
    background:url(images/photogallery/birds/birds_thb2.jpg); 
    height:70px; 
    width:70px;
    }

	#birds a.slideg {
    background:url(images/photogallery/birds/bluebirdlove_thnb.jpg); 
    height:70px; 
    width:70px;
    }
	
	#birds a.slidei {
    background:url(images/photogallery/birds/greenteam_thnb.jpg); 
    height:70px; 
    width:70px;
    }
	
	#birds a.slidej {
    background:url(images/photogallery/birds/doubleyellowheaded_thnb.jpg); 
    height:70px; 
    width:70px;
    }
	
	#birds a.slidek {
    background:url(images/photogallery/birds/doubleyellowheaded2_thnb.jpg); 
    height:70px; 
    width:70px;
    }
	#birds a.slidel {
    background:url(images/photogallery/birds/canaries_tm.jpg); 
    height:70px; 
    width:70px;
    }


#birds a.gallery:hover {
    border:1px solid #fff; 
    }
	
/* styling the :hover span */
#birds a.gallery:hover span {
    position:absolute; 
    width:300px; 
    height:300px; 
    top:5px; 
    left:5px; 
    color:#000; 
    background:#ccc;
    }
		
#birds a.gallery:hover img {
    border:0px solid #000; 
    float:right; 
    margin: 0;
	padding: 1px;
    }