/**********************************

Use: Reset Styles for all browsers
Author: Nick Rigby

***********************************/
	
body, p, blockquote {
	margin: 0;
	padding: 0;
	}

a img, iframe { border: none; }
	
/* Headers
------------------------------*/

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-size: 100%;
	}
	
/* Lists
------------------------------*/
	
ul, ol, dl, li, dt, dd {
	margin: 0;
	padding: 0;
	}
	
/* Links
------------------------------*/

a, a:link {}
a:visited {}
a:hover {}
a:active {}

/* Forms
------------------------------*/

form, fieldset {
	margin: 0;
	padding: 0;
	}
	
fieldset { border: 1px solid #000; }

legend {
	padding: 0;
	color: #000;
	}

input, textarea, select {
	margin: 0;
	padding: 1px;
	font-size: 100%;
	font-family: inherit;
	}
	
select { padding: 0; }

/*****************************************
	Name:    Core
	Version: 1.0 (March 30 2008)
	Author:  Sebastian Brink
	Contact: http://www.quadrifolia.de
******************************************/

body {
	font-family:		Verdana, Arial, Helvetica, sans-serif;
	font-size:			62.5%;
	font-style:       	normal;
	font-weight:      	normal;
	text-decoration:  	none;
	color: 				#999;
	background-color:	#ffffff; /*#ffffff*/
}

/* headlines */

h1 { 
	font-size:			160%;
	font-weight:      	bold;
	color:				#666;
	line-height:		1.6em;
}

h2 {
	font-size:			140%;
	font-weight:      	bold;
	color:				#666;
	line-height:		1.6em;
}

h3 {
	font-size:			120%;
	font-weight:      	bold;
	color:				#666;
	line-height:		1.6em;
}

/* links */

a, a:link {
	color:				white;
	text-decoration:	none;
}
a:active {
	color:				white;
	text-decoration:	none;
}
a:visited {
	color:				white;
	text-decoration:	none;
}
a:hover {
	color:				orange;
	text-decoration:	underline;
}

/* helper */

.clear {
	clear:				both;
}

/*****************************************
	Name:    qGallery
	Version: 1.0 (March 30 2008)
	Author:  Sebastian Brink
	Contact: http://www.quadrifolia.de
******************************************/

#gallery {
	position: 				absolute;
	width: 					720px;
	height:					600px;
	left:					57%;
	top: 					40px;
	margin-left:			-450px;
	display:				block;
	z-index:				5;
}

/* main parts */

#gallery_header {
	position:				absolute;
	height:					50px;
	background: 			transparent url("images/gallery/bg_header.gif") repeat-x top left;
	overflow:				hidden;	
}

#gallery_content {
	position:				absolute;
	overflow:				hidden;
	background-color:		#000;
}

#gallery_footer {
	position:				absolute;
	height:					30px;
	background: 			transparent url("images/gallery/bg_footer.png") no-repeat top left;
	overflow:				hidden;
}

/* overlay */

#gallery_loader {
	position: 				absolute;
	display:				block;
	background-color:		#000;
	z-index:				200;
}

#gallery_loader_animation {
	position:				absolute;
	height:					48px;
	width:					48px;
	top:					50%;
	left:					50%;
	margin:					-24px 0px 0px -24px;
	background: 			transparent url("images/gallery/ani_loading.gif") no-repeat top left;
}

/* title */

#gallery_title {
	position:				relative;
	margin:					5px 0px 0px 15px;
	max-width:				800px;
	overflow:				hidden;
	display:				block;
}

#gallery_title h1 {
	font-family: 			"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:				24px;
	font-weight:			normal;
	text-shadow:			rgb(0, 0, 0) 0px -1px 1px;
	white-space:			nowrap;
	color:					#fff;
}

/* overview button */

#viewOverview {
	position:				relative;
	top:					13px;
	left:					20px;
    height: 				24px;
	margin-right:			6px;
	padding-right:			6px;
	background: 			transparent url('images/gallery/button_right.gif') no-repeat top right;
	float: 					left;
}

#viewOverview span {
	display: 				block;
	font-family: 			"Helvetica Neue", Helvetica, Arial, sans;
	font-size:				12px;
	font-weight: 			bold;
	text-decoration:		none;
	text-shadow:			rgb(0, 0, 0) 0px -1px 1px;
	white-space:			nowrap;
	line-height:			14px;
	color:					#fff;
	height:					24px;
	padding:				5px 0px 5px 6px;
    background: 			transparent url('images/gallery/button_left.gif') no-repeat top left;
}

