/* -------- Document status:

Werkdocument. Dit is het overkoepelende gedeelte; de navigatie is er uit omdat ik dan met twee verschillende soorten kan werken.


 ------------------  */



/* Global whitespace reset */

* {
margin: 0;
padding: 0;
}

a:link {
color: #999;
text-decoration: none;
}

a:visited {
color: #999;
text-decoration: none;
}

a:hover {
color: black;
text-decoration: underline;
}

a:active {
color: black;
text-decoration: underline;
background: white;
}

a.aanpassen:link {
width: 100%;
background: yellow;
color: black;
border-bottom: 1px dotted black;
}

a.aanpassen:visited {
width: 100%;
background: yellow;
color: black;
border-bottom: 1px dotted black;
}

a.aanpassen:hover {
text-align: center;
background: yellow;
color: black;
border-bottom: 1px solid black;
}

a.aanpassen:active {
width: 100%;
background: yellow;
color: black;
border: 1px dotted black;
}

p {
font-size: 0.85em;
}

p.small {
font-size: small;
}

body {
font-family: "century gothic";
background: url("/pic/bg.png") #FFCC33;
}

.hide {
display: none;
}

.show {
display: list-item;
}

.small {
font-size: smaller;
}

.vet {
font-weight: bold;
}

.onderstreep {
text-decoration: underline;
}

.longtitle {
font-size: 1.5em;
}

.movie {
	border: 1px solid black;
}

.groepsnaam {
	text-align: center;
	font-weight: normal;
}

h1.savetitle {
float: left;
}

a.save img {
margin-left: 25px;
padding-top: 10px;
clear: right;
border: 0;
}

ul.short {
font-size: smaller;
margin-left: 25px;
}

ul.intext {
font-size: 0.85em;
margin-left: 25px;
padding: 0;
}

.box {
border: 1px solid #999;
background: #e6e6e6;
padding: 20px;
}

/* Navigatie "Rainbow" */

#navmov {
height: 200px;
clear: both;
}

ul.nav {
list-style-type: none;
}

ul.nav li, ul.nav li a {
float: left;
height: 200px;
overflow: hidden;
}

ul.nav li a img {
border: 0px solid #999;
}

ul.nav li a.home {
background: url("pic/01_lihome.jpg") left top;
}

ul.nav li a.home:hover {
background: url("pic/01_lihome.jpg") right top;
}

ul.nav li a.algemeen {
background: url("pic/02_lialgemeen.jpg") left top;
}

ul.nav li a.algemeen:hover {
background: url("pic/02_lialgemeen.jpg") right top;
}

ul.nav li a.schoolgids {
background: url("pic/03_lischoolgids.jpg") left top;
}

ul.nav li a.schoolgids:hover {
background: url("pic/03_lischoolgids.jpg") right top;
}

ul.nav li a.groepen {
background: url("pic/04_ligroepen.jpg") left top;
}

ul.nav li a.groepen:hover {
background: url("pic/04_ligroepen.jpg") right top;
}

ul.nav li a.kalender {
background: url("pic/05_likalender.jpg") left top;
}

ul.nav li a.kalender:hover {
background: url("pic/05_likalender.jpg") right top;
}

ul.nav li a.nieuwsbrief {
background: url("pic/06_linieuwsbrief.jpg") left top;
}

ul.nav li a.nieuwsbrief:hover {
background: url("pic/06_linieuwsbrief.jpg") right top;
}

ul.nav li a.ouders {
background: url("pic/07_liouders.jpg") left top;
}

ul.nav li a.ouders:hover {
background: url("pic/07_liouders.jpg") right top;
}

ul.nav li a.video {
background: url("pic/08_livideo.jpg") left top;
}

ul.nav li a.video:hover {
background: url("pic/08_livideo.jpg") right top;
}

ul.nav li a.schoolkrant {
background: url("pic/09_lischoolkrant.jpg") left top;
}

ul.nav li a.schoolkrant:hover {
background: url("pic/09_lischoolkrant.jpg") right top;
}

ul.nav li a.contact {
background: url("pic/10_licontact.jpg") left top;
}

ul.nav li a.contact:hover {
background: url("pic/10_licontact.jpg") right top;
}

/* Einde Navigatie "Rainbow" */

#contain {
float: left;
width: 720px;
border-right: 1px solid black;
border-bottom: 2px solid black;
background: url("pic/mainbg.gif") repeat-y #E50000;
}

#contain_nosidebar {
float: left;
width: 720px;
border-right: 1px solid black;
border-bottom: 2px solid black;
background: #FFFFDA;
}

.head {
float: left;
border: solid 1px black;
border-left: 0;
border-right: 0; 
}

