/*
*** Coded with loving care by Mat at Demotive ***
***	"Toiling since '75" | September 2009      ***
*** .......... www.demotive.com ............. ***
*/

/****************************** Meyer zero out ******************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* Andy D wanted this not me :P */
:focus {
	outline: 0;
}


/* HIGHLIGHT TEXT only works in firefox and safari
/* selected text styles */
*::selection {
	color:#000;
	background: #00CCFF; /* Safari */
}
*::-moz-selection {
	color:#000;
	background: #00CCFF; /* Firefox */
}
/* HIGHLIGHT TEXT only works in firefox and safari */

body {
	font-family: Arial, Verdana, sans-serif;
	font-size: 62.5%;	/* 10px */
	line-height: 1;
	color: #fff;
	background: #000;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/****************************** access links ******************************/
#nav-accessibility {
	position: absolute;
	top:-999em;
	left: 0;
	z-index: 999;
	width: 100%;
	list-style: none;
	text-align: center;
}
	#nav-accessibility a {
		position: absolute;
		top:0;
		left: 0;
		display: block;
		width: 98%;
		border-left: 10px solid #000;
		padding:4px 0 6px 0;
		color: #fff;
		text-decoration: none;
		background: #1D1A21;
		box-shadow: 0 6px 6px #000;
		-moz-box-shadow: 0 6px 6px #000;
		-webkit-box-shadow: 0  6px 6px #000;

	}
	#nav-accessibility a:focus {
		top:999em;
		outline: 0;
	}

/****************************** inner centered containers ******************************/
.inner {
	margin: 0 auto;
	width: 946px;
}
/****************************** header area ******************************/
#header {
	clear: both;
	background: #000;
}
	#header .inner {
		position: relative;
		padding: 10px 0;
	}
		#logotype {
			display: block;
			width: 152px;
			height: 42px;
			overflow: hidden;
			text-indent: -999em;
			background: url(../images/structural/hd_logo.gif) no-repeat 0 0;
		}
/* top (main) navigation */
		#nav-main {
			position: absolute;
			z-index: 1;
			top:19px;
			right:0;
		}
			#nav-title {
				display: block;
				width: 105px;
				height: 23px;
				overflow: hidden;
				text-indent: -999em;
				background: url(../images/structural/btn_site_nav.gif) no-repeat 0 0;
			}
/* main nav sub area - js to show hide, no js = constant display */
				#nav-main ul {
					position: absolute;
					top:-15px;
					left:-485px;
					width:481px;
					height: 98px;
					list-style: none;
					background: url(../images/structural/hd_nav_sprite.png) no-repeat 0 0;
				}
					#nav-main li {
						position: absolute;
					}
					#nav-main .home { top: 17px; left: 13px; }
					#nav-main .work { top: 47px; left: 13px ; }
					#nav-main .blog { top: 71px; left: 13px; }
					#nav-main .about { top: 47px; left: 111px; }
					#nav-main .delicious { top: 71px; left: 111px; }
					#nav-main .terminology { top: 47px; left: 217px; }
					#nav-main .flickr { top: 71px; left: 217px; }
					#nav-main .know { top: 47px; left: 353px; }
					#nav-main .contact { top: 71px; left: 353px; }
						#nav-main li a {
							padding-left: 26px;
							font-size: 1.2em;
							color: #1D1A21;
							text-decoration: none;
						}
						#nav-main a:hover {
							text-decoration: underline;
						}
				

/****************************** content area ******************************/
#content {
	clear: both;
	padding:0 0 80px 0;
	background: #1D1A21 url(../images/structural/bg_content_area.gif) right bottom no-repeat;
}
	#content .inner {
		padding-top:40px;
	}
	.homepage #content .inner {
		padding-top:0;
	}

