/*
    Document   : main
    Created on : 31.07.2012, 09:42:00
    Author     : Michael Geilenkirchen
    Project    : BDVZ
    Description: Tablet Vertical

*/

/*
*Basics
**/
body{}

img{
    max-width: 100%;
    height: auto !important ;
}

.tweet > .right {
    background: none repeat scroll 0 0 #fff;
    border: 10px solid #5092c9;
    max-width: 83%;
    width: 100%;
}

.newsgroup .event {
    float: right;
    position: relative;
    right: -20px;
    top: 0;
    margin-top: 0;
}



.calendarcontent > .event_teaser {
    width: 100%;
}

.calendarcontent > .event_teaser .event_teaser_toolbar{
    width: 100%;
}

.calendarcontent > .event_teaser .event_teaser_toolbar .left{
    width:68%;
}


#topmenu > .relative{
    width:175px;
}

/*Content*/
#content{
    top:300px;
}

#logo{
    top:20px;
    left:2%;
}
#topsearch{}
#topsearch form{}
#topsearch form div.right{
    float:right;
}
/*#footer{
    left:0;
}*/
/*#navigation{
    display:none;
}
#navigation_mini{
    display:block;
    position:absolute;
    top:200px;
    left:2%;
    width:94%;
}*/
#navigation_mini select{
    padding:8px 5px;
    width:100%;
}
#content{
    top:265px;
}

/*
*Sizes
**/
/*.w960,
.w940,
.w620,
.w300{
    width:94%;
    margin-left:2% !important;
}*/



/*Background*/
#background{
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:-500;
    background:no-repeat center center;
    background-size:cover;
    overflow:hidden;
}
#background img{
    /*display:none;*/
}

#zv_onlinebewertung_fields input[type=text], #zv_onlinebewertung_fields select {
    width: 100%;
}

#zv_onlinebewertung_fields .input_fields{
    margin-left: 50%;
}

#zv_onlinebewertung_fields label{
    width: 50%;
}


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


}

@media only screen and (min-width : 768px) and (max-width : 1024px) {

    #navigation_mini ul{display: none;}

}



@media only screen and (min-width : 768px) and (max-width : 979px) {


    .w940{
        width:95%;
    }

    .w300{
        width: 32%;
    }
    .w310{
        width: 100%;
    }

    .w360{
        width: 100%;
    }

    .w620{
        width: 65%;
    }

    .mL20 {
        margin-left: 0;
    }

    .box > div > .right {
        float: left;
    }

    .box > .detail > .right{
        float: right;
    }



    #footer{
        left: 2.5%;
       margin-left: 0;
    }

    .ico_hint{top: -75px;}
    .newsgroup.publication .ico_hint{top:-10px;}

    .marginal_input > input{width: 63%}

/*    .tweet > .right{
        max-width:390px;
    }*/

    .publication .imgwrap{width:100% !important;}

    #navigation > ul > li > a{
        padding: 5px 30px 5px 10px;
    }

    #profilAccordions .accordion_tab{
        height: 40px;
        padding: 5px 35px 0 20px;
        background-position: 100% 10px;
    }

    #profilAccordions .accordion_tab.active, 
    #profilAccordions .accordion_tab:hover{
        height: 40px;
        padding: 5px 35px 0 20px;
         background-position: 100% -23px;
    }

    form button.right{
        float:left;
        margin-top:10px;
    }

    .wf-form div {
        width: 205px !important;
    }

    .wf-form .button-bar{
        width: 100% !important;
    }

    .wf-form button.right{
        float: right;
    }

    #workflow .morer{
        margin-top:0;
        float: right;
    }
    #workflow .wf-adresse  .morer{
        float: left;
    }

    .workflow-progress ul.big li,
    .workflow-progress ul.big li#zusammenfassung{
        width: 45%;
        margin-right: 5px;
        margin-top: 5px;
    }
    #programmauswahl,
    #rechnungsadresse_der_begleitung,
    .workflow-progress #kasse.prospective,
    .workflow-progress ul.big li.prospectiv,
    .workflow-progress ul.big li#abschluss,
    .workflow-progress ul.big li#benutzerdaten,
    .workflow-progress ul.big li#passwort_vergessen{
        margin-right:0;
    }
    .workflow-progress ul.big li.mt{
        margin-top: 5px;
    }

    .warenkorb-buttons button.next{
        font-size: 13px;
    }

    .roundabout{width:366px;}

    .roundabout li{
        width: 365px;
    }

    .roundabout{
        left: -10px;
    }
    .leftTitel{width: 44% !important;}

    .rightBackBuy{ width: 56% !important;}

    .workflow-progress ul.small li{width:95%;}

    #footer {
        bottom: 0;
        height: 42px;
        left: 2.5%;
        z-index: 1000;
        margin-left: 0;
    }

    .event {
        margin-left: 117px;
    }

    .profiles{
        width: 366px;
        margin: 0 auto;
    }

    .profiles .mR{
        margin-right: 0px;
    }
    .profiles .mL{
        margin-left:0;
    }


    .profiles > .profile {
        margin-right: 5px;
        margin-left: 5px;
    }

    .dottedBorder{
        display: none;
    }

}

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

    .mR {
        margin-right: 7px;
    }
    .mL {
        margin-left: 7px;
    }

}


