/** *************************************************************************************/
/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v30-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v30-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}


/** blau: #333366 */

/** orange: #FFAC00 */

a {
    text-decoration: none
}

.adminView:before {
    position:    absolute;
    padding:     3px;
    background:  #990000;
    content:     "Achtung inaktiv!";
    color:       #FFF;
    border:      1px solid #FFF;
    font-weight: bold;
    margin-left: 41px;
    font-family: 'Roboto', sans-serif;
}

img {
    border:  0;
    outline: 0;
}

body {
    margin:           0;
    padding:          0;
    background-color: #EDEDED;
    font-size:        13px;
    font-family:      'Roboto', Helvetica, sans-serif;
    line-height:      160%;
}

td {
    vertical-align: top;
}

p {
    margin-top:    0;
    margin-bottom: 20px;
}

#container {
    width:      1024px;
    height:     auto;
    margin:     0 auto 3em;
    position:   relative;
    box-shadow: 0 0 20px rgba(22, 36, 48, .5);
}

#header {
    background: #FFF;
    width:      100%;
    height:     auto;
}

.web2print-portal-logo {
    padding: 20px 0 20px 20px;
    outline: 0;
    width:   500px;
}

#wrapper {
    border:     0 solid;
    width:      100%;
    height:     auto;
    background: #FFF;
}

#container_content {
    border:     0 solid #FF6600;
    width:      100%;
    height:     auto;
    min-height: 500px;
    margin:     0 auto;
    position:   relative;
}

#adminBack {
    position:           fixed;
    top:                -40px;
    left:               20px;
    width:              150px;
    z-index:            999;
    height:             auto;
    background:         #B80016;
    border:             1px dashed #FFF;
    outline:            5px solid #B80016;
    text-align:         center;
    font-size:          12px;
    text-transform:     uppercase;
    -webkit-transition: all .3s;
    -moz-transition:    all .3s;
    -ms-transition:     all .3s;
    -o-transition:      all .3s;
    transition:         all .3s;
    box-shadow:         0 10px 10px rgba(0, 0, 0, .2);
}

#adminBack:hover {
    top:        -10px;
    left:       20px;
    box-shadow: 0 20px 20px rgba(0, 0, 0, .4);
}

#adminBack a {
    display:         block;
    padding:         20px;
    text-decoration: none;
    color:           #FFF;
}

#leftContent {
    width:  650px;
    height: auto;
    float:  left;
    border: 0 solid;
}

.rechtHinweis {
    color: #888;
}

.web2print-portal-logo {
    padding: 20px 0 20px 20px;
    outline: 0;
    width:   280px;
}

#userMenue {
    float:        right;
    color:        #0000B4;
    margin-right: 20px;
    font-size:    15px;
}

#userMenue ul {
    margin:  5px 0 0;
    padding: 0;
}

#userMenue li {
    list-style-type: none;
    display:         inline-block;
    margin-left:     20px;
}

#userMenue a {
    color:           #FFF;
    text-decoration: none;
}

#userMenue a:hover {
    text-decoration: underline;
}

#headerSub {
    background: #B80016;
    padding:    8px 0;
}

/** *************************************************************************************/

#left_content {
    width:      250px;
    height:     auto;
    min-height: 500px;
    float:      left;
    border:     0 solid;
}

/** *************************************************************************************/

#right_content {
    border:       0 solid;
    width:        680px;
    height:       auto;
    min-height:   400px;
    float:        right;
    margin-right: 10px;
    padding:      15px 10px 50px 10px;
}

#right_content h2 {
    width:       674px;
    font-size:   23px;
    line-height: 120%;
    color:       #333;
    font-weight: 400;
    margin:      10px 0 40px 0;
    padding:     0 0 0 0;
}

#right_content h3 {
    font-size:   18px;
    font-weight: 400;
    color:       #333;
}

/** *************************************************************************************/

#footer {
    background: #000;
    width:      100%;
    position:   relative;
    padding:    10px 0;
    text-align: center;
}

#footer ul {
    margin:  0;
    padding: 0;
}

#footer ul li {
    display:         inline-block;
    padding:         10px;
    list-style-type: none;
}

#footer ul li a {
    color:     #FFF;
    font-size: 14px;
}

#footer ul li a:hover {
    color:           #FFF;
    text-decoration: underline;
}

/** *************************************************************************************/

#noscript {
    position:    fixed;
    top:         0;
    left:        0;
    width:       100%;
    font-size:   14px;
    font-weight: bold;
}

/** user men� ************/

.sub_menu {
    width:            150px;
    height:           auto;
    background-color: #FFF;
    padding:          1px 1px 0 1px;
    margin:           20px 0 0 20px;
    border:           0 solid #888;
}

