/*
robinnijhof.nl CSS 
----------------------------------------------------------- */

@import url("face.css");

/* Algemeen 
----------------------------------------------------------- */

* 		{margin: 0; padding:0;}
body 	{background: #fff;	font-size: 12px; font-family: arial, helvetica, sans-serif;	color: #333; text-align: center;}

a 		{color: #0066cc; text-decoration: none;}
a:hover {text-decoration: underline;}

img 	{border: 0;}

.floatright {float: right; display: inline; }
.floatleft 	{float: left; display: inline;}
.alignright {text-align: right;}
.hide 		{display:none;}

h1 {font: bold 12px Arial, Helvetica, sans-serif; margin: 0 0 5px 0;}
h2 {font: bold 11px Arial, Helvetica, sans-serif; color:#0066cc; margin:10px 0 0 0;}

div#roconlang h2 	{background: url(../_images/bullet.gif) no-repeat; background-position:left; padding-left: 20px;}
div#lmcon h3 		{background: url(../_images/contact.gif) no-repeat; background-position:left; font: bold 9px Verdana, Arial, Helvetica, sans-serif;	padding-left: 20px;}
div#lmcon h4 		{background: url(../_images/telefoon3.gif) no-repeat; background-position:left;	font: bold 9px Verdana, Arial, Helvetica, sans-serif; padding-left: 20px; height:16px;}

.blue {color:Blue;}
.dl		{color:#CC0000;}
.pad2	{padding-top: 1px;}

	
/* Container DIV's
----------------------------------------------------------- */	
#container {width: 760px; background: #FFF;	border: 0px solid #0066cc; padding: 0 0px; text-align: left; margin: 0 auto;}
#page {background: #FFF url(../_images/bbackground.jpg) no-repeat; background-position: top right; height: 760px; padding-top: 5px;}

/* Header
----------------------------------------------------------- */
#header {position: relative; width:715px; height:19px; border-top:7px solid #FFF; border-left:8px solid #FFF;}
#header div {border-top: 0px solid #FFF;}
	
/* Navigatie
----------------------------------------------------------- 
ul#navigatie 	{list-style: none; position: absolute;	right: 0px;	left: 0px;	border-left: 1px solid #FFF;border-right: 0px solid #FFF;}
ul#navigatie li {float: left;display: inline; border-right: 0px solid #FFF; border-bottom: 2px solid #0066cc; background: none;	padding: 0;}

ul#navigatie li a {width:125px; height:19px; display:block;	color:#FFF; background:#0066cc; font-weight:bold; padding:20px 0 0 15px; line-height:1em; text-decoration: none;}
ul#navigatie li a:hover 		{color:#FFF; background:#000000;}

#nav1 ul#navigatie li#navlink1 a,
#nav2 ul#navigatie li#navlink2 a,
#nav3 ul#navigatie li#navlink3 a,
#nav4 ul#navigatie li#navlink4 a  {color:#000000;	font: bold 15px Arial, Helvetica, sans-serif; background:#FFF;	border-top:1px solid #FFF; position:relative; top:-1px; padding-top:25px;}*/


/* Navigatie */
----------------------------------------------------------- 
ul#navigatie 	{list-style: none; position: absolute;	right: 0px;	left: 0px;	border-left: 1px solid #FFF;border-right: 0px solid #FFF;}
ul#navigatie li {float: left;display: inline; border-right: 0px solid #FFF; background: none;	padding: 0;}

ul#navigatie li a {width:125px; height:19px; display:block;	color:#000000; border-bottom: 3px solid #cccccc; color:#cccccc; font-weight:bold; padding:20px 0 0 15px; line-height:1em; text-decoration: none;}
ul#navigatie li a:hover 		{border-bottom: 3px solid #000000; color:#000000; background:#CCCCCC;}

#nav1 ul#navigatie li#navlink1 a,
#nav2 ul#navigatie li#navlink2 a,
#nav3 ul#navigatie li#navlink3 a,
#nav4 ul#navigatie li#navlink4 a  {border-bottom: 3px solid #000000; color:#000000;}

#nav1 ul#navigatie li#navlink1 a:hover,
#nav2 ul#navigatie li#navlink2 a:hover,
#nav3 ul#navigatie li#navlink3 a:hover,
#nav4 ul#navigatie li#navlink4 a:hover  {border-bottom: 3px solid #000000; color:#000000;}

/* Verdeling vlakken
-------------------------------------------------------------------- */

#lbcon		{margin-top: 5px; margin-left: 10px; width: 275px; height: 85px; border: #CCCCCC solid 1px; padding: 5px; background-color: #f6f6f6;}
#lbconoff	{visibility:hidden; margin-top: 40px; margin-left: 10px; width: 305px; height: 41px; border: #CCCCCC solid 1px; padding: 5px; background-color: #f6f6f6;}
#lmcon 		{position:relative; top:170px; left:200px; width: 137px; height: 232px;}

#card 		{position:relative; top:270px; left:200px; width: 137px; height: 232px;}
#portfolio 	{position:relative; top:75px; left:-5px; width:200px; height: 200px; margin: 10px 0px 0px 10px;	padding: 5px;}

#rocon	{float:right; display: inline; width: 300px; margin: 212px 50px 10px 0; border: #CCCCCC solid 1px; padding: 5px 5px 5px 5px; background-color: #f6f6f6;}
#roconlang	{float:right; display: inline; width: 300px; margin: 12px 50px 10px 0; border: #CCCCCC solid 1px; padding: 5px 5px 5px 5px; background-color: #f6f6f6;}
#rocontact	{float:right; display: inline; width: 300px; margin: 12px 50px 10px 0; border: #CCCCCC solid 1px; padding: 5px 5px 5px 5px; background-color: #f6f6f6;}
#roconoff	{visibility:hidden; float:right; display: inline; width: 300px; height: 280px; margin: 212px 50px 0 0; border: #CCCCCC solid 1px; padding: 5px; background-color: #f6f6f6;}
#loconlogin { width: 370px; height: 90px; margin: 170px 0px 0px 10px; border: #0066cc solid 0px; padding: 5px;}
#loconpf {width: 200px;	height: 143px; margin: 65px 0px 0px 45px; padding: 5px; border: #000033 solid 1px; background-color: #f6f6f6;}
#loconoff {visibility:hidden; width: 305px; height: 80px; margin: 20px 0px 0px 10px; border: #CCCCCC solid 1px; padding: 5px;}


/* Forms
-------------------------------------------------------------------- */

form .fbox {color: #666; font-size: 10px; border-top: 1px solid #818181; border-right: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; border-left: 1px solid #818181; padding: 2px;}
form textarea.fbox {font-family: Arial, Helvetica, sans-serif; font-size: 11px;}
.sbutton  {background-color:Transparent;}
.login	{padding: 25px 0 0 0;}
#loginb	a {text-align:left; font:Arial, Helvetica, sans-serif; font-size:15px; border:#000000 solid 1px; color:#000000; background-color:#FFFFFF; padding:1px; font:bold 9px Verdana, Arial, Helvetica, sans-serif;text-transform:uppercase;}
#loginb a:hover	{text-align:left; border: #000000 solid 1px; color:#FFFFFF; background-color:#000000; padding: 1px; font: bold 9px Verdana, Arial, Helvetica, sans-serif; text-transform:uppercase; text-decoration: none;}	

/* Kaartje
-------------------------------------------------------------------- */

.rechts {
	text-align:left;
}

.adres {
	text-align:left;
	font: bold 9px Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
}	

.mm {
	text-align:left;
	font: bold 9px Verdana, Arial, Helvetica, sans-serif;
	color:#333333;	
}

.bl	{
	
}

/* ADC 
-------------------------------------------------------------------- */

ul#bullet li {
	margin-left: 30px;
	padding-left: 0px;
}

/* Portfolio
-------------------------------------------------------------------- */

.port {
	height: 80px;
	width: 80px;
	border: #0066cc solid 1px;
}

.portlink {
	text-align:right;
	font: bold 9px Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
}

p.portlink a {
	background: url(../_images/bullet_triangle.gif) no-repeat;
	background-position:right;
	padding-right: 15px; 
}

.activeport {
	color:#000000;
}


/* Footer
-------------------------------------------------------------------- */

#footer {
	
	margin-top: 5px;
	color: #777;
	border-top: 1px solid #0066cc;
	clear: both;
}
#footer p {
	margin: 10px;
	line-height: 1em;
}
#footer a {
	color: #0066cc;
}





/* CLEARFIX 
-------------------------------------------------------------------- */

.clear {height: 0px; clear: both; font-size: 1px;}
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {display:inline-table;}
.clearfix {display:block;}