/*--------------------------------------------------------------------	
	Filename: master.css 
	Description: Primary CSS file for Twinic
	Author: Kristof Michiels, kristof.michiels@gmail.com
	URL: http://twinic.com/stylesheets/master.css
	License: Copyright 2008, Kristof Michiels, Creative Commons License
	License type: Attribution-NonCommercial-ShareAlike 2.0 Belgium
	License URL: http://creativecommons.org/licenses/by-nc-sa/2.0/be/
	Last Updated: august 2008
   -------------------------------------------------------------------- */

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;}

html, body {
	height: 100%;
	width: 100%;}

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;}

/* Layout Structure & Basic Styling */

body {
	margin: 0;
	padding: 0;
	background: #ccc;
	color: #111;
	font-size:small;}

pre {
	background-color: #eee;
	padding: 10px;
	font-size: 11px;}

body, p, ol, ul, td {
  /*font-family: helvetica, sans-serif; */
 font-family: lucida grande, verdana, sans-serif;
  line-height: 18px;}

#container {
	margin-left: auto;
	margin-right: auto;
	width: 805px;
	font-size: 95%;}

#header {
	margin-top: 15px;
	/*background: #49412C url(../img/headbg.gif) repeat-x top left;*/
	height: 45px;}

#contentwrapper {
	float: left;
	width: 582px;}

#content {
	border: 0;}

#sidebar {
	margin: 0;
	padding: 0;
	float: right;
	width: 208px;
	background: url(/images/overlayw.png);
	font-size: 95%;
	}

#content .gutter {
	margin: 0;
	padding: 0;}

#sidebar .gutter {
	margin: 0;
	padding: 0;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;}

#footer, #menupart {
	margin: 0;
	padding: 5px 10px 0px 10px;
	clear: both;
	height: 25px;
	background: url(/images/overlayw.png);
	margin-top: 15px;
	}

#announcement {
	background: #fff;
	margin-bottom: 15px;
	margin: 0;
	padding-left: 10px;}

#updateheader {
	background: url(/images/overlayw.png);
	margin: 0;
	padding-left: 10px;
	margin-bottom: 15px;
	padding-top: 6px;
	height: 25px;
	}

#footer {
	padding-left: 0;
	margin-bottom: 15px;}

#menupart {
	float: right;
	clear: none;
	margin: 0;
	background: url(/images/overlayw.png);
	height: 25px;
	}

#menupart ul, #footer ul {
	list-style: none;
	margin: 0;
	border: 0;
	padding: 0;
	margin-top: 1px;}

#footer ul {
	margin-left: 10px;}

#menupart li, #footer li {
	float: left;
	margin: 0;
	margin-left: 5px;
	padding: 0;
	float: left;
	margin-right: 5px;}

#menupart a {
	font-weight: bold;
	text-decoration: none;
	color: #111;}

#menupart a:hover {
	font-weight: bold;
	text-decoration: underline;
	color: #111;
	}

#menupart .instr a {
	color: #111;
	text-decoration: none;
	font-weight: normal;
	font-size: 90%;
	}

#menupart .logo a {
	font-weight: bold;
	color: black;
	vertical-align: top;}

#menupart .logo a {
	text-decoration: none;}

/* Flash-stuff */

.noticeflash {
	background: #ffe94f;
	padding: 10px;
	padding-top: 8px;
	margin-bottom: 15px;
	border: 1px solid #b8ab4e;}

/* Typography */
/* First: headers */

#header h1 { 
	display: inline;}

h2, h3 {
	padding: 0;
	margin: 0;
	margin-bottom: 10px;
	margin-top: 10px;
	font-size: 130%;}

.element h2 {	
	margin: 0;
	margin-bottom: 4px;
	padding: 0px;
	line-height: 22px;
	padding-left: 10px;
	font-size: 120%;}

#comments h2 {
	margin-left: 10px;}

h3 {text-decoration: underline;}

#fullpage h3
{font-size: 110%;
	color: #111;
	margin-top: 15px;
	text-decoration: none;
	border-bottom: 1px solid #111;
	padding-bottom: 5px;}

