Results of the CSS crunched for www.otto.de

Let's see what we've done for www.otto.de

CSSCruncher.com has crunched this CSS to
26.48 %Less Size! I cant't believe it!

BUT UHH OHH! We found some errors in your CSS code!

Crunched CSS code:

#main .teaser h2,#main .teaser h3{font-size:24px;font-weight:normal !important}
#katAnforderung{width:181px;height:181px}
#katAnforderung h3{height:53px;line-height:23px;font-size:22px}
#katAnforderung ul img{float:left;margin:0 10px 15px 0}
#katAnforderung ul p{width:100px;float:right;margin-top:1em}
#katAnforderung a:hover{text-decoration:underline}
.teasers{display:block;float:left;width:377px}
.teasers .consultant{margin-bottom:20px}
.teasers .dotted, .storefrontNavi .dotted{overflow:hidden;background-position:top left !important;background-repeat:repeat-x !important;background-color:transparent !important}
.teasers h3{font-family:Arial,sans-serif;line-height:1.1em}
#teasersFirst, #teasersThird, #teasersFifth, .teasers.first{margin-right:15px}
.teaser{overflow:hidden;margin-bottom:15px;position:relative;top:0;left:0}
.teaser p,.teaser h2{font-size:13px}
.teaser p.button, .teaser p.button a, .teaser p.button a:hover{margin-top:4px;display:block;height:20px;overflow:hidden;font-weight:bold;text-decoration:none;text-transform:uppercase}
.teaser h3.article a{font-size:24px;line-height:1em}
.teaser p.article a{font-size:16px;line-height:1em}
.teaser h3 a{text-decoration:none}
.teaser h3 a:hover{text-decoration:underline}
.teaser img.teaserIMG{float:left}
.teaser strike{text-decoration:line-through}
.cont-4x2{width:769px;height:377px;overflow:hidden}
.cont-4x1{width:769px;height:181px;overflow:hidden}
.cont-2x2{width:377px;height:377px;overflow:hidden}
.cont-2x1, .cont-2xX div.teaserBrands{height:181px;overflow:hidden}
.cont-2x076{height:135px;overflow:hidden;margin-bottom:5px}
.cont-2x113{height:205px;margin-bottom:24px}
.teaserBrands{height:181px;width:377px}
.teaserBrandsSecond{clear:left;margin-top:15px;padding-top:20px;height:161px;overflow:hidden;width:377px}
.teaserBrandsSecond{_margin-bottom:-1px}
.teaser ul.brands li{float:left;width:118px;height:64px;margin:0px 7px 5px 0px}
.teaserBrands h3{margin:15px auto 0px 15px}
.teaserDotted{height:99.5%}
.teaserDotted h3.intro{margin-top:13px}
.teaserHTML{height:100%}
.teaserArticle, .teaserProductList, .teaserShop, .teaserUniversal{height:181px;padding:1px}
.teaserUniversal.teaserDmc{position:absolute;left:0;top:0}
.teaserConsulting{padding-top:27px}
.teaserProductLine{height:179px;background-color:#fff;margin:1px}
.teaserHalfsize img, .teaserSpecial img{width:377px}
.cont-2x1 .teaserSpecial img{height:181px}
.cont-2x2 .teaserSpecial img{height:377px}
.teaserSpecial{height:auto}
.teaserArticle img, .teaserShop img, .teaserUniversal img.teaserIMG{width:179px;height:179px}
.teaserConsulting .imageWrapper img{width:89px;height:89px;margin:1px}
.teaserUniversal img.teaserIMG-XL{width:195px;height:179px;margin-left:1px}
.teaserArticle h3.intro, .teaserShop h3, .teaserUniversal h3{height:55px;overflow:hidden;line-height:1.1em}
.teaserUniversal div.content h3 a{display:block;height:55px;overflow:hidden;line-height:1.1em}
.teaserConsulting div.imageWrapper{float:left;width:91px;height:91px;margin-right:15px;overflow:hidden}
.teaserProductLine div.imageWrapper{width:179px;height:179px;margin-right:15px;border-right:1px solid #A1CDF2;float:left;overflow:hidden}
.teaserArticle div.content, .teaserShop div.content, .teaserUniversal div.content{float:left;width:175px;height:157px;margin:0 0 1px 1px;padding:15px 5px 7px 15px;overflow:hidden}
.teaserArticle div.content{background-color:#fff}
.teaserProductLine h3{margin-bottom:10px;font-weight:normal;line-height:1.1em}
.teaserProductLine .content{padding-top:15px;color:#3998D4;background-color:#fff;overflow:hidden}
.teaserProductLine .content ul{width:160px;list-style:square inside;float:left;position:relative;left:4px;overflow:hidden}
.teaserShop h2.tm, .teaserShop h3.tm{font-size:13px;color:#fff}
.cont-4x1 .teaserProductLine .content ul{margin-right:30px}
.cont-2x1 div.content .teaserText{height:78px;overflow:hidden}
div.dmcSurface{position:absolute;left:0;top:0;width:377px;height:183px;background:transparent}
#main ul.pager{margin:15px 0 0 0;float:right}
#main ul.pager a{color:#000}
#main ul.pager li{margin:0;float:left}
#main ul.pager li.number{margin:0;padding:0 5px 0 5px;float:left}
#main ul.pager li.number.active{font-weight:bold}
.skyscraper{position:absolute;left:995px;height:512px;width:181px;color:#fff;clear:both;display:none}
.skyscraper h5{font-weight:normal;text-align:center;font-size:11px;color:#999}
.skyscraper h5 a{color:#999}
.skyscraper h5 a:visited{color:#999}
.skyscraper p{margin:339px 0 0 20px;line-height:1.3077em}
.skyscraper .actionBtn{position:absolute;left:31px;top:465px;width:120px;height:21px;padding-top:3px;display:block;font-weight:bold;color:#fff;text-decoration:none;text-align:center}
.campaignBannerTop{width:769px}
.campaignBannerTop .cont-4x1{z-index:1}
.campaignBannerTop .wrapper{margin:1px;background-color:#fff;height:179px;overflow:hidden;position:relative;top:0;left:0}
.campaignBannerTop .content{position:absolute;left:390px}
.campaignBannerTop p{margin-bottom:7px}
.campaignBannerTop a{position:static!important}
.campaignBannerTop a img{margin-top:4px}
.campaignBannerTop h3{margin:11px 0 5px 0;font-size:1.8462em;font-weight:normal}
.campaignBannerTop #eyeCatcher{position:absolute;left:0;top:15px;width:160px;height:54px;overflow:hidden}
.campaignBannerTop #eyeCatcher p{color:#fff;font-size:19px;font-weight:bold;line-height:22px;height:48px;overflow:hidden;margin:4px 26px 0 15px}
div.dynLPActionCode{display:block;float:left;font-size:18px;height:28px;margin:-8px 18px 0 18px;padding-top:3px;text-align:center;width:61px}
div.footnotes{color:#999;font-size:12px;padding-bottom:15px;clear:left}

» Show original CSS code

« Hide original CSS code

/* 
	Teaserseiten:
	- Storefront
	- Modul-/Sortimenteinstieg
	- AlleShops
	- ThemenSpecials
	- MyOtto/SaM
	- Logout
	
	HACKS marked with 'HACK Browser'
	
	CONTENT:
	00 resetter
	
	01 catalog promotion
	
	02 teaser areas (cms/myotto includes etc)
	02-0 container for multiple teasers
	02-1 container for all kinds of teasers
	02-2 dimension containers
	02-3 specific teaser-types
    02-4 DMC surface/teaser
    
	03 pagers
	
	04 skyscraper
	
	05 dynlp-banners
		
	99 others (e.g. footnotes)
*/

/* 00 start reset globals necessary :( */
#main .teaser h2, #main .teaser h3 { font-size: 24px; font-weight: normal !important; }
/* 00 end reset globals */

/* 01 start catalog promotion, left navigation bar */
#katAnforderung    { width: 181px; height: 181px; }
#katAnforderung h3 { height:53px; line-height: 23px; font-size: 22px}
#katAnforderung ul img { float:left; margin: 0 10px 15px 0; }
#katAnforderung ul p { width:100px; float:right; margin-top:1em; }
#katAnforderung a:hover { text-decoration: underline;}
/* 01 end catalog promotion, left navigation bar */

/* 02 start teasers */
/* 02-0 container column for standard teasers */
.teasers { display:block; float:left; width:377px;  }  
.teasers .consultant { margin-bottom:20px; } /* */
.teasers .dotted,
.storefrontNavi .dotted { 
	overflow:hidden;
	background-position: top left !important;
	background-repeat: repeat-x !important;
	background-color: transparent !important;
}
.teasers h3 { font-family: Arial, sans-serif; line-height: 1.1em; }

/* left columns */
#teasersFirst, 
#teasersThird, 
#teasersFifth, 
.teasers.first { margin-right:15px; }

/* 02-1 container class for all kinds of teasers (defaults) */
.teaser  { overflow: hidden; margin-bottom: 15px; position: relative; top: 0; left: 0; }
.teaser p, .teaser h2  { font-size: 13px; }
.teaser p.button,
.teaser p.button a,
.teaser p.button a:hover { margin-top: 4px; display: block; height: 20px; overflow:hidden;	font-weight: bold; text-decoration: none; text-transform: uppercase;}
.teaser h3.article a { font-size:24px; line-height: 1em; }
.teaser p.article a  { font-size:16px; line-height: 1em; }
.teaser h3 a         { text-decoration: none; }
.teaser h3 a:hover   { text-decoration: underline; }
.teaser img.teaserIMG { float:left; }
.teaser strike { text-decoration: line-through; }

/* 02-2 dimension containers */
.cont-4x2 { width: 769px; height: 377px; overflow: hidden; }
.cont-4x1 { width: 769px; height: 181px; overflow: hidden; }
.cont-2x2 { width: 377px; height: 377px; overflow: hidden; }
.cont-2x1,
.cont-2xX div.teaserBrands { height: 181px; overflow: hidden;}
.cont-2x076 { height:135px; overflow:hidden; margin-bottom:5px;}  /* Hoehenfaktor 0.76 */
.cont-2x113 { height:205px; margin-bottom: 24px; }				 /* Hoehenfaktor 1.13 */

/* 02-3 specific teaser types (alphabetically) */
.teaserBrands		{ height: 181px; width: 377px; }
.teaserBrandsSecond { clear:left; margin-top:15px; padding-top:20px; height:161px; overflow: hidden; width: 377px; } /* zweiter 6-er Block Markenlogos */

.teaserBrandsSecond { _margin-bottom:-1px; } /* HACK IE */

.teaser ul.brands li { float:left; width: 118px; height:64px; margin: 0px 7px 5px 0px; }
.teaserBrands h3 { margin: 15px auto 0px 15px; }

.teaserDotted { height: 99.5%; }
.teaserDotted h3.intro { margin-top:13px; }

.teaserHTML 		{ height: 100%; }
.teaserArticle,
.teaserProductList,
.teaserShop,
.teaserUniversal 	{ height: 181px; padding: 1px;}
.teaserUniversal.teaserDmc { position: absolute; left: 0; top: 0; }
.teaserConsulting 	{ padding-top:27px; }
.teaserProductLine  { height: 179px; background-color:#fff; margin: 1px; }

.teaserHalfsize img, /* HALFSIZE deprecated, do not use */
.teaserSpecial  img { width: 377px;}
.cont-2x1 .teaserSpecial img {height: 181px;}
.cont-2x2 .teaserSpecial img {height: 377px;}
.teaserSpecial { height: auto; }

.teaserArticle img,
.teaserShop img,
.teaserUniversal img.teaserIMG      { width: 179px; height: 179px; }
.teaserConsulting .imageWrapper img { width: 89px; height:89px; margin:1px; }
.teaserUniversal img.teaserIMG-XL   { width: 195px; height:179px; margin-left:1px; }

.teaserArticle h3.intro,
.teaserShop h3,
.teaserUniversal h3  { height:55px; overflow: hidden; line-height: 1.1em;}
.teaserUniversal div.content h3 a { display: block; height: 55px; overflow:hidden; line-height:1.1em; }

.teaserConsulting div.imageWrapper { 
	float:left;
 	width:91px; height:91px;
  	margin-right:15px;
  	overflow:hidden;
}

.teaserProductLine div.imageWrapper { 
	width: 179px; 
	height: 179px; 
	margin-right: 15px; 
	border-right: 1px solid #A1CDF2; 
	float: left; 
	overflow: hidden; 
}

.teaserArticle div.content,
.teaserShop div.content,
.teaserUniversal div.content {
	float:left;
	width: 175px;
	height: 157px;
	margin: 0 0 1px 1px;
	padding: 15px 5px 7px 15px;
	overflow: hidden;
}
.teaserArticle div.content { background-color: #fff; }

.teaserProductLine h3 { margin-bottom: 10px; font-weight: normal; line-height: 1.1em; }
.teaserProductLine .content {
	padding-top:15px;
	color: #3998D4;
	background-color: #fff;
	overflow:hidden;
}
.teaserProductLine .content ul{
	width: 160px;
	list-style: square inside;
	float: left;
	position: relative;
	left: 4px;
	overflow: hidden;
}

.teaserShop h2.tm,
.teaserShop h3.tm {font-size: 13px; color: #fff;}
.cont-4x1 .teaserProductLine .content ul {	margin-right:30px; }

/* special teasertext in MyOtto */
.cont-2x1 div.content .teaserText { height: 78px; overflow: hidden; }

/* 02-4 DMC surface/teaser */
div.dmcSurface { position: absolute; left: 0; top: 0; width: 377px; height: 183px; background: transparent; }

/* 03 start pagers */
#main ul.pager {
	margin: 15px 0 0 0;
	float: right;
}
#main ul.pager a {
	color: #000;
}

#main ul.pager li {
	margin: 0;
	float: left;
}

#main ul.pager li.number {
	margin: 0;
	padding: 0 5px 0 5px;
	float: left;
}

#main ul.pager li.number.active {
	font-weight: bold;
}
/* 03 end pagers */

/* 04 start skyscraper */
.skyscraper    {position:absolute; left:995px;
				height:512px; width:181px;
				color:#fff;
				clear:both; display:none; }
.skyscraper h5 {font-weight:normal;text-align:center;font-size: 11px;color: #999;}
.skyscraper h5 a{color: #999;}
.skyscraper h5 a:visited{color: #999;}
.skyscraper p  {margin: 339px 0 0 20px;line-height:1.3077em;}
.skyscraper .actionBtn  {position:absolute;left:31px;top:465px;
						width: 120px;height:21px; padding-top:3px;
						display:block;font-weight:bold;
						color:#fff;text-decoration:none;
						text-align:center;}
/* 04 end skyscraper */

/* 05 dynlp banners */
  .campaignBannerTop {width:769px;}
  .campaignBannerTop .cont-4x1 {z-index:1;}
  .campaignBannerTop .wrapper{margin:1px;background-color:#fff;height:179px;overflow:hidden;position: relative;top:0;left:0;}
  .campaignBannerTop .content{position:absolute;left:390px;}
  .campaignBannerTop p { margin-bottom: 7px; }
  .campaignBannerTop a { position: static!important; }
  .campaignBannerTop a img { margin-top: 4px;  }
  .campaignBannerTop h3 { margin: 11px 0 5px 0; font-size:1.8462em;font-weight:normal;}
  .campaignBannerTop #eyeCatcher{position: absolute;left: 0;top: 15px;width: 160px;height: 54px;overflow:hidden;}
  .campaignBannerTop #eyeCatcher p{color: #fff;font-size: 19px;font-weight: bold;line-height: 22px;height:48px;overflow: hidden;margin:4px 26px 0 15px;}
  div.dynLPActionCode { display:block;float:left;font-size:18px;height:28px;margin:-8px 18px 0 18px;padding-top:3px;text-align:center;width:61px;}
/* 05 end dynlp banners  */

/* 99 start others */
div.footnotes {	color: #999; font-size: 12px; padding-bottom: 15px; clear: left; }
/* 99 end others */

Some information about this website:

URL: http://www.otto.de/
CSS URL: http://www.otto.de/is-bin/intershop.static/WFS/Otto-OttoDe-Site/-/de_DE/css/cmsstyles.css
Title: Mode Online–Shop – Möbel, Kleidung, Schuhe bei OTTO
Meta-Description: lang=
Meta-Keywords: Der OTTO Online Shop präsentiert die Trends der Saison: Das komplette Angebot von Mode, Haushalt, Einrichten und Technik lässt sich mit sofortiger Lieferauskunft zu tagesaktuellen Preisen bequem bestellen. Umfangreiche Produktberatungen und praktische Services machen das Einkaufen im OTTO Online Versandhaus zum Erlebnis.