/* view buttons */

#buttons {
	position:				absolute;
	width:					200px;
	height:					14px;
	top:					8px;
	left:					10px;
}

#viewGrid {
	width:					18px;
	height:					14px;
	margin-left:			10px;
	background: 			transparent url("images/gallery/sprite_views.png") no-repeat 0px 0px;
	cursor:					pointer;
	float:					left;			
}

#viewGrid:hover {
	background-position: 	0px -14px;
}

#viewMosaic {
	width:					18px;
	height:					14px;
	margin-left:			10px;
	background: 			transparent url("images/gallery/sprite_views.png") no-repeat -18px 0px;
	cursor:					pointer;
	float:					left;			
}

#viewMosaic:hover {
	background-position: 	-18px -14px;
}

#viewCarousel {
	width:					18px;
	height:					14px;
	margin-left:			10px;
	background: 			transparent url("images/gallery/sprite_views.png") no-repeat -36px 0px;
	cursor:					pointer;
	float:					left;			
}

#viewCarousel:hover {
	background-position: 	-36px -14px;
}

/* thumb view */

#thumbs {
	position:				absolute;
	top:					0px;
	left:					0px;
}

#thumbs_list {
	height:					100%;
}

.thumbs_item {
	list-style:				none;
	float:					left;
}

.thumbs_img {
	margin:					0px;
	padding:				0px;
}

.thumbs_reflection {
	margin:					0px;
	padding:				0px;
	display:				none;
}

.thumbs_title span {
	display:				block;
	margin:					5px;
	text-align:				left;
	color:					#ccc;
	white-space: 			nowrap; 
	overflow: 				hidden; 
	text-overflow: 			ellipsis;
}



/*****************************************
	Name:    Carousel
	Version: 1.0 (March 30 2008)
	Author:  Sebastian Brink
	Contact: http://www.quadrifolia.de
******************************************/

#carousel {
	background-color:		#000;
}

a img, iframe { 
	border: 				none; 
}

a { 
	outline: 				0;
}

/* navigation */

#carousel_navi {
	position:				absolute;
	overflow:				hidden;
	display:				block;
	width:					32px;
	height:					32px;
	cursor:					pointer;
}

#carousel_navi.icon_left {
	background: 			transparent url('images/carousel/icon_left.png') no-repeat top left;
}

#carousel_navi.icon_fastLeft {
	background: 			transparent url('images/carousel/icon_fastLeft.png') no-repeat top left;
}

#carousel_navi.icon_right {
	background: 			transparent url('images/carousel/icon_right.png') no-repeat top left;
}

#carousel_navi.icon_fastRight {
	background: 			transparent url('images/carousel/icon_fastRight.png') no-repeat top left;
}

#carousel_navi.icon_center {
	background: 			transparent url('images/carousel/icon_center.png') no-repeat top left;
}

#carousel_naviPlay {
	position:				relative;
	overflow:				hidden;
	width:					40px;
	height:					40px;
	top:					100%;
	left:					100%;
	margin:					-50px 0px 0px -50px;
	cursor:					pointer;
}

#carousel_naviPlay.icon_play {
	background:				transparent url('images/carousel/icon_play.png') no-repeat 0px 0px;
}

#carousel_naviPlay.icon_pause {
	background:				transparent url('images/carousel/icon_play.png') no-repeat 0px -40px;
}

/* items */

ul.carousel_list li {
	list-style:				none;
	float:					left;
}

.carousel_item {
	position:				absolute;
}

/* item title */

#carousel_itemTitle {
	position:				absolute;
	display:				block;
	font-family: 			"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:				12px;
	font-weight:			bold;
	text-shadow:			rgb(0, 0, 0) 0px -1px 1px;
	text-align:				center;
	color:					#fff;
	white-space: 			nowrap; 
	overflow: 				hidden; 
	text-overflow: 			ellipsis;
	z-index:				2;
}

/* opacity */

.opacity_100 {
	filter:					alpha(opacity=100);
	-moz-opacity: 			1.0;
	opacity: 				1.0;
}

.opacity_30 {
	filter:					alpha(opacity=30);
	-moz-opacity: 			0.3;
	opacity: 				0.3;
}

