/**
* @author   $Author: martijn $
* @revision $Revision: 147 $
* @date     $Date: 2009-11-14 18:18:28 +0100 (za, 14 nov 2009) $
*/

/**********************************
* STANDAARD ELEMENTEN            **
**********************************/
	html, body {
		margin:0;
		padding:0;
	}
 
	body {
		background: #F8E0AF no-repeat url('/images/skin/marcello/bg.jpg') center top;
	}

	*, td, th, caption {
		font-family: "Lucida Sans", Tahoma, Verdana, sans-serif;
		font-size: 9.5pt;
		line-height: 120%;
		color: #522812; /* #333333; */
	
	}
	
	p {
		margin-top:0;
	}
	
	li {
		padding-left:0;	
	}
	

	fieldset {
		border-color: #eee;	
	}
		
	h1, legend {
		font-family: HelveticaNeue, Helvetica;
		font-size:18.5pt;
		font-weight:bold;
		margin:0;
	/* 	border-bottom: 1px dotted;
	 */
	}
	
	h1 {
		margin-bottom: 10px;
		color: #333;
	}
	
	a:focus {
        outline: none;
    }
	
	a img {
		border:none;	
	}
	
	a.highlighted {
		font-weight: bold;	
	}

	a:hover {
		text-decoration: underline;	
	}
	
	.small {
		font-size: smaller;	
	}

	#wk_countdown_holder {
		font-weight: bold;
		display:inline;
	}
	
/***********************************
** MAIN LAYOUT                    **
***********************************/
	
	#container, #header, #main, #footer {
		position:relative;
		overflow:hidden;
	}
	
	#container {
		margin: 0 auto;
		width: 950px;			
	}
	
	#header {
		height:225px;
		margin-bottom: 20px;
	}
	
	#mainnav, 
	ul#topnav {
		margin:0; 
		padding:0;
	}
	
	ul#topnav, #adminBox {
		position: absolute;
		right: 24px;
		top:0;
		width: 414px; 
		height: 44px;
		overflow: hidden;
		background: url(/images/skin/marcello/bg_topmenu.png) center top no-repeat;	/*color is left out on purpose otherwise the rounded corners dont show up*/
	}
	
	#adminBox {
		visibility: hidden;
		top:0;
		left:200px;
		width: 320px;
		padding-top: 3px;
		padding-left: 5px;
	}

	
	ul#topnav li, #adminBox form {
		list-style-type:none;
		float:left;	
		padding: 5px 15px;
	}
	
	#q, #adminBox .text {
		width: 140px;
		font-style: italic; 
		color: #707070;
		padding: 5px;
		border: 1px solid #140F0F;
	}
	
	#adminBox form {
		padding:0; 
		padding-left: 10px;
	}
	
	#adminBox .text {
		width: 100px;
	}
	
	ul#topnav a, #adminBox a {
		font-family: Helvetica;
		color: white;
		font-size: 12pt;
		text-decoration:none;
		line-height: 30px;
	}	
	
	#adminBox a {
		line-height: 100%;	
	}
	
	ul#topnav a:hover, #adminBox a:hover {
		text-decoration: underline;	
	}
	
	#mainnav {
		position: absolute;
		width: 190px;
		height: 225px;
		vertical-align:middle;
	}
	
	#mainnav li {
		list-style-type:none;
	}
	
	#mainnav li a,
	#bt_pool {
		font-family: HelveticaNeue, Helvetica;
		font-size: 24pt;
		font-weight: bold;
		color: #02294d;
		display:block;
		text-decoration:none;
		text-indent: -900em;
		background-image: url('/images/skin/marcello/mainmenu.png');
		background-repeat: no-repeat;
	}
	#bt_fotodump {
		background-position: right 0px;		
	}
	#bt_poker {
		background-position: right -40px;
	}
	#bt_random {
		background-position: right -80px;		
	}
	
    /***********************************
    ** POOL LOGIN                     **
    ***********************************/
	
    #pool_login {
		position: absolute;
		width: 190px;
		height: 225px;
		vertical-align:middle;
	}
	
	#bt_pool {
		background-position: right -40px;
	}
	
	
	#footer {
		margin-top: 50px;
		margin-bottom: 15px;
		padding-bottom: 45px;
		clear:both;	
		background: url('/images/skin/marcello/footer.png') right bottom no-repeat;
	}
	
	#footer_col1 {
		margin-left: 8px;
		width: 450px;	
	}
	
	#footer_col2 {
		line-height: 150%;
		position:absolute;
		text-align:right;
		right: 180px;
		bottom: 47px; 
		/* 
		right: 40px;
		bottom: 127px; */
	}
	
	#copyright {
		color: white;
		font-weight: bold;
		position: absolute;
		left: 50%;
		bottom: 15px;
		font-size: smaller;
		text-align:center;	
	}
	
	#adminsubmenu {
		background: #44200E;
		color: white;
		padding-left: 10px;
		height: 20px;
	}

	#adminsubmenu a {
		color: white; 
		text-decoration: none;
	}
	
