/* Box-Sizing global auf die BorderBox stellen */ html{ box-sizing: border-box; } *, ::before, ::after { box-sizing: inherit; } .loginForm{} .loginForm div{ display: flex; flex-direction: column; width: 100%; } .loginForm input{ display: block; margin: 0; width: 100%; font-size: 1.5em; border: 1px solid #bbb; } .loginForm button[type=submit]{ display: block; font-size: 1em; line-height: 2em; color: #333; font-weight: bold; width: 100%; background: #fdfdfd; background: linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%); border: 1px solid #bbb; } /** * Wettkampfbox **/ .wkBox{ border: 1px solid black; display: flex; flex-direction: column; } .wkBox nav{ /* width: 32%; float: left;*/ } .wkBox nav ul li{ display: list-item; } .wkBoxWkData{ border: none; } @media (min-width: 65em){ .wkBox{ flex-direction: row; align-items: stretch; justify-content: space-around; padding: .5em; } .wkBox *{ flex-basis: 30%; } } /* touchable Links*/ .touchLink{ display: inline-block; padding: 0.25em 0 0.25em 0; margin: 0.25em 0 0.25em 0; background-color: #FF8100; border-radius: .5em; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } /* touchable Buttons */ .touchButton{ display: block; margin: .5em 0; font-size: 1em; line-height: 1.5em; color: #333; font-weight: bold; width: 100%; background: #fdfdfd; background: linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%); border: 1px solid #bbb; } .touchButton[disabled]{ color: Grey; } @media (min-width: 65em){ /* .loginForm div{ flex-direction: row; justify-content: space-between; align-items: flex-end; } .loginForm div div{ flex-direction: column; align-items: flex-start; width: 30%; } button{ } */ } body{ background-color: #ffae00; } nav ul { width: 100%; list-style: none; padding: 0; } nav ul li a{ text-decoration: none; color: black; } nav ul li a div{ text-align: center; font-size: large; font-weight: bolder; border: 3px gray outset; background: linear-gradient(to bottom, #FFAE00 0%,#FF8100 100%); padding-top: .25em; padding-bottom: .25em; } .navLink{ text-align: center; /* font-size: large;*/ font-weight: bolder; border: 3px gray outset; background: linear-gradient(to bottom, #FFAE00 0%,#FF8100 100%); padding-top: .25em; padding-bottom: .25em; } .navLink div{ display: inline; } meldungsBox{ border: 1px solid black; } @media only screen and (min-device-width: 481px){ .wkInfo{ width: 68%; float: right; } nav ul{ display: table; } nav ul li{ display: table-cell; } nav ul li a div{ text-align: center; } button[type=submit] { display: block; font-size: 1em; line-height: 1.5em; color: #333; font-weight: bold; width: 100%; background: #fdfdfd; background: linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%); border: 1px solid #bbb; } button[disabled]{ color: Grey; } } @media only screen and (max-device-width: 481px) { nav ul li a div{ text-align: left; } button[type=submit] { display: block; font-size: 1em; line-height: 1.5em; color: #333; font-weight: bold; width: 100%; background: #fdfdfd; background: -moz-linear-gradient(top, #fdfdfd 0%, #bebebe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#bebebe)); background: -webkit-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: -o-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: -ms-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%); border: 1px solid #bbb; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } button[disabled]{ color: Grey; } input[type=text], input[type=url], input[type=email], input[type=password], input[type=tel] { -webkit-appearance: none; -moz-appearance: none; display: block; margin: 0; width: 100%; /* height: 2em;*/ /* line-height: 1.6em;*/ font-size: 1.5em; border: 1px solid #bbb; } #meldungsBox{ /* font-size: 3em;*/ border: 1px solid black; } fieldset div{ font-size: 1em; } }