@charset "utf-8";
/* CSS Document */

/* ##################################################### */
/* ####################### RESET ####################### */
/* ##################################################### */

/* css reset for all browsers */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0px;
  padding: 0px;
  border: 0px;
  outline: 0px;
  font-weight: normal;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

body {
  line-height: 1;
  color: black;
  background: white;
}

ol, ul {
  list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: separate;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
}

blockquote, q {
  quotes: "" "";
}

select, input, textarea {
	border: 1px solid #CCCCCC;
}


/* ##################################################### */
/* ################## ROUNDED CORNERS ################## */
/* ##################################################### */

.cofumn { display:block; }
.cofumn *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#BFD8EA;
  padding-left:1px;
  padding-right:1px;
  clear: both;
}
.cofumn1{
  margin-left:4px;
  margin-right:4px;
}
.cofumn * .white {
  background-color: #ffffff;
}
.cofumn2{
  margin-left:3px;
  margin-right:3px;
}
.cofumn3{
  margin-left:2px;
  margin-right:2px;
}
.cofumn4{
  margin-left:1px;
  margin-right:1px;
}

.cocumn {display:block; background:#ffffff;}
.cocumn *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background: #e0f0fb;
  padding-left:1px;
  padding-right:1px;
  clear: both;
}
.cocumn1{
  margin-left:4px;
  margin-right:4px;
}
.cocumn2{
  margin-left:3px;
  margin-right:3px;
}
.cocumn3{
  margin-left:2px;
  margin-right:2px;
}
.cocumn4{
  margin-left:1px;
  margin-right:1px;
}

.cocumm {display:block; background:#ffffff;}
.cocumm *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background: #f1f8fc;
  padding-left:1px;
  padding-right:1px;
  clear: both;
}
.cocumm1{
  margin-left:4px;
  margin-right:4px;
}
.cocumm2{
  margin-left:3px;
  margin-right:3px;
}
.cocumm3{
  margin-left:2px;
  margin-right:2px;
}
.cocumm4{
  margin-left:1px;
  margin-right:1px;
}

.cocurn {display:block; background:#ffffff;}
.cocurn *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background: #b1dbf3;
  padding-left:1px;
  padding-right:1px;
  clear: both;
}
.cocurn1{
  margin-left:4px;
  margin-right:4px;
}
.cocurn2{
  margin-left:3px;
  margin-right:3px;
}
.cocurn3{
  margin-left:2px;
  margin-right:2px;
}
.cocurn4{
  margin-left:1px;
  margin-right:1px;
}
/* ##################################################### */
/* ##################### BASE ########################## */
/* ##################################################### */

html, body {
	display: block;
	font-family: Arial, sans-serif;
	font-size: 12px;
	padding: 0px;
	margin: 0px;
	background-color: #E0F0FB;
	border-top: 3px #0068A4 solid;
	font-weight: normal;
}

h1{ 
	width: 200px;
	height: 36px;
	float: left;
	background: #ffffff url(../images/friendbook_logo_header.png) no-repeat;
	text-indent:-2000px;
}

h2{ 
	font-family: Arial, serif;
	color: #333;
	font-size: 2.6em;
	padding-top: 35px;
	padding-left: 30px;
	line-height: 35px;
	font-weight: normal;
}

h3{ 
	font-family: Arial, serif;
	color: #697F8F;
	font-size: 1.5em;
	padding-top: 10px;
	padding-left: 30px;
	line-height: 25px;
}

h4{ 
	font-family: Arial, serif;
	color: #0068A4;
	font-size: 1.9em;
	padding-left: 5px;
	padding-bottom: 5px;
	border-bottom: 1px #0068A4 solid;
}

h4.special{ 
	clear: both;
}

#container { 
	margin-top: 15px;
	width: 850px;
	margin-left: auto; 
	margin-right: auto; 
}

#menuright {
	float: right;
	padding-right: 20px;
}

#menuright ul li{
	float: left;
	padding-left: 15px;
	height: 18px;
}

#menuright a{
	font-size: 13px;
	color: #0068A4;
	text-decoration: none;
}

#menuright a:hover{
	color: #1a1a1a;
}

#gastenboekinfo {
	background-color: #ffffff;
	padding: 20px;
 	border-left: 1px #BFD8EA solid;
 	border-right: 1px #BFD8EA solid;
}

#gastenboekinfo ul{
	padding-top: 5px;
	padding-right: 10px;
	float: right;
}

#gastenboekinfo ul li{
	float: left;
	padding-left: 10px;
}

#gastenboekinfo ul a{
	font-size: 1.4em;
	color: #1a1a1a;
	text-decoration: none;
}

#gastenboekinfo ul a:hover, #gastenboekinfo ul a.selected{
	text-decoration: underline; 
}