.sub_menu h2 {
    font-weight: bold;
    color:       #B80016;
    margin:      0;
    padding:     8px 0 8px 0;
}

.sub_menu ul {
    list-style-type: none;
    margin:          1px 0 0 0;
    padding:         0;
}

.sub_menu ul li {
    padding-top:    0;
    padding-bottom: 1px;
}

.sub_menu ul li a {
    color:           #808080;
    display:         block;
    padding:         2px 0;
    line-height:     15px;
    padding-left:    0;
    text-decoration: none;
    outline:         0;
}

.sub_menu .active a {
    color:   #000;
    outline: 0;
}

.sub_menu ul li a:hover {
    text-decoration: underline;
}

/** admin menu (slider) *****************/

.admin_sub_menu {
    width:            240px;
    height:           auto;
    min-height:       180px;
    padding:          0;
    margin:           15px auto 15px 20px;
    border:           1px solid #888;
    background-color: #FFFFFF;
}

.admin_sub_menu h2 {
    font-size:     14px;
    font-weight:   bold;
    background:    #333366;
    color:         #EEEEEE;
    margin:        0;
    padding:       8px 0 8px 0;
    text-align:    center;
    text-shadow:   0 0 2px #000;
    border:        1px solid #FFF;
    border-bottom: 0;
}

.menu_container {
    width:         238px;
    margin:        1px;
    margin-bottom: 20px;
}

ul.menu,
ul.menu ul {
    list-style-type: none;
    margin:          0;
    padding:         0;
    width:           100%;
}

ul.menu a {
    display:         block;
    text-decoration: none;
    text-shadow:     0 1px 2px #000;
}

ul.menu li {
    margin-top: 1px;
}

ul.menu li a {
    background: #FFA200;
    color:      #FFF;
    padding:    0.5em;
}

ul.menu li a:hover {
    background: #777;
}

ul.menu li ul li a {
    background:   #CCC;
    color:        #000;
    padding-left: 20px;
    text-shadow:  none;
}

ul.menu li ul li a:hover {
    background:   #AAA;
    border-left:  5px #555 solid;
    padding-left: 15px;
}

.menu_container .active {
    background:  #AAA;
    border-left: 5px #555 solid;
}

/** ************/

.shop_cart {
    width:       278px;
    height:      auto;
    min-height:  80px;
    padding:     8px 0 10px 0;
    margin:      15px 0 0 0;
    background:  #ECECEC;
    border:      1px solid #CCCCCC;
    border-left: none;
}

.shop_cart p {
    padding: 5px 0 0 25px;
}

.shop_cart h2 {
    font-weight: bold;
    color:       #B80016;
    margin:      0;
    padding:     8px 0 0 25px;
}

.shop_cart a {
    font-weight:     bold;
    color:           #000000;
    text-decoration: none;
    outline:         0;
}

.shop_cart a:hover {
    color:           #FFF;
    text-decoration: none;
    outline:         0;
}

/** allgemeine klassen *************************************************************************************/

.shadow {
    text-shadow: 0 1px 0 #FFF, 0 -1px 0 #000;
}

.jung_yellow {
    color: #FFAC00;
}

.color1 {
    color: #B80016;
}

.color2 {
    color:       #FFF;
    font-weight: bold;
}

.color3 {
    color: #CE0000;
}

.break,
.clear {
    clear: both;
}

/*
#right_content a {color: #000; text-decoration: none; outline: 0; }

#right_content a:hover {color: #FFAC00; text-decoration: underline; outline: 0; }
*/

.priceTable {
    width: 100%;
}

/** formular user data *************************************************************************************/

.input_text,
.input_text_1,
.input_text_2,
.input_ddl {
    border:           1px solid #AAA;
    background-color: #FFFFFF;
    color:            #000000;
    font-family:      'Roboto', Arial, Helvetica, sans-serif;
    font-size:        13px;
    padding:          6px;
    display:          inline-block;
}

select {
    background-image:    url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20fill%3D%22%23333%22%20%0A%09%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%22-261%20145.2%2024%2024%22%20style%3D%22enable-background%3Anew%20-261%20145.2%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20d%3D%22M-245.3%2C156.1l-3.6-6.5l-3.7%2C6.5%20M-252.7%2C159l3.7%2C6.5l3.6-6.5%22%2F%3E%0A%3C%2Fsvg%3E");
    background-repeat:   no-repeat;
    background-position: right center;
    -webkit-appearance:  none;
    -moz-appearance:     none;
    appearance:          none;
    padding-right:       25px;
    font-weight:         400;
}

.input_text {
    width: 210px;
}

.input_text_1 {
    width:        140px;
    margin-right: 4px;
}

