/*

	Stylesheet for TV Tweets

	Media:      screen, projection
	author:     Yoni De Beule info@yoni-web.be

*/

/*
	Reset
*/

body, form, ol, ul, dl, li, dt, dd, td, th ,tr, h1, h2, h3, h4, h5, h6, p, pre, blockquote, address { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { border:0; }
fieldset { margin: 0; padding: 0; border: 0; }
input, select, textarea { font-size: 100%; vertical-align: middle; }
table { border-collapse: collapse; border-spacing: 0; empty-cells: show; }
th { text-align: left; }
a:focus { overflow: hidden; }

/*
	Clearfix
*/

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/*
	General
*/

body {
	font-family:"Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 1.5;
	color: #000;
	background: #00bae6;
}

#container {
	width: 936px;
	margin: 0 auto;
}

/*
	Typography and text styles
*/

/* General */

p {
	padding: 0 0 12px 0;
}

strong, th, thead td, h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
}

/* Headings */

h1 {
	font-size: 22px;
	padding: 0 0 12px 0;
}

h2 {
	font-size: 24px;
	padding: 0 0 12px 0;
}

h3 {
	font-size: 18px;
	padding: 0 0 12px 0;
}

h4 {
	font-size: 12px;
	padding: 0 0 6px 0;
}

/* Links */

a {
	border-bottom: 1px solid #666;
	text-decoration: none;
}

a:link {
	color: #0187c5;
	border-color: #abd7ec;
}

a:visited {
	color: #6e2c95;
	border-color: #cfb9dc;
}

a:hover {
	color: #0187c5;
	border-color: #0187c5;
}

a:active {
	color: #000;
	border-color: #000;
}

h1 a, h2 a, h3 a, h4 a {
	border: 0;
}

/* .content defaults */

.content ul {
	list-style: disc;
	padding: 0 0 12px 12px;
}

.content ol {
	list-style-type: decimal;
	padding: 0 0 12px 12px;
}

.content dl {
	padding: 0 0 12px 12px;
}

.content ul ul,
.content ul ol,
.content ol ul,
.content ol ol {
	padding-bottom: 0;
}

.content code {
	font-family: Monaco, "Courier New", monospace;
}

.content pre {
	font-size: 12px;
	line-height: 18px;
	background: #F5F5F5;
	margin: 0 0 12px 0;
	padding: 10px;
}

.content blockquote,
.content q {
	font-style: italic;
	color: #666;
}

.content blockquote {
	padding: 0 10px; 
	padding: 12px 0;
}

.content cite,
.content em {
	font-style: italic;
}

.content table {
	border-top: 1px solid #000;
	border-left: 1px solid #000;
}

.content td, 
.content th {
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	font-size: 11px; 
	padding: 4px;
}

.content th {
	font-weight: 700;
}

