/* ##################################################### ** Domain: www.aschau.de ** Datei: teaser_startseite.css ** Funktion: Alle Teaser auf der Startseite ** Erstellt: 24.02.2009 ** Media: screen, projection ** Autor: Axel Güldner ** copyright: infomax websolutions GmbH ##################################################### */ /* ========================================================= 1. Imageteaser 2. Newsteaser 3. Buchungsmaske 4. Filmteaser 5. Infoblock 6. mapTeaser ========================================================== */ @media screen { /* ========================================================= =1. Imageteaser (der große Bildteaser oben links) ========================================================= */ #imageteaser{ width:58em; height:22em; position:relative;} #imageteaser .teaserElement{ width:58em; height:22em; overflow:hidden; position:absolute; top:0; left:0; display:none;} #imageteaser div.active{ display:block;} #imageteaser .teaserElement .textarea{ width:16em; height:14em; background:white; margin:2em 0 0 2em; padding:2em; position:relative; display:block;} #imageteaser .teaserElement .textarea h2{ font-family:Georgia, "Times New Roman", serif; font-size:1.6em; font-weight:bold; margin:0 0 .625em 0;} #imageteaser .teaserElement .textarea h2 a{ font-weight:bold;} #imageteaser .teaserElement .textarea p{ font-size:1.1em; line-height:1.3em;} #imageteaser .teaserElement .textarea .more{ font-size:1.1em; float:right; background:transparent url(../../../img/objects/arrow_black_shorter.gif) right .35em no-repeat; padding:0 2em 0 0; margin:0;} #imageteaser .teaserElement .highlight p, #imageteaser .teaserElement .highlight p * { color:white;} #imageteaser .teaserElement .highlight .more{ color:white; background:transparent url(../../../img/objects/arrow_white_shorter.gif) right .35em no-repeat;} #imageteaser .teaserElement * a.transfiller{ position:absolute; top:0; left:0; z-index:10;} #imageteaser .teaserElement .textarea a.pricepatch{ width:70px; height:64px; position:absolute; top:-10px; right:-30px; text-align:center; padding:7px 0 0 0; color:black; font-family:Georgia, "Times New Roman", Times, serif; font-size:25px; font-weight:bold; line-height:34px;} html > body #imageteaser .teaserElement .textarea a.pricepatch { background:transparent url(../../../img/objects/bg_pricepatch_red.png) no-repeat;} html > body #imageteaser .teaserElement .textarea a.pricepatch:hover, html > body #imageteaser .teaserElement .textarea:hover a.pricepatch { background:transparent url(../../../img/objects/bg_pricepatch_white.png) no-repeat;} * html #imageteaser .teaserElement .textarea a.pricepatch { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,sizingMethod=crop,src='img/objects/bg_pricepatch_red.png');} * html #imageteaser .teaserElement .textarea a.pricepatch:hover, * html #imageteaser .teaserElement .textarea:hover a.pricepatch { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,sizingMethod=crop,src='img/objects/bg_pricepatch_white.png');} #imageteaser .teaserElement .textarea .pricepatch span{ font-size:11px; padding:0 15px 0 0; font-weight:bold; font-family:Georgia, "Times New Roman", Times, serif; margin:0 auto -18px!important; text-align:center; display:block;} #imageteaser .controller{ position:absolute; top:4em; left:0; z-index:10;} #imageteaser .controller li{ list-style:none; width:1.75em; margin:0 0 .4em 0;} #imageteaser .controller li span{ position:relative; left:-1em; top:-.25em; cursor:pointer; font-family:Georgia, "Times New Roman", serif; font-size:1.6em; font-weight:bold;} html > body #imageteaser .controller li.active{ background:url(../../../img/objects/btn_imageteaser.png) no-repeat;} * html #imageteaser .controller li.active{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,sizingMethod=crop,src='img/objects/btn_imageteaser.png');} #contentarea #imageteaser{ width:46em; height:auto;} #contentarea #imageteaser .teaserElement{ width:46em; height:17.5em; position:relative; margin:0 0 1em 0;} #contentarea #imageteaser .teaserElement .textarea{ width:13em; height:11em; background:white; margin:1.5m 0 0 1.5em; padding:1.5em; position:relative;} #contentarea #imageteaser .teaserElement .textarea h2{ font-size:1.5em;} /* ========================================================= =2. Newsteaser (der Newsblock unter dem Imageteaser) ========================================================= */ #newsteaser{ width:58em; height:10em; margin:2em 0 0 0;} #newsteaser .teaserArea{ width:22em; height:10em; overflow:hidden; float:left; margin:0 2em 0 0;} #newsteaser .teaserArea .teaserElement{ width:22em; height:10em; overflow:hidden; margin:0 2em 4em 0; float:left;} #newsteaser .teaserArea .teaserElement .imageHelper{ width:12em; height:10em; overflow:hidden; float:left;} #newsteaser .teaserArea .teaserElement .text{ margin:-10em 0 0 12em; width:8.5em; height:7em; padding:2em .5em 1em 1em; overflow:hidden; float:left; background:#DEDFDF url(../../../img/objects/arrow_black_long.gif) 1em .6em no-repeat;} #newsteaser .teaserArea .teaserElement .textHelper{ width:8.5em; height:7em; padding:2em .5em 1em 1em; overflow:hidden; float:left; background:transparent url(../../../img/objects/arrow_white_long.gif) 1em .6em no-repeat;} #newsteaser .teaserArea .teaserElement h3{ font-family:Georgia, "Times New Roman", serif; font-size:1.1em; font-weight:bold; margin:0 0 .45em 0;} #newsteaser .teaserArea .teaserElement h3 a{ font-family:Georgia, "Times New Roman", serif; font-weight:bold; margin:0 0 .45em 0; color:white;} #newsteaser .teaserArea .teaserElement p{ font-size:.9em; line-height:1.3em;} #newsteaser .teaserButton{ width:9.8em; height:10em; overflow:hidden; float:left; cursor:pointer; position: relative; border: 1px solid #ccc; } #newsteaser .teaserButton #teaserMap{width:100%; height:100%;} #newsteaser .teaserButton p{ background: none repeat scroll 0 0 #FFFFFF; bottom: 0; font-family: Georgia,"Times New Roman",serif; font-size: 1.1em; font-weight: bold; padding: 0.3em; position: absolute; width: 100%; color: #CC0000; } #newsteaser .teaserButton p:after {content: url("../../../img/objects/arrow_red_shorter.gif"); height: 2em; margin-left: 1em; width: 3em;} #kontextspalte #newsteaser{ width:22em; height:auto; margin:1em 0 0 0;} #kontextspalte #newsteaser .teaserArea{ height:auto; margin:0;} #kontextspalte #newsteaser .teaserArea .teaserElement{ margin:1em 0 0 0;} /* ========================================================= =3. Buchungsmaske (die Quarierschnellsuche rechts unterm Keyvisual) ========================================================= */ #teaserAreaRight #quartierschnellsuche{ width:30em; height:13.5em; background:#DEDFDF; padding:1.5em 2em 0 2em; position:relative;} #teaserAreaRight #quartierschnellsuche .spalte{ width:14.5em; height:7em; float:left; overflow:hidden; margin:0 0 1em 0;} #teaserAreaRight #quartierschnellsuche .dottetLine{ margin:1em 0 0 0; height:5em; width:.9em; border-left:1px #A5A5A5 dotted; float:left;} #teaserAreaRight #quartierschnellsuche .zeile{ width:29.75em; height:auto; clear:both;} #kontextspalte #quartierschnellsuche{ width:17em; height:auto; background:#DEDFDF; padding:2.5em 3em 2em 2em; position:relative; margin:0 0 2em 0;} #kontextspalte #quartierschnellsuche .spalte{ width:17em; float:left; overflow:hidden;} #kontextspalte #quartierschnellsuche .dottetLine{ margin:.5em 0 1.2em 0; height:.1em; width:16em; border-bottom:1px #A5A5A5 dotted; float:left;} #kontextspalte #quartierschnellsuche .zeile{ width:17em; height:auto; clear:both; margin:1em 0 0 0; display:block;} #kontextspalte #quartierschnellsuche .radio{ float:left; margin:0 1em .5em 0;} #kontextspalte #quartierschnellsuche label.radio{ width:50%;} #quartierschnellsuche .link{ position:absolute; bottom:0.9em; right: 1em; font-size:1.1em; text-decoration:underline; left:1.2em; width: 11.75em;} #quartierschnellsuche h2{ font-family:Georgia, "Times New Roman", serif; font-size:1.6em; font-weight:bold; margin:0 0 .625em 0;} #quartierschnellsuche .spalte label{ font-size:.9em; clear:both; display:block; float:none; width:auto; padding:0!important;} #quartierschnellsuche .spalte input.text{ font-size:.9em; height:1em; padding:.3em .5em!important; width:13.75em; margin-bottom:.75em;} #quartierschnellsuche .spalte input.date{ background:white url(../../../img/objects/ico_calendar.gif) .2em .15em no-repeat!important; padding-left:2em!important; width:11.75em;} #quartierschnellsuche .spalte input.short{ width:2.5em; float:left; padding-left:0em!important; margin-right:.5em;} #quartierschnellsuche .spalte select{ font-size:.9em; height:1.8em; width:10em; margin-bottom:1em;} #quartierschnellsuche .zeile label{ font-size:.9em; margin:0 .25em 0 1em; float:none; width:auto; padding:0!important;} #quartierschnellsuche .zeile label, #quartierschnellsuche .zeile input, #quartierschnellsuche .zeile a{ float:left;} #quartierschnellsuche .zeile a.formbutton{ margin:-.3em 0 0 2.25em; font-size:1.6em; padding-top:2px!important; height:19px!important; display:inline-block; float:right;} #quartierschnellsuche .zeile a.formbutton span{ font-weight:bold; font-family:Georgia, "Times New Roman", serif; background-position:right 6px;} /* ========================================================= =4. Filmteaser (der kleine Filmteaser mit Button) ========================================================= */ #movieteaser{ width:32em; height:2.5em; background:transparent url(../../../img/objects/bg_movieteaser.jpg) no-repeat; margin:2em 0 0 0; padding:2.5em 2em 0 0; text-align:right; } #movieteaser a.formbutton{ margin:-.3em 0 0 2.25em; font-size:1.6em; padding-top:2px!important; height:19px!important; display:inline-block;} #movieteaser a.formbutton span{ padding:0 0 0 20px!important; font-weight:bold; font-family:Georgia, "Times New Roman", serif; background:transparent url(../../../img/objects/icon_movieteaser.png) 0 2px no-repeat;} /* ========================================================= =5. Infoblock (Links und Anschriften unten rechts) ========================================================= */ #infoblock{ width:34em; height:10em; margin:2em 0 0 0; overflow:hidden;} #infoblock .zeile{ width:34em; height:auto; margin: 0 0 5px 0;} #infoblock .spalte{ width:auto; height:auto; float:left; padding:0 2.5em 0 1em; line-height:12px;} #infoblock .spalte strong{ font-size:1.1em;} #infoblock .zeile a{ font-size:.9em; background:transparent url(../../../img/objects/ico_infoblock.gif) no-repeat; height:2em; width:auto; padding:.4em 0 0 3.1em; display:block; float:left; margin:0 .75em 0 0; } #infoblock .zeile div.facebookButton {float:left;padding:0 0 0 5px;width:120px;} #infoblock .zeile a.newsletter{ background-position:0 0;} #infoblock .zeile a.map{ background-position:0 -25px;} #infoblock .zeile a.webcam{ background-position:0 -51px;} #infoblock .spalte p{ font-size:1.1em;} #infoblock .spalte a:hover, #infoblock .spalte a:active, #infoblock .spalte a:focus{ text-decoration:underline;} /* ========================================================= =6. MapTeaser (Kartenteaser auf Basis des NewsteaserStyles) ========================================================= */ #mapsTeaser{ width:22em; height:22em; margin:1em 0 0 0; position: relative; border:1px solid #ccc;} #mapsTeaser .teaserArea{ width:22em; height:22em; overflow:hidden;} #mapsTeaser .teaserArea .teaserElement{ width:22em; height:22em; overflow:hidden;} #mapsTeaser .teaserArea .teaserElement .imageHelper{ width:22em; height:22em; overflow:hidden; float:left; position:relative;} #mapsTeaser .teaserArea .teaserElement .imageHelper #mapSmall{ border:1px #A2A7A7 solid; position:absolute; width:22em!important; height:22em!important; font-size:10px!important;} #mapsTeaser .teaserArea .teaserElement .link{ background: none repeat scroll 0 0 #FFFFFF; bottom: 0; float: left; height: 2em; overflow: hidden; padding: 0.5em 0.5em 0em 1.5em; position: absolute; right: 0; width: 14em;} #mapsTeaser .teaserArea .teaserElement h3{ font-family:Georgia, "Times New Roman", serif; font-size:1.1em; font-weight:bold; margin:0 0 .45em 0;} #mapsTeaser .teaserArea .teaserElement h3 a{ font-family:Georgia, "Times New Roman", serif; font-weight:bold; margin:0 0 .45em 0; color:white;} #mapsTeaser .teaserArea .teaserElement h3 a:after {content: url("../../../img/objects/arrow_red_shorter.gif"); height: 2em; margin-left: 1em; width: 3em;} #mapsTeaser .teaserArea .teaserElement p{ font-size:.9em; line-height:1.3em;} #mapsTeaser .teaserArea .teaserElement .imageHelper #mapSmall .preloader{ width:100%; height:100%; background:white url(../../../img/loadingAnimation.gif) 50% 50% no-repeat;} #mapSmall table, #mapSmall .MSVE_PoweredByLogo, #mapSmall .MSVE_ScaleBarLabel, #mapSmall .MSVE_ScaleBar, #mapSmall .MSVE_Copyright { display:none!important;} }