.input_text_2 {
    width:        50px;
    margin-right: 4px;
}

.input_ddl {
    width: 225px;
}

ul {
    list-style-type: none;
    padding-left:    10px;
}

ul.list {
    list-style-type: square;
}

ul.list li {
    margin-bottom: 15px;
}

/** formular kategorien *************************************************************************************/

.katLabel {
    width:   150px;
    display: block;
    float:   left;
}

.katClear {
    clear: both;
}

/** anmeldemaske *************************************************************************************/

#user_login {
    width:      480px;
    height:     auto;
    margin:     30px 0 0 0;
    text-align: left;
}

#user_login .login_desc {
    width:       100px;
    text-align:  left;
    font-weight: bold;
}

#user_login .button {
    border:           1px solid #333333;
    background-color: #CACBCF;
    font-size:        10px;
    font-weight:      bold;
}

#user_login a {
    color:           #6F6F6B;
    text-decoration: none;
}

#user_login a:hover {
    color:           #A7ADA8;
    text-decoration: underline;
}

.login_field {
    border:  1px solid #AAA;
    padding: 6px;
    width:   250px;
}

.login_field:hover {
    border: 1px solid #888;
}

.login_field:focus {
    border: 1px solid #333;
}

/** logo verwaltung user *************************************************************************************/

.logo_container {
    width:            auto;
    height:           auto;
    background-color: #DDD;
    border:           1px solid #FFF;
    margin:           10px 0 10px 0;
    padding:          5px;
}

.error_output {
    margin:      10px 0;
    font-weight: bold;
    color:       #FFAC00;
    clear:       both;
}

.logo_options {
    float: left;
    width: 150px;
}

.logo_picture {
    width:        280px;
    float:        left;
    margin:       0 00px 0 0;
    padding:      5px 30px 0 30px;
    border-left:  1px dashed #FFF;
    border-right: 1px dashed #FFF;
}

.pdf_download {
    background:   url("images/pdf.gif") no-repeat 0 0;
    width:        19px;
    height:       24px;
    padding-left: 20px;
    margin-top:   5px;
    padding-top:  1px;
}

.pdf_download a {
    color: #333
}

.pdf_download a:hover {
    text-decoration: none;
    outline:         0;
    color:           #FFAC00;
}

#logo_upload {}

/** formular admin prospekt anlegen ************************************************************************************************************/

.td_description {
    vertical-align: top;
}

.td_content {}

/** admin prospekt ausgabe tabelle ************************************************************************************************************/

.table_head {
    font-weight: 400;
    font-size:   15px;
    color:       #FFF;
    padding:     6px;
    background:  #888;
}

.prospekt_td {
    vertical-align: top;
    padding:        4px 5px;
}

.prospekt_td a.actionIconLink {
    color:       #333;
    display:     inline-block;
    margin-left: 8px;
    font-size:   16px;
}

.prospekt_td a.actionIconLink:hover {
    color: #B80016;
}

a.tableLink {
    color: #B80016;
}

a.tableLink:hover {
    color: #333;
}

tr.change_td_back:nth-of-type(even) {
    background-color: #F1F1F1;
}

tr.change_td_back:nth-of-type(odd) {
    background-color: #FBFBFB;
}

tr.change_td_back:hover {
    background-color: rgba(180, 214, 255, 0.34);
}

#right_content .table_head a {
    color:           #FFF;
    text-decoration: none;
    outline:         0;
}

#right_content .table_head a:hover {
    color:           #B80016;
    text-decoration: none;
    outline:         0;
}

/** user sieht eindruck in dem prospekt ************************************************************************************************************/

#vorschau_text_vs {
    width:        360px;
    height:       auto;
    float:        right;
    margin-right: 0;
    font-weight:  bold;
    color:        #333333;
}

#working_vs {
    display:    none;
    width:      230px;
    height:     252px;
    background: url("images/ajax-loader.gif") no-repeat 75px 110px;
    float:      left;
}

#eindruck_ready_vs {
    width:  230px;
    height: auto;
}

#vorschau_text_rs {
    width:        360px;
    height:       auto;
    float:        right;
    margin-right: 0;
    font-weight:  bold;
    color:        #333333;
}

#working_rs {
    /*display: none;*/
    width:      230px;
    height:     252px;
    background: url("images/ajax-loader.gif") no-repeat 75px 110px;
    float:      left;
}

#eindruck_ready_rs {
    width:  230px;
    height: auto;
}

#generate_eindruck {
    z-index:     999;
    position:    absolute;
    top:         30px;
    left:        140px;
    display:     none;
    text-align:  center;
    padding-top: 110px;
    width:       600px;
    height:      290px;
    background:  url("images/loading.png") no-repeat center center;
}

