/*


    Author:         Stijn Henderickx
	Last update:    2010-12-04
    Media:          Screen
    
*/



/********************************/
/* ------ Font sizes and styles */
/********************************/
html {
	-webkit-font-smoothing: antialiased;
}

body { 
    background: url('../images/bck_body.png');
    color: #333;
    font-family: "Helvetica Neue", Helvetica, Arial, "Helvetica Neue", sans-serif;
    font-size: 0.8em;
	text-shadow: #FFF 1px 1px 0;
}

h1 {
	color: #6e6e6e;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 3em;
    line-height: 1.3em;
	text-transform: uppercase;
}

h2 { 
	color: #6e6e6e;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 1.6em;
    font-weight: normal;
    padding: 20px 0 5px 0;
	text-transform: uppercase;
}


h3 a:link, h3 a:visited {
    border: 0;
}

p {
	line-height: 1.6em;
}

em {
	font-family: Georgia;
	font-style: italic;
}

a {
    border-style: solid;
    border-width: 0px 0px 1px;
    text-decoration: none;
}

a:link {
    color: #3f68a4;
    border-color: #c0c0c0;
}

a:visited {
    color: #345688;
    border-color: #c0c0c0;

}

a:hover, a:active {
    color: #363636;
    border-color: #999999;
}

a:active, a:focus {
    outline-style: none;
    outline-width: 0;
}

.no-border {
	border: 0;
}

#container {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -233px 0 0 -338px;
}

#main {
	display: block;
	position: relative;
}

.page {
	background: url('../images/bck_page.png') no-repeat;
	height: 469px;
	float: left;
	position: absolute;
	width: 676px;
}
	
	.page[animate="fadeIn"] {
		opacity: 1;
		-webkit-transition: all 1s ease-in-out;
		-moz-transition: all 1s ease-in-out;
		-o-transition: all 1s ease-in-out;
		transition: all 1s ease-in-out;
	}

	#page_1 {
		z-index: 997;
	}

	#page_2[animate="fadeIn"] {
		-webkit-transform: rotate(1deg) translate(-6px, 6px);
	  	-moz-transform: rotate(-2deg) translate(-6px, 6px);
	  	-o-transform: rotate(-2deg) translate(-6px, 6px);
	}
	
	#page_3[animate="fadeIn"] {
		-webkit-transform: rotate(-1.5deg) translate(10px, 0);
	  	-moz-transform: rotate(1deg) translate(10px, 0);
	  	-o-transform: rotate(1deg) translate(10px, 0);
	}
	
	.page_nw {
		background: url('../images/bck_pages.png') no-repeat !important;
		height: 490px;
		float: left;
		position: absolute;
		width: 697px;
	}
	
	#mask {
		width: 700px;
		height: 500px;
		position: absolute;
		z-index: 9999;
	}

	#body {
		color: #8A8E8C;
		margin: 40px 0 0 150px;
	}

	    ul.contact {
			margin-top: 10px;
	    }

		    ul.contact li {
		        line-height: 1.3em;
		    }
			
			ul.contact li span {
				float: left;
				width: 50px;
			}
			
				ul.contact li span:after {
    				content: ":";
				}
				
		ul.recent-projects {
			margin-top: 10px;
		}
		
			ul.recent-projects li {
				display: block;
				float: left;
				margin-right: 15px;
			}
			
				ul.recent-projects li a {
					display: block;
					-webkit-transition: -webkit-transform 0.1s ease-in;
					-moz-transition: -webkit-transform 0.1s ease-in;
					-o-transition: -webkit-transform 0.1s ease-in;
					transition: opacity .1s ease-in-out;
				}
				
				ul.recent-projects li a:hover {
					-webkit-transform: scale(1.02);
					-moz-transform: scale(1.02);
					-o-transform: scale(1.02);
				}

	#body[animate="fadeIn"] {
		opacity: 1;
		-webkit-transition: opacity 1s ease-in-out;
		-moz-transition: opacity 1s ease-in-out;
		-o-transition: opacity 1s ease-in-out;
		transition: opacity 1s ease-in-out;
	}

nav {
	position: absolute;
	left: 68px;
	top: 300px;
	z-index: 999;
}

	nav[animate="fadeIn"] {
		opacity: 1;
		-webkit-transition: opacity 1s ease-in-out;
		-moz-transition: opacity 1s ease-in-out;
		-o-transition: opacity 1s ease-in-out;
		transition: opacity 1s ease-in-out;
	}
	
	nav ul li {
		margin-bottom: 3px;
	}
	
	nav ul li a {
		-webkit-transition: opacity .2s ease-in-out;
		-moz-transition: opacity .2s ease-in-out;
		-o-transition: opacity .2s ease-in-out;
		transition: opacity .2s ease-in-out;
	}
	
	nav ul li a:hover {
		opacity: .8;
	}

.stripe {
	background: url('../images/bck_stripe.png') no-repeat;
	height: 452px;
	left: 50px;
	top: -27px;
	position: absolute;
	width: 73px;
	z-index: 998;
}
	
	.stripe[animate="fadeIn"] {
		opacity: 1;
		-webkit-transition: opacity 1s ease-in-out;
		-moz-transition: opacity 1s ease-in-out;
		-o-transition: opacity 1s ease-in-out;
		transition: opacity 1s ease-in-out;
	}

.hide {
}

.show {
	opacity: 1 !important;
}

/** TOOLTIP **/
.tipsy { padding: 5px; font-size: 11px; position: absolute; z-index: 100000; line-height: 1.3em;}
.tipsy-inner {z-index: 9995; color: #333; display: block; font-weight: bold; padding: 0 0 0 10px; height: 33px; background-color: #4375BB; position: relative; background: url('../images/bck_tipsy.png') no-repeat left top ; text-align: center; }
.tipsy-inner span {
 padding: 0 10px 0 0; white-space: nowrap; text-align: center; height: 33px; background: url('../images/bck_tipsy.png') no-repeat 100% top; line-height: 30px; display: block; position: relative;
z-index: 9999;}
.tipsy-arrow { position: absolute;  width: 9px; height: 5px; }
.tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
.tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
.tipsy-w .tipsy-arrow { top: 5