html { font-size:1em }
body { margin:0px; padding:0px 0px 1px 0px; height:100%; position:relative; font:0.9em Ubuntu,'Lucida Sans','Lucida Grande', Verdana, sans-serif; background:#f2f2f2; line-height:1; -webkit-text-size-adjust: 100%; text-size-adjust:100% }
/* @media only screen and (min-resolution: 120dpi),
only screen and (-webkit-min-device-pixel-ratio:1.3)
{
html { font-size:1.2em }
}
@media only screen and (min-resolution: 140dpi),
only screen and (-webkit-min-device-pixel-ratio:1.5)
{
html { font-size:1.4em }
}*/
img { border:none }
p { padding:0em; margin:0em }
/* Allgemeines */
.readersonly { display:block; position:absolute; width:1px; height:1px; overflow:hidden; left:-1000px; top:-1000px; }
#downJumper { margin:0px; padding:0px }
#downJumper a { left:-200%; max-width:50%; top:0px; position:absolute; padding:0.5em 1em 0.5em 0.5em }
#downJumper a:focus { left:25%; width:50%; background:#ffffff; background:rgba(255,255,255,0.7); -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.4); box-shadow: 2px 2px 5px rgba(0,0,0,0.4); -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.4); -moz-border-radius-bottomright:1em; -webkit-border-bottom-right-radius:1em; border-bottom-right-radius:1em; -moz-border-radius-bottomleft:1em; -webkit-border-bottom-left-radius:1em; border-bottom-left-radius:1em; text-align:center; z-index:11000 }
#afternavi { position:relative }
#headareaContent { padding:3.4em 0em; margin:0em 3.4em }
#headareaContent.withicon
{ background-position:100% 50%; background-repeat:no-repeat; padding-right:90px }
#afternavi h1 { font:inherit; font-size:2em; line-height:1.5; margin:0em; padding:0em; color:#444444; float:left }
#headarea p { margin:0px; color:#444444; line-height:1.7; padding:1.7em 0em 0em 0em; max-width:60em; clear:both }
#aftertitle { clear:both }
/* Grundlagen für Inhalt */
/* Wir legen ein Zeilenraster von 1.7 Grund-em zugrunde. */
#content { line-height:1.7; color:#444444 }
#content p { padding-bottom:1.7em }
#headarea { background:#ffffff }
#content code, #content pre
{ color:#222222 !important; font: 1.05em 'Ubuntu Mono',Consolas,'Courier New', monospace }
#content pre { display:block; padding:0.3em 0.5em; margin:0em 0em 1.7em 0em; line-height:1.7em; border: 1px solid #cccccc; background: #ebebeb }
#content code { background:#ebebeb; margin:-0.2em 0em; padding:0.2em }
#content a, #commentspace a, .teaserList a em, .teaserList a strong, #subtitlebox a
{ color:#113879; text-decoration:underline }
#content a:visited, #commentspace a:visited, .teaserList a:visited em, .teaserList a:visited strong, #subtitlebox a:visited
{ color:#657691 }
#content a:hover, #content a:focus, #commentspace a:hover, #commentspace a:focus, .teaserList a:hover em, .teaserList a:visited em, .teaserList a:hover strong, .teaserList a:visited strong, #subtitlebox a:hover, #subtitlebox a:focus
{ color:#2F5BA4; text-decoration:underline }
/* Test */
.wrapcontainer { display:block; position:relative; line-height:1.5em; height:1.5em; overflow:hidden; background:white; word-break:break-all }
.wrapcontainer:after { content:' '; position:relative; display:inline-block; width:100%; top:-21.5em; height:20em;
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 60%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(60%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 60%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 60%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 60%,rgba(255,255,255,1) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 60%,rgba(255,255,255,1) 100%);
}
/*.wrapcontainer { overflow:hidden; line-height:1.5em; max-height:3em; text-overflow:ellipsis } */
.withmore { position:relative; height:4em; background:white; line-height:1; vertical-align:top; overflow:hidden }
.withmore .boxes { display:inline-block; white-space:nowrap; height:100%; margin-right:-0.5em }
.withmore .box { display:inline-block; height:100%; width:6em; background:red }
.withmore .box:hover { background:blue }
.withmore .spacer { display:inline-block; height:100%; width:1px; visibility:hidden }
.withmore .more { display:inline-block; position:relative; height:0em; width:100%; vertical-align:top }
.withmore .more a { display:block; position:absolute; height:2.6em; padding-top:1.4em; right:0em; top:-8em; width:6em; text-align:right;
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}
.largefloat { float:left; border:1px solid black; width:200px; height:88px }
.smallfloat { float:left; border:1px solid black; width:100px; height:28px }
/* allg. Kopfelemente/Navigation */
.mainLogoLink { display:block; position:absolute; height:3em; left:3em; bottom:0em; min-height:59px; width:7em; padding-left:59px; text-decoration:none;
background:url('../style/img/title-oachkatzerl.png') left bottom no-repeat; background-size:59px 59px }
.mainLogoLink img { display:block; position:absolute; width:59px; height:59px; left:0px; bottom:0px }
/* .mainLogoLink { display:block; position:absolute; height:3em; left:3em; bottom:0em; min-height:70px; width:7em; padding-left:59px; text-decoration:none;
background:url('../style/img/title-christmas-oachkatzerl.png') left bottom no-repeat; background-size:59px 70px }*/
.mainLogoLink img { display:block; position:absolute; width:59px; height:70px; left:0px; bottom:0px }
.mainLogoLink strong { position:absolute; left:69px; bottom:0em; padding-bottom:0.4em; font-weight:normal; font-size:1.3em; color:white !important; white-space:nowrap }
a.mainLogoLink:hover strong, a.mainLogoLink:focus strong
{ border-bottom:2px solid #333333; margin-bottom:-2px }
.mainLogoLink strong em
{ display:none; font-style:normal; color:#333333 }
.mainLogoLink:hover strong em, .mainLogoLink:focus strong em
{ display:inline }
#naviarea, #dynaviarea { display:block; height:7.0em; position:relative; left:0px; right:0px; top:0px; z-index:80 }
.navi { display:block; height:100%; background:#bbbbbb; position:relative }
#naviarea { padding-bottom:2.2em; margin-bottom:-2.2em }
#dynaviarea { position:fixed; top:-7em; margin-top:2px; z-index:79; padding-bottom:2em;
transition:top 0.2s ease; -webkit-transition:top 0.2s ease; }
#dynaviarea:hover { top:-2px; z-index:95;
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 78%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(78%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 78%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 78%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 78%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 78%,rgba(255,255,255,0) 100%);
}
#dynaviarea:hover .mainLogoLink
{ opacity:1 }
#dynaviarea:hover .mainCategories
{ margin-bottom:0px }
#dynaviarea .mainLogoLink
{ opacity:0; transition:opacity 0.2s ease; -webkit-transition:opacity 0.2s ease; }
#dynaviarea .mainCategories
{ margin-bottom:2px }
#begin { position:absolute; width:1px; height:1px; bottom:6.4em; margin-bottom:-2px }
/* #dynaviarea.home { display:none; position:fixed }*/
.blog .navi { background:#57a662 }
.projects .navi { background:#5fbcd3 }
.photos .navi { background:#d35f5f }
.contact .navi { background:#d3ba5f }
.headerSelector { margin:0em; padding:0.2em 0em 0em 0em; display:block; list-style:none; line-height:1 }
.headerSelector li { margin:0em; padding:0em; display:block; list-style:none; line-height:1; display:inline-block }
.headerSelector li a { display:block; padding:0em 0.5em; color:white; text-decoration:none !important }
.headerSelector li a span
{ display:block; padding:0.5em 0em 0.3em 0em; margin-bottom:2px }
.headerSelector li a:hover span, .headerSelector li a:focus span, .headerSelector li a.current span
{ border-bottom:2px solid #ffffff }
.headerSelector li a:hover span, .headerSelector li a:focus span
{ border-bottom-color:rgba(255,255,255,0.5) }
.headerSelector li a.current span
{ border-bottom-color:#ffffff }
.titleSelector { padding:0em; display:block; list-style:none; line-height:1; float:right; margin:0.5em -0.5em 0em 1em }
.titleSelector li { margin:0em; padding:0em; display:block; list-style:none; line-height:1; display:inline-block }
.titleSelector li a { display:block; padding:0em 0.5em; color:#444444; text-decoration:none !important }
.titleSelector li a span
{ display:block; padding:0.5em 0em 0.3em 0em; margin-bottom:2px }
.titleSelector li a:hover span, .titleSelector li a:focus span, .titleSelector li a.current span
{ border-bottom:2px solid #444444 }
.titleSelector li a:hover span, .titleSelector li a:focus span
{ border-bottom-color:#a1a1a1 }
.titleSelector li a.current span
{ border-bottom-color:#444444 }
#languageSelector, #dylanguageSelector
{ z-index:92; position:absolute; right:2.9em; top:0em }
.mainCategories { margin:0em; padding:0em; display:block; list-style:none; line-height:1; z-index:92; position:absolute; right:2.7em; bottom:-2px; vertical-align:bottom }
.mainCategories li { margin:0em; padding:0em; display:block; list-style:none; line-height:1; display:inline-block; vertical-align:bottom }
.mainCategories li a { display:block; font-size:1.3em; color:white; text-decoration:none !important; padding:0em 0.5em }
.mainCategories li a span
{ display:block; padding:0.4em 0em; border-bottom:2px solid #ffffff; border-bottom-color:rgba(255,255,255,0) }
.home .mainCategories li.blog a span
{ border-bottom-color:#57a662 }
.home .mainCategories li.projects a span
{ border-bottom-color:#5fbcd3 }
.home .mainCategories li.photos a span
{ border-bottom-color:#d35f5f }
.home .mainCategories li.contact a span
{ border-bottom-color:#d3ba5f }
#afternavi.blog h1 { border-color:#57a662 }
#afternavi.projects h1 { border-color:#5fbcd3 }
#afternavi.photos h1 { border-color:#d35f5f }
#afternavi.contact h1 { border-color:#d3ba5f }
.mainCategories li a:hover span, .mainCategories li a:focus span, .mainCategories li a.current span
{ border-bottom:2px solid #333333 !important }
.menu h4 { display:none }
/* Navigationspfeile */
.prevItem, .nextItem, .closeButton
{ background:#f2f2f2; position:absolute; width:1.7em; top:-0.5em; padding:0.5em; text-align:center; text-decoration:none !important;
color:#000000 !important; display:block }
.nextItem { right:-0.5em }
.prevItem { right:3.4em }
.closeButton { left:-0.5em }
.prevItem:hover, .nextItem:hover, .prevItem:focus, .nextItem:focus, .closeButton:hover, .closeButton:focus
{ background:#dddddd; border-bottom:2px solid #999999 }
/* Footer */
#backToTop { position:absolute; left:0px; right:0px; bottom:2em; text-align:left; padding-left:3.4em }
#backToTop a { padding:0.2em 0em;
margin-bottom:2px; text-decoration:none !important; color:#aaaaaa !important }
#backToTop a:hover, #backToTop a:focus
{ color:#000000 !important; margin-bottom:0px !important; border-bottom:2px solid #000000 !important }
#backToTop a:after { content:' ↑'; padding-left:0.3em; visibility:hidden }
#backToTop a:hover:after
{ visibility:visible }
/* Lightbox */
#lightboxBg { position:fixed; left:0px; top:0px; width:100%; height:100%; background:#000000; z-index:400; opacity:0.85 }
#lightbox { position:fixed; left:0px; top:0px; right:0px; bottom:6.8em; z-index:401 }
#lightboxContent { position:absolute; left:0px; top:0px; right:0px; bottom:0px; height:auto; margin:auto; text-align:center; vertical-align:top; line-height:1; max-width:100%; max-height:100% }
#lightboxScroller { overflow:auto; position:absolute; left:0px; top:0px; right:0px; bottom:-20px; margin:auto; max-width:100%; max-height:100%; text-align:center }
#lightboxImage { }
#lightboxNavi { background:#444444; padding:1.7em 8.5em 1.7em 5.1em; height:1.7em; color:#888888; margin-top:1.7em; text-align:left;
line-height:1.7em; text-overflow:ellipsis; white-space:nowrap;
vertical-align:top; position:absolute; left:0px; bottom:-6.8em; right:0px; z-index:500; overflow:hidden }
#lightbox .nextItem { top:1.2em; right:1.2em }
#lightbox .prevItem { top:1.2em; right:5.1em }
#lightbox .closeButton { top:1.2em; left:1.2em }
#lightbox a.prevItem, #lightbox a.nextItem, #lightbox a.closeButton
{ background:#333333; color:#aaaaaa !important }
#lightbox a.prevItem:hover, #lightbox a.nextItem:hover, #lightbox a.prevItem:focus, #lightbox a.nextItem:focus,
#lightbox a.closeButton:hover, #lightbox a.closeButton:focus
{ background:#000000 !important }
/* Input-Felder */
.inputField, .inputContent
{ padding-bottom:0.2em; position:relative }
.inputField, .inputContent
{ margin-right:6px }
.inputField input, .inputContent textarea, .inputField select
{ display:block; width:100%; min-width:100%; max-width:100%; border:none; margin:0px -6px -2px 0px; font:inherit;
background:#f8f8f8; color:#000000; border-bottom:2px solid #cccccc }
#commentspace .inputField input, #commentspace .inputContent textarea
{ background:#ffffff }
.inputField input, .inputField select
{ line-height:1em; padding:0.3em; vertical-align:bottom }
.inputContent textarea { line-height:inherit; padding:0em 0.3em; height:6.2em; min-height:5.5em }
.inputField input:focus, .inputContent textarea:focus, .inputField select:focus
{ border: 2px solid #777777; margin:-2px -8px -2px -2px }
/* .inputField input:focus, textarea:focus { border-bottom-color:#777777; outline:none }*/
.inputField span, .inputField label, .inputContent span, .inputContent label
{ display:block; padding:0.5em 0em 0.2em 0em }
.buttonArea { text-align:right }
/* Suchbereich */
#search { margin:0em !important; padding:0em !important }
#searchform { margin:0em; padding:0.7em 0.5em 0em 0em; width:12em; position:relative }
#searchform .inputField { margin-top:0em; padding-top:0em; padding:0em !important }
#searchform .inputField input
{ position:relative; z-index:20; background:rgba(0,0,0,0.03) }
#searchlabel { position:absolute; left:0.4em; top:0em; margin:0em; padding:0em; z-index:19; color:#aaaaaa; display:none }
@media only screen and (max-width:600px)
{
.mainCategories { right:0.5em }
#languageSelector, #dylanguageSelector
{ right:0.5em }
.mainLogoLink { left:1em }
}
@media only screen and (max-width:550px)
{
.mainCategories { right:auto; left:69px; margin-left:0.45em }
.mainLogoLink strong
{ bottom:1.9em; margin-left:0.1em; padding-bottom:0.3em; padding-top:0.8em }
.mainLogoLink:hover strong, .mainLogoLink:focus strong
{ border-bottom-color:rgba(255,255,255,0.5) !important }
.mainLogoLink:hover em, .mainLogoLink:focus em
{ color:rgba(255,255,255,0.5) !important }
}
@media only screen and (max-width:440px)
{
#headareaContent
{ padding:1.7em 0em; margin:0em 1.7em }
.titleSelector { position:static; text-align:right; margin-right:-0.9em }
.mainCategories { display:none }
.menu { position:absolute; left:0px; bottom:0px; right:0px; text-align:right }
.menu h4 { display:block; cursor:pointer; position:absolute; color:white; padding:0em 0.7em; bottom:0em; right:0px; margin:0em 0em 0em 0.35em; font:inherit; font-size:1.3em; z-index:50 }
.menu h4 span { display:block; padding:0.4em 0em }
.mainLogoLink { z-index:20 }
.mainLogoLink strong { bottom:0em; margin-left: 0em; padding-bottom:0.4em }
.menu:hover .mainCategories, .menu:focus .mainCategories
{ display:block; background:#bbbbbb; left:0px; right:0px; top:0em; margin:0px 0px 0px 0px; bottom:auto;
border-top:2px solid #ffffff; z-index:49; padding-right:0.3em }
.menu:hover .mainCategories a, .menu:focus .mainCategories a
{ margin-bottom:-2px }
.menu:hover h4 span, .menu:focus h4 span
{ border-bottom:2px solid #000000; margin-bottom:-2px }
.blog .mainCategories
{ background:#57a662 !important }
.projects .mainCategories
{ background:#5fbcd3 !important }
.photos .mainCategories
{ background:#d35f5f !important }
.contact .mainCategories
{ background:#d3ba5f !important }
#backToTop { padding-left:1.7em }
.mainLogoLink:hover strong, .mainLogoLink:focus strong
{ border-bottom-color:#000000 !important }
.mainLogoLink:hover em, .mainLogoLink:focus em
{ color:#000000 !important }
}
@media only screen and (max-width:300px)
{
#languageSelector, #dylanguageSelector
{ display:none }
.mainLogoLink strong
{ bottom:1.9em; margin-left:0.1em; padding-bottom:0.3em }
.menu { z-index:21 }
.mainLogoLink:hover strong, .mainLogoLink:focus strong
{ border-bottom-color:rgba(255,255,255,0.5) !important }
.mainLogoLink:hover em, .mainLogoLink:focus em
{ color:rgba(255,255,255,0.5) !important }
}
@media only screen and (min-width:800px)
{
#headarea p { max-width:52em }
}
@media only screen and (min-width:1000px)
{
#headarea p { max-width:64em }
}
/* Sehr große Bildschirme -> Inhalt zentriert */
@media only screen and (min-width:1650px) {
#headareaContent
{ padding-left:16.2em; padding-right:16.2em !important }
#afternavi h1 { border-left:2px solid #aaaaaa; max-width:41.6em; padding:0em 0.83em; margin-left:auto; margin-right:auto; float:none }
#headarea p
{ max-width: 83.2em; margin-left:auto; margin-right:auto; padding-left: 1.9em; padding-right:1.7em }
.titleSelector { margin:0em; padding:0em; display:block; list-style:none; line-height:1; position:absolute; right:2.9em; top:4.2em }
#search { right:3.4em }
}
/* Hohe Auflösungen */
@media only screen and (-webkit-min-device-pixel-ratio: 1.1), (min-resolution: 100dpi) {
.mainLogoLink { background-image:url('../style/img/title-oachkatzerl-2x.png') }
}
/* @media only screen and (-webkit-min-device-pixel-ratio: 1.1), (min-resolution: 100dpi) {
.mainLogoLink { background-image:url('../style/img/title-christmas-oachkatzerl-2x.png') }
}*/
@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
/* Verhindern, dass Chrome Mobile manchen Text "aufbläst" */
p, ul, li, h1, h2, h3, #headareaContent
{ max-height:5000em }
}