#logo_upload_admin {
    z-index:     999;
    position:    absolute;
    bottom:      50px;
    left:        140px;
    display:     none;
    text-align:  center;
    padding-top: 110px;
    width:       600px;
    height:      290px;
    background:  url("images/loading.png") no-repeat center center;
}

/** bestellung aufgeben ************************************************************************************************************/

#lieferanschrift {
    display: none;
}

/** suchmaske ************************************************************************************************************/

#userSearch {
    margin: 0 0 0 20px;
    float:  left;
}

#userSearch form {
    width:       300px;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size:   12px;
    color:       #000;
}

#userSearch .input {
    width:       200px;
    margin:      0;
    border:      1px solid #FFF;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size:   14px;
    color:       #333333;
    float:       left;
    padding:     6px;
    background:  #FFF;
}

#userSearch button {
    cursor:      pointer;
    width:       auto;
    background:  #888;
    padding:     6px 10px;
    outline:     0;
    color:       #FFF;
    font-weight: 400;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    border:      1px solid #888888;
    font-size:   14px;
}

#userSearch button:hover {
    background: #B80016;
    color:      #FFF;
    border:     1px dashed #FFF;
}

/** mitteilungen ausgeben ************************************************************************************************************/

.ok {
    width:      100%;
    height:     auto;
    border:     1px solid #16B000;
    background: url("images/output_ok.png") no-repeat 10px center #D5FFCE;
    margin:     0 auto 10px auto;
}

.error {
    width:      100%;
    height:     auto;
    border:     1px solid #FF0000;
    background: url("images/output_error.png") no-repeat 10px center #FFD5D5;
    margin:     0 auto 10px auto;
}

.info {
    width:      100%;
    height:     auto;
    border:     1px solid #F1A901;
    background: url("images/output_info.png") no-repeat 10px center #FFEBBB;
    margin:     0 auto 10px auto;
}

.ok ul,
.error ul,
.info ul {
    list-style-type: none;
}

.ok li,
.error li,
.info li {
    padding-left: 40px;
    color:        #000000;
}

.message {
    width:            640px;
    height:           auto;
    background-color: #EEE;
    padding:          10px;
    border:           1px solid #CCC;
}

/** blätterfunktion *******************************************************************************************************************/

#right_content .pagination {
    margin-top: 30px;
}

#right_content .pagination .seiten_anzeige {
    margin-right: 12px;
}

#right_content .pagination .seiten_navi a,
#right_content .pagination .seiten_navi .active,
#right_content .pagination .seiten_navi a:hover {
    border:          1px solid #ECECEC;
    font-size:       12px;
    padding:         5px 10px;
    background:      #ECECEC;
    color:           #333;
    text-decoration: none;
    outline:         none;
}

#right_content .pagination .seiten_navi .active,
#right_content .pagination .seiten_navi a:hover {
    background: #888;
    border:     1px solid #888;
    color:      #FFF;
}

/** tooltips *******************************************************************************************************************/

.tt_container_out {
    position: absolute;
    z-index:  990;
    display:  none;
    width:    394px;
    height:   auto;
    margin:   -0px auto 0 auto;
}

.tt_container_content {
    position: relative;
    z-index:  991;
    padding:  0;
}

.tt_container_bottom {
    position: relative;
    z-index:  991;
    height:   21px;
}

.tt_container {
    position:         relative;
    z-index:          992;
    background-color: #FFFFFF;
    width:            350px;
    margin:           0 auto;
    height:           auto;
    box-shadow:       0 10px 50px rgba(0, 0, 0, .6);
}

.tt_head {
    position:   relative;
    z-index:    993;
    background: #B80016;
    text-align: left;
    color:      #FFF;
    font-size:  14px;
    padding:    10px;
}

.tt_content {
    position:         relative;
    z-index:          993;
    padding:          5px 10px;
    background-color: #F4F3F2;
}

/** button *******************************************************************************************************************/

.button_normal,
.button_mover {
    cursor:                pointer;
    font-family:           'Roboto', Arial, Helvetica, sans-serif;
    font-weight:           bold;
    font-size:             12px; margin: 0;
    padding:               3.5px;
    color:                 #000000;
    background:            url("images/button.jpg") repeat-x 0 0;
    height:                auto;
    border:                1px solid #AAA;
    -moz-border-radius:    5px;
    -webkit-border-radius: 5px;
    border-radius:         5px;
    box-shadow:            0 0 10px #CCC;
    -webkit-box-shadow:    0 0 10px #CCC;
    -moz-box-shadow:       1px 1px 5px #CCC;
}

.button_mover,
.button_mover a:hover {
    color:      #FFFFFF;
    background: url("images/button_a.jpg") repeat-x 0 0;
}

