@charset "UTF-8";

/**
 * Elektroclub
 *
 * Contains all homepage specific CSS declarations.
 *
 * @author 			Gerrit Bertier <gerrit@marlon.be>
 * @copyright		Marlon bvba <http://www.marlon.be>
 * @date 			2010-02-24
 * @lastmodified	2010-02-24
 */

/* redefine xhtml selectors
---------------------------------------------------------- */

body { background: #165FAC url(../img/bg-body-home.png) no-repeat 50% 0; }

#header {
	background-image: url(../img/bg-header-home.jpg);
	height: 405px;
}

#header .bottom {
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 0 0;
	position: relative;
	top: 197px;
	height: 208px;
	width: 980px;
}

a.win-button {
	clear: left;
	display: inline;
	float: left;
	height: 112px;
	left: 52px;
	overflow: hidden;
	position: absolute;
	text-indent: -9999em;
	top: 260px;
	width: 112px;
	z-index: 20;
}

#main-home {
	display: inline;
	float: left;
	margin-top: -290px;
	position: relative;
	width: 980px;
	z-index: 10;
}

/* Welcome list
---------------------------------------------------------- */

.welcome {
	margin: 0 0 0 530px;
	width: 300px;
}

.welcome h2 {
	color: #fff;
	font-size: 2.5em;
	font-weight: normal;
	text-shadow: 0 1px 0 #320206;
}

.welcome ul {
	margin: 10px 0 0;
	font-size: 1.143em;
	text-shadow: 0 1px 0 #320206;
}

.welcome ul li {
	list-style-type: none;
	list-style-image: url(../img/ico-welcome-list.png);
	list-style-position: outside;
	margin: 0 0 0 20px;
	padding: 0 0 10px;
}

/* Join CTA link
---------------------------------------------------------- */

a.join-cta {
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 0 0;
	height: 122px;
	left: 474px;
	overflow: hidden;
	position: absolute;
	text-indent: -9999em;
	top: 231px;
	width: 495px;
}
a.join-cta:hover {
	background-position: 0 -122px;
}

a.join-cta span {
	float: left;
	text-indent: -9999em;
}

/* Content containers
---------------------------------------------------------- */

.top-content {
	clear: both;
	display: inline;
	float: left;
	margin: 102px 0 0;
	width: 980px;
}

.sub-content {
	clear: both;
	display: inline;
	float: left;
	margin: 15px 0 -20px;
	width: 980px;
}

/* Jobs
---------------------------------------------------------- */

#jobs {
	background: transparent url(../img/graphic-home-jobs.png) no-repeat 0 0;
	clear: both;
	display: inline;
	float: left;
	width: 331px;
}

#jobs h2 {
	clear: both;
	display: inline;
	float: left;
	margin: 180px 0 0 56px;
}

#jobs h2 a {
	background: transparent no-repeat 0 0;
	clear: both;
	display: inline;
	float: left;
	height: 55px;
	overflow: hidden;
	text-indent: -9999em;
	width: 140px;
}
#jobs h2 a:hover { background-position: 0 -55px; }

#jobs .rte p {
	clear: both;
	display: inline;
	float: left;
	margin: 5px 0 0 73px;
	width: 200px;
}

#jobs .more { margin-left: 73px; }

/* Toolbox
---------------------------------------------------------- */

#toolbox {
	background: none;
	display: inline;
	float: left;
	width: 262px;
}

#toolbox h2 {
	clear: both;
	display: inline;
	float: left;
	margin: 40px 0 0 0;
}

#toolbox h2 a {
	background: transparent no-repeat 0 0;
	clear: both;
	display: inline;
	float: left;
	height: 52px;
	overflow: hidden;
	text-indent: -9999em;
	width: 221px;
}
#toolbox h2 a:hover { background-position: 0 -52px; }

#toolbox .rte p {
	clear: both;
	display: inline;
	float: left;
	margin: 5px 0 0 20px;
	width: 230px;
}

