/* Start of CMSMS style sheet 'gergaoil' */
* { margin:0; padding:0; border:0; }

/* untag for debugging only */
/* div { border: 1px solid #f2e; } */

html { color : #c0c2c3; }

body {
  background:	#000000 url(/images/page/body-background-b.jpg) repeat-x top;
  background-color:	#000000;
  background-position: 0 0px;
  font: 		62.5%/1.4 Arial, Helvetica, sans-serif;;
}

body.subpage{
  background:	#000000 url(/images/page/body-background-d.jpg) repeat-x top;
  background-position: 0 0px;
}

body.admin{
  background:	#4b525a url(/images/page/body-background-d.jpg) repeat-x top;
  background-position: 0 0px;
}

body.blog {
  background:	#4b525a url(/images/page/body-background-blog.jpg) repeat-x top;
  background-position: 0 0px;
}


a:link, a:visited { color:#839f37; text-decoration:none; }
a:active, a:focus, a:hover { color:#a7c65a; text-decoration:underline; }

h1
{ font-family: Arial, Helvetica, sans-serif;
  color: #839F37;
  font-size:16px; font-weight:bold; text-transform:none;
  background: url(/images/page/h1-bullet.png) no-repeat top left;
  padding-left:0px  !important;
  margin:0 0 20px 0;
}

#next
{ float:right;
}

h1.red { background: url(/images/page/h1-bullet-red.png) no-repeat top left; }
h1.blue { background: url(/images/page/h1-bullet-blue.png) no-repeat top left; }
h1.orange { background: url(/images/page/h1-bullet-orange.png) no-repeat top left; }

h2 { font-family: 'Trebuchet MS',Verdana, Arial, Helvetica, sans-serif; font-size:1.8em; font-weight:normal; text-transform:uppercase; background: url(/images/page/h2-bullet.png) no-repeat 0px 10px; padding-left:15px; }
h3 { background: url(image/page/bullet.gif) no-repeat left ; font-size:12px; padding-left:0px; color: #378899;}
h4 { font-size:1.4em; margin:0 0 5px 0; padding:0; color:#eee; }
h5 { font-size:1.2em; margin:15px 0 5px 0; padding:0; color:#eee; }
h6 { font-size:1.6em; margin:0 0 5px 0; padding:0; }



h2 a, h2 a:visited, h2 a:link {
	color : #c0c2c3;
}





.right { float:right; }
.clear { display:block; height:0; clear:both; visibility:hidden; line-height:0em; }


.green { color:#FFFFFF; }
.red { color:#FFFFFF; }
.blue { color:#FFFFFF; }
.orange { color:#9a5d38; }

.logo-icon { float:left; margin:15px 0 0 0px; position:relative; }
.logo-text { float:left; margin:25px 0 0 0; border-left:1px solid #888; padding-left:15px; }


 p { margin:5px 0 10px 0; line-height:1.5em; font-size:110%; }

 /*
  __________

  structural
  __________

 */


/* universal wrapper...set page width here */
div#wrap { margin:0 auto; width:945px; }

/* actual page div */
div#page {
  background-color:	#2e3337;
  padding:		      0;
  overflow:hidden;
}

/* main page elements */
div#header {
  background:   #1f282d url(../images/page/header-background.jpg) no-repeat bottom left;
  padding:    0;
  height:   102px;
  margin:   0;
}
div#header.light {
	background-image:   none;
}

div#header.light .logo-text { margin:35px 0 0 0;}
div#header.light .logo-icon { float:left; margin-bottom:10px 0 0 40px;  }

div#content {
  padding:			   0 0 0 0;
  background:		   #2e3337 url(/images/page/content-background-green.jpg) repeat-x top;
  min-height:150px;
  border-top:		   0px solid #bed5dd;
  border-left:		 1px solid #2e3338;
  border-right:		 1px solid #2e3338;
}

div#content2 {
  margin-left:20px;
  padding:			   0 0 0 0;
  background:		   #2e3337 url(/images/page/content-background-green.jpg) repeat-x top;
  min-height:150px;
  border-top:		   0px solid #bed5dd;
  border-left:		 1px solid #2e3338;
  border-right:		 1px solid #2e3338;
}

#wrappercol {
  margin-left:10px;
}

div#footer {
  clear:			      both;
  padding:			    20px;
  color:			      #666;
  border-top:		    1px dashed #444;
  background-color:	#2c2d2f;
  margin-top:		    0px;
}

div#pagecontent {
	padding:35px 35px 0 35px;
}
div.clear {
  clear:both;
}

div#bigbox a:link, div#bigbox a:visited {
  color:  #c0c2c3;
}


#bottom{
margin:0 auto; width:870px;
}

/*
_________________

#header specifics
_________________

*/


.himage {
  z-index:-1;
  height:   248px;
  background: #2e3337 url(images/main_banner.jpg) no-repeat top;
}

div#blog_graphics {
  background:   #2e3337 url(/images/page/headers/graphics_blog_header.png) no-repeat top;
  height:250px;
}
div#blog_webdesign, div#blog_programming {
  background:   #2e3337 url(/images/page/headers/webdev_blog_header.png) no-repeat top;
  height:250px;
}
div#blog_systeembeheer, div#blog_systemadministration {
  background:   #2e3337 url(/images/page/headers/system_blog_header.png) no-repeat top;
  height:250px;
}

