/* Stefan Template v1.0 (Jan 16th 2007). */

/* if you want to include styles in a html document, you have to add them between
   <style> and </style> */
   all css code is organised around elements which look like the following :
   selector { property1: value1; property2: value2; property3: value3 }
   properties are encoded as follows :
   <font-weight> ::= font-weight: <value>
	Some of the syntax definitions can be quite complicated. The notation used is as follows:
	Notation Meaning
	<Abc> 		A value of type Abc. Some of the more common types are discussed later.
	abc 		A keyword that must appear exactly as written.
	X Y Z 		X must occur then Y then Z in that order.
	X | Y 		Xor Y must occur.
	X || Y || Z 	X, Y or Z or some combination in any order.
	[ Abc ] 	The square brackets are used to group items together.
	ST* 		ST is repeated zero or more times. ST can be a bracketed set of items.
	ST+ 		ST is repeated one or more times.
	ST? 		ST is optional. It can either appear once or not at all.
	ST {A,B} 	ST must occur at least A times and at most B times.
   4 main properties :
	<length> ::= [ + | - ]? <number> <unit>
			+ and i are optional / unit not needed when value is 0
			relative length units : em (1 font height), px (1 pixel), ex (height of letter x)
			absolute length units : in, cm, mm, pt, pc
	<percentage> ::= [ + | - ]? <number> %
			+ and - are optional
			indicates percentage of other property, mostly font height or page width
	<color> ::= <keyword> | # <hex> <hex> <hex> | # <hex> <hex> <hex> <hex> <hex> <hex> |
	  rgb ( <int> <int> <int> ) | rgb ( <percentage. <percentage > <percentage> )
			rgb colors can be given as #rgb or #rrggbb
			some keywords are : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple,
					    red, silver, teal, white and yellow.
	<url> ::= url( <whitespace>? [ ' | " ]? <characters in url> [ ' | " ]? <whitespace> )
*/



body {
background:#8b8b8b none no-repeat scroll top left;     /* will be parent and overruled by other elements */
		   				/* background definitions shortcut :    (not specified = default)
							background-color	(color |transparant)    defined in rule #rrggbb
							background-image        (url | none)
							background-repeat       (repeat-x, repeat, repeat-y = repeat in spec direction)
							background-attachment   (scroll or fixed)
							background-position     (relative to element or display -- top left = 0%0%
						*/
color:#303030;                                  /* color sets foreground color !! */
font:normal normal normal 76% Verdana,Tahoma,Arial,sans-serif;
					 	/* font is a shortcut for defining following elements : !!sequence is important !! not specified = default
							font-style  (normal, italic, bold, ....)
							font-variant (normal, small-caps)
							font-weight (normal,bold,bolder,light,100..900) (inherited from upper block)
							font-size (absolute or relative : xx-small...medium..xx-large and larger/smaller)
								   or value can be given : 12pt, 75%
							/line-height
							font-family (times new roman, ...)

						   % indicates 76 percent of font-height, a list of fonts is given
						   to support browsers which do not know first fonts.
						*/
margin:0px 0px 0px 0px;				/*  BOX property : box has margin, border, padding and core content
						    shortcut for following 4 commands  // negative values are possible (overlapping)
							margin-top:
							margin-bottom:
							margin-right:
							margin-left:
						*/
padding:0px;                                    /* BOX property padding : cfr margin // negative values are not allowed !! */
text-align:center;				/* alignment of text within display or element : justify, center, left, right */
white-space:normal;				/* how are spaces within an element displayed : normal (collapse multiple spaces), pre (do not collpase),
						   nowrap (wrapping is only done via html br command) */
}




a {
color:#505050;
font-weight:bold;
text-decoration:none;				/* possible values :  none | [ underline || overline || line-through || blink ] */
}

a:hover {					/* selector:pseudo-class : pseudo indicates difference f.ex.
							a:link,
							a:active,   		display style for active link
							a:visisted 		display style for already visited link
							p:first-line		display style for first line of paragraph
						*/

color:#808080;
text-decoration:underline;
}

p {
line-height:1.5em;			/* 1.5 em = 1.5 font height of the used font between lines.  can be a number (multiple), percentage, unit */
margin:0px 0px 15px;        		/* px = pixels, unit not needed when value 0 length indications without + and i */
}

/*** Main container ***/

#container {              		/* identifiers begin with a # */
	background:#f0f0f0; /*url(img/bodybg.jpg) repeat-x;*/	/* url indicates where to find the resource (relative or absolute) */
	color:#303030;
	margin:0;
	min-width:770px;                        /* lenght indications without + and - */
	padding:0;
	text-align:left;
	width:100%;
}

/*** Header section ***/

#sitename {
background:white url(images/muzieknoten7.jpg) repeat-x;	/* url indicates where to find the resource (relative or absolute) */
color:black;
height:90px;
margin:0px 0px 0px 0px;
text-align:left;
}

