/* --> General
******************************************************************************/

html {
	height: 100%;
}

body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	color: #fff;
	background-color: #000;
	font: 11px/16px tahoma, verdana, arial;
}

a:hover {
	text-decoration: none;
}


/* --> Utilities
******************************************************************************/
.float-seperator {
	height: 0px;
	line-height: 0px;
	float: none !important;
	clear: both;
	display: block !important;
}


/* --> Page layout containers
******************************************************************************/
#total-container {
	margin: 0px;
	padding: 0px;
	width: 100%;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	background: #000 url(../../img/top_block_right.gif) top right no-repeat;
}

#canvas-container {
	margin: auto;
	padding: 0px;
	width: 960px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

#top-container {
	margin: 0px;
	padding: 0px;
	width: 960px;
	height: 561px;
	position: relative;
}

#mid-container {
	margin: 0px;
	padding: 0px;
	width: 960px;
	display: table;
}

#bottom-container {
	margin: 25px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	width: 960px;
	min-height: 100px;
	height: auto !important;
	height: 100px;
	background-color: #171717;
}

/* --> Top container
******************************************************************************/

#top-container .logo {
	margin: 0px;
	padding: 0px;
	left: 0px;
	top: 31px;
	position: absolute;
}

#top-container .date {
	margin: 0px;
	padding: 0px 0px 10px 0px;
	right: 0px;
	top: 31px;
	position: absolute;
	background: url(../../img/txt_updated.gif) no-repeat right bottom;
}

#top-container .url {
	margin: 0px;
	padding: 0px;
	right: 0px;
	bottom: 15px;
	position: absolute;
}

#top-container .info {
	margin: 0px;
	padding: 10px 0px 10px 20px;
	right: 0px;
	top: 202px;
	position: absolute;
	font-size: 10px;
	background-color: #030303;
	border-left: 1px solid #111111;
}

#top-container .info .head-title {
	margin: 0px;
	padding: 0px;
	font-size: 10px;
	font-weight: bold;
}


/* --> Bottom container
******************************************************************************/

#bottom-container .box-blog {
	margin: 20px 20px 20px 20px;
	padding: 0px;
	float: left;
}

#bottom-container .box-naw {
	margin: 20px 20px 20px 150px;
	padding: 0px;
	float: left;
}

#bottom-container .box-team {
	margin: 20px 20px 20px 197px;
	padding: 0px;
	float: left;
}

#bottom-container .box-copyright {
	margin: 0px;
	padding: 20px;
	clear: both;
	font-size: 9px;
}

#bottom-container span {
	margin: 0px 0px 25px 0px;
	padding: 0px;
	font-weight: bold;
	display: block;
}

#bottom-container ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#bottom-container .soon {
	margin: 0px;
	padding: 0px;
	font-size: 9px;
	font-style: italic;
	font-weight: normal;
	display: inline;
}


/* --> Boxxes
******************************************************************************/

.box-container {
	margin: 0px 0px 25px 0px;
	padding: 0px;
	width: 320px;
	float: left;
}

.box-container .title {
	margin: 0px;
	padding: 0px;
	width: 320px;
	height: 67px;
}

.box-container .content {
	margin: 0px;
	padding: 0px;
	width: 320px;
	height: 338px;
	position: relative;
}


/* --> Box Interview
******************************************************************************/

.interview {
	margin: 0px;
	padding: 0px;
}

.interview .listing {
	margin: 0px;
	padding: 20px 0px 0px 0px;
	position: relative;
}

.interview .photo {
	margin: 0px;
	padding: 2px;
	position: absolute;
	top: 20px;
	left: 18px;
	z-index: 1000;
	background-color: #DFDFDF;
}

.interview .photo img {
	border: 10px solid #fff;
}

.interview .listing ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	width: 319px;
}

.interview .listing li {
	margin: 0px;
	padding: 0px;
}

.interview .listing li.odd {
	margin: 0px;
	padding: 2px 2px 2px 142px;
	background-color: #DCDCDC;
}