#sidebar h3 {
	font-size: 105%;
	margin-bottom: 8px;}
	
h4 {
	text-decoration: none;
	margin: 0;
	padding: 0;
	margin-bottom: 7px;
	margin-top: 12px;
	font-weight: normal;}

h4 span {
	text-decoration: underline;
	font-weight: bold;}

/* Next, p-stuff */

p, blockquote {
	line-height: 1.6em;
	margin: 0;
	padding: 0;
	margin-bottom: 10px;
	margin-top: 10px;
	font-size: 100%;}
	
#sidebar p {
	font-size: 100%;}
	
.comment p, #commentform p {
	float: right;
	width: 525px;
	padding: 0;
	margin: 0;
	margin-top: 5px;}	

p.comment_small {
	font-size: 85%;
	color: #111;
	padding-bottom: 5px;}	

.element p, .element li {
	margin-left: 50px;}
	
.element .nomargin p {
	margin-left: 10px;}

/* Linkstuff */

a { 
	color: #495273;}

a:visited { 
	color: #495273;}

a:hover { 
	color: #5c9ac9; 
	}

h2 a, h2 a:hover, h2 a:visited {
	text-decoration: none;
	background: transparent;
	color: #333;}

#sidebar h4 a {
	color: #cd2b1c;
	font-size: 95%;
	float: right;}
	
#sidebar h4 #geotv a {float: none;}

#geotv {float:right;}

a.editlink, a.backlink, a.editlink-c {
	color: #cd2b1c;
	float: right;
	font-size: 85%;}

a.editlink-c {
	display:inline;
	float: none;
}

a.backlink {
	margin-left: 15px;}

#sidebar a.editlink {
	font-size: 95%;}

a.lb {
		border: 1px solid #ccc;
		background: #e5e5e5;
		color: #111;
		text-decoration: none;
		float: right;
		font-size: 80%;
		padding: 0px 3px 0px 3px;
		margin-left: 5px;}

a.lbl {
		border: 1px solid #ccc;
		background: #e5e5e5;
		padding: 3px 3px 3px 3px;
		color: #111;
		text-decoration: none;
		font-size: 90%;}

a.lbp {
		border: 1px solid #111;
		background: #495273;
		padding: 3px;
		color: #fff;
		text-decoration: none;
		text-align: center;
		display: block;
		margin-top: 10px;
		margin-bottom: 5px;}

a.lb:visited, a.lbl:visited {color: #111;}
a.lb:hover, a.lbl:hover {color: #111;border: 1px solid #111;}

a.lbp:visited {color: #fff;}
a.lbp:hover {color: #fff; background: #5c9ac9;border: 1px solid #111;}

.thumb a {
	display: block;
	text-align: middle;
	font-size: 85%;}
	
.savaspace a:hover, .savaspace a {
	text-decoration: none;
	border: 0px solid #fff;
	margin: 0;
	padding: 0;
	background: #fff;}

.link a {
	border: 1px solid #999;
	padding: 2px;}

/* Layout sections stuff */

.element { 
	margin: 0;
	padding: 0;
	padding-top: 8px;
	margin-bottom: 15px;
	padding-bottom: 5px;
	padding-right: 15px;
	background: url(/images/overlayw.png);
	}

.elementheader {
	margin: 0;
	padding: 0;
	margin-left: 10px;
	color: #333;
	margin-bottom: 15px;
	padding-top: 2px;}

#fullpage {
	/* background: url(/images/overlayw.png); */
	padding: 15px;
	padding-top: 5px;
	background: url(/images/overlayw.png);}

.inline_help {
	font-size: 90%;
	color: #666;}

.helptext {
	font-size: 90%;
	color: #999;
	display: block;}

.required {
	color: #ee5b15;
	margin-left: 3px;
	vertical-align: top;}

.channeltype {
	background: #dee1ea;
	border: 1px solid #999;
	padding: 10px;}

.listdetail { 
	margin-bottom: 10px;
	margin-left: 5px;
	border-bottom: 1px solid #ccc;
	height: 60px;}

.channel {
	border-bottom: 1px solid #111;
	margin: 10px;
	padding: 5px;
	min-height: 55px;}
	
#show_advanced_options, #hide_advanced_options, #hide_link_photo, #hide_upload_photo {
	float: right;
	margin-top: 0px;
	margin-right: 25px;}

#map {
	margin: 15px;
	margin-bottom: 25px;}

#comments {
	float:left;
	clear: both;
	background: url(/images/overlayw.png);
	margin-bottom: 15px;
	}

#commentform {
	border-top: 1px solid #dde;
	clear: both;
	padding-top: 5px;
	margin: 10px;
	margin-left: 5px;}

.comment {
	border-top: 1px solid #ddd;
	clear: both;
	margin: 10px;
	margin-left: 5px;}

.thumb {
	display:block;
	float: left;
	margin-right: 16px;
	width: 52px;
	text-align: center;
	margin-bottom: 16px;}

.thumbbox {	
	min-height: 75px;	
	clear: both;}

#cleardiv {
	clear: both;}

.media, .link {
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	text-align: center;}

/* Form Styles, textboxes, dropdowns, textareas, buttons,  and the likes */

.txtbox_title, .txtbox_tags, .txtbox_address, .txtbox_url, .txtbox_text, 
#dupload_file, #phupload_file, .txtbox_text_short, #photo_url_new, 
#login.txtbox_text_short, #password.txtbox_text_short, .txt_box_search
{	width: 525px;
	font-family: lucida grande, verdana, sans-serif;
	color: #2e373c;
	line-height: 1.6em;
	font-size: 100%;}

.txtbox_title {
	width: 525px;
	font-size: 115%;
	font-weight: bold;
	line-height: 1.6em;
}

#login, #password {
	width: 70px;}
	