/****************************** footer area ******************************/
#footer {
	clear: both;
	padding: 0 0 18px 0;
}
	#footer .inner {
		margin-top:-12px;
	}
		#footer p {
			line-height:130%;
			padding:16px 0 0 66px;
			background: url(../images/structural/ft_logo.gif) no-repeat 0 0;
		}
			#footer strong {
				display: block;
				margin: 0 0 3px 0;
				font-size: 2em;
			}
		#nav-footer {
			float:right;
			margin-top:12px;
			list-style: none;
		}
			#nav-footer li {
				float: left;
			}
				#nav-footer a {
					position: relative;
					display: block;
					width: 30px;
					height: 27px;
					outline:0;
					margin-left: 2px;
					color: #00CCFF;
					text-decoration: none;
					background: url(../images/structural/ft_nav_sprite.gif) 0 0 no-repeat;
				}
				#nav-footer .work a { background-position: -30px 0; }
				#nav-footer .blog a { background-position: -60px 0; }
				#nav-footer .terminology a { background-position: -90px 0; }
				#nav-footer .know a { background-position: -120px 0; }
				#nav-footer .delicious a { background-position: -150px 0; }
				#nav-footer .flickr a { background-position: -180px 0; }
				#nav-footer .about a { background-position: -210px 0; }
				#nav-footer .contact a { background-position: -240px 0; }
					#nav-footer span {
						position: absolute;
						left: 17px;
						top: -65px;
						display:block;
						width:62px;
						height:62px;
						text-indent:-999em;
						visibility:hidden;
					}
					#nav-footer a:hover span,
					#nav-footer a:focus span {
						visibility:visible;
					}
					#nav-footer .home span { background: url(../images/structural/ft_over_home.gif) 0 0 no-repeat; }
					#nav-footer .work span { background: url(../images/structural/ft_over_work.gif) 0 0 no-repeat; }
					#nav-footer .blog span { background: url(../images/structural/ft_over_blog.gif) 0 0 no-repeat; }
					#nav-footer .terminology span { background: url(../images/structural/ft_over_terminology.gif) 0 0 no-repeat; }
					#nav-footer .know span { background: url(../images/structural/ft_over_gtk.gif) 0 0 no-repeat; }
					#nav-footer .delicious span { background: url(../images/structural/ft_over_delicious.gif) 0 0 no-repeat; }
					#nav-footer .flickr span { background: url(../images/structural/ft_over_flickr.gif) 0 0 no-repeat; }
					#nav-footer .about span { background: url(../images/structural/ft_over_about.gif) 0 0 no-repeat; }
					#nav-footer .contact span { background: url(../images/structural/ft_over_contact.gif) 0 0 no-repeat; }
	#credits {
		float:right;
		position:relative;
		top:-10px;
	}
		#credits dt,
		#credits dd {
			float:left;
			font-size:0.9em;
		}
		#credits dt {
			padding:0 5px 0 15px;
		}
		#credits img {
			display:inline;
		}

/****************************** grid classes ******************************/
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { float: left; margin-right: 14px; } 
.col-1 { width: 66px; }
.col-2 { width: 146px; }
.col-3 { width: 226px; }
.col-4 { width: 306px; }
.col-5 { width: 386px; }
.col-6 { width: 466px; }
.col-7 { width: 546px; }
.col-8 { width: 626px; }
.col-9 { width: 706px; }
.col-10 { width: 786px; }
.col-11 { width: 866px; }
.col-12 { width: 946px; }

.p-1 { padding-left: 66px; }
.p-2 { padding-left: 146px; }

.push-4 { padding-right: 306px; }

.col-last { margin-right: 0; }
.m-15 { margin-right: 15px; }

