/******************************
* INF 2005
******************************/
/******************************
* WORK-AROUNDS AND FIXES
******************************/
/* Master Reset Trick */
*{
margin:0;
padding:0;
}
/* Fixes Italics bug in IE Win. Hides from IE5 Mac */
/* \*/
* html #sidebar { margin-left: -4px; }
/* */
/******************************
* END FIXES
******************************/
/******************************
* THE BODY
******************************/
body{
background-image: url(../beelden/2005/bg.jpg);
background-repeat:repeat-x;
background-position:top;
background-color:#FFFFFF;
margin:9px 0px 0px 0px;
padding:0;
text-align:center;
font-family:Arial,Verdana,Helvetica,sans-serif;
font-size:100%;
}
/******************************
* DE BODYLINKS
******************************/
a:link{
color:#7D8556;
background-color:transparent;
text-decoration:underline;
font-weight:normal;
}
a:visited{
color:#455C6D;
background-color:transparent;
text-decoration:underline;
font-weight:normal;
}
a:hover{
color:#AEA74D;
text-decoration:none;
font-weight:normal;
}
a:active{
color:#545454;
background-color:transparent;
font-weight:normal;
}
/******************************
* THE TOP PRIMARY NAVIGATION
gebasseerd op CSS Sprites, www.alistapart.com/articles/sprites.
******************************/
div#primarynav{
height:43px;
width:763px;
margin:0 0 0 0px;
padding:0;
border:0;
background:transparent;
float:left;
}
div#primarynav ul#menu{
height:43px;
width:763px;
background:transparent url(../beelden/2005/navbar-kobe.jpg) top left no-repeat;
margin:0;
padding:0;
position:relative;
}
div#primarynav ul#menu li{
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0;
}
ul#menu li,ul#menu a{
height:43px;
display:block;
}
div#primarynav ul#menu li a{
text-indent:-9999px;
text-decoration:none;
}
#intro{
left:0;
width:128px;
}
#services{
left:128px;
width:127px;
}
#portfolio{
left:255px;
width:127px;
}
#praktisch{
left:382px;
width:127px;
}
#approach{
left:509px;
width:127px;
}
#contact{
left:636px;
width:127px;
}
/* start of buttons */
/* The 'on' states follow */
#intro a:hover,body#homeOn #intro{
background:transparent url(../beelden/2005/navbar-kobe.jpg) 0 -43px no-repeat;
}
#services a:hover,body#programmaOn #services{
background:transparent url(../beelden/2005/navbar-kobe.jpg) -128px -43px no-repeat;
}
#portfolio a:hover,body#boekOn #portfolio{
background:transparent url(../beelden/2005/navbar-kobe.jpg) -255px -43px no-repeat;
}
#praktisch a:hover,body#praktischOn #praktisch{
background:transparent url(../beelden/2005/navbar-kobe.jpg) -382px -43px no-repeat;
}
#approach a:hover,body#contactOn #approach{
background:transparent url(../beelden/2005/navbar-kobe.jpg) -509px -43px no-repeat;
}
#contact a:hover,body#bvnfOn #contact{
background:transparent url(../beelden/2005/navbar-kobe.jpg) -636px -43px no-repeat;
}
/******************************
* THE FONT CONTROL AND LOGIN NAVIGATION
******************************/
div#subnav{
height:30px;
width:320px;
margin:0 0 0 0px;
padding:0;
border:0;
background:transparent;
float:left;
}
div#subnav ul#menu2{
height:30px;
width:320px;
background:transparent url(../beelden/2005/fontsize.jpg) top left no-repeat;
margin:0;
padding:0;
position:relative;
}
div#subnav ul#menu2 li{
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0;
}
ul#menu2 li,ul#menu2 a{
height:30px;
display:block;
}
div#subnav ul#menu2 li a{
text-indent:-9999px;
text-decoration:none;
}
#leftsmall{
left:0;
width:51px;
}
#leftlarge{
left:51px;
width:36px;
}
#justsmall{
left:87px;
width:46px;
}
#justlarge{
left:133px;
width:36px;
}
#html{
left:169px;
width:71px;
}
#css{
left:240px;
width:80px;
}
/* start of buttons */
/* The 'on' states follow */
#leftsmall a:hover{
background:transparent url(../beelden/2005/fontsize.jpg) 0 -30px no-repeat;
}
#leftlarge a:hover{
background:transparent url(../beelden/2005/fontsize.jpg) -51px -30px no-repeat;
}
#justsmall a:hover{
background:transparent url(../beelden/2005/fontsize.jpg) -87px -30px no-repeat;
}
#justlarge a:hover{
background:transparent url(../beelden/2005/fontsize.jpg) -133px -30px no-repeat;
}
#html a:hover{
background:transparent url(../beelden/2005/fontsize.jpg) -169px -30px no-repeat;
}
#css a:hover{
background:transparent url(../beelden/2005/fontsize.jpg) -240px -30px no-repeat;
}
/******************************
* THE SITE STRUCTURE
******************************/
#container{
width:763px;
\width:765px; /* For IE5 Win */
w\idth:763px;
margin-left:auto;
margin-right:auto;
padding:0;
background:#FFFFFF;
border-top:1px solid #EBEBEB;
border-right:1px solid #FFFFFF;
border-left:1px solid #FFFFFF;
}
#header-home{
height:87px;
padding-top:70px;
margin:0;
background-color:#FFFFFF;
background-repeat:no-repeat;
}

