* { margin: 0; padding: 0; }

a:active, a:focus {
	-moz-outline: none;
	outline: none;
	ie-dummy: expression(this.hideFocus=true);
}

body {
	text-align: center;
	background: #ee1c24 url(i/bg-body.jpg) repeat-x;
	font-family: "Lucida Sans Unicode", "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, Geneva, sans-serif;
}

a:link, a:visited {
	text-decoration: none;
	color: #faadb1;
}

a:hover {
	color: #fff;
}

#bg-dummy {
	position: absolute;
	width: 550px;
	height: 125px;
	left: 0;
	z-index: 0;
	background: url(i/bg-dummy.jpg) no-repeat;
}

#placeholder {
	width: 754px;
	text-align: left;
	margin: 0 auto;
	position: relative;
	padding: 0;
	overflow: hidden;
}

#wrapper-main {
	width: 100%;
}

html > body #wrapper-main {
	background: url(i/bg-wrapper-main.png) repeat-y;
}

#wrapper-main {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="i/bg-wrapper-main.png", sizingMethod="scale");
}

#wrapper-outter {
	width: 100%;
	padding-top: 344px;
	margin-top: 100px;
}

html > body #wrapper-outter {
	background: url(i/bg-wrapper-outter.png) no-repeat;
}

#wrapper-outter {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="i/bg-wrapper-outter.png", sizingMethod="crop");
}


/* FIXME: ie7 issue with image; too bright */
#footer {
	width: 100%;
	height: 75px;
	background: url(i/bg-footer.gif) no-repeat;
	padding-top: 29px;
	color: #fff;
	font-size: .8em;
}

html > body #footer * {
	float: left;
	margin-left: 40px;
}

html > body #footer dd {
	margin-left: 245px;
}

#footer * {
	float: left;
	margin-left: 20px;
}

#footer dd {
	margin-left: 205px;
}

html > body #footer dd {
	margin-left: 215px;
}

#content {
	height: 825px;
	width: 100%;
	overflow: hidden;
}

#logo {
	width: 275px;
	height: 80px;
	position: absolute;
	left: 50px;
	text-indent: -2000px;
	display: block;
	top: 12px;
}

html > body #logo {
	background: url(i/krawler.png) no-repeat;
}

#logo {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="i/krawler.png", sizingMethod="crop");
	cursor: pointer;
}

#pnp-box {
	position: absolute;
	width: 413px;
	height: 156px;
	top: 134px;
	left: 8px;
	text-indent: -2000px;
}

html > body #pnp-box {
	background: url(i/bg-pnp-box.png) no-repeat;
}

#pnp-box {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="i/bg-pnp-box.png", sizingMethod="crop");
}

#main-screenshot {
	position: absolute;
	width: 265px;
	height: 271px;
	top: 50px;
	right: 5px;
}

html > body #main-screenshot {
	background: url(i/main-screenshot.png) no-repeat;
}

#main-screenshot {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="i/main-screenshot.png", sizingMethod="crop");
}

#introduction {
	position: absolute;
	top: 290px;
	left: 8px;
	right: 8px;
	font-size: .7em;
	color: #fff;
	/*border-top: 1px solid #000;
	border-bottom: 1px solid #000;*/
	padding: 5px 35px;
	/*background: #fff;*/
}

#introduction dt {
	font-size: 1.5em;
	margin: .4em auto;
}

#introduction dd { margin: .6em auto; }

#introduction dd.bullet { padding-left: 3em; }

#introduction dd.bullet {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="i/arrow.png", sizingMethod="crop");
}

html > body #introduction dd.bullet { /* other browsers */
	background: url(i/arrow.png) no-repeat;
}

* html #introduction dd.bullet {
	height: 16px;
}

.row {
	width: 110%;
	overflow: hidden;
	margin-left: 36px;
	position: absolute;
	z-index: 1000;
}

.box {
	float: left;
	width: 228px;
	height: 267px;
	top: 450px;
}

.box {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="i/bg-box.png", sizingMethod="crop");
}

html > body .box {
	background: url(i/bg-box.png) no-repeat;
}

.box h1 {
	position: absolute;
	top: 3px;
	width: 228px;
	padding-top: 108px;
	font-size: 1em;
	margin-left: 7px;
	padding-left: 10px;
	color: #fff;
	z-index: 2000;
}

.box a.img-link {
	top: 0;
	width: 208px;
	height: 105px;
	position: absolute;
	z-index: 2009;
}

.box a.header-link {
	font-size: 1em;
	top: 0px;
	margin-left: 2px;
}

.box a {
	position: relative;
	display: block;
	z-index: 2009;
	height: 60px;
	top: 145px;
	font-size: .7em;
	margin: 0 18px;
}

