/* ==================================================================
 - Stylesheet fuer die Darstellung der Introseite
Datei: jado_intro.css
Media: all

Datum: 28.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
==================================================================== */
/* ======================================================

	=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: #8996A0;
}

/* ======================================================
	=1.1 Block-Elemente
========================================================= */
h1 {
	position: absolute;
	left: -10000px;
	top: -10000px;
	display: inline;
	overflow: hidden;

	width: 0;
	height: 0;
}

p.link_enter_website {
	position: absolute;
	top: 550px;
	left: 810px;
}

	p.link_enter_website a {
		font-size: 11px;
		color: #ffffff;
		text-decoration: none;
		text-transform: uppercase;

		background: url(img/icon/arrow_ffffff.gif) no-repeat right 2px;
		padding: 0 15px 0 0;
	}

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

	=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: url(img/bg/wrapperPageIntro.jpg) no-repeat #8996A0;
	border: 1px solid #CFD2D6;
}

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

	=2.2 Logobereich

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

	z-index: 1;
}

	#wrapperLogo a {
		display: block;

		width: 221px;
		height: 123px;
	}

		#wrapperLogo a img { visibility: hidden; }

/* =================================================
	=1.3 Produktliniennavigation
==================================================== */
#wrapperNavigationDesignSegments {
	position: absolute;
	top: 514px;
	left: 1px;

	width: 753px;
	height: 57px;
	padding-left: 16px;
}
	#wrapperNavigationDesignSegments div.box_design_segment {
		float: left;

		width: 231px;
		height: 57px;
	}

	#wrapperNavigationDesignSegments div.box_think { margin-right: 45px; }
	#wrapperNavigationDesignSegments div.box_feel  { margin-right: 15px; }

		#wrapperNavigationDesignSegments div.box_design_segment h3 {
			float: left;

			font-size: 14px;
			font-weight: normal;
			text-align: center;

			margin: 28px 0 0 0;
		}

		#wrapperNavigationDesignSegments div.box_design_segment h3.think_title {
			width: 54px;
			background: url(img/bg/wrapperNavigationDesignSegments/title_think.gif) no-repeat;
		}

		#wrapperNavigationDesignSegments div.box_design_segment h3.feel_title {
			width: 45px;
			background: url(img/bg/wrapperNavigationDesignSegments/title_feel.gif) no-repeat;
		}

		#wrapperNavigationDesignSegments div.box_design_segment h3.dream_title {
			width: 60px;
			background: url(img/bg/wrapperNavigationDesignSegments/title_dream.gif) no-repeat;
		}

			#wrapperNavigationDesignSegments div.box_design_segment h3 a {
				color: #ffffff;
				text-decoration: none;
			}

			#wrapperNavigationDesignSegments div.box_design_segment h3 a:hover,
			#wrapperNavigationDesignSegments div.box_design_segment h3 a:focus,
			#wrapperNavigationDesignSegments div.box_design_segment h3 a:active {
				color: #525658;
				text-decoration: none;
			}

		#wrapperNavigationDesignSegments div.box_design_segment ul {
			float: left;

			list-style-type: none;

			background: url(img/bg/wrapperNavigationDesignSegments/ul.gif) repeat-x 0 7px;
		}

		#wrapperNavigationDesignSegments div.box_design_segment ul li {
			float: left;

			width: 42px;
			height: 57px;
			background-repeat: no-repeat;
			background-position: 0 8px;
			padding: 0;
		}

		#wrapperNavigationDesignSegments div.box_design_segment ul li.first {
			background-position: 1px 8px;
			padding-left: 1px;
		}

		#wrapperNavigationDesignSegments div.box_design_segment ul li.last { padding-right: 1px; }

			#wrapperNavigationDesignSegments div.box_design_segment ul li a {
				display: block;

				text-decoration: none;

				width: 42px;
				height: 42px;
				background-repeat: no-repeat;
				margin-top: 8px;
			}

			#wrapperNavigationDesignSegments div.box_design_segment ul li a.active,
			#wrapperNavigationDesignSegments div.box_design_segment ul li a:hover,
			#wrapperNavigationDesignSegments div.box_design_segment ul li a:focus,
			#wrapperNavigationDesignSegments div.box_design_segment ul li a:active  {
				opacity: 0;
				filter: alpha(opacity = 0);
				moz-opacity: 0;
			}

				#wrapperNavigationDesignSegments div.box_design_segment ul li a span {
					display: inline;
					position: absolute;
					left: -10000px;
					top: -10000px;
					overflow: hidden;

					width: 0;
					height: 0;
				}

		/***** THINK ****/
		#wrapperNavigationDesignSegments #collection_CUBIC {
			background-image: url(img/bg/wrapperNavigationDesignSegments/think_cubic_active.jpg);
		}

			#wrapperNavigationDesignSegments #collection_CUBIC a {
				background-image: url(img/bg/wrapperNavigationDesignSegments/think_cubic.jpg);
			}

		#wrapperNavigationDesignSegments #collection_GLANCE {
			background-image: url(img/bg/wrapperNavigationDesignSegments/think_glance_active.jpg);
		}

			#wrapperNavigationDesignSegments #collection_GLANCE a {
				background-image: url(img/bg/wrapperNavigationDesignSegments/think_glance.jpg);
			}

		#wrapperNavigationDesignSegments #collection_GLANCE_WELCOME {
			background-image: url(img/bg/wrapperNavigationDesignSegments/think_glance_welcome_active.jpg);
		}


			#wrapperNavigationDesignSegments #collection_GLANCE_WELCOME a {
				background-image: url(img/bg/wrapperNavigationDesignSegments/think_glance_welcome.jpg);
			}

		#wrapperNavigationDesignSegments #collection_JEAN_NOUVEL {
			background-image: url(img/bg/wrapperNavigationDesignSegments/think_jean_nouvel_active.jpg);
		}

			#wrapperNavigationDesignSegments #collection_JEAN_NOUVEL a {
				background-image: url(img/bg/wrapperNavigationDesignSegments/think_jean_nouvel.jpg);
			}

		/***** FEEL ****/
		#wrapperNavigationDesignSegments #collection_GEOMETRY {
			background-image: url(img/bg/wrapperNavigationDesignSegments/feel_geometry_active.jpg);
		}

			#wrapperNavigationDesignSegments #collection_GEOMETRY a {
				background-image: url(img/bg/wrapperNavigationDesignSegments/feel_geometry.jpg);
			}

		#wrapperNavigationDesignSegments #collection_IQ {
			background-image: url(img/bg/wrapperNavigationDesignSegments/feel_iq_active.jpg);
		}

			#wrapperNavigationDesignSegments #collection_IQ a {
				background-image: url(img/bg/wrapperNavigationDesignSegments/feel_iq.jpg);
			}

		#wrapperNavigationDesignSegments #collection_NEW_HAVEN {
			background-image: url(img/bg/wrapperNavigationDesignSegments/feel_new_haven_active.jpg);
		}

			#wrapperNavigationDesignSegments #collection_NEW_HAVEN  a {
				background-image: url(img/bg/wrapperNavigationDesignSegments/feel_new_haven.jpg);
			}

		/***** DREAM ****/
		#wrapperNavigationDesignSegments #collection_RETRO {
			background-image: url(img/bg/wrapperNavigationDesignSegments/dream_retro_active.jpg);
		}

			#wrapperNavigationDesignSegments #collection_RETRO a {
				background-image: url(img/bg/wrapperNavigationDesignSegments/dream_retro.jpg);
			}

		#wrapperNavigationDesignSegments #collection_LIGHTHOUSE {
			background-image: url(img/bg/wrapperNavigationDesignSegments/dream_lighthouse_active.jpg);
		}

			#wrapperNavigationDesignSegments #collection_LIGHTHOUSE a {
				background-image: url(img/bg/wrapperNavigationDesignSegments/dream_lighthouse.jpg);
			}

		#wrapperNavigationDesignSegments #collection_ORIENTAL {
			background-image: url(img/bg/wrapperNavigationDesignSegments/dream_oriental_active.jpg);
		}

			#wrapperNavigationDesignSegments #collection_ORIENTAL a {
				background-image: url(img/bg/wrapperNavigationDesignSegments/dream_oriental.jpg);
			}

		#wrapperNavigationDesignSegments #collection_PERLRAND_CRISTAL {
			background-image: url(img/bg/wrapperNavigationDesignSegments/dream_perlrand_cristal_active.jpg);
		}

			#wrapperNavigationDesignSegments #collection_PERLRAND_CRISTAL a {
				background-image: url(img/bg/wrapperNavigationDesignSegments/dream_perlrand_cristal.jpg);
			}