/* HTML5 tags */
header, section, footer,
aside, nav, article {
	display: block;
}

body
{
	background: transparent url(../images/bodybg.gif) repeat-x 0 0;	
	font-family:   "lucida Grande", "lucida Sans",  arial, helvetica, sans-serif;
	font-size:12px;
	line-height: 18px;
	color: #3c3c3c;
}

body.project-planner
{
	background: transparent url(../images/bodybg2.gif) repeat-x 0 0;	
}

h1
{
	font-size: 22px;
	margin-bottom: 5px;
}

h2
{
	font-size: 16px;
	line-height: 18px;
}

dl
{
	margin-bottom: 10px;
}

dt
{
	font-size: 14px;
}	

em
{
	font-style: normal;
	font-weight: bold;
}

p
{
	margin-bottom: 15px;
}

a
{
	color: #3c3c3c;
 	background: #eae723;
 	text-decoration: none;
}

a:hover
{
	 background: transparent url(../images/default-background2.png) 50% 20px;
	 color: #eae723;
}

.wrapper
{
	width: 960px;
	margin: 0 auto;
}

header
{
	padding-top: 50px;
	width: 100%;
	height: 160px;
}

header img
{
	float: left;
}

header p
{
	padding-top: 10px;
	float: right;
	width: 500px;
	text-align: right;
}

nav
{
	width: 100%;
	float: left;
}

nav ul
{
	margin: 70px 0 0 321px;
}

nav ul li
{
	display: inline;
	padding-left: 40px;
}

nav ul li a
{
	background: transparent;
	font-size: 13px;

}


nav ul li a:hover
{
	background: transparent;
	color: #b8b508;
}

.home nav ul li.home a,
.over-mij nav ul li.over-mij a,
.mijn-werk nav ul li.mijn-werk a,
.blog nav ul li.blog a,
.contact nav ul li.contact a
{
	background: none;
	color: #000;
	font-weight: bold;
}

nav ul li.active a:hover,
nav ul li.active a,
nav ul li a:hover.active,
nav ul li a.active
{
	background: none;
	color: #000;
	font-weight: bold;	
}

aside
{
	width: 207px;
	float: left;
	margin-left: 114px;
}

aside ul
{
	margin-top: 20px;
}

aside ul li
{
	color: #929292;
}

aside ul li em
{
	color: #3c3c3c;
	font-style: normal;
}

aside ul.skills li
{
	color: #929292;
	font-style: italic;
}

aside ul li a,
aside ul li a:hover
{
	border-bottom: 1px dotted #929292;
	color: #929292;
	background: none;
}

aside ul li a:hover
{
	color:#b8b508;
	border-bottom: 1px dotted #929292;
}

section.main
{
	width: 636px;
	float: left;
}

.content
{
	background: url(../images/content-bg.png);
	overflow: hidden;	
}

.large .content,
.contact .small .slide2 .content,
.contact .small .slide3 .content
{
	margin: 30px 0 0 31px;
	width: 582px;
	height: 267px;
}

.small .slide2 .content h1
{
	margin-top: -20px;
}

.small .content
{
	margin: 50px 0 0 333px;
	width: 307px;
	height: 220px;
}


.large .medium .content
{
	margin: 30px 0 0 31px;
	width: 430px;
	height: 267px;
}

.inner-content
{
	padding: 32px 22px 10px 22px;
	color: #fff;
}

.content dt 
{
	padding: 7px 0 0 0;
	margin: 4px 0 0 0;
}

.content dd
{
	font-size: 10px;
	font-style: italic;
	display: block;
	margin-top: -2px;
}

.content dd a,
.content dt a
{
	background: transparent;
	color: #fff;
}

.first-column,
.second-column
{	
	width: 48%;
	float: left;
}

.second-column
{	
	margin-left: 0;
	margin-top: -55px;
}

.second-column h2
{	
	margin-bottom: 10px;

}

footer
{
	float: left;
	width: 100%;
	margin-top: 90px;
	padding: 0 0 20px 0;
	position: relative;
	
}

footer p
{
	position: absolute;
	font-size: 10px;
	top: -88px;
	right: 0;
	text-align: right;
	
}