#header {
	margin-top: 30px;
	clear: both;
	background-color: #e0f0fb;
}

#header2 {
	margin-top: 10px;
	background-color: #b1dbf3;
	margin-bottom: 5px;
}

#header2 #stappen {
	height: 25px;
}

#header2 ul {
	float: left;
	margin-left: 15px;
}

#header2 li {
	float: left;
	margin-right: 20px;
	font-size: 1.2em;
	color: #666;
}

#header2 span.selected {
	color: #1a1a1a;
}

#leftheader {
	float: left;
	background-color: #e0f0fb;
	background-image: url(../images/header_bg.png);
	background-repeat: repeat-x;
	height: 280px;
	width: 50%;
}

#wholeheader {
	background-color: #e0f0fb;
	height: 160px;
	width: 100%;
}

#wholeheader-privacy {
	background-color: #e0f0fb;
	height: 160px;
	width: 100%;
}

#wholeheader-error {
	background: #e0f0fb url(../images/icons/error.png) no-repeat 570px 45px;
	width: 100%;
}

#wholeheader2 {
	display: block;
	background: #e0f0fb url(../images/icons/password-protected-login.png) no-repeat 550px 80px;
	width: 100%;
}


#wholeheader3 {
	display: block;
	background: #e0f0fb url(../images/icons/gastenboek.png) no-repeat 300px 30px;
	width: 600px;
}


#wholeheader3 h3{
	margin-bottom: 20px;
}

#wholeheader2 input.input {
	background:#FBFBFB none repeat scroll 0 0;
	border:1px solid #C0C0C0;
	color:#555555;
	font-size:24px;
	margin-bottom:6px;
	margin-right:6px;
	margin-top:2px;
	padding:3px;
}

input.loginsubmit {
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
	background-color:#526f8b;
	border:1px solid #76829b;
	color:#FFFFFF;
	cursor:pointer;
	font-family:Arial,sans-serif;
	font-size:1.6em;
	font-weight:bold;
	margin:0 0 5px;
	padding:2px 7px;
	width:auto;
	margin-top: 10px;
	margin-bottom: 20px;
}

input.nextsubmit {
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
	background-color:#74CA00;
	border:1px solid #00FF00;
	color:#FFFFFF;
	cursor:pointer;
	font-family:Arial,sans-serif;
	font-size:1.6em;
	font-weight:bold;
	margin:0 0 5px;
	padding:2px 7px;
	width:auto;
	margin-top: 5px;
}

.loginform {
	padding-left: 30px;
}

#error_content {
	padding-top: 20px;
	padding-left: 30px;
	padding-bottom: 30px;
}

#error_content a{
	font-family: Arial, serif;
	color: #333;
	font-size: 1.6em;
	text-decoration: underline;
}

#rightheader {
	float: right;
	background-color: #e0f0fb;
	background-image: url(../images/header_bg.png);
	background-repeat: repeat-x;
	width: 50%;
	height: 280px;
}


#rightheader img{
	position: absolute;
	margin-top: 20px;
	margin-left: 40px;
	background-color: #ffffff;
	border: 1px #C0C0C0 solid;
	width: 335px;
	height: 210px;
}

#buttons{
	margin-top: 60px;
	margin-left: 30px;
}

input.aanmakensubmit {
	background: transparent url(../images/aanmakenbutton.png) no-repeat;
	color:#FFFFFF;
	font-family: Arial, sans-serif;
	border: 0px;
	font-size: 2em;
	font-weight:bold;
	margin:0 0 5px;
	width: 300px;
	height: 51px;
	padding:10px;
	cursor: pointer;
}

#features {
	height: 270px;
	padding: 15px;
}

#features ul {
	height:250px;
	padding-top: 15px;
}

#features li {
	float: left;
	width: 345px;
	height: 80px;
	margin-right: 15px;
}
#features h5 {
	padding-left: 65px;
}
#features p {
	padding-left: 65px;
	color: #1a1a1a;
	line-height: 14px;
}

#features h5 a {
	color: #0068A4;
	font-size: 18px;
	line-height: 1.2em;
	text-decoration: none;
}

#features h5 a:hover {
	color: #1a1a1a;
	text-decoration: underline;
}

#features li#gratisgastenboek {
	background: transparent url(../images/icons/gastenboek.png) no-repeat 20px 10px;
}
#features li#eigenthemas {
	background: transparent url(../images/icons/eigen-themas.png) no-repeat 20px 10px;
}
#features li#vriendengastenboek {
	background: transparent url(http://cache.hyves-static.net/images/logo/app/icon_32.png) no-repeat 20px 10px;
}
#features li#emoticons {
	background: transparent url(../images/icons/emoticons.png) no-repeat 20px 10px;
}
#features li#makkelijkedit {
	background: transparent url(../images/icons/makkelijk-edit.png) no-repeat 20px 10px;
}
#features li#meerfuncties {
	background: transparent url(../images/icons/meer-functies.png) no-repeat 20px 10px;
}