/*
	Page structure and layout
*/

	/* Header */
	
	#header {
		height: 96px;
	}

	/* Logo */

	#header h1 {
		width: 182px;
		height: 57px;
		text-indent: -9999px;
		display: block;
		background: url(../images/logo.gif);
		padding: 0;
		margin: 24px 0 0 24px;
		float: left;
	}

	#header h1 a {
		width: 100%;
		height: 100%;
		display: block;
		overflow: hidden;
	}

	/* Adsense */

	#adsense {
		width: 468px;
		height: 60px;
		margin: 26px 0 0 0;
		float: right;
	}

	/* Navigation */

	#navigation {
		width: 192px;
		background: #fff;
		float: left;
		font-size: 13px;
	}

	#navigation a {
		height: 35px;
		line-height: 35px;
		padding: 6px 12px 6px 76px;
		border-bottom: 1px solid #dcdcdc;
		display: block;
		color: #999;
		background: #eee;
		position: relative;
	}

	#navigation a:link,
	#navigation a:visited {
		border-color: #dcdcdc;
		color: #999;
		background: #eee;
	}

	#navigation a:hover {
		border-color: #dcdcdc;
		color: #666;
		background: #dcdcdc;
	}

	#navigation a:active {
		border-color: #fff;
		color: #000;
		background: #fff;
	}

	#navigation .selected a:link,
	#navigation .selected a:visited {
		border-color: #fff;
		color: #999;
		background: #fff;
	}

	#navigation .selected a:hover {
		border-color: #fff;
		color: #666;
		background: #fff;
	}

	#navigation .selected a:active {
		border-color: #fff;
		color: #000;
		background: #fff;
	}

	#navigation a span {
		width: 36px;
		height: 36px;
		text-indent: -9999px;
		display: block;
		position: absolute;
		top: 6px;
		left: 20px;
	}

	#navigation #navigate_more a {
		height: 29px;
		display: block;
		padding: 0;
		border: 0;
		background: #eee url(../images/arrow_icon.gif) no-repeat 87px 0;
	}

	#navigation #navigate_more a:link,
	#navigation #navigate_more a:visited {
		background: #eee url(../images/arrow_icon.gif) no-repeat 87px 0;
	}

	#navigation #navigate_more a:hover {
		background: #dcdcdc url(../images/arrow_icon.gif) no-repeat 87px -29px;
	}

	#navigation #navigate_more a:active {
		background: #fff url(../images/arrow_icon.gif) no-repeat 87px -58px;
	}

	/* Navigate één */

	#navigate_een a:link span,
	#navigate_een a:visited span {
		background: url(../images/stations.gif) no-repeat 0 0;
	}

	#navigate_een a:hover span {
		background: url(../images/stations.gif) no-repeat -36px 0;
	}

	#navigate_een a:active span,
	#navigate_een.selected a:link span,
	#navigate_een.selected a:visited span,
	#navigate_een.selected a:hover span,
	#navigate_een.selected a:active span {
		background: url(../images/stations.gif) no-repeat -72px 0;
	}

	/* Navigate Canvas */

	#navigate_canvas a:link span,
	#navigate_canvas a:visited span {
		background: url(../images/stations.gif) no-repeat 0 -36px;
	}

	#navigate_canvas a:hover span {
		background: url(../images/stations.gif) no-repeat -36px -36px;
	}

	#navigate_canvas a:active span,
	#navigate_canvas.selected a:link span,
	#navigate_canvas.selected a:visited span,
	#navigate_canvas.selected a:hover span,
	#navigate_canvas.selected a:active span {
		background: url(../images/stations.gif) no-repeat -72px -36px;
	}

	/* Navigate vtm */

	#navigate_vtm a:link span,
	#navigate_vtm a:visited span {
		background: url(../images/stations.gif) no-repeat 0 -72px;
	}

	#navigate_vtm a:hover span {
		background: url(../images/stations.gif) no-repeat -36px -72px;
	}

	#navigate_vtm a:active span,
	#navigate_vtm.selected a:link span,
	#navigate_vtm.selected a:visited span,
	#navigate_vtm.selected a:hover span,
	#navigate_vtm.selected a:active span {
		background: url(../images/stations.gif) no-repeat -72px -72px;
	}

	/* Navigate 2BE */

	#navigate_2be a:link span,
	#navigate_2be a:visited span {
		background: url(../images/stations.gif) no-repeat 0 -108px;
	}

	#navigate_2be a:hover span {
		background: url(../images/stations.gif) no-repeat -36px -108px;
	}

	#navigate_2be a:active span,
	#navigate_2be.selected a:link span,
	#navigate_2be.selected a:visited span,
	#navigate_2be.selected a:hover span,
	#navigate_2be.selected a:active span {
		background: url(../images/stations.gif) no-repeat -72px -108px;
	}

	/* Navigate VT4 */

	#navigate_vt4 a:link span,
	#navigate_vt4 a:visited span {
		background: url(../images/stations.gif) no-repeat 0 -144px;
	}

	#navigate_vt4 a:hover span {
		background: url(../images/stations.gif) no-repeat -36px -144px;
	}

	#navigate_vt4 a:active span,
	#navigate_vt4.selected a:link span,
	#navigate_vt4.selected a:visited span,
	#navigate_vt4.selected a:hover span,
	#navigate_vt4.selected a:active span {
		background: url(../images/stations.gif) no-repeat -72px -144px;
	}

	/* Navigate VijfTV */

	#navigate_vijftv a:link span,
	#navigate_vijftv a:visited span {
		background: url(../images/stations.gif) no-repeat 0 -180px;
	}

	#navigate_vijftv a:hover span {
		background: url(../images/stations.gif) no-repeat -36px -180px;
	}

	#navigate_vijftv a:active span,
	#navigate_vijftv.selected a:link span,
	#navigate_vijftv.selected a:visited span,
	#navigate_vijftv.selected a:hover span,
	#navigate_vijftv.selected a:active span {
		background: url(../images/stations.gif) no-repeat -72px -180px;
	}

	/* Navigate VijfTV */

	#navigate_vitaya a:link span,
	#navigate_vitaya a:visited span {
		background: url(../images/stations.gif) no-repeat 0 -216px;
	}

	#navigate_vitaya a:hover span {
		background: url(../images/stations.gif) no-repeat -36px -216px;
	}

	#navigate_vitaya a:active span,
	#navigate_vitaya.selected a:link span,
	#navigate_vitaya.selected a:visited span,
	#navigate_vitaya.selected a:hover span,
	#navigate_vitaya.selected a:active span {
		background: url(../images/stations.gif) no-repeat -72px -216px;
	}

	/* Content */

	#content {
		width: 744px;
		margin: 0 auto;
		background: #fff;
		float: left;
		-moz-border-radius-topright: 5px;
		-webkit-border-top-right-radius: 5px;
		-moz-border-radius-bottomleft: 5px;
		-webkit-border-bottom-left-radius: 5px;
	}

	/* Program Info */

	#programInfo {
		margin: 24px 24px 0 24px;
		padding: 12px 24px;
		background: #000;
		color: #fff;
		-moz-border-radius-topright: 5px;
		-webkit-border-top-right-radius: 5px;
	}

	#programInfo a:link,
	#programInfo a:visited {
		color: #ccc;
		border-color: #999;
	}

	#programInfo a:hover,
	#programInfo a:active {
		color: #fff;
		border-color: #fff;
	}

	#topInfoWrapper {
		border-bottom: 1px solid #666;
	}

	#programInfo p {
		font-size: 11px;
		line-height: 24px;
		padding: 0;
		color: #999;
	}

	#programInfo #currently {
		float: left;
	}
	
	#programInfo #affiliate {
		float: right;
	}

	#programInfo p.info {
		font-size: 11px;
		line-height: 18px;
	}

	#programInfo h2 {
		line-height: 36px;
		padding: 6px 0 0 0;
		clear: both;
	}

	/* Reply */

	#reply {
		background: #eee;
		padding: 12px 24px 24px 24px;
		margin: 0 24px;
		-moz-border-radius-bottomleft: 5px;
		-webkit-border-bottom-left-radius: 5px;
	}

	#doingForm {
		display: block;
		float: left;
		width: 576px;
	}

	#status {
		width: 566px;
		height: 64px;
	}

	#contactActions {
		background: #dcdcdc;
		width: 552px;
		color: #999;
		line-height: 24px;
		height: 24px;
		padding: 12px 12px;
	}

	#contactButton {
		float: right;
	}

	/* Use Hashtag */

	#useHashtag {
		float: left;
	}

	#useHashtag p {
		padding: 0;
		color: #666;
	}

	#useHashtag p b {
		color: #000;
	}

	/* Footer */

	#footer {
		color: #fff;
		clear: both;
	}

	#footer ul {
		text-align: center;
		padding: 12px 0 72px 192px;
	}

	#footer li {
		display: inline;
		padding: 0 12px;
	}

	#footer a:link,
	#footer a:visited {
		color: #eefafd;
		border-color: #7fdcf2;
	}

	#footer a:hover,
	#footer a:active {
		color: #fff;
		border-color: #fff;
	}

	/* LoginField */

	#loginField {
		background: #eee;
		padding: 12px 24px;
		margin: 0 24px;
		-moz-border-radius-bottomleft: 5px;
		-webkit-border-bottom-left-radius: 5px;
	}

	#loginButton a {
		font-size: 18px;
		font-weight: 700;
		line-height: 44px;
		display: block;
		border: 0;
		text-align: center;
		color: #fff;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}

	#loginButton a:link,
	#loginButton a:visited {
		background: #00bae6;
	}

	#loginButton a:hover {
		background: #00a7cc;
	}

	#loginButton a:active {
		background: #000;
	}

	#loginComment p {
		padding: 12px 0 2px 0;
		font-size: 11px;
		color: #999;
	}

	#loginComment p a:link,
	#loginComment p a:visited {
		color: #666;
		border-color: #b5b5b5;
	}

	#loginComment p a:hover,
	#loginComment p a:active {
		color: #333;
		border-color: #333;
	}

