/* --------------------------------------------------------------

   content.css

   CSS Klasse für häufig verwendete Content-Elemente, siehe Guidelines (für Landingpage und Administration)

   * Boxmodell
   * Iconelement
   * Lightbox (für Dialoge)
   * Nachrichten ähnlich wie Growl
   * Advanced Options (In weißer Box)
   * JS Elemente
   * Buttons
   * Tabellen
   * nicetable (kommt nur einmal vor...)
   * Sonstiges

-------------------------------------------------------------- */



/* Boxmodell
-------------------------------------------------------------- */
.box-white, .box-grey, .box-blue, .box-info {margin: 15px 0; border:1px solid; padding: 15px; }
.box-small {padding: 10px 15px; margin:0px}
.box-white {border-color: #ddd; background:#fff;}
.box-grey {border-color: #ccc; background: #f4f4f4;}
.box-blue {border-color: #006DAC; background: #38AAE0; color: #fff;}
.box-blue a {color: #fff; }
.box-info { padding-left:35px; background:url("../img/icons16/information.png") 10px 15px no-repeat #e6eff8; border:1px solid #155baf; margin:5px 0 5px 0;}
.box-white h1, .box-grey h1, .box-blue h1, .box-info h1 {padding-top: 0; }
.box-white h2, .box-grey h2, .box-blue h2, .box-info h2, .niceform h2 {padding: 5px 0 10px 0; margin:0; }
/* .box-white h3, .box-grey h3, .box-blue h3, .box-info h3 {padding-top: 0; } */

.box-black {
  background-color: #2c2c2c;
  background-image: -moz-linear-gradient(top, #333333, #000000, #000000, #000000);
  background-image: -ms-linear-gradient(top, #333333, #000000, #000000, #000000);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#000000));
  background-image: -webkit-linear-gradient(top, #333333, #000000, #000000, #000000);
  background-image: -o-linear-gradient(top, #333333, #000000, #000000, #000000);
  background-image: linear-gradient(top, #333333, #000000, #000000, #000000);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#000000', GradientType=0);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0 2px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
  -moz-box-shadow: 0 2px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
  box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
  color: #dddddd;
}

/* Iconelement -> z.B. span oder a mit 16px Icon
-------------------------------------------------------------- */
.ext-icon-element {padding: 3px 5px 3px 28px; background: no-repeat 5px 50%; }
.ext-icon-element-right {padding: 3px 22px 3px 0; background: no-repeat right 50%; }
h3.big-ext-icon-element {padding: 10px 5px 10px 45px; background: no-repeat 0 50%; margin: 10px 0 5px 0; }


/* Lightbox (für Dialoge)
-------------------------------------------------------------- */
.box-overlay {padding: 10px 15px; z-index:99999}
#overlay, .overlay { z-index:10000; display:none; width:800px;
-moz-box-shadow: 0 0 18px #111;
-webkit-box-shadow: 0 0 18px #111;
box-shadow: 0 0 18px #111;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=18, Direction=0, Color='#111111')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=18, Direction=0, Color='#111111');
color: #111; -moz-border-radius:8px; -webkit-border-radius:8px;}
#overlay .contentWrap, .overlay .contentWrap { background: #fff; }
#overlay .contentWrap > .well { margin-bottom: 0; }
#overlay a.close, .overlay a.close { z-index:10001; background-image:url(../img/close2.png); position:absolute; right:-17px; top:-15px; cursor:pointer; height:30px; width:30px;}
#overlay .niceform, .overlay .niceform { margin:0;}
.cancel-overlay-form {float:right; margin-top:10px; margin-right:5px;}


/* Nachrichten ähnlich wie Growl
-------------------------------------------------------------- */
#alert-messages {position:fixed; top:5px; left:50%; width:450px; z-index:100000; margin-left:-225px;}
#messages {position:fixed; top:-10px; left:50%; margin-left:-225px; width:450px; z-index:100000;}
.message {position:relative;border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px; background:url("../img/icons16/information.png") 10px 15px no-repeat #e6eff8; color: #155baf; border:1px solid #155baf; margin:5px 0 5px 0; padding:10px 10px 10px 40px;  }
.message_info {position:relative;  border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px; background:url("../img/icons16/information.png") 10px 15px no-repeat #e6eff8; color: #155baf; border:1px solid #155baf; margin:5px 0 5px 0; padding:10px 10px 10px 40px;  }
.message_error {position:relative; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px; background:url("../img/icons16/cancel.png") 10px 50% no-repeat #Faa; color: red; border:1px solid #DDAAAA; margin:5px 0 5px 0; padding:10px 10px 10px 40px;  }
.message_ok {position:relative; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px; background:url("../img/icons16/accept.png") 10px 50% no-repeat #9DFA63; color: green; border:1px solid #7BAD51;  margin:5px 0 5px 0; padding:10px 10px 10px 40px; }
.message-close { border-radius:2px; -moz-border-radius:2px; -webkit-border-radius: 2px;position:absolute; right:10px; top:12px;}
.error-message { border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px; padding:6px 35px 4px; background:url("../img/icons16/exclamation.png") 10px 50% no-repeat #FFDDDD; border: 1px solid #DDAAAA; color: red; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px;}
#messages div {font-size:16px; margin-top: 15px; padding: 20px 20px 20px 50px; line-height:20px;}


/* Advanced Options (In weißer Box)
-------------------------------------------------------------- */
.advanced-options .formular-line .input-wrapper { border-color: #ffffff;}
.advanced-options .formular-line-active .input-wrapper { border-color: #ccc;}
.advanced-options .formular-line .info { width: 265px;}

/* JS Elemente
-------------------------------------------------------------- */
/* Toggling Boxes */
.folder-content, .folder-content-overlay {display:none;}
.folder-link, .folder-link-overlay {cursor:pointer; padding:5px 15px 5px 30px;}
.folder-link:hover, .folder-link-overlay:hover {background-color: #ccc;}
.folder-closed { background:url("../img/folder_closed.png") no-repeat 15px 50%;}
.folder-open { background:url("../img/folder_open.png") no-repeat 15px 50%;}
.note-closed, .note-open {display: none; float: right;}
.folder-closed .note-closed{ display: block; padding-right: 30px; background: url("../img/icons32/bullet_arrow_down.png") no-repeat right center;  }
.folder-open .note-open{ display: block; padding-right: 30px; background: url("../img/icons32/bullet_arrow_up.png") no-repeat right center; }
.folder-icon { padding-top:3px;}
.folder-icon img {float: left; padding:1px 10px 1px 0;}

.collapsable .collapse { margin: 0 15px;}
.collapsable.collapsable-container {background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #CCCCCC; margin: 15px 0; position: relative;}
.collapsable .collapsable-trigger{cursor:pointer; padding:5px 15px 5px 30px; background:url("../img/folder_open.png") no-repeat 15px 50%;}
.collapsable .collapsable-trigger:hover {background-color: #ccc;}
.collapsable .collapsable-trigger.collapsed { background:url("../img/folder_closed.png") no-repeat 15px 50%;}
.collapsable { }
.collapsable .closed {display: none; float: right;}
.collapsable .collapsed .open {display: none; float: right;}
.collapsable .collapsed .closed { display: block; padding-right: 30px; background: url("../img/icons32/bullet_arrow_down.png") no-repeat right center;  }
.collapsable .closed { background:url("../img/folder_closed.png") no-repeat 15px 50%;}
.collapsable .open { display: block; float: right; padding-right: 30px; background: url("../img/icons32/bullet_arrow_up.png") no-repeat right center; }
.collapsable .collapsable-title {font-weight: bold; color: #000000;}

.collapsable.checkbox .collapsable-trigger {background-image: none;}
.collapsable.checkbox .collapsable-trigger label {cursor: pointer;}
.collapsable.checkbox .collapsable-trigger:hover {background-color: #ccc;}
.collapsable.checkbox {margin: 0px; padding: 0px;}



/* show / hide Konzept */
.advanced-options { clear: both; }
.advanced-options-link { padding-right: 10px; margin-bottom: 5px; margin-right: 25px; float:left; background: url("../img/advanced-options-arrow.png") right 50% no-repeat;}
.advanced-options-link a { display: block; cursor: pointer; padding:5px 15px 5px 25px; text-decoration: underline; }
.advanced-options-link a:hover { text-decoration: none; }
.advanced-options-value { display:none; clear: both; margin-top: 15px; padding: 20px; background-color: #fff; border: 1px solid #ccc; }
a.advanced-options-noicon { padding: 5px 10px 5px 0; }
.advanced-options-maps { background: url("../img/icons16/map.png") 0 50% no-repeat; }
.advanced-options-adduser { background: url("../img/icons16/user_add.png") 0 50% no-repeat; }
.advanced-options-standard { background: url("../img/icons16/cog.png") 0 50% no-repeat; }
.advanced-options-help { background: url("../img/icons16/help.png") 0 50% no-repeat; }
.advanced-options-add { background: url("../img/icons16/add.png") 0 50% no-repeat; }
.advanced-options-add-site { background: url("../img/icons16/page_white_add.png") 0 50% no-repeat; }
.advanced-options-add-ownproduct { background: url("../img/icons16/printer_add.png") 0 50% no-repeat; }
.advanced-options-add-shippingmethod { background: url("../img/icons16/package_add.png") 0 50% no-repeat; }
.advanced-options-add-digitalproduct { background: url("../img/icons16/picture_save.png") 0 50% no-repeat; }
.advanced-options-add-licence { background: url("../img/icons16/script_add.png") 0 50% no-repeat; }
.advanced-options-add-printproduct { background: url("../img/icons16/lorry.png") 0 50% no-repeat; }
.more-info {display: none; clear: both; padding-top: 15px; }


/* Infokasten mit Klappmechanismus */
.info:not(tr):not(.control-group) { background:url("../img/icons16/information.png") 10px 15px no-repeat #e6eff8; border:1px solid #155baf; margin:5px 0 5px 0;}
.info:not(tr):not(.control-group) .info-teaser { padding:15px 15px 15px 40px; border: 1px solid #FFFFFF; }
.info:not(tr):not(.control-group) .info-more { margin: 15px; float: right;  }
.info:not(tr):not(.control-group) .info-more:hover {}
.info:not(tr):not(.control-group) .info-text { display: none; }
.info:not(tr):not(.control-group) .info-text div {border-top:1px solid #155baf; padding:15px 15px 15px 40px; }


/* Buttons
-------------------------------------------------------------- */

/* Button ohne icon (nur <a>) */
a.button  {display: block; float: left; font-size:12px; padding:4px 8px; cursor: pointer; text-decoration: none; background: url("../img/button_grey.png") repeat-x center top; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius: 3px;  color: #333; text-shadow: 0 1px 0 #FFFFFF; border:1px solid; border-color: #CCCCCC #BBBBBB #A0A0A0 #BBBBBB; }
a.button:hover {border-color: #939393; padding:5px 8px 3px 8px;}
a.button-blue {display: block; float: left; font-size:12px; padding:4px 8px; cursor: pointer; text-decoration: none; background: url("../img/button_blue.png") repeat-x center top; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius: 3px; color: #fff; text-shadow: none; font-weight:bold; border:1px solid; border-color: #329dcf #1e81af #007ab3 #1e81af; }
a.button-blue:hover {border-color: #005f8b; padding:5px 8px 3px 8px;}

/* Button mit icon (mit wrapper <div>) */
.linkbutton {background: url("../img/button_grey.png") repeat-x center top; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius: 3px;  }
.linkbutton a { cursor: pointer; text-decoration: none; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius: 3px; display: block; font-size:12px; padding:4px 8px 4px 31px; border:1px solid; border-color: #CCCCCC #BBBBBB #A0A0A0 #BBBBBB; background:no-repeat 7px 50%; text-shadow: 0 1px 0 #FFFFFF; color: #333; }
.linkbutton a:hover { border-color: #939393; padding:5px 8px 3px 31px;}
.linkbutton-no-icon a {padding-left:10px; }
.linkbutton-no-icon a:hover {padding-left:10px; }
.linkbutton-blue {background-image: url("../img/button_blue.png");}
.linkbutton-blue a {color: #fff; font-weight:bold; border-color: #329dcf #1e81af #007ab3 #1e81af; text-shadow: none;}
.linkbutton-blue a:hover { border-color: #005f8b;}
.linkbutton-strong { font-weight:bold;}
.linkbutton-right { float:right; margin-left: 6px; }
.linkbutton-left { float:left; margin-right: 6px; }
.linkbutton-small { margin: 0 }
.linkbutton-fieldset {position:absolute;right:20px; top:10px; }
.linkbutton-small a { cursor:pointer; text-decoration: none; padding:1px 5px 1px 32px; display: block; background: no-repeat 10px 50%; height: 16px; }
.linkbutton-small a:hover { text-decoration: underline;}
.linkbutton-notext a:hover { border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px; background-color: #cccccc; }
.linkbutton-top a { text-decoration: none; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px; display: block; width:80px; text-align:center; float: right; margin-right: 15px; padding:25px 0 5px 0; border:1px solid #ccc; background: #fff no-repeat 50% 6px; }
.linkbutton-top a:hover { background-color: #FAFAFA;}
.linkbutton-topright a { height: 16px; position: absolute; right: 0; top: 0; padding: 5px; margin: 5px; }
.linkbutton-outside { position: absolute; top: 5px; right: 15px; }
.linkbutton-outside a { text-decoration: none; display: block; padding:5px 0 5px 35px; background:no-repeat 10px 50%;}
.linkbutton-outside a:hover { text-decoration: underline; }
.linkbutton-hide-content { float: right; }
.linkbutton-hide-content a { text-decoration: none; display: block; padding:5px 0 5px 35px; background:no-repeat 10px 50%;}
.linkbutton-hide-content a:hover { text-decoration: underline; }
.linkbutton-for-more-info { }
.linkbutton-width a {width:100px; text-align:center;}
/* Statt linkbutton */
.iconlink a {display: block; padding:6px 5px 5px 20px; background-repeat: no-repeat; background-position: 0 50%; }
a.iconlink {display: block; padding:5px 0 2px 20px; background: no-repeat 0 50%; }
a.iconlink-site { background-image: url("../img/icons16/page_go.png");}

/* Button Icons */
.linkbutton-add a{ background-image: url("../img/icons16/add.png")  }
.linkbutton-addphoto a{ background-image: url("../img/icons16/image_add.png")  }
.linkbutton-addownproduct a{ background-image: url("../img/icons16/picture_add.png")  }
.linkbutton-shipping a{ background-image: url("../img/icons16/package_go.png")  }
.linkbutton-adddigitalproduct a{ background-image: url("../img/icons16/shading_add.png")  }
.linkbutton-delete a{ background-image: url("../img/icons16/delete.png")  }
.linkbutton-edit a{ background-image: url("../img/icons16/pencil.png") }
.linkbutton-settings a{ background-image: url("../img/icons16/cog.png") }
.linkbutton-cancel a{ background-image: url("../img/icons16/cancel.png") }
.linkbutton-order a{ background-image: url("../img/icons16/money_euro_1.png") }
.linkbutton-back a{ background-image: url("../img/icons16/resultset_previous.png") }
.linkbutton-next a{ background-image: url("../img/icons16/resultset_next.png") }
.linkbutton-addpage a{ background-image: url("../img/icons16/page_white_add.png") }
.linkbutton-deletepage a{ background-image: url("../img/icons16/page_white_delete.png") }
.linkbutton-addpublicgallery a{ background-image: url("../img/icons16/folder_image.png") }
.linkbutton-folderdelete a{ background-image: url("../img/icons16/folder_delete.png") }
.linkbutton-addprivategallery a{ background-image: url("../img/icons16/image_key.png") }
.linkbutton-addcoupon a { background-image: url("../img/icons16/calculator_add.png") }
.linkbutton-editcoupon a { background-image: url("../img/icons16/calculator_edit.png") }
.linkbutton-editgallery a{ background-image: url("../img/icons16/image_edit.png") }
.linkbutton-newcustomer a{ background-image: url("../img/icons16/user_add.png") }
.linkbutton-loginasuser a{ background-image: url("../img/icons16/lock_open.png") }
.linkbutton-edituser a{ background-image: url("../img/icons16/user_edit.png") }
.linkbutton-deletecustomer a{ background-image: url("../img/icons16/user_delete.png") }
.linkbutton-user-go a{ background-image: url("../img/icons16/user_go.png") }
.linkbutton-finish a{ background-image: url("../img/icons16/tick.png") }
.linkbutton-editorder a{ background-image: url("../img/icons16/comment_edit.png") }
.linkbutton-showorder a{ background-image: url("../img/icons16/application_view_tile.png") }
.linkbutton-up a{ background-image: url("../img/icons16/bullet_arrow_up.png") }
.linkbutton-down a{ background-image: url("../img/icons16/bullet_arrow_down.png") }
.linkbutton-completion a{ background-image: url("../img/icons16/accept.png") }
.linkbutton-cash a{ background-image: url("../img/icons16/money.png") }
.linkbutton-save a{ background-image: url("../img/icons16/disk.png") }
.linkbutton-database-go a { background-image: url("../img/icons16/database_go.png") }
.linkbutton-database-refresh a { background-image: url("../img/icons16/database_refresh.png") }
.linkbutton-database-save a{ background-image: url("../img/icons16/database_save.png") }
.linkbutton-pdf a { background-image: url("../img/icons16/page_white_acrobat.png") }
.linkbutton-payout a { background-image: url("../img/icons16/coins.png") }
.linkbutton-sell a { background-image: url("../img/icons16/money.png") }
.linkbutton-imagesell a { background-image: url("../img/icons16/image_sell.png") }
.linkbutton-email a { background-image: url("../img/icons16/email_go.png") }
.linkbutton-magnifier a { background-image: url("../img/icons16/magnifier.png") }
.linkbutton-vote a { background-image: url("../img/icons16/thumb_up.png") }
.linkbutton-key a { background-image: url("../img/icons16/key.png") }
.linkbutton-brick a { background-image: url("../img/icons16/brick.png") }
.linkbutton-photos a { background-image: url("../img/icons16/images.png") }
.linkbutton-world-go a { background-image: url("../img/icons16/world_go.png") }
.linkbutton-world-link a { background-image: url("../img/icons16/world_link.png") }
.linkbutton-link-go a { background-image: url("../img/icons16/link_go.png") }
.linkbutton-refresh a { background-image: url("../img/icons16/arrow_refresh_small.png") }
.linkbutton-csv a { background-image: url("../img/icons16/application_view_detail.png") }
.linkbutton-tickets a{ background-image: url("../img/icons16/application_edit.png") }
.linkbutton-old-tickets a{ background-image: url("../img/icons16/application_link.png") }
.linkbutton-ticketarchive a{ background-image: url("../img/icons16/application_go.png") }
.linkbutton-login a{ background-image: url("../img/icons16/lock_go.png") }
.linkbutton-no-phone a{ background-image: url("../img/icons16/telephone_error.png") }
.linkbutton-arrow-switch a{ background-image: url("../img/icons16/arrow_switch.png") }
.linkbutton-basket-images a{ background-image: url("../img/icons16/basket_images.png") }
.linkbutton-sum a{ background-image: url("../img/icons16/sum.png") }
.linkbutton-calculator-edit a{ background-image: url("../img/icons16/calculator_edit.png") }
.linkbutton-duplicate a{ background-image: url("../img/icons16/application_cascade.png") }
.linkbutton-table-save a{ background-image: url("../img/icons16/table_save.png") }
.linkbutton-lorry-go a{ background-image: url("../img/icons16/lorry_go.png") }
.linkbutton-page-white-magnify a { background-image: url("../img/icons16/page_white_magnify.png") }
.linkbutton-group-add a { background-image: url("../img/icons16/group_add.png") }
.linkbutton-upgrade a { background-image: url("../img/icons16/plugin_upgrade.png") }
.linkbutton-download a { background-image: url("../img/icons16/download.png") }

/* Formular-Submit-Buttons */
.button-save .submit input{  background: url("../img/icons16/disk.png") 10px 7px no-repeat; padding:6px 15px 6px 35px; }
form.button-small .submit input{ height: 18px; width: 70px; margin:0; padding: 1px 2px 4px 2px; border: none;  }
form.button-small .submit input:hover { color: #000; }
form.button-save-inline .submit input { margin:0 0 2px 10px; padding:6px 15px 6px 35px; background: url("../img/icons16/disk.png") 10px 7px no-repeat #fafafa; border: 1px solid #ccc; color: #333; }
form.button-save-inline .submit input:hover { background-color: #cccccc; }
form.button-medium-inline .submit {padding: 0;}
form.button-medium-inline .submit input { padding:5px; background: transparent; font-size: 12px; color: #fff; border:none; }
.big-order-button { float: right; padding-top: 25px;}

/* Form-Buttons */
.submit  {float: left; background: url("../img/button_blue.png") repeat-x; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius: 3px;  }
.submit-grey {background: url("../img/button_grey.png") repeat-x center top;  }
.submit input {height: 29px; padding:3px 8px 5px; margin:0; font-size: 11px; font-weight:bold; background-color: transparent; cursor:pointer; color: #FFF; border: 1px solid; border-color: #329dcf #1e81af #007ab3 #1e81af;  border-radius:3px; -moz-border-radius:3px; -webkit-border-radius: 3px; }
.submit-grey input {border: 1px solid; border-color: #CCCCCC #BBBBBB #A0A0A0 #BBBBBB; text-shadow: 0 1px 0 #FFFFFF; color: #333;}
.submit-grey input:hover {border-color: #939393; padding:4px 8px 4px 25px;}
.button-outside { float:right; margin: 10px 0 15px 15px;}
.submit-first { position: absolute; right: 15px; top: 15px; }
.submit-deactive  { float: left; margin-left: 15px; background: url("../img/button_grey.png") repeat-x;  border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px; border: 1px solid #aaa;  }
.submit:hover {background-position: bottom;}
.submit-left .submit input { float:left; }
.submit-add-small input { background: url("../img/icons16/add.png") 0 3px no-repeat #F4F4F4; border: none; cursor: pointer; padding:4px 5px 4px 20px; margin: 5px 0 0 9px; }
.submit-right { float:right; }
.submit-refresh input { background: url("../img/icons16/arrow_refresh.png") no-repeat 5px 50%; padding-left: 25px }

/* Inputs */
.input-row .input { float: left; }
.input-row .input input {border: 1px solid #AAAAAA; height: 21px; margin: 0 10px; padding: 3px 8px;}

.star-rating-container { padding: 0 0 10px 30px; }

/* Spezielle Input Button Kombi */
.input-save .input {float: left; }
.input-save .input input {height: 21px; padding: 3px 8px; margin: 0; border: 1px solid #AAA; font-size: 12px;}
.input-save .submit {margin: 0; border: none; background: url("../img/button_grey.png") repeat-x scroll center top; border-top-left-radius:0; border-bottom-left-radius:0; -moz-border-radius-topleft:0; -moz-border-radius-bottomleft:0; -webkit-border-top-left-radius:0; -webkit-border-bottom-left-radius:0; text-shadow: 0 1px 0 #FFFFFF; }
.input-save .submit input {height: 29px; padding:3px 8px; margin:0; font-size: 12px; cursor: pointer; color: #333; font-weight: normal; text-decoration: none; border-top-left-radius:0; border-bottom-left-radius:0; -moz-border-radius-topleft:0; -moz-border-radius-bottomleft:0; -webkit-border-top-left-radius:0; -webkit-border-bottom-left-radius:0; display: block;  border:solid; border-width:1px 1px 1px 0; border-color: #CCCCCC #BBBBBB #A0A0A0 #BBBBBB; background:no-repeat 7px 50%;}
.input-save .submit input:hover { border-color: #939393;}

/* Links */
a.link {float: left; display: block; padding:5px 15px 3px 25px; background: no-repeat 0 50%; margin-top: 3px; }
a.link-screencast { background-image: url("../img/icons16/film.png")  }
a.link-down { padding: 2px 15px 2px 0; color: #333; background: url("../img/advanced-options-arrow.png") right 50% no-repeat; cursor: pointer; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius: 3px;}
a.link-highlight { padding: 2px 18px 2px 5px; color: #23acec; background: url("../img/advanced-options-arrow-white.png") right 50% no-repeat; cursor: pointer; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius: 3px;}
a.link-more { padding-right: 15px; background: url("../img/small-arrow-right.png") right 50% no-repeat; cursor: pointer; font-size: 12px; }
h3.link-down { display: inline; padding: 0 15px 0 5px; background: url("../img/advanced-options-arrow.png") right 50% no-repeat;}

/* Aufzählungselement-Buttons */
.listingelement-row {margin-right:-10px; margin-bottom:-10px; position: relative;}
.listingelement { position: relative; cursor:pointer; background:url('../img/button_listingelement.jpg') repeat-x bottom #f6f7f6; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius: 3px; margin: 0px 10px 10px 0px; float: left;  border:1px solid; border-color: #CCCCCC #BBBBBB #A0A0A0 #BBBBBB; text-align: center; }
.listingelement .content {display:block; margin:0; width: 117px; text-shadow: 0 1px 0 #FFFFFF; padding: 60px 5px 5px 5px; background-position: 50% 15px; background-repeat: no-repeat; text-decoration: none;}
.listingelement-medium .content {  padding-top: 80px; }
.listingelement:hover { border-color: #939393;}
.listingelement-text {display: block; height: 45px; }
.listingelement-detail { position: absolute; top:15px; right:17px; width: 75px; height: 59px; background: url("../img/icons16/magnifier.png") no-repeat 57px 2px ; }
.listingelement-icon-order-offen { background-image: url("../img/icons32/basket_images.png")  }
.listingelement-icon-order-geschlossen { background-image: url("../img/icons32/basket.png")  }
.listingelement-icon-showgallery { background-image: url("../img/icons32/images.png")  }



/* Eingaben: radio */
.radio-row * {float: left; }
.radio-row .input-row {clear: none; padding-top: 5px;}
.radio-row .input label {width: auto; padding-right: 15px;}
.radio-row-description { margin-top: 12px; width: 100px; font-weight: bold; }
.radio-row-element { position: relative; padding: 4px; cursor: pointer; text-decoration: none; display:block; margin-right: 10px;}
.radio-row-element input {margin-top: 9px; margin-right: 10px;}
.radio-row-element img { margin-right: 10px;}
.radio-row-element span {margin-top: 6px; margin-right: 20px;}
.radio-row-element:hover { background: #CCCCCC; }
.radio-element-description {position: absolute; z-index:999; bottom: -105px; left:50%; margin-left: -105px; display:none; background-color: #333; width: 200px; height: 84px; padding: 5px;}
.radio-row-element:hover .radio-element-description {display:block; }



/* Tabellen
-------------------------------------------------------------- */

.nowrap { white-space:nowrap; }

/* Tabellen */
table#dataTable { border:1px solid #ccc; border-width:1px 0 0 1px; clear: both; color: #333; width: 100%; background: #fff;}
table#dataTable th { cursor:pointer;  text-align: center; padding: 5px }
.ui-widget-header { border: 1px solid #CCCCCC; }
table#dataTable .lastrow td { background: #999; color: #fff; font-weight: bold;  }
table#dataTable th a { display: block; padding: 2px 4px; text-decoration: none; }
table#dataTable th a:hover { background: #ccc; color: #333; text-decoration: none; }
table#dataTable tr td { border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; padding: 8px; vertical-align: middle; }
table#dataTable.center tr td { text-align: center;  }
table#dataTable tr.altrow td { vertical-align: middle; border-bottom: 1px solid #ccc; }
table#dataTable td.actions { text-align: center; white-space: nowrap; }
table#dataTable td.actions div.linkbutton { margin:1px;}
table#dataTable td.left { text-align:left;}
table#dataTable td.left img { padding: 5px 15px 5px 5px; float: left }

table.dataTable { border:1px solid #ccc; border-width:1px 0 0 1px; clear: both; color: #333; width: 100%; background: #fff;}
table.dataTable th { cursor:pointer;  text-align: center; padding: 5px }
table.dataTable .lastrow td { background: #999; color: #fff; font-weight: bold;  }
table.dataTable th a { display: block; padding: 2px 4px; text-decoration: none; }
table.dataTable th a:hover { background: #ccc; color: #333; text-decoration: none; }
table.dataTable tr td { border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; padding: 8px; vertical-align: middle; }
table.dataTable.center tr td { text-align: center;  }
table.dataTable tr.altrow td { vertical-align: middle; border-bottom: 1px solid #ccc; }
table.dataTable td.actions { text-align: center; white-space: nowrap; }
table.dataTable td.actions div.linkbutton { margin:1px;}
table.dataTable td.left { text-align:left;}
table.dataTable td.left img { padding: 5px 15px 5px 5px; float: left }

/* wo wird paging verwendet?? */
div.paging { background:#fff; color: #ccc; margin-bottom: 2em; }
div.paging div.disabled { color: #ddd; display: inline; }
div.paging span { }
div.paging span.current {color: #000; }
div.paging span a { }
.tablegrid .left { text-align: left; }
.infotable td { padding: 0 15px 5px 0; }
div.infotable { position: relative; padding: 15px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px; background-color: #fff; border: 1px solid #ccc; margin-bottom: 15px; }

.prettytable { border: 1px solid #cccccc; }
.prettytable table { width: 100%; }
.prettytable table tr th { text-align: left; padding: 5px 15px; background-color: #F4F4F4}
.prettytable table tr td { text-align: left; padding: 5px 15px; border-top: 1px solid #cccccc;}
.prettytable tr.prettytable-combine td { border: none; }
.prettytable tr.prettytable-highlight td { background-color: #FAFAFA; }
.prettytable tr.wrong-bank td { background-color: #FDD; }
.prettytable tr.low-amount td { background-color: #FFD; }
.prettytable-small table tr th { padding:2px 8px }
.prettytable-small table tr td { padding:2px 8px }
.prettytable-small table tr th { text-align: right; }
.prettytable-small table tr td { text-align: right; }

.prettytable table tr.deleted td {background-color: #FAFAFA;}

.table tr.payment-inactive td {color:#777!important; background-color: #eee; font-style:italic}

/* Summary */
table.summary {  }
table.summary tr td.topic { padding: 4px 10px 4px 0; }
table.summary tr td.value { padding: 4px 20px 4px 0; font-weight: bold; }



/* nicetable (kommt nur einmal vor...)
-------------------------------------------------------------- */
.nicetable { border: solid #ccc; border-width:1px 1px 0 1px; padding: 5px 15px; background-color: #FFFFFF; }
.nicetable-last { border-width: 1px; background: url("../img/infoline.png") repeat-x center top #38aae0; font-weight: bold; }
.nicetable-highlight { background: #eee; font-weight: bold;}
.nicetable-left { float: left; }
.nicetable-right { float: right; }

/* Sonstiges
-------------------------------------------------------------- */

/* Unterscheidung Tarife (ausgrauen falls Option nicht möglich im entsprechenden Tarif) */
div.greyout {position: absolute; top: -5px; left: -5px; z-index: 999; background: url('../img/transparent.png'); }
div.greyout .note a { float: none; color: #FFF; }
div.greyout .note { display: none; position: absolute; top:50%; left: 50%; text-align: center; padding: 5px; color: #FFF; background: url('../img/transparent3.png');}
div.greyout:hover .note {display: block; }

/* Hilfevideos */
h1.with-video {float: left; }
.video-help { display:block; float: right; font-size: 1em; margin-top: 3px; padding:6px 0 5px 50px; background:url("../img/icons16/television.png") no-repeat 25px 50%;}
.video-help-special {padding-left:30px; background:url("../img/icons16/television.png") no-repeat 0 50%;; color: #FFFFFF; font-size: 15px; font-weight: bold; position: absolute; right: 25px; top: -3px;}

/* Bestell-Detail Übersicht */
.photo-overview-regular { font-size: 10px; padding: 5px; float:left; background: #ffffff; border: 1px solid #ddd; margin: 0 6px 15px 10px; border-radius: 0; box-shadow: none; margin: 0 10px 10px 0}
.photo-overview-regular.processed {background-color: #A5D970;}
.photo-overview-regular.error {background-color: #f5a5a5;}
.photo-overview-regular a.thumbnail-image { width: 100px; height: 100px; margin:0 auto; display: block; text-align:center }
.photo-overview-filename { font-size: 12px; font-weight: bold; padding-bottom: 3px; padding-top: 20px; }

/* Datum */
.date {clear: both;}

/* Bestellstatus */
.orderstatus-offen { color: red }

.order-method-payment { max-height: 16px !important; max-width: 16px !important; }
.order-method-payment-2x { height: 28px !important; width: 28px !important; }