#box1 h1 { background: url(i/bg-box6.jpg) no-repeat; }
#box2 h1 { background: url(i/bg-box5.jpg) no-repeat; }
#box3 h1 { background: url(i/bg-box4.jpg) no-repeat; }
#box4 h1 { background: url(i/bg-box1.jpg) no-repeat; }
#box5 h1 { background: url(i/bg-box2.jpg) no-repeat; }
#box6 h1 { background: url(i/bg-box3.jpg) no-repeat; }
#box7 h1 { background: url(i/bg-box7.jpg) no-repeat; }
#box8 h1 { background: url(i/bg-box8.jpg) no-repeat; }
#box9 h1 { background: url(i/bg-box9.jpg) no-repeat; }

.box span.icon {
	position: absolute;
	width: 40px;
	height: 50px;
	text-indent: -2000px;
	display: none;
	top: 70px;
	left: 160px;
}

#tabs-wrapper {
	position: absolute;
	top: 320px;
	left: 30px;
}

#tabs {
	list-style: none;
	width: 661px;
	height: 52px;
	font-size: .8em;
	z-index: 2001;
	padding-left: 110px;
}

* html #tabs {
	padding-left: 100px;
}

html > body #tabs {
	background: url(i/bg-tabs.png) no-repeat;
}

#tabs {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="i/bg-tabs.png", sizingMethod="crop");
}

#tabs li {
	float: left;
	line-height: 39px;
	height: 39px;
	color: #fff;
	width: 120px;
	margin-left: 20px;
}

#tabs li a {
	position: relative;
	float: left;
	display: inline;
	width: 100%;
	height: 50px;
	padding-left: 5px;
}

* html #tabs li a { padding: 0; }
#tabs li a.active { background: url(i/triangle.gif) no-repeat 0 2px; }

#tabs li a:hover {
	background: url(i/triangle.gif) no-repeat 0 2px;
}

#screenshot-wrapper {
	position: absolute;
	top: 380px;
	left: 20px;
	width: 700px;
	height: 655px;
}

#screenshot {
	position: relative;
	width: 700px;
	height: 655px;
}

html > body #screenshot { background: url(i/bg-screenshot.png) }
#screenshot { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="i/bg-screenshot.png", sizingMethod="crop"); background-position: top right; }

a.hotspot:link,
a.hotspot:visited {
	position: absolute;
	border: 1px solid #000;
	display: block;
	z-index: 2003;
	background: #fff799;
	opacity: .5;
	-moz-opacity: .5;
	filter: Alpha(opacity=50);
}

a.hotspot:hover {
	background: #fff;
	opacity: .1;
	-moz-opacity: .1;
	filter: Alpha(opacity=10);
	border-color: #000;
}

.note {
	position: absolute;
	top: 116px;
	left: 580px;
	width: 155px;
	height: 115px;
	display: none;
	z-index: 2005;
}

.note p {
	font-size: .7em;
	text-align: center;
	width: 127px;
	margin-left: 12px;
	margin-top: 12px;
}

html > body .note { background: url(i/note.png) no-repeat; }
.note { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="i/note.png", sizingMethod="crop"); background-position: top right; }

html > body #box1 span.icon { background: url(i/icon-personalize.png) no-repeat; background-position: top right; }
#box1 span.icon { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="i/icon-personalize.png", sizingMethod="crop"); background-position: top right; }

html > body #box2 span.icon { background: url(i/icon-share.png) no-repeat; background-position: top right; }
#box2 span.icon { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="i/icon-share.png", sizingMethod="crop"); background-position: top right; }

html > body #box3 span.icon { background: url(i/icon-community.png) no-repeat; background-position: top right; }
#box3 span.icon { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="i/icon-community.png", sizingMethod="crop"); background-position: top right; }

html > body #box4 span.icon { background: url(i/icon-rss.png) no-repeat; background-position: top right; }
#box4 span.icon { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="i/icon-rss.png", sizingMethod="crop"); background-position: top right; }

html > body #box5 span.icon { background: url(i/icon-rate.png) no-repeat; background-position: top right; }
#box5 span.icon { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="i/icon-rate.png", sizingMethod="crop"); background-position: top right; }

html > body #box6 span.icon { background: url(i/icon-comment.png) no-repeat; background-position: top right; }
#box6 span.icon { width: 44px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="i/icon-comment.png", sizingMethod="crop"); background-position: top right; }

html > body #box7 span.icon { background: url(i/icon-mash-up.png) no-repeat; background-position: top right; }
#box7 span.icon { width: 81px; left: 120px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="i/icon-mash-up.png", sizingMethod="crop"); background-position: top right; }

html > body #box8 span.icon { background: url(i/icon-podcast.png) no-repeat; background-position: top right; }
#box8 span.icon { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="i/icon-podcast.png", sizingMethod="crop"); background-position: top right; }

html > body #box9 span.icon { background: url(i/icon-ad.png) no-repeat; background-position: top right; }
#box9 span.icon { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="i/icon-ad.png", sizingMethod="crop"); background-position: top right; }