/* ==================================================================
 - Stylesheet fuer die Darstellung der Lightbox
Datei: jado_lightbox.css
Media: all

Datum: 23.02.2008
Autor:	Agentur Grintsch
Internet: www.grintsch.com

Inhalt:
CSS-Anweisungen für die Darstellung der Lightbox der Website www.jado.com

Aufbau:
1. Allgemeine Selektoren
	1.1 Block-Elemente
	1.2 Klassen
2. Layoutbereiche
	2.1 Site-Wrapper
	2.2 Logobereich
	2.3 wrapperLightbox
		2.3.1 Spezielle Links
		2.3.2 Box für das aktive Bild
		2.3.3 Box für Box für weitere Bilder
		2.3.4 Box für das eBook
		2.3.5 Box für Videos
	2.4 Legals
==================================================================== */
/* ======================================================

	=1. Allgemeine Selektoren

========================================================= */
* {
	padding: 0px;
	border: 0px;
	margin: 0px;
}

html { height: 100%; }

body {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 10px;
	color: #525658;

	background-color: #313435;
}

/* ======================================================
	=1.1 Block-Elemente
========================================================= */
h1 { font-size: 15px; }

h2, h3 { font-size: 11px; }

p {
	font-size: 10px;
	color: #9da8b0;
}

/* ======================================================
	=1.2 Klassen
========================================================= */
.clearer {
	clear: both;

	font-size: 0px;

	width: 0;
	height: 0px;
	line-height: 0px;
}

/* ======================================================

	=2. Layoutbereiche

========================================================= */
/* ======================================================

	=2.1 Site-Wrapper

========================================================= */
#alignerPage {
	position: absolute;
	top: 50%;
	left: 50%;

	margin-top: -289px;
	margin-left: -495px;
}

#wrapperPage {
	text-align: center;

	width: 990px;
	height: 570px;
	background-image: none;
	background-color: #3e4243;
	border: 1px solid #000000;
}

/* ======================================================

	=2.2 Logobereich

========================================================= */
#wrapperLogo {
	position: absolute;
	top: 240px;
	left: 770px;

	width: 221px;
	height: 123px;
	background: url(img/bg/wrapperLogo/logo_jado_lightbox.gif) no-repeat;

	-moz-opacity: 0.7;
	filter: alpha(opacity=70);
	opacity: 0.7;
}

.moveInFront { z-index: 200; }
.moveInBack { z-index: 1; }


	#wrapperLogo a {
		display: block;
		width: 100%;
		height: 100%;
	}

	#wrapperLogo img {
		position: absolute;
		left: -10000px;
		top: -10000px;
		width: 0;
		height: 0;
		overflow: hidden;
		display: inline;
	}

