/* @override 
	http://www.pieterouwerkerk.com/alpha/style.css
	http://pieterouwerkerk.com/style.css
	http://www.pieterouwerkerk.com/style.css
*/
body {
	background: #050505;
	font-family: Verdana, "Lucida Grande", Lucida, sans-serif}
	
h1, h2, h3, h4, h5 {
	font-family: Georgia, "Times New Roman", Times, serif;
}

.contact-form input {
	height: 30px;
	width: 300px;
	font-size: 12pt;
	float: left;
}

.contact hr {
	background: #000;
}

input.form-text {
	border: 3px solid #e3e4e2;
	margin: 5px 5px 20px;
}
textarea {
	width: 460px;
	margin: 5px 25px 5px 20px;
	height: 148px;
	border: 3px solid #e3e4e2;
	font: 8pt "Lucida Grande", Lucida, Verdana, sans-serif;
}

input.form-submit {
	width: 476px;
	background: #00a5df;
	color: #fff;
	height: 30px;
	font-size: 10pt;
	float: right;
	margin: 0 25px 25px;
	border: none;
}

.contact-back a, .contact-back a:visited {
	width: 348px;
	background: #e3e4e2;
	color: #000;
	text-decoration: none;
	display: block;
	font-size: 10pt;
	float: left;
	margin: 0 0 25px 25px;
	border: none;
	text-align: center;
	font: 10pt "Lucida Grande", Lucida, Verdana, sans-serif;
	padding: 7px 0;
}

.contact-back a:hover {
	background: #bebfbd;
}

input.form-submit:hover {
	background: #0096cb;
}

label {
	width: 45pt;
	text-align: right;
	padding-top: 12pt;
	float: left;
	color: #555;
	font-style: italic;
	font-weight: normal;
	font-family: Georgia, "Times New Roman", Times, serif;
}
.left-sidebar {
	width: 160px;
	height: 1475px;
	float: left;
	margin-right: 20px;
	border-color: #ccc;
}

.left-sidebar h3 {
	padding-bottom: 8px;
	margin-right: 8px;
	border-bottom: 2px solid #050505;
}

#Work h1 {
	width: 500px;
}

.docs .thumbnail {
	width: 149px;
	float: left;
}

.docs ul {
	list-style: none;
	width: 620px;
	margin: 8px 0;
}

.docs li {
	display: table-cell;
	height: 160px;
	vertical-align: middle;
}

.specimens .thumbnail {
	height: 149px;
}

.left-sidebar ul {
	list-style: none;
	padding-left: 15px;	
}

.left-sidebar a, .left-sidebar li a:visited  {
	text-decoration: none;
	color: #555;
}

.left-sidebar li a:hover {
	text-decoration: underline;
}

.contact-form {
	float: left;
	margin-top: 12px;
	width: 378px;
}
.circles {
	background: url(images/circles.png) no-repeat center 0;
	display: block;
	text-align: center;
	color: #fff;
	font-size: 14pt;
	font-style: italic;
	border: 1px solid #fff;
	line-height: 36px;
}
.circles:hover {
	background-position: center -36px;
	border: 1px solid #cbcbcb;
}
.photo {
	background: url(images/silhouette.jpg);
	width: 200px;
	height: 0;
	overflow: hidden;
	float: left;
	margin-right: 27px;
	padding-top: 200px;
	margin-top: 7px;
	margin-left: 7px;
}

/* Social Networking */
.social-networking {	overflow: hidden;
	margin: 0 auto; width: 529px; height: 30px; position: relative; z-index:9998;}
.social-networking { margin: 0 auto; padding: 0;}
.social-networking li { display: inline; }
.social-networking li a { float: left; height: 0; padding-top: 33px; overflow: hidden; margin-right: 8px;}
.social-networking li a { background-image: url(images/networking.png); background-repeat: no-repeat; }

/* Buttons */
.social-networking li.facebook a { background-position: 0 0; width: 124px;}
.social-networking li.twitter a { background-position: -128px 0; width: 116px;}
.social-networking li.flickr a { background-position: -247px 0; width: 86px;}
.social-networking li.linkedin a { background-position: -336px 0; width: 113px;}

/* Over States */
.social-networking li.facebook a:hover { background-position: 0 -31px; width: 124px;}
.social-networking li.twitter a:hover { background-position: -128px -31px; width: 116px;}
.social-networking li.flickr a:hover { background-position: -247px -31px; width: 86px;}
.social-networking li.linkedin a:hover { background-position: -336px -31px; width: 113px;}


.samples_divider {
	width: 550px;
}

.sample {
	width: 500px;
	height: 372px;
	display: inline-table;
	float: left;	
}

.docs {
	float: left;
	width: 678px;
}

#google.sample {
	background: url(images/thumbnails/google-widget-large.jpg) no-repeat center center;
}

