body { font-family: Arial, Verdana, sans-serif; color: #000000; text-align: center; font-size: 12px; line-height: 17px; background: #FFF; } * { margin: 0; padding: 0; } input, textarea { font-size: 11px; font-family: Arial, Verdana, sans-serif; } img { border:0; } p { margin: 0 0 14px 0; } a { color: #000000; } a:hover { color: #b41212; } em { font-weight: bold; } /* ----------- BOX CENTERING WEBSITE ------------ */ #center { position: absolute; top:5px; /* for ie-mac */ left:0; } #box { width: 830px; height: 580px; margin:0 auto; text-align:center; } /* Hide from ie-mac \*/ #center { top:50%; width:100%; margin-top:-300px; text-align:center; min-width:830px; } #leftside { float: left; margin: 0 10px 0 0; } #news { width: 129px; text-align: left; } #navigation { text-align: right; font-size: 10px; width: 129px; margin: 8px 0 0 0; } #navigation li { list-style: none; margin: 0 0 1px 0; } #navigation li a { display: block; width: 129px; height: 18px; padding: 2px 0 0 0; background: url(../images/menu_bg.gif) no-repeat; text-decoration: none; } #navigation li a span { background: #917878; padding: 0 5px; font-weight: bold; } #navigation li a:hover { color: #FFF; } #navigation li a.active { background: url(../images/menu_bg_hover.gif) no-repeat; } #navigation li a.active span { background: #eec400; } #navigation li a.active:hover { color: #000; } #navigation a.home { background: #b41212; color: #FFF; font-weight: bold; text-decoration: none; width: 124px; padding: 0 5px 0 0; display: block; margin: 0 0 3px 0; } #navigation a:hover.home { color: #000; } #navigation a.home.active { background: #eec400; color: #000; } #content { width: 645px; height: 408px; float: left; text-align: left; } #content.general { background: url(../images/bg_content_general.jpg) no-repeat; padding: 25px 20px 25px 25px; width: 603px; height: 359px; font-style: italic; } #content.general img { float: left; margin: 0 10px 0 0; } #content.general p { margin: 0 0 13px 0; } #content.links { background: url(../images/bg_content_links.jpg) no-repeat; padding: 26px 25px; width: 598px; height: 356px; } #content.links ul { width: 265px; float: left; margin: 0 0 30px 0; line-height: 12px; /*border-right: 1px solid #b64448;*/ } #content.links ul li { list-style: none; color: #b41212; font-size: 9px; font-weight: bold; margin: 0 0 10px 0; } #content.links ul li a { color: #000; font-size: 12px; font-weight: normal; } #content.links ul li a:hover { color: #b41212; } #content.interviews { text-align: right; background: url(../images/bg_content_interviews.jpg) no-repeat; padding: 46px 25px; width: 598px; height: 316px; } #content.interviews ul { margin: 0 30px 0 0; line-height: 12px; /*border-right: 1px solid #b64448;*/ } #content.interviews ul li { list-style: none; color: #b41212; font-size: 9px; font-weight: bold; margin: 0 0 10px 0; } #content.interviews ul li a { color: #000; font-size: 12px; font-weight: normal; } #content.interviews ul li a:hover { color: #b41212; } #content.lezingen { background: url(../images/bg_content_lezingen.jpg) no-repeat; padding: 70px 25px 26px 400px; width: 218px; height: 312px; font-style: italic; } #content.lezingen a { color: #b41212; } #content.downloads { position: relative; background: url(../images/bg_content_general.jpg) no-repeat; padding: 25px 20px 25px 25px; width: 603px; height: 359px; color: #FFFFFF; } /*#content.downloads img { margin: 20px 0; }*/ #content.downloads ul { margin: 15px 0 25px 15px; color: #b64448; clear: left; } #content.downloads a { font-weight: bold; color: #b64448; } #content.downloads a:hover { color: #000000; } #content.downloads h2 { font-size: 12px; font-style: italic; margin-left: 30px; } #content.downloads h2 span { background: url(../images/yellow_line.png) repeat-x 0 15px; padding-bottom: 15px; } #content.downloads div h2 { margin-left: 0px; } #content.downloads .items a { float: none; } #content.downloads #mask { position: absolute; top: 10px; left: 100px; z-index: 5; } #content.downloads .third-scrollable .items div a { background: url(../images/downloads_little_p.gif) no-repeat; padding: 5px 0 8px 18px; position:absolute; z-index: 100; top: 230px; left: 110px; color:#000; } #content.gallerie { background: url(../images/bg_content_galleries.gif) no-repeat; padding: 35px 25px; width: 598px; height: 338px; } #content.kaartje { background: url(../images/bg_content_kaartjes.jpg) no-repeat; padding: 10px 0; width: 648px; height: 388px; color: #FFFFFF; } #content.boek9schijfjes { padding: 30px 20px 0 400px; width: 225px; height: 378px; font-style: italic; color: #FFF; position: relative; } #content.boek9schijfjes.one { background: url(../images/bg_boek_9schijfjes_pg01.jpg) no-repeat; } #content.boek9schijfjes.two { background: url(../images/bg_boek_9schijfjes_pg02.jpg) no-repeat; padding: 30px 330px 0 90px; } #content.boekRoodlapje { padding: 30px 20px 0 400px; width: 225px; height: 378px; font-style: italic; color: #FFF; position: relative; } #content.boekRoodlapje.one { background: url(../images/bg_boek_roodlapje_pg01.jpg) no-repeat; } #content.boekRoodlapje.two { background: url(../images/bg_boek_roodlapje_pg02.jpg) no-repeat; padding: 30px 325px 0 95px; } #content.boekRoodlapje.two #viewPages:hover { color: #000; } #content.boekOma { padding: 30px 25px 0 400px; width: 220px; height: 378px; font-style: italic; color: #000; position: relative; } #content.boekOma.one { background: url(../images/bg_boek_oma_pg01.jpg) no-repeat; } #content.boekOma.two { background: url(../images/bg_boek_oma_pg02.jpg) no-repeat; padding: 75px 25px 0 400px; height: 333px; } #content.boekOma #viewPages { color: #FFF; } #content.boekOma.two #viewPages { color: #000; } #content.boekOma #viewPages:hover { color: #b41212; } #content.boek123 { padding: 30px 20px 0 400px; width: 225px; height: 378px; font-style: italic; color: #FFF; position: relative; } #content.boek123.one { background: url(../images/bg_boek_123piano_pg01.jpg) no-repeat; } #content.boek123.two { background: url(../images/bg_boek_123piano_pg02.jpg) no-repeat; } #content.boek123.two #viewPages { background: #b41212; padding: 2px 4px; margin-top: 4px; } #content.boek123.two #booknav a#viewPages:hover { background: #FFF; color: #000; } #content.boekStad { padding: 30px 20px 0 400px; width: 225px; height: 378px; font-style: italic; color: #6c5554; position: relative; } #content.boekStad.one { background: url(../images/bg_boek_stad_pg01.jpg) no-repeat; padding-top: 160px; height: 248px; } #content.boekStad.two { background: url(../images/bg_boek_stad_pg02.jpg) no-repeat; padding: 250px 20px 0 20px; width: 605px; height: 158px; } #content.boekStad #viewPages { color: #6c5554; } #content.boekStad #viewPages:hover { color: #b41212; } #content.boekPistache { padding: 45px 25px 0 405px; width: 215px; height: 363px; font-style: italic; color: #b6dae8; position: relative; } #content.boekPistache.one { background: url(../images/bg_boek_pistache_pg01.jpg) no-repeat; padding: 50px 10px 0 400px; width: 235px; height: 358px; } #content.boekPistache.two { background: url(../images/bg_boek_pistache_pg02.jpg) no-repeat; padding-top: 100px; height: 308px; } #content.boekSprookje { padding: 40px 25px 0 400px; width: 220px; height: 368px; font-style: italic; color: #000; position: relative; } #content.boekSprookje.one { background: url(../images/bg_boek_sprookje_pg01.jpg) no-repeat; } #content.boekSprookje.two { background: url(../images/bg_boek_sprookje_pg02.jpg) no-repeat; color: #dccdcc; padding: 30px 18px 0 390px; width: 237px; height: 378px; } #content.boekSprookje span#watchMovie { color: #887d7d; font-style: italic; } #content.boekLinus { padding: 30px 25px 0 400px; width: 220px; height: 378px; font-style: italic; color: #6c5554; position: relative; } #content.boekLinus.one { background: url(../images/bg_boek_linus_pg01.jpg) no-repeat; } #content.boekLinus.two { background: url(../images/bg_boek_linus_pg02.jpg) no-repeat; color: #f0ebe2; padding: 60px 355px 0 95px; width: 195px; height: 348px; } #content.boekLinus.one #viewPages { color: #6c5554; } #content.boekLinus.two #viewPages { color: #FFF; } #content.boekLinus.one #viewPages:hover, #content.boekLinus.two #viewPages:hover { color: #b41212; } #content.boekBriek { padding: 30px 20px 0 400px; width: 225px; height: 378px; font-style: italic; color: #FFF; position: relative; } #content.boekBriek.one { background: url(../images/bg_boek_briek_pg01.jpg) no-repeat; } #content.boekBriek.two { background: url(../images/bg_boek_briek_pg02.jpg) no-repeat; color: #000; padding-top: 70px; padding-right: 10px; width: 235px; height: 338px; } #content.boekBriek.two a#viewPages, #content.boekBriek.two a#listenSound, #content.boekBriek.two a#viewMovie { color: #000; } #content.boekBriek.two a:hover#viewPages, #content.boekBriek.two a:hover#listenSound, #content.boekBriek.two a:hover#viewMovie { color: #b41212; } #content.boekBriek #booknav { width: 240px; font-style: normal; } #content.boekTommie { padding: 55px 20px 0 400px; width: 225px; height: 353px; font-style: italic; color: #000; position: relative; } #content.boekTommie.one { background: url(../images/bg_boek_tommie_pg01.jpg) no-repeat; } #content.boekTommie.two { background: url(../images/bg_boek_tommie_pg02.jpg) no-repeat; padding: 40px 270px 0 155px; width: 220px; height: 368px; } #content.boekKoekboek { padding: 28px 18px 0 405px; width: 222px; height: 380px; font-style: italic; color: #000; position: relative; } #content.boekKoekboek.one { background: url(../images/bg_boek_koek_pg01.jpg) no-repeat; } #content.boekKoekboek h1 { color: #b41212; font-size: 12px; font-style: normal; } #content.boekKoekboek a#viewPages { color: #FFF; float: none; margin: 0 0 30px 0; } #booknav { position: absolute; right: 30px; bottom: 10px; } #booknav img { float: left; } #booknav a { color: #FFF; font-style: normal; text-decoration: none; font-weight: bold; } #booknav a:hover { color: #b41212; } #viewPages, #watchMovie, #listenSound, #viewMovie { display: block; float: left; margin: 6px 0 0 10px; } #content.boekSprookje #viewPages, #content.boekSprookje #watchMovie, #content.boekBriek #viewPages, #content.boekBriek #listenSound, #content.boekBriek #viewMovie { margin-top: -2px; } #content.boekBriek #viewPages, #content.boekBriek #listenSound, #content.boekBriek #viewMovie { margin-top: -10px; } #content.boekBriek #listenSound a, #content.boekBriek #viewMovie a { color: #000;} #content.boekBriek.one #listenSound a, #content.boekBriek.one #viewMovie a { color: #FFF;} #bookthumb { width: 142px; float: left; padding: 20px 0 0 0; position: relative; } #bookthumb a#back { position: absolute; top: 137px; text-indent: -9999px; color: #af0101; font-weight: bold; text-decoration: none; text-transform: uppercase; text-align: left; width: 80px; background: url(../images/arrow_small_red_left.gif) no-repeat 0 1px; padding: 0 0 0 15px; margin: 0 0 10px 22px; display: block; } #bookthumb a:hover#back { text-indent: 0px; } #bookdetail { width: 625px; padding: 0 0 0 10px; margin: 25px 0 0 0; float: left; text-align: left; background: url(../images/vert_line_bookdetail.gif) repeat-y; } #bookdetail h1 { color: #af0101; font-size: 12px; float: left; } #bookdetail h1 span { color: #000; } #bookdetail h1 span.soldout { text-transform: uppercase; font-size: 9px; } #bookdetail img { margin: 2px 3px 3px 6px; } #bookdetail p { margin: 10px 0 0 0; color: #b41212; font-style: italic; } /* root element for the scrollable. when scrolling occurs this element stays still. */ .scrollable, .first-scrollable, .second-scrollable, .third-scrollable { /* required settings */ position:relative; overflow:hidden; width: 690px; height:145px; } .first-scrollable { width: 168px; height: 250px; } .third-scrollable { width: 350px; height: 285px; position: absolute; top: 27px; left: 119px; } /* root element for scrollable items. Must be absolutely positioned and it should have a extremely large width to accomodate scrollable items. it's enough that you set the width and height for the root element and not for this element. */ .scrollable .items, .first-scrollable .items, .second-scrollable .items, .third-scrollable .items { /* this cannot be too large */ width:20000em; position:absolute; clear:both; } /* single scrollable item */ .scrollable img, .first-scrollable img, .second-scrollable img, .third-scrollable img { margin:20px 5px 20px 21px; cursor:pointer; float: left; /*width:100px; height:75px;*/ } /* active item */ .scrollable .active, .first-scrollable .active, .second-scrollable .active { border:2px solid #000; z-index:9999; position:relative; } /* this makes it possible to add next button beside scrollable */ .scrollable, .first-scrollable, .second-scrollable, .third-scrollable { float:left; } #bookSpreads .scrollable, #bookSpreads .first-scrollable, #bookSpreads .second-scrollable { float: none; width: 805px; height: 290px; } /* prev, next, prevPage and nextPage buttons */ a.browse { background:url(../images/hori_large.png) no-repeat; display:block; width:30px; height:30px; float:left; margin:40px 10px; cursor:pointer; font-size:1px; } #bookSpreads a.browse { background:url(../images/hori_large_2.png) no-repeat; float: none; margin: 0; } /* right */ a.right, #bookSpreads a.right { background-position: 0 -30px; clear:right; margin-right: 0px;} #bookSpreads a.right { position: absolute; bottom: 30px; right: 140px; } a.right:hover, #bookSpreads a.right:hover { background-position:-30px -30px; } a.right:active, #bookSpreads a.right:active { background-position:-60px -30px; } /* left */ a.left, #bookSpreads a.left { margin-left: 0px; } #bookSpreads a.left { position: absolute; bottom: 30px; right: 170px; } a.left:hover, #bookSpreads a.left:hover { background-position:-30px 0; } a.left:active, #bookSpreads a.left:active { background-position:-60px 0; } /* up and down */ a.up, a.down { background:url(../images/vert_large.png) no-repeat; float: none; margin: 10px 50px; } /* up */ a.up:hover { background-position:-30px 0; } a.up:active { background-position:-60px 0; } /* down */ a.down { background-position: 0 -30px; } a.down:hover { background-position:-30px -30px; } a.down:active { background-position:-60px -30px; } /* disabled navigational button */ a.disabled { visibility:hidden !important; } /* remove margins from the image */ .items img { margin:0; } /* make A tags our floating scrollable items */ .items a { display:block; float:left; margin:20px 15px; } #logos .items a { margin: 0 15px 0 0; } #kaartjes .items a { margin: 0 15px 0 0; } #bookSpreads .items img { margin: 0 15px 0 0; } /* styling for the image wrapper */ #image_wrap { /* dimensions */ width:337px; margin: 0 0 0 40px; /* centered */ text-align:center; /* some "skinning" */ background-color:#efefef; -moz-ouline-radius:4px; } #loading { width: 645px; height: 410px; background: #FFF url(../images/loading-2.gif) no-repeat center; position: absolute; left: 50%; top: 50%; margin-top: -300px; margin-left: -275px; text-align: center; z-index: 500; } /* ------ OVERLAY ------- */ /* the overlayed element */ .simple_overlay { /* must be initially hidden */ display:none; /* place overlay on top of other elements */ z-index:10000; /* styling */ background-color:#FFF; width: 825px; min-height:360px; padding: 20px 0 0 20px; /* CSS3 styling for latest browsers */ -moz-box-shadow:0 0 90px 5px #666666; -webkit-box-shadow: 0 0 90px #666666; } .simple_overlay#stad1 { width: 740px; height:575px; } .simple_overlay#oma1 { height:500px; } /* close button positioned on upper right corner */ .simple_overlay .close { background-image:url(../images/close.png); position:absolute; right:-15px; top:-15px; cursor:pointer; height:35px; width:35px; } /* styling for elements inside overlay */ .details { margin: 20px 0; } .details h1 { color: #af0101; font-size: 12px; margin:0 0 -10px 0; } .details h1 span { color: #000; }