.interview .listing li.even {
	margin: 0px;
	padding: 2px 2px 2px 142px;
}

.interview .listing li a {
	margin: 0px;
	padding: 0px;
	color: #585858;
	text-decoration: none;
	display: block;
}

.interview .listing li a:hover {
	font-weight: bold;
}

.interview .listing li a.active {
	font-weight: bold;
}

.interview .answer {
	margin: 20px;
	padding: 0px;
	color: #585858;
}

.interview .answer span {
	font-weight: bold;
	display: block;
}


/* --> Box Music
******************************************************************************/

.music {
	margin: 0px;
	padding: 0px;
}

.music .listing.scrollable {
	margin: 0 0px 0px 18px;
	padding: 18px 0 0 0;
	width: 284px;
	height: 284px;
	position: relative;
  overflow: hidden;
}

.music .listing .items {
	width: 20000em;
	position: absolute;
	clear: both;
}

.music .listing .item-container {
	float: left;
}

.music .listing .item-container .cover {
	margin: 0px;
	padding: 2px;
	width: 280px;
	background-color: #D5D5D5;
	position: relative;
}

.music .listing .item-container .cover img {
	border: 10px solid #fff;
}

.music .listing .item-container .cover .namealbum {
	margin: 0px;
	padding: 0px;
	position: absolute;
	left: 12px;
	bottom: 12px;
	width: 260px;
	height: 31px;
	background: url(../../img/cover_name_bg.png) no-repeat;
}

html>body .music .listing .item-container .cover .namealbum {
	background: url(../../img/cover_name_bg.png) no-repeat;
}

.music .listing .item-container .cover .namealbum a {
	color: #545455;
	font-size: 9px;
	text-decoration: none;
}

.music .listing .item-container .cover .namealbum a:hover {
	text-decoration: underline;
}

.music .listing .item-container .cover .namealbum .canvas {
	width: 260px;
	height: 31px;
}

.music .listing .item-container .cover .namealbum span {
	margin: 8px 0px 0px 35px;
	padding: 0px 0px 0px 0px;
	display: block;
}


/* --> Box Blog
******************************************************************************/

.blogpost .temp {
	margin: 0px;
	padding: 0px;
}

.blogpost .temp .item-container {
	margin: 0px;
	padding: 18px 0px 0px 18px;
}

.blogpost .temp .item-container .photo {
	margin: 0px;
	padding: 2px;
	width: 280px;
	background-color: #DFDFDF;
}

.blogpost .temp .item-container .photo img {
	border: 10px solid #fff;
}


/* --> Box Photos
******************************************************************************/

.photos {
	margin: 0px;
	padding: 0px;
}

.photos .listing.scrollable {
	margin: 0 0px 0px 18px;
	padding: 18px 0 0 0;
	width: 284px;
	height: 284px;
	position: relative;
  overflow: hidden;
}

.photos .listing .items {
	width: 20000em;
	position: absolute;
	clear: both;
}

.photos .listing .item-container {
	float: left;
}

.photos .listing .item-container .cover {
	margin: 0px;
	padding: 2px;
	width: 280px;
	background-color: #DFDFDF;
	position: relative;
}

.photos .listing .item-container .cover img {
	border: 10px solid #fff;
}

.photos .listing .item-container .cover .namealbum {
	margin: 0px;
	padding: 0px;
	position: absolute;
	left: 12px;
	bottom: 12px;
	width: 260px;
	height: 31px;
	background: url(../../img/photo_name_bg.png) no-repeat;
}

html>body .photos .listing .item-container .cover .namealbum {
	background: url(../../img/photo_name_bg.png) no-repeat;
}

.photos .listing .item-container .cover .namealbum .canvas {
	width: 260px;
	height: 31px;
	color: #545455;
	font-size: 9px;
}

.photos .listing .item-container .cover .namealbum span {
	margin: 8px 0px 0px 35px;
	padding: 0px 0px 0px 0px;
	display: block;
}


/* --> Box Websites
******************************************************************************/

.websites {
	margin: 0px;
	padding: 0px;
}

