/* ==================================================================
 - Stylesheet fuer die Darstellung der Favoriten
Datei: jado_favourites.css
Media: all

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

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

Aufbau:
1. #wrapperFavourites
2. Bereich mit Sortierfunktion und Ansichtswechsler
3. Favoritenansicht
	3.1 Listenansicht
	3.2 Bildansicht
4. Aktionsbereich
==================================================================== */
/* ======================================================

	=1. wrapperFavourites

========================================================= */
#wrapperFavourites {
	position: absolute;
	top: 30px;
	left: 18px;
	overflow: hidden;
	z-index: 75;
	/* visibility: hidden;*/

	width: 955px;
	height: 129px;
	background: url(img/bg/wrapperFavourites/wrapperFavourites.gif) repeat-x;
}

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

	=2. Bereich mit Sortierfunktion und Ansichtswechsler

========================================================= */
#wrapperFavouritesSorter {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;

	color: #ffffff;
	text-transform: uppercase;

	width: 150px;
	height: 129px;
	background: url(img/line/v_1px_2px_ffffff_trans.gif) repeat-y left top;
}

		#wrapperFavouritesSorter h2,
		#wrapperFavouritesSorter h3 {
			font-size: 10px;
			font-weight: normal;
			color: #525658;

			width: 140px;
			padding-bottom: 2px;
			margin: 5px 5px 0 5px;
		}

		#wrapperFavouritesSorter h3 {
			font-size: 10px;

			background: url(img/line/h_1px_2px_ffffff_trans.gif) repeat-x bottom left;
		}

		#wrapperFavouritesSorter h4 {
			font-size: 10px;
			color: #ffffff;

			background: url(img/line/h_1px_2px_ffffff_trans.gif) repeat-x top left;
			padding-top: 2px;
			width: 140px;
			margin: 0 5px;
		}

		#wrapperFavouritesSorter p { margin: 0px 5px; }

		#wrapperFavouritesSorter table.show_favourites_as {
			font-size: 10px;

			width: 140px;
			margin: 5px 0 0 5px;
		}

			#wrapperFavouritesSorter table.show_favourites_as td { vertical-align: middle; }

			#wrapperFavouritesSorter table.show_favourites_as a {
				display: block;

				width: 14px;
				height: 15px;
				background: #ffffff no-repeat 0 0;
				margin-left: 3px;
			}

			#wrapperFavouritesSorter table.show_favourites_as a.view_list { background: url(img/action_icon/link_change_to_list_view.gif) no-repeat 0 0; }

			#wrapperFavouritesSorter table.show_favourites_as a.view_list_active { background: url(img/action_icon/link_change_to_list_view_active.gif) no-repeat 0 0; }

			#wrapperFavouritesSorter table.show_favourites_as a.view_image { background: url(img/action_icon/link_change_to_image_view.gif) no-repeat 0 0; }

			#wrapperFavouritesSorter table.show_favourites_as a.view_image_active { background: url(img/action_icon/link_change_to_image_view_active.gif) no-repeat 0 0; }

				#wrapperFavouritesSorter table.show_favourites_as a span {
					position: absolute;
					left: -10000px;
					top: -10000px;
					width: 0;
					height: 0;
					overflow: hidden;
					display: inline;
				}

		#wrapperFavouritesSorter ul {
			list-style-type: none;

			width: 140px;
			height: 17px;
			margin: 0 5px;
		}

		#wrapperFavouritesSorter ul.sort_by_design_segment { background: url(img/line/h_1px_2px_ffffff_trans.gif) repeat-x bottom left; }

			#wrapperFavouritesSorter ul li {
				background: url(img/icon/arrow_ffffff.gif) no-repeat 0 4px;
				padding: 2px 0 2px 10px;
			}

			#wrapperFavouritesSorter ul.sort_by_design_segment li {
				float: left;

				width: 35px;
			}

				#wrapperFavouritesSorter ul li a {
					color: #ffffff;
					text-decoration: none;
					text-transform: uppercase;
				}

				#wrapperFavouritesSorter ul.sort_by_product_group li a { display: block; }

				#wrapperFavouritesSorter ul.sort_by_design_segment li a { text-transform: none; }

				#wrapperFavouritesSorter ul li a:hover,
				#wrapperFavouritesSorter ul li a:focus,
				#wrapperFavouritesSorter ul li a:active {
					color: #525658;

					background-color: #ffffff;
				}

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

	=3. Favoritenansicht

