/***********************
MAIN
***********************/

html {
	overflow-y: scroll; 
	overflow: -moz-scrollbars-vertical;
	overflow-x: auto; 
	}
html, body  {
	height: 100%;
	margin: 0; 
	padding: 0;
	text-align: center; 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	background-color: #fff;
	}

* {
	padding: 0;
	margin: 0;
}

/***********************
FONTS
***********************/
h3 {
	font-size: 14px;
	color:  #555555;
	line-height: 22px;
}
h3 a {
	color:  #555555;
}

p {
	font-size: 12px;
	color:  #555555;
	line-height: 22px;
	text-align: justify;
	margin-bottom: 22px;
}



/***********************
LISTS
***********************/
ul.smalllist {
	list-style-type: square;
	margin-left: 6px;
	padding-left: 10px;
	line-height: 18px;
	font-size: 12px;
	color:  #555555;
}

ul.longlist {
	list-style-type: square;
	margin-left: 6px;
	padding-left: 10px;
	line-height: 18px;
	font-size: 12px;
	color:  #555555;
}

ul.longlist li {
	padding-bottom: 10px;
}

.nieuws ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	}
	
.nieuws li {
	list-style-type: none;
	line-height: 22px;
	color: #787878;
	margin: 0px;
	padding: 0px;
	background-image: none;
	text-align: justify;
	margin-bottom: 10px;
	font-size: 12px;
	color:  #555555;
	}
	
li.left {
		float: left;
		width: 70px;
		font-weight: bold;
		}
li.right {
		display: block;
		margin-left: 80px;
		}

/***********************
LANGUAGE
***********************/
#lang {
	clear: both;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
}

#lang ul {
	text-align: left;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	margin-top: auto;
	margin-bottom: auto;
	}

#lang ul li {
	text-align: center;
	width: 25px;
	height: 18px;
	background-color: #6A6A6A;
	color: #A3A3A3;
	display: inline;
	float: left;
	font-size: 11px;
	line-height:18px;
	}

#lang ul li a {
	display: block;
	width: 25px;
	height: 18px;
	background-color: #505050;
	font-size: 11px;
	color: #A3A3A3;
	text-decoration: none;
	line-height:18px;
}

#lang ul li a:hover {
	background-color: #A3A3A3;
	color: #505050;
}



/***********************
HEADER
***********************/

#stroke {
	position: absolute;	
	top: 0;
	left: 0;
	height: 150px;
	width: 100%;
	background-color: #313131;
	z-index: 5;
}

#header {
	width: 850px;
	margin: 0 auto;
	text-align: left;
	background-color: #313131;
	height: 150px;
	z-index: 6;

}

.logo {
	position: relative;
	float: left;
	width: 200px;
	height: 150px;
	background-color: #000;
	background-image: url(../_img/logo.jpg);
}

.logo h1 {
	visibility: hidden;
	padding-top: 60px;
	padding-left: 40px;
	font-size: 22px;
	text-transform: uppercase;
	color: white;
}

.text {
	position: relative;
	float: right;
	width: 600px;
	height: 100px;
	padding-top: 50px;
	padding-left: 50px;
}

.home { background-image: url(../_img/headers/header_home.gif);}
.bureau { background-image: url(../_img/headers/header_bureau.gif);}
	.mensen { background-image: url(../_img/headers/header_mensen.gif);}
	.prijzen { background-image: url(../_img/headers/header_prijzen.gif);}
	.vacatures { background-image: url(../_img/headers/header_vacatures.gif);}
.klanten { background-image: url(../_img/headers/header_klanten.gif);}
.werk { background-image: url(../_img/headers/header_werk.gif);}
.contact { background-image: url(../_img/headers/header_contact.gif);}

.home_en { background-image: url(../_img/headers/header_home_en.gif);}
.agency { background-image: url(../_img/headers/header_bureau_en.gif);}
.people { background-image: url(../_img/headers/header_mensen_en.gif);}
.clients { background-image: url(../_img/headers/header_klanten_en.gif);}
.work { background-image: url(../_img/headers/header_werk_en.gif);}
.contact_en { background-image: url(../_img/headers/header_contact_en.gif);}

.text p {
	visibility: hidden;
	font-size: 17px;
	color: #A4A4A4;
}




/***********************
MENU
***********************/

#sidebar {
	position: fixed;
	top: 0px;
	width: 200px;
	height: 100%;
	background-color: #e5e5e5;
	z-index: 3;
}

#menu {
	float: left;
	position: relative;
	top: 190px;
	width: 119px;
	left: 83px;
	z-index: 9;
	}

#menu ul {
	text-align: right;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	color: #777777;
	line-height: 24px;
	}

#menu ul li {
	font-size: 12px;
	color: #555555;
	text-transform: uppercase;
	line-height: 25px;
	}

