/*choose a suitable font and centre the #container div - 
text-align:centering will only target Internet explorer & Opera, all other browsers will 
ignore this styling, correct method is Step 4 for all other browsers*/
body {
	text-align:center;
	font-family:tahoma, arial, sans-serif;
	font-size:76%;
	letter-spacing:0.05em;
	}

#howto {
	position: relative;
	float:left;
	width:18%;
	border:1px solid #CCC;
	margin:1px 2px 1px 2px;
	font-size:1.3em;
	}
	
/* The containing box for the gallery */
#container {
	position:relative;
	width:770px;
	height:440px;
	margin:20px auto 0 auto; /* this is the centering step for non-IE browsers*/
	border:1px solid #aaa;
	}
/* removing list bullets and indentation - different browsers use diff
 methods - IE & Opera use margin values; Moz/netscape/ff use padding values*/
#container ul {
	padding:0;
	margin:0;
	list-style-type:none;
	}
/*remove the images and text from sight. gives them all the same absolute 
positions using the <span> and size of 1 px so that only a dot is visible*/
#container a.gallery span {
	position:absolute;
	width:1px;
	height:1px;
	top:5px;
	left:5px;
	overflow:hidden;
	background:#fff;
	}
	
/* adding the  thumbnail images - setting them as the background
image of the link surrounding the list images. most complex bit of 
styling*/
#container a.gallery, #container a.gallery:visited {
	display:block;
	color:#000;
	text-decoration:none;
	border:1px solid #000;
	margin:1px 2px 1px 2px;
	text-align:left;
	cursor:default;
	}
#container a.slidea {
	background:url(./img/th/IMG_2529_25_th.jpg);
	height:68px;
	width:90px;
	}
#container a.slideb {
	background:url(./img/th/IMG_2527_25_th.jpg);
	height:68px;
	width:90px;
	}
#container a.slidec {
	background:url(./img/th/IMG_2543_25_th.jpg);
	height:68px;
	width:90px;
	}
#container a.slided {
	background:url(./img/th/IMG_2537_25_th.jpg);
	height:68px;
	width:90px;
	}
* html #container a.slided {
	width:88px;
	w\idth:90px;
	}

#container a.slidee {
	background:url(./img/th/IMG_2549_25_th.jpg);
	height:68px;
	width:90px;
	}
#container a.slidef {
	background:url(./img/th/IMG_2553_25_th.jpg);
	height:68px;
	width:90px;
	}
* html #container a.slidef {
	width:88px;
	w\idth:90px;
	}
#container a.slideg {
	background:url(./img/th/IMG_2557_25_th.jpg);
	height:68px;
	width:90px;
	}
#container a.slideh {
	background:url(./img/th/IMG_2566_25_th.jpg);
	height:68px;
	width:90px;
	}
#container a.slidei {
	background:url(./img/th/IMG_2569_25_th.jpg);
	height:68px;
	width:90px;
	}
#container a.slidej {
	background:url(./img/th/IMG_2570_25_th.jpg);
	height:68px;
	width:90px;
	}
#container a.slidek {
	background:url(./img/th/IMG_2571_25_th.jpg);
	height:68px;
	width:90px;
	}
* html #container a.slidek {
	width:91px;
	w\idth:93px;
	}
#container a.slidel {
	background:url(./img/th/IMG_2627_25_th.jpg);
	height:68px;
	width:90px;
	}
	
/* to set the size of the unordered list to neatly house the thumbnails*/
#container ul {
	width:198px;
	height:386px;
	}
#container li {
	float:left;
	}
/* move thumbnails into correct position*/
#container ul {
	margin:5px;
	float:right;
	}
/* change the thumnbnail border color */
#container a.gallery:hover {
	border:1px solid #fff;
	}
	
/* styling the :hover span */
#container a.gallery:hover span {
	position:absolute;
	width:400px;
	height:372px;
	top:10px;
	left:75px;
	color:#000;
	background:#fff;
	}
/* adding the text for the portrait images */
#container a.gallery:hover img {
	border:1px solid #fff;
	float:left;
	margin-right:5px;
	}
/* central image for when no hovering is being done*/
#container {
	background:#fff url(./img/_nIMG_2627.jpg) 75px 10px no-repeat;
	
	}