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

.image_gallery {
	width:615px;
	padding-bottom:15px;
	border-bottom: 1px solid #DCE0E2;
	margin-bottom:15px;
	padding-left:20px;
	padding-right:0px;
}
.ig_description p {
	margin-bottom:5px;
}
.ig_controls {
	width:150px;
	text-align:right;
	float:right;
	color: #9980A8; /* light purple */
	font-size:0.8em;
	font-weight:bold;
	padding-right:0px;
}
.ig_next {
	display:inline;
}
.ig_next a {
	display:inline;
}
.ig_prev {
	display:inline;
}
.ig_prev a {
	display:inline;
}
.ig_divider {
	display:inline;
}
.ig_current {
	padding:8px;
	padding-left:0;
	color: #330050; /* dark purple */
	display:inline;
}
.ig_total {
	padding:8px;
	padding-right:0;
	display:inline;
}

.little_button_wrapper {
	padding:20px;
	display:inline;
}
.ig_data {
	
}
.ig_client {
	display:inline;
	color: #003366 !important; /* dark blue */
	font-weight:bold;
}
.ig_url {
	display:inline;
}
.ig_description {
	margin-top:5px;
	color: #9494A1 !important; /* medium gray */
}
.ig_data_divider {
	margin-left:5px;
	margin-right:5px;
	display:inline;
}
/*
.image_gallery_thumbnails ol {
	display:inline;
	width:300px;
	height:104px;
	overflow:hidden;
	white-space:nowrap;
}
.image_gallery_thumbnails li {
	display:inline;
	padding-left:4px;
	padding-right:4px;
	
}
.thumbnail_image {
	border: 1px solid #DCE0E2;
}
*/

.stepcarousel{
position: relative; /*leave this value alone*/
border: none; /*20px solid navy;*/
/*overflow: hidden; /*leave this value alone*/
width: 590px; /*605px;*/
/*height: 107px; /*Height should enough to fit largest content's height*/
}

.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*/ /* This causes breakage in Opera, Camino, and FF2. Removed, it works everywhere. Doesn't seem like it's needed at all, since .panel itself will never overflow, only .stepcourousel which is already handled with overflow:scroll */
/*margin: 10px; /*margin around each panel*/
margin:0;
padding:0;
margin-top:1px;

padding-right: 7px;
padding-left: 7px;

width: 190px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
height:106px;
}
.stepcarousel .panel img {
	border: 1px solid #DCE0E2; /* light grey */
}
.stepcarousel .panel img:hover {
	border: 1px solid #9494A1; /* medium grey */
}
p.samplebuttons{
width: 320px;
text-align: center;
}

p.samplebuttons a{
color: #2e6ab1;
padding: 1px 2px;
margin-right: 3px;
text-decoration: none;
}

.prev_button {
margin:0;
padding:0;
/*margin-left:2px;*/
float:left;
}
.next_button {
margin:0;
padding:0;
float:left;
}
#mygallery {
margin:0;
padding:0;
float:left;
padding-left:10px;
padding-right:10px;
}

/* google chrome beta and safari put hover underlines on the left and right arrow buttons without this */
#little_prev, #little_next, .little_button_wrapper, .ig_prev a, .ig_prev a:hover, .ig_next a, .ig_next a:hover {
	border:none !important;
	text-decoration:none !important;
	outline:none !important;
	outline-color:transparent !important;
}

a:hover div img {
	border:none !important;
	text-decoration:none !important;
	outline:none !important;
	outline-color:transparent !important;
}