/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
    body{
        font-family:'alegreya_sansmedium';
        font-size:16px;
    }

    .container{
        padding:30px 0;
    }

    .bold{
        font-family:'alegreya_sansbold' !important;
    }

    .not{
        display:none;
    }

    a{
        text-decoration:none;
    }

    #content{
        margin-top:30px;
        margin-bottom:15px;
        position:relative;
    }

    #actions{
        text-align:right;
        height:59px;
        line-height:59px;
    }

    #actions a{
        color:#009bb5;
        vertical-align:text-top;
        margin-left:1em;
    }

    #actions a.selected,
    #actions a:active,
    #actions a:hover{
        color:#b9b42d;
    }

    .img_container img{
        max-width:100%;
        height:auto;
        display:block;
    }

    .mobilefooter,
    #footer{
        font-size:0.9em;
        color:#7e7e7e;
    }


/* #Page Styles
================================================== */
    .swipe {
      overflow: hidden;
      visibility: hidden;
      position: relative;
    }

    .swipe-wrap {
      overflow: hidden;
      position: relative;
    }

    .swipe-wrap > div {
      float:left;
      width:100%;
      position: relative;
    }

    .img_container{
        position:releative;
    }

    .slide_left{
        position:absolute;
        top:21%;
        width:50%;
        left:0;
    }

    .slide_left .bar{
        background-color:#009bb5;
        width:100%;
        position:absolute;
        height:1.2em;
        line-height:1em;
    }

    .slide_left a{
        color:white;
        background-color:#055a69;
        float:right;
        padding-right:3em;
    }

    .slide_left a div{
        height:0;
        width:0;
        border-left: 0.8em solid #009bb5;
    	border-bottom: 1.2em solid #055a69;
        float:left;
    }

    .slide_left a span{
        padding-left:0.5em;
        font-size:0.8em;
        line-height:1.2em;
    }

    .slide_right{
        position:absolute;
        width:54%;
        right:0;
        bottom:12%;
    }

    .slide_right .bar{
        background-color:#b9b42d;
        width:100%;
        position:absolute;
        height:1.2em;
        line-height:1em;
    }

    .slide_right a{
        color:white;
        background-color:#5f6423;
        padding-left:3em;
        float:left;
    }

    .slide_right a div{
        height:0;
        width:0;
        border-right: 0.8em solid #b9b42d;
    	border-bottom: 1.2em solid #5f6423;
        float:right;
    }

    .slide_right a span{
        padding-right:0.5em;
        font-size:0.8em;
        line-height:1.2em;
    }

    #startseite h2{
        font-size:1.8em;
        font-family:"alegreya_sanslight";
        text-transform:uppercase;
    }

    #startseite .slide_left h2{
        color:#207b8e;
        position:absolute;
        bottom:0;
        right:10%;
    }

    #startseite .slide_right h2{
        color:#858e24;
    }

    .slide_start{
        position:absolute;
        color:white;
        text-decoration:underline;
    }

    .slide_start:visited{
        color:white;
    }

    #unternehmer .slide_start{
        bottom:5%;
        right:2%;
    }

    #karriere .slide_start{
        top:5%;
        left:2%;
    }

    #right_content h3,
    #left_content h3{
        font-size:1.5em;
        color:white;
        font-family:"alegreya_sansmedium";
    }

    .col1{
        width:49%;
        float:left;
    }

    .col2{
        width:49%;
        float:right;
    }

    #right_content{
        position:absolute;
        top:15%;
        left:42%;
        right:5%;
        bottom:4%;
        overflow:auto;
    }

    #right_content h3{
        background:url("../img/football_ico.png") no-repeat scroll 0 0 transparent;
        height: 100px;
        padding-left: 68px;
        padding-top:39px;
        margin-bottom:0em;
    }

    #right_content p{
        color:#5f6423;
        font-family:"alegreya_sanslight";
    }

    #left_content{
        position:absolute;
        top:5%;
        left:5%;
        right:37%;
        bottom:4%;
        overflow:auto;
    }

    #left_content h3{
        background:url("../img/katamaran_ico.png") no-repeat scroll 0 0 transparent;
        height: 154px;
        padding-left: 51px;
        padding-top: 28px;
        margin-bottom:0;
    }

    #left_content p{
        color:#055a69;
        font-family:"alegreya_sanslight";
    }

    #center_content h3{
        font-size:1.5em;
        color:#4a4a49;
        font-family:"alegreya_sansmedium";
    }

    #center_content p{
        font-family:"alegreya_sanslight";
        color:#4a4a49;
    }

    #center_content{
        position:absolute;
        top:15%;
        left:42%;
        right:5%;
        bottom:4%;
        overflow:auto;
    }

    a.sub_start{
        left: 2%;
        top: 5%;
    }

    /* scrollbars white 30% transparenz*/
    #right_content,
    #left_content,
    #center_content{
        padding-right:15px;
    }

    /* safari chrome */
    ::-webkit-scrollbar{
        background-color:rgba(255,255,255,0.3);
        width:10px;
    }

    ::-webkit-scrollbar-track{
        background-color:rgba(255,255,255,0.3);
    }

    ::-webkit-scrollbar-thumb{
        background-color:white;

    }

    /* IE */
    #content{
        scrollbar-face-color: white;
        scrollbar-shadow-color: white;
        scrollbar-highlight-color:white;
        scrollbar-3dlight-color: white;
        scrollbar-darkshadow-color: white;
        scrollbar-track-color: #f1f1f1;
        scrollbar-arrow-color: #7E7E7E;
    }