footer a
{
	background: transparent;
}

footer .diff
{
	float: right;	
}


.second
{
	margin-top: 15px;
}

.second li
{
	font-size: 10px;
	color: #929292;
	font-style: italic
}


#tooltip{
    width:auto;
    max-width:300px;
    min-width:100px;
    border:1px solid;
    background:#000;
    padding:7px 12px;
    margin-top:4px;
    font-size:11px;
    color:#eae723;
}

#tooltip #ttimg.top{
    margin-top:-17px;
    margin-left:2px
}
#tooltip #ttimg.bottom{
    bottom:0;
    margin-bottom:-12px;
    margin-left:2px
}


#tooltip.default{
    border:8px solid #eae723;
    background:#000;
    color:#fff;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px; 
    margin-top:2px;
}


#tooltip.default #ttimg.top{
	position:absolute;
	margin-top:-8px;
    margin-left:-8px
}
#tooltip.default #ttimg.bottom{
	position:absolute;
    bottom:0;
    margin-bottom:-3px;
    margin-left:-8px
}



/* container */


body div.google-buzz ul li{font-size: 9px; }


/* ul list */
ul.gbw{
	padding:0;
	margin:0;
	height:150px; 
	width: 400px;
	/* fixed height so surrounding content will not flicker with transitions */
}
ul.gbw li{
	float:left;
	margin:1px 0 1px 0;
	padding:2px;
	list-style-type:none;
	height:50px;
	overflow:hidden;
	width:380px;
}
/* meta : date, source */
ul.gbw span.gbw-meta {
	display:block;
	margin:1px 0 0;
	font-size: 9px;
}
ul.gbw span.gbw-meta a{
	text-decoration:none;
	
}
ul.gbw span.gbw-meta a:hover{

}

/* customize links */
ul.gbw a.gbw-link {}
/* customize @user links */
ul.gbw a.gbw-at { }
/* customize #hashtags links */
ul.gbw a.gbw-hashtag { }
.gbw-info
{
	display: none;
}


/* COMMENTS PANEL */
.love
{
	padding-left: 20px;
	background: url(../images/love.png) no-repeat 0 50%;
}

a:hover.love
{
	color: #000;

	background: url(../images/comment.png) no-repeat 0 50%;
}

#panel {
	background: url(../images/panel-bg.png) repeat-x 0 0;
	height: 200px;
	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
}

.active {
	color: #000;
	background: url(../images/comment.png) no-repeat 0 50%;
}

.inner-content .active
{
	color: #000;
	background: #eae723;
}

.panel-inner
{
	margin: 25px 0 0 20px;
}

#form
{
	margin: 17px 20px 20px 0;
	width: 240px;
	float: left;
	padding: 8px 0 8px 10px;
	border-right: 1px dotted #ccc;
	background: #333;
}

#form label
{
	width: 80px;
	display: inline-block;
	color: #fff;
}

#form input
{ background-color: #fefefe; margin: 5px 2px; padding: 0px; margin: 5 5 5 0; padding: 2px; border: 1px solid #dedede; color: #333333; -moz-border-radius: 3px;-webkit-border-radius:3px; width: 135px; }

#form input.submit
{ margin-top: 10px;cursor: pointer; width: 135px; background: #EAE723; font-weight: bold; color: #000; padding: 2px 1px 3px 1px; text-align:center;border:none; }


#commentcontainer
{
	width: 650px;
	float: left;
	height: 150px;	
	overflow: hidden;	
	margin-top: -20px
}

#commentcontainer ul li
{
	display: block;
	float: left;
	padding: 4px 10px;
	background: #ccc;
	margin: 0 4px 4px 0;
	font-size: 10px;
}

a.sluiten
{
	display: block;
	width: 77px;
	height: 17px;
	background: url(../images/sluiten.png) no-repeat 0 0;
	position: absolute;
	top: 12px;
	right: 10px;

}

a:hover.sluiten
{
	display: block;
	width: 77px;
	height: 17px;
	background: url(../images/sluiten.png) no-repeat 0 0;
	position: absolute;
	top: 12px;
	right: 10px;

}