.opacity_15 {
	filter:					alpha(opacity=15);
	-moz-opacity: 			0.15;
	opacity: 				0.15;
}

.opacity_0 {
	filter:					alpha(opacity=0);
	-moz-opacity: 			0.0;
	opacity: 				0.0;
}

/*****************************************
	Name:    Scrollbar
	Version: 1.0 (March 30 2008)
	Author:  Sebastian Brink
	Contact: http://www.quadrifolia.de
******************************************/

/* track */

#scroller_track {
	position: 				absolute;
	width: 					15px;
	background: 			transparent url("images/scroller/scrollbar_track.png") repeat-y top left;
	cursor:					pointer;
	z-index:				100;
}

/* handle */

#scroller_handle {
	position: 				absolute;
	width: 					15px;
	background-color: 		transparent;
	cursor:					pointer;
	z-index:				101;
}

#scroller_handle_top {
	position:				relative;
	width:					15px;
	height:					7px;
	background: 			transparent url("images/scroller/handle_top.png") no-repeat top left;
}

#scroller_handle_middle {
	position:				relative;
	width:					15px;
	background: 			transparent url("images/scroller/handle_middle.png") repeat-y top left;
}

#scroller_handle_bottom {
	position:				relative;
	width:					15px;
	height:					7px;
	background: 			transparent url("images/scroller/handle_bottom.png") no-repeat top left;
}

/* arrows */

#scroller_up {
	position:				absolute;
	height:					24px;
	width:					15px;
	background: 			transparent url("images/scroller/scrollbar_arrows.png") no-repeat 0px 0px;
	cursor:					pointer;
	z-index:				101;
}

#scroller_up:hover {
	background: 			transparent url("images/scroller/scrollbar_arrows.png") no-repeat -15px 0px;
}

#scroller_down {
	position:				absolute;
	height:					24px;
	width:					15px;
	background: 			transparent url("images/scroller/scrollbar_arrows.png") no-repeat 0px -24px;
	cursor:					pointer;
	z-index:				101;
}

#scroller_down:hover {
	background: 			transparent url("images/scroller/scrollbar_arrows.png") no-repeat -15px -24px;
}



/*****************************************
	Name:    Skimmer
	Version: 1.0 (March 30 2008)
	Author:  Sebastian Brink
	Contact: http://www.quadrifolia.de
******************************************/

.skimmerFrame {
	position:				relative;
	width:					160px;
	height:					200px;
	margin:					10px 0px 0px 10px;
	background-color:		#000;
	cursor:					pointer;
	float:					left;
}

.skimmer {
	position:				absolute;
	width:					160px;
	height:					160px;
	top:					0px;
	left:					0px;
	border:					1px solid #000;
	background-color:		#000;
	cursor:					pointer;
	float:					left;
}

.skimmerTitle {
	position:				absolute;
	width:					160px;
	height:					15px;
	top:					165px;
	left:					5px;
	font-family: 			"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:				13px;
	font-weight: 			bold;
	text-decoration:		none;
	white-space:			nowrap;
	color:					#fff;
	cursor:					pointer;
	overflow:				hidden;
	text-overflow: 			ellipsis;
}

.skimmerCounter {
	position:				absolute;
	width:					160px;
	height:					15px;
	top:					180px;
	left:					5px;
	font-family: 			"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:				11px;
	font-weight: 			bold;
	text-decoration:		none;
	white-space:			nowrap;
	color:					rgb(112, 176, 255);
	cursor:					pointer;
	overflow:				hidden;
	text-overflow: 			ellipsis;
}

.skimmerMask {
	position:				absolute;
	width:					162px;
	height:					162px;
	left:					0px;
	top:					0px;
	background:				url('images/skimmer/mask.png');
}

.skimmerMarker {
	position:				absolute;
	width:					0px;
	height:					160px;
	left:					0px;
	top:					0px;
	background-color:		#000;
	display:				none;
	opacity:				0.5;
	-moz-opacity:			0.5;
	filter:					alpha(opacity=50);
}


/*****************************************
	Name:    Slider
	Version: 1.0 (March 27 2008)
	Author:  Sebastian Brink
	Contact: http://www.quadrifolia.de
******************************************/

#slider {
	position:				absolute;
	width:					220px;
	height:					18px;
	top:					6px;
	left:					100%;
    margin-left:			-240px;
	display:				block;
}

