/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
//	Das Dokument "style.css" bindet alle cssDateien ein und beinhaltet das Farbverzeichnis der Website.
//  
//  	Inhalt:
//			- CSS-Importe
//			- Font-Importe
//			- Browser-Settings-Reset
//			- Primary Fontsetting
//			- Globale Einstellungen
//			- Registrations Formular
//			- Media-Querrys
//			- Special_Settings for Firefox
//			- Special_Settings for InternetExplorer
//
//		Farbverzeichnis:
//  
//  INFO: -
//
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//	CSS-Importe
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

@import url("css/header.css");
@import url("css/index.css");
@import url("css/footer.css");
@import url("css/setcard.css");
@import url("search/css/form.css");
@import url("search/css/output.css");
@import url("signup/css/signup.css");

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//	Font-Importe
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

@media screen {

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

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

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

}

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//	Browser-Settings-Reset
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

html {
	-webkit-font-smoothing: subpixel-antialiased;
} 

* {
    margin: 0em;
    padding: 0em;
	list-style: none;
    border: 0em;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 1em;
	line-height: 1em;
    font-family: inherit;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//	Primary Fontsetting
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

h1, h2, h3, p, a {
}

h1 {
    color: #fff;
    font-family: 'ralewaylight';
	font-size: 2.5em;
    text-transform: uppercase;
}

h2 {
    color: #fff;
    font-family: 'ralewaylight';
	font-size: 2em;
}

h3 {
    font-family: 'montserrat';
	font-size: 1.5em;
}

p, li {
    color: #fff;
    line-height: 1.25em;
}

a {
	color: #aaa;
	text-decoration: none;
}

a:hover, a:active {
	color: #000;
	cursor: pointer;
}

p, a, button, li, label, input {
    font-family: ralewaymedium, Arial, Helvetica, sans-serif;
	font-size: 1em;
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//	Globale Einstellungen
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

body{
	background-color: #000;
    background-image: url(img/bg/bg.jpg);
    background-repeat: repeat-x;
}

main {
    position: relative;
	text-align: center;
}

/*Definition der Boxen*/

.box {
    position: relative;
    margin: 12px 0;
    padding: 24px;
    background-color: rgba(255, 255, 255, 0.125);
}

.box.fullsize {
    width: calc(100% - 48px);
}

/*Definition der Buttons*/

button.red {
    color: #fff;
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #b80a00 0%, #8a0000 100%) repeat scroll 0 0;
}

button {
    line-height: 1em;
    padding: 6px 12px;
    border-radius: 3px;
}

button:hover, button:active {
    cursor: pointer;
    opacity: .95;
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Media-Querrys
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

@media screen and (min-width: 500px) { 

    .box {
        text-align: left;
    }

}

@media screen and (min-width: 800px) { 

    main {
        margin: 0 auto;
        max-width: 1280px;
    }

    .box.small {
        display: inline-block;
        width: calc(50% - 62px);
        vertical-align: top;
    }

    .container.small #searchbox {
        margin-right: 0;
    }

    .container.small #pseudo {
        background-image: url(img/bg/suche.jpg);
        background-size: auto 100%;
    }

    .onsearch.box.small {
        width: 33%;
        min-height: 388px;
        box-sizing: border-box;
    }

}

@media screen and (min-width: 1280px) {

    .container.small {
        display: inline-block;
        width: calc(33% - 26px);
        vertical-align: top;
    }

    .box.medium {
        display: inline-block;
        margin-right: 24px;
        width: calc(66% - 38px);
        vertical-align: top;
    }

    .box.small {
        display: block;
        width: calc(100% - 48px);
    }

    .container.small #pseudo {
        background-image: none;
    }

    .onsearch.box.small {
        width: 100%;
        min-height: fit-content;
        box-sizing: border-box;
    }

}

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//	FireFox-Extrawurst
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

@-moz-document url-prefix() {
	
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Internetexplorer-Extrawurst
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

@media screen\0 {
	
}