﻿.gallery-panel
{
    /*border: solid 2px #444444;*/
    background-color: Transparent;/*#eeeeee;*/
}
.direction-container
{
	width: 50px; 
	height: 90px; 
	float: left;
	margin: 0px;
}
a#previous
{
	display: block;
	text-decoration: none;
	width: 50px; 
	height: 90px;
	background: url(Images/photo-move-next-left-light.gif);
}
a#next
{
	display: block;
	text-decoration: none;
	width: 45px; 
	height: 90px;
	background: url(Images/photo-move-next-right-light.gif);
}
a#previous:hover
{
	background-image: url(Images/photo-move-next-left-dark.gif);
    background-color: Transparent;
}
a#next:hover
{
	background-image: url(Images/photo-move-next-right-dark.gif);
    background-color: Transparent;
}
.img-container a,img
{
    border-width: 0px;
}
.stepcarousel
{
	position: relative; /*leave this value alone*/
	/*border: 10px solid navy; */
	overflow: scroll; /*leave this value alone*/
	width: 250px;
	height: 90px; /*Height should enough to fit largest content's height*/
	float: left;
	padding: 10;
	background-color: Transparent;
}

.stepcarousel .belt
{
	position: absolute; /*leave this value alone*/
	left: 0;
	top: 0;
}

.stepcarousel .panel
{
	float: left; /*leave this value alone*/
	overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
	margin: 10px; /*margin around each panel*/
	width: 70px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
	height: 70px;
	
}