#menu ul ul {
	position: relative;
	right: 50px;
	border-right: 1px solid #A4A4A4;
	margin-top: 15px;
	margin-bottom: 5px;
	text-align: right;
	list-style-type: none;
	padding: 0;
	}

#menu ul ul li {
	position: relative;
	right: 10px;
	font-size: 12px;
	color: #555555;
	text-transform: none;
	line-height: 20px;
	}

#menu ul a:hover {
		background-color: #fff;
		}

a.home { background-position: -90px 0px; }
a.home:hover { background-position: 0px 0px; }
li.active a.home { background-position: -180px 0px; }

a.bureau { background-position: -90px -25px; }
a.bureau:hover { background-position: 0px -25px; }
li.active a.bureau { background-position: -180px -25px; }

a.klanten { background-position: -90px -50px; }
a.klanten:hover { background-position: 0px -50px; }
li.active a.klanten { background-position: -180px -50px; }

a.werk { background-position: -90px -75px; }
a.werk:hover { background-position: 0px -75px; }
li.active a.werk { background-position: -180px -75px; }

a.nieuws { background-position: -90px -100px; }
a.nieuws:hover  { background-position: 0px -100px; }
li.active a.nieuws { background-position: -180px -100px; }

a.contact { background-position: -90px -125px; }
a.contact:hover { background-position: 0px -125px; }
li.active a.contact { background-position: -179px -125px; }

#menu ul a:link, #menu ul a:visited, #menu ul a:hover {
		letter-spacing: 10000000px;
		text-decoration: none;
		color: #898989;
		width: 0px;
		display: block;
		padding: 25px 0px 0px 70px;
		overflow: hidden;
		height: 0px;
		background-image: url("../_img/menu.gif");
		background-repeat: no-repeat;
	}
	

#menu ul ul {
	position: relative;
	right: 50px;
	border-right: 1px solid #CECECE;
	margin-top: 15px;
	margin-bottom: 5px;
	text-align: right;
	list-style-type: none;
	padding: 0;
	}
	
#menu ul ul li {
	line-height: 20px;
	}

#menu ul ul li a:link,  #menu ul ul li a:visited {
	position: relative;
	right: 0;
	font-size: 12px;
	color: #555555;
	text-transform: none;
	line-height: 20px;
	}

#menu ul ul a:link, #menu ul ul a:visited, #menu ul ul a:hover {
	letter-spacing: normal;
	text-decoration: none;
	width: 110px;
	display: inline;
	padding: 0;
	overflow: visible;
	background-image: none;
	background-color: #e5e5e5;
	background-repeat: no-repeat;
	}

#menu ul ul li a:hover {
	color: #000;
	}

.current {
	color: #555555;
	font-weight: bold;
	text-decoration: none;
	margin: 0;
	padding: 0;
	}


#menu_en {
	float: left;
	position: relative;
	top: 190px;
	width: 119px;
	left: 83px;
	z-index: 9;
	}

#menu_en ul {
	text-align: right;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	color: #777777;
	line-height: 24px;
	}

#menu_en ul li {
	font-size: 12px;
	color: #555555;
	text-transform: uppercase;
	line-height: 25px;
	}

#menu_en ul ul {
	position: relative;
	right: 50px;
	border-right: 1px solid #A4A4A4;
	margin-top: 15px;
	margin-bottom: 5px;
	text-align: right;
	list-style-type: none;
	padding: 0;
	}

#menu_en ul ul li {
	position: relative;
	right: 10px;
	font-size: 12px;
	color: #555555;
	text-transform: none;
	line-height: 20px;
	}

#menu_en ul a:hover {
		background-color: #fff;
		}

a.home_en { background-position: -90px 0px; }
a.home_en:hover { background-position: 0px 0px; }
li.active a.home_en { background-position: -180px 0px; }

a.bureau_en { background-position: -90px -25px; }
a.bureau_en:hover { background-position: 0px -25px; }
li.active a.bureau_en { background-position: -180px -25px; }

a.klanten_en { background-position: -90px -50px; }
a.klanten_en:hover { background-position: 0px -50px; }
li.active a.klanten_en { background-position: -180px -50px; }

a.werk_en { background-position: -90px -75px; }
a.werk_en:hover { background-position: 0px -75px; }
li.active a.werk_en { background-position: -180px -75px; }

a.nieuws_en { background-position: -90px -100px; }
a.nieuws_en:hover  { background-position: 0px -100px; }
li.active a.nieuws_en { background-position: -180px -100px; }

a.contact_en { background-position: -90px -125px; }
a.contact_en:hover { background-position: 0px -125px; }
li.active a.contact_en { background-position: -179px -125px; }

#menu_en ul a:link, #menu_en ul a:visited, #menu_en ul a:hover {
		letter-spacing: 10000000px;
		text-decoration: none;
		color: #898989;
		width: 0px;
		display: block;
		padding: 25px 0px 0px 70px;
		overflow: hidden;
		height: 0px;
		background-image: url("../_img/menu_en.gif");
		background-repeat: no-repeat;
	}
	