#demos { 
	padding: 15px;
	height: 185px;
	clear: both;
}

#demos ul {
	float: left;
	margin-top: 10px;
}

#demos li {
	float: left;
	text-align: center;
	width: 166px;
	height: 90px;
	margin-right: 20px;
}

#demos li.right {
	margin-right: 0px;
}

#demos img {
	border: 0px;
	width: 150px;
	height: 105px;
	margin-top: 5px;
}

#demos h5 a {
	color: #1a1a1a;
	font-size: 14px;
	line-height: 1.2em;
	text-decoration: none;
}


#footer {
	color: #555;
	text-align: center;
	padding-top: 5px;
	margin-bottom: 10px;
}

#footer a {
	font-size: 1.1em;
	color: #555;
	text-decoration: none;
}

#footer a:hover {
	color: #1a1a1a;
}

#breaker { clear: both; }

#feature_content {
	padding: 15px;
}

#feature_content ul{
	float: left;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

#feature_content ul li{
	padding-top: 10px;
	float: left;
	line-height: 1.2em;
	height: 110px;
}

#feature_content li.image{
	width: 175px;
}

#feature_content li.image img{
	border: 1px solid #C0C0C0;
	width: 160px;
	height: 100px;
}

#feature_content li.text{
	width: 568px;
	padding-right: 15px;
}

#feature_content h5 a{
	padding-top: 5px;
	color: #0068A4;
	font-size: 18px;
	line-height: 1.2em;
}

#feature_content h5 a:hover{
	text-decoration: none;
}


#aanmaken_content {
	text-align: left;
	padding: 15px;
}

#aanmaken_content ul{
	display: block;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 660px;
	float: left;
}

#aanmaken_content li {
	width: 200px;
	height: 30px;
}

#aanmaken_content li.invoer{
	display: block;
	width: 400px;
}

#aanmaken_content li.invoer a{
	text-decoration: underline;
	font-size: 1em;
}

#aanmaken_content li.invoer span.small{
	font-size: 10px;
}
#aanmaken_content ul.themes {
    width:100%;
}

#aanmaken_content ul.themes li {
	float:left;
	height:162px;
	padding-bottom:15px;
	width:245px;
}

#aanmaken_content ul.themes li img {
	border:3px solid #FFFFFF;
	cursor:pointer;
	height:147px;
	width:230px;
}

#aanmaken_content ul.themes li img#theme1 {
	border:3px solid #000000;
}

#aanmaken_content #finished {
	background: #ffffff url(../images/icons/finished.png) no-repeat 20px 20px;
	padding-top: 25px;
	padding-left: 180px;
	font-size: 13px;
	line-height: 1.2em;
	margin-bottom: 20px;
}

#aanmaken_content #finished a{
	color: #000000;
	text-decoration: underline;
}

#aanmaken_content #finishinfo {
	display: block;
	text-align: left;
	padding: 10px;
	background-color: #fff9bd;
	border: 1px solid #f1da7a;
	margin-top: 10px;
	margin-bottom: 10px;
	line-height: 1.2em;
	font-size: 13px;
	color: #000000;
}

input.fieldin {
	width: 200px;
	padding: 3px;
}

.error {
	display: block;
	text-align: center;
	width: 100%;
	padding: 7px;
	background-color: #fff9bd;
	border: 1px solid #f1da7a;
	width:792px;
	margin-top: 10px;
	line-height: 1.2em;
	font-size: 13px;
	color: #000000;
}

.notification {
	display: block;
	text-align: center;
	width: 100%;
	padding: 7px;
	background-color: #fff9bd;
	border: 1px solid #f1da7a;
	width:792px;
	margin-top: 10px;
	line-height: 1.2em;
	font-size: 13px;
	color: #000000;
}

.buttons {
	width: 100%;
	text-align: right;
}
#privacy-verklaring {
	width: 600px;
	padding: 15px;
}
#privacy-verklaring p{
	display: block;
	padding-top: 7px;
	padding-bottom: 7px;
	line-height: 1.2em;
}	

#privacy-verklaring a{
	color: #000000;
	text-decoration: underline;
}

#contact {
	padding: 15px;
}

#contact ul{
	display: block;
	float: left;
	height: 240px;
	width: 710px;
	margin-top: 10px;
	margin-bottom: 10px;
}

#contact li{
	width: 200px;
	height: 30px;
}

#contact li.invoer{
	width: 400px;
}

#contact li.totaal{
	width: 700px;
}