#main {
float: left;
width: 449px;
padding: 25px;
min-height: 300px;
}

#main_nosidebar {
float: left;
width: 669px;
padding: 25px;
min-height: 300px;
}

#main a img {
border: 0;
}

/* Hier begint de omschrijving van de sidebar */

#sidebar {
float: right;
width: 220px;
border: 1px solid black;
border-right: 0;
border-top: 0;
margin-bottom: 1em;
overflow: hidden;
}

#sidebar p {
font-size: 0.8em;
padding: 10px 25px;
}

#sidebar img.top {
border-bottom: 1px solid black;
margin-bottom: 0;
}

#sidebar img.bottom {
border-top: 1px solid black;
border-bottom: 1px solid black;
margin-bottom: -5px;
}

#sidebar a, .foot a {
color: black;
text-decoration: none;
}

#sidebar a:hover, .foot a:hover  {
border-bottom: 1px solid;
}

/* --- Hier wordt het submenu omschreven --- */

#sidebar ul {
margin-top: 6px;
margin-bottom: 10px;
list-style: none;
border-bottom: 1px solid black;
}

#sidebar ul li {
display: block;
font-size: 0.9em;
border-top: 1px solid black;
padding: 0.2em 0 0.3em 0.5em;
}

#sidebar ul.groepen li {
padding: 0.2em 0 0.3em 0.5em;
font-size: 0.8em;
}

#sidebar ul li ul {
margin-left: -7px;
}

#sidebar ul li ul li {
padding-left: 20px;
}

#sidebar ul li ul li.last {
margin-bottom: -14px;
border-bottom: 0;
}


/* - Submenu home - */

#sidebar.home {
	background: #FFFF00;
}

.home {
	background: #FFFF00;
}

#sidebar.home ul {
	background: #FFFF00;
}

#sidebar.home ul li:hover {
	background: #FFFF4D;
}


/* - Submenu algemeen */

#sidebar.algemeen {
	background: url("pic/line.gif") #99FF00;
}

.algemeen {
	background: url("pic/line.gif") #99FF00;
}

#sidebar.algemeen ul {
	background: #99FF00;
}

#sidebar.algemeen ul li:hover {
	background: #B8FF4D;
}

/* - Submenu schoolgids - */

#sidebar.schoolgids {
background: url("pic/line.gif") #33CC33;
}

.schoolgids {
background: url("pic/line.gif") #33CC33;
}

#sidebar.schoolgids ul {
background: #33CC33;
}

#sidebar.schoolgids ul li:hover {
background: #61CC61;
}

/* - Submenu groepen - */

#sidebar.groepen {
background: url("pic/line.gif") #33FF99;
}

.groepen {
background: url("pic/line.gif") #33FF99;
}

#sidebar.groepen ul {
background: #33FF99;
}

#sidebar.groepen ul li:hover {
background: #71FFB8
}

/* - Submenu kalender - */

#sidebar.kalender {
background: url("pic/line.gif") #33FFCC;
}

.kalender {
background: url("pic/line.gif") #33FFCC;
}

#sidebar.kalender ul {
background: #33FFCC;
}

#sidebar.kalender ul li:hover {
background: #71FFDB;
}

/* - Submenu nieuwsbrief - */

#sidebar.nieuwsbrief {
background: url("pic/line.gif") #3399FF;
}

.nieuwsbrief {
background: url("pic/line.gif") #3399FF;
}

#sidebar.nieuwsbrief ul {
background: #3399FF;
}

#sidebar.nieuwsbrief ul li:hover {
background: #71B8FF;
}

/* - Submenu ouders - */

#sidebar.ouders {
background: url("pic/line.gif") #333366;
}

.ouders {
background: url("pic/line.gif") #333366;
}

#sidebar.ouders ul {
background: #333366;
}

#sidebar.ouders ul li:hover {
background: #424266;
}

#sidebar.ouders a {
color: white;
}

/* - Submenu projecten - */

#sidebar.projecten {
background: url("pic/line.gif") #FF33cc;
}

.projecten {
background: url("pic/line.gif") #FF33cc;
}

#sidebar.projecten ul {
background: #FF33cc;
}

#sidebar.projecten ul li:hover {
background: #FF71DB;
}

/* - Submenu schoolkrant - */

#sidebar.schoolkrant {
background: url("pic/line.gif") #CC0000;
}

.schoolkrant {
background: url("pic/line.gif") #CC0000;
}

#sidebar.schoolkrant ul {
background: #CC0000;
}

#sidebar.schoolkrant ul li:hover {
background: #CC3E3E;
}

/* Submenu contact */

#sidebar.contact {
background: #FF6633;
}

#sidebar.contact a {
color: white;
}


/* ----- Einde submenu ----- */

/* Foot */