#header-home{
background-image: url(../beelden/2005/header-bernard.jpg);
}

#navcontainer{
padding:0px;
background:#575757;
height:43px;
clear:right;  /* Required for everything except IE Win. */
}
#content{
float:left;
width:441px;
background-image: url(../beelden/2005/contentbg.jpg);
background-repeat:repeat-x;
background-color:#FFFFFF;
padding:0;
}
#sidebar{
float:right;
width:321px;
margin:0;
padding:0;
background-color:#FFFFFF;
margin-bottom: 10px;
}
/* This is for the font control box */
#clientbox{
margin:0 0 2px 0px;
padding:0;
background-color:#FFFFFF;
background-image: url(../beelden/2005/content-bg.jpg);
background-repeat:repeat-x;
height:30px;
}
#footer{
clear:both;
padding:1px;/* required for ie5.5, it appears! */
height:30px;
background-color:#FFFFFF;
margin:10px 0 10px 60px;
padding: 10px 0 0 0;
color:#7C7C7C;
font-size:70%;
text-align:left;
line-height:100%;
border-top:1px solid #DFDFDF;
}
/* A change of look for the footer links */
#footer a:link{
text-decoration: none;
border-bottom: 1px dotted #A4B161;
}
#footer a:hover{
text-decoration: none;
border-bottom: 1px solid #757F41;
}
/******************************
* THE LOGO IMAGE REPLACEMENT THINGY :)
******************************/
#logo{
display:block;
height:84px;
width:270px;
padding:1px;
margin:0;
background-image: url(../beelden/2005/logo.gif);
background-repeat:no-repeat;
float:right;
}
/******************************
* THE HEADER FONTS
******************************/
h1,h2,h3,h4,h6{
font-weight:bold;
font-family: arial,verdana,helvetica,sans-serif;
}
h1{
margin:0;
font-size:160%;
color:#4F5759;
}

.green {
color:#7D8556;
}

h2{
margin:10px 20px 8px 60px;
padding-top:10px;
color:#535B5D;
font-size:115%;
font-family:arial,verdana,helvetica,sans-serif;
text-align:left;
}
#sidebar h2{
margin:0px 30px 13px 30px;
}
h3{
margin:0 20px 0 60px;
color:#535B5D;
padding-top:20px;
padding-bottom:5px;
font-size:85%;
text-transform:uppercase;
text-align:left;
}
h6{
margin:0 20px 0 0px;
color:#535B5D;
padding-top:20px;
padding-bottom:5px;
font-size:120%;
text-transform:uppercase;
text-align:left;
}

/* Clear left creates space in FF */
#sidebar h3{
margin:0 0 0 25px;
padding-top:5px;
clear: left;
}
h4{
margin:0 20px 0 60px;
color:#7D8556;
padding:0 0 0 0;
font-size:85%;
text-align:left;
}
#sidebar h4{
margin:0 0 0 25px;
padding-top:5px;
clear: left;
}
.h2{
margin:0 20px 8px 60px;
}
.h3{
margin:0 20px 0 66px;
}
/******************************
* THE TEXT
******************************/
p{
margin:2px 24px 10px 60px;
line-height:140%;
color:#515151;
font-size:80%;
text-align:left;
text-indent: 1em;
}
em{
color:#7D8556;
text-decoration:none;
font-weight:normal;
font-style: normal;
}
.em{
font-style: italic;
margin:2px 40px 10px 60px;
text-indent: 0em;
}
.first{text-indent: 0em;
}

#sidebar p{
margin:4px 20px 10px 25px;
line-height:140%;
color:#545454;
font-size:75%;
text-align:left;
}
#sidebar .smallfont{
margin:0px 0px 5px 16px;
font-size:70%;
color:#515151;
text-align:left;
font-family:  Arial, Helvetica, sans-serif;
text-indent:0em;
}
 .smallfont, .smallfont2{
margin:0 0 5px 60px;
font-size:70%;
color:#858585;
text-align:left;
font-family:  Arial, Helvetica, sans-serif;
text-indent:0em;
}
 .smallfont2{
 margin:12px 0 0 60px;
  }
