/* RESET */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
ul,ol { list-style: none; }
fieldset,img { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }

html { min-height: 100%; margin-bottom: 1px; }
body { font: 11px/16px "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; background: #fff; color: #333; }
p { margin-bottom: 1em; }
strong { font-weight: bold; }

/* PNG fix */
#pageWrapper img,
#pageWrapper a,
#pageWrapper div { behavior: url(/css/iepngfix.htc); }

input, select, textarea { font: 11px/15px "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; }

h4 { font-size: 1em; margin-bottom: 1em; }
a, a:visited { color: #5574d1; text-decoration: none; outline-style: none; }
a:hover { color: #fff; background: #5574d1; }

#pageWrapper {
	position: relative;
	margin: 0 auto;
	padding: 0;
	width: 900px;
}

#logo {
	width: 500px;
	height: 61px;
	margin-top: 15px;
	margin-bottom: 25px;
	background-image: url(/img/nickstakenburg_logo.png);
}

.hrbar {
	background: #eaeaea;
	height: 40px;
	line-height: 40px;
	position: relative;
	margin-bottom: 10px;
	width: 100%;
	float: left;
	clear: both;
}
.hrbar .left {
	float: left;
	height: 100%;
	width: 92px;
	background: url(/img/background_hrbar_left.gif); 
	display: inline;
	position: relative;
}
.hrbar .left .text { float: left; width: 100%; height: 100%; }
.hrbar .message {
	float: left;
	font: italic 17pt Georgia, "Times New Roman", Times, serif;
	line-height: 40px;
	color: #444444;
	width: 807px;
	height: 100%;
	display: inline;
}

#hrbarJavascript .text { background: url(/img/hrbar_left_javascript.png) no-repeat; }
#hrbarJavascript .message { background: url(/img/hrbar_message_javascript.png) no-repeat; }

#hrbarIllustration .left { width: 103px; }
#hrbarIllustration .left .text { background: url(/img/hrbar_left_illustration.png) no-repeat; }
#hrbarIllustration .message { width: 753px; background: url(/img/hrbar_message_illustration.png) no-repeat; }



/* Slideable */
#javascriptSlideable {
	margin-bottom: 6px;
	width: 900px;
	height: 130px;
	background: #303030;
}
.slideable {
	overflow: hidden;
	position: relative;
	float: left;
	clear: both;
}
.slideable .slide {
	width: 500px;
	position: relative;
	float: left;
	height: 100%;
	cursor: pointer;
}
.slideable a:hover { background-color: transparent; }
.slideable .wrapper { float: left; height: 100%; overflow: hidden; visibility: hidden; }
.slideable .slide .logo { float: left; margin: 5px 0 0 5px; }

.slideable .shadow {
	position: absolute;
	top: 120px;
	left: 0;
	height: 10px;
	width: 100%;
	background: url(/img/slideable/shadow.png) top left no-repeat;
}

/* Slideable colors */
#slideLightview { background: #303030 url(/img/slideable/background_lightview.png) top left no-repeat; }
#slideTipped { background: #2a2a2a url(/img/slideable/background_tipped.png) top left no-repeat; }
#slidePrototip { background: #2a2a2a url(/img/slideable/background_prototip.png) top left no-repeat; }
#slideStarbox { background: #242424 url(/img/slideable/background_starbox.png) top left no-repeat;}


/* Might have seen bar / Logos */
#mighthaveseen {
	margin-bottom: 20px;
	float: left;
	clear: both;
	width: 100%;
}
#mighthaveseen .intro {
	margin: 0 0 2px 5px;
}
#mighthaveseen .logos {
	float: left;
	clear: both;
	margin-left: 16px;
}
#mighthaveseen .logos img {
	margin-right: 17px;
	float: left;
	display: inline;
}
#mighthaveseen .logos img.last { margin-right: 0; }

/* Illustrations */
#illustrations {
	float: left;
	clear: both;
	width: 100%;
	margin-bottom: 30px;
}
#illustrations li {
	float: left;
	margin-right: 5px;
	display: inline;
}
#illustrations li.last { margin-right: 0; }

#illustrations a {
	position: relative;
	float: left;
	outline-style: none;
	height: 108px;
	width: 108px;
	background: #dbdbdb;
}
#illustrations a:hover { background: #aeaeae; }
#illustrations a img {
	float: left;
	margin: 4px 0 0 4px;
}


/* Bottom */
.hrHalf {
	width: 445px;
	float: left;
	display: inline;
	position: relative;
	margin-bottom: 1em;
	overflow: hidden;
}
.hrHalf .message { width: 300px; }


#hrbarInformation { margin-right: 10px; text-align:justify; }
#hrbarInformation .hrbar,
#hrbarContact .hrbar { width: 445px; overflow: hidden;}
#hrbarInformation .left { width: 108px; }
#hrbarInformation .text { background: url(/img/hrbar_left_information.png) no-repeat; }
#hrbarInformation .message { background: url(/img/hrbar_message_information.png) no-repeat; }

#hrbarContact { clear: none; }
#hrbarContact .left { width: 72px; }
#hrbarContact .text { background: url(/img/hrbar_left_contact.png) no-repeat; }
#hrbarContact .message { background: url(/img/hrbar_message_contact.png) no-repeat; }

.hrHalf .container { padding: 5px; }
.hrHalf .container {  }
.hrHalf .container .column { float: left; display: inline; width: 210px; margin-bottom: 1em; }
.hrHalf .container .columnLeft { margin-right: 15px; }
.hrHalf .container .columnNL { color: #777777;  }
.hrHalf .language { }

#tags {
	float: left;
	width: 100%;
	font: italic 13px Georgia, "Times New Roman", Times, serif;
	line-height: 27px;
}
#tags li { display: inline; background: #f7f7f7; color: #666; padding: 3px; margin-right: 5px; }
#tags li a,
#tags li a:hover,
#tags li a:visited {
  color: #666;
  background: #f7f7f7;
}

/* Contact */
#hrbarContact h4 { font-weight: bold; text-transform: uppercase; }

#contactForm label { float: left; clear: both; margin-bottom: 0.3em; }
#contactForm input, textarea { border: 1px solid #cccccc; width: 205px; margin-bottom: 1em; }
#contactForm input[type=submit],
#contactForm .submit { width: auto; padding: 2px 3px; background: #eaeaea; }
#contactForm .bad { background: #ffdddd; border-color: #ff7878; }

#contactFormSend {
	background: #ffffc6;
	border: 1px solid #dfd4b0;
	padding: 5px;
	color: #554f39;
}

#footer {
	float: left;
	position: relative;
	clear: both;
	margin-bottom: 15px;
	text-align: right;
	width: 100%;
	color: #808080;
	font-size: 9px;
}
#footer .copyright { position: relative; }