.txtbox_text_short {
	width: 250px;}

.txtbox_text_xshort,#login.txtbox_text_short, #password.txtbox_text_short {
	width: 175px;}
	
	.txtbox_search {
		width: 140px;}

/* moet verdwijnen ten koste van .txtbox_search */
.txtsearch {
	font-size: 100%;
	font-family: lucida grande, verdana, sans-serif;
	width: 110px;}

.txtlocation {
	font-size: 100%;
	font-family: lucida grande, verdana, sans-serif;
	width: 134px;}

.txtarchive {
	width: 120px;}

.txtarea_update, .txtarea_update_comment {
	width: 525px;
	font-family: lucida grande, verdana, sans-serif;
	font-size: 100%;
	line-height: 1.6em;
	padding: 2px;}

.txtarea_update_comment {
	width: 500px;}

.ddlsidebar {
	width: 152px;
	font-size: 100%;
	font-family: lucida grande, verdana, sans-serif;
	margin-bottom: 7px;}

#phupload_file {
	width: 250px;}

.formbutton {
	display: inline;}

.lstarchive {
	width: 170px;
	margin-bottom: 10px;}

#use_current_location {
	vertical-align: middle;
}

.chkbox {
	vertical-align: middle;
}

/* Image stuff */

img {
	border: 0px solid #fff;}

.savaspace img {
	margin: 0;
	padding: 0;
	margin-right: 0px;}

.channel img {
	display: block;
	float: left;
	margin-right: 15px;
	border: 1px solid #111;
	margin-top: 3px;}

.listdetail img {
	display: block;
	float: left;
	margin-right: 15px;
	border: 0px solid #fff;}

.thumb img {
	display: block;
	float: left;
	border: 0px solid #fff;
	margin-left: 2px;}

a img hover {
	background-color:#fff;}

.thumbbox img, .pavatar img {
	padding: 1px;
	border: 1px solid #ccc;}

.thumbbox img:hover, .savaspace img:hover, .pavatar img:hover {
	border: 1px solid #111;}

.pavatar img {
	margin-bottom: -10px;}

.savaspace img {
	border: 0px;
	vertical-align: text-top;
	display: inline;
	margin: 0;
	margin-bottom: 2px;
	padding-bottom: 0;
	background: #FFF;
	text-decoration: none;
	padding: 1px;
	border: 1px solid #ccc;}

.savaspace a
{margin: 0;
	padding: 0;}


.comment img, #commentform img {
	padding: 1px;
	border: 1px solid #dde;}

.elementheader img {
	margin-bottom: -8px;
	margin-right: 8px;
	border: 1px solid #ccc;
	padding: 1px;}

.elementheader img:hover {
	margin-bottom: -8px;
	border: 1px solid #111;
	padding: 1px;}
	
.comment_pavatar { 
	float: left;
	margin: 0;
	margin-left: 5px;
	margin-bottom: 10px;
	margin-top: 5px;}

/* pagination */

.pagination {
	padding: 3px;
    margin: 3px;}
  
.pagination a {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #2e373c;
    text-decoration: none;
    color: #2e373c;}
  
.pagination a:hover, .pagination a:active {
    border: 1px solid #cd2b1c;
    color: #cd2b1c}
  
.pagination span.current {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    font-weight: bold;
	border: 1px solid #cd2b1c;
    background-color: #cd2b1c;
    color: #FFF;}
  
.pagination span.disabled {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #eee;
    color: #ddd;}

.pagination {
	margin: 0;
	padding: 10px;
	clear: both;
	background: url(/images/overlayw.png);
	margin-top: 15px;
	}

.pagecontrols {
	margin-bottom: 15px;}

/* Rails scaffold provided / mostly validation: TODO

.fieldWithErrors {
  padding: 2px;
  background-color: red;
  display: table;}

#errorExplanation {
  width: 400px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;}

#errorExplanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  background-color: #c00;
  color: #fff;}

#errorExplanation p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;}

#errorExplanation ul li {
  font-size: 12px;
  list-style: square;}

*/

#errorExplanation {
	background: #fec60e;
	padding: 10px;
	padding-top: 8px;
	margin-bottom: 15px;
	border: 2px solid #f26023;}

#errorExplanation h2 {
	margin: 0;
	padding: 0;
}

#errorExplanation p {
  margin-bottom: 0;
  padding: 0;}

#errorExplanation ul li {
  list-style: square;
	margin: 0;
	padding: 0;}

#errorExplanation ul {
	margin: 0;
	padding: 0;
	margin-left: 20px;
	margin-top: 5px;
}

/* Minor tweaks */

#captcha {
	clear: both;
	padding-top: 7px;
	margin-left: 42px;}


/* temporary results from people and channel desig */

.avatar {
	width: 52px;}

.avatar-list {
	float: left;
	margin-bottom: 10px;}

.avatar-list ul {
	list-style: none;
	padding: 0;}

.avatar-list ul li {
	width: 170px;
	float: left;
	margin: 0 10px 10px 0;}

div.info { float: right;
	width:110px;
	padding-left: 8px;
	height: 44px;}

div.info p {
	font-size: 90%;
	color: #999;}

div.info a {
	font-size: 110%;}	

.avatar img {
	padding: 1px;
	border: 1px solid #ccc;}
	
.avatar img:hover, .activity-list img:hover {
	border: 1px solid #111;}


.activity-list {margin-bottom: 15px;}
	
.activity-list ul li{
		margin: 0;
		padding: 0;
		padding-bottom: 5px;
		border-bottom: 1px solid #ccc;
		}
		
.activity-list ul li span {
	margin-left: 10px;
}
		
.activity-list img {
	border: 1px solid #ccc;
	margin-top: 5px;
	padding: 1px;
	vertical-align: bottom;
	}

#sidebar, #footer, #menupart, #updateheader, .element, #fullpage, #comments, 
.pagination, .noticeflash, #errorExplanation, a.lbp, a.lb, a.lbl {	
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-webkit-border-top-left-radius: 4px;}

.geo_header, .geo_body
{
	width: 300px;
}

.geo_body p
{margin: 0;
	padding: 0;}

.geo_header
{margin-bottom: 10px;}

.geo_header img {
	margin-bottom: -8px;
	margin-right: 8px;
	border: 1px solid #ccc;
	padding: 1px;}
	
.photo_home
{
	max-width: 212px;
}

.photo_normal
{
	max-width: 520px;
}

a.febutton {
    padding: 5px;
	border: 1px solid #111;
	color: #111;
	text-decoration: none;
	padding-left: 32px;
    background: #fff url(/images/feicon.gif) 5px 50% no-repeat;
	
}

#tvplaceholder
{
	max-height: 500px;
	overflow: auto;
	text-align: center;
	margin-left: 10px;
	margin-right: 10px;
}

#tvlist li {
	padding-top:10px;
	padding-left: 2px;
	padding-right: 2px;
	
}




#controls {padding-top: 4px;}
#buttons {
position: relative;
z-index: 5;
padding: 2px;
padding-top: 0;
top: 0;
}


#buttons li {
position: relative;float:left;margin-left:0;
}
#VideoLogo a, #VideoStart a, #VideoPlay a, #VideoForward a, #VideoRewind a, #VideoPause a, #VideoStop a, #VideoUnMute a, #VideoMute a {
display: block;
overflow: hidden;
padding: 14px 0 0 0;
height: 0;
width: 14px !important;
margin: 0;
margin-top: 3px;
margin-left: 3px;
}

#VideoLogo a {
width: 25px !important;margin: 0;margin-top: 1px;
}

#VideoLogo a {
background: url(/images/tw.gif) 0 0 no-repeat;
}

#VideoStart a {
background: url(/images/start.gif) 0 0 no-repeat;
}
#VideoPlay a {
background: url(/images/play.gif) 0 0 no-repeat;
}
#VideoForward a {
background: url(/images/forward.gif) 0 0 no-repeat;
}
#VideoRewind a {
background: url(/images/rewind.gif) 0 0 no-repeat;
}
#VideoPause a {
background: url(/images/pause.gif) 0 0 no-repeat;
}
#VideoStop a {
background: url(/images/videoStop.gif) 0 0 no-repeat;
}
#VideoUnMute a {
background: url(/images/unmute.gif) 0 0 no-repeat;
}
#VideoMute a {
background: url(/images/mute.gif) 0 0 no-repeat;
}

