/* joopvos.nl/txp */

/* styled by Joop Vos - www.redfoxwebdesign.nl - 2007 */

/* editor - CSSEdit - http://www.macrabbit.com/cssedit */

/* Begin of Yahoo Reset CSS - http://developer.yahoo.com/yui/reset */

/* + reset css (redfox) > button */

/* @group yahoo-reset-css */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,button,textarea,p,blockquote,th,td 
{
	margin: 0;
	padding: 0;
}

table 
{
	border-collapse: collapse;
	border-spacing: 0;
}

fieldset,img,button 
{
	border: 0;
}

address,caption,cite,code,dfn,em,strong,th,var 
{
	font-style: normal;
	font-weight: normal;
}

ol,ul 
{
	list-style: none;
}

caption,th 
{
	text-align: left;
}

h1,h2,h3,h4,h5,h6 
{
	font-size: 100%;
	font-weight: normal;
}

q:before,q:after 
{
	content: '';
}

abbr,acronym 
{
	border: 0;
}

/* @end */

/* font-size > http://clagnut.com/blog/348/ */

body 
{
	background-color: #525252;
	text-transform: uppercase;
	font-family: "Lucida Grande", Lucida, "Lucida Sans Unicode", Verdana, sans-serif;
	font-size: 62.5%;
	line-height: 180%;
}

body 
{
	background: #525252 url(gray_sand.png) fixed;
}


#container 
{
	margin: 0 auto;
	padding-bottom: 20px;
	text-align: center;
	background: #fff url(#) no-repeat;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	width: 1005px;
	\width: 1007px;
	w\idth: 1007px;
}


.article p a:link, .article p a:visited 
{
	text-decoration: none;
	color: #585858;
	padding: 0 2px;
	border-bottom: 1px solid #acacac;
	background-color: #f1f0f1;
}

.article p a:hover, .article p a:active 
{
	text-decoration: none;
	color: #fff;
	border-bottom: 1px solid #acacac;
	background-color: #000;
}

a:hover img {
border: none !important;
}

#footer a:link, #footer a:visited 
{
	text-decoration: none;
	color: #dfdfdf;
	padding-bottom: 1px;
	border-bottom: 1px solid #dfdfdf;
}

#footer a:hover, #footer a:active 
{
	text-decoration: none;
	color: #dfdfdf;
	border-bottom: 0px solid #dfdfdf;
}

.footer_right #flickr_badge_uber_wrapper a
{
	border: 0px;
}

/* @group header */

#header 
{
	height: 4em;
	background-color: #000;
	text-align: left;
	margin-bottom: 20px;
}

ul#nav
{
	float: left; /* making li inside ul */
	list-style: none; /* no browser' bullets here */
	text-align: left;
	background-color: #000;
	padding-top: .4em;
	padding-left: 20px;
}

ul#nav li 
{
	float: left; /* making list horizontal here */
	display: inline;
	padding-right: 10px;
	font-size: 1.4em;
	font-weight: normal;
	background-color: #000;
	color: #fff;
	line-height: 200%;
}

ul#nav li span
{
	padding-left: 14px;
}

ul#nav li a 
{
	float: left; /* to line up blocks horizontal */
	display: block; /* to make tab clickable */
	text-decoration: none;
	color: #bfbfbf;
	border-bottom: 0;
	background-color: #000;
	padding: 0; /* to vertical align all content in nav because there is also text (|) between li's! */
}

ul#nav a:hover 
{
	color: #fff;
	background-color: #000;
	text-decoration: none;
}

#home ul#nav li.home a, #recent ul#nav li.recent a, #archive ul#nav li.archive a
{
	color: #fff;
	background-color: #000;
	text-decoration: none;
}

ul#slick
{
	float: right; /* making li inside ul */
	list-style: none; /* no browser' bullets here */
	text-align: right;
	background-color: #000;
	padding-top: .4em;
	padding-right: 20px;
}

ul#slick li 
{
	float: left; /* making list horizontal here */
	display: inline;
	padding-left: 10px;
	font-size: 1.4em;
	font-weight: normal;
	background-color: transparent;
	color: #000;
	line-height: 200%;
}

ul#slick li span
{
	padding-left: 10px;
	color: #fff;
}

ul#slick li a 
{
	float: left; /* to line up blocks horizontal */
	display: block; /* to make tab clickable */
	text-decoration: none;
	color: #a6a6a6;
	border-bottom: 0;
	background-color: #000;
	padding: 0; /* to vertical align all content in nav because there is also text (|) between li's! */
}

ul#slick a:hover 
{
	color: #fff;
	background-color: #000;
	text-decoration: none;
}

/* @end */

/* @group content */

#content 
{
	background-color: #fff;
	text-align: left;
	padding-bottom: 8px;
}

#archive #content
{
	margin-bottom: 20px;
}

/* height: 1% in IE6/7 ... if not then image (recent) drifts to the left when hovered!  */

.article
{
	position: relative;
	height: 1%;
	margin-bottom: 20px;
	background-color: #fff;
}

.article h3 
{
	font-weight: normal;
	font-size: 1.3em;
	color: #555;
	margin-bottom: 12px;
	padding-left: 20px;
	background-color: #fff;
	text-align: left;
}

.article h3 a:link, .article h3 a:visited
{
	text-decoration: none;
	color: #555;
	padding-bottom: 0px;
	border-bottom: 1px solid #7b7b7b;
	background-color: #fff;
}

.article h3 a:hover, .article h3 a:active
{
	text-decoration: none;
	color: #555;
	padding-bottom: 0px;
	border-bottom: 1px solid #fff;
	background-color: #fff;
}

#articles .article h3 a
{
	border: 0;
}

/*
.article p#slickbox 
{
	position: absolute;
	right: 20px;
	top: 50px;
	width: 24em;
	margin-right: 20px;
	padding: 10px 10px 40px;
	font-weight: normal;
	font-size: 1.3em;
	line-height: 140%;
	color: #dfdfdf;
	background: #252525 url(images/38.gif) repeat 0 0;
	text-transform: none;
	border: 1px solid #8c8c8c;
}
*/

/* text beneath images (info paintings) */

.article p
{
	position: relative;
	padding: 0 0 0 20px;
	font-size: 1em;
	color: #686868;
}

/* width 20px in IE6 p#slickbox gives 1px extra (!) at the right ... showing 1px of the image ... therefore width 19px and a border-right 1px for other browsers! */

.article p#slickbox 
{
	position: absolute;
	right: 19px;
	top: 50px;
	margin-right: 0px;
	padding: 10px 0px 40px 20px;
	font-weight: normal;
	font-size: 1.5em;
	line-height: 160%;
	color: #555;
	background-color: #fff;
	text-transform: none;
	text-align: right;
	border-right: 1px solid #fff;
	width: 278px;
	\width: 289px;
	w\idth: 289px;
}

#home .article p#slickbox {top: 20px;}

/* post with two images strange 1px extra gap! see > http://www.joopvos.nl/txp/studio-270501  */

.article img 
{
	border: none;
	margin: 0 -3px 0 20px;
}

.article a:link img, .article a:visited img
{
	text-decoration: none;
}

.article a:hover img, .article a:active img
{
	text-decoration: none;
	border-bottom: none;
}

#archive .article h3
{
	font-weight: normal;
	font-size: 1.2em;
	color: #555;
	margin-bottom: 4px;
	padding-left: 20px;
	background-color: #fff;
}

#archive .article dl
{
	clear: both;
	margin-bottom: 10px;
}

#archive .article dl.empty
{
	margin-bottom: 0px;
}

#archive .article dd
{
	float: left;
	margin-right: 20px;
	margin-bottom: 10px;
}

#archive .article dd br
{
	font-size: 0;	
}

#archive .article dd img
{
	margin-top: -16px;	
}

/* @end */

/* @group footer */

#footer 
{
	background-color: #fff;
}

.footer_left, .footer_center, .footer_right
{
	width: 297px;
	height: 28em;
	float: left;
	margin-left: 20px;
	padding: 6px;
	padding-bottom: 20px;
	border: 0px solid gray;
	background-color: #202020;
	display: inline; /* float + margin (doubled) bug IE/win! */
}

#footer p 
{
	font-size: 1.3em;
	line-height: 140%;
	font-weight: normal;
	color: #dfdfdf;
	background-color: transparent;
	text-align: left;
	text-transform: none;
}

#footer p br
{
	line-height: 50%;
}

#footer p.footer_center 
{
	font-size: 1em;
	line-height: 140%;
	font-weight: normal;
	color: #333;
	background-color: transparent;
	text-align: left;
	text-transform: none;
}

/* @end */

h1, h2
{
	position: absolute;
	text-indent: -9000px;
}

img.noborder
{
	border: 0px;
}

a.nodec 
{
	padding: 0;
	border: 0px;
	background-color: #fff;
}

a 
{
	outline: none;
}

#accessibility 
{
	position: absolute;
	top: -10000px;
}

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

/* WinIE7 only */
*:first-child+html .clearfix
{
	height:1%;
}

/* WinIE6 and below */
/*¥*/
* html .clearfix
{
	height:1%;
}
/**/

/* MacIE only */
/*¥*//*/
.clearfix
{
	display:inline-table;
}
/**/

/* @group flickr */
.footer_right #flickr_badge_uber_wrapper {margin: 0 auto;}
#flickr_badge_uber_wrapper {text-align:center; width:260px; padding-top: 4px;}
#flickr_badge_wrapper {padding:10px 0 10px 0;}
.flickr_badge_image {margin:0 10px 10px 10px;}
.flickr_badge_image img {border: 0px solid white !important;}
#flickr_badge_source {text-align:left; margin:0 10px 0 10px;}
#flickr_badge_icon {float:left; margin-right:5px;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: normal 1.3em Arial, Helvetica, Sans; color:#3993ff !important; text-transform: none;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important; color:#3366FF; font-style: normal; text-transform: none;}
#flickr_badge_wrapper {}
#flickr_badge_source {padding:0 !important; font: normal 1.3em Arial, Helvetica, Sans serif !important; color:#666666 !important; text-transform: none;}

/* @end */