@charset "UTF-8";
/* CSS Document */


/*______________________________ DITCH THESE BITS WHEN PORTING OVER ______________________________*/

.stepcarousel1, .stepcarousel2, .stepcarousel3, .stepcarousel4, .stepcarousel5 {background: transparent;}


/*______________________________ GALLERY ELEMENTS ______________________________*/

.stepcarousel1 {
position: relative; /*leave this value alone*/
border: none;
overflow: scroll; /*leave this value alone*/
width: 323px; /*Width of Carousel Viewer itself*/
margin: 0 auto;
padding: 0;
height: 273px; /*Height should enough to fit largest content's height*/
}

.stepcarousel1 .belt1 {
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel1 .panel1 {
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px 9px 0 9px; /*margin around each panel*/
width: 305px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
text-align: center;
}

.stepcarousel1 .panel1 h1 {font-size: 110%; font-weight: normal; color: #000000; padding: 0; margin: 7px 0 1px 0;}

.stepcarousel1 .panel1 p {font-size: 95%; font-weight: normal; color: #888888; padding: 0; margin: 0;}

.mainLeftArrow{float: left; display: inline; padding: 0; margin: -162px 0 0 0;}
.mainRightArrow{float: right; display: inline; padding: 0; margin: -162px 0 0 0;}



.stepcarousel2, .stepcarousel3, .stepcarousel4, .stepcarousel5 {
position: relative; /*leave this value alone*/
border: none;
overflow: scroll; /*leave this value alone*/
width: 397px; /*Width of Carousel Viewer itself*/
margin: 90px auto 0 auto;
padding: 0;
height: 470px; /*Height should enough to fit largest content's height*/
}

.stepcarousel2 .belt2, .stepcarousel3 .belt3, .stepcarousel4 .belt4, .stepcarousel5 .belt5 {
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel2 .panel2, .stepcarousel3 .panel3, .stepcarousel4 .panel4, .stepcarousel5 .panel5 {
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px 12px 0 12px; /*margin around each panel*/
width: 373px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
text-align: center;
}

.stepcarousel2 .panel2 h1, .stepcarousel3 .panel3 h1, .stepcarousel4 .panel4 h1, .stepcarousel5 .panel5 h1 {font-size: 110%; font-weight: normal; color: #000000; padding: 0; margin: 5px 0 10px 0;}

.stepcarousel2 .panel2 p, .stepcarousel3 .panel3 p, .stepcarousel4 .panel4 p, .stepcarousel5 .panel5 p {font-size: 95%; font-weight: normal; color: #888888; padding: 0 15px; margin: 0;}

.leftArrow{float: left; display: inline; padding: 0; margin: -335px 0 0 0;}
.rightArrow{float: right; display: inline; padding: 0; margin: -335px 0 0 0;}


/*______________________________ LIGHTBOX ELEMENTS ______________________________*/

#lightbox {position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img {width: auto; height: auto;}
#lightbox a img {border: none; }

#outerImageContainer {position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto;}
#imageContainer {padding: 10px;}

#loading {position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0;}
#hoverNav {position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10;}
#imageContainer>#hoverNav {left: 0;}
#hoverNav a {outline: none;}

#prevLink, #nextLink {width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block;}
#prevLink {left: 0; float: left;}
#nextLink {right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover {background: url(../portfolio/images/prevlabel.gif) left 15% no-repeat;}
#nextLink:hover, #nextLink:visited:hover {background: url(../portfolio/images/nextlabel.gif) right 15% no-repeat;}

#imageDataContainer {font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%;}

#imageData {padding:0 10px; color: #666;}
#imageData #imageDetails {width: 70%; float: left; text-align: left;}	
#imageData #caption {font-weight: bold;}
#imageData #numberDisplay {display: block; clear: left; padding-bottom: 1.0em;}			
#imageData #bottomNavClose {width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay {position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000;}