/*
	Puntwee
	*******
	
	Stylesheet for screens by pasz.nl
	Design by Puntwee
*/

/*	Basic markup
	************/

html, body {
	margin:0;
	padding:0;
	font:11px/27px "Arial", sans-serif;
}

body {
	padding:0;
	color:black;
	text-align:center;
	background:#e9e9e9;
}




/*	Headings	*/
h1, h2, h3, h4, h5, h6 {
	margin:0 0 5px 0;
	padding:0;
	line-height:1em;
	font-weight:bold;
	color:black;
}

h1 {display:none;}
h2 {font-size:11px}
h3 {font-size:10px;}
h4 {}
h5 {}
h6 {}




/*	Basic content	*/
p {
	margin:0 0 1.5em 0;
	padding:0;
}

a {
	color: #F7953F;
	text-decoration:underline;
}

a:hover {
	text-decoration:none;
}

img {
	border:0;
	margin:0;
	padding:0;
}



/*	Tables	*/
table {
	border-collapse:collapse;
	border:none;
}

table caption,
table th,
table td {
	margin:0;
	padding:0;
	font-style:normal;
	text-align:left;
	vertical-align:top;
}

table th {
}

table td {
	
}

table caption {
}




/*	Forms	*/
form {
	margin:0;
	padding:0;
}

form p {
	clear:both;
	margin:0;
}

form p label {
	display:block;
	float:left;
	width:125px;
}

form p input.text,
form textarea {
	width:200px;
	padding:3px 5px;
	border:1px solid black;
	background:white;
}

form textarea {
	height:3em;
}

form p.btnSubmit {
	padding:5px 0 0 125px;
}


/*	Generic classes
	***************/

.displayNone	{display:none}
.displayInline	{display:inline}



/*	Buttons	*/
a,
a:active,
a:focus {
	cursor:pointer;
	outline:none;
	-moz-outline-style:none;	
	cursor:hand;
}



/*	Basic layout
	************/

#wrapper {
	position:absolute;
	width:974px;
	height:564px;
	left:50%;
	top:50%;
	margin:-280px 0 0 -487px;
	text-align:left;
	background:no-repeat 0 0 url(../gfx/bg_wrapper.gif);
}

#logo {
	position:absolute;
	top:37px;
	left:37px;
}

#skipToNav {
	display:none;
}

#lijn {
	position:absolute;
	left:587px;
	top:17px;
	width:1px;
	height:550px;
	z-index:100;
	background:#9c9c9c;
}

/*	Visuals	*/
.visualorange,
#visual {
	position:absolute;
	top:155px;
	left:7px;
	width:960px;
	height:240px;
	z-index:10;
}

/*	Main	*/
#main {
	position:absolute;
	top:155px;
	right:7px;
	width:354px;
	height:200px;
	padding:0 10px 0 15px;
	z-index:20;
	overflow:auto;
	background:repeat 0 0 url(/gfx/70_procent_wit.png);
}

#main.orange
{
	background: #F7953F;
}

#pageHome #main
{
	padding-top: 40px;
}


/*	Navigation	*/
ul.nav {
	position:absolute;
	left: 587px;
	margin:0;
	padding:0;
	width:379px;
	list-style:none;
}

ul.nav li {
	display:inline;
	margin:0;
	padding:0;
}

ul.nav li a {
	display:block;
	position:relative;
	margin:0;
	padding:0 15px;
	width:250px;
	height:25px;
	font:12px/13px "Arial Narrow", "", sans-serif;
	color:#9c9c9c;
	text-decoration:none;
}

ul.nav li.active a {
/*	left:-280px;*/
/*	text-align:right;*/
}

ul.nav li.active a,
ul.nav li a:hover {
	color:#f7953f;
}

/*	Main nav	*/
#nav {
	top:32px;
}

/*	Sub nav	*/
#subNav {
	top:410px;
}

/*	Footer	*/
#footer {
	position:absolute;
	top:400px;
	left:7px;
	width:580px;
}