#timebar {
clear: both;
position: relative;
width: 240px;
height: 16px;
background: #000;
border: 1px solid #000;
border-left: 100px solid #000;
border-right: 60px solid #000;
padding-bottom: 2px;
color: #fff;
font-size: 8px;
left: 0;
}

#timespan {
position: relative;
z-index: 3;
float: right;
padding: 2px;
padding-top: 0;
top: -1px;
right: -58px;
}

#buttonbar {
position: relative;
z-index: 4;
float: left;
padding: 2px;
padding-top: 0;
top: 0;
left: -99px;
}

#buttonbar img {padding: 0;padding-bottom: 4px;}

#timebarIndicator {
position: absolute;
z-index: 2;
display: block;
left: 0;
top: 0;
background: #fff;
width: 2px;
margin-top: 3px;
height: 9px;
}
#bytesbarIndicator {
position: absolute;
z-index: 1;
display: block;
left: 0;
top: 0;
background: #4c4c4c;
width: 3px;
height: 5px;
margin-top: 5px;
}

#mediaplayer {
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 75px;
	margin-right: 75px;
	padding: 9px 9px 4px 9px;
	display: block;
	text-align: center;
	background: #000;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius-topleft: 6px;
	-webkit-border-top-left-radius: 6px;}

#tvlist li img {border: 1px solid #ccc;padding: 1px;background: #fff;}

#tvlist li img:hover {border: 1px solid #111;padding: 1px;background: #fff;}

#helplist, #adv_helplist, .elementbody ul, #navlist
{
	list-style: square;
	margin-left: 12px;}
	
#helplist li, #adv_helplist li, .elementbody li
{ margin-bottom: 10px;}

#navlist li {
	margin-bottom: 2px;
}