body.portfolio .himage { background: #2e3337 url(/images/page/header-image-B.jpg) no-repeat top; height:146px; }
body.about     .himage { background: #2e3337 url(/images/page/header-aboutus.png) no-repeat top; height:223px; }
body.contact   .himage { background: #2e3337 url(/images/page/4_banner_B.png) no-repeat top; height:250px; }
body.subpage   .himage { background: #2e3337 url(/images/page/4_banner_services.png) no-repeat top; height:146px; }
body.blog      .himage { background: #2e3337 url(/images/page/headers/diba_blog_header.png) no-repeat top; height:250px; }
body.services  .himage { background: #2e3337 url(/images/page/3_banner_B.png) no-repeat top; height:250px; }

/*
_____________________

#navigation specifics
_____________________

*/


#language { font-size:1.0em; float:right; margin:10px 20px 0 0; }
#language li { float:left; list-style-type:none; margin:0 5px; }
#language li a { color:#666; padding:0; }
#language li a:hover { text-decoration:none; color:#999; }
#language li a.selected { color:#999; }


#navigation { font-size:1.4em; float:right; margin:15px 20px 0 0; clear:right; }
#navigation li {
	float:left;
	list-style-type:none;
	margin:0 4px;
	height: 57px;
	*top: 40px;

}
#navigation li a { height: 57px; color:#aaa; padding:10px 15px 35px 15px; background: url(../images/page/navigation-a-background.jpg) repeat-x top; display:block;}
#navigation li a:hover { height: 57px; text-decoration:none; color:#fff; background: url(../images/page/navigation-a-background-hover.jpg) repeat-x top; }
#navigation li a.selected { height: 57px; color:#ddd; background: url(../images/page/navigation-a-background-hover.jpg) repeat-x top; }




/*
__________________

#content specifics
__________________

*/

#portfolio-container { background: url(/images/page/content-background-portfolio.jpg) repeat-x top; clear:left;}

.tabs-container { clear:both; height:27px; background: url(/images/page/portfolio-navigation-background.jpg) repeat-x bottom; }
.tabs {  text-align:center; display:block; margin:0 auto; list-style:none;  width:494px; }
.tabs li { margin:0px 1px; width:162px; padding:4px 0px 9px 0px; float:left; background: url(/images/page/portfolio-tab.png) repeat-x top; }
.tabs li.selected { background: url(/images/page/portfolio-tab-active.png) repeat-x top;  }

.tabs a:link,.tabs a:visited { color:#787c81; text-decoration:none; }
.tabs li.selected a:link,.tabs li.selected a:visited {  color:#c7cbcd; font-weight:bold;text-decoration:none; }
.tabs a:active,.tabs a:focus, .tabs a:hover { color:#c7cbcd; font-weight:bold; text-decoration:none; }

.corner { float:right; background: url(/images/page/pf-corner.png) no-repeat top right; width:24px; height:33px; margin-top:-17px; line-height:0;}

#scrollcontainer { margin: 0px auto; width:680px;  }
#scrollbox { text-align:center; height:130px; width:542px; z-index:-1 ; overflow: hidden; float:left; background: url(/images/tab/middle.png) repeat-x top center;}

#portfolio { list-style:none; padding:15px; padding-left:5px;  }
#portfolio li { margin:0px 7px; float:left; width:75px;}
#portfolio li img { display:block; margin-bottom:2px; width:75px;height:75px; }

.arrowleft { float:left; margin:0; height: 124px; }
.arrowright { float:left; margin:0; height: 124px; }

.col1, .col2, .col3 { width:230px; float:left; margin:0; padding:35px 35px 0 35px; border-left:5px solid #2e3338; }

.col1w { width:480px; float:left; margin:0; padding:35px 35px 0 35px; border-left:1px solid #2e3338; }
.col2w { width:480px; float:left; margin:0; padding:35px 35px 0 35px; border-left:1px solid #2e3338; }

/*  ugly hack need to improved this */
.col2wtop { width:480px; float:left; margin:0; padding:5px 35px 0 35px; border-left:1px solid #2e3338; }


.col1h  { width:80%; float:left; margin:0 3%; padding:20px 0 0 0; margin-left: 20px;  }

.col1ew { width:670px; float:left; margin:0; padding:35px 35px 0 35px; border-left:1px solid #2e3338; }
.col1ew-small { width:160px; padding:35px 0 0 0; float:left; }


.col1m  { width:89%; float:left; margin:0 2%; padding:35px 0 0 0; }

.no-top-padding { padding-top:0; }

.extra-right-padding p { padding-right:55px; text-align: justify; }


.link { width:110px; float:left; }



/*
__________________

#index specifics
__________________

*/

p.contactinfo span {
	display:block;
	width:40px;
	float:left;
}

div.mainnewsitem {
	color:#ddd; background: url(../images/page/news_transparant.png) repeat-x top;
	position:relative;
	top:116px;
	left:700px;
	width:218px;
	height:200px;
	color:black;
}

div.mainnewsiteminner {
  padding:10px 15px 0 15px;
}

div.mainnewsitem p { color:#24282b; margin:0; padding:0; margin-bottom:5px;}
div.mainnewsitem p.title { font-size:120%; font-weight:bold; margin-bottom:10px;}
div.mainnewsitem p.subtitle { margin-top:15px; margin:0; padding:0; margin-top:15px; font-size:110%; color:#575757;}

/*
____________________

#portfolio specifics
____________________

*/

.project { margin:25px 0; border-bottom:1px solid #444; padding:5px 0 25px 0; }

span.year { font-size:0.8em; color:#777; }
span.tags { font-size:1.3em; color:#839f37; }


a.visit { background-color:#839f37; color:black; padding:2px 10px; }
a.visit:hover { background-color:#accf4d; }

img.screen { background-color: #eee; padding:5px; margin:3px 0 0 0; }

ul.listing { list-style: none; margin-left:10px; margin-bottom: 20px; }
ul.listing li { font-size:110%; line-height:1.5em; color:#839f37; }
ul.listing li a, ul.listing li a:visited { color:#c0c2c3; }
ul.listing li a.selected { font-weight:bold; color:white; }

div.imagecontainer {
  margin-top:10px;
	height:165px;
}

.slideshowlinks {
	float:right;
}


.slideshowlinks a {
	display:block;
	float:left;;
	width:10px;
	padding:2px;
	margin-top:0px;
	color:#777;
	font-family: 'Trebuchet MS',Verdana, Arial, Helvetica, sans-serif; font-size:1.3em; text-transform:uppercase; font-weight:bold;
}

.projecttitle { float:left; }

/*
__________________

#contact specifics
__________________

*/

input { color: #FFF; border:1px solid #839f37; background-color:#2e3337; margin:0; }
textarea { color: #FFF; border:1px solid #839f37; background-color:#2e3337; }
label { display:block; margin:0; padding:0; }

.error-contactus { float:right; padding-right:65px; color:red; }

#map { width:850px; height: 250px; margin-bottom:15px; }

/*
___________________

#services specifics
___________________

*/

body.services #content .spacer { margin-bottom:50px; }
body.services #content ul { margin:0px 0 5px 0px; background: url(/images/page/ul-background.jpg) repeat-x bottom center; min-height:120px;padding:20px; padding-top:0px; list-style-type:none; }
body.services #content li { border-bottom:1px dashed #666; padding:8px 0 8px 15px; background: url(/images/page/li-bullet.gif) no-repeat left center; }

div.servicedescription { height:80px;}
a.more { background-color:#2c2d2f; display:block; padding:8px 8px; font-size:1.4em; }


/*
________________

#about specifics
________________

*/

.employee { border:1px solid #444; width:40%; float:left; margin:0 55px 15px 10px; padding:1%; background: url(/images/page/ul-background.jpg) repeat-x bottom center; }
.team { float:left; margin-right:10px; border: 1px solid #000;}
.qualification { padding-top:6px; }


/*
________________

#login specifics
________________

*/

.login {min-height:300px;}
.login img {border:4px solid white;float:right;}


/*
________________

#blog specifics
________________

*/

.post {
  background-image:url(../images/page/bg_blog.png);
  background-repeat:repeat-x;
  padding:20px;
}

.post h2 {
  background-image:none;
}


.leavecomment { font-family: 'Trebuchet MS',Verdana, Arial, Helvetica, sans-serif; font-size:1.8em; font-weight:normal; text-transform:uppercase; background: url(/images/icons/comment_add.png) no-repeat 0px 10px; padding-left:20px; padding-top:5px; }

.postdate {
  background-image:url(../images/icons/calendar-blog.gif);
  background-repeat:no-repeat;
  width:32px;
  height:45px;
  float:left;
  color:#333333;
  text-align:center;
  margin-right:5px;
}

.postmonth {
  margin-top:9px;
}

.postday {
  margin:-5px;;
  font-weight:bold;
  font-size:20px;
}

.usericon {
  margin-right:5px;}

.caticon {
	padding-top:5px;
  margin-right:5px;
	}
	
.blogcategory{
	background-image:url(../images/icons/cat_dbicon.png);
	background-repeat:no-repeat;
	padding-left:19px;
	padding-bottom:5px;

}

.arrowicon {
  margin-right:5px;
}

.rss {
	display:block;
	height:16px;
  background-image:url(../images/icons/feed.png);
  background-repeat:no-repeat;
  width:117px;
  margin-left:15px;
  list-style:none;
  padding-top:0px;
  padding-left:22px;
}

.rss a{
color:#c0c2c3;
}

div.post .content {
  margin: 15px 0 25px 0;
  font-size: 1.2em;
}

#blog_comment {
  width: 600px;
  float: left;
  margin:10px 0 10px 0;
	padding:25px 15px 0 35px;
	
}

.comment {
  background-color:#131718;
	border-top:1px solid #000000;
	border-bottom:1px solid #000000;
  padding:10px;
	padding-bottom:20px;
}

.comment .details{
	color:#666666;
	font-size:9px;
	margin-bottom:10px;
}

.deletecomment{
	display:block;
	background-image:url(../images/icons/comment_delete.png);
	background-repeat:no-repeat;
	width:50px;
	height:16px;
	padding-left:18px;
}


.commentcount{
float:right;
background-color:#3d4449;
border:3px solid #2e3337;
color:#9a9b9b;
padding:2px;}


BLOCKQUOTE {
font-family:"Times New Roman", Times, serif;

display: block;

padding: 0 60px;
width: 450px;
margin-bottom:20px;
}

blockquote:before, blockquote:after {
color: #69c;
display: block;
font-size: 700%;
width: 50px;
}

blockquote:before {
content: open-quote;
height:50px;
margin-left: -0.55em;
margin-top: -30px;



}

blockquote:after {
content: close-quote;
height: 50px;
margin-top: -50px;
margin-left: 460px;
}



.form_control { margin: 5px 0 5px 0; }

div.comment { margin-bottom: 4px;  }

div.comment .body { font-size: 1.2em; }

.blogimg{
background-color:#4b525a;
padding:10px;}


/*
________________

#timetrack specifics
________________

*/

div.percentageBar {  border: solid 1px #3F3A78; background: #3F5F78; font-style: italic; padding: 2px 0px 2px 2px; margin: 2px 0px 5px 0px; font-size: 90%; }
div.percentageBarTitle {  color: black; font-weight: bold; font-size: 105%; margin-top: 5px;}
div.statBox { background: darkgray; padding: 5px 25px 5px 15px; margin: 10px 60px 10px 25px; }
.warning { color: red; font-size: 150%; font-weight: bold; }
.edited { color: #9a5d38; font-size: 160%; font-weight: bold; float: right; }
.edited a { font-weight: normal; <!--color: #9a5d38;--> }


/*
________________

#subfooter specifics
________________

*/


#subfooter{
width:945px;
margin:25px auto;
background-image:url(/images/page/bg_subfooter.png);
background-repeat:no-repeat;
padding:10px 0 0 0;
overflow:auto;
}



#latestposts{
margin-bottom:10px;
margin-left:30px;
width:600px;
float:left;


}

.subrss{
float:right;
margin-top:-45px;

}

.rssicon{
margin-top:22px;
margin-left:5px;}

.latestblogpost{
border-top:1px #CCCCCC dashed;
display:block;
padding-top:10px;
padding-bottom:10px;
margin-top:10px;

}


.latestblogtitle{
color:#689f34;
}

.latestblogdate{
color:#757677;
}


#subcontact{
float:right;
margin-right:80px;
display:block;

}

.subcontactadres{
border-top:1px #CCCCCC dashed;
padding-top:10px;
display:block;
margin-top:10px;
}


.postdatesub{
background-image:url(../images/icons/calendar-blog.gif);
background-repeat:no-repeat;
width:32px;
height:45px;
float:left;
color:#333333;
text-align:center;
margin-right:5px;


}

.postmonthsub{
margin-top:9px;}

.postdaysub{
margin:-5px;;

font-size:20px;}

.latestcontent{
margin-left:40px;}

.h {position: absolute; top: -1000px; left: -1000px;}


ul {
	list-style: disc;
        margin-top: 10px;
	margin-left: 15px;
	padding-left: 20px;
	text-indent: 0px;
	}
/* End of 'gergaoil' */

/* Start of CMSMS style sheet 'Navigation: CSSMenu - Horizontal' */
/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */

#menu_vert {
   margin-left: 1px;
   margin-right: 1px;
}

/* The wrapper clears the floating elements of the menu */

/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper { 
   /* Fix for Opera 8 */ 
   /*   overflow: hidden;  */ 
   float:right;
   margin-top: 20px;
   background-color: #1F282D;
   border-bottom: 0px solid #C0C0C0;
   width: 638px;
}

/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li { 
   width: 250px; 
}


/* Unless you know what you do, do not touch this */ 
#primary-nav, #primary-nav ul { 
   list-style: none; 
   margin: 0px; 
   padding: 0px; 
}
#primary-nav ul { 
   position: absolute; 
   top: auto; 
   display: none;
}
#primary-nav ul ul { 
   margin-top: 1px;
   margin-left: -1px;
   left: 100%; 
   top: 0px; 
}
	
#primary-nav li { 
   margin-left: -1px;
   float: left; 
}
#primary-nav li li { 
   margin-left: 0px;
   margin-top: -1px;
   float: none; 
   position: relative; 
}

/* Styling the basic apperance of the menu elements */
#primary-nav a { 
   display: block; 
   font-size: 11px;
   margin: 0px; 
   padding: 5px 10px; 
   text-decoration: none; 
   color: #cccccc;
}
#primary-nav li a { 
   border-right: 0px solid #C0C0C0;
   border-left: 0px solid #C0C0C0;
}
#primary-nav li li a { 
   background-image: url(images/gradient-tall.gif); 
   border: 1px solid #C0C0C0;
}	

#primary-nav li li a:hover { 
   background-image: url(images/gradienthover.gif);
   border: 1px solid #C0C0C0;
}	

#primary-nav li, #primary-nav li.menuparent { 
   font-family: Arial, Helvetica, sans-serif; 
   font-weight:bold;
   background-image: url(images/gradient-tall.gif); 
}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive { 
   font-color: #97C93C;
   text-decoration: none;
   background-image: url(images/gradienthover.gif);
   /* background-color: #4967B1;  */
}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent, 
#primary-nav ul li.menuparent:hover, 
#primary-nav ul li.menuparenth { 
/* arrow for menuparents */
   background-image: url(images/cms/arrow.gif); 
   background-position: center right; 
   background-repeat: no-repeat; 
}


/* Styling the apperance of menu items on hover */

#primary-nav li:hover, 
#primary-nav li.menuh, 
#primary-nav li.menuparenth, 
#primary-nav li.menuactiveh { 
   font-color: #97C93C;
   text-decoration: none;
   background-image: url(images/gradienthover.gif);
   /* background-color: #4967B1; */
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

/* 
just add 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul ul ul,
for fourth level 
*/
#primary-nav ul, 
#primary-nav li:hover ul, 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul, 
#primary-nav li.menuparenth ul ul { 
   display: none; 
}

/* add 
#primary-nav ul ul ul li:hover ul, 
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul, 
#primary-nav ul li:hover ul, 
#primary-nav ul ul li:hover ul, 
#primary-nav li.menuparenth ul, 
#primary-nav ul li.menuparenth ul, 
#primary-nav ul ul li.menuparenth ul { 
   display: block; 
}


/* IE Hacks */
#primary-nav li li { 
   float: left; 
   clear: both; 
}
#primary-nav li li a { 
   height: 1%; 
}
/* End of 'Navigation: CSSMenu - Horizontal' */