.button_mover:focus {
    box-shadow:         inset 0 0 10px #000;
    -webkit-box-shadow: inset 0 0 10px #000;
    -moz-box-shadow:    inset 0 0 10px #000;
}

.button_disabled {
    font-family:           'Roboto', Arial, Helvetica, sans-serif;
    font-weight:           bold;
    font-size:             12px;
    margin:                0;
    padding:               3px;
    color:                 #555;
    background:            url("images/button_disabled.jpg") repeat-x 0 0;
    height:                auto;
    border:                1px solid #AAA;
    -moz-border-radius:    5px;
    -webkit-border-radius: 5px;
    border-radius:         5px;
    box-shadow:            0 0 10px #CCC;
    -webkit-box-shadow:    0 0 10px #CCC;
    -moz-box-shadow:       1px 1px 5px #CCC;
}

.pointer {
    cursor: pointer;
}

.clear {
    clear: both;
}

.image_button,
.image_button_hover {
    cursor:         pointer;
    background:     url("images/button_test.png") no-repeat 0 0;
    width:          120px;
    height:         50px;
    border:         none;
    font-weight:    bold;
    outline:        0;
    color:          #FFF;
    text-shadow:    0 1px 2px #000;
    padding-bottom: 0;
}

.image_button_hover {
    background: url("images/button_hover.png") no-repeat 0 0;
}

.image_button_trans {
    cursor:         pointer;
    background:     none;
    border:         none;
    width:          32px;
    font-weight:    bold;
    outline:        0;
    color:          #000;
    padding-bottom: 0;
}

.tell_form {
    margin-top:  -17px;
    margin-left: -240px;
    padding:     75px 0 0 40px;
    width:       290px;
    height:      170px;
    background:  url("images/dialog.png") no-repeat;
    display:     none;
    position:    absolute;
    z-index:     999;
}

.tell_form .input {
    width:            110px;
    height:           20px;
    margin-bottom:    5px;
    border:           1px solid #CCC;
    background-color: #F4F4F4;
}

.tell_form h3 {
    font-size: 14px;
    padding:   0 0 10px 0;
    margin:    0;
}

.email_form {
    margin-top:  10px;
    margin-left: -230px;
    padding:     60px 0 0 30px;
    width:       290px;
    height:      170px;
    background:  url("images/dialog.png") no-repeat;
    display:     none;
    position:    absolute;
    z-index:     999;
}

.email_form .input {
    width:            110px;
    padding:          3px;
    margin-bottom:    5px;
    border:           1px solid #CCC;
    background-color: #F4F4F4;
    font-family:      'Roboto', Arial, Helvetica, sans-serif;
    font-weight:      normal;
    font-size:        11px;
}

.email_form h3 {
    font-size: 14px;
    padding:   0 0 10px 0;
    margin:    0;
}

/** uploads ************************************************************************************************************/

#vordrucke {
    width:   100%;
    margin:  0;
    padding: 0;
}

#fileUpload {
    margin: 5px 0 20px 0;
}

.fileUploadQueueItem {
    font-family:      'Roboto', Arial, Helvetica, sans-serif;
    font-weight:      normal;
    font-size:        11px;
    background-color: #F5F5F5;
    border:           1px solid #CCC;
    margin-top:       5px;
    margin-bottom:    15px;
    padding:          10px;
    width:            620px;
    color:            #000000;
}

.fileUploadQueueItem .cancel {
    float: right;
}

.fileUploadProgress {
    background-color: #FFFFFF;
    border:           1px solid #CCCCCC;
    margin-top:       10px;
    width:            100%;
}

.fileUploadProgressBar {
    background-color: #990000;
}

#fileUploadQueue {
    margin-top: 20px;
}

/** tabs *************************************************************************************************************************************/

.shadetabs {
    padding:         3px 0;
    margin-left:     0;
    margin-top:      0;
    margin-bottom:   0;
    list-style-type: none;
}

#tabs ul {
    margin: 0;
}

.shadetabs li {
    font-size: 12px;
    display:   block;
    margin:    0;
    width:     150px;
    height:    45px;
    float:     left;
}

#right_content ul.shadetabs li a,
#right_content ul.shadetabs li a:hover {
    display:       block;
    text-align:    center;
    position:      relative;
    z-index:       1;
    padding:       13px 5px 15px 5px;
    margin-right:  1px;
    font-weight:   bold;
    color:         #AAA;
    background:    #888;
    border:        1px solid #A0A0A0;
    border-bottom: none
}

