/* CSS Document */
/* choose a suitable font and center the #container div in Internet Explorer */
#background {
margin: 0;
   padding: 0;
  background-image:url(../images/words2.jpg);
   background-repeat:repeat;
   }

#leftbody {

   text-align:center;
   font-family:Verdana, Arial, Helvetica, sans-serif;
      color:#006600;
   font-size:76%; 
   letter-spacing:0.05em;
     margin-right: auto;
   margin-left: auto;
   padding: 0;
   }
    #wrapper {
   background-color:#FFFFFF;
   text-align: left;
   width:800px;
   height:auto;
   margin-right: auto;
   margin-left: auto;
   border-left: 2px solid #006600;
   border-right: 2px solid #006600;
   
   }
   
   #topbanner  {
   
   margin-left: 45px;
   background-image:url(../images/stillbanners/blankbanner.jpg);
   background-repeat:no-repeat;
   height:100px;

}

.bannertext  {
	font-family:Verdana, Geneva, sans-serif;
	font-style:italic;
	font-size:14px;
	font-style: normal;
	font-weight:300;
	color:#000;
	text-align:center;
	padding-top:50px;
	
	
	
	
}
   .textblockcentre {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: .75em;
color:#000;
margin: 0px 0px 20px 5px;
padding:  5px, 5px, 0px, 2px;
text-align: center;

}

 .textblockcentrebig {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: .90em;
color: #CC0000;
margin: 0px 5px 20px 5px;
padding:  5px, 5px, 0px, 0px;
text-align: center;


}
  
 .h3 {
   font-family:Verdana, Geneva, sans-serif;
   font-size:26px;
   color: #006600;
   font-weight:600;
   background-color: transparent;
   padding-left:45px;
   padding-bottom: 4px;
   text-align:center;
   

}
   #body {
   	margin: 0;
	padding: 0;
   text-align:center;
   font-family:Verdana, Arial, Helvetica, sans-serif;
      color:#006600;
   font-size:76%; 
   letter-spacing:0.05em;
   }

   #rightalign {
   margin-right:10px;

   text-align:right;
   color: #006600;
   margin-left:auto;
   font-family: strong Verdana, Arial, Helvetica, sans-serif;
   font-weight:bolder;
   font-size: medium;


}
.numberlist  {
list-style:inside;
list-style-type:decimal;
}




#bottom {
margin-right:auto;
margin-left:auto;
height:100px;

}
.style1 {color: #006600}

/* The containing box for the gallery. */
#leftcontainer {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#000;
	padding-left:20px; /* this moves the left thumbnails over*/
    font-size:76%;
    position:relative;
    width:780px;
	height:800px;
	background-color: #FFFFFF;
    margin-left:auto;/* this keeps it centered in safari)*/
	margin-right:auto; 
 
    }

/* Removing the list bullets and indentation */
#leftcontainer ul {
    padding:0; 
    margin:0; 
    list-style-type:none; 
    }


/* Remove the images and text from sight */
#leftcontainer a.gallery span {
    position:absolute; 
    width:1px; 
    height:1px; 
    top:9px; 
    left:6px; 
    overflow:hidden; 
    background:#FFFFFF;
    }

/* text for the large images move postion here of the alignment, changing margin-top in px will allow you to give gaps between thumbnails, change font style here too*/
#leftcontainer a.gallery, #container a.gallery:visited {
    display:block;
	margin-left:auto;
	margin-right:auto;
    text-align:left;
	color:#000;
	font-size:small;
	letter-spacing:0.01em;
    text-decoration:none; 
    border:1px solid #666; /*this is the border round the thumbnails */
	cursor:default;

    }
#leftcontainer a.slidea {
    background:url(../images/rolloverimages/training/usefultips.jpg);
	float: left;
    height:90px; 
    width:120px;
    }
#leftcontainer a.slideb {
    background:url(../images/rolloverimages/training/chains.jpg);
    float: left;
    height:90px; 
    width:120px; 
    }
#leftcontainer a.slidec {
    background:url(../images/rolloverimages/training/earrings.jpg);
    float:left;
    height:90px;
    width:120px;
    }
#leftcontainer a.slided {
   background:url(../images/rolloverimages/training/hallmarks.jpg);

    float: left;
    height:90px; 
    width:120px;
    }

#leftcontainer a.slidee {
    background:url(../images/rolloverimages/training/bangles.jpg);
    float: left;
    height:90px;
    width:120px;
    }
	
#leftcontainer a.slidek {
    background:url(../images/rolloverimages/training/cufflinks.jpg);
    float: left;
    height:90px;
    width:120px;
    }
	
#leftcontainer a.slidel {
    background:url(../images/rolloverimages/training/metals.jpg);
    float: left;
    height:90px;
    width:120px;
    }
	
	#leftcontainer a.slideo {
    background:url(../images/rolloverimages/training/quiz.jpg);
    float: left;
    height:90px;
    width:120px;
    }
.alignright  {
   float:right;
    padding-right:45px;/*this is where to move the postition of the righthand thumbnails*/
    height:600px;
    width:100px;
	padding-bottom: 120px;

   }	
	
#leftcontainer a.slidef {
      background:url(../images/rolloverimages/training/rings.jpg);
	float: left;
    height:90px; 
    width:120px;
    }
	
#leftcontainer a.slideg {
    background:url(../images/rolloverimages/training/stones.jpg);
    float: left;
    height:90px; 
    width:120px; 
    }
	
#leftcontainer a.slideh {
    background:url(../images/rolloverimages/training/diamonds.jpg);
    float: left;
    height:90px;
    width:120px;
    }
#leftcontainer a.slidei {
    background:url(../images/rolloverimages/training/engraving.jpg);
    float: left;
    height:90px; 
    width:120px;
    }
* html #leftcontainer i.slided {
    float:left;
    width:90px;
    w\idth:120px;
    }
#leftcontainer a.slidej {
    background:url(../images/rolloverimages/training/watches.jpg);
    float: left;
    height:90px;
    width:120px;
    }
#leftcontainer a.slidem {
     background:url(../images/rolloverimages/training/brooches.jpg);
    float: left;
    height:90px;
    width:120px;
    }
#leftcontainer a.sliden {
    background:url(../images/rolloverimages/training/pearls.jpg);
    float: left;
    height:90px;
    width:120px;
    }
#leftcontainer a.slidep {
    background:url(../images/rolloverimages/training/gemstone.jpg);
    float: left;
    height:90px;
    width:120px;
    }
#leftcontainer a.slideq {

    float: left;
    height:90px;
    width:120px;
    }


/* set the size of the unordered list to neatly house the thumbnails */
#leftcontainer ul {

	width:126px; 
	height:600px;
	
    }
#leftcontainer li {
    float:left;
	
    }
/* move the thumbnails into the correct position */
#leftcontainer ul {

    float:left;/*need this to keep it left */
    }

/* change the thumbnail border color */
#leftcontainer a.gallery:hover {
    border:1px solid #fff; 
    }
/* styling the :hover span this is where to change the background colour for the big images or text */
#leftcontainer a.gallery:hover span {
    width:460px; 
    height:390px;
	top:auto; /*this changes the distance from the top where rollover info displays, auto makes it display inline with thumbnail*/
    left:180px; /* this changes where the text and image are located from the left side*/
    color:#000; 
    background:#fff;
    }
/* the position of the large image on rollover */
#leftcontainer a.gallery:hover img {
    border:1px solid #CCC; 
    float: inherit; 
    margin-right:200px;
    

    }
	
/* CSS Document */