/*
	Copyright by Daniel Nönnecke
	YouTube: Deminosa
	Erstellt mit EClipse
*/

@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Inknut+Antiqua');

* {
	padding: 0;
	margin: 0;
	font-family: 'Inknut Antiqua', Arial;
}

body, html {
	background-image: URL(bg.png);
	background-attachment: fixed;
	background-repeat: round;
	height: 100%;
	top: 0;
	/*margin: 20px;*/
	padding: 20px;
}

/*
	Navigation
*/

nav {
	background-color: rgba(17,17,17,0.5);
	padding-top: 20px;
	padding-bottom: 20px;
	min-width: 100%;
	position: absolute;
}

nav ul li{
	text-align: left;
	list-style: none;
	display: inline-block;
	padding-left: 20px; 
}

nav ul li a{
	text-decoration: none;
	color: #dadada;
}

nav ul li a:hover{
	color: #ffffff;
}

nav ul li a[type="choos"]{
	text-decoration: none;
	color: #f44060;
}

/*
	Context
*/

div[id="main"] {
	background-color: rgba(17,17,17,0.5);
	min-width: calc(100% - 40px);
	padding: 20px;
	top: 100px;
	position: relative;
}

div[id="footer"] {
	background-color: rgba(89, 144, 166, 0.8);
	min-width: calc(100% - 80px);
	padding: 0;
	bottom: 0;
	position: fixed;
}

div[id="footer2"] {
	background-color: rgba(89, 144, 166, 0.8);
	min-width: 100%;
	padding: 20px;
	bottom: 0;
	position: fixed;
}

div[id="footer3"] {
	background-color: rgba(89, 144, 166, 0.8);
	min-width: calc(100% - 120px);
	padding: 20px;
	bottom: 0;
	position: fixed;
}


div h1 {
	color: #fff;
	font-size: 30px;
	margin-bottom: 30px;
	text-transform: uppercase;
}

div h2 {
	color: #fff;
	font-size: 25px;
	margin-bottom: 25px;
	text-transform: uppercase;
}

div h3 {
	color: #fff;
	font-size: 20px;
	margin-bottom: 20px;
	text-transform: uppercase;
}

div h4 {
	color: #fff;
	font-size: 17px;
	margin-bottom: 17px;
	text-transform: uppercase;
}

div p {
	color: #fff;
}

/*
	Text Type Class
*/

#left {
	text-align: left;
}

#center {
	text-align: center;
}

#right {
	text-align: right;
}

/*
	Farben
*/

#red {
	color: red;
}

#black {
	color: black;
}

/*
	Notes
*/

.danger {
    background-color: #ffdddd;
    border-left: 6px solid #f44336;
    margin: 15px;
}

.success {
    background-color: #ddffdd;
    border-left: 6px solid #4CAF50;
    margin: 15px;
}

.info {
    background-color: #e7f3fe;
    border-left: 6px solid #2196F3;
    margin: 15px;
}


.warning {
    background-color: #ffffcc;
    border-left: 6px solid #ffeb3b;
    margin: 15px;
}

/*
	Input's Buttons
*/


input[type=text]{
	width: 84%;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box; 
}

input[type=button]{
	width: 15%;
	background-color: #039BE5;
	color: #fff;
	pause: 14px 20px;
	border: none;
	border-radius: 4px
}

input[type=button]:hover{
	background-color: #03A9F4;
}