/***********************************
** COLS                           **
***********************************/
	
	/* #col1,  */
	#relatedcol,
	#relatedholder {
/* 		background: red;
 */		float:right;
		width: 238px;
		overflow:hidden;
		/* text-align: justify; */
	}
	
	#relatedcol h1 {
		text-align: right;
	}
	
	/* col2 */
	#shoutboxcol, #articlephotoholder {
/* 		background: green;
 */		float:right;
		overflow:hidden;
		width: 200px;
		margin-left: 24px;
		margin-right: 26px;
	}
	
	/* #col3, */
	#articleholder,
	#articlecol {
/* 		background: blue;
 */		width: 462px;
		overflow:hidden;
		float:left;
	}
	
/***********************************
** COMMENTS                       **
***********************************/

	#lastComments .commentHeader {
		text-indent:14px;
		margin-bottom: 5px;
	}
	#lastComments .commentBody {
		background: url(/images/skin/marcello/last_comments.png) no-repeat;
		padding: 8px 14px;
		padding-bottom: 0;
		min-height: 84px;
	}
	
	#lastComments p {
		margin:0;	
	}
	
	.commentHeader {
		font-size: smaller;	
	}
	
	#lastComments a {
		text-decoration: none;
	}
	
/***********************************
** ARTICLES                       **
***********************************/
	div.article_body,
	p.article_header,
	.article_footer {
		width: 434px; /* 462 - (2 x 14) */	
		padding-left: 14px;
		padding-right: 14px;
	}

	.article_body {
		background: url(/images/skin/marcello/bg_article.png) repeat-y;
	}

	p.article_header {
		background: url(/images/skin/marcello/article_top.png) no-repeat;
		padding-top: 8px;
		margin:0;
	}
	
	p.article_header,
	p.article_header a {
		font-size: 8pt;
		text-decoration:none;
		color: #522812;
	}
	
	.article_footer {
		background: url(/images/skin/marcello/article_bottom.png) no-repeat bottom center;
		min-height: 32px;
		margin-top: -1em;  /*fixes the last p that makes 13px gap. */
		margin-bottom: 20px;
	}
	
	.article_footer a {
		text-decoration: none;
		display:block;
		font-weight: bold;
		float:left;
		list-style-type: none;
		padding:0; 	
		margin:0;
		margin-right: 10px;
/*		padding-top: 10px;
		padding-bottom: 10px;
 */	}
	
	a#bt_reageer {
		background: url(/images/skin/marcello/icon_pencil.png) no-repeat left center;	
		width: 60px;
		padding: 10px 0 10px 22px;
	}
	
	a#bt_reacties {
		background: url(/images/skin/marcello/icon_balloon.png) no-repeat left center;	
		width: 120px;
		padding: 10px 0 10px 30px;
	}
	
	ul.Zend_Tag_Cloud {
		margin:0;
		margin-top: 10px;
		padding: 0;
	}

	ul.Zend_Tag_Cloud li {
		display:inline;
	}	
	
	ul#related {
		margin:0;
		margin-left: 20px;
		padding: 0;
	}
	
	ul#related a {
		font-size: 9pt;
		text-decoration: none;
		color: #333;
	}	

	ul#related a:hover {
		text-decoration: underline;	
	}