#menu_en ul ul {
	position: relative;
	right: 50px;
	border-right: 1px solid #CECECE;
	margin-top: 15px;
	margin-bottom: 5px;
	text-align: right;
	list-style-type: none;
	padding: 0;
	}
	
#menu_en ul ul li {
	line-height: 20px;
	}

#menu_en ul ul li a:link,  #menu_en ul ul li a:visited {
	position: relative;
	right: 0;
	font-size: 12px;
	color: #555555;
	text-transform: none;
	line-height: 20px;
	}

#menu_en ul ul a:link, #menu_en ul ul a:visited, #menu_en ul ul a:hover {
	letter-spacing: normal;
	text-decoration: none;
	width: 110px;
	display: inline;
	padding: 0;
	overflow: visible;
	background-image: none;
	background-color: #e5e5e5;
	background-repeat: no-repeat;
	}

#menu_en ul ul li a:hover {
	color: #000;
	}
	

/***********************
CONTENT
***********************/

#container {
	position: relative;
	min-height: 100%;
	width: 850px;
	margin: 0 auto; 
	text-align: left;
} 

#content {
	float: right;
	position: relative;
	width: 600px;
	top: 200px; 
}

#content a {
	text-decoration: underline;
	color: #555555;
}

#content a:hover {
	text-decoration: none;
	color: #555555;
}



/********************
SWITCHER
*******************/

#style-switcher {
	position: absolute;
	top:164px;
	width: 90px;
	height: 22px;
	right: 0px;
	z-index: 7;

}
#style-switcher ul {
	text-align: left;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	color: #777777;
	line-height: 24px;
	}

#style-switcher ul li {
	display: inline;
	float: left;
	}

a.small { background-position: -60px -2px; }
a.small:hover { background-position: -60px -26px; }

a.thumbs { background-position: -31px -2px; }
a.thumbs:hover { background-position: -31px -26px; }

a.big { background-position: -2px -2px; }
a.big:hover { background-position: -2px -26px; }


#style-switcher ul a:link, #style-switcher ul a:visited, #style-switcher ul a:hover {
		display: block;
		padding: 22px 0px 0px 29px;
		height: 0px;
		background-image: url("../_img/styleswitcher.gif");
		background-repeat: no-repeat;
		cursor: hand;
	}



/********************
KLANTEN
*******************/


ul.klanten {
	width: 630px;
	list-style: none;
	background: #fff;
}

ul.klanten li {
	float:left;
	text-decoration:none;
	display:inline;
	width: 178px;
	background-color: #f9f9f9;
	border: 1px solid #e5e5e5;
	height: 108px;
	margin-bottom: 30px;
	margin-right: 30px;
}

ul.klanten li img {
	background-color: #f9f9f9;
	border: none;
	height: 108px;
	width: 178px;
}

ul.klanten li p {
	text-align: center;
	text-transform: uppercase;
	padding-top: 45px;
	font-size: 14px;
	color: #ccc;
}



/********************
CONTACT
*******************/

.address p {
	line-height: 18px;
}

.address a {
	text-decoration: underline;
	color: #555555;
}

.address h2 {
	color: #555555;
}

.address a:hover {
	text-decoration: none;
	color: #555555;
}

#webcam {
	position: absolute;
	right: 0;
	}
	
/********************
SLIDER
*******************/

#slider {
    width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 999;
    background: white;
}

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

.scrollContainer div.panel {
    height: 210px;
    width: 600px;
}

#shade {
    background: #EDEDEC url(images/shade.jpg) no-repeat 0 0;
    height: 50px;
}

.scrollButtons {
    position: absolute;
    top: 150px;
    cursor: pointer;
}

.scrollButtons.left {
    left: -25px;
}

.scrollButtons.right {
    right: -25px;
}

.hide {
    display: none;
}

#flashcontent {
top: 0;
padding-right: 20px;	
width: 400px;
float: left;
}

.route {
float: left;
padding-top: 30px;
}

/********************
LEGEND HANS
*******************/

#hansContainer {
	position: relative;
	left: 200px;
	width: 650px;
	height: 118px;
	}

#hans {
	position: absolute;
	right: 0px;
	top: 60px;
	width: 150px;
	height: 211px;
	background: url(http://www.skipintro.nl/_img/hans.png);
	background-repeat: no-repeat;
	}
#streep {
	position: absolute;
	top:150px;
	width: 650px;
	height: 50px;
	background-color: #b2d234;
	background: white;
	}
	
/********************
PORTFOLIO PAGE BIG ITEMS
*******************/
#bigitems {
width: 630px;
}

.bigitem {
float: left;
width: 285px;
height: 173px;
background: #e5e5e5;
margin: 0px 30px 30px 0px;
}