#vergil.sample {
	background: url(images/thumbnails/vergil-large.jpg) no-repeat center center;
	height: 422px;
	}

#acappella.sample {
	background: url(/images/thumbnails/acappella-large.jpg) no-repeat center center;
	margin-top: 45px;
}

#umbc.sample {
	background: url(/images/thumbnails/umbc-large.jpg) no-repeat center center;
	height: 425px;}

#viyh.sample {
	background: url(/images/thumbnails/viyh-large.jpg) no-repeat center center;}

#gbb.sample {
	background: url(/images/thumbnails/gbb-large.jpg) no-repeat center center;}

#hillbill.sample {
	background: url(/images/thumbnails/hillbill-large.jpg) no-repeat center center;
	height: 390px;}

.sample object {
	margin: 0 35px;
	position: relative;
	top: 72px;
}


#ivi.sample {
	background: url(/images/thumbnails/ivi-large.jpg) no-repeat center center;
	height: 470px;}

#campuscatalyst.sample {
	background: url(/images/thumbnails/cc-large.jpg
) no-repeat center center;}

#Work .description h1 {
	width: 360px;
}

.description {
		font: 10pt Georgia, "Times New Roman", Times, serif;
		vertical-align : middle;
		display: table-cell;
		float: left;
		width: 360px;
}
.docs ul li.description {
	font: 10pt Verdana, "Lucida Grande", Lucida, sans-serif;
	
}

.description ul li {
	list-style: none;
	padding: 4px 4px 4px 0;
	float: left;
	width: 200px;
	margin-left: 0;
}

.description .label {
	width: 75px;
}

.examples ul {
	float: left;
}

.description a, .description a:visited {
	color: #000;
	text-decoration: none;
}

.description a:hover {
	text-decoration: underline;
}

a.back, a:visited.back {
	width: 250px;
	background: #e3e4e2;
	color: #000;
	text-decoration: none;
	display: block;
	font-size: 10pt;
	float: left;
	border: none;
	text-align: center;
	font: 10pt "Lucida Grande", Lucida, Verdana, sans-serif;
	padding: 7px 0;
	margin-right: auto;
	margin-left: 50px;
	margin-top: 50px;
}

.back a:hover, .description a:hover.back  {
	background: #bebfbd;
	text-decoration: none;
}



.specimens ul {
	list-style: none;
	float: left;
	padding: 0;
	width: 200px;
}

li.caption {
	text-align: center;
}


.header {
	background: #050505;
	width: 100%;
}

.navbar #pieter a {
	padding-top: 75px;
	margin-top: 0;
	background: url(images/logo.png);
	height: 0px;
	width: 224px;
	margin: 0;
}

.navbar .ui-state-active ui-state-hover, .navbar .ui-state-active {
	opacity: 0.998;
}

.navbar #work, .navbar #about, .navbar #contact {
	opacity: 0.33;
} 

/*.navbar #work a {
	width: 41px;
	background-position: 0 !important;
	margin-left: 413px;
}

.navbar #about a {
	width: 45px;
	background-position: -41px !important;
	margin-left: 50px;
}

.navbar #contact a {
	width: 59px;
	background-position: -86px !important;
	margin-left: 50px;
}
*/

/* Globalheader */

.navbar {
	width: 900px;
	background: #050505;
	color: #FFF;
	height: 75px;
	clear: both;
	padding: 0;
	position: relative;
	margin: 0 auto 8px;
}
.navbar li { display: inline; list-style: none; }
.navbar li a { background-image: url(images/buttons.png); background-repeat: no-repeat; 	float: left;
	height: 0;
	padding-top: 12px;
	overflow: hidden;
}
.navbar ul {
	padding: 0;
}

/* Buttons */
.navbar li {
	margin-left: 50px;
}
.navbar li#work a { background-position: 0 0 !important; width: 41px; position: relative; left: 413px; top: 64px;}
.navbar li#about a { background-position: -41px 0 !important; width: 45px; position: relative; left: 463px; top: 64px;}
.navbar li#contact a { background-position: -86px 0 !important; width: 59px; position: relative; left: 513px; top: 64px;}

.arrow {
	background: url(images/arrow.gif) no-repeat 653px -10px;
	display: block;
	height: 9px;
	width: 900px;
	margin: 0 auto;
	position: relative;
	top: 9px;
	z-index: 100;
}

.arrow #work {
	background: url(images/arrow.gif) no-repeat 400px -10px;
	}

#Overview {
	background: #050505;
	color: #fff;
}

#About, #Contact, #Sample {
	background: #fff;
	color: #000000;
	padding: 20px;
}

#Work {
	background: #fff url(images/work-bg.png) repeat-y 7px 20px;
	color: #000000;
	padding: 20px;

}
#Contact {
	padding: 0px;
}

