@import url("reset.css");
@import url("fonts.css");
@import url("base.css");

a:active, a:focus {outline: 0;}
#slideshow,html { background: #000; }
#wrapper { width: 971px; overflow: hidden; }
#header { 
	height: 35px; 
	padding: 7px 10px 0px;
	background: transparent url(/static/slideshow/images/bg_header_slideshow.gif) repeat-x left bottom;
	border-bottom: 1px solid #3c3c3c;
	width: 971px;
}
#logo {
	display:block;
	float:left;
	height:35px;
	overflow:hidden;
	width:450px;
}
.Site-Knack-NL #logo { background:transparent url(/static/slideshow/images/logo_knack_inv.gif) no-repeat scroll 0 0; }
.Site-LeVif-FR #logo { background:transparent url(/static/slideshow/images/logo_levif_inv.gif) no-repeat scroll 0 0; }
#logo a {
	display:block;
	float:left;
	height:25px;
}
#logo a#weekendknack { width:296px; }
#logo a span { display:none; }
#logo #baseLine {
	clear:both;
	color:#cccccc;
	font-size:.9em;
	font-style:italic;
	font-weight:bold;
	padding-left:28px;
}
#close {
	display:block;
	float:right;
	margin-top:7px;
	margin-right: 20px;
}
#close p { 
	background: transparent url(/static/slideshow/images/button_close_slideshow.gif) no-repeat left center;
	font-size: .85em;
	margin: 0;
}
#close a { 
	padding-left: 20px; 
	color:#999; 
	text-transform: uppercase; 
	text-decoration: none;
}
#close a:hover { color: #FFF; text-decoration: underline; }
#content { 
	display:inline;
	float:right;
	margin-top: 0;
	margin-bottom: 5px;
	position: relative;
}
#col {
	height:539px;
	background:#1A1A1A none repeat scroll 0 0;
	text-align:left;
	width:304px;
	display:inline;
	float:right;
	overflow: hidden;
	border: 1px solid #2a2a2a;
	padding-top: 2px;
}
#text { 
	height:272px;
	width:284px;	
	border-top: 1px solid #2A2A2A;
	padding: 15px 10px 0 10px; 
	color: #ccc; 
	overflow: hidden;
	background: transparent url(/static/slideshow/images/bg_txt.gif) repeat-x 1px 1px;
}
#text .imgDescription {
	display: none;
	padding-left: 5px;
	/*padding-top: 10px;*/
}
#text h1 {
	font-family:georgia,times,serif;
	font-size:1em;
	font-weight:bold;
	color: #FFF;
	margin-top: 0;
	margin-bottom: 5px;
	margin-top: 15px;
}
#text p.date { 
	font-weight: bold; 
}
#text p { 
	line-height:1.3333em;
	margin-bottom: 10px;
	color: #FFF; 
	font-size: 11px;
}
#text p.credits { color: #999; font-style: italic; }
#text a { 
	color: #CCC; 
	text-decoration: none; 
	font-weight: bold; 
}
#text a:hover { color: #FFF; }

#col #adv { margin: 0 auto; width: 300px; height: 250px; }
#photo {
	width:655px;
	height: 510px;
	display:inline;
	float:left;
	text-align: center;
	overflow: hidden;
	padding: 0 5px;
}
#photo img {
	display: none;
}
#arrow { 
	display: block; 
	width: 13px; 
	height: 25px; 
	position: absolute; 
	right:298px;
	top:330px;
	z-index:1000;
	background: transparent url(/static/slideshow/images/arrow_txt.gif) no-repeat left top;
}
#pagination {
	float:left;
	text-align:center;
	width: 655px;
	padding: 0 5px;
	margin: 5px 0px;
}
.browse {
	padding:0 5px;
	position:relative;
	top:8px;
}
.counter {
	color:#ccc;
	font-size:.9em;
	font-weight:bold;
	line-height:1.1em;
	text-decoration:none;
	text-transform:lowercase;
}
#footer {
	padding: 10px;
	height: 90px;
	background: transparent url(/static/slideshow/images/bg_footer_slideshow.gif) repeat-x left top;
	border-top: 1px solid #3c3c3c;
	clear:both;
	text-align: center;
}
#footer div { margin: 0 auto; }

#filmstrip { width: 971px; margin: 5px auto; }

.scrollable {
	position:relative;
	overflow:hidden;
	width: 885px;
	height:52px;
	border:1px solid #2A2A2A;
	background:#1A1A1A;
}
.scrollable .items {
	width:20000em;
	position:absolute;
	clear:both;
}

/* single scrollable item */
.scrollable img {
	float:left;
	margin:3px;
	background-color:#666;
	padding:2px;
	border:1px solid #2a2a2a;
	cursor:pointer;
	width:40px;
	height:40px;
}
.scrollable img.hover { background: #CCC; }

/* active item */
.scrollable .active {
	border:2px solid #ccc;
	z-index:9999;
	position:relative;
}
 
/* BUTTONS */

/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	display:block;
	width:22px;
	height:22px;
	float:left;
	margin: 10px 5px;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right { background:url(/static/slideshow/images/arrow_next_slideshow.gif) no-repeat 5px 0px; clear:right; }
a.right:hover { background-position: 5px -22px; }


/* left */
a.left { background:url(/static/slideshow/images/arrow_prev_slideshow.gif) no-repeat 5px 0px; }
a.left:hover { background-position: 5px -22px; }

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}