/* v1.0.0 */

/* remove all margins and paddings from elements */

html, body, div, iframe, span, 
h1, h2, h3, h4, h5, h6, hr, p, ol, ul, li, table, tr, td, a, img,
form, select, option, textarea, button, input {margin: 0; padding: 0;}


/* set some defaults */

body {background-color: Black; color: White;}

h1 {font-size: 180%;}
h2 {font-size: 150%;}
h3 {font-size: 120%;}
h4 {font-size: 100%;}
h5 {font-size: 90%;}
h6 {font-size: 80%;}

ol li {margin-left: 20px; list-style-type: decimal;}
ul li {margin-left: 20px; list-style-type: disc;}

table {border-collapse: collapse;}

button {cursor: pointer;}

img {border: none;}


/* default classes for styling */

.abs {position: absolute !important;}
.rel {position: relative !important;}

.dn {display: none !important;}
.db {display: block !important;}
.di {display: inline !important;}
.dli {display: list-item !important;}
.dt {display: table !important;}
/* .dit {display: inline-table !important;} /* not supported by FF? */
.dtr {display: table-row !important;}
/* .dtc {display: table-cell !important;} /* not supported by IE yet */

.fl {float: left !important; display: inline !important;}
.fr {float: right !important; display: inline !important;}
.fc {overflow: auto !important; width: 100% !important; padding: 4px 0;}

.ac {text-align: center !important;}
.al {text-align: left !important;}
.ar {text-align: right !important;}
.aj {text-align: justify !important;}

.vt {vertical-align: top !important}
.vm {vertical-align: middle !important;}
.vb {vertical-align: bottom !important;}

.nw {white-space: nowrap !important;}

.bo {border: 1px solid Black !important;}
.nb {border: none !important;}

ol.loweralpha li {list-style-type: lower-alpha;}

.ptr {cursor: pointer !important;}

.reset {margin: 0px !important; padding: 0px !important;}
.clear {background-color: transparent !important; border: 0px solid !important;}



html, body {width: 100%; height: 100%;}

body {font-family: Baskerville, Verdana, Helvetica, sans-serif; font-size: 10pt;}

h4 {font-weight: normal;}

a {text-decoration: none; color: black;}
a:hover {color: #DD0806;}

#container {position: relative; width: 100%; height: 100%; overflow: hidden;}

#main {position: relative; width: 100%; height: 100%; min-width: 980px; min-height: 700px;}
#main .words {position: absolute; padding: 15px; cursor: default; white-space: nowrap;}
#main .info {color: #DD0806;}
#pos_helper1,
#pos_helper2 {position: absolute; left: 50%; top: 50%; width: 1px; height: 1px;}
#pos_helper1 {z-index: 10;}

#title {position: absolute; padding: 1em; width: 44em; left: -23em; top: -1.5em; border: 1px solid #DD0806;}
#perswinkel, 
#title {background-color: White; color: Black; font-size: 100%; text-align: center; font-weight: normal;}
#title .separator {margin: 0 5px; color: #DD0806;}

#perswinkel {position: absolute; padding: 1em; width: 17em; right: 0; bottom: 0; border: 1px solid #DD0806; z-index: 20;}

.border {background-color: #DD0806; position: absolute;}
.hor {width: 100%; height: 10%; left: 0;}
.vert {width: 10%; height: 100%; top: 0;}

.popup {position: absolute; display: none; background: White; color: Black; width: 25em; padding: 1.5em; border: 1px solid #DD0806; z-index: 10; cursor: default}
.popup h4,
.popup2 h4 {margin-bottom: .3em; text-indent: -1em; margin-left: 1em;}
.popup p {margin-bottom: 1em; text-indent: -1.5em; margin-left: 1.5em;}
.popup2 a {color: #DD0806;}

.popup2 {position: absolute; display: none; background: White; color: Black; width: 42.9em; padding: 1.5em; border: 1px solid #DD0806; z-index: 10; cursor: default}
.popup2 p {margin-bottom: 0.5em; text-indent: -1.5em; margin-left: 1.5em;}
.popup2 p.last {margin-bottom: 0.5em; text-indent: 0; margin-left: 0; color: #DD0806;}

#thumbs {position: absolute; top: -20em; left: -375px; width: 740px; height: 160px; background: #DDD; border: 1px solid #DD0806; margin: 0; padding: 5px;}
#thumbs ul {position: relative; width: 640px; margin: 0 auto;}
#thumbs li {width: 70px; height: 70px; margin: 4px; display: inline; float: left; list-style-type: none; padding: 0; border: 1px solid #DD0806; background: #DD0806;}
#thumbs li.selected,
#thumbs li:hover {border: 1px solid black;}
#thumbs li.selected img,
#thumbs li:hover img {opacity: .25; filter: alpha(opacity=25);}

#pfcontent {position: absolute; bottom: -20em; left: -375px; width: 720px; height: 310px; background: #DDD; border: 1px solid #DD0806; margin: 0; padding: 15px; color: black; overflow: auto;}

#pfcontent h1 {font-size: 130%; font-weight: normal;}
#pfcontent h2 {font-size: 100%; font-weight: normal; margin: 1em 0 .25em .25em; color: #DD0806;}
#pfcontent h3 {font-size: 100%; font-weight: normal; margin: 1em 0 .25em .5em;}
#pfcontent p {margin-bottom: 1em; margin-left: .5em; line-height: 150%;}
#pfcontent .rood {color: #DD0806;}

#pfcontent a {text-decoration: underline; color: #DD0806;}
#pfcontent a:hover {text-decoration: none;}

#pfcontent a.normaal {text-decoration: none; color: Black;}
#pfcontent a.normaal:hover {text-decoration: underline; color: #DD0806;}

div.plaatjes {float: right; margin: 0 20px 0 10px; text-align: center;}
div.plaatjes a img {border: 1px solid #DD0806; margin: 0 0 10px 10px;}
div.plaatjes a img.logo {border: none;}
div.plaatjes a:hover img {border: 1px solid Black;}
div.plaatjes a:hover img.logo {border: none;}