/* ----------------------------------------------------------- */
/* Copyright 2000-2009 (Non-)verbaal, http://www.nonverbaal.nl */
/* ----------------------------------------------------------- */

@import url("reset.css");
@import url("clearfix.css");
@import url("form.css");
@import url("sIFR-screen.css");

/* Elements -------------------------------------------------- */
/* ----------------------------------------------------------- */

html {
	overflow-x:hidden;
	overflow-y:auto;
}

body {
	background: #E4E4E4 url(/www/images/bg.png);
	color: #000;
	font: 62.5% Verdana, Arial, Helvetica, sans-serif;
}

a {
	font-weight: 700;
	text-decoration: none;
	color: #FF9900;
}

a:hover,
a:active { text-decoration: underline; }

h1,
h2 {
	font-weight: 400;
	color: #FF9900;
	display: inline;
}

h1 { font-size: 2.2em; }

h2 {
	font-size: 2.4em;
	text-transform: lowercase;
}

p {
	margin-bottom: 1em;
	line-height: 1.6em;
}

th,
td { line-height: 1.6em; }

ul {
	list-style: disc;
	margin: 1em 2em;
	line-height: 1.6em;
}

ol {
	list-style: decimal;
	margin: 1em 2em;
	line-height: 1.6em;
}

hr {
	width: 100%;
	height: 1px;
	margin: 1em 0;
	clear: both;
	border: none;
	border-bottom: 1px solid #000;
}

strong { font-weight: 700; }

/* Shared classes -------------------------------------------- */
/* ----------------------------------------------------------- */

div.title { margin-bottom: .5em; }

img.pasfoto { margin:0 1em 0 0; }

/* Basic structure ------------------------------------------- */
/* ----------------------------------------------------------- */

div#container {
	position: relative;
	width: 994px;
	margin: 0 auto;
}

div#main {
	float: left;
	width: 100%;
	margin-top: 192px;
}

div#main-inner {
	position: relative;
	overflow: hidden;
	margin: auto;
}

div#content {
	float: left;
	position: relative;
	width: 640px;
	font-size: 1.2em;
}

body.full-width div#content { width: 100%; }

div#sidebar {
	float: right;
	position: relative;
	width: 320px;
	font-size: 1.2em;
	margin-right: 10px;
}

div#header {
	position: absolute;
	height: 192px;
	top: 0;
	left: 10px;
	width: 974px;
}

div#ambiance { margin: 0 10px 32px; }

body#funstuff div#ambiance { margin-bottom: 56px; }

/* Header ---------------------------------------------------- */
/* ----------------------------------------------------------- */

div#logo {
	position: absolute;
	top: 15px;
	left: 13px;
}

div#buttons {
	position: absolute;
	top: 109px;
	left: 13px;	
}

div#punch-line {
	position: absolute;
	right: 0;
	top: 110px;
}

div#nav {
	position: absolute;
	bottom:0;
	left: 0;
	width: 974px;
	z-index: 1000;
}

div#nav ul {
	list-style: none;
	margin: 0;
}

div#nav ul li { float: left; }

div#nav ul li a {
	display: block;
	height: 34px;
	text-indent: -9999px;
	outline: none;
	background-repeat: no-repeat;
	background-image: url(/www/images/header/nav.gif);
}

#nav-home a {
	background-position: 0px 0px;
	width: 75px;
}

#nav-wie-is-toine a {
	background-position: -75px 0px;
	width: 116px;
}

#nav-lessen a {
	background-position: -191px 0px;
	width: 98px;
}

#nav-spoedcursus-gvb a {
	background-position: -289px 0px;
	width: 163px;
}

#nav-swinganalyse a {
	background-position: -452px 0px;
	width: 142px;
}

#nav-clinics a {
	background-position: -594px 0px;
	width: 95px;
}

#nav-reizen a {
	background-position: -689px 0px;
	width: 90px;
}

#nav-funstuff a {
	background-position: -779px 0px;
	width: 99px;
}

#nav-contact a {
	background-position: -878px 0px;
	width: 96px;
}

body#home #nav-home a,
#nav-home a:hover { background-position: 0px -34px; }

body#wie-is-toine #nav-wie-is-toine a,
#nav-wie-is-toine a:hover { background-position: -75px -34px; }

body#lessen #nav-lessen a,
#nav-lessen a:hover { background-position: -191px -34px; }

body#spoedcursus-gvb #nav-spoedcursus-gvb a,
#nav-spoedcursus-gvb a:hover { background-position: -289px -34px; }

body#swinganalyse #nav-swinganalyse a,
#nav-swinganalyse a:hover { background-position: -452px -34px; }

body#clinics #nav-clinics a,
#nav-clinics a:hover { background-position: -594px -34px; }

body#reizen #nav-reizen a,
#nav-reizen a:hover { background-position: -689px -34px; }

body#funstuff #nav-funstuff a,
#nav-funstuff a:hover { background-position: -779px -34px; }

body#contact #nav-contact a,
#nav-contact a:hover { background-position: -878px -34px; }

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

div#footer {
	clear: both;
	position: relative;
	width: 100%;
	font: 1.1em Verdana, Geneva, sans-serif;
}