/*	Page: Home */
#pageHome #footer,
#pageHome #footer a {
	font-family:"Arial Narrow", sans-serif;
	font-size:16px;
	line-height:35px;
	letter-spacing:2px;
	color:#9c9c9c;
}

#pageHome #footer {
	width: 720px;
	padding:20px 0 0 30px;
}

#pageHome #footer a {
	font-size:14px;
	letter-spacing:0;
}

#pageHome #footer div
{
	float: left;
	padding-right: 30px;
}

#pageHome #footer div a
{
	display: block;
	font-size: 11px;
	line-height: 17px;
	color: #9c9c9c; 
	text-decoration: none;
	margin: 0;
	padding: 0;
}



/*	Page: Team	*/
#pageTeam #main {
	width:234px;
	height:135px;
	padding:105px 10px 0 135px;
}

#pageHome #main p.team
{
	padding: 67px 10px 0 135px;
	line-height: 22px;
}

#pageHome #main img {
	position:absolute;
	top:0;
	left:15px;
}



/*	Page: Contact	*/
#pageContact #main {
	height:225px;
	padding:15px 10px 0 15px;
}



/*	Page: Portfolio */
#pagePortfolio #wrapper {
	background-image:url(../gfx/bg_wrapper_portfolio.gif);
}

#pagePortfolio #main {
	width:222px;
}

#pagePortfolio #main ul {
	list-style:none;
	margin:0;
	padding:0;
}

#pagePortfolio #main ul li a {
	text-decoration:none;
	color:black;
}

#pagePortfolio #visual {
	left:720px;
	width:247px;
}

#pagePortfolio ul.nav {
	width:247px;
}

#pagePortfolio ul.nav li a {
	width:217px;
}

#pagePortfolio ul.nav li.active a {
	left:-247px;
}

#pagePortfolio #subNav {
	top:371px;
}

#pagePortfolio #subNav li a {
	height:22px;
}

#contactform 
{
	position:absolute;
	top:155px;
	left:17px;
	width:571px;
	height:238px;
	overflow:hidden;
	display: none;
	z-index: 15;
	padding: 40px 20px;
}

#contactform input
{
	border: 1px solid black;
}

/*	Portfolio viewport	*/
#portfolio {
	position:absolute;
	top:155px;
	left:7px;
	width:712px;
	height:240px;
	overflow:hidden;

}

#portfolio ul#cases {
	margin:0;
	padding:0;
	width:20000px;	/*	Temp	*/
}

#portfolio ul#cases li {
	display:block;
	float:left;
	margin:0;
	padding:0;
	width:712px;
	height: 238px;
	text-align:center;
	list-style:none;
	border-top: 1px solid #9c9c9c;
	border-bottom: 1px solid #9c9c9c;
}

#portfolio ul#cases li div.descr {
	padding:21px 48px 0 48px;
	float:left;
	width:400px;
	line-height:20px;
	text-align:left;
	display: none;
}

#portfolio ul#cases li img
{
	height: 228px;
	text-align: center;
}

#btnPrevCase {
	position:absolute;
	top:232px;
	left:23px;
	width:16px;
	height:16px;
	overflow:hidden;
	text-indent:-4096px;
	background:no-repeat 0 0 url(../gfx/btn_prev_case.gif);
	display: none;
	z-index: 100;
}

#btnNextCase {
	position:absolute;
	top:232px;
	left:690px;
	width:16px;
	height:16px;
	overflow:hidden;
	text-indent:-4096px;
	background:no-repeat 0 0 url(../gfx/btn_next_case.gif);
	display: none;
	z-index: 100;
}

p.youtube
{
	position: absolute;
	top: 0px;
	left: 0px;
}

p.contact
{
	line-height: 17px;
}

/*	Hacks
	*****/

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
	visibility:hidden;
	display:block;
	font-size:0;
	content:" ";
	clear:both;
	height:0;
}
.clearfix {display:inline-block;}
/* start commented backslash hack \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* close commented backslash hack */