/* ==========================================================================
   Include Fonts
   ========================================================================== */
@font-face {
    font-family: 'Trade';
    src: url('fonts/TradeGothicCn18.eot');
    src: url('fonts/TradeGothicCn18.eot') format('embedded-opentype'),
    url('fonts/TradeGothicCn18.woff') format('woff'),
    url('fonts/TradeGothicCn18.ttf') format('truetype'),
    url('fonts/TradeGothicCn18.svg#TradeGothicCn18') format('svg');
}

@font-face {
    font-family: 'TradeBold';
    src: url('fonts/TradeGothicBoldCn20.eot');
    src: url('fonts/TradeGothicBoldCn20.eot') format('embedded-opentype'),
    url('fonts/TradeGothicBoldCn20.woff') format('woff'),
    url('fonts/TradeGothicBoldCn20.ttf') format('truetype'),
    url('fonts/TradeGothicBoldCn20.svg#TradeGothicBoldCn20') format('svg');
}

body{
    font-family: "Arial Narrow", Arial, sans-serif; text-transform: uppercase;
}

.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }

a {
    color: #fff;
    text-decoration: none;
}
a:hover, a:focus {
    color: #ddd;
    text-decoration: none;
}

a.nohover:hover, a.nohover:focus {
    color: #fff;
    text-decoration: none;
}

a.footer {
    color: #000;
    text-decoration: none;
}
a.footer:hover, a:focus {
    color: #666;
    text-decoration: none;
}

a.footer.nohover:hover, a.nohover:focus {
    color: #fff;
    text-decoration: none;
}

[ng-cloak]
{
    display: none !important;
}

.formRow {
    margin-bottom: 15px;
}

/* Select contentFields */
.contentFields div.selector {
    background:#999999;
    color:#fff;
    line-height: 26px;
    height: 26px;
    padding: 0 0 0 10px;
    position: relative;
    overflow: hidden;
    border: none;
    width:100% !important;
    margin: 0px;
    font-size: 16px;
    font-family:'Trade','Oswald', Helvetica, Arial, sans-serif;
}

.contentFields div.selector span {
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    background: url('../../img/rod/ro-toggle-down.png') no-repeat scroll 98% 3px transparent;
    height: 26px;
    color:#fff;
    line-height: 26px;
    padding-right: 30px;
    cursor: pointer;
    width:100% !important;
}

.contentFields div.selector.fixedWidth {
    width: 140px;
}
.contentFields div.selector.fixedWidth span {
    width: 115px;
}

/* -------------- geändert 21.11.2013 */
.contentFields div.selector select {
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    border: none;
    background:  #888;
    position: absolute;
    height: 26px;
    top: 2px;
    left: 0px;
    width:100%;
    font-size: 15px;
    text-transform: uppercase;
    color:#fff;
    font-family:'Trade','Oswald', Helvetica, Arial, sans-serif;
}

.contentFields div.selector.active {
    background-color:#888;
}
.contentFields div.selector.active span {

}
.contentFields div.selector.hover,.contentFields div.selector.focus {

}
.contentFields div.selector.hover span,.contentFields div.selector.focus span {
    background: url('../../img/rod/ro-toggle-down.png') no-repeat scroll 159px 3px transparent;
}
.contentFields div.selector.hover.active, .contentFields div.selector.focus.active {

}
.contentFields div.selector.hover.active span, .contentFields div.selector.focus.active span {
    background: url('../../img/rod/ro-toggle-down.png') no-repeat scroll 159px 3px transparent;
}
.contentFields div.selector.disabled, .contentFields div.selector.disabled.active {
    background-color:#333;
}
.contentFields div.selector.disabled span, .contentFields div.selector.disabled.active span {

}


/* Select strdFields */
.strdFields div.selector {
    background:#999999;
    color:#fff;
    line-height: 25px;
    height: 25px;
    padding: 0 0 0 10px;
    position: relative;
    overflow: hidden;
    border: none;
    width:168px !important;
    margin: 0px;
    font-size: 13px;
    font-family:Arial, sans-serif;
    text-transform: none;
}

.strdFields div.selector span {
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    background: url('../../img/rod/ro-toggle-down.png') no-repeat scroll 140px 3px transparent;
    height: 25px;
    color:#fff;
    line-height: 25px;
    padding-right: 24px;
    cursor: pointer;
    width:144px !important;
    text-transform: none;
}

.strdFields div.selector.fixedWidth {
    width: 140px;
}
.strdFields div.selector.fixedWidth span {
    width: 115px;
}
.strdFields div.selector select {
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    border: none;
    background:  #888 !important;
    position: absolute;
    height: 25px;
    top: 2px;
    left: 0px;
    width:165px;
    font-size: 13px;
    color:#fff;
    font-family: Arial, sans-serif;
}

