/*
Let op!!!
Zonder toestemming niets aan de CSS veranderen!!!
Helemaal onderaan dit document is ruimte voor tests en experimenten
Zodra deze zijn goedgekeurd door Erik worden ze op de juiste plaats in dit document gezet.
Op die manier blijft dit document overzichtelijk en betrouwbaar....!
*/


body
{
	background-image: url(../images/tafel.jpg);
	background-repeat: repeat;
	background-attachment: fixed;
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	min-height: 550px;
	min-width: 1000px;
	font-size: 16px;
	overflow: auto;
}

/* vormgeving voor de normale teksten
Imuun voor externe stylesheets 
Zorgt voor gelijk uiterlijk en gedrag in alle browsers */

p.p /* normaal */
{
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	margin: 0px;
	color: #000;
}

p.middle /* 12px */
{
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0px;
	color: #000;
}

p.small /* 11px */
{
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin: 0px;
	color: #000;
}

p.smaller /* 10px */
{
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	margin: 0px;
	color: #000;
}

p.csmaller /* 10px - berichtenboard */
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	margin: 0px;
	color: #000;
}

p.smallest /* 9px */
{
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	margin: 0px;
	color: #000;
}

/* vormgeving voor koppen
Imuun voor externe stylesheets 
Zorgt voor gelijk uiterlijk en gedrag in alle browsers */

h1.h1 /* 32px */
{
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	font-size: 32px;
	margin: 0px;
	color: #000;
}

h2.h2 /* 24 px */
{
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	font-size: 24px;
	margin: 0px;
	color: #000;
}

h3.h3 /* 18 px */
{
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	margin: 0px;
	color: #000;
}

h4.h4 /* 16 px */
{
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	margin: 0px;
	color: #000;
}

/* vormgeving voor links
Imuun voor externe stylesheets 
Zorgt voor gelijk uiterlijk en gedrag in alle browsers */

a img /* plaatjes die een link zijn krijgen op deze manier geen border, duidelijk is wel dat ze klikbaar zijn */
{
	border: 0px;
	cursor: pointer;
}

a.a:hover /* zorgt ervoor dat er bij een mouse-over een streep onder elke link komt */
{
	text-decoration: underline;
	cursor: pointer;
}

a.menu:hover /* zorgt ervoor dat er bij een mouse-over een streep onder elke link komt */
{
	text-decoration: underline;
	cursor: pointer;
}

a.small:hover /* zorgt ervoor dat er bij een mouse-over een streep onder elke link komt */
{
	text-decoration: underline;
	cursor: pointer;
}

a.smaller:hover /* zorgt ervoor dat er bij een mouse-over een streep onder elke link komt */
{
	text-decoration: underline;
	cursor: pointer;
}

a.a /* normale links */
{
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	text-decoration: none;
	cursor: pointer;
	font-size: 16px;
}

a.menu /* menu-links */
{
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	color: #453624;
	text-decoration: none;
	cursor: pointer;
}

a.login /* login-links */
{
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	text-decoration: underline;
	cursor: pointer;
	font-size: 9px;
}

a.small /* 11px */
{
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	text-decoration: none;
	cursor: pointer;
	font-size: 11px;
}

a.csmall /* 11px - berichtenboard */
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	text-decoration: none;
	cursor: pointer;
	font-size: 11px;
}

a.smaller /* 10px */
{
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	text-decoration: none;
	cursor: pointer;
	font-size: 10px;
}

/* vormgeving voor dikgedrukte letters
Imuun voor externe stylesheets 
Zorgt voor gelijk uiterlijk en gedrag in alle browsers */

b.b /* normaal dikgedrukt */
{
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #000;
}

b.small /* 11px */
{
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #000;
}

b.smaller /* 10px */
{
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #000;
}

b.csmall /* 11px - berichtenboard */
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #000;
}

b.csmaller /* 10px - berichtenboard */
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #000;
}

/* vormgeving voor fotoalbum-opsommingslijst tabellen
Imuun voor externe stylesheets 
Zorgt voor gelijk uiterlijk en gedrag in alle browsers */

table.table
{
	width: 650px;
	border-collapse: collapse;
	margin-left: auto;
	margin-right: auto;
}

td.td
{
	border-bottom: #000099 1px dotted;
}

td.lines
{
	border-left: 1px solid black;
	border-right: 1px solid black;
	padding-left: 10px;
	border-bottom: #000099 1px dotted;
}

td.ted
{
	border-left: 1px solid black;
	padding-left: 10px;
	border-bottom: #000099 1px dotted;
}

td.reactie
{
	padding-left: 10px;
	border-bottom: #000099 1px dotted;
}

td.heading
{
	padding-left: 10px;
	border-bottom: 1px solid black;
}

hr.hr
{
	height: 1px;
	background-color: #000;
	color: #000;
	border: 0px;
}

