@import "buttons.css";

/*alphafrom webshop application.css*/
/* www.rusitschka.de 14.1.2009 */
/*         version 0.1         */

/* gradient ist im header */

/* standards and resets */
html, body , button, input{ color:#313638;
        font-family: Arial, Helvetica, sans-serif; font-size:13px;}

html, body, h2, h1, h3, ul { margin:0; padding:0 }

h2 {font-size:20px; color:#313638; font-weight:normal; padding:0 0 12px;}
h3 {font-size:15px; color:#313638; font-weight:bold; padding:10px 0 4px;}
h4 {font-size:15px; color:#313638; font-weight:normal; margin:0 0 6px; padding-bottom: 8px;}
h4 a, h4 a:hover, h4 a:focus{text-decoration:none}
.hr, hr {border:0; border-bottom:1px solid #d0d7db; margin:0 2px 10px;
        padding:0; height:1px; clear:both; padding:10px 0 0}
.hidden {visibility:hidden;display:none}
p {margin:2px 0 12px;}
p.no-bottom-margin, .no-bottom-margin { margin:2px 0 0; }
.cb {clear:both}
ul.address {list-style-type:none}
ul.address li{height:16px}

table tr td {vertical-align:top}
form {overflow:hidden; margin:0; }
input{color:#44484c; }
select{color:#44484c;}
.form-height-wrapper {padding:2px 6px 0 0; float:left}

input:focus, form:focus, input:hover, form:hover, select:hover  { color:#000;}

a {color:#007cbc;}
a:hover {color:#025681}
a.hyperlink-nothing {color:#313638;}
a.hyperlink-nothing:hover {color:#242729;}
a.no-underline {text-decoration:none}
a.hyperlink-no-color {color:#313638; background: url(/images/hyperlink-darker.png) no-repeat;
    padding:0 0 0 7px; background-position:0 4px;}
a.hyperlink-no-color:hover {color:#242729; background-position:0 -9px;}
a.hyperlink {background: url(/images/hyperlink.png) no-repeat; padding:0 0 0 7px;
    background-position:0 4px;}
a.hyperlink:hover {background-position:0 -9px;}
a.hyperlink-back {background: url(/images/back.png) no-repeat; padding:0 0 0 11px;
    background-position:0 4px;}
a.hyperlink-back:hover {background-position:0 -9px;}

/* table */


table {border:0; border-top:1px solid #313638; border-bottom:1px solid #313638;
            padding:0; margin:0; border-spacing:0; width:100%; clear:both;}
table th {height:26px; text-align:left; padding:0 6px; border-bottom:1px solid #9e9e9e;}
.no-bottom-border {border-bottom:0;}
tr {height:26px; border:0; padding:0; margin:0;}
td {border:0; padding:6px 6px; margin:0;}
tr.light {background-image: url(/images/table/bg-light.gif);background-repeat:repeat-x }
tr.dark {background-image: url(/images/table/bg-dark.gif);background-repeat:repeat-x; }
tr.light-top, tr.dark-top {background-position: top;}
tr.light-center, tr.dark-center {background-position: center;}
tr.light-bottom, tr.dark-bottom {background-position: bottom; }
tr.light-bottom td{border-bottom:1px solid #9e9e9e;}
tr.dark-bottom td{border-bottom:1px solid #9e9e9e;}
tr.last td { background: url(/images/table/bg-last.gif) repeat-x; height:32px; }

table td.td-footer {font-size:11px; padding-bottom:8px; padding-top:4px;}
table td.td-top {padding-top:4px; padding-right:0;}

table td.middle {padding:3px 0 3px 10px;}
table td.middle-right {padding:3px 10px;}

/* Alignments */

.right { float:right; display:inline; }
.left { float:left; display:inline; margin-right:10px; }
.abs-left { left:0; margin-right:10px; }
.no-float {float:none !important; display:inline !important}
.align-right {text-align:right;}
.align-left {text-align:left;}


/* delete button */

.delete { background: url(/images/button/bg_delete.gif) no-repeat;
    float:left; width:77px; height:15px; background-position:left top;
    color:#687276; font-size:12px; text-decoration:none; padding-left:22px;
    letter-spacing:0; padding-top:1px;}
.delete:hover { background-position:left bottom; color:#475358;}

/* change button */

.change { background: url(/images/button/bg_change.gif) no-repeat;
    width:62px; height:15px; background-position:left top;
    color:#687276; font-size:12px; text-decoration:none; padding-top:1px;
    letter-spacing:0; text-align:center; margin-left:6px;}
.change:hover { background-position:left bottom; color:#475358;}

/* stl herunterladen */

.download { background: url(/images/button/bg_download.gif) no-repeat;
    float:left; width:162px; height:15px; background-position:left top;
    color:#92300f; font-size:12px; text-decoration:none; padding-top:1px;
    letter-spacing:0; text-align:center; margin-left:6px; }
.download:hover { background-position:left bottom; color:#92300f;}


/* inputs */

 #content .input-wrapper {clear:both; height:48px;}
 #content .input-wrapper input{width:316px; }
 #content label { margin:0 0 1px 1px; display:block;}
 #content .user-inputs-left {width:332px; float:left;}
 #content .user-inputs-right {width:322px; padding-left:10px; float:right;}



/* error */
td.td-error {padding:0; }
td.td-error-dark .errorExplanation { background:#eaeaea url(/images/error-bg.png) repeat-x; }
td.td-error-light .errorExplanation { background:#fff url(/images/error-bg-light.png) repeat-x; }

td.td-error .errorExplanation, td.td-error .error {margin:8px 0 0; border-bottom:0; }
td.td-error .error { background:transparent; }
td .errorExplanation, td .error { margin:0;padding:0 }
td .errorExplanation h2, td .error h2{ margin:0;padding:0 }
td .errorExplanation p, td .error p{ margin:0;padding:0 }
td.td-error .errorExplanation ul, td.td-error .error ul {margin:0}
.errorExplanation, .error {background:#f08916 url(/images/error.png) repeat-x top center;
    border: 2px solid #e8540e; border-left:0; border-right:0; padding:8px;
    margin: 6px 0 10px 0; color:#3b2409; font-weight:bold;}
.errorExplanation h2, .error h2{ text-transform:uppercase; color:#e8540e;
        font-size:18px; padding:0}
.errorExplanation p, .error p{  font-size:11px; margin-top:2px; font-weight:normal;}
.errorExplanation ul, .error ul { padding-left:16px; margin:10px 0 6px ;
        list-style-type:square; }
.errorExplanation ul li, .error ul li{  font-size:12px; line-height:18px; }

.fieldWithErrors input { background-color:#fac872; color:#942a00;
    border:1px solid #942a00; }

.errorExplanation a, .error a { color:#940000;}
.errorExplanation a:hover, .error a:hover {color:#660000;}


/* flash */


.notice {background-color:#cce2ef; font-weight:bold; border: 1px solid #6baed4;
    border-left:0; border-right:0; padding:8px; margin: 6px 0 10px 0; color:#0072b7;}
.notice h2{ text-transform:uppercase;font-size:17px;  }
.notice p{ font-size:11px; margin-top:2px;}
.notice ul { padding-left:16px; margin:10px 0 6px ;list-style-type:square; }
.notice ul li{ font-size:12px; line-height:18px;
        letter-spacing: 0.03em; word-spacing:0.15em; }

/* header */
#header { width:917px; padding:0 20px 0 10px; margin:0 auto; 
     height:115px; }
#header h1  { margin:11px 0 0; height:78px; width:228px; float:left;}
#header h1 a {  display:block; font-size:0; margin:0; padding:78px 0 0;
        background: url(/images/logo.png); overflow:hidden; width:228px;
        height:0 !important; z-index:3;}
* html #header h1 a { height:1%;}

/* #grade {position:absolute; right:0; top:0; width:767px; height:119px;
        background:url(/images/root/bg-grade.jpg);  } */

/* meta-nav */
#meta-nav { width:600px; font-size:11px; float:right; position:relative; }

ul#user-info { margin:0; list-style-type:none; padding:0;
    width:360px; left:0; top:28px; position:absolute; text-align:right; }
ul#user-info li { padding:0 4px; display:inline; text-align:right; }

#user-info a.edit-profile {  top:8px; left:0; display:inline-block;
    padding:0 0 0 17px; background: url(/images/icon/edit-profile.png) no-repeat;
    background-position:0 0; height:14px}
#user-info a.edit-profile:hover { background-position:bottom left;}

#meta-cart { float:right; width:221px; top:20px;
    background: url(/images/meta-cart.gif) no-repeat;
    height:58px; padding:0; position:relative;
    background-position:right top;}
#meta-cart a.upload { position:absolute; padding:2px 0 3px 14px; left:9px;
     top:6px; background: url(/images/icon/upload.png) no-repeat;
     height:14px; background-position:0 0;}
#meta-cart a.upload:hover { background-position:bottom left;}
#meta-cart a.cart { position:absolute; top:8px; left:112px; height:14px;
    padding: 0 0 0 18px; background: url(/images/icon/cart.png) no-repeat;
    background-position:0 0;}
#meta-cart a.cart:hover { background-position:bottom left;}
#meta-cart .number-of-items{position:absolute; top:35px; left:12px;
   font-weight:bold;}

/* content */

#content-wrapper { position:relative;
        width:927px; padding:0 0 0 20px; margin:0 auto;}

#content { width:664px; clear:both; }
/* #content-wrapper-thin {margin: 0 auto; width:650px; } */

#headline-wrapper-interaction {width:525px; margin: 0 auto;  padding:36px 0 0;}

#interaction {display:block; margin:0 auto; padding:28px 45px 0 35px;
        width:445px; height:176px;
        background: url(/images/root/bg-interaction.jpg) no-repeat; }
#interaction .user-inputs-center {margin: 0 auto; float:none; width:322px}
#interaction .flash {margin: 0 auto 12px; width:307px; padding:4px;}
#interaction h2 {padding:0; margin:0 0 2px;}

.address-block { background-color:#f4f7fa; padding:12px; margin: 0 0 12px 0;
    border:1px solid #d0d7db; width:300px;
    -moz-border-radius: 11px;
    -webkit-border-radius: 11px;
    -khtml-border-radius: 11px;
    border-radius: 11px;}
.address-block h4 {float:left; font-size:13px; text-transform:uppercase;}
.address-block p { clear:both; line-height:18px;  }

.non-address-block {padding:13px;margin: 0 0 12px 0;width:300px}
.non-address-block h4 {float:left;font-size:13px;text-transform:uppercase}
.non-address-block p {clear:both;line-height:18px}

#status {padding-bottom:16px}

table strong.price { padding:21px 0 0; display:block; }

#action-header { padding:0 0 10px; }
#action-footer { padding:20px 0 10px;}
#action-header, #action-footer { position:relative; clear:both; overflow:hidden; }
* html #action-header, * html #action-footer { height:1%; padding:0 0 10px; margin:20px 0 0; }
*+html {padding:0 0 10px; margin:20px 0 0;}
 
ul#addresses {margin:6px 0 0; padding:0; list-style-type:none;}
ul#addresses small{font-size:11px;}
ul#addresses .address-number{padding:0 0 4px;}
ul#addresses .button, .address-block .button, .non-address-block .button{
    margin-top:12px; }
ul#addresses a.right {margin-left:5px; font-size:11px; }


/*breadcrumbs*/
#breadcrumbs { position:relative; width:664px; height:42px; margin: 0 0 30px;
        font-size:17px; font-weight:normal ;color:#313638; }
.upload { background: url(/images/breadcrumbs/upload.png) no-repeat;}
.cart   { background: url(/images/breadcrumbs/cart.png) no-repeat;}
.order  { background: url(/images/breadcrumbs/order.png) no-repeat;}
.pay    { background: url(/images/breadcrumbs/pay.png) no-repeat;}
#breadcrumbs #breadcrumbs-upload{ position: absolute; top:11px; left:35px;}
#breadcrumbs #breadcrumbs-cart{ position: absolute; top:11px; left:235px;}
#breadcrumbs #breadcrumbs-order{ position: absolute; top:11px;  left:386px;}
#breadcrumbs #breadcrumbs-pay { position: absolute; top:11px; left:540px; }

/* teaser */
#teasers { position:absolute; right:20px; width:244px; top:113px;}
#teasers-top-reset {position:absolute; right:20px; width:244px; top:42px;}
.teaser { float:right; width:221px; margin:0 0 20px 23px;
    background: url(/images/teaser/teaser-body.gif) no-repeat;
    background-position:bottom center; font-size:11px;}
.teaser-head { width:177px; display:block; padding:22px 22px 0;
    background: url(/images/teaser/teaser-head.gif) no-repeat;
    background-position:top center; }
.attention {  padding:22px 22px 3px 48px; width:151px;
    background: url(/images/teaser/teaser-head-attention.png) no-repeat top center; }
.teaser-body {padding:0 22px 22px;}
.teaser-image { float:right; border:0; margin:0 0 4px 4px; }

.teaser-service { position:absolute; top:1px; right:20px; background: url(/images/teaser/teaser-service.gif) no-repeat top center;
    height:43px; width:134px; text-indent:-3000px; font-size:0; overflow:hidden;}
.teaser-service a { display:block;height:0 !important; padding:0 0 43px; width:134px; }
/*teaser-thin*/
.teaser-tight {background:none}
.teaser-tight h4.teaser-head{font-size:13px;font-weight:bold;background:none;
            padding:20px 16px 0;margin:0 0 4px}
.teaser-tight .teaser-body{padding:0 16px 20px}
.teaser-tight .teaser-image{float:left;margin:4px 8px 0 0 ;}


/*footer*/
#footer { color:#9fa4a6; font-size:11px; margin: 0 auto; clear:both;
        text-align:center; padding:50px 264px 20px 20px; width:664px;}
#footer a,#footer a:visited{ color:#9fa4a6;}
#footer a:hover{ color:#313638;}