/****************************** typography bits and bobs ******************************/
a {
	color: #00CCFF;
	text-decoration: none;
}
a:hover,
a:focus {
	text-decoration: underline;
}
img { display: block; }
.level-2 {
	font-size: 1.6em;
	font-weight: bold;
	margin-bottom:14px;
}
.article {
	padding-bottom: 40px;
	font-size: 1.2em;
}
	.article h1 {
		margin-bottom: 32px;
		font-size: 2em;
		font-weight: bold;
	}
	.article h2 {
		margin: 20px 0 14px 0;
		font-weight: bold;
	}
	.article h3 {
		margin: 20px 0 14px 0;
		font-weight: bold;
	}
	.article p,
	.article dl,
	.article ul,
	.article ol {
		line-height: 1.5em;
		margin-bottom: 1.5em;
	}
		.article p strong {
			font-size: 1.167em;	/* 14px */
			font-weight: bold;
		}
		.article dt {
			position: relative;
			top: -1px;
			float:left;
			margin: 0 6px 0 0;
			font-size: 1.167em;	/* 14px */
			font-weight: bold;
		}
		.article dd {
			margin-bottom: 1.5em;
		}
	.article pre {
		font-size: 1.167em;	/* 14px */
		margin-bottom: 1.5em;
	}

/****************************** specific page items ******************************/

/* 1. homepage */
#site-intro h2 {
	position: relative;
	left: -6px;
	padding-top: 18px;
	font-size: 15em;
	font-weight: bold;
}
#site-intro h3 {
	position: relative;
	left: -2px;
	margin-top:-6px;
	font-size: 4em;
	color: #E4E4E4;
}
#site-intro p {
	margin:18px 0 38px 0;
	font-size: 1.5em;
	color: #E4E4E4;
}
#site-intro .cufon { overflow: hidden; }
#site-intro p .cufon { padding-bottom:1px; }
#swf-area {
	width: 946px;
	height: 420px;
	clear: both;
}
#latest-work {
	position: relative;
}
	#latest-work .hook {
		position: absolute;
		top:-68px;
		left:944px;
		display: block;
		width:32px;
		height:100px;
		background: url(../images/structural/icon_pen.gif) 0 0 no-repeat;
	}
	#latest-work ul {
		list-style: none;
		padding-top:38px;
	}
		#latest-work ul h5 {
			font-size:1.6em;
			font-weight: normal;
			color: #00CCFF;
		}
		#latest-work ul a {
			position: relative;
			display: block;
			width: 294px;
			margin:6px 0 38px 0;
			border: 6px solid #333;
		}
		#latest-work ul a:hover,
		#latest-work ul a:focus {
			text-decoration: none;
		}
			#latest-work ul a span {
				position: absolute;
				left:0;
				bottom: 0;
				display: block;
				width: 282px;
				padding: 12px 6px 8px 6px;
				font-size: 1.2em;
				line-height:130%;
				background: rgba(0, 0, 0, 0.8);
			}
				#latest-work ul strong {
					display: block;
					margin-bottom: 4px;
					font-size: 1.333em;	/* 16px */
			}
		#latest-work .pull-link {
			position: relative;
			top: -20px;
			clear:both;
		}
			#latest-work .pull-link a {
				display: block;
				float: right;
				width: 91px;
				height: 11px;
				overflow: hidden;
				text-indent: -999em;
				background: url(../images/structural/btn_see_all.gif) 0 0 no-repeat;
			}
#also-links ul {
	clear: both;
	list-style: none;
}
	#also-links ul li {
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-topright: 5px;
		-moz-border-radius-bottomleft: 5px;
		-moz-border-radius-bottomright: 5px;
		-webkit-border-top-left-radius: 5px;
		-webkit-border-top-right-radius: 5px;
		-webkit-border-bottom-left-radius: 5px;
		-webkit-border-bottom-right-radius: 5px;
		min-height: 120px;
		background: url(../images/structural/bg_also-links_tile.png) 0 0 repeat-x;
	}
		#also-links a {
			display: block;
			padding:18px 16px;
			font-size: 1.2em;
			line-height:130%;
			color: #E4E4E4;		
		}
		#also-links a:hover,
		#also-links a:focus {
			color: #00CCFF;
			text-decoration: none;	
		}
		#also-links .terminology {
			background: url(../images/structural/icon_terminology.gif) 190px 15px no-repeat;
		}
		#also-links .know {
			background: url(../images/structural/icon_know.gif) 198px 12px no-repeat;
		}
		#also-links .delicious {
			background: url(../images/structural/icon_delicious.gif) 190px 12px no-repeat;
		}
		#also-links .blog {
			background: url(../images/structural/icon_blog.gif) 183px 12px no-repeat;
		}
			#also-links ul li strong {
				display: block;
				margin-bottom:13px;
				font-size: 1.667em;	/* 20px */
				font-weight: normal;
				color: #00CCFF;
			}
			