/* De div die zich automatisch aanpast aan de grootte van je scherm */

#all
{
	position: absolute;
	top: 0px;
	left: 0px;
	height: 550px;
	width: 1000px;
	overflow: hidden;
}

/* positionering van de achtergrond-afbeeldingen waar de teksten uiteindelijk bovenop zullen komen */

#logo /* rode letters 'de soepele bazen' */
{
	position: fixed;
	top: 20px;
	left: 260px;
	width: 50%;
	max-width: 800px;
	min-width: 400px;
	height: auto;
	max-height: 76px;
	min-height: 38px;
}

#grouppicture /* de groepsfoto rechtsonder */
{
	position: fixed;
	bottom: 0px;
	right: 0px;
	width: 813px;
	height: 604px;
	z-index: 1;
}

#menupicture /* bruin karton */
{
	position: fixed;
	left: 0px;
	top: 0px;
	height: 400px;
	width: 250px;
	z-index: 2;
}

#chatpicture /* gele post-its */
{
	position: fixed;
	left: 0px;
	bottom: 0px;
	z-index: 4;
}

#pageheaderpicture /* bovenkant ringblad */
{
	position: relative;
	height: 45px;
	z-index: 7;
}

#pagefooterpicture /* onderkant ringblad */
{
	position: relative;
	height: 20px;
	z-index: 7;
}

/* positionering van de login tekst */

#loginstatus
{
	position: fixed;
	top: 3px;
	left: 260px;
	height: 20px;
	width: 700px;
	overflow: hidden;
}

/* positionering van de menu-inhoud tekst */

#menu
{
	position: fixed;
	left: 15px;
	top: 12px;
	height: 350px;
	width: 190px;
	overflow: hidden;
	font-size: 24px;
	font-weight: bold;
	z-index: 3;
}

/* positionering van alle teksten in de chat */

#chat /* houdt de chat bij-een */
{
	position: fixed;
	left: 15px;
	bottom: 5px;
	height: 270px;
	width: 240px;
	overflow: hidden;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	z-index: 5;
}

#chatbars/* omslachtige methode om onder en boven het chatgedeelte lijntjes weer te geven - op deze manier zien ze er in iedere browser hetzelfde uit */
{
	position: absolute;
	height: 212px;
	width: 240px;
	left: 0px;
	top: 29px;
	border-bottom: 1px solid black;
	border-top: 1px solid black;
	z-index: 5;
}

#chatmain /* het gedeelte van de chat waar de berichtjes staan txt */
{
	position: absolute;
	height: 202px;
	width: 240px;
	left: 0px;
	top: 5px;
	font-size: 11px;
	overflow: hidden;
	z-index: 5;
}

#chatfooter /* De reageer of overzicht knop */
{
	position: absolute;
	bottom: 0px;
	right: 0px;
	cursor: pointer;
	z-index: 5;
}

/* regelt de positie van de content afhankelijk van de breedte van het scherm */

#breedte
{
	position: relative;
	float: left;
	min-width: 180px;
	max-width: 320px;
	height: 400px;
	margin: 0px 0px 0px -8px;
	width: 18%;
}

/* ringblad - variant
Positionering van dit ringblad en de hoofdinhoud, tekstueel */

#page /* houdt alles bij-een */
{
	position: relative;
	float: left;
	margin: 94px 0px 0px;
	width: 800px;
	z-index: 6;
}

#content /* DE content */
{
	position: relative;
	background-image: url(../images/content.png);
	background-repeat: repeat-y;
	padding: 25px;
	width: 750px;
	z-index: 7;
}

/* foto-pagina wit vlak - variant
positionering van dit witte vlak voor de fotopagina en de hoofdinhoud, tekstueel */

#pagep /* houdt alles bij-een */
{
	position: absolute;
	top: 20px;
	width: 800px;
	right: 0px;
	z-index: 6;
}

#contentp /* DE content */
{
	position: relative;
	top: 0px;
	left: 0px;
	min-width: 800px;
	width: 800px;
	overflow: auto;
	background-image: url(../images/trans.png);
	display: inline-block;
	z-index: 7;
}

/* muziekpagina - variant
positionering van het grote witte vlak en de hoofdinhoud, tekstueel */

#pagem /* houdt alles bij-een */
{
	position: relative;
	float: left;
	margin: 12px 0px 0px;
	width: 800px;
	z-index: 6;
}

#contentm /* DE content */
{
	position: relative;
	top: 0px;
	left: 0px;
	width: 800px;
	z-index: 7;
}

/* forumpagina - variant
positionering van het forum in de pagina */

#pagef /* houdt alles bij-een */
{
	position: relative;
	float: left;
	margin: 20px 0px 0px;
	min-width: 800px;
	max-width: 1024px;
	width: 75%;
	z-index: 6;
}