/*
	Twitter Content
*/

	#twitterContent {
		padding: 0 24px;
		height: 792px;
		margin: 24px 0;
		overflow: hidden;
		position: relative;
	}

	#twitterContent #bottomGradient {
		background: url(../images/bottom_gradient.png) repeat-x;
		position: absolute;
		bottom: 0;
		left: 0;
		height: 100px;
		width: 744px;
	}

	#twitterContent li {
		border-bottom: 1px solid #dcdcdc;
		margin: 0;
		overflow: hidden;
		padding: 12px 24px;
	}

	#twitterContent li:hover {
		background: #fafafa;
	}

	/* Avatar */

	.avatar {
		float: left;
		height: 48px;
		width: 48px;
		padding: 1px 24px 0 0;
		overflow: hidden;
	}

	.avatar a {
		border: 0;
		display: block;
	}

	.avatar img {
		height: 48px;
		width: 48px;
		display: block;
	}

	/* Messages */

	#twitterContent .msg {
		font-size: 14px;
		margin-left: 72px;
	}

	#twitterContent .info {
		color: #999;
		font-size: 12px;
		margin-left: 72px;
	}

	#twitterContent p {
		padding: 0; /* Remove the padding from the clearleft p tag twitter uses */
	}

	#twitterContent .info a:link,
	#twitterContent .info a:visited {
		color: #555;
		border-color: #c7c7c7;
	}

	#twitterContent .info a:hover,
	#twitterContent .info a:active {
		color: #333;
		border-color: #333;
	}

	#twitterContent .info .source a {
		font-style: italic;
	}

	#twitterContent .info .source a:link,
	#twitterContent .info .source a:visited {
		border-color: transparent;
		color: #999;
	}

	#twitterContent .info .source a:hover,
	#twitterContent .info .source a:active {
		border-color: #999;
		color: #999;
	}

	.clearleft {
		clear: left;
	}

	/* Paginator */

	#pager-bottom {
		padding: 12px 0;
		text-align: center;
		color: #999;
	}

	/* Page Content */

	#pageContent {
		padding: 24px;
	}