@media only screen and (max-width : 767px){
    #topmenu {
        height: 30px;
        left: 2%;
        right: 0;
        top: 140px;
        width: auto;
    }

    #navigation{
        display:none;
    }


    #mini_nav_ico{
        display: block;
        position: absolute;
        padding:10px;
        background: #3a3a3b;
        right: 0;
        top: 200px;
    }
    #mini_nav_ico:hover{
        background-color: #5092C9;
    }

    #navigation_mini{
        display:none;
        position:absolute;
            top: 243px;
            left: 0;
            width: 100%;
    }

    span.navico.fst {
    margin-top: 0;
}
span.navico {
    width: 30px;
    background-color: #fff;
    height: 3px;
    position: relative;
    margin-top: 7px;
    display: block;
}

#navigation_mini > ul > li > a {
    display: block;
    color: #FFF;
    background-color: #5092C9;
    padding-left: 14PX;
    margin-top: 3px;
}



    .btn_more.b6 {
        float: right;
    }

    #content {
        top: 300px;
    }

    .w940{
        width:95%;
    }

    .w620 {
        width: 100%;
    }

     /*Marginalspalte ausblenden*/
    .w300.left{
        display:none;
    }

    .eventdetail_referent .w300.left{
        display: inline-block;
    }

        /*KALENDER STARTSEITE*/
    .calendarcontent > .event_teaser .event_day{
        width:27px;
    }

    .calendarcontent > .event_teaser .event_dates ul li{
        margin: 0 0 0 11px;
    }

    .calendarcontent > .event_teaser .event_teaser_toolbar .left{
        width: 133px;
    }

    .calendarcontent > .event_teaser .event_dates{width: 200px;}

    .event{margin-left:61%;}

    #footer {
        bottom: 0;
        height: 42px;
        left: 2.5%;
        z-index: 1000;
        margin-left: 0;
    }

    .profiles{
        width: 559px;
        margin: 0 auto;
    }

    .profiles .mR{
        margin-right: 20px;
    }





}


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



    .right{
        float:left;
    }

    .tweet > .right, 
    .ico_email .right{
        float: right;
    }

    #footer > .right {
        padding: 10px 10px 0 0;
        float: right;
    }
}

@media only screen and (max-width: 662px){


    .profiles{
        width: 366px;
        margin: 0 auto;
    }

    

    .profiles > .profile > .profilepicture {
        margin: 10px auto;
    }

    .profiles .mL {
     margin-left: 0px; 
    }

    .profiles .mR{
        margin-right: 0px;
    }

    .profiles > .profile {
        margin-right: 5px;
        margin-left: 5px;
    }

}


@media only screen and (max-width: 652px){

    .mL20 {
        margin-left: 0;
    }

    .w360{width: 0100%}
    #footer{
        height: 75px;
    }

    #footer > .right {
    padding: 10px 10px 0 0; 
    float: right;
}

}


@media only screen and (max-width : 555px){

    #footer{height: 74px;}

    .workflow-progress ul.big li span.arrow{
        z-index: 9;
    }
    #footer > .right {
        float: right;
        padding: 10px 20px 0 0;
    }

}


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

   .tweet > .right{max-width: 73%;} 

   .w360{
    width: 100%;
   }

   .profiles{
        width: auto;
        margin: 0 auto;
    }

    .profiles > .profile {
        width: 100%;
    }

    .profiles .mR{
        margin-right: 0px;
    }

    .profiles .mL{
        margin-left: 0px;
    }

    .btn_more.b6 {
        margin: 10px -20px 0 50px;
    }

    .box .mT.mB.left > .left{
        display: none;
    }



}

