/* CSS Document */

/* THIS SETS THE BACKROUND COLOUR  FOR  THE WHOLE GALLERY */
#gallery {width:100px; height:380px; padding:0px; position:relative; }

 /*---------------------------------------------------------------------------------------------------------*/
 /*this sets the placer for the default image */
#gallery b.default {position:absolute; left: 350px; left:350px; top:0px;left:420px; width:400px; height:380px; text-align:left;}
#gallery b.default img {display:block; margin:0px 0px 0px 0px; border:1px solid #eee; border-color:#555 #ddd #eee #333;}
#gallery b.default span {display:block; color:#000;  font-family:verdana, arial, sans-serif;  font-weight:normal; font-size:11px;  width:350px;   margin:0 auto;  }
    /*---------------------------------------------------------------------------------------------------------*/


/*THIS SETS THE WIDTH AND THE POSITION OF THE THUMBNAIL BLOCK*/
#gallery ul {list-style:none; padding-left:15px;  margin:0;  width:391px;  position:absolute;  top:0px; left:0px;  float:left; }
#gallery ul li {display:inline; width:35px; height:50px;  float:left;   margin-top: 7px;	   margin-left:6px;   margin-right:7px;   }

   /*------THIS SETS THE BORDERS FOR THE THUMBNAILS*/
#gallery ul li a {display:block; width: 35px; height: 50px; text-decoration:none; border:1px solid #000; border-color:#eee #555 #333 #ddd;}
#gallery ul li a span {display:none;}
/*--------  THIS  SETS THE SIZE OF THE THUMBNAIL-------*/
#gallery ul li a img {display:block; width: 35px;  height: 50px;  border:0; }
 /*---------------------------------------------------------------------------------------------------------*/

#gallery ul li a:hover {white-space:normal; border-color:#555 #ddd #eee #333; background:#777;}
#gallery ul li a:active, #gallery ul li a:focus {white-space:normal; border-color:#555 #ddd #eee #333; background:#777;}
/*---------------------------------------------------------------------------------------------------------*/

/*-- THIS SETS THE  DISPLAY AREA FOR THE FULL IMAGE*/
#gallery ul li a:hover b {
position:absolute; left:420px; /* THIS WILL SET THE DISTANCE OF THE DISPPLAY AREA FROM*/
/*THE  BLOCK OF THUMBS*/
top:-164px;width:250px; height:360px; text-align:center;  background:#fff;
  z-index:20;  }
  /*THIS SETS THE   DIPSPLAY AREA  FOR IMAGE WHEN CLICKED ON */
#gallery ul li a:active b, #gallery ul li a:focus b {
position:absolute; left:350px; top:-180px;left:420px;  width:250px;  height:360px; text-align:center;  background:#fff;  z-index:10; }



   /*---------------------------------------------------------------------------------------------------------*/
  
#gallery ul li a:hover img {margin:0px 0px 0px 0px; width:auto; /* GIVES VARIABLE WIDTH*/
 height:auto;/* GIVES VARIABLE HEIGHT*/
  border:1px solid #eee; 
  border-color:#555 #ddd #eee #333;/* BORDER OF IMAGE*/
  }
  /* THIS SETS THE IMAGE IF THE IMAGE IS CLICKED ON*/
#gallery ul li a:active img, #gallery ul li a:focus img{
margin:0px 0px 0px 0px; width:auto; height:auto; border:1px solid #eee;  border-color:#555 #ddd #eee #333; }


/*---------------------------------------------------------------------------------------------------------*/
 
 
 
 
 /*---- THIS SETS THE TEXT FOR THE DESCRIPTION OF THE IMAGE */
#gallery ul li a:hover span {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px;  width:350px;  margin:0 auto;  }

#gallery ul li a:active span, #gallery ul li a:focus span {display:block; color:#fff; 
font-family:verdana, arial, sans-serif; font-weight:normal;  font-size:11px;   width:350px;   margin:0 auto;  }

/*---------------------------------------------------------------------------------------------------------*/

 /*---- THIS SETS THE TEXT FOR THE Table OF THE IMAGE */
#gallery ul li a:hover table {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px;  width:350px;  margin:0 auto;
  }

#gallery ul li a:active span, #gallery ul li a:focus table {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal;  font-size:11px;   width:350px;   margin:0 auto;  }

#portfolio{width:190px;height:18px;padding-left:23px;padding-bottom:5px;}
#portfolio-text{height:150px;width:391px;padding-left:23px;}
/*---------------------------------------------------------------------------------------------------------*/
#content_portfolio{
text-align: left;height:372px;width:900px;}

.shop #portfolio_content{
height:400px;
margin:0;padding:0;
position: relative;}

.shop #portfolio_left{
height:200px;
width:385px;
position:absolute;
top:0px;
left:20px;
margin:0 0px 0 0px;
padding:0 0 0 0 ;}

#background{
	width:900px;
	height:400px;
	position:absolute;
	top:-12px;
	left:24px;
	background:url(../images/shop_page_bg.jpg) no-repeat 0 0;
}
#portfolio_right h3, #portfolio_right p{
margin:0;
padding:0;
color:#FFFFFF;}

#portfolio_right h3{margin:20px 0 0 0;
font: bold 1em/1.5 Arial, Helvetica, sans-serif;}



h3.portfolio{
text-indent:-9999px;
background:url(../images/portfolio_title.gif) no-repeat 0 0;
height:15px;
width:75px;
display:block;
padding:0 0 14px 0;
margin:12px 0 0 0;}


#portfolio_left a{
color:#990000;
}