/* 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 100%/135% Verdana, Sans-serif; /*sets the font weight size line height and font  */
	background:#2B1A0C url(../images/index_images/body_background2.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/places_top.jpg);
}
#bottomlogo{
	height: 121px;
	background: url(../images/index_images/places_bottom.jpg)left 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:90%;
	width: 135px;
	float: left;
	margin-top: 10px;
 
  } 
     #thumbsleft a{
	color:#CCC;
	padding:2px;
	display:block; /* a element is clickable in whole acting like a button */
	border:solid 1px #fff;
	height:1%; /* this fixes a bug in ie so our links act like buttons */
	margin: 3px;
	text-decoration: none;
	background-color: #2B1A0C;
	font-size: 80%;
}
     #thumbsleft a:hover{
	display:block;
	color: #2B1A0C;
	background-color: #FBAD02;
}
  
   #thumbs {
	line-height:140%;
	width: 652px;
    margin-left:130px;
 
  }
  #leftthumbs {
	width: 190px;
	margin: 40px 0;
	float: left;
}
  
.gallery {
  float:right;
  margin:6px;
  padding:0;
  list-style:none; 
  }

.gallery li{
  display:block;
  float:left;
  margin:10px;
  padding:0;
  }
/*below does not work in IE6-*/  
img {
border:none;
}
img:hover {
opacity: 0.4;
}


/*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: none; }/*zeros any border from our images*/



#nextpage {
	width: 130px;
	float:right;
	margin:12px 12px 20px 0;
 
  }
#nextpage a{
	color:#FFF;
	display:block; /*makes whole area clickable, this makes the link look and act like a button*/
	border:solid 1px #FFF;
	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*/