#content { padding: 1ex 0; }
#bc { padding-left: 1ex; }

#gal { display: none; }
#gal, #gal2 { text-align: center; }
#gal2 > a { display: inline-block; margin: 1px; }

#gal > input { display: none; }

#pic {
	display: inline-block;
	width: 600px;
	height: 450px;
	border: 0;
	border-radius: 1.5ex;
	opacity: .9;
}

#slider {
	width: 685px;
	margin: 1ex auto 0 auto;
}

#slider > .button {
	width: 18px;
	height: 93px;
	min-height: 93px;
	line-height: 93px;
	cursor: pointer;
	color: #FFF;
}

#slider > .button:after {
	position: relative;
	top: 3px;
}

#window {
	width: 608px;
	height: 113px;
	display: inline-block;
	overflow: hidden;
}

#thumbs {
	position:relative;
	left: 0px;
	font-size: 0;
	white-space: nowrap;
	-webkit-transition-timing-function: linear;
	transition-timing-function: linear;
}

#thumbs > a, #thumbs > label {
	display: inline-block;
	width: 150px;
	height: 113px;
	margin: 1px;
	opacity: 1;
}

#thumbs > a:hover, #thumbs > label:hover { opacity: .8; cursor: pointer; }



.css-driven > #window > #thumbs {
	-webkit-transition: left 999999s;
	transition: left 999999s;
}

.js-driven > #window > #thumbs {
	-webkit-transition: all 1s;
	transition: all 1s;
}

.css-driven > .prev:active ~ #window > #thumbs {
	left: 1px;
	-webkit-transition: left 2s;
	transition: left 2s;
}
.css-driven > .next:active ~ #window > #thumbs {
	/*left: -1216px;*/ /* change this on the other stylesheets */
	-webkit-transition: left 2s;
	transition: left 2s;
}

@media only screen 
and (min-width : 480px) {
	#bc { padding-left: 2em; }
}

@media only screen 
and (min-width : 690px) {
	#gal { display: block; }
	#gal2 { display: none; }
}

@media only screen
and (min-width : 855px) {
	#slider { width: 850px; }
	#window { width: 760px; }
}