/* ------------------------------------ style.css -- */
/* ------------------------------------ created on 05.2009 -- */
/* ------------------------------------ created by Meine Grafische vormgeving -- */

/* ------------------------------------------------------------------------------------------------------------------ basic elements -- */

body {
	background:				none;
	
	font-family:			Arial, Helvetica, Verdana;
	font-size:				9pt;
	color:					#000000;
	line-height:			1.6em;

	padding:					0px;
	margin:					0px;
}

div {
	background:				none;
	display:					block;
	
	padding:					0px;
	margin:					0px;
}

#wrapper {
	width:					1005px;
	height:					auto;
	
	margin:					0px auto;
}

/* ------------------------------------------------------------------------------------------------------------------ navigation & logo elements -- */

#navigationWrapper {
	float:					left;
	clear:					both;
	
	width:					1005px;
	height:					250px;
	
	border-bottom:			3px dotted #cecdcd;
}

#logo {
	float:					left;
	clear:					left;
	
	width:					134px;
	height:					217px;
	
	padding-top:			15px;
	padding-bottom:		15px;
}

.navigation {
	float:					left;
	clear:					none;
	
	width:					96px;
	height:					204px;
	
	padding-left:			14px;
	padding-right:			14px;
	padding-top:			46px;
	
	font-size:				0.85em;
	color:					#5ccae0;
}

.navigationImage {
	float:					left;
	clear:					both;
	
	width:					94px;
	height:					auto;
	
	padding-bottom:		7px;
	
	border:					0px;
}

/* ------------------------------------------------------------------------------------------------------------------ content wrapper elements -- */

#leftWrapper {
	display:					block;
	float:					left;
	clear:					none;
	
	width:					485px;
	height:					auto;
	
	margin-top:				14px;
}

#rightWrapper {
	display:					block;
	float:					left;
	clear:					none;
	
	width:					485px;
	height:					auto;

	margin-left:			30px;
	margin-top:				14px;
}

/* ------------------------------------------------------------------------------------------------------------------ content box elements -- */

.medium {
	float:					left;
	clear:					both;
	
	width:					476px;
	height:					auto;
	
	margin-top:				14px;
}

/* ------------------------------------------------------------------------------------------------------------------ header elements -- */

.headerSmallBlue {
	background:				url('../images/header.smallblue.png') top left no-repeat;
	display:					block;
	float:					left;
	clear:					both;
	
	width:					225px;
	height:					25px;
	
	font-size:				1.1em;
	color:					#ffffff;
	text-transform:		lowercase;
	
	padding-left:			14px;
	padding-top:			26px;
}

.headerMediumBlue {
	background:				url('../images/header.mediumblue.png') top left no-repeat;
	display:					block;
	float:					left;
	clear:					both;
	
	width:					476px;
	height:					25px;
	
	font-size:				1.2em;
	color:					#ffffff;
	text-transform:		lowercase;
	
	padding-left:			14px;
	padding-top:			26px;
}

.headerMediumBlack {
	background:				url('../images/header.mediumblack.png') top left no-repeat;
	display:					block;
	float:					left;
	clear:					both;
	
	width:					476px;
	height:					25px;
	
	font-size:				1.2em;
	color:					#ffffff;
	text-transform:		lowercase;
	
	padding-left:			14px;
	padding-top:			26px;
	
	margin-top:				14px;
}

.headerMediumRed {
	background:				url('../images/header.mediumred.png') top left no-repeat;
	display:					block;
	float:					left;
	clear:					both;
	
	width:					476px;
	height:					25px;
	
	font-size:				1.2em;
	color:					#ffffff;
	text-transform:		lowercase;
	
	padding-left:			14px;
	padding-top:			26px;
}

/* ------------------------------------------------------------------------------------------------------------------ video elements -- */

#videoInformation {
	float:					left;
	clear:					both;
	
	width:					476px;
	height:					auto;
}

#videoEpisode {
	float:					left;
	clear:					left;
	
	width:					240px;
	height:					auto;
	
	padding-top:			14px;
}

#videoEpisode #episode {
	float:					left;
	
	width:					240px;

	font-size:				1.8em;
	line-height:			1.0em;
	color:					#000000;
	font-weight:			900;
	text-transform:		lowercase;
}

#videoEpisode #episodeDate {
	float:					left;

	font-size:				1.1em;
	line-height:			1.4em;
	color:					#55c8df;
	font-weight:			500;
	text-transform:		lowercase;
}

#videoPersons {
	float:					left;
	clear:					right;
	
	width:					236px;
	height:					auto;
	
	font-size:				1.2em;
	line-height:			1.1em;
	font-weight:			900;
	
	padding-top:			14px;
}

#video {
	float:					left;
	clear:					both;
	
	width:					476px;
	height:					auto;
	
	text-align:				center;
	
	padding-top:			28px;
}

/* ------------------------------------------------------------------------------------------------------------------ reactions elements -- */

#reactions {
	width:					470px;
	height:					430px;
	
	overflow:				auto;
	overflow-x:				hidden;
	
	margin-top:				7px;
}

.reactionsAuthor a, .reactionsAuthor a:link,
.reactionsAuthor a:visited, .reactionsAuthor a:active {
	float:					left;
	clear:					left;
	
	width:					290px;
	height:					auto;
	
	font-size:				1.0em;
	font-weight:			900;
	color:					#000000;
	text-decoration:		none;

	margin-top:				7px;
}

.reactionsAuthor a:hover {
	color:					#c30b0b;
	text-decoration:		none;
}

