/* ==========================================================================
   Version 0.1 / 28.11.2016

    The CSS is build on bootstrap framework Version 3.x
    The bootstrap files are located in css/bootstrap and will loaded before the following css-styles.

    To easier identify the costum styles from the bootstarp ones, we use dag-* as a style prefix.
    Nameing convention of css-classes found here is based on BEM (find out more here: http://getbem.com/introduction/).

   ========================================================================== */


/* ==========================================================================
   Global format
   ========================================================================== */

/* shadow is uses on the main box */

.dag-shadow{
    -webkit-box-shadow:     0 5px 10px #aaa;
        -moz-box-shadow:    0 5px 10px #aaa;
            box-shadow:     0 5px 10px #aaa;
}
.tooltip-inner{
	text-align:left;
}

body{
    background-color: #E7E9EA;
}
footer{
    padding-top: 30px;
    padding-bottom: 15px;
}


/* ==========================================================================
   Elements
   ========================================================================== */


/* Main Container */

.dag-wrapper__main{
    background-color: #ffffff;
    max-width:980px;
    margin: 0 auto;
}

/* Language Switcher & Buttons */

.dag-language{
    padding:6px 0;
    text-align: right;
}
.dag-language__menu{
    min-width: 45px;
    left:auto;
    right:0;
    background-color: #000000;
}

.dag-language__menu > li > a{
    color:#ffffff;
}
.dag-language__menu > li > a:hover{
    color:#c8c8c8;
    background-color: #000000;
}

/* Buttons */
.dag-language.nav-pills > li > a{
    padding:4px 5px;
    font-size: 12px;
    color:#ffffff;
    background-color: #000000;
}
.dag-language.nav-pills > li > a:hover,
.dag-language.nav-pills > li > a:active,
.dag-language.nav-pills > li > a:focus{
    background-color: #565756;
}

/* Logo Section & Logo */

.dag-brand{
    background: url('../img/brand/dbdn_bg_1280.jpg') no-repeat top center;
}
.dag-brand__head{
    color:rgb(255,255,255);
}
.dag-brand__logo{
    display:block;
    width: 150px;
    margin: 8px 15px;
}

/* Image Box with Info Text */

.dag-hero{
    position: relative;
    overflow: hidden;
}
.dag-hero__wrapper{
    display:none;
}
/* we use rgba here to change opacity later below */
.dag-hr{
    border-top-color: #fff;
}

.dag-hero__text{
    background-color: rgba(0, 103, 127, 1);
    color: rgb(255,255,255);
    padding-bottom:15px;
}
/* let the the text links differ from default color to white and underline them */
.dag-hero__text a{
    color:#ffffff;
    text-decoration: underline;
}

/* Form for Login with username and password */

.dag-form-signin{
    /* we use max-width here to stop form scale to complete width of the box and center it */
    max-width: 320px;
    margin: 15px auto;
}
.dag-form-signin input{
    margin-bottom:10px;
}
.dag-form-signin__checkbox{
    position: relative;
}
.dag-form-signin__checkbox input{
    position: absolute;
}
.dag-form-signin__checkbox span{
    display: block;
    margin-left: 20px;
}
.dag-form-signin .btn-success {
    padding:6px 24px;
}

/* the 4 steps to login */

.dag-box-step__image{
    display:block;
    margin: 15px auto;
    width: 100%;
    height:auto;
}
.dag-box-step__text{
    text-align: left;
}

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

   Thes Brackpoint are responible for the hero image
   ========================================================================== */


@media only screen and (min-height: 340px) {
    /* not usesd */
    .dag-hero__wrapper{
        display:block;
        height:170px;
        overflow: hidden;
        position: relative;
    }
    .dag-hero__image{
        display: block;
        position: relative;
        top:-20px;
    }   
}

@media only screen and (min-width: 380px) {
    /* not usesd */
    .dag-hero__wrapper{
        height:auto;
    }
    .dag-hero__image{
        top:0px;
    }   
}

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

   Please note: if you change breakpoints here, 
   do the same changes in the Bootstrap files!
   ========================================================================== */

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

    /* */
    .dag-language{
        padding-top:20px;
    }

    /* scale the logo a big larger and ajust the margins */
    .dag-brand__logo{
        width: 250px;
        margin: 20px 15px;
    }
    /* scale the buttons a bit larger */
    .dag-language.nav-pills > li > a{
        padding:8px 10px;
    }


}    

@media only screen and (min-width: 780px) {
    
    /* places the box in the hero image */
    .dag-hero__text{
        width:50%;
        background-color: rgba(0, 103, 127, 1);
        position: absolute;
        right:1em;
        top:1em;
    }
    /* change the margins of the form to get a bit more space between the grouped elements */ 
    .dag-form-signin{
        margin: 30px auto;
    }

}

@media only screen and (min-width: 980px) {
    /* not usesd */
}