/* ############################################################### Main styles for NAHLIK, heim-und-garten.com 2013 FileName: main.css Author: Barbara Völk, voelkwerbung.de Version: 2015.08.27 ############################################################### */ /***********************************************/ /* Colours */ /***********************************************/ /* grey #404040 bg = rgba(64, 64, 64, 1) (grey2 #3a3a3a = rgba(58, 58, 58, 1)) d-grey #202020 schrift = rgba(32, 32, 32, 1) l-grey #808080 = rgba(128, 128, 128, 1) logo green #a1c75f l-green #88af45 = rgba(136, 175, 69, 1) green #80955b = rgba(128, 149, 91, 1) d-green #5d811f = rgba(93, 129, 31, 1) dd-green #3e5d0a = rgba(62, 93, 10, 1) */ /***********************************************/ /* HTML5 / CSS3 SETTINGS */ /***********************************************/ /***********************************************/ /* MAIN SETUP RESET */ /***********************************************/ html, body, div, a, p, img, ul, li, h1, h2, h3, h4, span, time, hr, hgroup, a img, footer, header, section, aside, nav, form, input, article, label, textarea, small { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration:none; } footer, section, article, header, aside, nav { display:block; } :focus { outline:none; } ::-moz-selection, ::selection { color: #202020; background: #ffffff; } h1, h2, h3, h4 { font-weight:normal; } ul { /*list-style:none; list-style-type: square;*/list-style-type: none; } /* Set up for stiles for links + hover effects for desktop + mobile (which don't use :hover) */ a:link { color: #202020; text-decoration: underline; text-decoration:none; /*font-size:12px;*/ color: #a1c75f;/* a1c75f; logo green */ text-decoration:none; } a:visited { color: #202020; text-decoration: none; /*font-size:12px;*/ color: #a1c75f;/* a1c75f; logo green */ text-decoration:none; } a:hover, a:active, a:focus { color: #80955b; /*#80955b nahlik green */ color:#a1c75f; /* #a1c75f logo-green */text-decoration:underline; } /********************************************************************/ /* MAIN SETUP BASIC ELEMENTS */ /********************************************************************/ html { height:101%; /* make scrollbar visible all the time */ /* border-top:solid 2px #404040; */ /* border-bottom:solid 20px #404040; */ /*background: transparent url("../images/bottom.png") center bottom no-repeat fixed;background: transparent url("../images/bottom.png") center bottom repeat-x fixed;*/ /*background: #ffffff url("../images/bg.png") left top repeat-x; */ } body { font-size:20px; font-size: 12px; font-size: 0.750rem; /*letter-spacing: 1px;*/ color: #333333; -webkit-text-size-adjust:100%; /* Specifies a size adjustment for displaying text content in Safari on iPhone. */ line-height:1.3em; line-height:1.1rem; padding:0; margin:0; background: #404040 url("../images/bg.png") 0px 20px repeat-x scroll/* #404040 bg grey */; background: #404040 url("../images/main1.png") center top repeat-y; /*height:100%;*/height:100%; min-height:99%; font-family: Arial, Verdana, Helvetica, sans-serif; } h1 { font-size:34px; font-size: 28px; font-size:1.75rem; font-weight:100; margin: 82px 0 0 0px; padding: 12px 0 4px 70px; color: #404040; /* grey */ /*background: #ffffff;*/ } h2 { color:#ffffff; margin: 8px 0 2px 0px; font-size: 14px; /*14px;*/ font-weight:500; font-size: 15px; font-size:1rem; line-height:1.0rem; } h3 { margin: 18px 8px 6px 14px; font-weight:bold; font-size: 13px; font-size: 0.813rem; color:#ffffff; margin-bottom:20px; } ul { margin: 0px; padding:0; color:#ffffff; } ul li { font-size:12px; font-size: 13px; font-size:0.813rem; margin: 0px; line-height:14px; line-height: 0.875rem; /* list-style-image:none;*/ /* list-style-type:none;*/ } /********************************************************************/ /* MAIN WRAPPERS + MAIN LAYOUT ELEMENT + TAG SELECTORS */ /********************************************************************/ #outerWrapper {/*position: relative; width: 100%;*/width:100%;background: transparent url("../images/raster.png") center top no-repeat; background: transparent url("../images/bg.png") 0px 18px repeat-x;height: 100%;margin: 0px 0 0 0; padding: 0px;} /*header,*/ #topWrapper {/* position: relative;top:7px;top:30px; width:990px;*/max-width:990px;width:86%;height: 152px;background: transparent /* transparent url("../images/heimundgartenGebaeudereinigungNew.png") 0px 51px no-repeat*/; margin: 0px auto 0 auto;/*margin: 0px auto 0 auto;*/ padding: 7px 0 0 0px;} #topWrapper {/*position: relative;top:68px;*/position: relative;top:58px;min-width: 990px;max-width: 990px;width:86%;margin: 0px auto 0 auto;padding: 7px 0 0 0px;} #mainWrapper {/*position: relative; top: 10px;*/min-width:964px;max-width:964px;width:86%;/*height: 613px; */ /*height: auto!important;height: 100%;*/margin: 0px auto 0 auto;/*margin: 0 auto 0 auto;*/ padding: 10px 0 0 0;clear: both; /* background: #C96 beige tester transparent */background: transparent; word-wrap: break-word;/*background: #eee; transparent*/} #mainWrapper.index { background: transparent url("images/hausundgartenservice.jpg") 256px 36px no-repeat ;background: transparent url("../images/hausundgartenservice.jpg") 238px 76px no-repeat;/* repeat-y background: #eee;*/} #mainWrapper.nahlik { /*background: transparent url("images/nahlik.jpg") 256px 36px no-repeat ;background: transparent url("../images/nahlik.jpg") 238px 96px no-repeat ;*/} #leftWrapper {flaot:left;max-width:362px; width: 37%;/* width: 37%;*//*height:580px;height: 100%;*//*min-height: 545px;height: auto!important;height: 545px;*/background: transparent;/* transparent */margin: 0px 0 0 0px;min-height: 545px;height: auto!important;height: 545px;} #rightWrapper{/*position:relative;top:0;left:494px;*/float:right;clear:both; max-width:626px;width: 63%;/* width: 63%;height: 100%;*//*height: 538px;*/background: #ffffff;/* transparent #601b00 #9c2C00 red; before #601b00 burgundy */margin: 0px 0px 0 0; background: transparent url("../images/rightWrapperBG.png") 0px 18px repeat-y scroll;} #rightWrapper.index{/*position:relative;top:0;left:494px;*/float:right;clear:both; max-width:626px;max-width:746px;width: 63%;/* width: 63%;height: 100%;*//*height: 538px;*/margin: 100px 0px 0 0; /*background: transparent url("../images/rightWrapperBG.png") 0px 18px repeat-y scroll;*/background: #ffffff;background: transparent;} /********************************************************************/ /* MAIN NAVIGATION */ /********************************************************************/ #home {/* position: absolute; top:50px;left:0px;*/float:left; width: 268px; width: 238px;height: 112px!important;margin: 0px 0 0px 0px; padding: 0px 0 0 0px;background: transparent url("../images/heimundgartenGebaeudereinigungNew.png") 0 7px no-repeat;overflow: visible;} #home img {width: 238px;/*width: 268px;*/height: 112px;} nav, .topNav {background: transparent;margin: 68px 0 0px 0px;} #menu {/*float:left; position: absolute; top:50px;right:0px;*/ float: right; width: 750px;/* width: 738px; min-height: 300px; height: 112px!important;*/ height: 62px!important;margin: 0px 0 0px 0px; padding: 0px 0 0 0px; overflow: visible;/*clear:both; transparent */background: transparent; /* transparent #eee; url("../images/bgSemiTransparent.png") */} /* menue like schiffner */ .menueMobile {display: none;width: 100%;min-width:380px;/* background: #0FC;*/margin:0; margin: 33px 0 0 0;} .menueMobile a {/*font-family: Futura, AvantGarde, Helvetica, Arial, sans-serif!important; font-family: AvantGarde, Helvetica, Arial, sans-serif!important; */font-family: Helvetica, Arial, sans-serif!important; /*letter-spacing: 3px!important;*/ font-stretch: expanded!important; font-weight:300!important;line-height:1.03rem!important;} #menueMobile {display: none;/*width: 100%;min-width:380px;*/float: right; /* width: 738px; min-height: 300px; height: 112px!important;*/ height: 62px!important;margin: 0px 0 0px 0px; padding: 0px 0 0 0px; overflow: visible;/*clear:both; transparent */background: transparent; } #menu a h3, #menu a:visited h3 {/*min-width:144px;width: auto!important;width:100px;*/font-family: Arial, sans-serif; font-size: 28px; font-size: 1.750rem; font-weight: 300!important; font-stretch: expanded!important; color: #2a1d3a;/* #2a1d3a; lilatext-transform: uppercase; */ padding: 38px 0px 16px 0px; padding: 0px 0px 16px 0px;/* padding: 8px 18px 4px 18px;float:left;clear:both;width: 238px*/ max-width: 238px!important;height: 35px;height: 42px;text-align: right;float: right;float: left; margin:39px 0px 0 0px;margin:0px 0px 0 0px;/*border-bottom: 1px solid #fff;*//*background: #999;*/border-bottom: 1px solid transparent;/**/border-top: solid 6px #5d811f;overflow:hidden;} #dropdown1 a h3 { background: transparent url("../images/unternehmen.png") 0px 12px no-repeat;} #dropdown2 a h3 { background: transparent url("../images/leistungen.png") 0px 12px no-repeat;} #dropdown3 a h3 { background: transparent url("../images/kontakt.png") 0px 12px no-repeat;} .dropdown h3 {display:inline;float:left;clear:left; text-align: right; font-size: 28px; font-size: 1.750rem; font-weight: 300;margin: 0px 0 0 0px; padding: 0px 0 0px 0;/*min-height: 30px; height:auto !important; height: 30px;background-color: #262626;*/ color: #404040!important; /* border-right: solid #adaba5 2px; background-color: #999;*/ /*width: 171px;*/border-top: solid 6px transparent; /* d-green #5d811f greenM #80955b*/} #dropdown1 a h3 img, #dropdown2 a h3 img, #dropdown3 a h3 img {height: 35px;height: 70px;width: 238px;/*background: #ddd;*/} /* #dropdown1 a:hover h3 img, #dropdown1 a:focus h3 img, #dropdown1 a:active h3 img {display: none;} #dropdown2 a:hover h3 img, #dropdown2 a:focus h3 img, #dropdown2 a:active h3 img {display: none;} #dropdown3 a:hover h3 img, #dropdown3 a:focus h3 img, #dropdown3 a:active h3 img {display: none;}*/ #dropdown1 a:hover h3, #dropdown1 a:focus h3, #dropdown1 a:active h3 {background: transparent url("../images/unternehmen-o.png") 0px 12px no-repeat;/*font-weight: 300!important;overflow:hidden;*/} #dropdown2 a:hover h3, #dropdown2 a:focus h3, #dropdown2 a:active h3 {background: transparent url("../images/leistungen-o.png") 0px 12px no-repeat;} #dropdown3 a:hover h3, #dropdown3 a:focus h3, #dropdown3 a:active h3 {background: transparent url("../images/kontakt-o.png") 0px 12px no-repeat;} #menu a h3, #menu a:visited h3 {padding: 30px 0px 16px 0px;border-bottom: 1px solid transparent;/**/overflow:hidden;border-top: solid 6px transparent; /* greenM #80955b*/min-width: 200px;/*width: 28%;*/max-width: 220px;height: 18px;} #menu a h3.current, #legal a h3.current {color: #a1c75f;/* #a1c75f; logo green; #a7a326; lime-green *//*border-bottom: 1px solid #a1c75f;*/cursor: default;border-top: solid 6px #5d811f; /* #5d811f d-green greenM #80955b*/color: #3a3a3a; /* d-grey #3a3a3a */} #menu a h3.current, #legal a h3.current {color: #a1c75f;/* #a1c75f; logo green; #a7a326; lime-green *//*border-bottom: 1px solid #a1c75f;*/cursor: default;border-top: solid 6px #5d811f; /* d-green #5d811f greenM #80955b*/color: #3a3a3a; /* d-grey #3a3a3a */ padding: 30px 0 0 0;height: auto;overflow:hidden;height: 58px;height: 34px;} #dropdown2 h3.current {background: transparent url("../images/leistungen-a.png") 0px 0px no-repeat!important } #dropdown2 h3.current {background: transparent url("../images/leistungen-a.png") 0px -11px no-repeat!important } .dropmenu {/*position: relative; top:0;float: right;*//* width: 120px;width: 238px;*/ margin: 2px 0px 0px 12px; padding: 0px 0px 0px 0px;/*background:#ddd;*//*position: relative; top:0;float: right; width: 120px;width: 238px;*/float: left; margin: 2px 0px 0px 12px;} .dropmenu ul {width: 228px;clear: both;float: right; margin: -1px 0px 0px -13px; padding:24px 0 24px 0px;} .dropmenu ul li, .dropdownhome ul li { margin: 0px 0 4px 20px; margin: 0px 0 4px 10px;padding:3px 0px 2px 0px;list-style-position: outside; } .dropmenu ul li a, .dropdownhome ul li a{ margin: 0px 0 4px 20px; margin: 0px 0 4px 10px;padding:3px 0px 2px 0px; list-style-position: outside;color: #ffffff!important; border-bottom: 6px solid #404040;} /*.dropmenu { margin: 2px 0px 0px 12px; padding: 0px 0px 0px 0px;float: left; margin: 2px 0px 0px 12px;margin: 2px 0px 0px 10px;} .dropmenu ul {width: 228px;clear: both;float: right; margin: -1px 0px 0px -13px; padding:24px 0 24px 0px;} .dropmenu ul li { margin: 0px 0 4px 20px; padding:3px 0px 2px 0px;list-style-position: outside; } .dropmenu ul li a { margin: 0px 0 4px 20px; padding:3px 0px 2px 0px; list-style-position: outside;color: #ffffff!important; border-bottom: 6px solid #404040;}*/ .dropmenu ul li a:hover, .dropmenu ul li a:focus, .dropmenu ul li a:active {text-decoration: none;color: #808080!important; /* #808080 l-grey */ border-bottom: 6px solid #a1c75f; /* border-bottom: 1px solid #906e3e;background: url("../images/menu_mitte_selected.gif") left center no-repeat;*/} .dropmenu ul li a:hover, .dropmenu ul li a:focus, .dropmenu ul li a:active {border-bottom: 6px solid #404040!important;} #home .dropdownhome ul {/*float:left;width: 128px!important;font-size: 13px;margin: -3px 0px 0px 0px!important; padding:12px 0 18px 0px;color: #906e3e;background-color:#404040;/*text-transform: lowercase;*/ margin: -1px 0 0px 0px;height: 30px;width: 128px;} #droplist0 { margin:0;padding: 0px;padding: 10px 6px 10px 0;} /* extra settings since list image won't show unless you add # mainWrapper, but that influences .dropdown listsettings*/ /* #808080 l-grey */ /*.dropdown ul li a img {width: 10px; height:10px;float: left;margin: 6px 4px 0 0;} .dropdown h5 a:hover {margin: 0px 0 0px 0px; padding: 0px 12px 0 0; text-decoration: none;color: #ffffff!important; border-bottom: 6px solid #404040;} .dropdown ul li a:hover {margin: 0px 0 4px 0px; padding: 0px 12px 0 0; text-decoration: none;color: #808080!important; border-bottom: 6px solid #a1c75f; } #dropdown1 ul li a:hover {margin: 0px 0 4px 0px; padding: 0px 12px 0 0; text-decoration: none;color: #808080!important; border-bottom: 6px solid transparent; } */ /*#topmenue ul { float:left;display: none;} */ #droplist0, #droplist1, #droplist2, #droplist3 {float:left;display: none;/*display: block; display: none;*//* border:solid 1px transparent;border-top:none;*/background-color: #404040; width: 228px;} #dropdown1:hover #droplist1 {display: block;background-color:#404040;border-top: 1px solid #a1c75f;} #dropdown2:hover #droplist2 {display: block;background-color:#404040;border-top: 1px solid #a1c75f;} #dropdown3:hover #droplist3 {display: block;background-color:#404040;border-top: 1px solid #a1c75f;} /**/ #current2 #dropdown2:hover #droplist2, #current2 #dropdown2:focus #droplist2, #current2 #dropdown2:active #droplist2, #current1 #dropdown1:hover #droplist1, #current1 #dropdown1:focus #droplist1, #current1 #dropdown1:active #droplist1 {display: none!important;} /* not necessary??? #current2 #dropdown2 #back {display: none;} For testing; #current2 #droplist2 {display: block!important;} */ #back {border-bottom: 1px solid #88af45;border-bottom: 1px solid #a1c75f; display: none;} #dropdown2 #back a, #dropdown3 #back a { border-bottom: 6px solid transparent;} #dropdown2 #back a:hover, #dropdown2 #back a:focus, #dropdown2 #back a:active { border-bottom: 6px solid transparent;} #dropdown3 #back a:hover, #dropdown3 #back a:focus, #dropdown3 #back a:active { border-bottom: 6px solid transparent;} #home:hover #droplist0 {display: block;background-color:#404040;border-top: 1px solid #a1c75f;position: absolute; top: 131px;} /*#current2:hover #dropdown2 #droplist2 {display: none!important;} */ /*.dropdown ul.active {display: block!important;background: #ffffff; } */ #droplist2 .active {color:#575757!important;border-bottom: 6px solid #a1c75f;/* #a1c75f loogo green color:#1c1a1b!important;border-left:solid 1px #c5c6c7;*/} #droplist2 li.active a {border-bottom: none;padding-bottom: 6px;/* #a1c75f loogo green color:#1c1a1b!important;border-left:solid 1px #c5c6c7;*/} /* check if still needed??? */ /*#droplist3 .active {color:#575757!important;border-bottom: 1px solid #575757;}*/ /* special setting for #dropdown1 on index page */ #dropdown1 .hover2, #dropdown1 .hover1 {/*margin: 0px 0 0px 0px;padding: 0px 0 0 0px;*/ border-bottom: 6px solid #404040;} .address {/*width: 90%; for smartPhnone further on in css setttings*/ } #contact {display: inline; } #imprint {display: inline; } .imprint {display: none; float:left; margin: 0 0 0 4px;} /* NOTE Transition-Eigenschaft + necessary Vendor-Prefixes for Safari, Chrome, Firefox, Opera und Internet Explorer transition: all 2s ease-in 2s; explorer 10 -webkit-transition: all 2s ease-in 2s; chrome & safari -moz-transition: all 2s ease-in 2s; firefox -o-transition: all 2s ease-in 2s; opera */ /***********************************************/ /* SUBMENU */ /***********************************************/ /* pages unternehmen */ #leftWrapper .current1 {/*position: absolute; top:18px;left: 136px; */position: relative; top:18px;top:38px;left: 136px; /*width: 315px;*/margin: 0px 0 8px 0px; padding: 0px 0 0 0px; z-index: 50;/*background-color:#ddd;*/background-color: #404040; width: 342px;height: 1px;} /* pages leistungen */ #leftWrapper .current {/*position: absolute; top:18px;left: 136px; */position: relative; top:18px;top:38px;left: 136px; /*width: 315px;*/margin: 0px 0 8px 0px; padding: 0px 0 0 0px; z-index: 50;/*background-color:#ddd;*/background-color: #404040; width: 591px;height: 1px;} /* page impressum, anfahrt, kontakt */ #leftWrapper .current3 {position: relative; top:18px;top:38px;left: 136px; /*width: 315px;*/margin: 0px 0 8px 0px; padding: 0px 0 0 0px; z-index: 21;/*background-color:#ddd;*/background-color: #404040; width: 841px;height: 1px;} #leftWrapper .submenu {/*position: absolute; top:19px;left: 136px;*/position: relative; top: 0px;top: -30px;left: 136px; /*width: 315px;*/margin: 0px 0 8px 0px; padding: 0px 0 0 0px; z-index: 50;/*background-color:#ddd;*/background-color: #404040; width: 228px;} #leftWrapper .submenu ul {/* position: relative; top:46px;position: relative;top:150px; left: 590px;*/float:left;width: 228px;/*font-size: 13px;*/float:left; margin: 0px 0px 0px 0px; padding:24px 0 24px 0px;padding:24px 0 24px 0px;/*list-style: disc outside;*/ color: #906e3e;/*text-transform: lowercase;*/background-color:#404040;} #leftWrapper .submenu ul li{float:left;clear:both;display: block;width: 208px;/* width for IE7 */ margin: 0px 0 6px 20px; padding:3px 0px 2px 0px;/*list-style-image: url(../images/disc.png); list-style-type: disc;*/list-style-position: outside;} #leftWrapper .submenu ul li a/*, .dropdown ul li a:visited */{font-size: 13px;margin: 0px 0 4px 0px; padding: 0px 0 1px 0; text-decoration: none;/*list-style-image: url(../images/disc.png); list-style-type: disc;*/list-style-position: outside;color: #ffffff!important; border-bottom: 6px solid #404040;/*background: #999;*/} #leftWrapper .submenu ul li a:hover {margin: 0px 0 4px 0px; padding: 0px 0px 0 0; text-decoration: none;color: #808080!important; /* #808080 l-grey */ border-bottom: 6px solid #a1c75f; /* border-bottom: 1px solid #906e3e;background: url("../images/menu_mitte_selected.gif") left center no-repeat;*/} #leftWrapper .submenu ul li.active a {border-bottom: none;padding-bottom: 6px;/* #a1c75f loogo green color:#1c1a1b!important;border-left:solid 1px #c5c6c7;*/} #leftWrapper .active {color:#575757!important;border-bottom: 6px solid #a1c75f;/* #a1c75f loogo green color:#1c1a1b!important;border-left:solid 1px #c5c6c7;*/} /***********************************************/ /* MAIN PART */ /***********************************************/ /*section, */ .address {/*float:left;*/ display: block;clear:both; } .address h2 { margin: 0 0 12px 0;} .low, .address, .low2, .low3 { /*position: absolute;top: 494px; bottom: 300px; *//*float:left;*/ /*top:200px;*//*position:relative; /*bottom: 300px; *//* top:334px; width: 362px;width: 350px;*/ width: 250px;margin: 0px 0 8px 0px; padding: 0px 0 0 12px;/*background:#999;*/} .low {position: absolute; top:290px;} .low2 {position: absolute; top:350px;} .low3 {position: absolute; top:333px;} .low a, .address a, .low2 a, .low3 a { text-decoration:none; font-size:12px; color: #ffffff;/* a1c75f; logo green */ } .low a:hover, .address a:hover, .low2 a:hover, .low3 a:hover { color:#a1c75f; /* #a1c75f logo green */text-decoration:underline; } #rightWrapper h1 { display:inline;float:left;clear:both; width: 437px;/* 488px; 551px; 614px;*/ font-size:28px; font-weight:100; margin: 48px 0px 0 1px; padding: 12px 4px 4px 70px; color: #404040; /* grey */ /*text-transform: uppercase;*/ /*background: #ffffff;*/ text-align: left; font-size: 15px; font-size:1.0rem; font-size: 24px; font-size:1.5rem; font-size: 28px; font-size:1.75rem; line-height:1.0rem; line-height: 34px;line-height:1.8rem; font-stretch: expanded; overflow: visible; } #rightWrapper h2 {/*width:315px;*/float:left;clear:both; color:#404040; /* red-brown */ margin: 72px 8px 8px 70px; /*text-align:right;*/ font-size:26px; font-weight:500;/*background: #eee;*/ font-size: 26px; font-size:1.6rem; } #rightWrapper h3 {display:inline;width:345px;float:left;clear:both; color:#404040; /* red-brown */ margin: 18px 8px 0px 124px; /*text-align:right;*/ font-size: 14px; font-size:0.875rem; font-weight:600; } .indent, .indentH2 {margin-left: 52px;display:block;} .indentH2 {font-size:20px;font-size: 1.250rem;margin-top: 6px;} .right {float: right;margin: 20px 0 20px 0;} p { margin: 8px 8px 8px 14px; line-height:14px;line-height:1.0rem; font-size: 13px; font-size:0.813rem; color:#ffffff; /* */ } #rightWrapper p.first { float:left;clear:both;width:362px; margin: 18px 8px 0px 140px; font-size: 13px; font-size:0.813rem; color:#404040; /* grey*/ } #rightWrapper p, #rightWrapper ul { float:left;clear:both;width:362px; margin: 0px 8px 0px 140px; font-size: 13px; font-size:0.813rem; color:#404040; /* grey*/ } #rightWrapper ul.first { float:left;clear:both;width:362px; margin: 18px 8px 0px 124px; font-size: 13px; font-size:0.813rem; color:#404040; /* grey*/ } #rightWrapper ul { float:left;clear:both;width:352px;line-height:1.0rem; margin: 8px 8px 0px 140px; font-size: 13px; font-size:0.813rem;/*font-size: 13px; font-size:0.813rem;*/line-height:1.0rem; color:#404040; /* grey*/ } #rightWrapper ul.list2 { list-style: square; list-style-position: outside;line-height:1.2rem!important;margin-left: 156px; } #rightWrapper ul.list2 li { margin-bottom: 2px;} #rightWrapper ul.list { float:left;clear:both;width:362px;list-style: none; list-style-position: outside; margin: 8px 8px 0px 124px; /*font-size: 13px; font-size:0.813rem;*/line-height:1.0rem; color:#404040; /* grey*/ } #rightWrapper a, #rightWrapper a:visited { color:#404040; /* grey*/ text-decoration:underline; } #rightWrapper a:hover, #rightWrapper a:focus, #rightWrapper a:active { color:#a1c75f; /* #a1c75f logo-green */ text-decoration:underline; } #rightWrapper .columnIndex p { /*float:left;clear:both;width:362px;*/ /*margin: 18px 8px 8px 124px;margin: 18px 8px 8px 80px;*/ margin: 10px 8px 8px 80px; line-height:16px; } .column, .columnIndex {clear:both;width: 512px;/* 362px = 3 raster 488px = 4 raster *//* min-height: 480px; height:auto !important; height: 480px; for index/ lots of text */min-height: 142px; height:auto!important; height: 142px;margin: 0px 0 12px 0px; padding: 0px 0 0 0px; /*background: #ffffff; */} /*section.column {position: relative;} */ .columnIndex {/*position: absolute;top:220px;top:300px; */ /*position: relative;top:300px;top:10px; */width: 488px;height: auto;margin: 130px 0 12px 132px; padding: 4px 0 0 0px; background: #ffffff; background: transparent url("../images/rightWrapperBG.png") 0px 18px repeat-y scroll; min-height: 308px;} /*#rightWrapper h1.index */ /*#rightWrapper h1#index */ h1#index { width: 556px;width: auto; margin: 100px 0 12px 132px; padding: 0px 0 0 0px; background: #ffffff; margin: 48px 0px 0 1px; padding: 12px 4px 4px 70px; margin: 0px 0px 0 0px; padding: 12px 4px 4px 60px; font-size:34px; font-size:2.1rem; line-height:1.0rem; line-height:1.8rem; line-height: 34px;line-height:2.1rem; height: auto; } .columnBG {/*position: absolute;top:220px;top: 300px;*/ min-height: 308px;height: 100%;background: transparent url("../images/rightWrapperBG.png") 0px 18px repeat-y scroll;} .bolder {font-size: 13px; font-size:0.813rem;font-size: 16px; font-size: 1rem;} #rightWrapper img.mainImage, #rightWrapper img.mainImageWide { width: auto; height: auto;float: left;clear:both;margin: 0px 0 0 12px; padding: 0;} /* image sizes: .mainImage 487 x 236px margin: 0px 0 0 12px; .mainImage1 487 x 360px .mainImage3 487 x 286px .mainImageWide 680 x 236px margin: 0 0 0 -112px; .mainImageWide2 612 x 236px*/ .mainImage, .mainImageWide { float: left; width:100%; /*max-width: 487px;*/ height: auto; margin: 6px 0px 0 70px;padding: 0px 0px 0px 0px; /*float: right;*/ } #rightWrapper img.mainImage {margin: 0 0 0 12px;margin: 0 0 0 -52px; } #rightWrapper img.mainImageWide {margin: 0 0 0 -112px; } /* set .main etc in style3.css .main {margin: 0 0 0 -118px;} */ #caption {float:left;/*position: relative; top: 0px;*/width: 487px;width: 100%; margin:6px 0 0 12px; /*background: #999;*/background: none; line-height:0.750rem!important; } #caption a {width: auto; height: auto;background-image: none;text-decoration: none;} #caption a:hover {width: auto; height: auto;background-image: none;text-decoration: underline;} #caption ul {/*float:left;*/ width: 487px;margin:0; padding:0; list-style: none; color: #404040;text-align: right;} #caption ul li {/*float:right; */list-style: none; display: inline;margin:0; padding: 0 0 6px 0; line-height:0.750rem!important; } /* NOT NEEDED?? */ #leftWrapper img {/* width: auto; height: auto;float: right;margin: 120px -62px 0 0px; padding: 0; z-index: 2000;*//*clear:both;*/} #leftWrapper .hover2 {/*margin: 0px 0 0px 0px;padding: 0px 0 0 0px;*/ border-bottom: 6px solid #404040;} #leftWrapper .nahlik ul li a:hover {/* #808080 l-grey border-bottom: 6px solid #404040; border-bottom: 6px solid #a1c75f; */ border-bottom: 6px solid transparent;} #leftWrapper .nahlik ul li.active a:hover {/* #808080 l-grey border-bottom: 6px solid #404040; */ border-bottom: 6px solid transparent;} /***********************************************/ /* FOOTER */ /***********************************************/ footer, #footerWrapper { clear:both; float: left; position: relative; top: 20px; width: 100%;/* 700px;max-width:990px;width:86%;*/ min-height: 20px;height: 100%;height: 30%; margin: 0px; padding: 0 0 0px 0px;/*background: transparent url("../images/bottom2.png") top center no-repeat;*/ background: #404040; /* d-grey */ } #footer {position: relative; left: 0px; top: 0px; /* width: 1001px; 988px;*/ height: 18px; padding: 0px 0px 0 0; margin: 0px auto 0px auto; color: #d7e3e3; overflow: visible; background: #eee; /*#eee transparent*/ /*background: transparent url("../images/bottom2.png") top center no-repeat; width: 100%;*/ max-width:990px;width:86%; background: #404040; /* d-grey */ } #contact { /*position: relative;top:0px;*/ float: left; font-size:10px; margin:12px 0 0 6px; padding:0 0 0px 0; background: transparent; /* transparent #999 */ /*border-top: #504928 solid 8px; display: none;*/ margin: 0; padding: 12px 0 0 6px; position: relative; left: 0px; top: 0px; } #imprint { float: right; width: 238px; margin:12px 6px 0 0; padding: 0; margin: 0; padding: 12px 6px 0 0;/*background: #666;*/ position: relative; right: 0px; top: 0px;} #imprint p{float: right;/* float:left; *//* width: 988px;width: 238px;*/ color:#ffffff; margin: 0px 0px 0 0px;/* margin:0 auto 0 auto;*/ padding: 0px 0px 0px 0;/*background:#ddd;*/text-align:right; } #contact p{float: left;/* float:left; *//* width: 238px;*/ color:#ffffff; margin: 0px 0px 0 0px;/* margin:0 auto 0 auto;*/ padding: 0px 0px 0px 0;/*background:#ddd;*/text-align:left; } /*#footer p{float: left;color:#ffffff; font-size:13px;margin: 0px 0px 0 0px;padding: 0px 0px 0px 0;text-align:left; }*/ #imprint p a, #imprint p a:visited {color:#ffffff;text-decoration:none; text-align:right;} /*#footer p a, #footer p a:focus, #footer p a:visited {float: left;color:#ffffff;font-size:13px; text-decoration:none;}*/ #contact p a, #contact p a:visited {float: left;color:#ffffff;font-size:13px; text-decoration:none;} #footer p a:hover, #footer p a:focus, #footer p a:active/*, #imprint p a:hover, #imprint p a:focus, #imprint p a:active */ {/* float:left; */color: #a1c75f; /* logo green #a1c75f; */ text-decoration:underline;} small {display: none;} .phone {float: right;margin: 0;padding:0 5px 0 0;} #voelk{position: fixed;top:0px;/*position: fixed;bottom:0px;position: absolute;top:30px;right:0;*/margin:0 0 0 0px;padding:0px; width: 100%;/*width: 1024px;*/ height:32px; background: #404040; /* d-grey */ } #voelk p {/* float:left; */max-width: 988px;width: 96%; /* 274px width: 980px; 946px;*/color:#44441c; font-size:9px; /*margin:4px 114px 0 0;*/ margin:10px auto 0 auto; padding:0px 0 0 0px; text-align:right;/*background:#eee;*/} #voelk p a, #voelk p a:focus, #voelk p a:visited {/* float:left; */color:#ffffff; font-size:9px; text-decoration:none;} #voelk p a:hover {color: #a1c75f; /* #a1c75f logo green */font-size:9px; text-decoration:none;} /***********************************************/ /* iPad SETTINGS */ /***********************************************/ @media (max-width: 1024px){ body { background: #404040 url("../images/main1.png") center top repeat-y; /*background: #C09; */ } /* #outerWrapper {width:100%;background: transparent url("../images/raster.png") center top no-repeat; background: transparent url("../images/bg.png") 0px 18px repeat-x scroll;height: 100%;margin: 0px 0 0 0; padding: 0px;} header, #topWrapper {width:990px;width:86%;background: #996;} #mainWrapper {min-width:994px;width:894px;} #leftWrapper {width:362px; width:262px;width: 36%; margin: 18px 0 0 0px;} #rightWrapper{ width:626px;width:526px; width: 63%;}*/ /*#topWrapper {position: relative;top:68px;left:0;margin: 0px;} */ #rightWrapper .indentH2 {width:345px;width: 295px;} #rightWrapper ul.list {width:345px;width: 295px;} .mainImage, .mainImageWide { width:100%; height: auto;max-width: 580px; float: right; margin: 6px 0px 0 70px;padding: 0px 0px 0px 0px; margin: 0px 0 0 12px; padding: 0; } /* #footer { width:994px; width:894px; } */ } @media (max-width: 920px){ #outerWrapper {/*position: relative; width: 100%;*/width:100%;background: transparent url("../images/bg.png") center top repeat-x;height: 100%;margin: 0px 0 0 0; padding: 0px;} /* header, #topWrapper {width:990px;width:890px; width:790px;} #mainWrapper {min-width:994px;width:894px;width:794px;}*/ /*#topWrapper {position: relative;top:68px;left:0;width: 920px;margin: 0px;} */ #topWrapper {min-width: 870px;max-width: 870px;width:86%;margin: 0px auto 0 auto;padding: 7px 0 0 0px;/*background: #C96;*/ } #home {height: auto!important; background: transparent url("../images/heimundgartenGebaeudereinigungNew.png") 0 -8px no-repeat;} nav, .topNav {background: transparent;margin: 42px 0 0px 0px;} #menu {float: right; width: 750px;min-width: 630px;width: 70%;height: 62px!important;background: transparent; /* transparent #eee; url("../images/bgSemiTransparent.png") background: #eee;*/} #menu a h3, #menu a:visited h3 { max-width: 200px!important;height: 35px;overflow:hidden;} #dropdown1 a h3 { background: transparent url("../images/unternehmen.png") -40px 12px no-repeat;} #dropdown2 a h3 { background: transparent url("../images/leistungen.png") -40px 12px no-repeat;} #dropdown3 a h3 { background: transparent url("../images/kontakt.png") -40px 12px no-repeat;} #dropdown2 h3.current {background: transparent url("../images/leistungen-a.png") -38px -11px no-repeat!important } #dropdown1 a:hover h3, #dropdown1 a:focus h3, #dropdown1 a:active h3 {background: transparent url("../images/unternehmen-o.png") -40px 12px no-repeat;/*font-weight: 300!important;overflow:hidden;*/} #dropdown2 a:hover h3, #dropdown2 a:focus h3, #dropdown2 a:active h3 {background: transparent url("../images/leistungen-o.png") -40px 12px no-repeat;} #dropdown3 a:hover h3, #dropdown3 a:focus h3, #dropdown3 a:active h3 {background: transparent url("../images/kontakt-o.png") -40px 12px no-repeat;} .dropmenu { margin: 2px 0px 0px 12px; padding: 0px 0px 0px 0px;float: left; margin: 2px 0px 0px 12px;margin: 2px 0px 0px 10px;} .dropmenu ul {width: 228px;clear: both;float: right; margin: -1px 0px 0px -13px; padding:24px 0 24px 0px;} .dropmenu ul li { margin: 0px 0 4px 10px; padding:3px 0px 2px 0px;list-style-position: outside; } .dropmenu ul li a { margin: 0px 0 4px 10px; padding:3px 0px 2px 0px; list-style-position: outside;color: #ffffff!important; border-bottom: 6px solid #404040;} #menu a h3.current, #legal a h3.current {height: 50px;} #droplist0, #droplist1, #droplist2, #droplist3 {float:left;display: none;/* display: block; display: none;*//* border:solid 1px transparent;border-top:none;*/background-color: #404040; width: 128px!important; width: 213px!important;} #mainWrapper {min-width:690px;width:894px;width:594px;max-width:694px;width:86%;overflow: hidden;/*position: relative; top: 100px;left: 0px;*/ } #mainWrapper.index {background: transparent url("../images/hausundgartenservice.jpg") 38px 56px no-repeat;} /* #leftWrapper {width:362px; width:262px; margin: 18px 0 0 0px;} #rightWrapper{ width:626px;width:526px; }*/ #leftWrapper {flaot:left;max-width:362px; width: 37%;/* width: 37%;*//*height:580px;height: 100%;*//*min-height: 545px;height: auto!important;height: 545px;*/background: transparent;/* transparent */margin: 0px 0 0 0px;min-height: 545px;height: auto!important;height: 545px;} #rightWrapper{/*position:relative;top:0;left:494px;*/float:right;clear:both; max-width:426px;width: 63%;/* width: 63%;height: 100%;*//*height: 538px;*/background: #ffffff;/* transparent #601b00 #9c2C00 red; before #601b00 burgundy */margin: 0px 0px 0 0; background: transparent url("../images/rightWrapperBG.png") 0px 18px repeat-y scroll;} #rightWrapper h1 { margin: 48px 0px 0 1px;margin: 8px 0px 0 0px; font-size: 26px; font-size:1.6rem; } #rightWrapper h1 { width: 327px; margin: 48px 0px 0 1px;margin: 18px 0px 0 0px; font-size: 26px; font-size:1.6rem; } #rightWrapper .indentH2 {width:345px;width: 295px;} #rightWrapper ul.list {width:345px;width: 295px;} #rightWrapper.index{/*position:relative;top:0;left:494px;*/float:right;clear:both; max-width:426px;width: 63%;/* width: 63%;height: 100%;*//*height: 538px;*/margin: 40px 0px 0 0; /*background: transparent url("../images/rightWrapperBG.png") 0px 18px repeat-y scroll;*/background: #ffffff;background: transparent;/*background: rgba(255, 255, 255, 0.58);*/} .column {clear:both;width: 362px;/* 362px = 3 raster 488px = 4 raster *//* min-height: 480px; height:auto !important; height: 480px; for index/ lots of text */width: 100%;min-height: 142px; height:auto!important; height: 142px;margin: 0px 0 12px 0px; padding: 0px 0 0 0px; /*background: #ffffff; background: #906;*/} .columnIndex {/*position: absolute;top:220px;top:300px; position: relative;top:220px;top:10px;*/width: 488px;width: 364px;width: 90%;margin: 10px 0 12px 32px; margin: 130px 0 12px 32px; padding: 0px 0 0 0px; /*background: #ffffff; */ height: 382px!important;background: #ffffff; } #rightWrapper p.first, #rightWrapper ul.first { width:362px; width: 262px; } #rightWrapper p, #rightWrapper ul { width:362px;width: 262px; } #rightWrapper .columnIndex p { /*float:left;clear:both;width:362px;*/ /*margin: 18px 8px 8px 124px;margin: 18px 8px 8px 80px;*/ margin: 10px 8px 8px 80px; line-height:16px;width: 262px; } #caption {width: 487px;width: 100%;} #caption ul {width: 487px; width: 387px;} .mainImage, .mainImageWide { width:100%; height: auto;max-width: 260px; max-width: 380px; float: right; margin: 6px 0px 0 70px;padding: 0px 0px 0px 0px; margin: 0px 0 0 12px; padding: 0; } /* Components menueMobile*/ .dl-menuwrapper { width: 100%; max-width: 300px; float: left; position: relative; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: 50% 200%; -moz-perspective-origin: 50% 200%; perspective-origin: 50% 200%; } .dl-menuwrapper {/*background: #000;*/ width: 100%; max-width: 300px;max-width: 200px;max-width: 150px; /*float: left; position: relative;position: absolute;*/ } /* Dynamically added submenu outside of the menu context */ .dl-menuwrapper > .dl-submenu { position: absolute; width: 100%; top: 50px; left: 0; margin: 0; } .dl-menuwrapper { width: 100%; max-width: 300px;max-width: 180px!important; /*important needed if not in document */ float: left; position: relative; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: 50% 200%; -moz-perspective-origin: 50% 200%; perspective-origin: 50% 200%; /* no effect */ } #dl-menu .dl-menu { background: #404040; color: #ffffff;} #dl-menu .dl-menu a{ background: #404040; color: #ffffff;} #menu .dl-submenu a { background: #404040; color: #ffffff;} .dl-menuwrapper:first-child { margin-right: 30px; } #dl-menu {display: none;} #dl-menu1, #dl-menu2/*, #dl-menu3*/ {margin-right: 30px;margin-right: 50px; } #dl-menu2/*, #dl-menu3*/ {margin-right: 70px; } .dl-menuwrapper button { background: transparent!important; border: none; width: 48px;width: 100%!important; height: 45px; text-indent: -900em;text-indent: 0em; overflow: visible; position: relative;left: 0;/*float: left;*/ cursor: pointer; outline: none; font-size:1.125rem!important; text-align: right;padding-right: 20px; } .dl-menuwrapper button:hover, .dl-menuwrapper button.dl-active, .dl-menuwrapper ul { background: #ffffff!important; } .dl-menuwrapper ul a{ background: transparent; color: #404040!important; } .dl-menuwrapper button:after { content: ''; position: absolute; width: 68%; height: 5px; background: #fff;background: transparent!important; top: 10px; left: 16%; box-shadow: 0 10px 0 #fff, 0 20px 0 #fff; box-shadow: none!important; } #dl-menu1.dl-menuwrapper button:hover, #dl-menu2.dl-menuwrapper button:hover, #dl-menu3.dl-menuwrapper button:hover, #dl-menu1.dl-menuwrapper button.dl-active, #dl-menu2.dl-menuwrapper button.dl-active, #dl-menu3.dl-menuwrapper button.dl-active {background: transparent; } #menu ul.dl-submenu li a { color: #ffffff!important;} #leftWrapper .current1 {position: relative; top:18px;top:38px;left: 136px; position: absolute;top:189px;left: 166px;margin: 0px 0 8px 0px; padding: 0px 0 0 0px;/*background-color:#ddd;*/background-color: #404040; width: 342px;width: 292px;height: 1px;} #leftWrapper .current {position: relative; top:18px;top:38px;left: 136px; position: absolute;top:189px;left: 166px;margin: 0px 0 8px 0px; padding: 0px 0 0 0px;/*background-color:#ddd;*/background-color: #404040; width: 591px;width: 510px;height: 1px;} #leftWrapper .current3 {position: absolute;top:189px;left: 166px;/*width: 315px;*/margin: 0px 0 8px 0px; padding: 0px 0 0 0px; z-index: 21;/*background-color:#ddd;*/background-color: #404040; width: 841px;width: 702px;height: 1px;} #leftWrapper .submenu {position: relative; top:9px;left: 136px;left: 36px; top: -22px; left: 56px;} section, .address { /*display: none; */ /*margin: 18px 0 0 0; */} } @media (max-width: 820px){ /* @media (max-width: 768px){ */ body { padding:0; margin:0; background: #404040 url("../images/bg2.png") 0px 20px repeat-x scroll/**/; background: #404040 url("../images/main2.png") center top repeat-y; } #outerWrapper {background: transparent url("../images/bg2.png") 0px 18px repeat-x;height: 100%;margin: 0px 0 0 0; padding: 0px;} /*#topWrapper {background: transparent url("../images/bg2.png") 0px -20px repeat-x scroll;}*/ #topWrapper {/*position: relative;top:68px;*/position: relative;top:58px;min-width: 990px;max-width: 990px;width:86%;margin: 0px auto 0 auto;padding: 7px 0 0 0px;} #topWrapper {min-width: 770px;max-width: 770px;width:86%;margin: 0px auto 0 auto;padding: 7px 0 0 0px;/* height: 98px;*//* background: #C96;*/ } #mainWrapper {/*width:994px;width:700px; */ min-width:620px;width:92%;/*background: #C69;position: relative; top: -27px;left: 0px; */ /*background: transparent url("../images/rightWrapperBG.png") 240px -18px repeat-y scroll;*/} #home { /*position: absolute; top:50px;left:0px;*/ width: 238px;max-width:68px; width: 9%; height: 68px!important;margin: 0px 0 0px 0px; padding: 0px 0 0 0px;background: transparent url("../images/logo.png") 0px 1px no-repeat;} #home img {width: 68px;height: 68px;} #home .dropdownhome ul { margin: 0px 0 0px 0px; margin: -46px 0 0px -8px;height: 30px;width: 128px;width: 108px!important;} nav, .topNav {background: transparent;margin: 18px 0 0px 0px;} #menu {float: left;float: right;width: 750px;width: 540px;width: 440px;width: 84%;height: 62px!important;background: transparent; /* l-green tester transparent #eee; url("../images/bgSemiTransparent.png") */} #droplist0, #droplist1, #droplist2, #droplist3 {float:left;display: none;/*display: block; display: none;*//* border:solid 1px transparent;border-top:none;*/background-color: #404040; width: 228px;} #droplist0, #droplist1, #droplist2, #droplist3 {width: 128px!important; width: 163px!important;width: 208px!important;} #dropdown1 a h3 { background: transparent url("../images/unternehmen.png") 0px 12px no-repeat; background: transparent;} #dropdown2 a h3 { background: transparent url("../images/leistungen.png") 0px 12px no-repeat;background: transparent;} #dropdown3 a h3 { background: transparent url("../images/kontakt.png") 0px 12px no-repeat;background: transparent;} #dropdown1 a img, #dropdown2 a img, #dropdown3 a img {display: none;} #dropdown1 a:hover h3, #dropdown1 a:focus h3, #dropdown1 a:active h3 {background: transparent url("../images/unternehmen-o.png") 0px 12px no-repeat; background: transparent;color: #3e5d0a;/* #3e5d0a dd-green */color: #a1c75f;/* a1c75f; logo green */ } #dropdown2 a:hover h3, #dropdown2 a:focus h3, #dropdown2 a:active h3 {background: transparent url("../images/leistungen-o.png") 0px 12px no-repeat; background: transparent;color: #3e5d0a;/* #3e5d0a dd-green */color: #a1c75f;/* a1c75f; logo green */ } #dropdown3 a:hover h3, #dropdown3 a:focus h3, #dropdown3 a:active h3 {background: transparent url("../images/kontakt-o.png") 0px 12px no-repeat; background: transparent;color: #3e5d0a;/* #3e5d0a dd-green */color: #a1c75f;/* a1c75f; logo green */ } #menu a h3, #menu a:visited h3 {padding: 30px 0px 16px 0px;border-bottom: 1px solid transparent;/**/overflow:hidden;border-top: solid 6px transparent; /* greenM #80955b*/min-width: 200px;/*width: 28%;*/max-width: 220px;height: 34px!important;line-height: 9px;line-height: 0.5rem;} #menu a h3.current, #legal a h3.current {color: #a1c75f;/* #a1c75f; logo green; #a7a326; lime-green *//*border-bottom: 1px solid #a1c75f;*/cursor: default;border-top: solid 6px #fff; /* greenM #80955b*/color: #3a3a3a; /* d-grey #3a3a3a */ padding: 30px 0 0 0;} #menu a h3.current, #legal a h3.current {color: #a1c75f;/* #a1c75f; logo green; #a7a326; lime-green *//*border-bottom: 1px solid #a1c75f;*/cursor: default;border-top: solid 6px #5d811f; /* d-green #5d811f greenM #80955b*/color: #3a3a3a; /* d-grey #3a3a3a */ padding: 30px 0 0 0;height: auto;overflow:visible;} #menu a h3.current, #legal a h3.current {height: 50px;} /*#menu a h3.current, #legal a h3.current {height: 34px!important;}*/ #dropdown1 a h3 img, #dropdown2 a h3 img, #dropdown3 a h3 img {height: 35px;height: 70px;width: 238px;} /*.dropmenu img {display:none;}*/ #dropdown2 h3.current {background: transparent!important; height: 34px!important;height: 50px!important;} /*#menu a h3, #menu a:visited h3 { max-width: 140px!important;height: 35px;height: 42px;overflow:hidden;} #menu a h3, #menu a:visited h3 { max-width: auto!important;height: auto;background:#ddd;}*/ .dropdown h3 {display:inline;float:left;clear:left; text-align: right; font-size: 28px; font-size: 1.750rem; font-weight: 300;margin: 0px 0 0 0px; padding: 0px 0 0px 0;/*min-height: 30px; height:auto !important; height: 30px;background-color: #262626;*/ color: #404040!important; /* border-right: solid #adaba5 2px; background-color: #999;*/ /*width: 171px;*/border-top: solid 6px #5d811f; /* d-green #5d811f greenM #80955b*/} /*#dropdown1 a h3 img, #dropdown2 a h3 img, #dropdown3 a h3 img {height: 35px;height: 70px;width: 238px;background: #ddd;} #menu a h3, #menu a:visited h3, #dropdown3 a h3 { max-width: 200px!important;height: 35px!important;overflow:hidden;background: #09F!important;}*/ #mainWrapper.index {background: transparent url("../images/hausundgartenservice.jpg") 38px 26px no-repeat;} #rightWrapper{/*position:relative;top:0;left:494px;*/float:right;clear:both; max-width:626px;width: 63%;/* width: 63%;height: 100%;*//*height: 538px;*/background: #ffffff;/* transparent #601b00 #9c2C00 red; before #601b00 burgundy */margin: 0px 0px 0 0; background: transparent url("../images/rightWrapperBG.png") 0px 18px repeat-y scroll;} #rightWrapper{/*position:relative;top:0;left:494px;*/float:right;clear:both; max-width:426px;width: 63%;/* width: 63%;height: 100%;*//*height: 538px;*/background: #ffffff;/* transparent #601b00 #9c2C00 red; before #601b00 burgundy */margin: 0px 0px 0 0; background: transparent url("../images/rightWrapperBG.png") 0px 18px repeat-y scroll;} #rightWrapper {font-size: 14px; font-size:0.875rem; background: transparent url("../images/rightWrapperBG.png") 50px 0px repeat-y scroll;/* position: relative; top:-40px; */} #leftWrapper {margin: 0px 0 0 0px;min-height: 345px;height: auto!important;height: 345px;} #leftWrapper {font-size: 14px; font-size:0.875rem;} #rightWrapper h1 { margin: 48px 0px 0 1px;margin: 8px 0px 0 0px; font-size: 26px; font-size:1.6rem; } #rightWrapper .columnIndex p { width:80%; margin: 10px 8px 8px 40px; line-height:16px; } .indent {margin-left: 52px;margin-left: 42px;} #leftWrapper .current1 {position: absolute; top:18px;left: 136px; position: absolute;top:177px;left: 136px;margin: 0px 0 8px 0px; padding: 0px 0 0 0px;/*background-color:#ddd;*/background-color: #404040; width: 420px;width: 206px;height: 1px;} #leftWrapper .current {position: absolute; top:18px;left: 136px; position: absolute;top:177px;left: 136px;margin: 0px 0 8px 0px; padding: 0px 0 0 0px;/*background-color:#ddd;*/background-color: #404040; width: 591px; width: 420px;height: 1px;} #leftWrapper .current3 {position: absolute;top:177px;left: 166px;/*width: 315px;*/margin: 0px 0 8px 0px; padding: 0px 0 0 0px; z-index: 21;/*background-color:#ddd;*/background-color: #404040; width: 841px;width: 702px;width: 602px;height: 1px;} #leftWrapper .submenu {position: relative; top:9px;left: 136px;left: 36px; top: -10px; } #rightWrapper p.first, #rightWrapper ul.first { width:362px; width: 262px;/*width: 162px;*/margin: 18px 8px 0px 140px; margin: 18px 8px 0px 120px;font-size: 14px; font-size:0.875rem;} #rightWrapper ul.list2 {margin-left: 156px;margin-left: 136px; } #rightWrapper p, #rightWrapper ul { width:362px;width: 262px;/*width: 162px;*/margin: 18px 8px 0px 140px; margin: 18px 8px 0px 120px;} #rightWrapper.index{/*position:relative;top:0;left:494px;*/float:right;clear:both; max-width:626px;max-width:746px;width: 63%;/* width: 63%;height: 100%;*//*height: 538px;*/margin: 30px 0px 0 0; /*background: transparent url("../images/rightWrapperBG.png") 0px 18px repeat-y scroll;*/background: #ffffff;background: rgba(255, 255, 255, 0.58);background: transparent;} #caption {width: 100%;margin:6px 0 0 0px;} #caption ul {width: 387px; width: 287px;text-align: left!important;} .hide { display: none;} .last { display: none;} /*section, */.address { /*display: none; */ margin: 18px 0 0 0; } /*section, */.address { /*display: none; */ margin: 8px 0 0 0; } #voelk p {/* float:left; */max-width: 988px;max-width: 688px; width: 96%; /* 274px width: 980px; 946px;*/color:#44441c; font-size:9px; /*margin:4px 114px 0 0;*/ margin:10px auto 0 auto; padding:0px 0 0 0px; text-align:right;/*background:#eee;*/} #footer { } } /* @media only screen and (max-width: 767px) { */ @media only screen and (max-width: 680px) { #menu, #leftWrapper { display : none;} #menueMobile { display : block;} } @media (max-width: 720px) { .last { display: none;} } @media (max-width: 680px) { #topWrapper {min-width: 670px;max-width: 670px;width:86%;} nav, .sub {} section, .address { /*display: none;*/ } #menu {float: left;float: right;float: left;width: 750px;min-width: 540px;width: 340px;width: 84%;width: 64%;height: 62px!important; /* background: #C96; beige tester*/} #menu a h3, #menu a:visited h3 {/*min-width:144px;width: auto!important;width:100px;*/font-family: Arial, sans-serif; font-size: 28px; font-size: 1.750rem; font-weight: 300!important; font-stretch: expanded!important; color: #2a1d3a;/* #2a1d3a; lilatext-transform: uppercase; */ padding: 38px 0px 16px 0px; padding: 30px 0px 16px 0px;/* padding: 8px 18px 4px 18px;float:left;clear:both;width: 238px*/ max-width: 238px!important;height: 35px;text-align: right;float: right;float: left; margin:39px 0px 0 0px;margin:0px 0px 0 0px;/*border-bottom: 1px solid #fff;*//*background: #999;*/border-bottom: 1px solid transparent;/**/overflow:hidden;border-top: solid 6px transparent; /* d-green #5d811f greenM #80955b*/min-width: 200px;max-width: 170px;min-width: 170px;/*width: 28%;*/max-width: 220px;font-size: 20px; font-size: 1.250rem;} #menu a h3.current, #legal a h3.current {border-top: solid 6px #5d811f; } #dropdown1 a:hover h3, #dropdown1 a:focus h3, #dropdown1 a:active h3 {background: transparent;color: #3e5d0a;/* #3e5d0a dd-green */color: #a1c75f;/* a1c75f; logo green */ } #dropdown2 a:hover h3, #dropdown2 a:focus h3, #dropdown2 a:active h3 {background: transparent;color: #3e5d0a;/* #3e5d0a dd-green */color: #a1c75f;/* a1c75f; logo green */ } #dropdown3 a:hover h3, #dropdown3 a:focus h3, #dropdown3 a:active h3 {background: transparent;color: #3e5d0a;/* #3e5d0a dd-green */color: #a1c75f;/* a1c75f; logo green */ } #droplist0, #droplist1, #droplist2, #droplist3 {float:left;display: none;/* display: block; display: none;*//* border:solid 1px transparent;border-top:none;*/background-color: #404040; width: 128px!important; width: 163px!important;} .columnIndex {/*position: absolute;top:220px;top:300px; position: relative;top:220px;top:10px;*/width: 488px;width: 364px;width: 90%;margin: 10px 0 12px 32px; margin: 130px 0 12px 32px; padding: 0px 0 0 0px; /*background: #ffffff; */} #rightWrapper h3 { margin: 18px 8px 0px 124px;margin: 10px 8px 0px 120px; } #rightWrapper .indentH2 {width:345px;width: 295px;width: 195px;margin-left: 52px;margin-left: 52px;} #rightWrapper ul.list {width:345px;width: 295px;width: 195px;} #rightWrapper .main4 img {/*postiion: absolute; top: 0px;*/margin-left: 176px;margin-left: 156px;margin-left: 176px;z-index: 1;} #caption ul {width: 487px; width: 387px;/*width: 287px;*/ width: 270px;} #leftWrapper .sub {margin-left: -28px;} } /***********************************************/ /* iPhone SETTINGS */ /***********************************************/ @media (max-width: 600px) { body { background: #404040 url("../images/main2.png") top center repeat-y; background: #404040 url("../images/main3.png") top center repeat-y; } #topWrapper {/*min-width: 580px;max-width: 600px;width:76%;margin: 0px auto 0 auto; margin: 0 0 0 70px;padding: 7px 0 0 0px; background: #C96;*/ /* beige tester*/ /* l-yellow tester background: #FF9;*/} #topWrapper {min-width: 320px;max-width: 600px;width:76%;width:86%;margin: 0px auto 0 auto;padding: 7px 0 0 0px; } #home { /*position: absolute; top:50px;left:0px;*/ width: 238px;max-width:68px; min-width: 68px; height: 68px!important;margin: 0px 0 0px 0px; padding: 0px 0 0 0px;background: transparent url("../images/logo.png") 0px 1px no-repeat;} #menu {float: left;float: right;float: left;width: 750px;width: 540px;min-width: 490px;width: 84%;width: 54%;height: 62px!important; /* background: #600; #C00 brown tester*/} #menu {float: left;float: right;width: 750px;width: 540px;min-width: 250px; max-width: 530px;width: 84%;height: 62px!important; /*background: #600; #C00 brown tester*/} #menu a h3, #menu a:visited h3 { padding: 26px 0px 16px 0px;margin:0px 0px 0 0px;/*border-bottom: 1px solid #fff;*//*background: #999;*/border-bottom: 1px solid transparent;/**/overflow:hidden;border-top: solid 6px transparent!important; /* d-green #5d811f greenM #80955b*/min-width: 200px;max-width: 220px;min-width: 150px;/*width: 28%;*/max-width: 180px;font-size: 20px; font-size: 1.250rem;} #menu a h3, #menu a:visited h3 {padding: 30px 0px 16px 0px;border-bottom: 1px solid transparent;/**/overflow:hidden;border-top: solid 6px transparent; /* greenM #80955b*/min-width: 200px;/*width: 28%;*/max-width: 220px;height: 34px!important;} #menu a h3, #menu a:visited h3 {/*min-width:144px;width: auto!important;width:100px;*/font-family: Arial, sans-serif; font-size: 28px; font-size: 1.750rem; font-weight: 300!important; font-stretch: expanded!important; color: #2a1d3a;/* #2a1d3a; lilatext-transform: uppercase; */ padding: 38px 0px 16px 0px; padding: 30px 0px 16px 0px;padding: 26px 0 0 0;/* padding: 8px 18px 4px 18px;float:left;clear:both;width: 238px*/ max-width: 238px!important;height: 35px;text-align: right;float: right;float: left; margin:39px 0px 0 0px;margin:0px 0px 0 0px;/*border-bottom: 1px solid #fff;*//*background: #999;*/border-bottom: 1px solid transparent;/**/overflow:hidden;border-top: solid 6px #5d811f; /* d-green #5d811f greenM #80955b*/min-width: 200px;max-width: 70px;min-width: 116px;/*width: 28%;*/max-width: 220px;font-size: 20px; font-size: 1.250rem;} #menu a h3.current, #legal a h3.current { padding: 26px 0 0 0;height: 34px!important;border-top: solid 6px #5d811f!important; } #dropdown1 a:hover h3, #dropdown1 a:focus h3, #dropdown1 a:active h3 {background: transparent;color: #3e5d0a;/* #3e5d0a dd-green */color: #a1c75f;/* a1c75f; logo green */ } #dropdown2 a:hover h3, #dropdown2 a:focus h3, #dropdown2 a:active h3 {background: transparent;color: #3e5d0a;/* #3e5d0a dd-green */color: #a1c75f;/* a1c75f; logo green */ } #dropdown3 a:hover h3, #dropdown3 a:focus h3, #dropdown3 a:active h3 {background: transparent;color: #3e5d0a;/* #3e5d0a dd-green */color: #a1c75f;/* a1c75f; logo green */ } #current2 #dropdown2:hover #droplist2, #current2 #dropdown2:focus #droplist2, #current2 #dropdown2:active #droplist2, #current1 #dropdown1:hover #droplist1, #current1 #dropdown1:focus #droplist1, #current1 #dropdown1:active #droplist1 {background:#404040;display: block!important;} /*#current2 #dropdown2:focus #back, #current2 #dropdown2:focus #back {display: block!important;} */ #back {display: block;} ul li.back a:focus #back, ul li.back a:active #back {display: none!important;} #droplist0, #droplist1, #droplist2, #droplist3 {width: 128px!important; width: 163px!important;margin: 0 0 0 -48px;} #mainWrapper {/*width:994px;width:700px; */ min-width:420px;width:92%;/* background: #9FF; turquise tester */ } #mainWrapper.index {background: transparent;} #mainWrapper.index {background: transparent url("../images/hausundgartenservice.jpg") -20px 0px no-repeat;} #rightWrapper{/*position:relative;top:0;left:494px;*/float:right;clear:both; max-width:426px;width: 63%;/* width: 63%;height: 100%;*//*height: 538px;*/background: #ffffff;/* transparent #601b00 #9c2C00 red; before #601b00 burgundy */margin: 0px 0px 0 0; background: transparent url("../images/rightWrapperBG.png") 0px 18px repeat-y scroll;} #rightWrapper{/*position:relative;top:0;left:494px;*/float:right;float: left; clear:both; max-width:526px;width: 100%;width: 90%;/* width: 63%;height: 100%;*//*height: 538px;*/background: #ffffff;/* transparent #601b00 #9c2C00 red; before #601b00 burgundy */margin: 0px 0px 0 0; background: transparent url("../images/rightWrapperBG.png") 50px 0px repeat-y scroll;} #rightWrapper h3 { margin: 18px 8px 0px 124px;margin: 6px 8px 0px 120px; } #rightWrapper .indentH2 {margin-left: 52px;margin-left: 48px;} .indent {margin-left: 48px;} #rightWrapper.index{/*position:relative;top:0;left:494px;*/float:right;clear:both; max-width:426px; width: 95%;/* width: 63%;height: 100%;*//*height: 538px;*/margin: 0px 8px 0 0px; /*background: transparent url("../images/rightWrapperBG.png") 0px 18px repeat-y scroll;*//*background: #ffffff;background: rgba(255, 255, 255, 0.58);*/} .columnIndex {height: 340px!important;/*background: #ffffff; */} #rightWrapper .columnIndex p { /*float:left;clear:both;width:362px;*/ /*margin: 18px 8px 8px 124px;margin: 18px 8px 8px 80px;*/ margin: 10px 8px 8px 30px; line-height:16px;width: 252px;width: 322px;font-size: 14px; font-size:0.875rem; } #rightWrapper ul li { line-height:1.2rem;font-size: 14px; font-size:0.875rem;} #rightWrapper ul.list2 {width: 242px; } img.mainImage, img.mainImageWide {margin: 0 0 0 -112px;margin: 0 0 0 -12px; margin: 0 0 0 12px!important;} footer { font-size: 16px; font-size: 1rem; } small {display: inline;} .menueBottom a{ display: inline; padding: 0 0 0 5px; } #mainWrapper {width: 90%;} #leftWrapper {/*display: none;*/} #leftWrapper .current1, #leftWrapper .current, #leftWrapper .current3, #leftWrapper .sub {display: none;} .address {width: 90%; display: none;} #contact {display: none; } #imprint {display: none;} .imprint {display: inline;} footer p{ padding-bottom: 26px!important; } } /***********************************************/ /* MOBILE SETTINGS */ /***********************************************/ @media (max-width: 500px) { #topWrapper {min-width: 320px;max-width: 320px;width:76%;margin: 0px auto 0 auto;margin: 0px;padding: 7px 0 0 0px; } #menu {float: left;float: right;float: left;width: 750px;width: 540px;min-width: 250px;width: 84%;width: 54%;height: 62px!important; /* background: #600; #C00 brown tester*/} #menu a h3, #menu a:visited h3 {/*min-width:144px;width: auto!important;width:100px;*/font-family: Arial, sans-serif; font-size: 28px; font-size: 1.750rem; font-weight: 300!important; font-stretch: expanded!important; color: #2a1d3a;/* #2a1d3a; lilatext-transform: uppercase; */ padding: 38px 0px 16px 0px; padding: 30px 0px 16px 0px;/* padding: 8px 18px 4px 18px;float:left;clear:both;width: 238px*/ max-width: 238px!important;height: 35px;text-align: right;float: right;float: left; margin:39px 0px 0 0px;margin:0px 0px 0 0px;/*border-bottom: 1px solid #fff;*//*background: #999;*/border-bottom: 1px solid transparent;/**/overflow:hidden;border-top: solid 6px transparent; /* d-green #5d811f greenM #80955b*/min-width: 200px;max-width: 70px;min-width: 70px;min-width: 60px;/*width: 28%;*/max-width: 120px;font-size: 20px; font-size: 1.250rem;font-size: 18px; font-size: 1.125rem;font-size: 16px; font-size: 1.rem;font-size: 14px; font-size:0.875rem;padding: 26px 0 0 0;} #menu a h3.current, #legal a h3.current { padding: 26px 0 0 0;height: 34px!important;border-top: solid 6px #5d811f!important; } #dropdown1 a:hover h3, #dropdown1 a:focus h3, #dropdown1 a:active h3 {background: transparent;color: #3e5d0a;/* #3e5d0a dd-green */color: #a1c75f;/* a1c75f; logo green */ } #dropdown2 a:hover h3, #dropdown2 a:focus h3, #dropdown2 a:active h3 {background: transparent;color: #3e5d0a;/* #3e5d0a dd-green */color: #a1c75f;/* a1c75f; logo green */ } #dropdown3 a:hover h3, #dropdown3 a:focus h3, #dropdown3 a:active h3 {background: transparent;color: #3e5d0a;/* #3e5d0a dd-green */color: #a1c75f;/* a1c75f; logo green */ } #droplist0, #droplist1, #droplist2, #droplist3 {width: 128px!important; width: 163px!important;margin: 0 0 0 -48px;margin: 0 0 0 -98px;} #droplist1 {margin: 0 0 0 -98px;margin: 0 0 0 -82px;} #mainWrapper {/*width:994px;width:700px; */ min-width:420px;min-width:310px;width:92%;/* background: #006; d-blue tester */ } #mainWrapper.index {background: transparent url("../images/hausundgartenservice.jpg") -4px -16px no-repeat;} #mainWrapper.index {background: transparent;} #rightWrapper{/*position:relative;top:0;left:494px;*/float:right;float: left; clear:both; max-width:300px;width: 100%;/* width: 63%;height: 100%;*//*height: 538px;*/background: #ffffff;/* transparent #601b00 #9c2C00 red; before #601b00 burgundy */margin: 0px 0px 0 0; background: transparent url("../images/rightWrapperBG.png") 20px 18px repeat-y scroll;} #rightWrapper.index{/*position:relative;top:0;left:494px;*/float:right;clear:both; max-width:300px; width: 100%;/* width: 63%;height: 100%;*//*height: 538px;*/margin: 0px 0px 0 0px;} #rightWrapper h3 { margin: 18px 8px 0px 124px;margin: 6px 8px 0px 0px;padding: 6px 4px 0px 80px;} #rightWrapper h1 { display:inline;float:left;clear:both; width: 437px;/* 488px; 551px; 614px;*/ font-size:28px; font-weight:100; margin: 48px 0px 0 1px; padding: 12px 4px 4px 70px; color: #404040; /* grey */ /*text-transform: uppercase;*/ /*background: #ffffff;*/ text-align: left; font-size: 15px; font-size:1.0rem; font-size: 24px; font-size:1.5rem; font-size: 16px; font-size: 1.rem; font-size: 18px; font-size:1.125rem; line-height:1.8rem; line-height:1.3rem; font-stretch: expanded; margin: 48px 0px 0 1px;margin: 8px 0px 0 1px; padding: 12px 4px 4px 70px;padding: 12px 4px 4px 7px;padding: 12px 4px 4px 40px; } h1#index {width: 264px;padding: 12px 4px 4px 30px;/*background: transparent;*/} #rightWrapper .indentH2 {margin-left: 52px;margin-left: 40px;} .indent {margin-left: 38px;} #rightWrapper p.first, #rightWrapper ul.first{ width:362px; width: 262px;width: 200px;/**/margin: 18px 8px 0px 140px; margin: 18px 8px 0px 120px; margin: 12px 8px 0px 80px;font-size: 14px; font-size:0.875rem;} .columnIndex {margin: 10px 0 12px 32px; margin: 90px 0 12px 32px; padding: 0px 0 0 0px; height: 448px!important;/* NOTE: for android4 need more height???? background: #ffffff; */height: 458px!important;/* NOTE: for android4 need more height???? background: #ffffff; */} #rightWrapper .columnIndex p { /*float:left;clear:both;width:362px;*/ /*margin: 18px 8px 8px 124px;margin: 18px 8px 8px 80px;*/ margin: 10px 8px 8px 20px; line-height:16px;width: 252px;font-size: 14px; font-size:0.875rem; } #rightWrapper p, #rightWrapper ul { width:362px;width: 262px;width: 200px;/**/margin: 18px 8px 0px 140px; margin: 18px 8px 0px 120px; margin: 18px 8px 0px 80px;} #rightWrapper ul.list { margin: 8px 8px 0px 124px;margin: 8px 8px 0px 84px; } #rightWrapper ul.list2 { width: 182px; margin-left: 156px; margin-left: 94px; } #rightWrapper .columnIndex p { /*float:left;clear:both;width:362px;*/ /*margin: 18px 8px 8px 124px;margin: 18px 8px 8px 80px;*/ margin: 10px 8px 8px 20px; line-height:16px;width: 262px;width: 220px; } /*img.mainImage {margin: 0 0 0 -112px;margin: 0 0 0 22px!important;}*/ img.mainImageWide {margin: 0 0 0 -112px;margin: 0 0 0 -12px!important;} #caption {width: 487px;width: 100%;margin:6px 0 0 12px; margin:6px 0 0 18px;margin:6px 0 0 0px;float:left;} #caption ul {width: 487px; width: 387px;/*width: 287px;*/ width: 200px;} } @media (max-width: 320px) { #topWrapper {min-width: 320px;max-width: 320px;width:76%;margin: 0px auto 0 auto;margin: 0px;padding: 7px 0 0 0px; } #menu {float: left;float: right;float: left;width: 750px;width: 540px;min-width: 250px;width: 84%;width: 54%;height: 62px!important; /* background: #600; #C00 brown tester*/} #menu a h3, #menu a:visited h3 {/*min-width:144px;width: auto!important;width:100px;*/font-family: Arial, sans-serif; font-size: 28px; font-size: 1.750rem; font-weight: 300!important; font-stretch: expanded!important; color: #2a1d3a;/* #2a1d3a; lilatext-transform: uppercase; */ padding: 38px 0px 16px 0px; padding: 30px 0px 16px 0px;/* padding: 8px 18px 4px 18px;float:left;clear:both;width: 238px*/ max-width: 238px!important;height: 35px;text-align: right;float: right;float: left; margin:39px 0px 0 0px;margin:0px 0px 0 0px;/*border-bottom: 1px solid #fff;*//*background: #999;*/border-bottom: 1px solid transparent;/**/overflow:hidden;border-top: solid 6px transparent; /* d-green #5d811f greenM #80955b*/min-width: 200px;max-width: 70px;min-width: 70px;min-width: 60px;/*width: 28%;*/max-width: 120px;font-size: 20px; font-size: 1.250rem;font-size: 18px; font-size: 1.125rem;font-size: 16px; font-size: 1.rem;font-size: 14px; font-size:0.875rem;padding: 26px 0 0 0;} #menu a h3.current, #legal a h3.current { padding: 26px 0 0 0;height: 34px!important;border-top: solid 6px #5d811f!important; } #dropdown1 a:hover h3, #dropdown1 a:focus h3, #dropdown1 a:active h3 {background: transparent;color: #3e5d0a;/* #3e5d0a dd-green */color: #a1c75f;/* a1c75f; logo green */ } #dropdown2 a:hover h3, #dropdown2 a:focus h3, #dropdown2 a:active h3 {background: transparent;color: #3e5d0a;/* #3e5d0a dd-green */color: #a1c75f;/* a1c75f; logo green */ } #dropdown3 a:hover h3, #dropdown3 a:focus h3, #dropdown3 a:active h3 {background: transparent;color: #3e5d0a;/* #3e5d0a dd-green */color: #a1c75f;/* a1c75f; logo green */ } #droplist0, #droplist1, #droplist2, #droplist3 {width: 128px!important; width: 163px!important;margin: 0 0 0 -48px;margin: 0 0 0 -98px;} #droplist1 {margin: 0 0 0 -98px;margin: 0 0 0 -82px;} #mainWrapper {/*width:994px;width:700px; */ min-width:420px;min-width:310px;width:92%;/* background: #006; d-blue tester */ } #mainWrapper.index {background: transparent url("../images/hausundgartenservice.jpg") -4px -16px no-repeat;} #mainWrapper.index {background: transparent;} #rightWrapper{/*position:relative;top:0;left:494px;*/float:right;float: left; clear:both; max-width:300px;width: 100%;/* width: 63%;height: 100%;*//*height: 538px;*/background: #ffffff;/* transparent #601b00 #9c2C00 red; before #601b00 burgundy */margin: 0px 0px 0 0; background: transparent url("../images/rightWrapperBG.png") 20px 18px repeat-y scroll;} #rightWrapper.index{/*position:relative;top:0;left:494px;*/float:right;clear:both; max-width:300px; width: 100%;/* width: 63%;height: 100%;*//*height: 538px;*/margin: 0px 0px 0 0px;} #rightWrapper h3 { margin: 18px 8px 0px 124px;margin: 6px 8px 0px 0px;padding: 6px 4px 0px 80px;} #rightWrapper h1 { display:inline;float:left;clear:both; width: 437px;/* 488px; 551px; 614px;*/ font-size:28px; font-weight:100; margin: 48px 0px 0 1px; padding: 12px 4px 4px 70px; color: #404040; /* grey */ /*text-transform: uppercase;*/ /*background: #ffffff;*/ text-align: left; font-size: 15px; font-size:1.0rem; font-size: 24px; font-size:1.5rem; font-size: 16px; font-size: 1.rem; font-size: 18px; font-size:1.125rem; line-height:1.8rem; line-height:1.3rem; font-stretch: expanded; margin: 48px 0px 0 1px;margin: 8px 0px 0 1px; padding: 12px 4px 4px 70px;padding: 12px 4px 4px 7px;padding: 12px 4px 4px 40px; } h1#index {width: 264px;padding: 12px 4px 4px 30px;/*background: transparent;*/} #rightWrapper .indentH2 {margin-left: 52px;margin-left: 40px;} .indent {margin-left: 38px;} #rightWrapper p.first, #rightWrapper ul.first{ width:362px; width: 262px;width: 200px;/**/margin: 18px 8px 0px 140px; margin: 18px 8px 0px 120px; margin: 12px 8px 0px 80px;font-size: 14px; font-size:0.875rem;} .columnIndex {margin: 10px 0 12px 32px; margin: 90px 0 12px 32px; padding: 0px 0 0 0px; /*height: 448px!important;*//* NOTE: for android4 need more height???? background: #ffffff; */} #rightWrapper .columnIndex p { /*float:left;clear:both;width:362px;*/ /*margin: 18px 8px 8px 124px;margin: 18px 8px 8px 80px;*/ margin: 10px 8px 8px 20px; line-height:16px;width: 252px;font-size: 14px; font-size:0.875rem; } #rightWrapper p, #rightWrapper ul { width:362px;width: 262px;width: 200px;/**/margin: 18px 8px 0px 140px; margin: 18px 8px 0px 120px; margin: 18px 8px 0px 80px;} #rightWrapper ul.list { margin: 8px 8px 0px 124px;margin: 8px 8px 0px 84px; } #rightWrapper ul.list2 { width: 182px; margin-left: 156px; margin-left: 94px; } #rightWrapper .columnIndex p { /*float:left;clear:both;width:362px;*/ /*margin: 18px 8px 8px 124px;margin: 18px 8px 8px 80px;*/ margin: 10px 8px 8px 20px; line-height:16px;width: 262px;width: 220px; } /*img.mainImage {margin: 0 0 0 -112px;margin: 0 0 0 22px!important;}*/ img.mainImageWide {margin: 0 0 0 -112px;margin: 0 0 0 -12px!important;} #caption {width: 487px;width: 100%;margin:6px 0 0 12px; margin:6px 0 0 18px;margin:6px 0 0 0px;float:left;} #caption ul {width: 487px; width: 387px;/*width: 287px;*/ width: 200px;} }