/* Styles für die Zeitleiste */ #DataSelector { min-height:1000px; } #DataSelector .selectorPanel { float:none; clear:both; } #DataSelector .selectorPanel .selectBox { clear:none; float:left; width:175px; margin:8px 8px 8px 0px; border-radius:5px; background-color:#369; } #DataSelector .selectorPanel .selectBox-disabled { background-color:#999; } #DataSelector .selectorPanel .selectBox select { width: 100%; } #DataSelector .selectorPanel .buttons { margin-left:auto; margin-right:auto; width:60px; } #DataSelector .selectorPanel .clear { margin:2px; color:white; width:50px; text-align:center; background-color:#47a; border: 2px solid white; border-radius:15px; float:left; } #DataSelector .selectorPanel .clear-disabled { font-color:#bbb; background-color:#666; border: 2px solid #888; } #DataSelector .selectorPanel .clearOther { margin:5px; color:white; width:90px; text-align:center; background-color:#1cf; border: 2px solid white; border-radius:15px; float:left; display:none; } #DataSelector .selectorPanel .clearOther-disabled { font-color:#bbb; background-color:#666; border: 2px solid #888; display:none; } #DataSelector .dataPanel { width:915px; float:none; clear:both; } #DataSelector .parameter { margin:2px; text-align: center; font-weight:bold; color:white; } #DataSelector .selectBox-disabled .parameter { text-color:#bbb; } #DataSelector .animation .content { position:relative; width:915px; height:800px; clear:both; background-image:url(/opencms/export/system/modules/om.gov.met.website/resources/images/bg.png)} #DataSelector .animation .content .data { margin:auto; width:915px; height:800px; } /* #DataSelector .animation .content .data .image { max-width:915px; max-height:800px; position:absolute; width:auto; height:auto; transform:translate(-50%, 0); left:50%; } */ #DataSelector .animation .content .data .image { max-width:915px; max-height:800px; position:absolute; width:auto; height:auto; } #DataSelector .timePanel { clear:both; } #DataSelector .timePanel > * { float:left; } #DataSelector .navigationBar > * { float:left; } #DataSelector .timeBar { height:40px; width:602px; margin:0px; padding:0px; border-left:2px solid white; border-right:2px solid white; background-color:black; background-image:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_bg.png); background-repeat:repeat-x; overflow:hidden; } #DataSelector .timeBar .time { position:relative; height:40px; overflow:hidden; } #DataSelector .timeBar .time img { position:absolute; height:40px; } #DataSelector .timeBar .time .date { position:absolute; width:60px; height:14px; top:23px; font-size:10px; vertical-align:top; text-align:center; overflow:hidden; border: 1px solid black; background-color: white; z-index:1; transform:translate(-50%, 0); } #DataSelector .timeBar .time .hour { position:absolute; width:14px; height:12px; top:24px; font-size:10px; vertical-align:top; text-align:center; overflow:hidden; color:white; } #DataSelector .timeBar .dataElement { position:absolute; height:5px; top:0px; border: 1px solid #fff; background-color: #0a9aff; font-size:8px; } #DataSelector .timeBar .offsetDataElement { position:absolute; height:10px; top:0px; border: 1px solid #fff; background-color: #0a9aff; font-size:9px; font-familiy:Arial,sans-serif; text-align:center; } #DataSelector .timeBar .dataElementPopup { position:absolute; z-index:5000; left:-125px; width:250px; height:40px; overflow:auto; border:1px solid black; background-color:#aaf; font-size:10px; } #DataSelector .timePanel .timePanelEndCap { width:10px; height:40px; background-color:#88f; border-top-right-radius:5px; background-image:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_bg.png); } #DataSelector .timePanel .timePanelStartCap { width:10px; height:40px; background-color:#88f; border-top-left-radius:5px; background-image:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_bg.png); } #DataSelector .timeBar img.dayTick { position:absolute; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_bar.png) no-repeat scroll 0px 0px transparent; width:7px; height:40px; transform:translate(-50%, 0); } #DataSelector .timeBar img.sixHourTick { position:absolute; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_bar.png) no-repeat scroll -7px 0px transparent; width:7px; height:40px; transform:translate(-50%, 0); } #DataSelector .timeBar img.oneHourTick { position:absolute; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_bar.png) no-repeat scroll -7px 0px transparent; width:7px; height:40px; transform:translate(-50%, 0); } #DataSelector .timeBar img.halfHourTick { position:absolute; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_bar.png) no-repeat scroll -14px 0px transparent; width:7px; height:25px; transform:translate(-50%, 0); } #DataSelector .timeBar img.quarterPastHourTick { position:absolute; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_bar.png) no-repeat scroll -21px 0px transparent; width:7px; height:18px; transform:translate(-50%, 0); } #DataSelector .timeBar img.quarterToHourTick { position:absolute; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_bar.png) no-repeat scroll -28px 0px transparent; width:7px; height:18px; transform:translate(-50%, 0); } #DataSelector .timeBar img.fiveMinuteTick { position:absolute; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_bar.png) no-repeat scroll -38px 0px transparent; width:2px; height:10px; transform:translate(-50%, 0); } #DataSelector .timeBar img.timeSelection { position:absolute; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_selected.png) no-repeat scroll 0px 0px transparent; width:10px; height:40px; transform:translate(-50%, 0); } #DataSelector .timeBar img.tempSelection { position:absolute; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_selected.png) no-repeat scroll -10px 0px transparent; width:10px; height:40px; transform:translate(-50%, 0); } #DataSelector .waitImage { position:absolute; z-Index:1; left:50%; transform:translate(-50%, 0); top:100px; } #DataSelector .navigationBar { height:40px; margin:0px; background-color:black; background-image:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_bg.png); background-repeat:repeat-x; overflow:hidden; } #DataSelector .navigationBar img { margin-top:5px; margin-left:5px; margin-right:5px; } #DataSelector .navigationBar .navButton {margin-top:5px; } #DataSelector .navigationBar .playSlow { width:20px; height:30px; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_play.png) no-repeat scroll 0px 0px transparent; } #DataSelector .navigationBar .playSlow-hover { width:20px; height:30px; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_play.png) no-repeat scroll 0px -30px transparent; } #DataSelector .navigationBar .playSlow-active { width:20px; height:30px; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_play.png) no-repeat scroll 0px -60px transparent; } #DataSelector .navigationBar .playFast { width:25px; height:30px; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_play.png) no-repeat scroll -20px 0px transparent; } #DataSelector .navigationBar .playFast-hover { width:25px; height:30px; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_play.png) no-repeat scroll -20px -30px transparent; } #DataSelector .navigationBar .playFast-active { width:25px; height:30px; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_play.png) no-repeat scroll -20px -60px transparent; } #DataSelector .navigationBar .stop { width:25px; height:30px; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_play.png) no-repeat scroll -45px 0px transparent; } #DataSelector .navigationBar .stop-hover { width:25px; height:30px; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_play.png) no-repeat scroll -45px -30px transparent; } #DataSelector .navigationBar .stop-active { width:25px; height:30px; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_play.png) no-repeat scroll -45px -60px transparent; } #DataSelector .navigationBar .playReverse { width:20px; height:30px; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_play.png) no-repeat scroll -70px 0px transparent; } #DataSelector .navigationBar .playReverse-hover { width:20px; height:30px; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_play.png) no-repeat scroll -70px -30px transparent; } #DataSelector .navigationBar .playReverse-active { width:20px; height:30px; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_play.png) no-repeat scroll -70px -60px transparent; } #DataSelector .navigationBar .stepReverse { width:30px; height:30px; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_play.png) no-repeat scroll -90px 0px transparent; } #DataSelector .navigationBar .stepReverse-hover { width:30px; height:30px; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_play.png) no-repeat scroll -90px -30px transparent; } #DataSelector .navigationBar .stepReverse-active { width:30px; height:30px; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_play.png) no-repeat scroll -90px -60px transparent; } #DataSelector .navigationBar .stepForward { width:30px; height:30px; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_play.png) no-repeat scroll -120px 0px transparent; } #DataSelector .navigationBar .stepForward-hover { width:30px; height:30px; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_play.png) no-repeat scroll -120px -30px transparent; } #DataSelector .navigationBar .stepForward-active { width:30px; height:30px; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_play.png) no-repeat scroll -120px -60px transparent; } #DataSelector .timeDisplay { height:35px; width:79px; line-height:15px; text-align:center; vertical-align: middle; margin:0px; padding:0px; padding-top:5px; background-image:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/time_bg.png); background-repeat:repeat-x; overflow:hidden; color:white; } #DataSelector .dataPanel .fullsize { width:49px; height:34px; top:0px; right:0px; margin:3px; position:absolute; z-index=1000; background-image:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/fullsize.png); } .gallery { position:fixed; z-index:1000; top:0px; left:0px; right:0px; bottom:0px; background-image:url(/opencms/export/system/modules/om.gov.met.website/resources/images/bg.png); } .gallery .close { position:absolute; top:0px; right:0px; width:50px; height:50px; margin:10px; background:url(/opencms/export/system/modules/om.gov.met.website/resources/images/dataselector/close.png); } .gallery .imageInfo { position:absolute; bottom:0px; height:45px; width:100%; margin-left:auto; margin-right:auto; clear:both; text-align:center; font-size:x-large; font-weight:bold; }