@import url("/css/text.css");

body {
	text-align:center;
	margin:0;
	padding:0;
	cursor:default;
	overflow-y:scroll;
  background-color:#ffffff;
}

#container {
	text-align:left;
	position:relative;
	margin:0 auto;
	width:980px;
	font-family:Arial,Helvetica,sans-serif;
	font-size:12px;	
	color:#7b7b7b
}
#ragfijn_logo {
	background-image:url(../images/newlogo.jpg);
	width:400px;
	height:100px;
	position:relative;
	margin:50px auto 0;
	}
#ragfijn_logo a{
	display:block;
	width:100%;
	height:100%;
	}
.balk {
	background-image:url(../images/balk1.jpg);
	width:604px;
	height:8px;
	margin:30px 0 0 175px ;
	}
.balk2 {
	background-image:url(../images/balk2.jpg);
	width:604px;
	height:7px;
	margin:5px 0 0 175px ;
	}
.balk3 {
	background-image:url(../images/balk3.jpg);
	background-position:center;
	background-repeat:no-repeat;
	width:840px;
	height:5px;
	/*margin:0px 0 0 180px ;*/
	margin:0px auto;
	}
.balk4 {
	background-image:url(../images/balk4.jpg);
	background-position:center;
	background-repeat:no-repeat;
	width:840px;
	height:10px;
	/*margin:0px 0 0 108px ;*/
	margin:0px auto;
  
	}


#logos {
	height:80px;
	padding:30px 20px 0px 120px;
}	
#logos img {
	margin-left:20px
	}
#logos img.overlay {
	position:absolute;
	z-index:9;
	left:0px;
	top:0px;
  width:200px;
  height:100px;
	} 
	
.logo_wrapper {
	position:relative;
	float:left;
  overflow:hidden; /* does the trick */
  margin:0 10px;
}
#logos a:hover img.overlay {
	display:none;
}		
	
#menu {
	margin-top:8px;
	margin-left:280px;
	}
	
#menu ul {
	list-style-type:none;
  height:28px;
  margin-left:34px;
	}

#menu li { 
  float:left;
	}
#menu li a {
	font-size:22px;
  display:block;
  height:28px;
}
#menu li a span {
  display:none;
}
#menu .Websites a {
  width:99px;
  background-image:url(/images/button_websites.gif);
}
#menu .Websites a:hover {
  background-image:url(/images/button_websites_over.gif);
}
#menu .CMS a {
  width:84px;
  background-image:url(/images/button_cms.gif);
}
#menu .CMS a:hover {
  background-image:url(/images/button_cms_over.gif);
}
#menu .Webhosting a {
  width:121px;
  background-image:url(/images/button_webhosting.gif);
}
#menu .Webhosting a:hover {
  background-image:url(/images/button_webhosting_over.gif);
}

#menu .CMS, #menu .Webhosting {
  padding-left:2px;
  background-image:url(/images/balk.gif);
  background-position:left;
  background-repeat:no-repeat;
}
/*
	<img src="" alt="button_websites" title="" onmouseover="this.src><img src="/images/balk.gif" alt="balk">
  <img src="" alt="button_cms">
  <img src="" alt="webhosting_cms">
  
  <img src="/images/balk.gif" alt="balk">
*/
#maincontent {
	width:760px;
	margin:20px auto;
	padding-left:100px;
	margin-bottom:30px;
  margin-bottom:20px;
	line-height:20px;
}
#maincontent h1 {
  float:left;
  font-size:18px;
  margin:10px 12px 0px 0;
}
#maincontent .info {
  margin:0px 10px 5px 0;
  padding-top:12px;
  color:#bbb;
}
#maincontent .info a {
  color:#bbb;
}
#maincontent .info a:hover {
  color:#666;
}
#photoslider {
  /*width:687px;
  height:460px;*/
}
#photoslider img {
  border:1px solid #ccc;
}
#slidertext {
  margin:15px 0 -5px 0;
}
/*
#maincontent .project_link {
  margin:-50px 0 0 440px;
}
*/

#maincontent .gallery {
  margin-left:-7px;
}

#maincontent_rechts {
	float:left;
	width:300px;
	min-height:50px;
	margin-top:40px;
	padding-left:50px;
	margin-bottom:40px;
}
#maincontent_links {
	float:left;
	width:300px;
	padding-left:130px;
	padding-right:20px;
	min-height:50px;
	/*border-right:1px solid #ddd;*/
	line-height:20px;
	margin:40px 0 20px 20px;
}
#maincontent_links a {
  color:#d04d4d;
  text-decoration:underline;
  }
    
#maincontent_links a:hover {
  text-decoration:none;
  }


#projecten {
	/*width:830px;*/
	/*padding:0px 0px 20px 150px;*/
  width:740px;
  margin:0 auto 20px;
  padding:15px 0 0 60px;
	}
#projecten h2 {
  text-align:center;
  color:#ccc;
  font-size:18px;
  margin:0px;
  font-weight:normal;
  margin-left:-30px;
}
#maincontent_rechts img,
#maincontent img,
#projecten img {
	float:left;
}
img.boven {
	display:block;
	float:none! important;
}
img.links {
	width:7px;
}
img.rechts {
	width:7px;
}
img.clearfloat {
clear:both;
}
.projectfoto {
	display:block;
	/*margin-right:30px;*/
  margin-bottom:5px;
  /*border:1px solid #ccc;*/
}
div {
  /*border:1px solid green;*/
}
#projecttoolbar {
	margin:20px auto;
  width:720px;
}
#projecttoolbar a {
	text-decoration:none;
}
#projecttoolbar td img{
	vertical-align:middle;
}
a.vorige {
  padding-left:8px;
  background-image:url(/images/Left_Arrow.gif);
  background-repeat:no-repeat;
  background-position:left;
  color:#999;
}
a.volgende {
  padding-right:8px;
  background-image:url(/images/Right_Arrow.gif);
  background-repeat:no-repeat;
  background-position:right;
  color:#999;
}
.projecttitel {
	font-weight:bold;
	font-size:14px;
}
a.projecttitel:hover {
	text-decoration:underline ! important
	}
.overlay {
	position:absolute;
	width:100px;
	z-index:9;
	left:7px;
	top:7px;
	}

a:hover .overlay, .active .overlay {
	display:none;
}

.projecttext {
  width:670px;
}
	
.thumb {
	position:relative;
	margin-right:30px;
	margin-top:20px;
	display:inline-block;
	vertical-align:middle;
	font-size:12px;	
}	
.thumb a {
  text-decoration:none;
}
.thumb .title {
  color:#aaa;
  text-align:center;
	display:block;
  width:110px;
  clear:left;
  height:32px;
}
.thumb:hover .title {
  color:#777;
}
.gallery .thumb {
  margin-right:28px;
}
.gallery .thumb .img {
  border:1px solid #ccc;
}
.gallery .thumb.active .img {
  border:1px solid #000;
}
.gallery .thumb:hover .img {
  border:1px solid #c45959;
}
.gallery .thumb .overlay {
  margin:1px 0 0 1px;
}
#footer {
	text-align:center;
	font-size:11px;
	width:100%;
	padding-top:20px;
  color:#aaa;
}
#footer a{
  color:#aaa!important;
}

#tagcloud {
  width:540px;
  margin:auto;
  text-align:center;
  color:#aaa;
	font-size:11px;
  line-height:22px;
}
#tagcloud a {
  color:#ccc;
  text-decoration:none;
  padding:0 4px;
}
#tagcloud a:hover {
 /* oude kleur color:#db147b; */
  text-decoration:none;
  color:#c45959;
}