/* ======================================================

	=2.3 wrapperLightbox

========================================================= */
#wrapperLightbox {
	position: absolute;
	top: 1px;
	left: 1px;
	z-index: 100;

	text-align: left;
	text-transform: uppercase;

	width: 990px;
	height: 570px;
}

	#wrapperLightbox a.link_action {
		display: block;

		font-size: 9px;
		color: #9da8b0;
		text-decoration: none;
		text-align: left;
		line-height: 16px;

		width: 190px;
		height: 14px;
		background: #f3f4f5 no-repeat 0 2px;
		padding: 2px 15px 2px 5px;
	}

	#wrapperLightbox a.link_action:hover,
	#wrapperLightbox a.link_action:focus,
	#wrapperLightbox a.link_action:active {
		color: #9da8b0;

		background-color: #f3f4f5;
	}

		* html #wrapperLightbox a.link_action { width: 210px; }

	/* ======================================================
		=2.3.1 Spezielle Links
	========================================================= */
	#wrapperLightbox a.link_close_lightbox {
		position: absolute;
		top: 7px;
		left: 20px;

		text-align: center;
		line-height: normal;

		width: 715px;
		height: 11px;
		background: url(img/action_icon/link_close_lightbox.gif) #f3f4f5 no-repeat 715px 0;
		padding: 2px 15px 1px 5px;
	}

	* html #wrapperLightbox a.link_close_lightbox {
		width: 735px;
		padding-bottom: 0;
	}

	#wrapperLightbox a.link_add_to_favourites { background-image: url(img/action_icon/link_add_to_favourites_lightbox.gif); }

	#wrapperLightbox a.link_delete_from_favourites { background-image: url(img/action_icon/link_delete_from_favourites_lightbox.gif); }

	#wrapperLightbox a.file_type_pdf { background-image: url(img/action_icon/download_file_type_pdf.gif); }

	#wrapperLightbox a.file_type_txt { background-image: url(img/action_icon/download_file_type_txt.gif); }

	#wrapperLightbox a.file_type_rtf { background-image: url(img/action_icon/download_file_type_txt.gif); }

	#wrapperLightbox a.file_type_doc { background-image: url(img/action_icon/download_file_type_txt.gif); }

	#wrapperLightbox a.file_type_dwg { background-image: url(img/action_icon/download_file_type_dwg.gif); }

	#wrapperLightbox a.file_type_dxf { background-image: url(img/action_icon/download_file_type_dxf.gif); }

	#wrapperLightbox a.file_type_jpg { background-image: url(img/action_icon/download_file_type_jpg.gif); }

	#wrapperLightbox a.file_type_gif { background-image: url(img/action_icon/download_file_type_jpg.gif); }

	#wrapperLightbox a.file_type_eps { background-image: url(img/action_icon/download_file_type_eps.gif); }

	#wrapperLightbox a.file_type_zip { background-image: url(img/action_icon/download_file_type_zip.gif); }


	/* ======================================================
		=2.3.2 Box für das aktive Bild
	========================================================= */
	#wrapperActiveImage {
		position: absolute;
		top: 27px;
		left: 20px;

		width: 735px;
		height: 535px;
		background-color: #f3f4f5;
	}

		#wrapperActiveImage table.table_active_image {
			width: 700px;
			height: 444px;
			background: url(img/line/h_1px_2px_525658_trans.gif) repeat-x left bottom;
			margin: 6px 7px;
		}

			#wrapperActiveImage table.table_active_image td {
				text-align: center;
				vertical-align: middle;
			}

		/* === =2.3.2.1 Texte === */
		#wrapperActiveImage div.box_text_product {
			position: absolute;
			top: 455px;
			left: 7px;

			width: 285px;
			height: 73px;
		}

			#wrapperActiveImage div.box_text_product a.link_action {
				position: absolute;
				top: 57px;
				left: 0;
			}

		#wrapperActiveImage div.box_text_image {
			position: absolute;
			top: 455px;
			left: 422px;

			text-align: right;

			width: 285px;
			height: 73px;
		}

			#wrapperActiveImage div.box_text_image a.link_action {
				position: absolute;
				top: 57px;
				left: 75px;
			}

		/* === =2.3.2.2 Bildwechsler === */
		#wrapperActiveImage div.box_switch_images {
			position: absolute;
			top: 455px;
			left: 301px;

			width: 110px;
		}

		#wrapperActiveImage div.box_switch_images span {
			display: block;
			float: left;

			font-size: 12px;
			font-weight: bold;
			text-align: center;

			width: 80px;
		}

		#wrapperActiveImage div.box_switch_images a.link_show_image_before,
		#wrapperActiveImage div.box_switch_images a.link_show_image_next {
			float: left;

			width: 15px;
			height: 15px;
			background: url(img/action_icon/link_show_image_before.gif) no-repeat 0 0;
			padding: 0;
		}

		#wrapperActiveImage div.box_switch_images a.link_show_image_next { background-image: url(img/action_icon/link_show_image_next.gif); }

			#wrapperActiveImage div.box_switch_images a.link_show_image_before span,
			#wrapperActiveImage div.box_switch_images a.link_show_image_next span {
				position: absolute;
				left: -10000px;
				top: -10000px;
				display: inline;
				overflow: hidden;

				width: 0;
				height: 0;
			}

		/* === =2.3.2.4 Weitere Bilder === */
		#wrapperActiveImage a.link_show_more_images {
			position: absolute;
			top: 6px;
			left: 712px;
			display: block;

			width: 20px;
			height: 520px;
		}

			#wrapperActiveImage a.link_show_more_images.int { background: url(img/action_icon/link_show_more_images_int.gif) no-repeat 0 0; }
			#wrapperActiveImage a.link_show_more_images.de { background: url(img/action_icon/link_show_more_images_de.gif) no-repeat 0 0; }
			#wrapperActiveImage a.link_show_more_images.fr { background: url(img/action_icon/link_show_more_images_fr.gif) no-repeat 0 0; }
			#wrapperActiveImage a.link_show_more_images.nl { background: url(img/action_icon/link_show_more_images_nl.gif) no-repeat 0 0; }


		#wrapperActiveImage a.link_show_more_images.int:hover,
		#wrapperActiveImage a.link_show_more_images.int:focus,
		#wrapperActiveImage a.link_show_more_images.int:active { background-image: url(img/action_icon/link_show_more_images_over_int.gif); }
		#wrapperActiveImage a.link_show_more_images.de:hover,
		#wrapperActiveImage a.link_show_more_images.de:focus,
		#wrapperActiveImage a.link_show_more_images.de:active { background-image: url(img/action_icon/link_show_more_images_over_de.gif); }
		#wrapperActiveImage a.link_show_more_images.fr:hover,
		#wrapperActiveImage a.link_show_more_images.fr:focus,
		#wrapperActiveImage a.link_show_more_images.fr:active { background-image: url(img/action_icon/link_show_more_images_over_fr.gif); }
		#wrapperActiveImage a.link_show_more_images.nl:hover,
		#wrapperActiveImage a.link_show_more_images.nl:focus,
		#wrapperActiveImage a.link_show_more_images.nl:active { background-image: url(img/action_icon/link_show_more_images_over_nl.gif); }

		#wrapperActiveImage a.link_show_more_images span {
			position: absolute;
			left: -10000px;
			top: -10000px;
			display: inline;
			overflow: hidden;

			width: 0;
			height: 0;
		}

	/* ======================================================
		=2.3.3 Box für weitere Bilder
	========================================================= */
	#wrapperMoreImages {
		position: absolute;
		top: 34px;
		left: 755px;

		color: #525658;

		width: 210px;
		height: 520px;
		background-color: #9ba6ae;

		-moz-opacity: 0.9;
		filter: alpha(opacity=90);
		opacity: 0.9;
	}

		#wrapperMoreImages a.link_close_more_images {
			float: none;

			color: #525658;
			line-height: normal;

			width: 190px;
			height: 11px;
			background: url(img/action_icon/link_close_more_images.gif) #9ba6ae no-repeat 190px 0;
			padding: 2px 15px 1px 5px;
			margin-top: 5px;
		}

			#wrapperMoreImages a.link_close_more_images:hover,
			#wrapperMoreImages a.link_close_more_images:focus,
			#wrapperMoreImages a.link_close_more_images:active {
				color: #525658;

				background-color: #9ba6ae;
			}

			* html #wrapperMoreImages a.link_close_more_images {
				display: block;

				width: 210px;
				height: 14px;
			}

				#wrapperMoreImages a.link_close_more_images span {
					position: absolute;
					left: -10000px;
					top: -10000px;
					display: inline;
					overflow: hidden;

					width: 0;
					height: 0;
				}

		#wrapperMoreImages h3 {
			width: 168px;
			background: url(img/line/h_1px_2px_525658_trans.gif) repeat-x left bottom;
			padding-bottom: 5px;
			margin: 10px 7px 10px 8px;
		}

		/* === Scrollbarer Bereich mit Tabelle */
		#wrapperTableProductImages {
			overflow: auto;
			overflow-x: hidden;

			width: 205px;
			height: 450px;

			filter: alpha(opacity=100);
			opacity: 100;
		}

		* html #wrapperTableProductImages div.box_full_yscroll { overflow-y: scroll; }

			#wrapperTableProductImages table.table_product_images {
				width: 160px;
				margin: 0 7px 10px 7px;
			}

				#wrapperTableProductImages table.table_product_images td {
					font-size: 10px;
					color: #525658;
					vertical-align: top;

					padding-bottom: 10px;
				}

				#wrapperTableProductImages table.table_product_images td.box_image { padding-right: 5px; }

				#wrapperTableProductImages table.table_product_images td.box_text {
					background: url(img/line/h_1px_2px_525658_trans.gif) repeat-x left top;
					padding-top: 5px;
				}

					#wrapperTableProductImages table.table_product_images td.box_image a.link_to_xxl_view {
						float: left;
						display: inline;

						width: 74px;
						height: 74px;
						margin: -77px 0 0 3px;
					}

					html>/**/body #wrapperTableProductImages table.table_product_images td.box_image a.link_to_xxl_view {
						-moz-opacity: 0;
						filter: alpha(opacity=0);
						opacity: 0;
					}
					
					* html #wrapperTableProductImages table.table_product_images td.box_image a.link_to_xxl_view {
						background-image: url(img/helpie/empty.gif);
						margin: -80px 0 0 3px;
					}
					*+html #wrapperTableProductImages table.table_product_images td.box_image a.link_to_xxl_view {
						background-image: url(img/helpie/empty.gif);
						margin: -80px 0 0 3px;
					}


							#wrapperTableProductImages table.table_product_images td.box_image a.link_to_xxl_view span {
								position: absolute;
								left: -10000px;
								top: -10000px;
								display: inline;
								overflow: hidden;

								width: 0;
								height: 0;
							}

					#wrapperTableProductImages table.table_product_images td.box_image a.link_to_xxl_view:hover {
						background: url(img/action_icon/show_xxl_view_S.gif) #ffffff no-repeat center;

						-moz-opacity: 0.9;
						filter: alpha(opacity=90);
						opacity: 0.9;
					}

					* html #wrapperTableProductImages table.table_product_images td.box_image a.link_to_xxl_view:hover {}
					*+html #wrapperTableProductImages table.table_product_images td.box_image a.link_to_xxl_view:hover {}

	/* ======================================================
		=2.3.4 Box für das eBook
	========================================================= */
	#wrapperLightbox a.link_close_ebook {
		position: absolute;
		top: 7px;
		left: 20px;

		color: #9da8b0;
		text-align: center;
		line-height: normal;

		width: 715px;
		height: 11px;
		background: url(img/action_icon/link_close_lightbox.gif) #55636e no-repeat 715px 0;
		padding: 2px 15px 1px 5px;
	}

	#wrapperLightbox a.link_close_ebook:hover,
	#wrapperLightbox a.link_close_ebook:focus,
	#wrapperLightbox a.link_close_ebook:active { background-color: #55636e; }

	* html #wrapperLightbox a.link_close_ebook { width: 735px; }

	#wrapperEBook {
		position: absolute;
		top: 27px;
		left: 20px;

		width: 735px;
		height: 535px;
		background-color: #55636e;

		-moz-opacity: 1;
		filter: alpha(opacity=100);
		opacity: 1;
	}

	#wrapperEBook #wrapperNoFlash {
		text-align: center;

		width: 367px;
		margin: 200px 0 0 180px;
	}

	#wrapperEBook #wrapperNoFlash h1 { color: #9da8b0; }

	/* ======================================================
		=2.3.5 Box für Videos
	========================================================= */
	#wrapperLightbox a.link_close_video {
		position: absolute;
		top: 7px;
		left: 20px;

		color: #9da8b0;
		text-align: center;
		line-height: normal;

		width: 715px;
		height: 11px;
		background: url(img/action_icon/link_close_lightbox.gif) #55636e no-repeat 715px 0;
		padding: 2px 15px 1px 5px;
	}

	#wrapperLightbox a.link_close_video:hover,
	#wrapperLightbox a.link_close_video:focus,
	#wrapperLightbox a.link_close_video:active { background-color: #55636e; }

	* html #wrapperLightbox a.link_close_video { width: 735px; }

	#wrapperVideo {
		position: absolute;
		top: 27px;
		left: 20px;

		width: 735px;
		height: 535px;
		background-color: #55636e;

		-moz-opacity: 1;
		filter: alpha(opacity=100);
		opacity: 1;
	}

		#wrapperVideo #embedFlash {
			background-color: #55636e;
			margin: 20px 0 0 117px;
		}

		#wrapperVideo #wrapperNoFlash {
			text-align: center;

			width: 367px;
			margin: 190px 0 0 180px;
		}

			#wrapperVideo #wrapperNoFlash h1 {
				color: #9da8b0;

				margin-bottom: 10px;
			}

			#wrapperVideo #wrapperNoFlash p.link_download { margin-top: 10px; }

/* ======================================================

	=2.4 Legals

========================================================= */
#wrapperLegals {
	font-size: 9px;
	color: #808486;
	text-align: right;

	padding: 4px 16px 0 0;
}

	#wrapperLegals a {
		color: #808486;
		text-decoration: none;
		text-transform: uppercase;

		padding: 0 5px;
	}

	#wrapperLegals a:hover,
	#wrapperLegals a:focus,
	#wrapperLegals a:active { text-decoration: underline; }