/***********************************
** PHOTOS                         **
***********************************/
	a.thumb { /*holds the photo as background*/
		display:block;
		background: center center no-repeat;
		border: 1px solid #C3AB8B;
		width: 200px;
		height: 150px;
		overflow:hidden;
	}
	
	div.thumbholder {
		display:block; 
		float:left; 
		width:200px; 
		padding:10px;
		padding-bottom: 0; 
		overflow:hidden;
	}
	
	.thumbcaption {
		width: 100%;	
		white-space: nowrap;
	}
	
	
	.thumbcaption, .thumbcreated, .thumbnrcomments {
		font-size: 9pt;
	}
	
	span.thumbcreated {
		float:left;
	}
	
	span.thumbnrcomments {
		float:right; 
	}

	#photoholder {
		float:left;
		border: 1px solid #C3AB8B;
		position:relative;
		margin-bottom: 200px;
		/* when caption is on top
		background-position: 0 20px;  /* 20px is reserved for the photocaption (which is 20px high) */
		background-repeat: no-repeat;
	}
	
	#photocaption {
		clear:left;
		position:absolute;
		top:0;
		width:100%;
		color: white;
		text-indent: 10px;
		line-height: 20px;
		font-weight:bold;
	}
	
	a#next,
	a#prev {
		text-indent: -9000px;   
		display:block; 
		height:100%; 
		width:100px;
	}
	
	a#prev:hover, a#prev:focus {
		background: url('/images/skin/bt_prev.png') no-repeat 25% 50px;
		
	}
	a#next {
		position:absolute; 
		right:0;
		top:0;
	}
	
	a#next:hover, a#next:focus {
		background: url('/images/skin/bt_next.png') no-repeat 75% 50px;	
	}

/***********************************
** SHOUTBOX                       **
***********************************/
	
	#shoutcontainer {
   	    background: url(/images/skin/marcello/bg_article.png) -1px 0 repeat-y;
            border: 1px inset black;
	    border-right: none;
	    margin-bottom:3px;
	    padding-left: 5px;
	    width: 194px;
	    height: 330px !important;
	    overflow: auto;
	    overflow-x: hidden !important; 
	    -ms-overflow-x: hidden; 
	}
	
	#shoutcontainer * {
	    padding:0;
	    margin:0;
	}
	
	ul#shouts li {
		display:block;
		padding: 4px 0;
		border-bottom: 1px solid white;	
	}
	
	ul#shouts span.name {
		font-weight:bold;
	}
		
	ul#shouts span.ago {
		font-size: smaller;	
	}

	#textLimitCounter {
		width:25px; 
		text-align:center;
	}
	
	#shoutname {
		width: 154px;	
	}
	
	#shouttext {
		width: 192px;
		margin-top: 3px;
		margin-bottom: 3px;
	}
	
	#shoutfeedback {
	     font-weight: bold; 
	    width: 192px;
	}

/***********************************
** FORMS                          **
***********************************/
	
	form {
		display:inline;
	}
	
	.bt_search {
		position:relative; 
		top: 5px; 
		left: 2px;	
		border: 1px solid black;
	}
	
	.error {
		border:2px solid red;
	}	
	
	.text, .textarea {
		background-color: #FAEAC7;
		border: 1px inset black;	
		padding: 2px 3px;
	}
	
	.textarea {
		width: 90%;	
	}
	
	.text1 { /* use this class for spam honeypot fields */
		display:none;	
	}

/***********************************
** POKER                          **
***********************************/
	
	table.poker {
		border-collapse: collapse;
		border:1px solid #9F9F9F;
	}
	
	span.viewSwitcher {
		float:right;
		font-size: 9px; 
		cursor:pointer; 
		color: #D2D2D2;
	}
	
	table.poker td, table.poker th {
		padding: 2px 4px;
		color: gray;
		border-top: dotted 1px #E3E3E3;
		border-bottom: dotted 1px #E3E3E3;
	}
	
	table.poker td.sortedColumn {
		background: #D2D2D2;	
	}
	
	table.poker th {
		color: black;
		white-space:nowrap;
		border-left: dotted 1px #E3E3E3;
		border-right: dotted 1px #E3E3E3;}
	
	.right {
		text-align: right;	
	}
	.center {
		text-align: center;	
	}
	
	a.yeartabs, span.yeartabs {
		margin: 2px 5px;	
		margin-bottom: 0;
		padding: 2px 5px;
		padding-bottom: 0;
		border: 1px solid black;
		border-bottom: none;	
		text-decoration: none;
	}
	span.yeartabs, a.yeartabs:hover {
		background:#767676;
	
	}