cwsvJudo/homepage/redesign2018/markdownExperiment/wkParticipo/style.css

/* 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;
	}
}