/* 2. Portfolio page */

/* visuals area */
#visuals ol {
	list-style:none;
}
	#visuals li {
		float:left;
		margin-right:2px;
	}
		#visuals li a {
			display:block;
			width:30px;
			height:22px;
			text-indent:-999em;
			background:url(../images/structural/sprite_portfolio.gif) 0 0 no-repeat;
		}
		#visuals #p1 a { background-position:0 0; }
		#visuals #p1 a:hover { background-position:0 -22px; }
		#visuals #p2 a { background-position:-30px 0; }
		#visuals #p2 a:hover { background-position:-30px -22px; }
		#visuals #p3 a { background-position:-60px 0; }
		#visuals #p3 a:hover { background-position:-60px -22px; }
		#visuals #p4 a { background-position:-90px 0; }
		#visuals #p4 a:hover { background-position:-90px -22px; }
		#visuals #p5 a { background-position:-120px 0; }
		#visuals #p5 a:hover { background-position:-120px -22px; }
		#visuals #p6 a { background-position:-150px 0; }
		#visuals #p6 a:hover { background-position:-150px -22px; }
		#visuals #p7 a { background-position:-180px 0; }
		#visuals #p7 a:hover { background-position:-180px -22px; }
		#visuals #p8 a { background-position:-210px 0; }
		#visuals #p8 a:hover { background-position:-210px -22px; }
		#visuals #p9 a { background-position:-240px 0; }
		#visuals #p9 a:hover { background-position:-240px -22px; }
		#visuals #p10 a { background-position:-270px 0; }
		#visuals #p10 a:hover { background-position:-270px -22px; }
#visuals > a {
	display:block;
	clear:both;
	border:6px solid #333;
	margin-bottom:16px;
	width:774px;
}

/* visuals lightbox css */
/**
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.5.css
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.5
 * @date April 11, 2008
 * @category jQuery plugin
 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 */
#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
	#lightbox-container-image-box {
		position: relative;
		background-color: #fff;
		width: 250px;
		height: 250px;
		margin: 0 auto;
	}
	#lightbox-container-image { padding: 10px; }
	#lightbox-loading {
		position: absolute;
		top: 40%;
		left: 0%;
		height: 25%;
		width: 100%;
		text-align: center;
		line-height: 0;
	}
	#lightbox-loading img { display:inline; }
	#lightbox-nav {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: 10;
	}
	#lightbox-container-image-box > #lightbox-nav { left: 0; }
	#lightbox-nav-btnPrev,
	#lightbox-nav-btnNext {
		width: 49%;
		height: 100%;
		zoom: 1;
		display: block;
	}
	#lightbox-nav-btnPrev { 
		left: 0; 
		float: left;
	}
	#lightbox-nav-btnNext { 
		right: 0; 
		float: right;
	}
	#lightbox-container-image-data-box {
		width: 100%;
		margin: 0 auto;
		overflow: auto;
		background: #fff;
		line-height: 130%;
		padding: 0 10px 0;
	}
	#lightbox-container-image-data {
		padding: 0 10px; 
		color: #333; 
	}
	#lightbox-container-image-data #lightbox-image-details { 
		width: 70%; 
		float: left; 
		text-align: left; 
	}	
	#lightbox-image-details-currentNumber {
		display: block; 
		clear: left; 
		padding-bottom: 1.0em;	
	}			
	#lightbox-secNav-btnClose {
		width: 66px; 
		float: right;
		padding-bottom: 0.7em;	
	}
		