@media only screen and (max-width : 480px){
    .w310 {
        width: auto;
    }

    #topsearch{
        width: 250px;
        margin-bottom: 10px;
    }

    #topmenu > .relative {
        left: 0;
        top: 0;
    }

    #navigation_mini{
        top: 240px;
    }

    #content {
        top: 330px;
        padding-bottom: 80px;
    }
    #footer > .right {
        padding: 10px 10px 0 0; 
        float: right;
    }
      .left.dottedBorder{
        display: none;
    }

        .roundabout, .roundabout li{
        width: 290px;
    }

    .roundabout{
        left: -13px;
    }
    .addicons.left {
        width: 100%;
        display: inline-block;
    }

    .workflow-progress ul.big li {       
        margin-bottom: 10px;
        width: 110px;
    }

    .workflow-progress ul.big li.mt {
        margin-left: 20px;
        margin-top:0;
    }
    .workflow-progress ul.small li{
        width: 96%;
    }
    .publication .productprice {
        width: auto;
    }

}

@media only screen and (max-width: 320px){



    #zv_onlinebewertung_fields .input_fields {
        margin-left: 0;
    }

    #zv_onlinebewertung_fields label {
        width: 100%;
    }


    .tweet > .right{max-width: 73%;} 



    .w360 {
        width: auto;
        min-width: 265px;
    }

    .w310{width: auto;}

    .w440 {
       width: 100%;
    }

    .mL20 {
        margin-left: 0;
    }
/*    .right {
        float: none;
    }*/

    /*.ico_hint{top:-79px;}*/

    .box div .right.relative p{/*margin-bottom: 0;*/}

    #footer{
        left: 2.5%;
        margin-left: 0;
         height: 80px;
    }

    .newsgroup.publication .left{
        float: none;
    }

    .newsgroup.publication .right{
        float:left;
    }

    .detail .producttitle{
        font-size:32px !important;
    }

    .dottedBorder{display: none;}

    #cart_lightbox{
        height: auto !important;
        left: 0 !important;
        width: auto !important;
    }

    #cart_lightbox .btn_more a{
        padding: 5px 30px 0 5px;
    }

    #cart_lightbox .btn_more.b6{
        width: 160px !important;
        float: right;
    }

    .warenkorb-buttons .btn_more.left{height:40px;}

    #kasse{margin-right:0;}

    .roundabout, .roundabout li{
        width: 290px;
    }

    .roundabout{
        left: -13px;
    }

    #workflow input[type="text"]{
        width: 130px;
    }

    .standardForm tr td input[type="text"], 
    .standardForm tr td input[type="password"], 
    .standardForm tr td select,
    .ec_login_formular_fields,
    .ec_login_formular_fields_error{
        width:140px;
    }

    .ec_login_formular_fields_button{display: block;}

    a.ec_login_formular_fields_button{
        width: 140px;
        height: 20px;
        margin-top: 10px;
    } 

    #angemeldet{margin-right:0;}

    .workflow-progress ul.big li{
        width: 93%;
    }

    .workflow-progress ul.big li.mt,
    .workflow-progress ul.big li.prospective,
    .workflow-progress ul.big li.act,
    .workflow-progress ul.big li.done{
        margin-top: 5px;
    }

    .workflow-progress ul.big li.act span.arrow{display: none;}

    pre{white-space: pre-wrap;}

    .publication .productprice{
        width: auto;
    }

   .box .btn_more.b6{
        margin: 10px -20px 10px 50px;
    }

    #captcha{
        width:175px;
    }
       .profiles{
        width: auto;
        margin: 0 auto;
    }

    .profiles > .profile {
        width: 100%;
    }

    .profiles .mR{
        margin-right: 0px;
    }

    .profiles .mL{
        margin-left: 0px;
    }

    .box .detail > .title{
        font-size: 18px;
        margin: 10px 0 20px 0;
    }
    .box .detail > .date, 
    .box .detail > .category{
        font-size: 16px;
    }
    .addicons.left {
        width: 100%;
        display: inline-block;
    }

       

    .workflow-progress ul.big li span.arrow{
        z-index: 9;
    }
        .publication .productprice {
        width: auto;
    }

}