/* This style sheet was written by Paul Dell and was distributed  with a Template available at http://www.dellwebsites.com 
- This comment should remain intact though you are free to edit the style sheet as you see fit.Please delete all comments before uploading to the web */

/* WE STONGLY RECOMMEND THAT YOU OPEN THIS STYLE SHEET TOGETHER WITH THE HTML FILE TO GET A BETTER UNDERSTANDING */


html, body { min-height:101%; margin-bottom:1px; }/*sets a min height so ghost scrollbar appears when needed */

body {
	margin:0; /*sets the body margins to zero */
	padding:0;/*zero off any padding */
	color:#666;/*sets the font colour */
	font: normal 85%/135% Verdana, Sans-serif; /*sets the font weight size line height and font  */
	background:#FFFFFF url(../images/index_images/body_background.jpg) repeat-x; /*sets the background colour, image and repeats the image on  x  */
	}

#page {
	width: 790px; /*sets the page div width */
	margin: 0 auto;/* centres the overall design, all design elements are placed within page div */
}

/*below are the two divs that hold the header image */
#top{
	height: 157px;/*note the height value is the same as the bg image height as in #bottomlogo */
	background-image: url(../images/index_images/topimage.jpg);
}
#bottomlogo{
	height: 121px;
	background: url(../images/index_images/bottomimage.jpg) no-repeat;
}


/*footer styles*/


#footer {
	font-size:70%;
	background-color: #E2E2E2;
	background-image: url(../images/index_images/footer.jpg);
	height: 60px;
	clear: both;
	color: #FFF;
  }

#footer p {
	padding: 10px;

}

/*footer link styles*/
#footer a {
	color:#CCCCCC;
	text-decoration: underline;
}
#footer a:hover, #footer a:active {
	color:#FEBD3D;
	text-decoration: none;
  }

/*below are the styles created for the gallery pages such as portrait.html where are thumbnail photo's display */

    #thumbsleft {
	font-size:100%;
	width: 135px;
	float: left;
	margin-top: 10px;
 
  } 
     #thumbsleft a{
	color:#000;
	padding:2px;
	display:block; /* a element is clickable in whole acting like a button */
	border:solid 2px #3b3b3b;
	height:1%; /* this fixes a bug in ie so our links act like buttons */
	margin: 3px;
	text-decoration: none;
	background-color: #ad8458;
	font-size: 90%;
}
     #thumbsleft a:hover{
	display:block;
	color: #FFF;
	background-color: #3b3b3b;
}
  
   #thumbs {
	line-height:140%;
	width: 652px;
    margin-left:130px;
 
  }
  #leftthumbs {
	width: 190px;
	margin: 40px 0;
	float: left;
}
  
.gallery {
  float:center;
  margin:6px;
  padding:0;
  list-style:none; 
  display:inline;
  }

.gallery li{
  display:block;
  float:left;
  margin:10px;
  padding:0;
  }
/*below does not work in IE6-*/  
img {
border:solid 2px #3b3b3b;
}
img:hover {
opacity: 1;
}


/*link styles*/
a{
	color: #F9AD02;/*font colour for links*/
	text-decoration: none;/*removes the underline*/
}
a:visited{
	color: #898A48;/*font colour for visited state of links*/
}
a:hover{
	color: #333;/*font colour for hover state of links*/
}
a:active{
	color: #ccc;/*font colour for active state of links*/

}


img {border: solid 4px #75685c; }/*zeros any border from our images*/



#nextpage {
	width: 130px;
	float:right;
	margin:12px 12px 20px 0;
 
  }
#nextpage a{
	color:#000;
	display:block; /*makes whole area clickable, this makes the link look and act like a button*/
	border:solid 1px #000;
	height:1%;
	margin: 3px;
	font-size: 70%;
	padding-left: 3px;
}
#nextpage a:hover{
	display:block;
	border:solid 1px #fff;
	background: #676767;
}
/*We have explained all there is to explain here and we have ommitted some comments which just repeat
themselves please do not contact us for any answers that you are able 
to obtain from here http://www.w3schools.com/css/default.asp  we cannot possibly reply to questions
that are available elsewhere.
Here is a link to get you started, remember to read, and then read again.
http://www.w3schools.com/css/default.asp Have fun and we wish you the best of luck*/