.websites .listing {
	margin: 0px;
	padding: 20px 0px 0px 0px;
}

.websites .listing ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

.websites .listing li {
	margin: 0px;
	padding: 0px;
}

.websites .listing li.odd {
	margin: 0px;
	padding: 3px 3px 3px 25px;
	background-color: #E6E6E6;
}

.websites .listing li.even {
	margin: 0px;
	padding: 3px 3px 3px 25px;
}

.websites .listing li a {
	margin: 0px;
	padding: 0px;
	color: #585858;
	text-decoration: none;
	display: block;
}

.websites .listing li a:hover {
	font-weight: bold;
}


/* --> Box Favorites
******************************************************************************/

.favorites {
	margin: 0px;
	padding: 18px 0 0 0;
}

.favorites .listing.scrollable {
	margin: 0;
	padding: 0 0 0 18px;
	width: 284px;
	height: 284px;
	position: relative;
  overflow: hidden;
}

.favorites .listing .items {
	width: 20000em;
	position: absolute;
	clear: both;
}

.favorites .listing .item-container {
	margin: 0px 0px 7px 0px;
}

.favorites .listing .item-container .branding {
	margin: 0px;
	padding: 2px;
	width: 280px;
	background-color: #DFDFDF;
}

.favorites .listing .item-container .branding img {
	border: 10px solid #fff;
}

.favorites .listing .item-container .url {
	margin: 0px;
	padding: 5px 0px 0px 0px;
}

.favorites .listing .item-container .url a {
	margin: 0px;
	padding: 0px;
	color: #585858;
	text-decoration: none;
	display: block;
}

.favorites .listing .item-container .url a:hover {
	font-weight: bold;
}


/* --> Scroller Navigation
******************************************************************************/

.menu-scroller {
	margin: 0;
	padding: 0;
	text-align: center;
}

.music .menu-scroller,
.photos .menu-scroller,
.favorites .menu-scroller {
	padding: 12px 0 0 0;
}

.menu-scroller table {
	margin: 0 auto;
}

#m-previous a,
#p-previous a,
#f-previous a {
	margin: 0 8px 0 0;
	width: 25px;
	height: 9px;
	text-indent: -9999px;
	background: transparent url(../../img/img_nav_scroller.gif) -40px 0 no-repeat;
	display: block;
	overflow: hidden;
}

#m-previous.disabled a,
#p-previous.disabled a,
#f-previous.disabled a {
	background: transparent url(../../img/img_nav_scroller.gif) -40px -9px no-repeat;
	cursor: default;
}

#m-next a,
#p-next a,
#f-next a {
	margin: 0 8px 0 0;
	width: 37px;
	height: 9px;
	text-indent: -9999px;
	background: transparent url(../../img/img_nav_scroller.gif) 0 0 no-repeat;
	display: block;
	overflow: hidden;
}

#m-next.disabled a,
#p-next.disabled a,
#f-next.disabled a {
	background: transparent url(../../img/img_nav_scroller.gif) 0 -9px no-repeat;
	cursor: default;
}

#m-bullets a,
#p-bullets a,
#f-bullets a {
	margin: 0 8px 0 0;
	width: 7px;
	height: 9px;
	background: transparent url(../../img/img_nav_scroller.gif) 0 -21px no-repeat;
	float: left;
	display: inline;
	overflow: hidden;
}

#m-bullets a:hover,
#p-bullets a:hover,
#f-bullets a:hover {
	background-position: 0 -30px;
}

#m-bullets a.active,
#p-bullets a.active,
#f-bullets a.active {
	background-position: 0 -30px;
}



/* --> People colors
******************************************************************************/
.paul-color {
	color: #15F2B1;
}

.dirk-color {
	color: #FFC000;
}

.bram-color {
	color: #49A8B5;
}

.irina-color {
	color: #FF63B8;
}

.ronnie-color {
	color: #DB2240;
}

.sjoerd-color {
	color: #56B549;
}

.wouter-color {
	color: #B58649;
}

.diederik-color {
	color: #FC5A00;
}