.projectfont{
margin:0px 40px 0 28px;
padding:0;
color:#696969;
font-size:70%;
text-align:left;
text-indent:0em;
}
.urlfont{
margin:0px 40px 10px 60px;
color:#696969;
font-size:70%;
text-align:left;
text-indent:0em;
}
.sublinks{
margin:0 20px 2px 70px;
padding-bottom:5px;
padding-top:10px;
color:#696969;
font-size:70%;
text-align: center;
text-indent:0em;
}
/* em bold fonts */
em.bold{
font-weight:bold;
color:#3E4446;
font-style: normal;
}
.screenswap{
margin:3px 40px 10px 65px;
color:#333;
font-size:75%;
text-align:left;
text-indent:0em;
font-style: italic;
}
.code {font-family: Courier, 'Courier New', sans-serif;
 color: #6E9126;
 font-weight: bold;
 }

/******************************
* THE BLOCKQUOTE
******************************/
blockquote p{
color:#3E4446;
font-size:75%;
font-style: italic;
text-align: right;
line-height:145%;
margin:0px 0px 0px 28px;
padding:0px;
text-indent: 0em;
}
/******************************
* OLD BROWSER WARNING
******************************/
span.hidden,.hide,div.hr  hr,div.hr2 hr{
display:none;
}
/******************************
* FIXED IMAGE BORDERS AND ROLLOVER BORDERS
******************************/
.imageborder,.imageborder2,.imageborder3,.imageborder4{
border:1px solid #E9E9E9;
background-color:#FFFFFF;
margin-top: 0px;
}
.imageborder{
padding:2px;
margin:20px 0px 0px 30px;
}
.imageborder2{
padding:14px;
margin:5px 0 0 0;
background-image:  url(../beelden/2005/header-bg.jpg);
background-repeat: repeat-x;
}
.imageborder3{
padding:14px;
margin-top: 5px;
}
.imageborder4{
padding:12px;
margin:15px 0px 0px 30px;
}
.featuredthumb  img{
border:1px solid #E3E3E3;
background-color: #FBFBFB;
padding:14px;
margin: 5px 0 2px 0;
}
.featuredthumb a:hover img{
border:1px solid #A3B060;
background-color: #FFFFFF;
}
.services img{
border:1px solid #E3E3E3;
background-color: #FFFFFF;
background-image:  url(../beelden/2005/header-bg.jpg);
background-repeat: repeat-x;
padding:14px;
margin-top: 5px;
}
.services a:hover img{
border:1px solid #A3B060;
background-color: #FFFFFF;
}
/* Hyperlink Arrows and New win */
.imglink{background:  url(../beelden/2005/g_arrow.gif) no-repeat center right; padding-right: 15px;}
.imglink2{background: url(../beelden/examples/newin.gif) no-repeat center right; padding-right: 18px;}
.imglink3{background: url(../beelden/examples/microdisc.gif) no-repeat center right; padding-right: 16px;}
.imgleft{float: left;}
/* Turns off gaps around images */
img{border:0;}
/* acronym and help */
.abbr{
color:#888C80;
border-bottom:1px dotted #000000;
cursor:help;
text-transform: uppercase; 
}
/******************************
* THE VARIOUS FORMS
******************************/
.fieldset{
margin:0px;
padding:5px 0 0 16px;
border:0;
text-align:left;
font-size:75%;
font-weight:bold;
color:#505050;
}
.fieldset2{
margin:0px;
padding:5px 0 0 60px;
border:0;
text-align:left;
font-size:75%;
font-weight:bold;
color:#505050;
}
.legend{
color:#414141;
background:transparent;
margin-top:0px;
}
.input{
background:transparent;
width:280px;
border:1px #CACACA solid;
color:#6A6A6A;
font-size:11px;
padding:2px;
background-image:  url(../beelden/2005/form-bg.jpg);
background-repeat: repeat-x;
}
.input-subscribe{
background:transparent;
width:230px;
border:1px #CACACA solid;
color:#6A6A6A;
font-size:10px;
padding:2px;
background-image:  url(../beelden/2005/form-bg.jpg);
background-repeat: repeat-x;
}
.input-domain{
background:transparent;
width:155px;
border:1px #CACACA solid;
color:#6A6A6A;
font-size:11px;
padding:2px;
background-image:  url(../beelden/2005/form-bg.jpg);
background-repeat: repeat-x;
}
.button, .button2{
background:#FFFFFF;
color:#282828;
border: 1px solid #B0B0B0;
font-size:11px;
padding:1px;
margin:0;
}
.button2{
margin: 5px 0 5px 0;
}
input:hover.button
{
color: #ffffff;
background-color: #A4B161;
}
.textarea-quote 	{
font-family: arial,verdana,Georgia,sans-serif; 
font-size: 9pt; 
color: #5B5B5B;
height: 127px; 
width: 282px; 
background:#FFFFFF;
border:1px #CACACA solid;
background-image:  url(../beelden/2005/form-bg.jpg);
background-repeat: repeat-x;
}
/* Removes vert whitespace from form */
form{
margin-top:0;
margin-bottom:0;
}
.domain{
text-align:left;
margin:0px;
padding:0 0 5px 35px;
}
/******************************
* THE LISTS
******************************/
/* list style with bullets... I'm sure there's a better way to do this! */
ul{
list-style:none;
margin-top:3px;
padding:0 5px 10px 60px;
}
.item{
background:url(../beelden/examples/whitearrow.gif) no-repeat 0 4px;
padding:0 5px 0 20px;
text-align:left;
font-size:80%;
line-height:150%;
color:#3E4446;
}
#sidebar ul{
list-style:none;
margin-top:3px;
padding:0 5px 10px 25px;
}
#sidebar .item{
background:url(../beelden/examples/whitearrow.gif) no-repeat 0 4px;
padding:0 5px 0 20px;
text-align:left;
font-size:75%;
line-height:150%;
color:#3E4446;
}
/******************************
* THE TESTIMONIALS
******************************/
.quote dt
{
background:url(../beelden/examples/comment.gif) no-repeat 0 4px;
padding:0 35px 0 20px;
font-size:80%;
text-decoration: none;
color:#565656;
line-height:150%;
text-align: left;
margin:0px 40px 5px 60px;
font-weight: bold;
}
.quote dd
{
font-size:80%;
text-decoration: none;
color:#565656;
line-height:150%;
margin:0px 40px 15px 60px;
padding: 0 0 0 0px;
text-align:left;
}
/******************************
* FEATURED SCREENS
******************************/
.featurebox{
border:1px solid #EDEDED;
margin:10px 17px 0 17px;
padding:0;
}
#sidebar .feature dt
{
background-image: none;
font-size:75%;
text-decoration: none;
color:#565656;
line-height:120%;
text-align: left;
margin:5px 5px 5px 10px;
font-weight: bold;
}
#sidebar .feature dd
{
border-top: 1px solid #EDEDED;
font-size:75%;
text-decoration: none;
color:#565656;
margin:0px 0px 0px 0px;
padding:3px 0px 3px 10px;
text-align:left;
}
/******************************
* THE KEY PHASES LIST
******************************/
 #sidebar .navlist{ 