#slider_track {
    width:					180px;
	height:					18px;
	float:					left;
	cursor: 				pointer;
    background:				transparent url('images/slider/track.png') no-repeat center left;
}

#slider_handle {
    width:					12px;
    height:					18px;
    margin:					0;
	cursor: 				pointer;
	background:				transparent url('images/slider/handle_hover.png') no-repeat 0px 1px;
}

#slider_handle:hover {
	background-image:		url('images/slider/handle.png');
}

#slider_left_icon {
	width:					20px;
	height:					18px;
	float:					left;
    background:				transparent url('images/slider/icon_left.png') no-repeat center left;
}

#slider_right_icon {
	width:					20px;
	height:					18px;
	float:					left;
    background:				transparent url('images/slider/icon_right.png') no-repeat center right;	
}

/*****************************************
	Name:    Image Viewer
	Version: 1.0 (March 27 2008)
	Author:  Sebastian Brink
	Contact: http://www.quadrifolia.de
******************************************/

#imgViewer {
	position: 				absolute;
	display:				none;
	top: 					0;
	left: 					0;
	width: 					100%;
	height: 				100%;
	background-color: 		transparent;
	z-index: 				201;
}

/* overlay */

#imgViewer_overlay {
	position: 				absolute;
	display:				none;
	top: 					0;
	left: 					0;
	height:					100%;
	width:					100%;
	background-color: 		#000;
	z-index: 				200;
}

/* animations */

#imgViewer_loading {
	position: 				absolute;
	width: 					100px;
	height: 				100px;
	background: 			transparent url("images/viewer/ani_loading.gif") no-repeat top left;
}

#imgViewer_processing {
	position: 				absolute;
	top:					0px;
	left:					0px;
	width: 					100px;
	height: 				100px;
	background: 			transparent url("images/viewer/ani_processing.gif") no-repeat top left;
	z-index: 				202;
}

/* container */

#imgViewer_container {
	background-color:		#fff;
}

/* title */

#imgViewer_title {
	font-family: 			"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:				12px;
	font-weight:			bold;
	text-shadow:			rgb(0, 0, 0) 0px -1px 1px;
	text-align:				left;
	color:					#fff;
	white-space: 			nowrap;
	text-overflow: 			ellipsis;
	background-color: 		#000;
}

/* close button */

#imgViewer_closebox {
	position:				absolute;
	width:					30px;
	height:					30px;
	background: 			transparent url("images/viewer/close.png") no-repeat 0px 0px;
	cursor:					pointer;
}

#imgViewer_closebox:hover {
	background-position: 	0px -30px;
}

/* navigation buttons */

#imgViewer_naviLeft {
	position: 				absolute;
	width: 					35px;
	height: 				27px;
	cursor:					pointer;
	background: 			transparent url("images/viewer/arrows.png") no-repeat 0px 0px;
}

#imgViewer_naviLeft:hover {
	background-position: 	0px -27px;
}

#imgViewer_naviLeft:active {
	background-position: 	0px -54px;
}

#imgViewer_naviRight {
	position: 				absolute;
	width: 					35px;
	height: 				27px;
	cursor:					pointer;
	background: 			transparent url("images/viewer/arrows.png") no-repeat -35px 0px;
}

#imgViewer_naviRight:hover {
	background-position: 	-35px -27px;
}

#imgViewer_naviRight:active {
	background-position: 	-35px -54px;
}

/*****************************************
	Name:    Website Styles
	Version: 1.0 (March 30 2008)
	Author:  Sebastian Brink
	Contact: http://www.quadrifolia.de
******************************************/

body {
	height:					100%;
	width:					100%;
	background-color:		#000; 			
	overflow:				auto;
}

/* fonts */

h1, h2, h3 {
	font-family: 			'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#top h1 {
	font-size:				24px;
	color: 					#666;
	line-height:			50px;
}

#top h1 span {
	font-size:				12px;
	margin-left:			10px;
}

#content h1 {
	font-size:				2.3em;
	letter-spacing: 		0.4pt;
	color: 					#afcc2d;
	padding-top: 			0.5em;
	padding-bottom:			0.5em;
}

h2 {
	font-size:				1.5em;
	letter-spacing: 		0.4pt;
	color: 					#afcc2d;
	text-transform: 		uppercase;
	padding-top: 			0.5em;
	padding-bottom:			0.5em;
}

p {
	padding-bottom: 		1.0em;
	color:					#666;
	font-size:				1.4em;
}

