/* CSS Document */
/* Oswald & Ruby website is build by Petra Berenschot */

html, 
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color:#FFF;
	line-height: 140%;
	padding: 0;
	margin:	0 auto;
	background: #000 url(../images/back.gif) repeat-x left top;
	}

img,
img a {
	border: none;	}
	
a,
a:hover,
a:visited,
a:active{
	color:#FFF;
	text-decoration: none;
	border: none;	}
	
a:active{outline: none;}
a:focus{-moz-outline-style: none;}
	
.welcomeText a,
.mainproject a,
.workcase a,
.contactText a,
.newsText a,
.sitemap a:hover,
.rightContent a{color:#C00;}
	
h1 {font-family: Arial, Helvetica, sans-serif;
	font-size: 2.5em;
	font-weight: 700;
	line-height: 1.0;
	letter-spacing:-1px;
	margin: 20px 0 10px;}
h2 {font-size: 1.8em; line-height: 1.2;}
h3 {font-size: 1.5em;font-weight:700; margin: 0 0 5px 0;}
h4 {font-size: 1.4em;font-weight:700; line-height:1.4;}
h5 {font-size: 1.0em;font-weight:700;}

#container {
	width: 970px;	
	margin: 0 auto;
	text-align: left;
	position: relative;
	top: 0;
	}

.xindexBg {background: url(../images/index.jpg) no-repeat left top;}
.xoveronsBg {background: url(../images/overons.jpg) no-repeat left top;}	
.xwerkBg {background: url(../images/werk.gif) no-repeat left top;}
.xcontactBg {background: url(../images/contact.jpg) no-repeat left top;}
.xnieuwsBg {background: url(../images/nieuws.jpg) no-repeat left top;}
.xvacaturesBg {background: url(../images/vacatures.jpg) no-repeat left top;}
.xwerk2Bg {background: url(../images/werk2.jpg) no-repeat left top;}
.xformBg {background: url(../images/form1.jpg) no-repeat left top;}

#main {
	position: relative;
	display:block;
	width: 970px;	
	margin: 0 auto;
	background: transparant;
	}
	
/* start banner */
#header {
	position: relative;
	top: 0;
	padding: 0;
	width: 970px;	
	height: 88px;
	border-bottom: 1px solid #D6D6D6;
	margin-bottom:19px;
	}
	
.logo{
	position: absolute;
	top:26px;
	left:0;
	}
	
.menu{
	position: relative;
	float:right;
	top:65px;
	}
	
.menu a{
	margin-left: 30px;
	font-weight:700;
	font-size: 1.2em;
	}
/* end banner */


/* start footer */
#footer {
	position:relative;
	display:block;
	float:left;
	font-size: 0.9em;
	height: 129px;
	margin:  0 0 10px 0;
	padding: 0;
	width: 970px;
	border-top: 1px solid #878787;
	border-bottom: 1px solid #878787;
	background: url(../images/footer_back.gif) no-repeat right;
	}	
.contact{
	position:absolute;
	left: 0;
	top: 12px;
	width: 371px;
	height:86px;
	padding:10px;
	background:#1a1a1a;
	}
.contact a{color:#C00;}
.line{
	position:relative;
	width: 360px;
	display:block;
	}
.red{color:#8B0F04;}
.sitemap{
	position:absolute;
	left: 402px;
	top: 12px;
	width: 112px;
	height:94px;
	padding:6px;
	background:#1a1a1a;
	}
.sitemap h3{
	margin-bottom: 2px;
	}
.sitemap a{
	position:relative;
	display:block;
	line-height: 1.3em;
	}
	
.icons{
	position:absolute;
	left: 540px;
	top: 13px;
	width:90px;
	}	
	
.icons img{
	margin: 0 3px 0 0;}
.icons a{
	position:relative;
	font-size: 0.8em;
	float:left;
	display:block;
	width:87px;
	margin-bottom:10px;
	}
.iconText{
	position: absolute;
	top:3px;
	}

.date{
	position:absolute;
	top:70px;
	left:655px;
	height: 120px;
	line-height:1em;
	font-size:5.6em;
	font-weight:700;
	color:#1a1a1a;
	}
.subDate a{
	position:absolute;
	left:715px;
	top:102px;
	font-size:0.8em;
	color: #666;
	z-index:5;
	}
/* end footer */
	
/* start columns */


.left{
	position:relative;
	display:block;
	float:left;
	margin:9px 32px 0px 0px;
	width:386px;
	}

.right{
	position:relative;
	display:block;
	float:left;
	width:545px;
	margin:9px 0px 0px 0px;
	padding: 0px;
	
}
/* end columns */

/* start subbanner */
.title{
	position:absolute;
	top:75px;
	}
	
.quote{
	float:right;
	margin-left:20px;
	}
	
.print,
.print2{
	position:absolute;
	right:2px;
	top:120px;
	}
.print a,
.print2 a{
	margin-right:5px;
	}
	
.adress{display:none;margin-top:20px;}
	
.leftNews,
.leftContent{
	position:relative;
	display:block;
	float:left;
	width:260px;
	border-bottom: 1px solid #707070;
	z-index:5;
	margin:0px 50px 0px 0px;
	}
.contentSubtitle{
	display:block;
	padding-bottom:10px;
	margin-bottom:10px;
	border-bottom: 1px solid #707070;
	}

.rightContent{
	position:relative;
	display:block;
	float:left;
	width:640px;
	}
	
.contentTitle{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2.5em;
	letter-spacing:-1px;
	font-weight: 700;
	line-height: 1.0;
	margin-bottom: 10px;
	}
	
.intro{
	font-weight: 700;
	margin-bottom: 15px;
	font-size: 1.1em;
	}
/* end subbanner */

/* start welkom */	
.welcome{
	position:relative;
	margin-top: 20px;
	left:0;
	}
	
.welcomeText{
	position:relative;
	margin-top: 11px;
	padding-bottom:15px;
	left:0;
	border-bottom: 1px solid #707070;
	width: 375px;
	}
/* end welkom */
	
/* start values */
.value{
	position:relative;
	margin-top:5px;
	left: 0;
	xborder-bottom: 1px solid #707070;
	width: 376px;	
	height: 171px;
	padding-bottom:5px;
	margin-bottom: 15px;
	}			
/* end values */

/* start new projects */
.recentprojects {
	position:relative;
	margin-top: 13px;
	left: 0;
	width: 375px;
	}
.recentTitle{
	margin:5px 200px 10px 0;
	width:106px;
	height:14px;
	}
.projectQuote{
	float:left;
	margin:10px 0 10px 0;
	}
.greybox {
	float: left;
	display:block;
	position:relative;	
	}
	
.greybox img{
	margin: 2px 4px 0 0;
	}
.new1,
.new2,
.new3,
.new4,
.link1,
.link2,
.link3{
	position:absolute;
	top:112px;
	left:156px;
	z-index:2;
	background:url(../images/new.gif);
	width:33px;
	height:15px;
	}
	
.new2{
	left:352px;
	}
.new3{
	display:none;
	top:111px;
	left:349px;
	}
.new4{left:945px;}
.link1{left:945px;top:261px}
.link2{left:550px;top:409px}
.link3{left:945px;top:559px}
	
.newLeft{left:155px;
	display:none;}
.newRight{left:348px;}
/* end new projects */

/* start main project */
.mainproject {
	margin: 8px 0 25px 24px;
	padding-bottom: 15px;
	border-bottom: 1px solid #707070;
	}	
.mainproject h2{ margin-bottom:10px;}
	
.mainprojectImage {
	position:absolute;
	display:block;
	top:9px;
	left:0px;
	margin-bottom:8px;
	}	
.mainprojectTitle{
	position:absolute;
	top: 338px;
	left: 24px;
	margin: 0 12px 8px 0;
	}	
.mainprojectText{
	position:absolute;
	top: 338px;
	left: 135px;
	width:380px;
	}
/* end main project */

/* start news */
.news {
	position: relative;
	display: block;
	margin: 11px 0 0 24px;
	border-bottom: 1px solid #707070;
	}
	
.newsText{
	margin: 10px 0 15px 0;
	}
/* end news */

/* end newsletter */
.newsLetter {
	position:absolute;
	right:0px;
	top:0;
	width:262px;
	}
.newsLetter img{
	margin-bottom:7px;
	}
#comment{
	color: #C00;
	}

.show{display:block;}
.hide{display:none;}

.email{
	font-family:Arial, Helvetica, sans-serif;
    border: 1px solid #D6D6D6;
	font-size:1.0em;
	height: 16px;
	width:226px;
	}
.button{
	position:absolute;
	right:0;
	top:20px;
	cursor:pointer;
	height: 22px;
	width: 22px;
	border: none;
    background:  url(../images/send.jpg) no-repeat top left;
	}
/* end newsletter */

.quoteHp {
	margin: 20px 0 15px 24px;
	}
	
/* end homenpage */
	
/* start about us */
.aboutus{
	height:957px;
	}
.titleAboutus{
	position:absolute;
	top:183px;}
.aboutusLine{
	height:154px;
	border-bottom: 1px solid #878787;
	margin-bottom:25px;
	width:100%;}
	
.bg1Aboutus{
	position:absolute;
	left:398px;
	top:102px;
	background:url(../images/us.jpg);
	width:603px;
	height:501px;
	}
	
.bg2Aboutus{
	position:absolute;
	left:0;
	top:513px;
	width:626px;
	height:419px;}

.aboutus1{
	position:absolute;
	left: 0;
	top: 207px;
	width:380px;
	}	
.aboutus2{
	position:absolute;
	left: 0;
	top: 330px;
	width:380px;
	}
.aboutus2 .aboutusTitle{
	margin-left:180px;}
	
.aboutus3{
	position:absolute;
	left: 406px;
	top: 603px;
	width:380px;
	padding:50px 0px 0px 88px;
	z-index:3;
	}
		
.aboutus4{
	position:absolute;
	left: 495px;
	top: 794px;
	width:380px;
	padding:50px 0px 0px 90px;
	z-index:3;
	}
.aboutus3 .aboutusTitle,
.aboutus4 .aboutusTitle{
	position:absolute;
	top:0px;
	left:0px;
	}
	
.aboutusTitle{
	margin-bottom: 10px;
	display:block;
	}
/* end about us */

/* start work all*/

.workAll{
	position:relative;
	display:block;
	width:982px;
	}
	
.sites{
	margin: 0 12px 12px 0;
	}
	
.gerelateerdSubtitle{
	position:absolute;
	top:15px;
	}

/* end work all */

/* start work */

.work{
	height:953px;
	padding:0px;
	}
.next{
	position:absolute;
	top:127px;
	right:211px;
	height:20px;
	width: 18px;
	}
.link{
	position:absolute;
	top:125px;
	right:17px;
	font-size:0.9em;
	font-weight:700;
	}	
.link a{padding:0 5px;}
.last{
	position:absolute;
	top:127px;
	right:0px;
	height:20px;
	width:18px;
	}
	
.work_sites{
	position:absolute;
	display:block;
	float:left;
	top:790px;
	border-top: 1px solid #878787;
	padding-top:16px;
	width:970px;
	}
.work_site_title{
	position:absolute;
	}
.site{
	float:right;
	margin-left:17px;}
.workcase{
	position:absolute;
	top:196px;
	width: 260px;
	}
.workcase img{
	display: block;
	margin-bottom: 15px;
	}
.workcaseIntro{
	display: block;
	font-weight:700;
	margin-bottom: 15px;
	}
.workcaseImage{
	position:absolute;
	top:413px;
	left:0;
	}
.people{
	position:absolute;
	top:435px;
	left:306px;}
.workcasePhoto{
	position:absolute;
	top:433px;
	left:669px;}
.screen{
	position:absolute;
	display:block;
	top:198px;
	left:299px;}
.slide{
	position:absolute;
	display:block;
	top:22px;
	left:17px;
	z-index:3;}
.slideBack{
	position:absolute;
	display:block;
	top:0px;
	left:0px;}
.back{
	position:absolute;
	display:block;
	top:375px;
	left:17px;
	z-index:6;
	width:42px;
	height:42px;
	}
.forward{
	position:absolute;
	display:block;
	top:376px;
	left:50px;
	width:42px;
	height:42px;
	z-index:5;
	}
.back a,
.forward a{
	cursor:pointer;
	}
/* end work */

/* start contact */
.contact2{
	height:800px;
	}
.bgContact{
	position:absolute;
	left:0;
	top:437px;
	background:url(../images/contact_bg.jpg) no-repeat top left;
	width:485px;
	height:396px;
	}	
.contactText{
	font-weight:700;
	font-size:1.1em;
	line-height:1.5em;
	padding-bottom:14px;
	}
.contactMain{
	display:block;
	margin:50px 0 10px;
	}
.map{
	position:absolute;
	display:block;
	height:405px;
	width:664px;
	left:-16px;
	top:0px;
	}
.iframe{
	position:absolute;
	top:22px;
	left:0px;
	}
.arrow{
	position:absolute;
	display:block;
	top:274px;
	left:-84px;
	z-index:5;
	width:130px;
	height:142px;
	}
.route{
	position:absolute;
	display:block;
	top:416px;
	left:0px;
	}
.rightContact{
	position:relative;
	display:block;
	float:right;
	margin:0px;
	padding:0px;
	width:640px;
	}
/* end contact */

/* start nieuws */
.nieuws{
	height:683px;
	}
.bgNews{
	position:absolute;
	left:-19px;
	top:480px;
	background:url(../images/news1.jpg);
	width:467px;
	height:341px;
	}	
.newsText2{
	padding-bottom:14px;
	color: #C00;
	}
.startProject{
	position:relative;
	display:block;
	margin-bottom:10px;
	height:30px;
	}
.startProject a{
	position:absolute;
	top:0;
	margin-left:5px;
	width:208px;
	}	
.startProject a:hover,
.startProject a:active{
	color: #C00;
	}
/* end nieuws */


/* start vacatures */
.vacatures{
	height: 645px;
	}
.bgVacatures{
	position:absolute;
	top:422px;
	background:url(../images/vacatures_bg.jpg) no-repeat ;
	width:290px;
	height:318px;
	}	
	
.leftVacatures{
	position:relative;
	display:block;
	float:left;
	margin-right:50px;
	width:260px;
	}
	
.vacaturesText{
	line-height:2.0em;
	padding-bottom:14px;
	border-bottom: 1px solid #707070;
	margin-bottom:320px;
	}

.vacaturesText a{
	margin-left:5px;
	color: #C00;
	}	

.vacaturesText a:hover,
.vacaturesText a:active{
	color: #FFF;
	}
/* end vacatures */

/* start lightbox */
#containerForm {
	background:#FFF;
	}

#sendbox{
 	position:absolute;
	top:20px;
	left:20px;
	width:519px;
	color:#000;
	background:#FFF;
	}
#sendbox a,
.formfalse{color:#C00;}
.textForm{margin-top:25px;}
.textForm h1{font-weight:700; font-size:1.2em;}
.formText{margin-bottom:14px;}

.falseimage{
	position:relative;
	margin-left:10px;
	top:3px;
	width:14px; 
	height:14px;
	}
.false{
	position:absolute;
	top:590px;
	color:#C00;
	}
.formfalse{
	margin-left:5px;
	}

#sendbox form{
	position: absolute;
	top:120px;
	}
.buttonClose{
	position:absolute;
	top:7px;
	right:11px;
	font-weight:700;
	}
	
textarea, 
.formfield1{border:1px solid #878787;  }

.radio{border: none solid #878787;  }
	
.buttonsend{
	float:right;
	color: #c00;
	font-size:1.4em;
	font-weight:700;
	}	
.buttonclose{
	float:right;
	font-weight:700;
	font-size: 1.4em;
	}
	
.button2{
	margin-left:5px;
	height: 22px;
	width: 22px;
	border: none;
    background:   url(../images/send2.jpg) no-repeat top left;
	cursor:pointer;
	}
	
.button3{
	margin-left:5px;
	height: 22px;
	width: 22px;
	border: none;
    background:  url(../images/sluiten.jpg) no-repeat top left;
	cursor:pointer;
	}

#__EVENTTARGET,
#__EVENTARGUMENT,
#__VIEWSTATE,
#__EVENTVALIDATION{
	border:none;
	padding:0;
	}

/* end lightbox */