margin:0px 10px 5px 0px;
padding:5px 10px 5px 28px;
}
#sidebar .item2{
background:url(../beelden/examples/whitearrow.gif) no-repeat 0 3px;
padding:0 5px 0 20px;
text-align:left;
font-size:75%;
line-height:140%;
color:#565656;
}
/******************************
* OUR OFFICE ADDRESS
******************************/
address{
margin:0px 35px 10px 60px;
line-height:145%;
font-size:75%;
font-style: normal;
text-align: left;
color:#404040;
}
address span{
display:block
}
/******************************
* THE GALLERY
******************************/
.clientgallery	{
list-style-type: none;
padding:0px;
margin: 10px;
}
.clientgallery li	{
float: left;
display: inline;
padding: 0px;
width:65px; /* Size of image */
height: 65px; /* Size of image */
}
.clientgallery li a	{
text-decoration: none;
color: #A5A5A5;
}
#sidebar .clientgallery li  p{
padding: 0;
margin:0;
color: #999;
font-size: 75%;
text-indent: 0em;
}
.clientgallery li img	{
border: 1px solid #DCDCDC;
padding: 4px;
background: transparent;
}
.clientgallery li a:hover img{
 border: 1px solid #A4B161;
}
/* The Gallery Container */
.clients{ 
width: 280px;
padding: 0;
margin-left: auto;
margin-right: auto;
}
/******************************
* HR IMAGE + SPACER
******************************/
div.line hr{ /* Takes out the  HR */
display:none; 
}
div.line { /* DIV that wraps and replaces the HR */
background: transparent url(../beelden/2005/hr12.gif) no-repeat;
margin-left: 80px;
height: 25px;
}
#sidebar div.line { /* HR version 2 */
background: transparent url(../beelden/examples/hr.gif) no-repeat;
margin-left: 20px;
height: 27px;
}
/* Spacer required for FF. */
#spacer{	clear: left;
}
/******************************
* SKIP NAV
******************************/
.skip {position:absolute; left:-200em; width:19em}
/* That's all folks!  */
/******************************
* DELETED TEXT
******************************/
del {
  text-decoration:line-through;
}