[opencms-dev] Using a CSS Stylesheet in OpenCMS 5.01

[visser arthur (02VOEMDIAHTKAND)]

I've created a template and tried to include a CSS stylesheet using the following line of code in the XML template file:

<stylesheet>../system/modules/nl.bodyplan.site/resources/bps.css</stylesheet>

The bps.css is a plain text file stored in /resources/ (I attached it to this mail as bps_css.txt, in OpenCMS it's called bps.css). 
The stylesheet does not seem to work. Can anyone tell me how to 'activate' a stylesheet in a template? What properties are required?
Is this the correct syntax for stylesheets in OpenCMS?
Thanks for your help or suggestions.

OpenCMS 5.0.1
XP Home SP2
Java SDK 1.4.2
Tomcat 5.0.18

Arthur
-------------- next part --------------
BODY {
 background: #FFFFFF;}
 
/* PAGE HEADER & LOGO'S */
#kop {
position : absolute;
background: #FFFFFF;
top: 2px;
left : 10px;
width : 98%;
height: 100px;
margin : 0;
border : 1px solid;
color : #FF0000; 
z-index: 5;}

#logolinks {
position: absolute;
top : 2px;
left : 50px;
width : 60px;
margin: 0;
padding: 0;
z-index: 3;
}
#bps {
font : 48px Verdana, Lucida, Arial, Helvetica, sans-serif;
font-weight : bold;
text-align: center;
vertical-align: top;
background: #FFFFFF;
z-index: 5;
}
#logorechts {
position : absolute;
top: 2px;
right: 50px;
width : 60px;
margin: 0;
padding: 0;
z-index: 3;
}
#slogan {
font : 24px Verdana, Lucida, Arial, Helvetica, sans-serif;
font-style : italic;
font-weight : normal;
color: #000000;
background: #FFFFFF;
text-align: center;
vertical-align: bottom;
z-index: 5;
}

/* NAVIGATION BAR USING SEGMLENTS */

/* MAIN BAR */
#nav-org {
position: absolute;
top: 100px;
left: 10px;
width : 98%;
height: 20px;
margin : 0;
background : #FF0000
}
/* BAR SEGMENT */
#nav {
float :left;
width : 10%;
margin : 0;
background : #FF0000
}
/* CONTENT&NEWS LINKS BEHAVIOUR */
p#hotnews a:link, p#hotnews a:visited{
font : 12px Verdana, Lucida, Arial, Helvetica, sans-serif;
color : #FFFFFF;
background : #FF0000;
text-decoration: none;
font-style: normal;
font-weight: bold;
margin: 2px;
vertical-align: middle;
text-align: center;
}
p#hotnews a:hover{
font : 12px Verdana, Lucida, Arial, Helvetica, sans-serif;
color : #0000FF;
background : #FF0000;
text-decoration: none;
font-style: normal;
font-weight: bold;
margin: 2px;
vertical-align: middle;
text-align: center;
}

#nieuws a:link, #nieuws a:visited{
font : 10px Verdana, Lucida, Arial, Helvetica, sans-serif;
color : #FFFFFF;
background : #FF0000;
text-decoration: none;
font-style: normal;
margin: 2px;
vertical-align: middle;
text-align: center;
}
#nieuws a:hover{
font : 10px Verdana, Lucida, Arial, Helvetica, sans-serif;
color : #0000FF;
background : #FF0000;
text-decoration: none;
font-style: normal;
margin: 2px;
vertical-align: middle;
text-align: center;
}
#menu-item {
font : 10px Verdana, Lucida, Arial, Helvetica, sans-serif;
color : #FFFFFF;
text-decoration: none;
font-style: normal;
margin: 2px;
vertical-align: middle;
text-align: center;
}

/* MAIN CONTENT AREA - TEXT & PHOTOS */

/* REGULAR PAGE */
#main{
position : absolute;
top: 135px;
left : 10px;
width : 70%;
height: 65%;
overflow: auto;
margin : 0px;
border : 1px solid;
background : #FFF;
color : #000000; 
z-index: 2;}
#inhoud {
font : 12px Verdana, Lucida, Arial, Helvetica, sans-serif;
font-style : normal;
font-weight : normal;
color: #000000;
text-align: left;
margin: 5px;
vertical-align: top;
z-index: 2;
}

/* NEWS ITEMS */
#news {
position: absolute;
top: 135px;
right : 3%;
width: 25%;
margin : 0px;
background : #FFCCAA;
z-index: 2;
}
#programimage {
position: absolute;
top: 135px;
right : 3%;
width: 25%;
margin : 0px;
background : #FFFFFF;
z-index: 2;
}
/* PAGE WITH NO NEWS - EG CONTACTPAGE */

#main2{
position : absolute;
top: 135px;
left : 10px;
width : 98%;
height: 65%;
overflow: auto;
bottom: 35px;
margin : 0px;
border : 1px solid;
color : #000000; 
z-index: 2;
}

/* PAGE FOOTER & CONTACT DETAILS */

#voet{
position :absolute;
bottom: 20px;
left : 10px;
right: 0;
width : 98%;
overflow:hidden;
height: 30px;
margin : 0px;
border : 1px solid;
color : #FF0000; 
z-index: -1;}