.reactionsDate {
	float:					right;
	clear:					right;
	
	width:					150px;
	height:					auto;
	
	font-size:				0.8em;
	letter-spacing:		0.05em;
	text-align:				right;
	color:					#c30b0b;
	
	margin-top:				7px;
}

.reactionsText {
	float:					left;
	clear:					both;
	
	width:					450px;
	height:					auto;
	
	margin-top:				7px;
	padding-bottom:		7px;
	
	border-bottom:			1px solid #b2b2b2;
}

/* ------------------------------------------------------------------------------------------------------------------ reactions form elements -- */

#reactionsForm {
	float:					left;
	clear:					both;
	
	width:					460px;
	height:					auto;
	
	margin-top:				14px;
}

.formfield {
	float:					left;
	clear:					both;
	
	width:					460px;
	
	margin-top:				14px;
}

.formfield input.field, .formfield textarea {
	background:				#c9f6ff;
	
	width:					260px;
	height:					auto;
	
	margin-right:			10px;
	
	border:					1px solid #b2b2b2;
}

.formfield textarea {
	height:					175px;
}

input#submit {
	
	width:					auto;
	height:					auto;
	
	margin-top:				15px;
}
	

/* ------------------------------------------------------------------------------------------------------------------ ranking elements -- */

#ranking {
	float:					left;
	clear:					none;
	
	width:					476px;
	height:					auto;
	
	margin-top:				7px;
	
	font-weight:			bold;
}

#ranking #word {
	float:					left;
	clear:					none;
	
	width:					180px;
	height:					auto;
}
	
	

#ranking #stars {
	float:					right;
	clear:					none;
	
	width:					96px;
	height:					auto;
	
	padding-top:			6px;
	text-align:				right;
}

#ranking #starsForm {
	display:				none;
	float:					right;
	clear:					none;
	
	width:					260px;
	height:					auto;
	
	padding-top:			6px;
	text-align:				right;
}
	

/* ------------------------------------------------------------------------------------------------------------------ tags elements -- */

#frequentlyTags {
	float:					left;
	clear:					both;
	
	width:					476px;
	height:					auto;

	margin-top:				7px;
}

#frequentlyTags a, #frequentlyTags a:link,
#frequentlyTags a:visited, #frequentlyTags a:active {
	color:					#000000;
	text-decoration:		none;
	font-weight:			900;
	font-size:				0.9em;
}

#frequentlyTags a:hover {
	color:					#c30b0b;
}

/* ------------------------------------------------------------------------------------------------------------------ information elements -- */

#information {
	width:					510px;
	height:					630px;
	
	overflow:				auto;
}

/* ------------------------------------------------------------------------------------------------------------------ person information elements -- */

.persons {
	float:					left;
	clear:					both;
	
	width:					469px;
	height:					auto;
	
	font-size:				2.6em;
	font-weight:			900;
	text-transform:		lowercase;

	padding-top:			14px;
	padding-bottom:		14px;
	margin-left:			7px;
}

.infoPersons {
	background:				url('../images/background.mediumgray.png') top left no-repeat #e7e7e8;
	float:					left;
	clear:					both;
	
	width:					462px;
	height:					auto;
	
	padding-left:			7px;
	padding-right:			7px;
	padding-top:			7px;
	padding-bottom:		7px;
	
	margin-top:				7px;
}

/* ------------------------------------------------------------------------------------------------------------------ persons websites elements -- */

.urlWebsite {
	background:				#e7e7e8;
	float:					left;
	clear:					both;
	
	width:					469px;
	height:					auto;
	
	padding-left:			7px;
	padding-top:			7px;
	padding-bottom:		4px;
	margin-top:				7px;
}

.urlWebsite a, .urlWebsite a:link,
.urlWebsite a:visited, .urlWebsite a:active {
	font-size:				1.8em;
	font-weight:			900;
	color:					#000000;
	text-decoration:		none;
}

.urlWebsite a:hover {
	color:					#c30b0b;
}

/* ------------------------------------------------------------------------------------------------------------------ material elements -- */

#materialWrapper {
	float:					left;
	clear:					both;
	
	width:					476px;
	height:					108px;
	white-space:			nowrap;
	overflow-x:				scroll;
	overflow-y:				hidden;
}

.materialWrapper img {
	float:					left;
	clear:					none;
	
	width:					auto;
	height:					104px;
	
	border:					0;
}


/* ------------------------------------------------------------------------------------------------------------------ inspiration elements -- */

.inspiration {
	float:					left;
	clear:					none;
	
	width:					225px;
	height:					auto;
	
	margin-top:				14px;
	margin-right:			15px;
}

.inspiration ul.inspirationList {
	width:					225px;
	height:					auto;
	
	padding:					0px;
	margin:					0px;
	
	list-style-type:		none;
}

.inspiration ul.inspirationList li {
	background:				#b2b3b6;
	float:					left;
	clear:					both;
	
	width:					211px;
	height:					auto;
	
	padding-left:			14px;
	padding-top:			2px;
	padding-bottom:		2px;

	margin-top:				2px;	
}

/* ------------------------------------------------------------------------------------------------------------------ info - bodytext elements -- */

.bodytext {
	float:					left;
	clear:					both;
	
	width:					476px;
	height:					auto;
	
	padding-left:			7px;
	padding-right:			7px;
	padding-top:			7px;
	padding-bottom:		7px;
	
	margin-top:				7px;
}

.bodytext a, .bodytext a:link,
.bodytext a:visited, .bodytext a:active {
	color:					#000000;
	text-decoration:		none;
	font-weight:			900;
	font-size:				0.9em;
}

.bodytext a:hover {
	color:					#c30b0b;