#extra_pos p {
	color:					#fff;
}

#extra_pos ul {
	color:					#fff;
	font-size:				1.4em;
	margin:					0px 0px 10px 20px;
}

#content ul {
	color:					#666;
	font-size:				1.4em;
	margin-left:			20px;
}

/* raster */

#gallery_shadow {
	position: 				absolute;
	width: 					966px;
	height:					566px;
	left:					50%;
	top: 					37px;
	margin-left:			-483px;
	display:				block;
	z-index:				4;
	background: 			transparent url('images/bg_gallery_shadow.png') no-repeat top left;
}

#top {
	position: 				relative;
	width: 					100%;
	height:					50px;
	left:					0px;
	top: 					0px;
	background: 			transparent url('images/bg_top.gif') repeat-x top left;
}

#top_pos {
	position:				relative;
	width:					900px;
	height:					50px;
	top:					0px;
	left:					50%;
	margin-left:			-450px;
}

#example {
	position: 				relative;
	width: 					100%;
	height:					638px;
	left:					0px;
	top: 					0px;
	background: 			transparent url('images/bg_wood_top.jpg') repeat-x top left;
}

#content {
	position: 				relative;
	width: 					100%;
	left:					0px;
	top: 					0px;
	background: 			transparent url('images/bg_content.gif') repeat-x top left;
}

#content_pos {
	position:				relative;
	width:					900px;
	top:					0px;
	left:					50%;
	margin-left:			-450px;
	padding:				20px 0px 20px 0px;
}

#content_left {
	position:				relative;
	width:					585px;
	padding-right:			10px;
	border-right:			1px solid #999;
	float:					left;
}

#content_right {
	position:				relative;
	width:					290px;
	margin-left:			10px;
	float:					left;
}

#extra {
	position: 				relative;
	width: 					100%;
	height:					254px;
	left:					0px;
	top: 					0px;
	background: 			transparent url('images/bg_wood_bottom.jpg') repeat-x top left;
}

#extra_pos {
	position:				relative;
	width:					900px;
	height:					254px;
	top:					0px;
	left:					50%;
	margin-left:			-450px;
	background: 			transparent url('images/bg_box.png') no-repeat top left;
}

#box_1 {
	position:				absolute;
	width:					250px;
	height:					140px;
	top:					70px;
	left:					25px;
	padding:				0px 10px 0px 10px;
	color:					#fff;
}

#box_2 {
	position:				absolute;
	width:					250px;
	height:					140px;
	top:					70px;
	left:					315px;
	padding:				0px 10px 0px 10px;
	color:					#fff;
}

#box_3 {
	position:				absolute;
	width:					250px;
	height:					140px;
	top:					70px;
	left:					605px;
	padding:				0px 10px 0px 10px;
	color:					#fff;
}


#footer {
	position: 				relative;
	width: 					100%;
	left:					0px;
	top: 					0px;
	line-height:			30px;
	text-align:				center;
	background: 			transparent url('images/bg_footer.gif') repeat-x top left;
}

/* forms */

form div {
	margin-bottom:			10px;
}

input { 
    background-color: 		#fff; 
    border: 				1px solid #666;
    color:					#666;
	font-size:				1.2em;
	width:					160px;
}

#box_2 input { 
    background-color: 		#fff; 
    border: 				1px solid #666;
    color:					#666;
	font-size:				1.2em;
	width:					180px;
}

#box_2 select { 
	font-size:				1.2em;
	width:					180px;
}

input.submit {
	background-color:		#afcc2d;
	border:					0px none #afcc2d;
	color:					#fff;
	padding:				0px 10px 0px 10px;
	line-height:			20px;
	font-size:				1.4em;
	cursor: 				pointer;
}

#box_2 input.submit {
	background-color:		#afcc2d;
	border:					0px none #afcc2d;
	color:					#fff;
	padding:				0px 10px 0px 10px;
	line-height:			20px;
	font-size:				1.4em;
	cursor: 				pointer;
}

span.label, span.spacer, span.multiple span {
	width:					120px;
	float:					left;
	font-size:				1.2em;
}

#box_2 span.label {
	width:					70px;
	float:					left;
	font-size:				1.2em;	
}
 
span.multiple {
	float:					left;
}

span.button {
	padding-left:			120px;
}

#box_2 span.button {
	padding-left:			70px;
}

div.clear {
	clear:					both;padding-top:5px;
}