/*
 * The frame surrounding the SlideDeck.
 * 
 * Customize the width, height, padding and background to customize the area 
 * surrounding your SlideDeck.
 */
#slidedeck_frame {
	position: relative;
	width:711px;
	height: 380px;
}

/*
 * The SlideDeck element itself.
 * 
 * Customize the width and height to increase or decrease the size of
 * your SlideDeck. 
 */
#slidedeck_frame dl.slidedeck {
    	position: relative;
	width: 100%;
	height: 276px;
	margin: 0;
    	padding: 0;
}

/*
 * The SlideDeck slide area.
 * 
 * You can specify a height for the slide area, but it is not required, width
 * will automatically be defined for the slide area and will vary depending on
 * how many slides you have in your SlideDeck.
 * 
 * To add space between a slide and the next slide's spine (slide title bar),
 * increase the border-right definition. To remove the space, just remove the
 * border definition.
 * 
 * SlideDeck slides are all given a unique class, so you can customize the
 * appearance of each slide individually by referencing a slide by its
 * numbered class name. For example:
 *    .slidedeck dd.slide_1
 *    .slidedeck dd.slide_2
 *    .slidedeck dd.slide_3
 *    etc...
 */
#slidedeck_frame dl.slidedeck > dd {
    	position: relative;
    	margin: 0
	background: url('slides.png') /*bottom left #d7d7d7;*/    /* Note: you should position the background with pixel measurements in IE7 as it improperly calculates the height of the DD element when containing vertical slides */
    	overflow: hidden;
}
#slidedeck_frame dl.slidedeck > dd dd {
    position: relative;
    margin: 0;
}

/*
 * The SlideDeck "active corner".
 * 
 * This is the small triangle that appears in the upper left of the active
 * slide. This can be made any size and positioned differently by modifying
 * the margin values. By default the left margin is inset to prevent any
 * gap from appearing as the SlideDeck animates.
 */
.activeCorner {
	position:absolute;
	background-image: url('corner.png');
	width: 46px;
	height: 30px;
	bottom:100px;
	left:30px;
	z-index:20000;
}

.div-background {
	height:276px;
}

ul.galleryNav{
	margin:0;
	padding: 0;
	list-style:none;
	width:711px;
	height:3px;
}

ul.galleryNav li{
	float:left;
	margin: 0;
	padding: 0;
	height:3px;
}

ul.galleryNav li a{
	display:block;
	margin: 0;
	height:3px;
	width:101px;
	padding-top: 91px;
	text-align:center;
	text-transform:uppercase;
	font-size:11px;
	font-weight:bold;
	letter-spacing:-1px;
	background: url('bg-how-nav-v2.png') no-repeat;
}
ul.galleryNav li.nav-1 a { background-position:0 0; }
ul.galleryNav li.nav-2 a { background-position:-101px 0; }
ul.galleryNav li.nav-3 a { background-position:-202px 0; }
ul.galleryNav li.nav-4 a { background-position:-303px 0; }
ul.galleryNav li.nav-5 a { background-position:-404px 0; }
ul.galleryNav li.nav-6 a { background-position:-505px 0; }
ul.galleryNav li.nav-7 a { background-position:-606px 0; }

ul.galleryNav li.nav-1.active a { background-position:0 -104px; }
ul.galleryNav li.nav-2.active a { background-position:-101px -104px; }
ul.galleryNav li.nav-3.active a { background-position:-202px -104px; }
ul.galleryNav li.nav-4.active a { background-position:-303px -104px; }
ul.galleryNav li.nav-5.active a { background-position:-404px -104px; }
ul.galleryNav li.nav-6.active a { background-position:-505px -104px; }
ul.galleryNav li.nav-7.active a { background-position:-606px -104px; }