#right_content ul.shadetabs li a.selected {
    display:       block;
    text-align:    center;
    position:      relative;
    z-index:       1;
    padding:       13px 5px 15px 5px;
    margin-right:  1px;
    font-weight:   bold;
    background:    #E4E4E4;
    border:        1px solid #A0A0A0;
    border-bottom: none
}

#right_content ul.shadetabs li a.selected:hover {
    text-decoration: none;
}

#tabs ul li a {
    color: #DDD;
}

#tabs ul li a:hover {
    color: #FFF;
}

#tabs ul li a.selected {
    color: #333;
}

#tabs ul li a.selected:hover {
    color: #333;
}

#logo_checked {
    margin-top:       -1px;
    width:            640px;
    height:           auto;
    min-height:       50px;
    background-color: #E4E4E4;
    padding:          10px;
    border:           1px solid #A0A0A0;
}

#logo_unchecked {
    margin-top:       -1px;
    width:            640px;
    height:           auto;
    min-height:       50px;
    background-color: #E4E4E4;
    padding:          10px;
    border:           1px solid #A0A0A0;
}

.logo_upload {
    margin-top:       -1px;
    width:            640px;
    height:           auto;
    background-color: #E4E4E4;
    padding:          10px;
    border:           1px solid #A0A0A0;
}

.logo_color {
    float:        left;
    padding-left: 10px;
}

/** kategorien *************************************************************************************/

.katKontainer {
    display:            block;
    border:             1px solid #EFEFEF;
    width:              190px;
    height:             auto;
    padding:            0;
    float:              left;
    margin:             0 20px 20px 0;
    text-align:         center;
    position:           relative;
    -webkit-transition: all .3s;
    -moz-transition:    all .3s;
    -ms-transition:     all .3s;
    -o-transition:      all .3s;
    transition:         all .3s;
    transform:          scale(1.0);
}

.katKontainer:hover {
    border:     1px solid #B80016;
    box-shadow: 0 1em 3em rgba(0, 0, 0, .3);
    transform:  scale(1.02);
}

.katTitle {
    padding:     10px 0;
    width:       100%;
    display:     block;
    font-size:   16px;
    font-weight: 400;
    line-height: 130%;
    color:       #FFF;
    background:  #B80016;
    position:    relative;
    text-align:  center;
}

.katImg {
    width: 100%;
}

.katImg {
    position: relative;
    width:    100%;
    display:  block;
}

.katImg img {
    width: 100%;
}

.articleImage a {
    display:    inline-block;
    border:     1px solid #CDCDCD;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, .3);
}

/** hilfe box ************************************************************************************************************/

.fade-form {
    text-align:            left;
    display:               none;
    width:                 500px;
    height:                auto;
    margin:                0;
    padding:               0 30px 30px 30px;
    z-index:               999;
    position:              absolute !important;
    background-color:      #DDD;
    border:                1px solid #AAA;
    box-shadow:            0 0 25px #333;
    -webkit-box-shadow:    0 0 25px #333;
    -moz-box-shadow:       0 0 25px #333;
    -moz-border-radius:    10px;
    -webkit-border-radius: 10px;
    border-radius:         10px;
}

.fade-form a {
    font-weight:     bold;
    color:           #FF6600;
    text-decoration: none;
}

.fade-form a:hover {
    font-weight:     bold;
    color:           #333333;
    text-decoration: underline;
}

.close-button {
    float:  right;
    margin: -1px -22px 0 0;
}

.close-button:hover {
    float:  right;
    margin: -1px -22px 0 0;
}

.close-button:active {
    box-shadow:         0 0 5px #FFF;
    -webkit-box-shadow: 0 0 5px #FFF;
    -moz-box-shadow:    0 0 5px #FFF;
}

/** schwarze fl�che f�r hilfe box */

.black {
    position:         fixed;
    margin:           0 auto 0 auto;
    z-index:          99;
    width:            100%;
    height:           100%;
    background-color: #333;
    filter:           alpha(opacity=70);
    /* IE */
    -moz-opacity:     0.70;
    /* Mozilla */
    opacity:          0.70;
    /* Opera */
    top:              0;
    left:             0;
    display:          none;
}

/** ajax box ************************************************************************************************************/

.fade-form-ajax {
    text-align:            left;
    height:                400px;
    width:                 600px;
    overflow:              auto;
    padding:               0 30px 30px 30px;
    z-index:               100;
    position:              absolute;
    background-color:      #DDD;
    border:                1px solid #AAA;
    box-shadow:            0 0 25px #000;
    -webkit-box-shadow:    0 0 25px #000;
    -moz-box-shadow:       0 0 25px #000;
    -moz-border-radius:    10px;
    -webkit-border-radius: 10px;
    border-radius:         10px;
}