.strdFields div.selector.active {
    background-color:#888;
}
.strdFields  div.selector.active span {

}
.strdFields div.selector.hover,.strdFields  div.selector.focus {

}
.strdFields  div.selector.hover span,.strdFields  div.selector.focus span {
    background: url('../../img/rod/ro-toggle-down.png') no-repeat scroll 140px 3px transparent;
}
.strdFields  div.selector.hover.active, .strdFields  div.selector.focus.active {

}
.strdFields  div.selector.hover.active span, .strdFields  div.selector.focus.active span {
    background: url('../../img/rod/ro-toggle-down.png') no-repeat scroll 140px 3px transparent;
}
.strdFields  div.selector.disabled, .strdFields  div.selector.disabled.active {
    background-color:#333;
}
.strdFields  div.selector.disabled span, .strdFields  div.selector.disabled.active span {

}

.loginButton {
    font-family:'TradeBold','Oswald', Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    outline: none;
    width: 120px;
    height: 32px;
    line-height: 32px;
    border:1px solid #b8b8b8;
    background-color: #000;
    color: #fff;
    font-size: 20px;
}

.loginButton:hover {
    background-color: #242424;
    color: #000;
}

.button, .resultsWerbemittel .printerPopup .button {
    background: url("../../img/rod/ro-arrow-right.png") no-repeat scroll right center #000;
    color: #FFFFFF !important;
    display: inline-block;
    font-family:Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    height: auto;
    margin: 0;
    min-width: 120px;
    outline: medium none;
    padding: 3px 20px 3px 10px;
    text-align: left;
    text-decoration: none;
    width: auto;
    max-width: 400px;
    border:none;
    border-right: 8px solid #242424;
}

.button:hover{
    background-color: #000;
    border-right-color:#000;
}

a.button{
    cursor: pointer;
}

.normalcase{
    text-transform: none;
}

.nosessiontop{
    min-height: 100px;
    background-color: #fff;
    color: #000;
    border-bottom: solid 1px #000;
}

.sessiontop{
    min-height: 50px;
    background-color: #000;
    color: #ffffff;
    background-position: 10px 2px;
    background-repeat: no-repeat;
}
.sessiontopnav{
    min-height: 85px;
    background-color: #fff;
    color: #000;
    font-family:'TradeBold','Oswald', Helvetica, Arial, sans-serif;
}

.rodnav{
    min-height: 85px;
    padding-top: 31px;
}

@media screen and (max-width: 767px) {
    .rodlogo{
        background-image: url("../../img/tg-wp-logo.png");
        background-repeat: no-repeat;
        background-position: 90% 10px;
        background-size: auto 65px;
        min-height: 65px;
    }
}

@media screen and (min-width: 768px) {
    .rodlogo{
        background-image: url("../../img/tg-wp-logo.png");
        background-repeat: no-repeat;
        background-position: 98% 10px;
        background-size: auto 65px;
        min-height: 65px;
    }
}

@media screen and (max-width: 767px) {
    .itemimage{
        float: none;
        text-align: center;
        width: 205px;
    }
}

@media screen and (min-width: 768px) {
    .itemimage{
        float: left;
        width: 205px;
    }
}

@media screen and (max-width: 767px) {
    .saleitemborder{
        border-bottom: 1px solid green;
    }
}

@media screen and (min-width: 768px) {
    .saleitemborder{
        border: none;
    }
}

.sessiontopnav a {
    color: #000;
    font-size: 20px;
}
.sessiontopnav a:hover {
    color: #000;
    font-size: 20px;
}

.sessiontopnav .navbar-nav > li > a {
    padding-bottom: 18px;
    padding-top: 15px;
}

.sessiontopnav .navbar-nav > li.active {
    background-color: #000;
    color:#ffffff;
}

.sessiontopnav .navbar-nav > li.active {
    background-color: #000;
    color:#ffffff;
}

.sessiontopnav .navbar-nav > li.active a {
    color: #fff;
}
.sessiontopnav .nolink{
    display: block;
    padding: 12px 15px 14px 15px;
    font-size: 20px;
    cursor: default;
}

.topcustomer{
    padding-top: 20px;
    font-size: larger;
}

.toplabel{
    font-family: "Trade","Oswald",Helvetica,Arial,sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    margin-left: 2px;
    margin-bottom: 5px;
}

.catalog-input-selector{
    margin-bottom: 10px;
}

.catalog-input-selector .button{
    background: url("../../img/rod/ro-arrow-right.png") no-repeat scroll 157px center #6d6d6d;
    text-align: left !important;
    background-color: #6d6d6d;
    border: medium none;
    color: #fff !important;
    font-family: "TradeBold","Oswald",Helvetica,Arial,sans-serif;
    font-size: 16px;
    font-weight: normal;
    height: 30px;
    outline: medium none;
    text-align: left;
    text-transform: uppercase;
    width: 180px;
}

.framecontainer{
    overflow: scroll;
    height: 600px;
    padding: 5px;
    position: relative;
    z-index: 0;
}

.framerow{
    padding: 5px 0 5px 0;
    width: 100%;
}
.framerow:nth-of-type(odd) {
    background: #eeeeff;
}

.frameimage{
    border: 1px solid #F5F5F5;
    max-width: 100%;
    max-height: 100%;
}