/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
        .slide_left{
            top:25%;
        }
    }

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {

    }

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {

    }

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {

    }

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {

    }

    /* alle the small things */
    @media only screen and (max-width: 767px)
	 {

        #footer{
            display:none;
        }

        .mobilefooter{
            display:block;
            margin-top:0.5em;
        }

        #actions{
            text-align:left;
            height:3em;
            line-height:2em;
        }

        #actions a{
            margin-left:0em;
            margin-right:1em;
            vertical-align:auto;
        }

        #content{
            margin-top:0;
        }

        #left_content,
        #right_content,
        #center_content{
            position:relative;
            top:auto;
            left:auto;
            right:auto;
            bottom:auto;
            overflow:auto;
        }

        #startseite .slide_right{
            bottom:20%;
        }

        #startseite .slide_left h2{
            left:15%;
            right:auto;
        }

        #startseite .slide_left h2,
        #startseite .slide_right h2{
            font-size:1.5em;
            line-height:1.2em;
        }

        #unternehmer .slide_start{
            bottom:auto;
            right: 1.5%;
            top: 10%;
        }

        #karriere .slide_start{
            top:1%;
            left:1.5%;
        }

        #right_content h3,
        #left_content h3{
            background:none;
            height:auto;
            padding:0;
            margin-bottom:0.5em;
        }

        #center_content,
        #left_content,
        #right_content{
            padding:1em;
        }

        #left_content{
            background-color:#b3dae3;
        }

        #right_content{
            background-color:#d4d1a0;
        }

        #center_content{
            background-color:#d4d6d7;
        }

        .col1,
        .col2{
            float:none;
            width:auto;
        }

    }

    @media only screen and (max-width: 479px)
	{
        #unternehmer .slide_start{
            top: 5%;
        }

        #startseite .slide_left h2,
        #startseite .slide_right h2{
            font-size:1.3em;
        }

        #startseite .slide_right{
            bottom:25%;
        }
    }


/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}




/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

	@font-face {
        font-family: 'alegreya_sansbold';
        src: url('../fonts/alegreyasans_bold_macroman/AlegreyaSans-Bold-webfont.eot');
        src: url('../fonts/alegreyasans_bold_macroman/AlegreyaSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
             url('../fonts/alegreyasans_bold_macroman/AlegreyaSans-Bold-webfont.woff') format('woff'),
             url('../fonts/alegreyasans_bold_macroman/AlegreyaSans-Bold-webfont.ttf') format('truetype'),
             url('../fonts/alegreyasans_bold_macroman/AlegreyaSans-Bold-webfont.svg#alegreya_sansbold') format('svg');
        font-weight: normal;
        font-style: normal;

    }

    @font-face {
        font-family: 'alegreya_sanslight';
        src: url('../fonts/alegreyasans_light_macroman/AlegreyaSans-Light-webfont.eot');
        src: url('../fonts/alegreyasans_light_macroman/AlegreyaSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
             url('../fonts/alegreyasans_light_macroman/AlegreyaSans-Light-webfont.woff') format('woff'),
             url('../fonts/alegreyasans_light_macroman/AlegreyaSans-Light-webfont.ttf') format('truetype'),
             url('../fonts/alegreyasans_light_macroman/AlegreyaSans-Light-webfont.svg#alegreya_sanslight') format('svg');
        font-weight: normal;
        font-style: normal;

    }

    @font-face {
        font-family: 'alegreya_sansmedium';
        src: url('../fonts/alegreyasans_medium_macroman/AlegreyaSans-Medium-webfont.eot');
        src: url('../fonts/alegreyasans_medium_macroman/AlegreyaSans-Medium-webfont.eot?#iefix') format('embedded-opentype'),
             url('../fonts/alegreyasans_medium_macroman/AlegreyaSans-Medium-webfont.woff') format('woff'),
             url('../fonts/alegreyasans_medium_macroman/AlegreyaSans-Medium-webfont.ttf') format('truetype'),
             url('../fonts/alegreyasans_medium_macroman/AlegreyaSans-Medium-webfont.svg#alegreya_sansmedium') format('svg');
        font-weight: normal;
        font-style: normal;

    }