.ajax-black {
    position:         fixed;
    z-index:          99;
    padding:          0;
    margin:           0;
    width:            100%;
    height:           100%;
    background-color: #333;
    filter:           alpha(opacity=70);
    /* IE */
    -moz-opacity:     0.70;
    /* Mozilla */
    opacity:          0.70;
    /* Opera */
    top:              0;
    left:             0;
    display:          none;
}

.praemieBox {
    padding:       10px;
    padding-top:   0;
    background:    #E7F0D0;
    border:        1px solid #AAA;
    margin-bottom: 20px;
}

input[type=submit].buttonNew,
button[type=submit].buttonNew,
a.link_button {
    background:         #B80016;
    padding:            10px 12px;
    color:              #FFF;
    border:             none;
    cursor:             pointer;
    font-family:        'Roboto', Arial, Helvetica, sans-serif;
    font-weight:        normal;
    font-size:          13px;
    -webkit-transition: all .3s;
    -moz-transition:    all .3s;
    -ms-transition:     all .3s;
    -o-transition:      all .3s;
    transition:         all .3s;
    text-decoration:    none;
    text-transform:     uppercase;
}

input[type=submit].buttonNew:hover,
button[type=submit].buttonNew:hover,
a.link_button:hover {
    background: #ACACAC;
}

input[type=submit].buttonNew.invert,
button[type=submit].buttonNew.invert,
a.link_button.invert {
    background: #ACACAC;
}

input[type=submit].buttonNew.invert:hover,
button[type=submit].buttonNew.invert:hover,
a.link_button.invert:hover {
    background: #B80016;
}

input[type=submit].buttonNew.Disabled,
button[type=submit].buttonNew.Disabled {
    background: #AAA;
}

input[type=submit].buttonNew.Disabled:hover,
button[type=submit].buttonNew.Disabled:hover {
    background: #AAA;
}

.warenkorbListe a,
.prospekt_td a {
    color:              #333;
    -webkit-transition: all .3s;
    -moz-transition:    all .3s;
    -ms-transition:     all .3s;
    -o-transition:      all .3s;
    transition:         all .3s;
}

.warenkorbListe a:hover,
.prospekt_td a:hover {
    color: #AAA;
}

#right_content ul li a {
    color:              #555;
    -webkit-transition: all .3s;
    -moz-transition:    all .3s;
    -ms-transition:     all .3s;
    -o-transition:      all .3s;
    transition:         all .3s;
}

#right_content ul li a:hover {
    color: #B80016;
}

label a {
    color:              #B80016;
    -webkit-transition: color .3s;
    -moz-transition:    color .3s;
    -ms-transition:     color .3s;
    -o-transition:      color .3s;
    transition:         color .3s;
}

label a:hover {
    color: #AAA;
}

/*
 * Original version: 1.0 © 2010 Andrew Valums ( andrew(at)valums.com )
 * Current Maintainer (2.0+): 2012, Ray Nicholus ( fineuploader(at)garstasio.com )
 *
 * Licensed under MIT license, GNU GPL 2 or later, GNU LGPL 2 or later, see license.txt.
 */

.qq-uploader {
    position: relative;
    width:    100%;
}

.qq-upload-list {
    margin:     0;
    padding:    0;
    list-style: none;
}

.qq-upload-list li {
    -webkit-box-sizing:    border-box;
    -moz-box-sizing:       border-box;
    box-sizing:            border-box;
    position:              relative;
    margin-bottom:         10px;
    width:                 100%;
    padding:               10px 5px;
    background-color:      #BCBCBC;
    border:                none;
    border-bottom:         1px solid #CCC;
    color:                 #FFF;
    outline:               0;
    border-radius:         3px;
    -moz-border-radius:    3px;
    -webkit-border-radius: 3px;
    font-size:             13px;
}

.qq-upload-status-text {
    color: #333333;;
}

.qq-upload-spinner,
.qq-upload-size,
.qq-upload-cancel,
.qq-upload-retry,
.qq-upload-failed-text,
.qq-upload-finished {
    margin-right: 12px;
    color:        #333333;
}

.qq-upload-spinner {
    display:        inline-block;
    background:     url("images/uploader/loading.gif");
    width:          15px;
    height:         15px;
    vertical-align: text-bottom;
}

.qq-drop-processing {
    display: none;
}

.qq-drop-processing-spinner {
    display:        inline-block;
    background:     url("images/uploader/processing.gif");
    width:          24px;
    height:         24px;
    vertical-align: text-bottom;
}

.qq-upload-finished {
    display:        none;
    width:          15px;
    height:         15px;
    vertical-align: text-bottom;
}

.qq-upload-retry {
    display: none;
    color:   #000000;
}

.qq-upload-cancel {
    color:           #000000;
    width:           30px;
    height:          30px;
    position:        absolute;
    top:             0;
    right:           0;
    margin-top:      -20px;
    margin-right:    -5px;
    background:      url('images/uploader/close.png') 0 0 no-repeat;
    background-size: 100%;
}

.qq-upload-retryable .qq-upload-retry {
    display: inline;
}

.qq-upload-file {
    padding-right: 15px;
    color:         #333;
}

.qq-upload-size,
.qq-upload-cancel,
.qq-upload-retry {
    font-size:   12px;
    font-weight: normal;
}

.qq-upload-failed-text {
    display:     none;
    font-style:  italic;
    font-weight: bold;
}

.qq-upload-failed-icon {
    display:        none;
    width:          15px;
    height:         15px;
    vertical-align: text-bottom;
}

.qq-upload-fail .qq-upload-failed-text {
    display: inline;
}

.qq-upload-retrying .qq-upload-failed-text {
    display: inline;
    color:   #D60000;
}

.qq-upload-list li.qq-upload-success {
    color: #235E00;
}

.qq-upload-list li.qq-upload-fail {
    -webkit-box-sizing:    border-box;
    -moz-box-sizing:       border-box;
    box-sizing:            border-box;
    position:              relative;
    margin-bottom:         10px;
    width:                 100%;
    padding:               10px 5px;
    background-color:      #FFF;
    border:                1px solid #990000;
    color:                 #333;
    outline:               0;
    border-radius:         3px;
    -moz-border-radius:    3px;
    -webkit-border-radius: 3px;
    font-size:             13px;
}

.qq-progress-bar {
    background: #99C3E5;
    /* Old browsers */
    background: -moz-linear-gradient(top, #99C3E5 0%, #0A77D5 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #99C3E5), color-stop(100%, #0A77D5));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #99C3E5 0%, #0A77D5 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #99C3E5 0%, #0A77D5 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #99C3E5 0%, #0A77D5 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #99C3E5 0%, #0A77D5 100%);
    /* W3C */
    filter:     progid:DXImageTransform.Microsoft.gradient(startColorstr='#99c3e5', endColorstr='#0a77d5', GradientType=0);
    /* IE6-9 */
    width:      0%;
    height:     5px;
    margin-top: 6px;
    display:    none;
}

.qq-upload-button {
    position:    relative;
    text-align:  center;
    color:       #FFF;
    outline:     0;
    cursor:      pointer;
    display:     inline-block;
    width:       220px;
    margin:      5px 0 30px;
    padding:     9px;
    border:      1px solid #53799A;
    background:  #53799A;
    transition:  all .3s;
    white-space: nowrap;
}

a#startUploadButton {
    position:    relative;
    text-align:  center;
    color:       #FFF;
    outline:     0;
    cursor:      pointer;
    display:     inline-block;
    width:       220px;
    margin:      5px 0 30px;
    padding:     9px;
    border:      1px solid #53799A;
    background:  #53799A;
    transition:  all .3s;
    white-space: nowrap;
}

a#startUploadButton:hover {
    color:      #53799A;
    background: transparent;
}

.qq-upload-button::-moz-focus-inner {
    border: none;
}

.qq-upload-button:hover {
    color:      #53799A;
    background: transparent;
}

.qq-upload-list li a {
    position: absolute;
    top:      11px;
    right:    -5px;
}

.uploadDropArea {
    height:          240px;
    width:           100%;
    padding:         1em;
    background:      url("images/uploader/uploadBackground.png") no-repeat center 80% #729EC3;
    background-size: 180px;
    text-align:      center;
    color:           #FFF;
    margin-bottom:   1em;
}

@media only screen and (min-width: 768px) {
    .uploadDropArea {
        margin-bottom: 0;
    }
}

.qq-upload-drop-area-active {
    background-color: rgba(48, 133, 61, 0.56);
}

#dirContent {
    margin-bottom: 1em;
}

.dirContentItem {
    position:         relative;
    margin-bottom:    10px;
    width:            calc(100% - 20px);
    padding:          10px 5px;
    background-color: #8CBC8F;
    border-bottom:    1px solid #CCC;
    color:            #FFF;
    font-size:        13px;
}

.dirContentItem:last-of-type {
    margin-bottom: 0;
}

a.deleteItem {
    cursor:    pointer;
    position:  absolute;
    right:     10px;
    top:       8px;
    color:     #FFF;
    font-size: 18px;
}

a.deleteItem:hover {
    color: #333;
}

table td {
    vertical-align: top;
}

table.center td {
    vertical-align: middle;
}

.infoBox {
    margin:     1em 0;
    padding:    1em;
    background: #ECECEC;
    border:     1px solid #CCCCCC;
}