/*
        00) Reset
        01) Body
        02) Header
            02.1) Navigation
        03) Content
        04) Footer
		05) Anmeldung
*/


@charset "utf-8";

/* =============================================================================
   00) RESET
   ========================================================================== */

html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em,img, ins, kbd, q, samp, strong, sub, sup, tt, var, dl, dt, dd, ol, ul,li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead,tr, th, td {	
border: 0;outline: 0;vertical-align: baseline;background: transparent;}

* { margin: 0px;
    padding: 0px;
    border: none;
    outline: 0;
    vertical-align: baseline;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
}

ol, ul { list-style: none }

a {text-decoration:none;}
a:hover{color:#75a714 !important;}



/* =============================================================================
   01) BODY
   ========================================================================== */

body { 
	background:url("../img/katja-koenig-background.jpg") repeat fixed !important;
	font:1em 'Muli', Arial, Helvetica, sans-serif;
	color:#333333 !important;
}

@font-face {
  font-family: 'Moseley';
    src:  url('../../font/Moseley.ttf.woff') format('woff'),
    url('../../font/Moseley.ttf.svg#Moseley') format('svg'),
    url('../../font/Moseley.ttf.eot'),
    url('../../font/Moseley.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

.wrapper {
	background-image:url("../img/katja-koenig-wasserzeichen.png");
	background-position:right bottom;
	background-repeat: no-repeat;
	
	max-width:974px;
	margin:auto;
	
	padding: 50px;
	background-color:#FFFFFF;
	
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.33);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.33);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.33);
}

h1 {
	font: 2.5em "Moseley",cursive;
	color: #75a714;
	letter-spacing:2px;
	margin-bottom: 20px;
}




/* =============================================================================
   02) HEADER
   ========================================================================== */

header{
	margin: auto auto 20px;
    max-width: 933px;
}

header img{ max-width:100%;}


/* =============================================================================
   02.1) NAVIGATION
   ========================================================================== */

nav {
	float: right;
    margin: 60px 0 0;
}

nav ul { font-size:1.3em; }

nav ul li { display: inline;}

nav ul li a { color:#333333; text-decoration:none; margin-right: 20px; padding: 0 50px 10px 0; border-bottom: 1px solid #75a714;}

#home nav ul li a.home,
#materialien nav ul li a.materialien,  {color:#75a714; border-bottom: 1px solid #75a714;}



/* =============================================================================
   03) CONTENT
   ========================================================================== */

.mainContent {
	margin: auto;
    max-width: 933px;
	overflow:auto;
}

.mainContent p {
	max-width: 600px;
}

.mainContent .felder {
	max-width: 380px;
}

.mainContent img{ max-width:100%}

.box{
	background-color: #fff;
	max-width: 269px;
	min-height: 323px;
	margin: 40px 40px 0 0;
	float:left;

    position: relative;
	
	border: 1px solid #efefef;
	
	-webkit-box-shadow: 1px 1px 1px 0 #d9d9d9;
	-moz-box-shadow: 1px 1px 1px 0 #d9d9d9;
	box-shadow: 1px 1px 1px 0 #d9d9d9;
}

.box .img {
   height: 134px;
}

.box p{
	padding:15px;
}

.box-link {
    position: absolute;
    bottom: 30px;
    left: 15px;
}

.cockpit{
	max-width:700px;
}

.cockpit-nav{
	border: 1px solid #d6d6d6;
    float: left;
    padding: 20px;
}

.cockpit-nav p{
	font-weight:bold;
	border-bottom: 1px solid #333333;
	margin-bottom: 20px;
	padding: 0 10px;
}

.cockpit-nav a{
	color: #333333;
}


.cockpit-box{
	border: 1px solid #e1e1e1;
	margin-top: 40px;
	background-color:#FFFFFF;
}
.checkbox{
	width:30px;
	height: 70px;
	text-align:center;
}

.grau{
	background-color:#f9f9f9;
}




/* =============================================================================
   04) FOOTER
   ========================================================================== */

footer {
	border-top: 1px solid #75a714;
	margin:60px auto 0;
	padding: 15px 0 0;
	
	color:#939393;
	font-size:12px;
}

footer a {color:#939393;}

.copyright {
	float:left;
}

.impressum {
	float:right;
}


/* =============================================================================
   05) ANMELDUNG
   ========================================================================== */

input{
	border: 1px solid #dbdfe2;
    border-radius: 6px;
	margin-bottom: 10px;
    padding: 5px;
    /*width: 380px;*/
	color:#aaaaac;
}

.senden{
	border: 1px solid #4d981b;
    border-radius: 6px;
	
	background-color:#75a714;
	color:#FFFFFF;
	
	margin-bottom: 10px;
    padding: 5px;
    width: 100px;
}

.hilfe{
	float:left;
}

.hilfe .help-child-text {
    color: #ccc;
	text-decoration: none;
    cursor: pointer;
}

.hilfe .help-child-text:hover {
    color: #75a714 !important
}

.hilfe .help-child-input {
    cursor: pointer;
}

.anmeldebutton{
	float:right;
}

.flashes {
    color: white;
    padding: 10px;
    margin: 0 auto;
    margin-bottom: 30px;
    width: 913px;
    list-style: circle;
}

.flashes.error {
    background: #e8847e;
    border: 1px solid red;
}


.flashes.success {
    background: #C1D9AB;
    border: 1px solid #75a714;
}

.password-generate-button {
    display: inline-block;
    background: #ccc;
    border: 1px solid #bbb;
    border-radius: 5px;
    padding: 5px;
    margin-left: 5px;
    width: 129px;
}

.password-generate-number {
    width: 30px;
}

.breadcrumb-item {
    color: #75a714;
}

.breadcrumb-item-arrows:last-child {
    display: none;
}

.cockpit-action {
    display: inline-block;
}
.cockpit-action button {
    background: none;
    padding: 0;
}

.cockpit-action button:hover {
    color: #75a714;
    cursor: pointer;
}

.margin{
	margin-bottom:50px;
}


.impressum-left{
	float: left;
    font-size: 14px;
    max-width: 450px;
    width: auto;
}

.impressum-right{
	float: right;
    font-size: 0.8em;
    text-align: justify;
    width: 570px;
}

#state {
    width: 690px;
    min-height: 80px;
}

#state .cockpit-nav {
    width: 650px;
    min-height: 80px;
}