.foot {
width: 720px;
text-align: center;
font-size: smaller;
color: #333;
padding-top: 0.2em;
}


ul.inhoud {
list-style: none;
}

ul.inhoud li {
font-size: small;
}

ul.inhoud li ul {
padding-left: 25px;
margin-bottom: 0;
list-style: none;
}

table {
margin: 0;
padding: 0;
border: solid 1px;
}

table td {
font-size: small;
padding: 5px;
margin: 0;
}

table th {
text-align: left;
padding: 0 5px;
}

#tabelsmall td{
font-size: x-small;
}

/* omdat de informatie in een lijst ook op de 2e regel soms ook mooi moet zijn uitgelijnd */

.libr {
padding-left: 22px;
}

#next {
border: 1px solid #999;
background: #e6e6e6;
padding: 20px;
text-align: center;
}

/* Fotoframe */

ul.fotoframe {
list-style: none;
}


/*
    Formatting Buttons Stand Alone Entry Form
------------------------------------------------------ */

.buttonMode {
	background-color: transparent;
	color: #73769D;
	font-family: Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif;
	font-size: 10px;
	white-space: nowrap;
	}

.htmlButtonOutter, .htmlButtonOutterL {
	background-color: #f6f6f6;
	border-bottom: #333 1px solid;
	border-right: #333 1px solid;
	border-top: #333 1px solid;
	padding: 0;
	}

.htmlButtonOutterL {
	border-left: #333 1px solid;
	}

.htmlButtonInner {
	background-color: white;
	border-bottom: #ccc 1px solid;
	border-left: #fff 1px solid;
	border-right: #ccc 1px solid;
	border-top: #fff 1px solid;
	padding: 0 3px 0 3px;
	text-align: center;
	}

.htmlButtonOff {
	font-family: Verdana, Arial, Trebuchet MS, Tahoma, Sans-serif;
	font-size: 11px;
	font-weight: bold;
	padding: 1px 2px 2px 2px;
	white-space: nowrap;
	}

.htmlButtonOff a:link {
	color: #000;
	text-decoration: none;
	white-space: nowrap;
	}

.htmlButtonOff a:visited {
	text-decoration: none;
	}

.htmlButtonOff a:active {
	color: #999;
	text-decoration: none;
	}

.htmlButtonOff a:hover {
	color: #999;
	text-decoration: none;
	}

.htmlButtonOn {
	background: #f6f6f6;
	font-family: Verdana, Arial, Trebuchet MS, Tahoma, Sans-serif;
	font-size: 11px;
	font-weight: bold;
	padding: 1px 2px 2px 2px;
	white-space: nowrap;
	}

.htmlButtonOn a:link {
	color: #990000;
	text-decoration: none;
	white-space: nowrap;
	}

.htmlButtonOn a:visited {
	text-decoration: none;
	}

.htmlButtonOn a:active {
	color: #999;
	text-decoration: none;
	}

.htmlButtonOn a:hover {
	color: #999;
	text-decoration: none;
	}

.htmlButtonA {
	font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
	font-size: 11px;
	font-weight: bold;
	padding: 2px 3px 3px 3px;
	white-space: nowrap;
	}

.htmlButtonB {
	background: #E1E3EC;
	font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
	font-size: 11px;
	font-weight: bold;
	padding: 2px 3px 3px 3px;
	white-space: nowrap;
	}

.htmlButtonA a:link {
	color: #000;
	font-weight: bold;
	text-decoration: none;
	white-space: nowrap;
	}

.htmlButtonA a:visited {
	text-decoration: none;
	}

.htmlButtonA a:active {
	color: #999;
	text-decoration: none;
	}

.htmlButtonA a:hover {
	color: #999;
	text-decoration: none;
	}

.htmlButtonB a:link {
	color: #990000;
	font-weight: bold;
	text-decoration: none;
	white-space: nowrap;
	}

.htmlButtonB a:visited {
	text-decoration: none;
	}

.htmlButtonB a:active {
	color: #999;
	text-decoration: none;
	}

.htmlButtonB a:hover {
	color: #999;
	text-decoration: none;
	}

/*
    Opmaak Kalender
------------------------------------------------------ */

table.kiesmaand td {
border: 1px solid black;
text-align: center;
width: 134px;
height: 85px;
}

table.kiesmaand a {
font-size: 1.5em;
color: black;
}

table.kiesmaand td.maand1 {
background: #FEFF01;
}

table.kiesmaand td.maand2 {
background: #CAFF33;
}

table.kiesmaand td.maand3 {
background: #99FF99;
}

table.kiesmaand td.maand4 {
background: #65CC33;
}

table.kiesmaand td.maand5 {
background: #339966;
}

