/* ---------------------------------------------- gallery ------------------------------- */ /* Gallery CSS */ #content .pictures { height: 116px; /* 232px; */ width: 633px; margin: 20px 0px 16px 0px; position: relative; border: 1px solid #CCCCCC; } /* general settings for both scrollables */ #box .items, #box_01 .items, #box_02 .items, #box_03 .items, #box_04 .items, #box_05 .items, #box_06 .items, #box_07 .items, #box_08 .items, #box_09 .items, #box_10 .items, #box_11 .items, #box_12 .items, #box_13 .items, #box_14 .items, #box_15 .items, #box_16 .items, #box_17 .items, #box_18 .items { width:20000em; position:absolute; clear:both; } /* next/prev buttons */ .navi { background-image: url("https://www.rost-rost.de/media/img/gallery/hori_large.png"); width: 30px; height: 30px; top: 48px; left: 7px; position: absolute; } .navi:hover { background-position:-30px 0; } .navi:active { background-position:-60px 0; } .next { background-position: 0 -30px; clear:right; left: 598px; position: absolute; } .next:hover { background-position:-30px -30px; } .next:active { background-position:-60px -30px; } .navi.disabled { visibility:hidden; } /* the thumbnail scrollable */ #thumbnails, #thumbnails_01, #thumbnails_02, #thumbnails_03, #thumbnails_04, #thumbnails_05, #thumbnails_06, #thumbnails_07, #thumbnails_08, #thumbnails_09, #thumbnails_10, #thumbnails_11, #thumbnails_12, #thumbnails_13, #thumbnails_14, #thumbnails_15, #thumbnails_16, #thumbnails_17, #thumbnails_18 { position: relative; overflow: hidden; float: left; margin: 0px; /* 0px 40px */ } #thumbnails .items div, #thumbnails_01 .items div, #thumbnails_02 .items div, #thumbnails_03 .items div, #thumbnails_04 .items div, #thumbnails_05 .items div, #thumbnails_06 .items div, #thumbnails_07 .items div, #thumbnails_08 .items div, #thumbnails_09 .items div, #thumbnails_10 .items div, #thumbnails_11 .items div, #thumbnails_12 .items div, #thumbnails_13 .items div, #thumbnails_14 .items div, #thumbnails_15 .items div, #thumbnails_16 .items div, #thumbnails_17 .items div, #thumbnails_18 .items div { height: 99px; width: 148px; padding: 8px 0px 0px 8px; float: left; border: solid 0px #B3B3B3; overflow: hidden; } /* overlay styling */ #box, #box_01, #box_02, #box_03, #box_04, #box_05, #box_06, #box_07, #box_08, #box_09, #box_10, #box_11, #box_12, #box_13, #box_14, #box_15, #box_16, #box_17, #box_18 { background-image:url("https://www.rost-rost.de/media/img/gallery/withe.png"); width: 740px; height: 580px; position: absolute; display: none; } /* image is contained on the overlay background image. the closing button is thus just a transparent container. */ #box .close, #box_01 .close, #box_02 .close, #box_03 .close, #box_04 .close, #box_05 .close, #box_06 .close, #box_07 .close, #box_08 .close, #box_09 .close, #box_10 .close, #box_11 .close, #box_12 .close, #box_13 .close, #box_14 .close, #box_15 .close, #box_16 .close, #box_17 .close, #box_18 .close { position: absolute; left: 8px; top: 8px; cursor:pointer; height:45px; width: 45px; text-decoration:none; z-index: 999; } /* overlay scrollable */ #images, #images_01, #images_02, #images_03, #images_04, #images_05, #images_06, #images_07, #images_08, #images_09, #images_10, #images_11, #images_12, #images_13, #images_14, #images_15, #images_16, #images_17, #images_18 { position:absolute; overflow:hidden; margin:50px; width:640px; height:426px; } /* single image */ #images .items div, #images_01 .items div, #images_02 .items div, #images_03 .items div, #images_04 .items div, #images_05 .items div, #images_06 .items div, #images_07 .items div, #images_08 .items div, #images_09 .items div, #images_10 .items div, #images_11 .items div, #images_12 .items div, #images_13 .items div, #images_14 .items div, #images_15 .items div, #images_16 .items div, #images_17 .items div, #images_18 .items div { float:left; width:640px; height:426px; margin-right:30px; overflow: hidden; cursor:pointer; } /* the tooltip */ #images .items .info, #images_01 .items .info, #images_02 .items .info, #images_03 .items .info, #images_04 .items .info, #images_05 .items .info, #images_06 .items .info, #images_07 .items .info, #images_08 .items .info, #images_09 .items .info, #images_10 .items .info, #images_11 .items .info, #images_12 .items .info, #images_13 .items .info, #images_14 .items .info, #images_15 .items .info, #images_16 .items .info, #images_17 .items .info, #images_18 .items .info { float:none; background:#333; color:#fff; font-size:13px; margin-top:-76px; padding:5px 75px; height: 66px; display:none; width:490px; } #images .items .info h3, #images_01 .items .info h3, #images_02 .items .info h3, #images_03 .items .info h3, #images_04 .items .info h3, #images_05 .items .info h3, #images_06 .items .info h3, #images_07 .items .info h3, #images_08 .items .info h3, #images_09 .items .info h3, #images_10 .items .info h3, #images_11 .items .info h3, #images_12 .items .info h3, #images_13 .items .info h3, #images_14 .items .info h3, #images_15 .items .info h3, #images_16 .items .info h3, #images_17 .items .info h3, #images_18 .items .info h3 { color:#ffffff; margin: 10px 10px 10px -50px; } #images .items .info p, #images_01 .items .info p, #images_02 .items .info p, #images_03 .items .info p, #images_04 .items .info p, #images_05 .items .info p, #images_06 .items .info p, #images_07 .items .info p, #images_08 .items .info p, #images_09 .items .info p, #images_10 .items .info p, #images_11 .items .info p, #images_12 .items .info p, #images_13 .items .info p, #images_14 .items .info p, #images_15 .items .info p, #images_16 .items .info p, #images_17 .items .info p, #images_18 .items .info p { color:#ffffff; padding: 0px; margin: 0px -50px 10px -50px; } /* override button style on the overlay */ #box .navi, #box_01 .navi, #box_02 .navi, #box_03 .navi, #box_04 .navi, #box_05 .navi, #box_06 .navi, #box_07 .navi, #box_08 .navi, #box_09 .navi, #box_10 .navi, #box_11 .navi, #box_12 .navi, #box_13 .navi, #box_14 .navi, #box_15 .navi, #box_16 .navi, #box_17 .navi, #box_18 .navi { position: absolute; top: 545px; left: 50px; } #box .next, #box_01 .next, #box_02 .next, #box_03 .next, #box_04 .next, #box_05 .next, #box_06 .next, #box_07 .next, #box_08 .next, #box_09 .next, #box_10 .next, #box_11 .next, #box_12 .next, #box_13 .next, #box_14 .next, #box_15 .next, #box_16 .next, #box_17 .next, #box_18 .next { left:660px; } .flowplayer { background-image: url(../img/logo_binz.jpg); background-repeat: no-repeat; background-position: center top; } .box h3 { background-color: #000000; -khtml-opacity: 0.8; -moz-opacity: 0.8; -webkit-opacity: 0.8; filter: alpha(opacity=80); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; opacity: 0.8; color: #FFFFFF; font: normal 24px/24px Verdana, Geneva, sans-serif; margin: 0px; padding: 3px 0px 7px 10px; width: 138px; position: absolute; display: block; bottom: 0px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }