@charset "utf-8";
/* CSS Document */


/* Werberraster mit Bildmontagen Startseite */

div.raster_bildmontagen {
  width:715px;
  height:215px;
  margin-bottom: 15px;
}

div.raster_boxen {
	width: 715px;
	height: 125px;
	margin-bottom: 0px;	
}

div.raster_boxen img {
	position:relative;
	width: 237px;
	margin-right: 2px;
	float:left;
	
}

div.trusted_shops {
	background-image: url(https://www.lederoase.de/images/gallery/startseite/ts.png);
	background-repeat:no-repeat;
	margin: 0px; 
	float:right; 
	width: 237px; 
	height: 100px;
	margin-top:25px; 
}

div.trusted_shops_siegel img {
	position:relative;
	margin-top:-12px;
	margin-left:43px;
	border:none;
	width:150px;
	height:112px;
	z-index:7;
}

div.oben_links {
  float:left;
  width:476px;
  height:202px;
  margin-top:2px;
  margin-right:2px;
  margin-bottom:2px;
}

div.oben_rechts {
  float:left;
  width:237px;
  height:202px;
  margin-bottom:2px;
    margin-top:2px;
}

div.mitte {
  float:left;
  width:715px;
  height:202px;
  margin-bottom:2px;
}

div.unten_links {
  float:left;
  width:237px;
  height:100px;
  margin-right:2px;
  margin-top:2px;
}

div.unten_rechts {
  float:left;
  width:476px;
  height:100px;
    margin-top:2px;
}


/* Topseller-Raster Startseite */

div.raster_seller {
  width: 715px;
  margin-bottom: 10px;
}

div.header_left {
  background-image: url(https://www.lederoase.de/images/gallery/startseite/bg_header_left.png);
  background-repeat:no-repeat;
  width: 237px;
  height: 50px;
  margin-right: 2px;
  margin-bottom: 2px;
  float:left;
}

div.header_middle {
  background-image: url(https://www.lederoase.de/images/gallery/startseite/bg_header_middle.png);
  background-repeat:no-repeat;
  width: 237px;
  height: 50px;
  margin-right: 2px;
  margin-bottom: 2px;
  float:left;
}

div.header_right {
  background-image: url(https://www.lederoase.de/images/gallery/startseite/bg_header_right.png);
  background-repeat:no-repeat;
  width: 237px;
  height: 50px;
  margin-bottom: 2px;
  float:left;
}

div.content_left {
  background-image: url(https://www.lederoase.de/images/gallery/startseite/bg_content_left.png);
  background-repeat:no-repeat;
  width: 237px;
  height: 256px;
  margin-right: 2px;
  float:left;
}

div.content_middle {
  background-image: url(https://www.lederoase.de/images/gallery/startseite/bg_content_middle.png);
  background-repeat:no-repeat;
  width: 237px;
  height: 256px;
  margin-right: 2px;
  float:left;
}

div.content_right {
  background-image: url(https://www.lederoase.de/images/gallery/startseite/bg_content_right.png);
  background-repeat:no-repeat;
  width: 237px;
  height: 256px;
  float:left;
}


/* Logoraster */

div.logoraster_content {
	width: 740px; 
	padding: 0;
	margin: 0;
}

div.logoraster_content .contentlogo {
	border:0px;
	margin-right:6px;
	margin-bottom:6px;
}

div.logoraster_content .randlogo {
	border:0px;
	margin-bottom:6px;
}

div.logoraster_content .rasterlogo {
	border:0px;
	margin-left:12px;
	margin-bottom:6px;
	width:150px;
	cursor:pointer;
}



/* Tooltip_Dynatip Startseite */

#dynatip {
  display:none;
  background:transparent url(https://www.lederoase.de/layout/lederoase/tooltip/tooltip_orange.png) no-repeat;
  font-size:12px;
  height:150px;
  width:260px;
  padding-top: 25px;
  padding-bottom: 45px;
  padding-right: 25px;
  padding-left: 25px;
  color:#fff;	
  z-index: 9999;
}

#dynatip.bottom {
  margin-top: 80px;
  background:url(https://www.lederoase.de/layout/lederoase/tooltip/tooltip_orange_bottom.png) no-repeat;
  font-size:12px;
  height:150px;
  width:260px;
  padding-top: 45px;
  padding-bottom: 25px;
  padding-right: 25px;
  padding-left: 25px;
  color:#fff;
  z-index: 9999;
}

#dyna img {
  border:0;
  cursor:pointer;
  margin:0;
}


/* Tooltip_Freitextfelder SingleArticle */

a.tooltip, a.tooltip:link, a.tooltip:visited, a.tooltip:active {
  position: relative;
  text-decoration: none;
  font-style: oblique;
  border-bottom:0px dotted #A3CFEA;
}

a.tooltip:hover {
  background: transparent;
  z-index: 9999;
}

a.tooltip span {
  display: none;
  text-decoration: none;
}

a.tooltip:hover span {
	display: block;
	background:url(https://www.lederoase.de/images/icon/tooltip_singlearticle.png);
	background-repeat:no-repeat;
	position: absolute;
	width:169px;
	height: 59px;
	top: -5px;
	left: 0px;
	z-index: 9999;
	color: #000000;
	/* border-left: 10px solid #5A9AB4;
	border-right: 1px solid #5A9AB4;
	border-top: 1px solid #5A9AB4;
	border-bottom: 1px solid #5A9AB4; */
	padding: 10px 20px 10px 12px;
	/* background: #FFFFFF; */
	font-family: Verdana, Arial, Helvetica, Sans-serif;
	font-style:normal;
	font-size:12px;
	text-align: left;
}


/* Tooltip_ArticleListCategory */

a.tooltip_catlist span {
  display: none;
  text-decoration: none;
}

a.tooltip_catlist:hover span {
	display:block;
	background:url(https://www.lederoase.de/images/icon_small/tooltip_catlist.png) no-repeat;
	position:absolute;
	top: -4px;
	left: -170px;
	z-index: 9999;
	width:145px;
	height: 68px;
	font-family: Verdana, Arial, Helvetica, Sans-serif;
	font-style:normal;
	font-size:12px;
	text-align:left;
	color: #4b4b4b;
	padding: 10px;
	padding-right: 40px;
}



/* Tooltip_Landingpages */

a.tooltip_orange span {
  display: none;
  text-decoration: none;
}

a.tooltip_orange:hover span {
	background:url(https://www.lederoase.de/landingpages/grafiken/tooltip.png) no-repeat;
	position:relative;
	/*top: -120%;
	left: -2%;*/
	z-index: 9999;
	display:block;
	width:252px;
	height: 127px;
	color: #000000;
	padding: 10px;
	font-family: Verdana, Arial, Helvetica, Sans-serif;
	font-style:normal;
	font-size:12px;
	text-align:center;
}


/* Raster Landingpages */

.raster_landing_header {
  background-image: url(https://www.lederoase.de/landingpages/grafiken/bg_header_lang.png);
  background-repeat:no-repeat;
  width: 715px;
  height: 50px;
  margin-top: 50px;
  margin-bottom: 5px;
  padding-left: 20px;
  line-height: 50px;
  vertical-align:middle;
  font-family: Verdana, Arial, Helvetica, Sans-serif;
  font-size:20px;
  color: #FFF;
}

.raster_landing {
  width: 715px;
  text-align:center;
}

.raster_landing_image_3er{ 
  background-image: url(https://www.lederoase.de/landingpages/grafiken/border_image_3er.png);
  background-repeat:no-repeat;
  width: 238px;
  height: 238px;
  float:left;
}

.raster_landing_image_3er img{
	width: 200px;
	height: 200px;
	border:none;
	margin:19px;
}

.raster_landing_image_6er{ 
  background-image: url(https://www.lederoase.de/landingpages/grafiken/border_image_6er.png);
  background-repeat:no-repeat;
  width: 119px;
  height: 119px;
  float:left;
}

.raster_landing_image_6er img{
	width: 100px;
	height: 100px;
	border:none;
	margin:9px;
}

.zurueck a {
	display: block;
	font-size: 11px;
	color:#7c7c7c;
	background-image:none;
	padding: 0px;
	font-weight:normal;
	font-style:normal;
	text-decoration: none;
}

.zurueck a:hover {
	font-size: 11px;
	color:#F29400;
	background-image:none;
	padding: 0px;
	font-weight:normal;
	font-style:normal;
	text-decoration:none;
}

.anilink a {
	display: block;
	font-size: 11px;
	color:#4B4B4B;
	background-image:none;
	padding: 0px;
	font-weight:bold;
	font-style:normal;
	text-decoration: none;
}

.anilink a:hover {
	font-size: 11px;
	color:#5A9AB4;
	background-image:none;
	padding: 0px;
	font-weight:bold;
	font-style:normal;
	text-decoration:none;
}

/* Follow us - Fahne */

div.Follow_us {
	position:fixed;
	left:0px;
	top:180px;
	width:45px;
	height:120px;
}

div.Slice1 {
	position:absolute;
	left:0px;
	top:0px;
	width:45px;
	height:11px;
}

div.Slice2 {
	position:absolute;
	left:0px;
	top:11px;
	width:2px;
	height:109px;
}

div.Slice3 {
	position:absolute;
	left:2px;
	top:11px;
	width:31px;
	height:32px;
}

div.Slice4 {
	position:absolute;
	left:33px;
	top:11px;
	width:12px;
	height:109px;
}

div.Slice5 {
	position:absolute;
	left:2px;
	top:43px;
	width:31px;
	height:2px;
}

div.Slice6 {
	position:absolute;
	left:2px;
	top:45px;
	width:31px;
	height:32px;
}

div.Slice7 {
	position:absolute;
	left:2px;
	top:77px;
	width:31px;
	height:2px;
}

div.Slice8 {
	position:absolute;
	left:2px;
	top:79px;
	width:31px;
	height:31px;
}

div.Slice9 {
	position:absolute;
	left:2px;
	top:110px;
	width:31px;
	height:10px;
}

/* CSS für Aktionsteaser */


/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 370px;
	height:71px;
        top: 94px;
        left: 312px;

	/* custom decorations */
	border:0px solid #ccc;
	background:url(/img/global/gradient/h300.png) repeat-x;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:2000em;
	position:absolute;
	clear:both;
}

.items div {
	float:left;
	width:370px;
}

/* single scrollable item */
.scrollable img {
	float:left;
	margin:0px 0px 0px 0px;
	padding:0px;
	border:0px solid #ccc;
	width:370px;
	height:71px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

/* active item */
.scrollable .active {
	border:0px solid #000;
	position:relative;
	cursor:default;
}


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

/* prev, next, prevPage and nextPage buttons */
a.browse {
/*	background:url(/layout/lederoase/hori_large.png) no-repeat; */
	display:block;
	float:left;

	cursor:pointer;
	font-size:1px;
	background-color:#000;
}

/* right */
a.right 				{ background-position: 0 -30px; clear:right; background:url(/layout/lederoase/scroll_rechts.png) no-repeat;}
a.right:hover 		{  }
a.right:active 	{  } 


/* left */
a.left				{  background:url(/layout/lederoase/scroll_links.png) no-repeat;} 
a.left:hover  		{  }
a.left:active  	{  }

/* up and down */
a.up, a.down		{ 
	background:url(../img/scrollable/arrow/vert_large.png) no-repeat; 
	float: none;
	margin: 10px 50px;
}

/* up */
a.up:hover  		{ background-position:-30px 0; }
a.up:active  		{ background-position:-60px 0; }

/* down */
a.down 				{ background-position: 0 -30px; }
a.down:hover  		{ background-position:-30px -30px; }
a.down:active  	{ background-position:-60px -30px; } 


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

/* JQuery scrollable CSS fuer Contentseiten */

.scrollableContent {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 572px;
	height:180px;
	top: 0px;
	left: 0px;
	float:left;	
	/* custom decorations */
	border:0px solid #ccc;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollableContent .itemsContent {
	/* this cannot be too large */
	width:2000em;
	position:absolute;
	clear:both;
}
.itemsContent div {
	float:left;
	width:715px;
}

.contentNavi{
	width:30px;
	height:150px;
 	margin: 15px 20px 15px 20px;

}


/* active item */
.scrollableContent .active {
	border:0px solid #000;
	position:relative;
	cursor:default;
}

/* JQuery scrollable CSS CSS für Geschenkempfehlungen */
/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollableG {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 240px;
	height:300px;
	border: 0px solid #4cc;
	float: left;
	margin: 0px;
	padding: 0px;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accommodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
.scrollableG .itemsG {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
}

/*
	a single item. must be floated in horizontal scrolling.
	typically, this element is the one that *you* will style
	the most.
*/

.itemsG div {
	float:left;
	width: 245px;
	height: 300px;
	border: 0px solid #cc4;
}
.GNavi{
	width:30px;
	height:150px;
 	margin: 70px 20px 70px 20px;
	float: left;
}

/* JQuery scrollable CSS CSS für Bwertungen auf der Startseite */
/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollableRating {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 650px;
	height:322px;
	border: 0px solid #4cc;
	float: left;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accommodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
.scrollableRating .itemsR {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
}

/*
	a single item. must be floated in horizontal scrolling.
	typically, this element is the one that *you* will style
	the most.
*/

.itemsR div.ratingcont {
	float:left;
	width: 210px;
	height: 320px;
	border: 0px solid #cc4;
 	margin: 0px 3px 0px 3px;
}
.RNavi{
	width:25px;
	height:150px;
 	margin: 70px 2px 70px 2px;
	float: left;
}


/* Aunts & Uncles Banner */
.stilbanner1 {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 232px;
	height:90px;
        top: 0px;
        left: 265px;

	/* custom decorations */
	border:0px solid #ccc;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.stilbanner1 .productsbanner1 {
	/* this cannot be too large */
	width:2000em;
	position:absolute;
	clear:both;
	border: 0px;
}

.productsbanner1 div {
	float:left;
	width:232px;
	border: 0px;
}

.stilbanner1 img {
	float: left;
	width: 232px;
	height: 90px;
	border: 0px;
}
/* active item */
.stilbanner1 .active {
	border:0px solid #000;
	position:relative;
	cursor:default;
}


/* this makes it possible to add next button beside scrollable */
.stilbanner1 {
	float:left;	
}
/* Aunts & Uncles Banner END */