#contentf /* DE content */
{
	position: relative;
	top: 0px;
	left: 0px;
	min-width: 800px;
	z-index: 7;
}

/* inhoud centreren
Afbeeldingen of teksten in het midden van het content-vlak plaatsen
Daarnaast extra ruimte onder en boven om omringende tekst op afstand te houden */

#contentpicture
{
	position: relative;
	text-align: center;
	margin-bottom: 10px;
	margin-top: 10px;
}

/* foto-album
Positioneren van alle onderdelen van het foto-album */

#albumtitle /* titel en beschrijving */
{
	position: relative;
	text-align: center;
	height: 65px;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}

#mainpicture /* het vak waarin de hoofdfoto of de quotes verschijnen */
{
	position: relative;
	text-align: center;
	height: 295px;
	width: 393px;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}

#foto /* de hoofdfoto */
{
	height: 100%;
	width: auto;
}

#previousbutton /* De 'vorige' button */
{
	position: absolute;
	left: 39px;
	top: 61%;
}

#previousquotebutton/* De 'vorige-quote' button */
{
	position: absolute;
	left: 33px;
	top: 37%;
}

#nextbutton /* De 'volgende' button */
{
	position: absolute;
	right: 39px;
	top: 61%;
}

#nextquotebutton /* De 'volgende-quote' button */
{
	position: absolute;
	right: 33px;
	top: 37%;
}

#anyquotes /* Quote melding onder de hoofdfoto */
{
	position: relative;
	text-align: center;
	width: 90px;
	height: 20px;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
	font-weight: bold;
	cursor: pointer;
}

/* De fotobalk */

#miniphotos /* houdt alles bijeen */
{
	position: relative;
	margin-top: 20px;
	width: 800px;
	min-width: 800px;
	height: 130px;
	overflow: auto;
	margin-left: auto;
	margin-right: auto;
}

#quotelogo /* logo bovenop de foto om visueel aan te geven dat er een quote bij de thumb hoort */
{
	position: absolute;
	top: 0px;
	left: 0px;
	filter: alpha(opacity=80);
	opacity:0.8;
	z-index: 10;
}

#thumb /* thumbs zelf */
{
	position: absolute;
	top: 3px;
	cursor: pointer;
}

#thumbenddiv /* extra ruimte voor de thumbs */
{
	position: absolute;
	height: 10px;
}

/* Quote gedeelte
Hier worden de quotes uitgebreid getoond */

#quotebackground /* transparante achtergrond waarop de quotes uiteindelijk zullen verschijnen */
{
	position: absolute;
	top: 0px;
	background-image: url(../images/trans.png);
	z-index: 8;
	overflow-y: auto;
	overflow-x: hidden;
}

#quotes /* de quotes zelf */
{
	position: absolute;
	overflow: auto;
	text-align: left;
	top: 20px;
	left: 20px;
}

#textarea /* invoerveld quote-formulier */
{
	width: 400px;
	height: 75px;
}

#loading /* quote-toevoeg wacht-animatie */
{
	position: absolute;
	width: 50px;
	height: 50px;
	top: 10px;
	left: 10px;
}

/* grey-out
Positioneren van alle onderdelen van de grey-out */

#greyoutlayer 
{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 9;
	display: none;
	background-color: black;
	overflow: hidden;
	filter:alpha(opacity=40);
	opacity:0.4;
}

#greyoutoverlap 
{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 10;
	display: none;
	overflow: auto;
}

#greyoutupperbound /* onzichtbare grens zodat de content niet boven uit beeld kan verdwijnen */
{ 
	float:left;
	visibility: hidden;
	width: 100%;
	height: 50%;
	margin-top: -150px;
	z-index: 10;
}

#greyoutoutercontainer /* deze div bevat de content in een wit vlak*/
{
	position: static;
	width: 400px;
	height: 300px;
	top: -150px;
	margin: auto;
	background-color: #FFF;
	clear: both;
	z-index: 11;
}

#greyoutinnercontainer /* deze div zorgt dat gebruik kan worden gemaakt van absolute positionering */
{
	position: relative;
	left: 10px;
	top: 10px;
	width: 380px;
	height: 280px;
}

#msgpreview /* preview gedeelte */
{
	position: relative;
	width: 170px;
	left: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000;
	overflow: hidden;
}

#smilies /* hier worden smilies weergegeven om uit te kiezen */
{
	position: absolute;
	left: 270px;
	top: 30px;
}

#msgboardbuttons /* de container van de twee buttons (toevoegen en sluiten) */
{
	position: absolute;
	bottom: 0px;
	left: 0px;
}

#msgboardname, #msgboardmsg
{
	cursor: text;
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #000;
}

/*
TEST-GEDEELTE
Hieronder dus
*/