table.kiesmaand td.maand6 {
background: #00FFFF;
}

table.kiesmaand td.maand7 {
background: #0099FF;
}

table.kiesmaand td.maand8 {
background: #6665FE;
}

table.kiesmaand td.maand9 {
background: #6633FF;
}

table.kiesmaand td.maand10 {
background: #FF339A;
}

table.kiesmaand td.maand11 {
background: #FF6634;
}

table.kiesmaand td.maand12 {
background: #CC0001;
}

table.maand {
width: 675px;
background: #EBF7FF; 
}

table.maand td {
position: relative;
width: 93px;
height: 93px;
}

table.maand td.calendarDayHeading, table.maand th {
height: 25px;
text-align: center;
}

table.maand td.calendarCell {
border: 1px solid #C5E8FE;
text-align: left;
vertical-align: top;
}

table.maand td.calendarToday {
border: 1px solid #000;
text-align: left;
vertical-align: top;
}

.calendarMonthLinks a {
color: #002036;
}

table.ef {
width: 670px;
border: 3px solid black;
padding: 25px;
}

table.ef p {
font-size: 1.2em;
}

table.ef td.buttons {
background: #FFFF33;
border: 1px solid black;
padding: 25px;
}

table.ef td.enter1, table.ef td.enter2 {
border-right: 1px solid black;
padding-right: 25px;
}

table.ef td.enter2 {
border-top: 0px solid black;
}


table.ef td.hulp1, table.ef td.hulp2 {
background: #FFFFB3;
padding-left: 25px;
}

table.ef td.hulp2 {
border-top: 0px solid black;
}

table.ef td.hulp p {
font-size: 1em;
}

p.big {
font-size: x-large;
}

/* Randje om filmpjes */

.mov {
border: 1px solid black;
}

/* Slideshow */

#slideshow {
position: absolute;
top: 25px;
left: 755px;
border: solid 1px black;
width: 445px;
height: 333px;
overflow: hidden;
}


/* Opmaak Date Picker - SAEF */

table.jCalendar {
	border: 1px solid #000;
	background: #aaa;
    border-collapse: separate;
    border-spacing: 2px;
}
table.jCalendar th {
	background: #333;
	color: #fff;
	font-weight: bold;
	padding: 3px 5px;
}
table.jCalendar td {
	background: #ccc;
	color: #000;
	padding: 3px 5px;
	text-align: center;
}
table.jCalendar td.other-month {
	background: #ddd;
	color: #aaa;
}
table.jCalendar td.today {
	background: #666;
	color: #fff;
}
table.jCalendar td.selected {
	background: #f66;
	color: #fff;
}
table.jCalendar td.selected:hover {
	background: #f33;
	color: #fff;
}
table.jCalendar td:hover, table.jCalendar td.dp-hover {
	background: #fff;
	color: #000;
}
table.jCalendar td.disabled, table.jCalendar td.disabled:hover {
	background: #bbb;
	color: #888;
}

/* For the popup */

/* NOTE - you will probably want to style a.dp-choose-date - see how I did it in demo.css */

div.dp-popup {
	position: relative;
	background: #ccc;
	font-size: 10px;
	font-family: arial, sans-serif;
	padding: 2px;
	width: 171px;
	line-height: 1.2em;
}
div#dp-popup {
	position: absolute;
	z-index: 199;
}
div.dp-popup h2 {
	font-size: 12px;
	text-align: center;
	margin: 2px 0;
	padding: 0;
}
a#dp-close {
	font-size: 11px;
	padding: 4px 0;
	text-align: center;
	display: block;
}
a#dp-close:hover {
	text-decoration: underline;
}
div.dp-popup a {
	color: #000;
	text-decoration: none;
	padding: 3px 2px 0;
}
div.dp-popup div.dp-nav-prev {
	position: absolute;
	top: 2px;
	left: 4px;
	width: 100px;
}
div.dp-popup div.dp-nav-prev a {
	float: left;
}
/* Opera needs the rules to be this specific otherwise it doesn't change the cursor back to pointer after you have disabled and re-enabled a link */
div.dp-popup div.dp-nav-prev a, div.dp-popup div.dp-nav-next a {
	cursor: pointer;
}
div.dp-popup div.dp-nav-prev a.disabled, div.dp-popup div.dp-nav-next a.disabled {
	cursor: default;
}
div.dp-popup div.dp-nav-next {
	position: absolute;
	top: 2px;
	right: 4px;
	width: 100px;
}
div.dp-popup div.dp-nav-next a {
	float: right;
}
div.dp-popup a.disabled {
	cursor: default;
	color: #aaa;
}
div.dp-popup td {
	cursor: pointer;
}
div.dp-popup td.disabled {
	cursor: default;
}