/* special article header styles */
.portfolio h2,
.portfolio h3,
.portfolio h4 {
	position: relative;
	top: 1px;
	float:left;
	margin: 0 6px 0 0;
	font-size: 1.167em;	/* 14px */
	font-weight: normal;
}
			
/* 3. About page */

/* rh sidebar header */
.aside h3 {
	margin:10px 0 35px 0;
}

/* scroller */
#quotes{
	padding-bottom: 30px;
}
	#quotes .dem-prev,
	#quotes .dem-next {
		position: absolute;
		top: -999em;
		left: -999em;
	}
	#quotes .dem-items {
		list-style:none;
		margin:0;
		padding:0;
		width:786px;
		height: 228px;
		overflow:auto;
	}
		#quotes .dem-items li {
			margin: 0;
			padding: 0;
			width:786px;
			height:228px;
			background: #333 url(../images/structural/icon_loader.gif) center center no-repeat;
		}
		
/* 6. Good to know */
#ext-links {
	margin-top: 60px;
}
		
/* 5. Web Terminology */
#wt-index {
	list-style: none;
	margin: 0 0 26px 0;
	padding: 0;
	border-bottom: 1px solid #fff;
}
	#wt-index li {
		float: left;
	}
		#wt-index a {
			display: block;
			float: left;
			width: 29px;
			height: 22px;
			overflow: hidden;
			margin-right: 1px;
			text-indent: -999em;
			background: url(../images/structural/sprite_terminology.png) 0 0 no-repeat;
		}
		#a a { background-position: 0 0; }
		#a a:hover, #a.selected a { background-position: 0 -22px; }
		#b a { background-position: -30px 0; }
		#b a:hover, #b.selected a { background-position: -30px -22px; }
		#c a { background-position: -60px 0; }
		#c a:hover, #c.selected a { background-position: -60px -22px; }
		#d a { background-position: -90px 0; }
		#d a:hover, #d.selected a { background-position: -90px -22px; }
		#e a { background-position: -120px 0; }
		#e a:hover, #e.selected a { background-position: -120px -22px; }
		#f a { background-position: -150px 0; }
		#f a:hover, #f.selected a { background-position: -150px -22px; }
		#g a { background-position: -180px 0; }
		#g a:hover, #g.selected a { background-position: -180px -22px; }
		#h a { background-position: -210px 0; }
		#h a:hover, #h.selected a { background-position: -210px -22px; }
		#i a { background-position: -240px 0; }
		#i a:hover, #i.selected a { background-position: -240px -22px; }
		#j a { background-position: -270px 0; }
		#j a:hover, #j.selected a { background-position: -270px -22px; }
		#k a { background-position: -300px 0; }
		#k a:hover, #k.selected a { background-position: -300px -22px; }
		#l a { background-position: -330px 0; }
		#l a:hover, #l.selected a { background-position: -330px -22px; }
		#m a { background-position: -360px 0; }
		#m a:hover, #m.selected a { background-position: -360px -22px; }
		#n a { background-position: -390px 0; }
		#n a:hover, #n.selected a { background-position: -390px -22px; }
		#o a { background-position: -420px 0; }
		#o a:hover, #o.selected a { background-position: -420px -22px; }
		#p a { background-position: -450px 0; }
		#p a:hover, #p.selected a { background-position: -450px -22px; }
		#q a { background-position: -480px 0; }
		#q a:hover, #q.selected a { background-position: -480px -22px; }
		#r a { background-position: -510px 0; }
		#r a:hover, #r.selected a { background-position: -510px -22px; }
		#s a { background-position: -540px 0; }
		#s a:hover, #s.selected a { background-position: -540px -22px; }
		#t a { background-position: -570px 0; }
		#t a:hover, #t.selected a { background-position: -570px -22px; }
		#u a { background-position: -600px 0; }
		#u a:hover, #u.selected a { background-position: -600px -22px; }
		#v a { background-position: -630px 0; }
		#v a:hover, #v.selected a { background-position: -630px -22px; }
		#w a { background-position: -660px 0; }
		#w a:hover, #w.selected a { background-position: -660px -22px; }
		#x a { background-position: -690px 0; }
		#x a:hover, #x.selected a { background-position: -690px -22px; }
		#y a { background-position: -720px 0; }
		#y a:hover, #y.selected a { background-position: -720px -22px; }
		#z a { background-position: -750px 0; }
		#z a:hover, #z.selected a { background-position: -750px -22px; }
	