#loader {
  width: 900px;
  height: 507px;
  position: relative;
}

#loader img {
	z-index: 1000;
	border: none;
}

/** 
 * While we're having the loading class set.
 * Removig it, will remove the loading message
 */
#loader.loading {
  background: url(images/spinner.gif) no-repeat center center;
}

.main {
	background: url(images/lightbox.jpg);
	height: 507px;
	width: 900px;
	display: block;
}
.features ul {
	padding: 0;
	width: 900px;
	margin: 24px 0;
}

.features li {
	list-style: none;
	display: inline;
}

.features .one a {
	height: 150px;
	width: 207px;
	background: url(images/ivi.jpg);
	display: block;
}

.features .two a {
	height: 150px;
	width: 207px;
	background: url(images/umbc.jpg);
	display: block;
}

.features .four a {
	height: 150px;
	width: 207px;
	background: url(images/acappella.jpg);
	display: block;
}

.features .three a {
	height: 150px;
	width: 207px;
	background: url(images/viyh.jpg);
	display: block;
}

.features .two a, .features .three a, .features .four a {
	margin-left: 24px;
}

.features li a {
	float: left;
	height: 0;
	overflow: hidden;
	background: url(images/buttons.png) no-repeat;
}


.breadcrumbs {
	font: 8pt "Lucida Grande", Lucida, Verdana, sans-serif;
	text-align: center;
	margin: 15px;
	color: #676767;
}

.clear {
	clear: both;
	overflow: hidden;
	padding-top: 24px;
}

.std-clear {
	clear: left;
	overflow: hidden;
}

.form-end {
	clear: both;
	overflow: hidden;
}

hr {
	background-color: #1e1e1e;
	width: 900px;
	margin: 0 auto;
}

.footer-links ul {
	text-align: center;
	margin: 5px;
	padding: 0;
}
.footer-links {
	width: 900px;
	margin: 0 auto;
	border-top: 1px solid #1e1e1e;
	border-bottom: 1px solid #1e1e1e;
}

.footer-links a, .footer-links a:visited {
	font: 8pt "Lucida Grande", Lucida, Verdana, sans-serif;
	color: #919191;
	text-decoration: none;
}

.footer-links a:hover {
	color: #fff;
}

.footer-links li {
	display: inline;
	list-style: none;
	margin: 0 5px;
}

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; }

.ui-tabs .ui-tabs-hide { display: none !important; }

#tabs {
    width: 900px;
    height: auto !important;
	margin: 0 auto;
}

.navbar .ui-state-active[style] {
   opacity: 0.998 !important;
}

.navbar .active li {
	opacity: 0.998;
}

/* Slider */

#slider {
    width: 900px;
    margin: 0 auto;
    position: relative;
}
.contact {
		font: 10pt Georgia, "Times New Roman", Times, serif;
height: 250px;
vertical-align : middle;
display: table-cell;
}

.contact a {
	text-decoration: none;
	color: #3875d7;
	border: 0;
}

.contact a:hover {
	border-bottom: 1px solid #004f95;
}

.indecision {
	color: #888;
	font-style: italic;
}

.contact ul li {
	list-style: none;
	padding: 4px;
	float: left;
	min-width: 120px;
}

.contact ul {
	margin: 0 auto;
	width: 325px;
}

.contact ul.message li {
	margin-bottom: 8px;
}

.label {
	font-style: italic;
	color: #555;
	text-align: right;
}

.contact .label {
	width: 100px;
	margin: 0;
}

.contact p {
	text-align: center;
	margin: 4px;
}

.name {
	float: left;
	margin: 14px;
	background: url(images/name.png) no-repeat center center;
	height: 118px;
	width: 330px;
	border-right: 3px solid #050505;
	padding: 100px 20px 4px 4px;
}
.name a {
	display: none;
}
div#files.panel {
clear: both;	
}
.contact div{
	float: left;
	width: 300px;
	clear: left;
}

.scroll {
    height: 250px;
    width: 900px;
    overflow: hidden;
    overflow-x: hidden;
    position: relative;
    clear: left;
    background: #FFFFFF url(images/content_pane-gradient.gif) repeat-x scroll left bottom;
}

.scrollContainer div.panel {
    height: 250px;
    width: 900px;
}

ul.navigation {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-bottom: 9px;
}

ul.navigation li {
    display: inline;
}

ul.navigation a {
    padding: 10px;
    color: #000;
    text-decoration: none;
}

ul.navigation a:hover {
    background-color: #f6f6f6;
}

ul.navigation a.selected {
    background-color: #fff;
}

.hide {
    display: none;
}

.caption a, .caption a:visited {
	color: #000;
	text-decoration: none;	
}

.caption a:hover {
	color: #000;
	text-decoration: underline;	
}