/* Form styles */

label {
	font-weight: 700;
	display: block;
	padding: 4px 0;
}

input.input-text,
textarea.input-text {
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
	font-size: 14px;
	color: #666;
	background: #fff;
	padding: 4px 4px;
	margin: 0;
	border: 1px solid #dcdcdc;
}

@-moz-document url-prefix() {
	input[type="text"]:focus,
	textarea:focus { 
		outline: 2px solid #abd7ec;
		-moz-outline-radius: 2px;
		fborder-color: #333;
	}

	input[type="submit"]:focus { 
		outline: 2px solid #abd7ec;
		-moz-outline-radius: 10px;
		fborder-color: #333;
	}
}

input.input-submit {
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
	font-size: 12px;
	color: #fff;
	text-align: center;
	background: #b1b1b1;
	padding: 0 12px;
	line-height: 24px;
	height: 24px;
	border: 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

@-moz-document url-prefix() {
	input.input-submit { 
		padding: 0 12px 2px 12px;
	}
}

input.input-submit:hover {
	background: #999;
	cursor: pointer;
}

input.input-submit:active,
input.input-submit:focus {
	background: #666;
}

/* General classes */

.hidden { display: none; }
.block { display: block; }
.noPadding { padding: 0 !important; }
.noMargin { margin: 0 !important; }
.floatLeft { float: left; }
.floatRight { float: right; }
.noBorder { border: none; }
.clear { clear: both;}