#sitename h1,#sitename h2 {		/* grouping multiple elements together */
font-weight:900;
letter-spacing:-2px;                    /* space between letters . length indication with a - : negative justification */
margin:0;
padding:0;
}


#sitename h1 {
font-size:1.6em;			/* 2.4 em = 2.4 times the font heigth f.ex. if font is 12 pixesl, then 2.4 times 12 pixels */
padding-top:6px;
text-indent:1em;			/* indentation for first line of text */
}

#sitename h2 {
font-size:2.4em;                        /* 1.6 times the chosen font height */
text-decoration:blink;
vertical-alignment:middle;
text-indent:1em;
}

/*** Horizontal menu ***/

#mainmenu {
	float:left;				/* float (left,right,none) allows to float text around other elements like image */
	margin-bottom:2px;
}

#mainmenu ul {
font-size:16px;
margin:0;
padding:0;
}

#mainmenu li {
float:left;
height:35px;
list-style:none;			/* list-style: [ <list-style-type> || <list-style-position> || <list-style-image> ]
						list-style-type :  disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha |
								   upper-alpha | none
						list-style-position: inside | outside		(inside : lines will map under the marker)
						list-style-image:  <url> | none			define which image to use as marker symbol
					*/
margin:0;
padding:0;
}

#mainmenu a {
border-right:1px solid #b0b0b0;         /* BOX property border : cfr padding & margin
						border-top-width: thin | medium | thick | <length>
						border-right-width: thin | medium | thick | <length>
					      	border-bottom-width: thin | medium | thick | <length>
						border-left-width: [ thin | medium | thick | <length>
						border-width: [ thin | medium | thick | <length> ]{1,4}

						border-color: top right bottom left f.ex. border-color: #123 #234 #234 #345
						border-style: [ none | dotted | dashed | solid | double | groove | ridge | inset |outset ] {1,4}

					   shortcuts :
						border-top: [ <border-top-width> || <border-style> || <border-color> ]
						border-right: [ <border-right-width> || <border-style> || <border-color> ]
						border-bottom: [ <border-bottom-width>|| <border-style> || <border-color> ]
						border-left: [ <border-left-width> || <border-style> || <border-color> ]
						border: [ <border-width> || <border-style> || <border-color> ]
					*/
color:#606060;
display:block;                          /* display possibilities :      describes how an element is displayed
						block    		new rectangular block (p, h1,...)
						inline                  new area on the same line !!
						list-item               same as block + list item marker
						run-in                  inline or block depending on context
						inline-block            flows like an image
						none
					*/
font-size:0.7em;           		/* 0.7 times the chosen font height */
padding:11px 10px 10px;
text-transform:uppercase;		/* transforms all text to upper case chars. others: capitalize, lowercase */
}

#mainmenu a:hover {
background:#f0f0f0 url(img/menuhover.jpg) top left repeat-x;
color:#505050;
text-decoration:blink;
}

#mainmenu a.current {
background:#f0f0f0 url(img/menuhover.jpg) top left repeat-x;
color:#505050;
text-decoration:blink;
}

/*** Content wrap ***/

#wrap {
	clear:both;				/* clear makes sure that float of previous is cleared (none, left, right, both) */
	font-size:0.9em;
	padding:0;
}

/*** Sidebars ***/

#leftside,#rightside {
margin:0;
padding:0 10px 10px;
width:165px;	 			/* width and height are used for images combining them with auto value (for one) will maintain aspect ration!! */
}

#leftside {
float:left;
margin-right:10px;
}

#rightside {
float:right;
margin-left:10px;
}

#leftside h1,#rightside h1 {
color:#505050;
font-size:1.6em;
font-weight:bold;
letter-spacing:-1px;
margin:0 0 12px;
line-height:1.1em;
}

#leftside h2,#rightside h2 {
font-size:1.1em;
margin:0 0 20px;
}

#leftside p,#rightside p {
font-size:0.9em;
line-height:1.1em;
margin:0 0 16px 10px;
}

.linklist {
list-style:none;
margin:0 0 16px 10px;
padding:0;
}

.linklist li {margin-bottom:0.7em;}

/*** Sidebar menu ***/

.nav {
background:#e8e9ea;
border:1px solid #b0b0b0;		/* contraction of border-width, border-style and border-color */
color:#606060;
display:block;
margin-top:8px;
padding:5px 4px 4px 10px;
position:relative;			/* position of block element : static / relative/ absolute/fixed */
text-transform:uppercase;
width:140px;
}

.nav:hover,.active {
background:#f8f9fa;
border:1px solid #909090;
color:#303030;
text-decoration:none;
}

.sub {
font-size:0.8em;
letter-spacing:1px;
margin:3px 0 2px 10px;
padding:4px 2px 2px 8px;
width:125px;
}

/*** Content ***/

#content,#contentalt {
background-color:#fafcff;		/* this sets background color, possible with transparant */
border:1px solid #909090;
color:#2a2a2a;
padding:0px 0px 0px;
text-align:center;
}

#content {margin:0 220px;}
#contentalt {margin:0 200px 0 20px;}

#content h1,#content h2,#contentalt h1,#contentalt h2 {
background-color:inherit;
color:#606060;
font-size:2.8em;
font-weight:bold;
letter-spacing:-1px;
margin:0 0 15px;
padding:0;
}

#content h2,#contentalt h2 {
font-size:1.6em;
margin-bottom:10px;
}

#content img,#contentalt img {
border:1px solid #b0b0b0;
float:center;
margin:5px 15px 6px;
padding:5px;
}

/*** Footer ***/

#footer {
background:#8b8b8b url(img/footerbg.jpg) top left repeat-x;
clear:both;
color:#d0d0d0;
font-size:0.9em;
font-weight:bold;
margin:0;
padding:20px 0;
text-align:center;
width:100%;
}

#footer a {
color:#d0d0d0;
font-weight:bold;
}

/*** Various classes ***/

/* elements of a specific element can be grouped into classes : HTML CLASS attribute
   f.ex. when talking about the element p you can have  p.mytext, p.histext
   Classes are really HTML detailed elements and should be called  IN THE BODY.
   The following classes indicated with a dot can be used IN ANY ELEMENT !!!
   Classes should be used over multiple elements  divide up a document into semantic classes
*/

.thumbnail {
background:#fafbfc;
border:1px solid #b0b0b0;
margin:0 0 10px 10px;
padding:5px;
}

.searchform {margin:0;}

.searchbox {
background:#f0f0f0;
border:1px solid #b0b0b0;
margin:0 4px 0 0;
width:100px;				/* width and height will maintain aspect ratio when one is set to auto.  default is auto */
height:auto:
}

.searchbutton {
background:#f0f0f0;
border:1px solid #b0b0b0;
}

.clearingdiv {
clear:both;
height:30px;
width:1px;
}

.hide {display:none;}



/*** Text format ***/

.intro {
font-size:1.1em;
font-weight:bold;
letter-spacing:-1px;
}

.small {font-size:0.8em;}
.large {font-size:1.4em;}
.center {text-align:center;}
.right {text-align:right;}



/* additions of Stefan */

p:first-line {               			/* pseudo class the paragraph by defining rules for the first line */
text-transform:capitalize;
font-weight:bold;
}


/*P:first-letter { 				/* pseudo class the first letter of a paragraph to float left (pictures) and be 2 times bigger */
font-size: 200%;
float: left }*/


a:link {        				/* pseudo class all links to be red */
color: red
}

a:active {					/* pseudo class all active links to be green and bigger font */
color: green;
font-size: 140%
}

a:visited {					/* pseudo class all visited links to be smaller font and blue without undeline */
color: blue;
font-size: 80%;
text-decoration: none
}



/*** End of file ***/