========================================================= */
#wrapperFavouritesView {
	position: absolute;
	top: 0;
	left: 150px;
	overflow: hidden;

	width: 620px;
	height: 129px;
}


	#wrapperFavouritesView div.box_content {
		overflow: auto;
		overflow-x: hidden;

		width: 620px;
		height: 119px;
		margin: 5px 0;
	}

	* html #wrapperFavouritesView div.box_content { overflow-y: scroll; }

	/* ======================================================
		=3.1 Listenansicht
	========================================================= */
	#wrapperFavouritesView div.box_content table.view_list { width: 600px; }

		#wrapperFavouritesView div.box_content table.view_list tr { background: url(img/line/h_1px_2px_ffffff_trans.gif) repeat-x left bottom; }

		#wrapperFavouritesView div.box_content table.view_list tr.first { background: none; }

		/* === Tabellenkopf === */
		#wrapperFavouritesView div.box_content table.view_list th {
			font-size: 10px;
			font-weight: normal;
			color: #ffffff;
			text-transform: uppercase;
			text-align: left;
			vertical-align: top;
			white-space: nowrap;

			background-color: #c4cbd0;
			padding: 1px 5px 1px 2px;
		}

		#wrapperFavouritesView div.box_content table.view_list th.actions {
			width: 62px;
			padding: 1px 0;
		}

			#wrapperFavouritesView div.box_content table.view_list th a {
				color: #ffffff;
				text-decoration: none;
			}

			#wrapperFavouritesView div.box_content table.view_list th a:hover,
			#wrapperFavouritesView div.box_content table.view_list th a:focus,
			#wrapperFavouritesView div.box_content table.view_list th a:active { color: #525658; }

			#wrapperFavouritesView div.box_content table.view_list th a.sorted_after { color: #525658; }

		/* === Tabellenzellen === */
		#wrapperFavouritesView div.box_content table.view_list td {
			font-size: 10px;
			text-transform: uppercase;
			vertical-align: top;

			padding: 3px 5px 3px 3px;
		}

		#wrapperFavouritesView div.box_content table.view_list td.design_segments { text-transform: none; }

		#wrapperFavouritesView div.box_content table.view_list td.actions {
			width: 62px;
			padding: 3px 0;
		}

		#wrapperFavouritesView div.box_content table.view_list td a.link_action {
			display: block;
			float: left;
			font-size: 9px;
			text-decoration: none;

			height: 12px;
			padding: 1px 2px 0 2px;
			margin-left: 2px;
		}

		* html #wrapperFavouritesView div.box_content table.view_list td a.link_action { height: 13px; }

			#wrapperFavouritesView div.box_content table.view_list td a span {
				position: absolute;
				left: -10000px;
				top: -10000px;
				display: inline;
				overflow: hidden;

				width: 0;
				height: 0;
			}

		#wrapperFavouritesView div.box_content table.view_list td a.link_details {
			width: 35px;
			background: url(img/action_icon/link_show_favourite_details.gif) #ffffff no-repeat 1px 2px;
		}

		* html #wrapperFavouritesView div.box_content table.view_list td a.link_details { width: 39px; }

		#wrapperFavouritesView div.box_content table.view_list td a.link_download {
			width: 49px;
			background: url(img/action_icon/link_download_favourite.gif) #ffffff no-repeat 1px 2px;
		}

		* html #wrapperFavouritesView div.box_content table.view_list td a.link_download { width: 53px; }

		#wrapperFavouritesView div.box_content table.view_list td a.link_delete_from_favourites {
			width: 10px;
			background: url(img/action_icon/link_delete_from_favourites.gif) #ffffff no-repeat 2px 2px;
		}

		* html #wrapperFavouritesView div.box_content table.view_list td a.link_delete_from_favourites { width: 14px; }

	/* ======================================================
		=3.2 Bildansicht
	========================================================= */
	#wrapperFavouritesView div.box_content div.box_view_image {
		float: left;

		width: 145px;
		margin: 0 4px 5px 0;
	}

	#wrapperFavouritesView div.box_content div.is_last_in_row { margin-right: 0; }

		#wrapperFavouritesView div.box_content div.box_view_image div.box_image {
			float: left;

			width: 43px;
			background: url(img/bg/wrapperFavourites/box_image_and_actions.gif) no-repeat;
		}

			#wrapperFavouritesView div.box_image img {
				width: 41px;
				height: 41px;
				background: url(img/line/h_1px_2px_ffffff_trans.gif) repeat-x left bottom;
				margin: 1px;
			}

			#wrapperFavouritesView div.box_image a.link_action {
				display: inline;
				float: left;

				text-decoration: none;

				background-color: #ffffff;
				margin: 1px 2px;

				-moz-opacity: 0;
				filter: alpha(opacity=0);
				opacity: 0;

				cursor: pointer;
			}

			#wrapperFavouritesView div.box_image a.link_action:hover,
			#wrapperFavouritesView div.box_image a.link_action:hover,
			#wrapperFavouritesView div.box_image a.link_action:hover {
				-moz-opacity: 0.9;
				filter: alpha(opacity=90);
				opacity: 0.9;
			}

			#wrapperFavouritesView div.box_image a.link_details {
				font-size: 8px;
				color: #525658;
				text-transform: uppercase;

				width: 36px;
				height: 15px;
				margin-top: -39px;
				padding: 4px 0 0px 3px;
			}

			* html #wrapperFavouritesView div.box_image a.link_details {
				width: 39px;
				height: 18px;
				margin-top: -43px;
			}

			#wrapperFavouritesView div.box_image a.link_download {
				width: 19px;
				height: 20px;
				/* background: url(img/action_icon/link_download_favourites_icon.gif) #ffffff no-repeat 3px 3px; */
				margin-top: -22px;
			}

			#wrapperFavouritesView div.box_image a.link_delete_from_favourites {
				/*width: 17px;*/
				width: 38px;
				height: 18px;
				background: url(img/action_icon/link_delete_from_favourites.gif) #ffffff no-repeat center;
				/*margin: -22px 0 1px 23px;*/
				margin: -21px 0 1px 2px;
			}

			* html #wrapperFavouritesView div.box_image a.link_delete_from_favourites {
				width: 39px;
				height: 18px;
				margin-top: -24px;
			}

				#wrapperFavouritesView div.box_image a.link_download span,
				#wrapperFavouritesView div.box_image a.link_delete_from_favourites span {
					position: absolute;
					left: -10000px;
					top: -10000px;
					display: inline;
					overflow: hidden;

					width: 0;
					height: 0;
				}

			#wrapperFavouritesView div.box_image div.box_art_number {
				color: #525658;
				text-align: center;

				background: url(img/line/h_1px_2px_ffffff_trans.gif) repeat-x left bottom;
				padding: 0 0 1px 0;
			}

		#wrapperFavouritesView div.box_content div.box_view_image div.box_text {
			float: right;

			text-transform: uppercase;

			width: 97px;
			background: url(img/line/h_1px_2px_ffffff_trans.gif) repeat-x 0 0;
		}

			#wrapperFavouritesView div.box_content div.box_view_image div.box_text span.design_segments { text-transform: none; }

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

	=4. Aktionsbereich

