/* met de onderstaande elementen kun je de look van hyperlinks beinvloeden */
A:link { text-decoration: none; color: #353535 }
A:hover { text-decoration: none; color: #F87000 }
A:active { text-decoration: none; color: #353535 }
/* de onderstaande overrulet het effect van A:hover daarom stel ik hier de kleur niet in en 
krijgen de visited links een kleur van de browser, tenzij in de body vlink gebruikt wordt */
A:visited { text-decoration: none }

/* met de onderstaande elementen kun je de look van hyperlinks beinvloeden */
A.footer:link { text-decoration: none; color: #FFFFFF }
A.footer:hover { text-decoration: none; color: #FFFFFF }
A.footer:active { text-decoration: none; color: #FFFFFF }
/* de onderstaande overrulet het effect van A:hover daarom stel ik hier de kleur niet in en 
krijgen de visited links een kleur van de browser, tenzij in de body vlink gebruikt wordt */
A.footer:visited { text-decoration: none; color: #FFFFFF }

.footerblok
{
 font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 12px;
 color: #FFFFFF;
 background: #310000;
 width:100%;
 marin-left: auto;
 margin-right: auto;
}

/* met de onderstaande elementen kun je de look van hyperlinks beinvloeden */
A.nieuws:link { text-decoration: underline; color: #F87000 }
A.nieuws:hover { text-decoration: none; color: #353535 }
A.nieuws:active { text-decoration: underline; color: #F87000 }
/* de onderstaande overrulet het effect van A:hover daarom stel ik hier de kleur niet in en 
krijgen de visited links een kleur van de browser, tenzij in de body vlink gebruikt wordt */
A.nieuws:visited { text-decoration: underline; color: #F87000 }

body {
 height:100%; background:#6a0000 url('http://www.fczutphen.nl/web/images/bg.jpg')  repeat-x; 
 font-family: Arial, Verdana, Arial, Tahoma, Helvetica, sans-serif;
 font-size: 12px;
 color: #353535;
 background-attachment: fixed
}

.header_pic
{
 height:140px;
 width:990px;
 background: url('http://www.fczutphen.nl/web/images/headerwebsite.png') no-repeat;
}

.contenttitel
{
 font-family : Trebuchet MS, Verdana, Century Gothic, Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 18px;
 font-weight: bold;
 text-transform: uppercase; 
}

.microtitel
{
 font-family : Trebuchet MS, Verdana, Century Gothic, Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 18px;
 font-weight: bold;
 text-transform: uppercase; 
 color: #F87000;
}

.microinfo
{
 font-family : Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 12px;
 color: #353535;
 background: #EAEAEA;
}

.micro_blok
{
 font-family : Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
 color: #6a0000;
 background: #FFFFFF;
}

ul.pijl { list-style-image: url(http://www.fczutphen.nl/images/bulletpijl.gif); 
}
ul.cirkel { list-style-image: url(images/cirkel.jpg); } 

.slagkleiner
{
 font-family : Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 11px;
}

.slagkleinergrijs
{
 font-family : Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 11px;
 color: #EAEAEA;
}

.slaggroter
{
 font-family : Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 14px;
}

.slaggrotergroot
{
 font-family : Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 14px;
 color: #EAEAEA;
 text-transform: uppercase; 
}

.oranje
{
 font-family : Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 12px;
 color: #F87000;
}

.grijs
{
 font-family : Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 12px;
 color: #EAEAEA;
}

.rood
{
 font-family : Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 12px;
 color: #6a0000;
}

.wit
{
 font-family : Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 12px;
 color: #FFFFFF;
}

.matches
{
 font-family : Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 12px;
}

.loginfield, .searchfield{
background-image: url(http://www.fczutphen.nl/web/images/bg_textfield.gif);
background-repeat: repeat-x;
background-position: 0px 1px;
border: 1px solid #ccc;
padding-left:4px;
}

ul#topnav {
	margin: 0; padding: 0;
	float:left;
	width: 100%;
	list-style: none;
	font-size: 1.1em;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	position: relative; /*--Important--*/
}
ul#topnav li a {
	float: left;
	text-indent: -9999px; /*--Push text off of page--*/
	height: 44px;
}
ul#topnav li:hover a, ul#topnav li a:hover { background-position: left bottom; } /*--Hover State--*/
ul#topnav a.home {
	background: url(nav_home.png) no-repeat;
	width: 78px;
}
ul#topnav a.products {
	background: url(nav_products.png) no-repeat;
	width: 117px;
}
ul#topnav a.sale {
	background: url(nav_sale.png) no-repeat;
	width: 124px;
}
ul#topnav a.community {
	background: url(nav_community.png) no-repeat;
	width: 124px;
}
ul#topnav a.store {
	background: url(nav_store.png) no-repeat;
	width: 141px;
}

.jarig{
background-image: url(http://www.fczutphen.nl/web/images/jarigbalon.jpg);
background-repeat: repeat-x;
}

.kopje
{
 font-family : Trebuchet MS, Verdana, Century Gothic, Arial, Tahoma, Helvetica, sans-serif;
 font-size: 14px;
 text-transform: uppercase;
 color: #F87000;
 background-image:url(http://www.fczutphen.nl/web/images/bg_kopje.gif)
}

.kopjeitv
{
 font-family : Trebuchet MS, Verdana, Century Gothic, Arial, Tahoma, Helvetica, sans-serif;
 font-size: 14px;
 text-transform: uppercase;
 color: #F87000;
}

.kopjekleiner
{
 font-family : Century Gothic, Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 12px;
 color: #F87000;
 background-image:url(http://www.fczutphen.nl/web/images/bg_kopje.gif)
}

.kopjerood
{
 font-family : Century Gothic, Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 14px;
 color: #6a0000;
 background-image:url(http://www.fczutphen.nl/web/images/bg_kopje.gif)
}

.itvhome
{
 font-family : Century Gothic, Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 12px;
 color: #F87000;
 background-image:url(http://www.fczutphen.nl/web/images/bgitv.jpg) 
}

.itvhometitle
{
 font-family : Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 12px;
 color: #f87000;
}

.datumoverzicht
{
 font-family : Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 12px;
 color: #5e5e5e;
}

.contentdate
{
 font-family : Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 10px;
 color: #ffffff;
}

.datenews
{
 font-family : Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 11px;
 font-weight: bold;
 color: #ffffff;
}

.mostrecent
{
 font-family : Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 11px;
 font-weight: bold;
}

.quote
{
 font-family : Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
    color: #ffffff;
}

.poll
{
 font-family : Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 10px;
    color: #414141;
}

.joop
{
 font-family : Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 10px;
 font-weight: bold;
 color: #6a0000;
}

.horizontalslider
{
 font-family : Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 12px;
 color: #FF7800;
}

.header_pic {
	height:140px;
	width:990px;
	background: url('http://www.fczutphen.nl/web/images/headerwebsite.png') no-repeat;
	behavior: url('css/pngfix.htc');			<----- alleen in ie6 style sheet zetten
}

.menu
{
 font-family : Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 12px;
    color: #FF7800;
}

/* noodzakelijk omdat IE 5 en Netscape 6 de font-size niet overerven van body */
table {
 font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 12px;
 color: #353535;
}

/* en omdat Netscape 6 de font-size niet overerft van table */
tr {
 font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 12px;
 color: #353535;
}

/* noodzakelijk omdat Netscape 4.7 de font-family en font-size niet overerft van tr */
th {
 font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 12px;
 color: #353535;
}

td {
 font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
 font-size: 12px;
 color: #353535;
}
#bodyblank {
display:none;
}

/* hieronder wat voorbeelden van wat je evt. ook nog kunt doen in style sheets */

/* dit is een paragraaf met een kader eromheen; je roept het aan met <p> class="kader" */
p.kader {
 display: block;
 text-align: center;
 padding: 10px;
 background: silver;
}

/* hiermee zorg je ervoor dat ongeordende lijsten voor elk item een vierkantje krijgen
   in plaats van een rondje */
ul { list-style-type: square; }

/* hiermee schrijf je aan de browser voor dat de header tags een bepaalde size krijgen
   als je dit weglaat kiest de browser zelf iets dat misschien wel wat aan de grote kant is */

h1 { font-size: 22; }
h2 { font-size: 18; }
h3 { font-size: 14; }