/************************************* * DRAAIENDE BALLEN * **************************************/ #divBoard {/* Uithangbord parameters die gelden voor zowel kerstman, Sint, als verjaarmeisje: */ position: absolute; top: 55px; overflow:hidden; /*Zorgt ervoor dat uitstekende spots van schijnwerpers niet zicht baar zijn buiten de div, dwz het scherm waarop geprojecteerd wordt.*/ z-index: 28; /* Uithangbord met parameters specifiek voor sinterklaas als voorlezer: */ left:207px; width:420px; height:170px; background-color:#8fcefa; border-radius:20px; -moz-border-radius:20px; border: 5px ridge #bd0814; /* "width style color", style=ridge: zorgt voor de mooie rand van het scherm/bord waarop de tekst staat.*/ box-shadow:0px 0px 1px 2px #87c9fb inset; /* Uithangbord met parameters specifiek voor de kerstman als voorlezer: left: 212px; height: 160px; width:411px; background-color:#629bde; border: #33ccff; border-width:5px; border-style:ridge; /*zorgt voor de mooie rand van het scherm/bord waarop de tekst staat. border-radius:6px; -moz-border-radius:6px;*/ } #divhintcursor {position: absolute; left: 200px; top: 300px; z-index: 500; } #textSint,#textSanta,#textVerjaarmeisje {font-size: 15px; font-family: Georgia, serif, Univers, Verdana, helvetica, Lucida Console, Arial, Times New Roman; font-style: italic; text-align:center; position: absolute; left: 201px; z-index: 29; width: 440px; padding-top: 10px;} #textSint {font-size: 14px;} /*#textSint {font-family: Univers, Verdana, helvetica, Lucida Console, Arial, Times New Roman;} */ #textVerjaarmeisje {font-size: 16px;} #textSanta,#textVerjaarmeisje {z-index: -1;} #textSint {top: 64px; height: 90px; color: #660000;} #textVerjaarmeisje {top: 80px; height: 110px; color:#001100; } #textSanta {top: 57px; height: 110px; color:#330066; } #textSint p,#textSanta p,#textVerjaarmeisje p {padding: 0px 0px;} #schijnwerper_links{position: absolute; left: 167px; top: -12px; transform: rotate(9deg); -ms-transform: rotate(9deg); /* IE 9 */ -webkit-transform: rotate(9deg); /* Safari and Chrome */ -o-transform: rotate(9deg); } #schijnwerper_midden{position: absolute; left: 408px; top: 0px; transform: rotate(50deg); -ms-transform: rotate(50deg); /* IE 9 */ -webkit-transform: rotate(50deg); /* Safari and Chrome */ -o-transform: rotate(50deg); } #schijnwerper_rechts{position: absolute; left: 779px; top: 15px; transform: rotate(120deg); -ms-transform: rotate(120deg); /* IE 9 */ -webkit-transform: rotate(120deg); /* Safari and Chrome */ -o-transform: rotate(120deg); } #schijnwerper_links,#schijnwerper_midden,#schijnwerper_rechts {z-index: 20; cursor : pointer;} #schijnwlicht_l {position: absolute; left: 200px; top: 40px; width:160px; height: 150px; transform: matrix(0.9877,0.1564,-0.1564,-0.9877,0,-10);/*20 gr, 20 gr*/ -moz-transform: matrix(0.9877,0.1564,-0.1564,-0.9877,0,-10px); -webkit-transform: matrix(0.9877,0.1564,-0.1564,-0.9877,0,-10); -o-transform: matrix(0.9877,0.1564,-0.1564,-0.9877,0,-10); border-top-left-radius:100%; border-top-right-radius:100%; border-bottom-right-radius:100%; border-bottom-left-radius:6em; } #schijnwlicht_m{ position: absolute; left: 340px; top: 25px; width:200px; height: 200px; transform: matrix(0.7071,-0.5736,-0.8571,-0.4192,0,0);/*alfa=30 gr, betha=-15 gr, alfa =hoek x-as, beta=hoek y-as*/ -moz-transform: matrix(0.7071,-0.5736,-0.8571,-0.4192,0,0); -webkit-transform: matrix(0.7071,-0.5736,-0.8571,-0.4192,0,0); -o-transform: matrix(0.7071,-0.5736,-0.8571,-0.4192,0,0); border-top-left-radius:70%; border-top-right-radius:70%; border-bottom-right-radius:20%; border-bottom-left-radius:70%; } #schijnwlicht_r{ position: absolute; left: 450px;/*470px;*/ top: 5px; width:300px;/*250px;*/ height: 230px;/*130px;*/ border-top-left-radius:100%; border-top-right-radius:70%; border-bottom-right-radius:40%; border-bottom-left-radius:50%; /*transform: matrix(0,1,0.7,0.7,0,0);/*alfa=30 gr, betha=-15 gr, alfa =hoek x-as, beta=hoek y-as*/ transform: matrix(0.9,-0.17,0.7,-0.7,0,0); -moz-transform: matrix(0.9,-0.17,0.7,-0.7,0,0); -webkit-transform: matrix(0.9,-0.17,0.7,-0.7,0,0); -o-transform: matrix(0.9,-0.17,0.7,-0.7,0,0); /*border-radius: 100% 25% 100% 100%; /*top-left top-right bottum-right bottem-left*/ } #schijnwlicht_l,#schijnwlicht_m,#schijnwlicht_r {background-color:#629bde; box-shadow: inset 0px 0px 5px 5px #99ffff; -webkit-box-shadow: inset 0px 0px 5px 5px #99ffff; -moz-box-shadow: inset 0px 0px 5px 5px #99ffff; z-index: 20; filter:alpha(opacity=40); /* for IE */ opacity:0.4; /* CSS3 standard */ } #schijnwspot_l{ position: absolute; left: -4px; top: -18px; width:140px; height: 140px; border-radius: 90% 100% 90% 100%; /* top-left top-right bottum-right bottem-left*/ filter:alpha(opacity=90); /* for IE */ opacity:0.9; /* CSS3 standard */ } #schijnwspot_r {position: absolute; left: 260px; top: -2px; width:190px; height: 140px; border-radius: 100% 35% 95% 25%; /* top-left top-right bottum-right bottem-left*/ filter:alpha(opacity=90); /* for IE */ opacity:0.9; /* CSS3 standard */ } #schijnwspot_m {position: absolute; left: 113px; top: -17px; width:220px; height: 220px; border-radius: 100%; /*top-left top-right bottum-right bottem-left*/ filter:alpha(opacity=94); /* for IE */ opacity:0.94; /* CSS3 standard */ } #schijnwspot_l,#schijnwspot_m,#schijnwspot_r {background-color:#FFF; box-shadow: 0px 0px 4px 4px #FFF; -webkit-box-shadow: 0px 0px 4px 4px #FFF; -moz-box-shadow: 0px 0px 4px 4px #FFF; z-index: 29;} #divkerstboom {position: absolute; left: 400px; top: 75px; z-index: 29; filter:alpha(opacity=80); /* for IE */ opacity:0.8; /* CSS3 standard */ } /*img.kerstboom {width:240px;} img.kerstversiering_rechts {position: absolute; left: 270px;top: 35px; } im.kerstsneeuw {position: absolute; left: 10px;top: 0px;}/*bestaat niet meer*/ #divBordIllustratie {position: absolute; left: 0px;top: -15px; /* height:170px; width:411px; werken hier niet=>direct in im div. */} #divSintdraaiend {position: absolute; left: 500px;top: 170px;cursor : pointer;} #divKerstmandraaiend {position: absolute; left: 500px;top: 170px;cursor : pointer;} #divVerjaardagdraaiend {position: absolute; left: 500px;top: 170px; filter:alpha(opacity=0); /* for IE */ opacity:0.0; /* CSS3 standard */ cursor : pointer;} #divbalblauwdraaiend,#divbalgroendraaiend, #divbalgouddraaiend,#divbalrooddraaiend,#divbalturquasedraaiend,#divbalwitgroendraaiend, #divbalwitoranjedraaiend,#divbalwitrooddraaiend,#divbalgeelrooddraaiend {position: absolute; left: 250px;top: 350px; filter:alpha(opacity=80); /* for IE */ opacity:0.8; /* CSS3 standard */} #divbalwitoranjevoorgronddraaiend {position: absolute; left: 250px;top: 350px; filter:alpha(opacity=80); /* for IE */ opacity:0.8; /* CSS3 standard */ cursor: pointer;} #divbalwitoranjedraaiend {cursor: pointer;} #klickenRijmVoorlezer {position: absolute; left: 243px; top: 490px; text-align:center;} #klickenRijmVoorlezer h1 {font-size: 100%;color:#000;font-weight:normal;line-height: 1.5em;}