========================================================= */
#wrapperFavoritesActions {
	position: absolute;
	top: 0;
	left: 770px;
	overflow: hidden;

	width: 185px;
	height: 129px;
	background: url(img/line/v_1px_2px_ffffff_trans.gif) repeat-y right top;
}

	#wrapperFavoritesActions h2 {
		font-size: 10px;
		font-weight: normal;
		color: #525658;
		text-transform: uppercase;

		width: 175px;
		background: url(img/line/h_1px_2px_ffffff_trans.gif) repeat-x bottom left;
		padding-bottom: 2px;
		margin: 5px 0 0 5px;
	}

	#wrapperFavoritesActions div.box_actions {
		overflow: auto;
		overflow-x: hidden;

		width: 175px;
		height: 99px;
		margin: 3px 0 5px 5px;
	}

	* html #wrapperFavoritesActions div.box_actions { overflow-y: scroll; }

		#wrapperFavoritesActions div.box_actions ul { margin-right: 5px; }

			#wrapperFavoritesActions div.box_actions ul li {
				background: url(img/line/h_1px_2px_ffffff_trans.gif) repeat-x bottom left;
				padding: 1px 0 2px 0;
			}

				#wrapperFavoritesActions div.box_actions ul li a {
					display: block;

					color: #ffffff;
					text-decoration: none;
					text-transform: uppercase;

					width: auto;
				}

				#wrapperFavoritesActions div.box_actions ul li a:hover,
				#wrapperFavoritesActions div.box_actions ul li a:focus,
				#wrapperFavoritesActions div.box_actions ul li a:active {
					color: #525658;

					background-color: #c4cbd0;
				}