@charset "iso-8859-1"; /* By default, Safari on the iPhone will render your page as if it was a desktop browser on a big screen, with 980 pixels width available for the web content. Then it will scale down the content so that it fits the small screen. */ /* */ /* body.portrait p { color: red; } body.landscape p { color: blue; } window.addEventListener('load', setOrientation, false); window.addEventListener('orientationchange', setOrientation, false); function setOrientation() { var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait'; var cl = document.body.className; cl = cl.replace(/portrait|landscape/, orient); document.body.className = cl; } window.addEventListener('load', function() { setTimeout(scrollTo, 0, 0, 1); }, false); What happens if your page is too short to become scrollable? We'll need an additional meta element in case that occurs. In order to make the page scrollable, we can set the height of the viewport using the meta element: The iPhone automatically adjusts font size for readability. This feature can be overridden with -webkit-text-size-adjust -webkit-text-size-adjust none | auto | %value */ /* */ /* IE version 5.5 or earlier: some versions of IE render CSS regadless of media type declarations */ /* */ /* ====================================================================== */ /* ================================================================== all */ /* -----------------------------------------------------------------------*/ /* iPhoneOnly iPadOnly AppleMobileOnly DeskTopOnly iPhoneHide iPadHide AppleMobileHide DeskTopHide */ .DeskTopOnly , .AppleMobileHide { display: none !important; } .DeskTopHide , .AppleMobileOnly { display: block !important; } /* -----------------------------------------------------------------------*/ .AppleMobile320 { width: 320px !important; } .AppleMobile480 { width: 480px !important; } .AppleMobile720 { width: 720px !important; } /* Webkit on the iPad honors CSS media query declarations based on orientation. body[orient="landscape"] > *:not(.toolbar) { /* min-height:268px; min-height:402px; } */ /* -----------------------------------------------------------------------*/ /* Reset fixed */ /* -----------------------------------------------------------------------*/ body>#fixedTop , body>#fixedBottom { position: static; } body>#fixedTop , body>#fixedBottom { margin: 0; padding: 1em 0; height: auto; left: auto; right: auto; top: auto; bottom: auto; } #contentCentered , #fixedTopCentered , #fixedBottomCentered { width: auto; } #contentContent { padding-top: 0; } #BottomContent { margin: 0; padding: 0; } /* -----------------------------------------------------------------------*/ /* old Laxout - soon obsolete */ #BannerOben { height: auto; } /* -----------------------------------------------------------------------*/ #LoginMenu { box-shadow: none; text-shadow: none; } /* ---------------------------------------------------------------------*/ /* plain, edge to edge: 44*320 padding: L: 10px B: 14px Line: 217,217,217 #D9D9D9 Helvetica 20px bold black Button: height 29px rounded 5px, Label: Helvetica 12px, middle, 10px von rechts rounded rectangle, groups: 44*300 rounded 8px, padding: L: 10px B: 14px margin: T: 17px L:10px Line: 217,217,217 #D9D9D9 Helvetica 17px bold black margin-top: 17px; BG: 197,204,211 #C5CCD3 Labels for the groups: Helvetica 17px bold 76,86,108 #4C566C */ /* heights: table view: 44px mail: 78px Fotos: 55px Videos: 88px (n-tv: 70px) */ /* ---------------------------------------------------------------------*/ .TableView , dl.Form { font-family: "Helvetica"; } .TableView .NavigationBar , .TableView .ToolBar , .TableView .ScopeBar , .TableView li { font-size: 20px; } .TableView h1 , .TableView h2 , .TableView h3 { font-size: 17px; line-height: 1.7em; min-height: 1.7em; } .TableView .NavigationBar , .TableView .ToolBar , .TableView .ScopeBar { height: 43px; line-height: 43px; } .TableView ul.SegmentedControl { margin-top: 0; } .TableView ul.SegmentedControl , .TableView ul.SegmentedControl li , .TableView ul.SegmentedControl li a { height: 28px; line-height: 28px; font-size: 12px; } .TableView li > a { min-height: 43px; line-height: 43px; } .TableView li em , .TableView li .Icon , .TableView li img { margin-top: 6px; } /* ---------------------------------------------------------------------*/ .TableView div.grouped li , .TableView div.grouped dt , .TableView div.grouped dd , .TableView div.grouped li > a { height: 43px; line-height: 43px; font-size: 17px; } .TableView div.grouped li img { margin: 5px 10px 5px 0; } /* ---------------------------------------------------------------------*/ #MasterPane .NavigationBar , #MasterPane .ToolBar , #MasterPane .ScopeBar , #MasterPane h1 , #MasterPane h2 , #MasterPane h3 { text-shadow: 0px -1px 0px rgba(0,0,0, 0.6); text-shadow: 0px -1px 0px rgba(255,255,255, 0.6); } #MasterPane .ToolBar input[type='search'] { width: 70% ! important; font-size: 17px; /* webkit supports only 3 sizes: small <= 10px < medium <= 15px < large */ } #MasterPane .ToolBar input[type='submit'] { width: auto ! important; } #MasterPane div.grouped { background-color: rgba(197,204,211, 0.9); } #MasterPane div.grouped > ul { background-color: rgb(230,230,230); background-color: rgba(255,255,255, 0.9); } #MasterPane div.grouped > ul , #MasterPane div.grouped li , #MasterPane div.grouped li img , #MasterPane div.grouped div.Profil img.Profil { border-color: rgba(217,217,217, 0.9); } /* ---------------------------------------------------------------------*/ #MasterPane { /* border: none; /* */ /* background-image: none; background-color: rgba(255,255,255, 0.8); */ border: 1px 0; border-color: #000; border-style: solid; -webkit-border-radius: 0; box-shadow: none; -webkit-box-shadow: none; /* Safari 3.1+ */ } /* iOS (at least 3.X) doesn't animate the (YouTube) Object */ .slide object { display: none; } /* -----------------------------------------------------------------------*/ /* Reset Web-Effects */ /* -----------------------------------------------------------------------*/ .Effekt_TextLandung /* no state = runs immediately when the page is loaded */ { -webkit-animation-name: none; } #MasterPane /* no state = runs immediately when the page is loaded */ { -webkit-animation-nameX: none; } /* ================================================================== all */ /* ================================================================= iPad */ @media screen and (min-device-width: 481px) and (max-device-width: 1024px) { .iPadHide { display: none !important; } .iPadOnly { display: block !important; } /* -----------------------------------------------------------------------*/ #TopMenu { margin: 0 10px ! important; } .HeaderLogo , .HeaderLogo img { max-width: 768px; } .HeaderLogo { height: auto ! important; overflow: none; } .SliderJoin { display: none; } #MasterPane { border-width: 1px 1px 1px 0; } #MasterPane , #DetailPane { min-height: 768px; } } @media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { } @media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { } /* ================================================================= iPad */ /* =================================================== iPhone, iPod touch */ @media only screen and (max-device-width: 480px) { .iPhoneHide { display: none !important; } .iPhoneOnly { display: block !important; } a.iPhoneOnly { display: inline !important; } /* -----------------------------------------------------------------------*/ .AdDesktop { display: none; } /* -----------------------------------------------------------------------*/ body { min-height: 480px; /* min-height: 558px; /* 372 * 1.5 */ /*font: 30px "Helvetica"; /* 30 px entspricht 20px */ } /* -----------------------------------------------------------------------*/ #TopMenu { height: auto; -webkit-background-size: 39px; font: 20px "Helvetica"; text-transform: none; text-shadow: -1px -1px 1px #1c2a3d; } #TopMenu , .SiteMap { margin: 0 10px ! important; } #LoginMenu { margin: 0 ! important; } #LoginMenu a.ButtonMain { padding: 3px 0; } #BottomContent { padding: 0 10px; } #BottomMenu { float: none; } #TopMenu li a { width: 49%; overflow: hidden; white-space: nowrap; height: 39px; line-height: 39px; } #TopMenu li.Icon a { width: 100%; max-width: 320px; } /* -----------------------------------------------------------------------*/ .HeaderLogo , .HeaderLogo img { max-width: 320px; } .HeaderLogo { height: auto ! important; overflow: none; } .BackGroundVideoContainer video.BackGroundVideo { display: none; } .SliderJoin { float: none ! important; clear: both ! important; width: 100% ! important; display: none; } /* -----------------------------------------------------------------------*/ #MasterPane , #DetailPane { float: none; clear: both; min-height: inherit; } #MasterPane { margin-bottom: 1em; border: 1px 0; border-color: #000; border-style: solid; position: relative; } #DetailPane { margin: 0; width: 320px; overflow: hidden; } /* -----------------------------------------------------------------------*/ .InneresMenu { font: 20px "Helvetica"; } .HauptSpalten > .InneresMenu , .HauptSpalten .Rahmen .InneresMenu { border-bottom-width: 2px; } .InneresMenu li { line-height: 1.5em; } /* -----------------------------------------------------------------------*/ .Spalte, .SpalteL , .SpalteR , .Spalte25 , .Spalte50 , .Spalte75 { float: none; width: auto; } .SiteMap .SMSpalte , .SiteMap2 .SMSpalte , .SiteMap3 .SMSpalte { padding: 0 10px; width: auto; float: none; } /* -----------------------------------------------------------------------*/ .ArtikelBild img , .Artikel object { max-width: 300px; } /* -----------------------------------------------------------------------*/ .CommunityForm { } .CommunityForm fieldset .FieldSubSet , .CommunityForm fieldset .FieldSubSet3 { margin: 0; height: auto; width: 98%; float: none; clear: both; display: block; } .CommunityForm fieldset input { width: 100% !important; } .CommunityForm fieldset input.auto { width: auto !important; } .CommunityForm fieldset legend , .CommunityForm fieldset label , .CommunityForm fieldset .FieldSubSet label , .CommunityForm fieldset .FieldSubSet3 label , .CommunityForm fieldset input { font-size: 150%; } .CommunityForm fieldset label , .CommunityForm fieldset .FieldSubSet label , .CommunityForm fieldset .FieldSubSet3 label , .CommunityForm fieldset input { margin-top: 0.5em; } .Edit ol.Steps li { width: 24%; } /* -----------------------------------------------------------------------*/ /* -----------------------------------------------------------------------*/ .AdSky , .AdBanner , .AdLink { display: none; } /* -----------------------------------------------------------------------*/ #contentContent .HeaderAnimation { font-size: 3em; margin: 0; width: 320px; } /* -----------------------------------------------------------------------*/ } /* =================================================== iPhone, iPod touch */ /* ================================================= iPhone, iPod touch 4 */ @media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { } /* ================================================= iPhone, iPod touch 4 */