#motto {
font : 12px Verdana, Lucida, Arial, Helvetica, sans-serif;
font-style : normal;
font-weight : bold;
color: #000000;
text-align: center;
vertical-align: top;
z-index: 0;
}
#adres {
font : 10px Verdana, Lucida, Arial, Helvetica, sans-serif;
font-style : normal;
font-weight : normal;
color: #000000;
text-align: center;
vertical-align: top;
z-index:0;}

/* CONTACT FORM TEXT & TABLE */
/* CONTACT FORM TEXT */
p#inhoud2 {
font : 12px Verdana, Lucida, Arial, Helvetica, sans-serif;
font-style : normal;
font-weight : normal;
text-align : center;
color: #0000FF;
margin: 5px;
vertical-align: top;}
/* CONTACT FORM TABLE */
table#mail {
font : 10px Verdana, Lucida, Arial, Helvetica, sans-serif;
color : #000000;
margin : 0;
padding : 0;
width : 90%;}

/* ROOSTER */
table#rooster {
font : 12px Verdana, Lucida, Arial, Helvetica, sans-serif;
color : #000000;
background: #FFFFFF;
align: center;
margin : 0;
padding : 0;
width : 90%;}

/* NAVIGATION BAR USING TABLE */

table#menu-bar {
font : 10px Verdana, Lucida, Arial, Helvetica, sans-serif;
color : #FFFFFF;
text-decoration: none;
font-style: normal;
margin: 0px;
vertical-align: middle;
text-align: center;
width : 98%;}

td a:link, td a:visited{
color : #FFFFFF;
text-decoration: none;
font-style: normal;
margin: 2px;
vertical-align: middle;
text-align: center;
}
td a:hover {
font : 10px Verdana, Lucida, Arial, Helvetica, sans-serif;
color : #0000FF;
text-decoration: none;
font-style: normal;
margin: 2px;
vertical-align: middle;
text-align: center;
}

td#contact a:link, td#home a:link, td#accommodatie a:link, td#mijnbody a:link, td#programma a:link, td#jeugd a:link,
td#faq a:link, td#aanvraag a:link, td#tarieven a:link, td#lid a:link, td#agenda a:link{
font : 10px Verdana, Lucida, Arial, Helvetica, sans-serif;
color : #FFFFFF;
text-decoration: none;
font-style: normal;
margin: 2px;
vertical-align: middle;
text-align: center;
}
td#contact a:hover, td#mijnbody a:hover, td#home a:hover, td#accommodatie a:hover, td#programma a:hover,
td#faq a:hover, td#jeugd a:hover, td#aanvraag a:hover, td#tarieven a:hover, td#lid a:hover, td#agenda a:hover{
font : 10px Verdana, Lucida, Arial, Helvetica, sans-serif;
color : #0000FF;
text-decoration: none;
font-style: normal;
margin: 2px;
vertical-align: middle;
text-align: center;
}
/* DROP DOWN MENU  */
#mainMenu {
  background-color: #FF0000;
  position: relative;
  left: 0%;
  vertical-align: middle;
  top: 0;
  border: 0;
  color: #000;
  margin: 0px;
  padding: 0px 0px 0px 0px;
  
}

#menuList {
  margin: 0px;
  padding: 0px;
  
}

#menuList ul {
  margin: 0px;
  padding: 0px;
  
}

#menuList li {
  display: inline;
  list-style: none;
  
}

a.actuator {
  background-color: #FF0000;
  color: #FFF;
  font-size: 10px;
  margin: 0px;
  padding: 0px 0px;
  text-decoration: none;
  
}

a.actuator:hover {
  background-color: #F00;
  color: #EEE;

}

.menu {
  color: #FFFFFF;
  background-color: #FF0000;
  border: 1px solid #OOFFFF;
  position: absolute;
  visibility: hidden;
  
}

.menu li a {
  background-color: #FF0000;
  color: #FFFFFF;
  display: block;
  font-size: 10px;
  /* line-height: 1.75em; */
  margin: 0px;
  padding: 0px 10px;
  text-decoration: none;

}

.menu li a:hover {
  background-color: #FF0000;
  color: #FFFFFF;
 
}

span.key {
  text-decoration: underline;
}

#ProgramMenu { width: 165px; }
#FaciliteitMenu { width: 165px; }
#LidmaatMenu { width: 165px; }
#JeugdMenu { width: 165px; }
#AgendaMenu { width: 165px; }
#AanvraagMenu { width: 165px; }

/* REGULAR NEWS LINKS */
p#regular a:link, p#regular a:visited{
font : 12px Verdana, Lucida, Arial, Helvetica, sans-serif;
color : #0000FF;
background : #FFCCAA;
text-decoration: none;
font-style: normal;
margin: 2px;
vertical-align: middle;
text-align: center;
}
p#regular a:hover{
font : 12px Verdana, Lucida, Arial, Helvetica, sans-serif;
color : #FFFFFF;
background : #FFCCAA;
text-decoration: none;
font-style: normal;
margin: 2px;
vertical-align: middle;
text-align: center;
}
/* TEXT LINKS */
p#tekst a:link, p#tekst a:visited{
font : 12px Verdana, Lucida, Arial, Helvetica, sans-serif;
color : #0000FF;
background : #FFFFFF;
text-decoration: none;
font-style: normal;
margin: 2px;
vertical-align: middle;
text-align: center;
}
p#tekst a:hover{
font : 12px Verdana, Lucida, Arial, Helvetica, sans-serif;
color : #00FFFF;
background : #FFFFFF;
text-decoration: none;
font-style: normal;
margin: 2px;
vertical-align: middle;
text-align: center;
}