/* 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;}

#portfolio_content{
margin:0;padding:0;
position: relative;}

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

#portfolio_right{
    overflow:hidden;
	height:380px;
	width:410px;
	position:absolute;
	top:-5px;
	left:450px;
	margin:0;
	padding:0;
	background-color:#FFFFFF;
}

#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;}

.one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten, .eleven, .twelve, .thirteen, .fourteen, .fifteen{
	display:block;
	width:74px;
	height:75px;
	float:left;
	position: absolute;
	background-color:#CCCCCC;
}

.one, .two, .three, .four, .five{
top:113px;}

.six, .seven, .eight, .nine, .ten{
top: 192px;}

.eleven, .twelve, .thirteen, .fourteen, .fifteen{
top:271px;}

.one, .six, .eleven{
left:0;}

.two, .seven, .twelve{
left: 78px}

.three, .eight, .thirteen{
left:156px;}

.four, .nine, .fourteen{
left: 234px;}

.five, .ten, .fifteen{
left:312px}

.one{
background:url(../images/portfolio_nav/portfolio_gangland.gif) no-repeat 0 0;}

.two{
background: url(../images/portfolio_nav/portfolio_genesis.gif) no-repeat 0 0;}

.three{
background: url(../images/portfolio_nav/portfolio_jacobswell.gif) no-repeat 0 0;}

.four{
background: url(../images/portfolio_nav/portfolio_jessisjumper.gif) no-repeat 0 0;}

.five{
background: url(../images/portfolio_nav/portfolio_onewayuk.gif) no-repeat 0 0;}

.six{
background: url(../images/portfolio_nav/portfolio_promiseofchristmas.gif) no-repeat 0 0;}

.seven{
background: url(../images/portfolio_nav/impact_holidays.gif) no-repeat 0 0;}

.eight{
background: url(../images/portfolio_nav/new_wine.gif) no-repeat 0 0;}

.nine{
background: url(../images/portfolio_nav/portfolio_schooloftheology.gif) no-repeat 0 0;}

.ten{background:url(../images/portfolio_nav/portfolio_stormtide.gif) no-repeat 0 0;}

.eleven {background:url(../images/portfolio_nav/greghart.gif) no-repeat 0 0;}

.twelve{ background:url(../images/portfolio_nav/portfolio_challenge_newsline.gif) no-repeat 0 0}

.thirteen{
background: url(../images/portfolio_nav/soma.gif) no-repeat 0 0;}

.fourteen{
background:url(../images/portfolio_nav/libraryoflives.gif) no-repeat 0 0;}

.fifteen{
background: url(../images/portfolio_nav/portfolio_care_newspaper.gif) no-repeat;}

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;}

#opening, #gangland, #new_wine_one, #csi_freedom_to_believe, #new_wine_two, #promise_of_christmas, #new_wine_three, #new_wine_four, #anuthel, #yfc,#stormtide, #greg_hart, #challenge_newsline_web, #faith_like_potatoes, #library_of_lives, #mission_update{
height:380px;
width:410px;
background-color:#FFFFFF}

#opening{
background:url(../images/portfolio_left/opening.jpg) no-repeat 0 0;}

#gangland{
background:url(../images/portfolio_left/gangland.jpg) no-repeat 0 0}

#new_wine_one{
	background-image: url(../images/portfolio_left/onewayuk.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
}

#new_wine_two{
	background-image: url(../images/portfolio_left/jacobs_well.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
}

#csi_freedom_to_believe{
	background-image: url(../images/portfolio_left/genesis.jpg);
	background-position: 0 0;
	background-repeat: no-repeat;
}

#promise_of_christmas{
background:url(../images/portfolio_left/promise_of_christmas.jpg) 0 0;}

#yfc{
	background-image: url(../images/portfolio_left/jessisjumper.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
}
#new_wine_three{
	background-image: url(../images/portfolio_left/impact_holidays.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
}

#new_wine_four{
	background-image: url(../images/portfolio_left/new_wine_one.jpg);
	background-position: 0 0;
}

#stormtide{
	background-image: url(../images/portfolio_left/storm_tide.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

#greg_hart{
background:url(../images/portfolio_left/greghart.jpg) no-repeat 0 0}

#anuthel{
background: url(../images/portfolio_left/school_of_theology.jpg) 0 0;}

#challenge_newsline_web{
background: url(../images/portfolio_left/challenge_newsline_website.jpg) no-repeat 0 0;}

#faith_like_potatoes{
background: url(../images/portfolio_left/soma.jpg) no-repeat 0 0;}

#library_of_lives{
background:url(../images/portfolio_left/libraryoflives.jpg) no-repeat 0 0;}

#mission_update{
background: url(../images/portfolio_left/care_newspaper.jpg) no-repeat 0 0;}

#portfolio_left a{
text-indent:-9999px;
display: block;
width:71px; height:71px;}