.variantrow{
    border-bottom: inset #eaeaea;
}
.variantcartcontrol{
    padding-top: 5px;
}
.form-control.resetable{
    width:80%;
    float: left;
}

.panelheadline{
    padding: 10px;
    background-color: #000;
    color: #ffffff;
    font-size: large;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 100%;
}
.panelsearchheadline{
    float: left;
    padding: 10px;
    background-color: #000;
    color: #ffffff;
    font-size: large;
    width: 50%;
}

@media screen and (max-width: 767px) {
    .panelsearch{
        padding: 10px;
        background-color: #f5f5f5;;
        font-size: large;
        float: left;
        height:48px;
    }
}

@media screen and (min-width: 768px) {
    .panelsearch{
        padding: 10px;
        background-color: #f5f5f5;;
        font-size: large;
        float: left;
        width: 40%;
        height:48px;
    }
}


.catalogueloader{
    position: absolute;
    padding: 100px 0;
    text-align: center;
    height: 100%;
    width: 100%;
    background:#666;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    opacity:.6;
    z-index: 100;
    color: white;
    font-size: 50px;
    font-weight: bold;
    display: table-cell;
    vertical-align: middle;
}

.clickme{
    cursor: pointer;
    font-size: larger;
}

.cartdownload{
    cursor: pointer;
}

.cart-head-form input.ngvalidate.ng-invalid{
    border-color: #f22928;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(233, 45, 48, 0.60);
    outline: 0 none;
}

.account-password-form input.ngvalidate.ng-invalid{
    border-color: #f22928;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(233, 45, 48, 0.60);
    outline: 0 none;
}

.cartheadtext {
    font-weight: 700;
    padding-top: 7px;
}


.carttable{
    width: 100%;
}

.carttable tbody {
    height: 300px;
    overflow: auto;
}

.carttable td {
    padding: 0 15px;
}
.cartpos {
    padding: 4px 8px !important;
}

.cartheader{
    background-color: #000;
    color: #ffffff;
    height: 30px;
    border: 1px solid #ffffff;
}
.cartheader th{
    border: 1px solid #ffffff;
    padding: 2px 10px;
}

.cartfooter{
    font-size: larger;
    font-weight: bold;
    border-top: 1px solid grey;
}

.orderheader{
    display: table-cell;
    height: 3em;
}

.orderheader div{
    background-color: #000;
    color: white;
    border-right: 1px solid white;
    min-height: 3em;
    margin: 0 auto;
}
.orderline{
    font-size: larger;
    min-height: 2em;
}
.orderline div{
    padding-top: 5px;
    padding-bottom: 5px;
}
.orderlines:nth-of-type(odd) {
    background: #eeeeff;
}


.homeimage{
    max-width: 100%;
    height: auto;
}

.rfooter{
    min-height: 50px;
    position: fixed;
    background-color: #ffffff;
    bottom: 0;
    width:100%;
    padding-top: 15px;
    z-index: 1000;
}

.rfootersectionbottom{
    min-height: 70px;
    background-color: #000;
    color: #ffffff;
    padding-top: 10px;
    padding-left: 1%;
    padding-right: 1%;
}

.rfootersectiontop{
    text-align: center;
}

.col-small-padding{
    padding-right: 5px; !important;
    padding-left: 5px; !important;
}

ul.enlarge{
    list-style-type:none; /*remove the bullet point*/
    margin-left:-30px;
    height: 123px;
}
ul.enlarge li{
    display:inline-block; /*places the images in a line*/
    position: relative;
    z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
    margin:5px 0 0 5px;
}
ul.enlarge img{
    background-color:#d9dadb;
    padding: 1px;
}
ul.enlarge span{
    position:absolute;
    left: -9999px;
    background-color:#d9dadb;
    padding: 1px;
    font-family: 'Droid Sans', sans-serif;
    font-size:.9em;
    text-align: center;
    color: #495a62;
}
ul.enlarge li:hover{
    z-index: 50;
    cursor:pointer;
}
ul.enlarge span img{
    padding:2px;
    background:#ccc;
}
ul.enlarge li:hover span{
    top: -5px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
    left: -5px; /*distance from the left of the thumbnail to the left of the popup image*/
}
ul.enlarge li:hover:nth-child(2) span{
    left: -100px;
}
ul.enlarge li:hover:nth-child(3) span{
    left: -200px;
}
/**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
ul.enlarge img, ul.enlarge span{
    behavior: url(pie/PIE.htc);
}

.center-text {
    text-align: center;
}

.saleitemtile {
    min-height: 300px;
    height: 300px;
    position: relative;
}

.price-action {
    position: absolute;
    bottom: 10px;
    text-align: center;
    width: 110%;
}

.price-info {
    background-color: #000;
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    width: 60%;
    margin: 0 auto;
}

.info-right {
    position: absolute;
    right: 0;
    text-transform: none;
}

.cart-badge {
    position: relative;
    top: -14px;
    left: -14px;
}