.terminology dt {
	float:none;
	position: static;
	width: 466px;
	margin: 0 14px 1.2em 0;
	font-weight: normal;
}
.terminology dd {
	background: url(../images/structural/bg_terminology_unit.png) left bottom no-repeat;
	width: 466px;
	padding: 0 306px 6px 0;
	margin: 0 14px 1.2em 0;
}


/****************************** multi-use items ******************************/

/* LH / RH subnav */
.nav-sub ul {
	list-style: none;
	font-size: 1.2em;
}
	.nav-sub li {
		margin:0 0 10px 0;
	}
	.nav-sub ul a:hover {
		color: #fff;
	}
	.nav-sub .selected a {
		color: #fff;
		font-weight: bold;
	}
	
/* divider tabs */
.tab {
	clear: both;
	overflow: auto;
	margin-bottom: 17px;
	padding-bottom: 3px;
	background: url(../images/structural/bg_tab.png) left bottom no-repeat;
}
.homepage .tab {
	background: url(../images/structural/bg_tab_lrg.png) left bottom no-repeat;
}
	.tab > span,
	.tab > a {
		display: block;
		float: left;
		padding:10px;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		-moz-border-radius-topleft: 8px;
		-moz-border-radius-topright: 8px;
		-webkit-border-top-left-radius: 8px;
		-webkit-border-top-right-radius: 8px;
		font-size: 1.2em;
		font-weight: bold;
		color: #333;
		background: #fff url(../images/structural/bg_tab_tile.png) 0 0 repeat-x;
	}
	.tab > a > span {
		overflow:hidden;
	}
	
/* other work pullthrough puffs */
.work-pull {
	clear:both;
}
.work-pull .tab {
	margin-bottom: 0;
}
.work-pull ul {
	list-style: none;
}
	.work-pull li {
		float: left;
		width: 252px;
		margin-top: 20px;
	}
	.work-pull .row {
		padding-bottom: 21px;
		border-bottom: 1px solid #00CCFF;
	}
		.work-pull ul h5 {
			margin-bottom: 8px;
			font-size:1.6em;
			font-weight: bold;
			color: #00CCFF;
		}
		.work-pull ul a {
			position: relative;
			display: block;
			width: 240px;
			border: 6px solid #333;
		}
		.work-pull ul a:hover {
			text-decoration: none;
		}
			.work-pull ul a .dem-slidepuff-unit {
				position: absolute;
				left:0;
				bottom: 0;
				display: block;
				width: 240px;
				padding: 12px 6px 8px 6px;
				font-size: 1.2em;
				line-height:130%;
				background: rgba(0, 0, 0, 0.8);
			}
				.work-pull ul strong {
					display: block;
					margin-bottom: 4px;
					font-size: 1.333em;	/* 16px */
				}
			.work-pull ul a .dem-fadepuff-unit {
				padding:0;
				position:absolute;
				top:0;
				left:0;
				visibility:hidden;
			}
			.work-pull ul a:hover .dem-fadepuff-unit {
				visibility:visible;
			}

/****************************** utility classes ******************************/
.hide { display: none; }
.leader { padding: 14px 0 30px 0; }

/****************************** clearfix ******************************/
#header:after,
#content:after,
#footer:after,
#also-links:after,
.pull-link:after,
#wt-index:after,
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}