#toolbox a.toolbox {
	background: transparent no-repeat 0 0;
	clear: both;
	display: inline;
	float: left;
	height: 200px;
	margin: 20px 0 0 -45px;
	overflow: hidden;
	position: relative;
	text-indent: -9999em;
	width: 307px;
}
#toolbox a.toolbox:hover { background-position: 0 -200px; }

/* Courses
---------------------------------------------------------- */

#courses {
	background: none;
	display: inline;
	float: left;
	margin: 0 0 0 17px;
	width: 344px;
}

#courses h2 {
	clear: both;
	display: inline;
	float: left;
	margin: 40px 0 0 0;
	position: relative;
	z-index: 10;
}

#courses h2 a {
	background: transparent no-repeat 0 0;
	clear: both;
	display: inline;
	float: left;
	height: 54px;
	overflow: hidden;
	text-indent: -9999em;
	width: 217px;
}
#courses h2 a:hover { background-position: 0 -54px; }

#courses p.intro {
	background: transparent url(../img/bg-home-courses-intro.png) no-repeat 0 0;
	clear: both;
	display: inline;
	float: left;
	font-size: 1.143em;
	height: 65px;
	padding: 30px 40px 10px 23px;
	position: relative;
	top: -30px;
	width: 281px;
}

#courses .rte p {
	clear: both;
	display: inline;
	float: left;
	margin: 0 0 0 23px;
	position: relative;
	top: -15px;
	width: 280px;
}

#courses a.more {
	margin-left: 23px;
	position: relative;
	top: -15px;
}

/* Game
---------------------------------------------------------- */

#game {
	background: transparent url(../img/graphic-home-game.png) no-repeat 0 0;
	clear: both;
	display: inline;
	float: left;
	margin-left: 26px;
	position: relative;
	width: 402px;
	z-index: 8;
}

#game h2 {
	clear: both;
	display: inline;
	float: left;
	margin: 282px 0 0 42px;
	position: relative;
}

#game h2 a {
	background: transparent no-repeat 0 0;
	clear: both;
	display: inline;
	float: left;
	height: 28px;
	overflow: hidden;
	text-indent: -9999em;
	width: 94px;
}
#game h2 a:hover { background-position: 0 -28px; }

#game .rte p {
	clear: both;
	display: inline;
	float: left;
	margin: 15px 0 0 47px;
	position: relative;
	width: 258px;
}

#game a.more {
	margin-left: 47px;
}

/* Questions
---------------------------------------------------------- */

#questions {
	background: transparent url(../img/graphic-home-questions.png) no-repeat 0 0;
	display: inline;
	float: left;
	height: 439px;
	margin-left: -54px;
	position: relative;
	width: 576px;
	z-index: 7;
}

#questions h2 {
	clear: both;
	display: inline;
	float: left;
	margin: -28px 0 0 402px;
	position: relative;
}

#questions h2 a {
	background: transparent no-repeat 0 0;
	clear: both;
	display: inline;
	float: left;
	height: 53px;
	overflow: hidden;
	text-indent: -9999em;
	width: 162px;
}
#questions h2 a:hover { background-position: 0 -53px; }

#questions div.rte {
	clear: both;
	display: inline;
	float: left;
	margin: 18px 0 0 136px;
	width: 400px;
}

#questions .rte h3 {
	clear: both;
	color: #fff;
	display: inline;
	float: left;
	font-size: 1.286em;
	font-style: normal;
	font-weight: normal;
	line-height: 1.389em;
	margin: 0;
	padding: 0;
	width: 100%;
}

#questions .rte p {
	clear: both;
	display: inline;
	float: left;
	margin: 10px 0 0;
	padding: 0;
	width: 266px;
}

#questions a.more {
	margin-left: 136px;
}

/* General
---------------------------------------------------------- */

a.more {
	clear: both;
	display: inline;
	float: left;
	margin-top: 15px;
	white-space: nowrap;
}

.rte p{
    padding: 0;
}