div#footer-inner { margin: 1em; }

div#footer ul {
	list-style: none;
	margin: 0;
}

div#footer ul li { display: inline; }

/* Tabs ------------------------------------------------------ */
/* ----------------------------------------------------------- */

div.tabs {
	position: absolute;
	width: 100%;
	top: -25px;
	left: 10px;
}

div.tabs ul {
	list-style: none;
	margin: 1px 0 -1px 0;
}

div.tabs ul li.first { margin-left: 0; }

div.tabs ul li {
	float: left;
	display: block;
	height: 24px;
	padding-right: 26px;
	margin-left: -10px;
	position: relative;
	background: url(/www/images/tabs/tabright-back.gif) 100% 0 no-repeat;
	white-space: nowrap;
}

div.tabs ul span {
	height: 24px;
	line-height: 24px;
	padding-left: 22px;
	background-image: url(/www/images/tabs/tableft-back.gif);
	background-position: left bottom;
	background-repeat: no-repeat;
}

html>body div.tabs ul span { display: block; }

div.tabs ul li.selected {
	z-index: 1;
	height: 25px;
	background-image: url(/www/images/tabs/tabright.gif);
}

div.tabs ul li.selected span { background-image: url(/www/images/tabs/tableft.gif);}

div.tabs ul a { color: #999999; }

/* Blocks ---------------------------------------------------- */
/* ----------------------------------------------------------- */

div.block { margin-bottom: 1em; }

div.block table { width: 100%; }

table .tl,
table .bl,
table .tr,
table .br { width: 63px; }

table .l,
table .r { width: 30px; }

table .t,
table .m { background: #FFF; }

table .tl {
	background: url(/www/images/block/default/tl.png);
	height: 25px;
}

table .bl {
	background: url(/www/images/block/default/bl.png);
	height: 85px;
}

table .tr { background: url(/www/images/block/default/tr.png); }

table .br { background: url(/www/images/block/default/br.png); }

table .b { background: url(/www/images/block/default/b.png); }

table .l {
	background-image: url(/www/images/block/default/l.png);
	background-repeat: repeat-y;
}

table .r {
	background-image: url(/www/images/block/default/r.png);
	background-repeat: repeat-y;
}

div.block.mirrored table .tl { background: url(/www/images/block/mirrored/tl.png); }

div.block.mirrored table .tr { background: url(/www/images/block/mirrored/tr.png); }

div.block.mirrored table .bl { background: url(/www/images/block/mirrored/bl.png); }

div.block.mirrored table .br { background: url(/www/images/block/mirrored/br.png); }

div.block.mirrored table .l { background-image: url(/www/images/block/mirrored/l.png); }

div.block.mirrored table .r { background-image: url(/www/images/block/mirrored/r.png); }

div.block.funstuff table .tl {
	background-image: url(/www/images/block/default/l.png);
	background-repeat: repeat-y;
}

/* Items ----------------------------------------------------- */
/* ----------------------------------------------------------- */

div.item img {
	float: left;
	margin-right: 1em;
}

div.items { margin: 2em 0; }

div.items div {
	margin-bottom: 1em;
}

body#funstuff div.items div {
	float: left;
	width: 50%;
}

div#sidebar div.item {
	float: left;
	margin-bottom: 1em;	
	padding-bottom: 1em;
	border-bottom: 1px solid #000;
	width: 320px;
}

div#sidebar ul#playlist {
	width: 280px;
	list-style-type: none;
	margin:0;
}

div#sidebar ul#playlist li{
	padding: 10px;
	cursor: pointer;
	width: 290px !important;}

div#sidebar ul#playlist li.selected{
	border: 1px solid #dcdcdc;
	background-color: #FFF;
}

div#sidebar p.note {
	font-size: .9em;
}
div#sidebar p.note a{
	color: #000;
	font-weight: 400;
	text-decoration: underline;
}
/* Playlist ----------------------------------------------------- */
/* ----------------------------------------------------------- */
div#playlist {
	width: 100%;
}
div#playlist ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
div#playlist ul li {
	float: left;
	display: block;
	width: 340px;
	position: relative;
	margin: 0 0 10px 10px;
}

div#playlist ul li img{
	float: left;
	margin-right: 10px;
}

div#playlist ul li div{
	float: right;
	margin:0;
	width: 230px;
	clear: none;
}

div#playlist ul li div p{margin:0;}
div#playlist ul li div p.selected{font-weight:700;}
div#playlist ul li p.date {color: #C5BEB8;}
div#playlist ul li a{
	text-decoration: none;
}

/* Pages ----------------------------------------------------- */
/* ----------------------------------------------------------- */

div.pages {
	margin: 1em 0;
	font-size: .9em;
}

div.pages.top {
	padding-bottom: 1em;
	border-bottom: 1px solid #EAEDEE;			
}

div.pages.bottom {
	padding-top: 1em;
	border-top: 1px solid #EAEDEE;			
}

div.pages ul {
	list-style: none;
	margin: 0;
}

div.pages ul li {
	display: inline;
	margin-right: .2em;
	padding: .3em;
	border: 1px solid #EAEDEE;
}

div.pages ul li,
div.pages ul li.selected a { color: #CCC; }