/* vermeiden von FOUC, siehe auch im head ganz oben */ .no-js { @include breakpoint(small only) { .top-bar { display: none; } } @include breakpoint(medium) { .title-bar { display: none; } } } /* @import url(https://fonts.googleapis.com/css?family=Open+Sans); @import url(https://fonts.googleapis.com/css?family=Roboto); */ body { background: #f7f7f7; /* #e6e6e6 = rgb(230, 230, 230) */ color: #3b3b3c; margin: 0; padding: 0; line-height: 0px; /* wenn geändert, auch zu ändern: nav ul ul {top: 52px; UND */ word-wrap:break-word !important; /* bricht lange Wörter */ } textteil { margin: 10px; color: #3b3b3c; font-size: 17px; line-height: 1.55; font-family: 'Open Sans', 'Roboto', Verdana, Arial, Helvetica, Times, sans-serif; } /*--------------Dropdown Menü-------------*/ /* Orginal Navbar: http://codepen.io/andornagy/pen/RNeydj */ a { color: #3b3b3c; } .toggle, [id^=drop] { display: none; } /* Giving a background-color to the nav container. */ nav { margin:0; padding: 0; color: #3b3b3c; /* background-color: #cc0000; */ } .menukasten { display: block; background-image: url("/images/ResultHintergrundUnten.jpg"); background-color: #4b4b4b; /* #3a3838; */ padding:1px 0px; height: 14px ; text-decoration:none; border-top: 0px #878583 solid; border-bottom:2px #878583 solid; border-left: none; border-right: none; /* background-image: linear-gradient(to bottom, #b9b6b6 0%, #353535 100%, #ededed 100%); */ box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.6); } .logo { display: block; background-image: url("/images/ResultHintergrund.jpg"); padding: 0px; margin: 0px width: 100%; text-align: center; float: none; box-shadow: 2px 3px 12px rgba(0, 0, 0, 0.6); } /* Since we'll have the "ul li" "float:left" * we need to add a clear after the container. */ nav:after { content:""; display:table; clear:both; } /* Removing padding, margin and "list-style" from the "ul", * and adding "position:reltive" */ nav ul { float: left; /* Menükasten floatet vom linken Rand (könnte auch von rechts */ padding:0; margin:0; list-style: none; position: relative; } /* Die Menüpunkte Home etc.. Positioning the navigation items inline */ nav ul li { background:#c0c0c0; border-bottom: 1px #4b4b4b solid; border-top: 1px #7b7b7b solid; border-left: 1px #7b7b7b solid; margin: 0px; display:inline-block; float: left; /* Hintergrund für die Menüpunkte am PC und die Menüpunkte OHNE Drop im Händy */ background-color: #4b4b4b; /*background-image: linear-gradient(to bottom, #878787 0%, #4b4b4b 100%, #ededed 100%); */ background-image: linear-gradient(to bottom, #ababab 0%, #525252 100%, #ededed 100%); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6); } /* Die Breite von Inline-Boxen wird allein durch den Inhalt bestimmt. * Die width-Eigenschaft ist wirkungslos. * Die Teile einer aufgeteilten Inline-Box nehmen nur die Breite ein, * die der Inhalt auch tatsächlich benötigt. * Die Höhe einer Inline-Box ist in der Regel von der verwendeten Schriftart abhängig, auch wenn die Inline-Box keine Inhalte besitzt. Bisher (Stand März 2012) definiert CSS kein genaues Vorgehen für die Berechnung der Höhe. Die height-Eigenschaft ist wirkungslos. Die Höhe einer Inline-Box kann die Höhe einer Zeile (vergleiche die line-height-Eigenschaft) beeinflussen.*/ /* Styling the links */ nav a { display:block; padding: 14px 20px; /*Höhe und Breite von den Menüpunkten ohne Dropdown - müssen die selben sein wie siehe unten toggle. Werden unten für Händy genullt, siehe nav a händy*/ color: #f7f7f7; font-size: 17px; /* Schrifgröße Menü */ font-weight: normal; font-family: 'Open Sans', Verdana, Helvetica, sans-serif; /* Schrifart */ text-decoration:none; } nav ul li ul li:hover { background: #c0baae; } /* hover hintergrund dritte ebene, nicht der menüpunkte, sondern fläche*/ /* Background color change on Hover */ nav a:hover { background-color: #a2a3a2; /*Hover über die Menüpunkte am PC, aber auch hintergrund vom logo auf dem PC !! (wenn klick >home)) */ background-image: linear-gradient(to bottom, #c4c4c4 0%, #a8a8a8 100%, #ededed 100%); } nav ul ul a:hover { background-color: #e2d9c7; /*Hover über die Menüpunkte 1.Ebene*/ } nav ul ul ul a:hover { background-color: #e2d9c7; /*Hover über die 2.Ebene */ } /* Hide Dropdowns by Default * and giving it a position of absolute */ nav ul ul { display: none; position: absolute; /* has to be the same number as the "line-height" of "nav a" */ top: 29px; /* bezieht sich auf line-high von body */ } /* Display Dropdowns on Hover */ nav ul li:hover > ul { display:inherit; } /* Fisrt Tier Dropdown */ /*1. Ebene */ nav ul ul li { width:216px; /*Breite der Menüpunkte 1.Ebene, muss auch unten geändert werden*/ float:none; display:list-item; position: relative; background-color: #efcf9e; /*Hintergrund 1. Ebene */ background-image: none; line-height: 8px; /* Höhe Unterpunkte - falls der wert nicht angegeben wird, sind die menüpunkte mit unterpunkten kleiner, da in mediaquery "nach"behandelt*/ } /* Second, Third and more Tiers * We move the 2nd and 3rd etc tier dropdowns to the left * by the amount of the width of the first tier. */ nav ul ul li a{color:#272727;} /*Schrift der aufspringenden Menüpunkte */ nav ul ul ul li { /* 2te Ebene */ position: relative; top: -30px; /* has to be the same number as the "width" of "nav ul ul li" */ width:230px; /*Breite 2. Ebene */ left:216px; /* so weit weg wie die Menüpunkte der 1. Ebene */ background-color: #faf1e3; /* 2te Ebene */ } nav ul ul ul li a{color:#272727;} /*Schrift der aufspringenden 2. Ebene (auch Handy))*/ /* Change ' +' in order to change the Dropdown symbol // ▼ oder ❭*/ li li> a:after { font-weight: bold; color: black; content: " \276D"; } li li> a:only-child:after { content: ''; } table.Resultat-Gross { font-size: 15px; border: 3px solid #CCC; font-family: Verdana, Geneva, sans-serif; } .Resultat-Gross tr { background-color: #D3D3D7; padding: 9px; border: 0px solid #CCC; } .Resultat-Gross tr:nth-child(odd) { background-color: #e3e0e0; padding: 2px; border: 0px solid #CCC; } .Resultat-Gross th { background-color: #104E8B; color: #FFF; font-weight: bold; } /*--------test-----*/ table.Resultat-Libre { white-space: nowrap; /*sonst gibts bei längeren Wörtern einen Zeilenumbruch, wenn man mit OpenOffice arbeitet*/ /* font-size: 12px; kann man bei Open Office weglassen, da mit size 3 angeben */ border: 3px solid #CCC; font-family: Verdana, Geneva, sans-serif; } .Resultat-Libre tr { background-color: #D3D3D7; padding: 9px; border: 0px solid #CCC; } .Resultat-Libre tr:nth-child(odd) { background-color: #e3e0e0; padding: 2px; border: 0px solid #CCC; } .Resultat-Libre th { background-color: #104E8B; color: #FFF; font-weight: bold; } .Resultat-Libre img { /* sonst schrumpfen die Nationen-Flagen auf dem Handy*/ max-width: 30px; } /* Media Queries fürs Handy --------------------------------------------- */ @media all and (max-width : 786px) { textteil { line-height: 1.5; } .logo { /* logo wird auf dem handy ausgeschaltet */ display: none; background-image: none; padding: 0px; margin: 0px width: 0%; text-align: center; float: none; box-shadow: none; } nav { margin: 0; } nav a { /* nav a = die normalen Menüpunkte ohne Unterpunkte, also Home... */ color: #FFFFFF; /* richtig weiß aufm Handy */ border-bottom: 0px #4b4b4b solid; padding: 0px 0px; /* Abstände müssen für Handy genullt werden*/ } nav div a { /*Betrifft das Logo ganz oben , damit es keine Ränder hat */ padding: 0px; margin: 0px } /* Hide the navigation menu by default */ /* Also hide the */ .toggle + a, .menu { display: none; } .menukasten { display: block; padding:2px 0px; height: 29px ; text-decoration:none; border-bottom: 1px #ffcc00 solid; border-top: 1px #ffcc00 solid; border-style: none; /*Schatten und Style werden aufm Handy entfernt*/ box-shadow: none; } /* Stylinf the toggle lable das Toogle sind das Menü + die Menüpunkte in denen noch ein Unterpunkt ist, die müssen extra gestaltet werden*/ .toggle { display: block; padding: 14px 20px; /*Höhe und Breite von den Menüpunkten mit Dropdown - müssen die selben sein wie siehe oben: nav a */ color:#FFFFFF; text-decoration:none; border-bottom: 1px #4b4b4b solid; font-size: 17px; /* Schrifgröße Menü */ font-weight: normal; font-family: 'Open Sans', Verdana, Helvetica, sans-serif; /* Schrifart */ /* Hintergrund für die Menüleiste im Handy und die Menüpunkte mit Drop im Händy */ background-color: #4b4b4b; background-image: linear-gradient(to bottom, #ababab 0%, #525252 100%, #ededed 100%); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6); } .toggle:hover { /* background-color: #888888; */ } /* Display Dropdown when clicked on Parent Lable */ [id^=drop]:checked + ul { display: block; } /* Change menu item's width to 100% */ nav ul li { display: block; width: 100%; line-height: 6px; /* bestimmt die Zeilenhöhe mit*/ } nav ul ul .toggle, nav ul ul a { padding: 0 40px; } nav ul ul ul a { padding: 0 80px; } nav a:hover { background-color: #a2a3a2; /*Hover über Home (bzw menüpunkte ohne drop) - auch farbe des bsckgrounds vom logos im handy (bei click >home)!!*/ } nav ul li ul li .toggle, nav ul ul a, nav ul ul ul a{ padding:14px 20px; color:#3b3b3c; line-height: 12px; /* Höhe Unterpunkte*/ font-size: 17px; /* alle unterpunkte */ font-weight: normal; font-family: 'Open Sans', Verdana, Helvetica, sans-serif; } nav ul li ul li .toggle, nav ul ul a { background-color: #efcf9e; background-image: none; } nav ul ul ul li a { /* 2. Ebene */ background-color: #faf1e3; } /* Hide Dropdowns by Default */ nav ul ul { float: none; position:static; color: #ffffff; /* has to be the same number as the "line-height" of "nav a" */ } /* Hide menus on hover */ nav ul ul li:hover > ul, nav ul li:hover > ul { display: none; } /* Fisrt Tier Dropdown */ nav ul ul li { display: block; width: 100%; } nav ul ul ul li { position: static; /* has to be the same number as the "width" of "nav ul ul li" */ } /* Tabelle */ .table-scrollable { width: 100%; overflow-y: auto; margin: 0 0 1em; } .table-scrollable::-webkit-scrollbar { -webkit-appearance: none; width: 14px; height: 7px; } .table-scrollable::-webkit-scrollbar-thumb { border-radius: 6px; border: 1px solid #ecd69b; background-color: rgba(0, 0, 0, .3); } } @media all and (max-width : 330px) { nav ul li { display:block; width: 94%; } } /* fürs Handy ENDE ----------------*/ /* aus altem css */ h3 {color:#000058; font-weight:normal; font-family: Verdana, Arial, sans-serif; font-size: 17px;} b {color: #515152; font-weight:bold; } u {color: black; text-decoration:none;letter-spacing:0.04em;} trab {color:#565656; font-weight:normal; font-family: Tahoma, Arial, sans-serif; font-size: 13px;} h1 { margin: 10px 0; color:#434345; font-weight:normal; font-family: Verdana, Arial, sans-serif; font-size: 24px; line-height: 26px; } h2 { /*--- h2 sind die dunkelgraue zeilen mit orangem Text (zB im menu)----*/ margin: 7px 0; padding: 2px; list-style-type: none; text-indent: 8px; font: 17px 'Roboto', Verdana, Arial, sans-serif; background-image: linear-gradient(to bottom, #979797 0%, #666666 100%, #666666 50%); /*background-color: #666666; */ color: #ffcc00; /*----------textfarbe-----------------*/ } .h2b { /*--- h2 sind die dunkelgraue zeilen mit orangem Text (zB im menu)----*/ padding: 2px; list-style-type: none; text-indent: 8px; font: 15px Verdana, Arial, sans-serif; background-image: linear-gradient(to bottom, #666666 0%, #434345 100%, #434345 50%); /*background-color: #666666; */ color: #ffcc00; /*----------textfarbe-----------------*/ } h4 { /*--- h2 sind die dunkelgraue zeilen mit orangem Text (zB im menu)----*/ margin: 7px 0; padding: 2px; list-style-type: none; text-indent: 8px; font-weight: bold; font: 20px 'Prompt', 'Roboto', Verdana, Arial, sans-serif; background-image: linear-gradient(to bottom, #979797 0%, #666666 100%, #666666 50%); /*background-color: #666666; */ color: #ffcc00; /*----------textfarbe-----------------*/ } .break1{ padding-bottom: 4px; } .break2{ padding-bottom: 8px; } .break3{ padding-bottom: 20px; } /* ------ SPALTEN STYLING --------- */ /* Conatiner */ /* Die Container müssen im CSS über den Spalten stehen*/ .betssongroup {background:white; border: 1px #ffcc00 solid; } .racebetscontainer { padding-top: 0px; padding-bottom: 12px; text-align: center; background-image: linear-gradient(to bottom, #a1a1a1 0%, #666666 100%, #666666 50%); border: 1px #ffcc00 solid; color: #faf1e3; font-family: 'Roboto',Tahoma, Helvetica, sans-serif; } .speedpunkte-gifanimation { /* padding-top: 2px; padding-bottom: 12px; */ text-align: center; background: #494949; background-image: url(images/HintergrundGrauGS.jpg); border: 1px #b7b7b7 solid; color: #faf1e3; font-family: 'Roboto',Tahoma, Helvetica, sans-serif; } .vorherige_results_container { padding-top: 0px; padding-bottom: 0px; text-align: center; background-image: linear-gradient(to bottom, #a1a1a1 0%, #666666 100%, #666666 50%); border: 1px #ffcc00 solid; font-size: 16px; font-family: 'Roboto',Tahoma, Helvetica, sans-serif; } .nation_container { padding: 5px; text-align: left; background: #b7b7b7; border: 1px #ffcc00 solid; font-size: 16px; color: #525252; font-family: Calibri, Helvetica, Tahoma, sans-serif; } .racebets_review_spalte { padding: 9px; text-align: left; background: SeaShell; border: 1px #ffcc00 solid; font-size: 16px; color: #525252; font-family: Calibri, Helvetica, Tahoma, sans-serif; } h5 { /*--- ist der Style zum Container----*/ margin-top: 9px; margin-right: 4px; margin-bottom: 9px; margin-left: 4px; padding: 0px; text-indent: 0px; background-color: #bebebe; } /*------------------------*/ .leftIndex { float: left; width: 37%; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 18px; } .rightIndex { float: right; width: 57%; margin-top: 14px; margin-right: 18px; margin-bottom: 10px; margin-left: 0px; } .groupIndex:after { content:""; display: table; clear: both; } .IndexDunkelHintergrund{ background-color: #e6e6e6; border-bottom: 1px #ffcc00 solid; border-top: 1px #ffcc00 solid; } /*--------------------------------------*/ .groupRacebets { margin: auto; max-width: 1000px; } .leftRacebets { float: left; max-width: 700px; margin-top: 18px; margin-right: 0px; margin-bottom: 10px; margin-left: 20px; } .rightRacebets { float: right; width: 16%; margin-top: 25px; /*Abstand zum oberen "Frame"*/ margin-right: 12px; margin-bottom: 10px; margin-left: 30px; } .groupRacebets:after { content:""; display: table; clear: both; } /*--------------------------------------*/ .leftResults { float: left; width: 70%; margin-top: 18px; margin-right: 0px; margin-bottom: 10px; margin-left: 30px; } .rightResults { float: right; width: 23%; margin-top: 40px; /*Abstand zum oberen "Frame"*/ margin-right: 12px; margin-bottom: 10px; margin-left: 0px; } .groupResults:after { content:""; display: table; clear: both; } /*---------------------------------------*/ .left { float: left; width: 38%; margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 12px; } .right { float: right; width: 57%; margin-top: 10px; margin-right: 12px; margin-bottom: 10px; margin-left: 0px; } .group:after { content:""; display: table; clear: both; } img { max-width: 100%; height: auto; } @media screen and (max-width: 920px) { .left, .right, .leftResults, .rightResults, .leftRacebets, .rightRacebets { float: none; width: auto; margin: 10px; } @media screen and (max-width: 786px) { .leftIndex, .rightIndex { float: none; width: auto; margin: 10px; } /* ---------------------------------*/ /* ---- Rechte Spalte --------------*/