/*------------------------------------------------------------------
[styleMe] Stylesheet: Screen
version: 1.0
last change: 20/11/08
successfully tested on browser: FF3, IE7, IE6, Safari3, Safari2

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

 /*------------------------------------------------------------------
[styleguide]
Schrift: "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,sans-serif;
-------------------------------------------------------------------*/

 /*------------------------------------------------------------------
base design skeleton
-------------------------------------------------------------------*/

/*--- the padding is needed for the footer and need to be the same value as the footer's height ---*/
html, body{
    margin: 0;
    padding: 0;
    min-width: 960px;
    font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,sans-serif;
    font-size: 12px;
    color: #1e3061;
}

html {
    overflow-y: scroll;
}

table,table th,table td,table tr{
	border:none;
	border-collapse:collapse;
	vertical-align:top;
	text-align:left;
	padding:0px;
	margin:0px;
}

#header {
    width: 950px;
    margin: 0 auto;
}

#container {
    width: 100%;
    min-height: 50px;
    background: url(../img/design/verlauf.jpg) repeat-x;
}

#main {
    width: 950px;
    min-height: inherit;
    margin: 0 auto;
    padding-bottom: 50px;
}

.contentinner {
    position: relative;
    margin: 0 265px 0 20px;
    z-index: 10;
}

.large{
    height: 400px;
}

.flash-contentinner {
    height: 369px;
    position: relative;
    z-index: 999;
    width: 705px;
}

#header .contentinner {
    margin-left: 0;
}

#header .small {
    font-family: Georgia, serif;
    margin-left: 22px;
    margin-top: 30px;
    font-size: 24px;
    text-transform: uppercase;
}

#header .header-image {
    height: 350px;
    width: 385px;
}

.header-image td {
    text-align: center;
}

.noshow {
	display: none;
}

.clear {
    clear: both;
    display: block;
    height: 1px;
    overflow: hidden;
    margin: 0;
    padding: 0;
}



 /*------------------------------------------------------------------
 right navigation skeleton
-------------------------------------------------------------------*/

#container-right {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    z-index: 10;
}

#navigation-container  {
    width: 986px;
    height: inherit;
    margin: 0 auto;
}

#navigation {
    width: 263px;
    margin-left: 723px;
    padding-bottom: 30px;
    position: relative;
}

#logo-link {
    width: 245px;
    height: 135px;
    padding:0;
    margin: 0;
    background: url(/media/img/design/logo.png) top left no-repeat;
    display: block;
    cursor: pointer;
}

#logo-link span {
    display: none;
}

#navigation .top {
    height: auto;
    width: 260px;
    background: url(../img/design/vorhang-top.jpg) no-repeat top left;
}

#navigation .main {
    width: 260px;
    background: url(../img/design/vorhang-middle.jpg) repeat-y;
    /* debug */
    height: auto;
}

#navigation .bottom {
    width: 260px;
    padding-bottom: 60px;
    height: 100%;
    background: url(../img/design/vorhang-bottom.png) no-repeat bottom left;
}

#navigation ul {
    list-style: none;
}

 /*------------------------------------------------------------------
 content columns
-------------------------------------------------------------------*/

#left-column {
    float: left;
    width: 380px;
    margin: 20px 0 20px 0;
}

#right-column {
    float: right;
    margin: 0 0 20px 20px;
}

 /*------------------------------------------------------------------
 basic styling
-------------------------------------------------------------------*/

h1, h2 {
    font-family: Georgia, serif;
    font-size: 20px;
    color: #1e3061;
    font-weight: normal;
}

h2 {
    margin-left: 0;
    padding-left:0;
}

h3 {
   font-family: Georgia, serif;
    font-size: 14px;
    color: #1e3061;
    text-transform: uppercase;
    font-weight: normal;
}

a {
    font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,sans-serif;
    color: #1e3061;
    text-decoration:none;
}

a img {
    border: none;
}

.error {
    color: #880000;
}


/*------------------
  PNG FIX for IE 5.5, IE 6
  ------------------*/
  img, div, a { behavior: url(/media/lib/iepngfix.htc) }

 /*------------------------------------------------------------------
 box styling
-------------------------------------------------------------------*/

.boxed {
    width: 245px;
    border: solid 1px #c7c7c7;
    margin: 0 0 15px 0;
    padding: 0;
}

.boxed h3 {
    padding: 8px 0 8px 20px;
    margin: 0 5px 0 5px;
    background: url(../img/design/trennstrich.gif) bottom center repeat-x;
}


 /*------------------------------------------------------------------
 styling in the left column
-------------------------------------------------------------------*/

#left-column h1 {
    padding: 5px 0 5px 20px;
    margin: 0 5px 0 5px;
    background: url(../img/design/trennstrich.gif) bottom repeat-x;
}

#left-column h4 {
    padding: 0 0 0 20px;
    margin: 5px 5px 10px 5px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
}


/* every pragraph has a padding this allows further styling of box elements with a higher width than the text*/
#left-column p, #left-column-home p, #right-column p, #right-column-home p {
   padding: 0 0 0 20px;
    margin: 5px 5px 10px 5px;
    font-size: 12px;
    line-height: 1.8em;
}

p {
    font-size: 12px;
    line-height: 1.8em;
    padding: 0 0 0 0px;
}

 /*------------------------------------------------------------------
 home
-------------------------------------------------------------------*/

.home {
    margin: 20px 0 0 25px;
}

#left-column-home {
    float: left;
    width: 320px;
    margin: 10px 0 0 0;
}

#right-column-home {
    float: right;
    margin: 10px 0 0 20px;
    width:320px;
}

#home-content tr td {
	width: 320px;
	padding: 0 0 0 25px;
}

 /*------------------------------------------------------------------
 left side goes with box
-------------------------------------------------------------------*/

#goes-with {
    width: 375px;
    border: solid 1px #c7c7c7;
    margin: 15px 0 50px 20px;
    padding: 5px 0 5px 0;
}

#goes-with h3 {
    padding: 5px 0 5px 20px;
    margin: 0 5px 0 5px;
    background: url(../img/design/trennstrich.gif) bottom center repeat-x;
}

#goes-with .product-image {
    float: left;
    padding: 0;
    width: 80px;
    height: 80px;
    text-align: center;
}

#goes-with h4 {
    padding: 0;
    margin: 0;
    line-height: 1.2em;
    text-transform: none;
}

#goes-with p {
    padding: 0;
    margin: 0;
    line-height: 1.5em;
}

#goes-with ul {
    list-style: none;
    margin: 0;
    padding: 0 0 10px 0;
}

#goes-with ul li {
    background: url(/media/img/design/trennstrich.gif) bottom center repeat-x;
    padding: 10px 0 10px 0;
    margin: 0;
}

#goes-with ul li:hover {
    background-color: #fafafa;
}

#goes-with p.description {

}

p.label {
    text-transform: uppercase;
    font-size: 12px;
}

 /*------------------------------------------------------------------
 product head (image gallery)
-------------------------------------------------------------------*/
#left-head {
    position: relative;
    text-align: center;
    width: 400px;
    float: left;
    margin: 20px 0 30px 0;
}

#product-thumbnails-container {
    position: absolute;
    top: 5px;
    left: 5px;
}

#product-thumbnails {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 50px;
}

#product-thumbnails li {
    position: relative;
    border: 1px solid #e6e6e6;
    display:block;width:60px;height:60px;overflow:hidden;float:left;margin:0 10px 10px 0;
}

#product-thumbnails li a{
    display: block;
}

#product-image-large {
    padding-left: 70px;

}

#right-head {
    float: right;
    width: 250px;
    height: 300px;
    text-align: center;
    padding: 0 0 30px 10px;
    margin-top: 30px;
    border-left: 1px solid #c7c7c7;
}

#right-head p {
    text-transform: uppercase;
    letter-spacing: 0.3em;
    padding-left: 0;
    margin-right: 0;
}

#goes-with-img {
    list-style: none;
    padding: 0 0 0 15px;
    margin: 0;
}

#goes-with-img li img {
    margin: 0 auto;
}

#goes-with-img li {
    float: left;
}

#goes-with-img li a {
    display: block;
    width: 110px;
    height: 110px;
    text-align: center;
}

 /*------------------------------------------------------------------
 styling of the navigation
-------------------------------------------------------------------*/

#menu {
    margin: 5px 0 0 0px;
    font-size: 12px;
}

#menu h2,
#menu div {
    padding: 0 0 0 30px;
}

#menu h2 {
    background: none;
}

#menu h2.sub {
    background: url(../img/design/opener1.gif) no-repeat 15px -26px;
}

#menu h2.sub.closed {
    background-position: 15px 7px;
}

#menu ul {
    margin: 0 0 0 15px;
    padding: 0;
}

#menu a {
    text-decoration: none;
}

#menu  li a{
    padding: 3px 3px;
    margin: 0;
    width: 183px;
    height: 14px;
    vertical-align: middle;
    display: block;
    text-transform: uppercase;
}

#menu ul li a {
    background: url(../img/design/nav-active-verlauf.png) no-repeat;
}

#menu ul li .current, #menu ul li .mark {
    background-position: 0 -180px;
}

#menu ul li ul {
    max-width: 200px;
}

#menu ul li ul li{
    padding: 3px 0 3px 8px;
}

#menu ul li ul li:hover{
    background: url(../img/design/nav-arrow.gif) left center no-repeat;
    padding: 3px 0 3px 8px;
}

#menu li ul li a{
    padding: 0;
    margin: 0;
    text-transform: none;
}

#menu h2 a{
    font-family: Georgia, serif;
}

#site-menu {
    list-style: none;
    padding: 0;
    width: 210px;
    margin: 10px 0 0 40px;
    height: 50px;
}

#site-menu a{
    padding: 40px 0 0 0;
    margin: 5px 10px 0 0;
    width: 65px;
    height: 0 !important;
    overflow:hidden;
    display: block;
    float: left;
}

#site-menu li {
    display: inline;
}

#site-menu #shop a {
    background: url(../img/design/nav_shop.png) top left no-repeat;
}


#site-menu #blog a {
    background: url(../img/design/nav_stylemag.png) top left no-repeat;
    width: 103px;
}

#site-menu #blog a:hover, #site-menu #blog .marked {
    background-position: 0 -40px;
}

#site-menu #shop a:hover, #site-menu #shop .marked{
    background-position: 0 -40px;
}

#shop-menu {
    list-style: none;
    padding: 0;
    width: 210px;
    margin: 0 0 0 20px;
    height: 100px;
    background: url(../img/design/trennstrich.gif) bottom center repeat-x;
}

#shop-menu a{
    display: block;
    padding: 61px 0 0 0;
    margin: 5px 10px 0 11px;
    width: 80px;
    float: left;
    text-decoration:none;
    text-align: center;
    font-size: 14px;
    font-weight: normal;
}
#shop-menu li {
	display: inline;
}
#shop-menu #cart a{
	background: url(../img/design/button-round-cart.png) center top no-repeat;
}
#shop-menu #search a{
	background: url(../img/design/button-round-search.png) center top no-repeat;
}
#shop-menu #cart a:hover, #shop-menu #search a:hover {
	background-position: center -106px;
}


 /*------------------------------------------------------------------
 sorting
-------------------------------------------------------------------*/
#sort-container {
    list-style: none;
    font-size: 14px;
    text-transform: uppercase;
    padding: 10px 0 10px 5px;
    height: 30px;
}

#sort-container .border-box {
    display: inline;
    float: left;
    background: url(../img/design/tab-active-right.png) top right no-repeat;
    margin: 0;
    padding: 0 9px 0 0;
    height: 30px;
}

#sort-container .border-content {
    background: url(../img/design/tab-active-left.png) top left no-repeat;
    height: 20px;
    padding: 5px 0 5px 5px;
}

#sort-container .border-content a {
    padding: 5px 8px 8px 10px;
}

#sort-container .active {
	font-weight: bold;
	color: #1e3061;
	text-decoration: none;
	text-transform: none;
}

#sort-container a {
	font-weight: bold;
	font-size: 13px;
	color: #ccc;
	text-decoration: none;
	text-transform: none;
        padding: 0 8px;
}

#sort-container a:hover {
	font-weight: bold;
	color: #1e3061;
	text-decoration: none;
}

.sort-label {
	float: left;
	padding: 10px 5px 0 0;
	font-size: 12px;
	color: #777e93;
        letter-spacing: 1px;
}

 /*------------------------------------------------------------------
 flash replace
-------------------------------------------------------------------*/

div .alt {
    display:none;
}

/*-------------------------------------------------------------------
 products overview
 ------------------------------------------------------------------*/
#product-overview p {
    padding: 0;
    margin: 0;
    line-height: 1.5em;
}

#product-overview {
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 0;
    width: 700px;
}

#product-overview a {
    text-decoration: none;
}

#product-overview li {
    width: 210px;
    height: 290px;
    margin-bottom: 25px;
    background: url(../img/design/artikel-btn.png) top left no-repeat;
    float: left;
    display: inline;
    list-style-type: none;
}

#product-overview li:hover{
    background-position: 0 -315px;
}

.product-overview-content h4 {
    font-size: 12px;
    padding: 0;
    margin: 0;
    line-height: 1.2em;
    text-transform: none;
}

.product-overview-content  {
    padding: 0 5px;
}

.product-overview-content h4 {
    padding-bottom: 2px;
}

.product-overview a:hover {
    text-decoration: none;
}

.product-overview a:visited {
    text-decoration: none;
}


.product-overview-image {
    margin: 5px 0;
}

#product-overview-split {
   clear: both;
   text-align: right;
   background: url(../img/design/trennstrich.gif) top left repeat-x;
}

#product-overview-split ul {
    padding: 5px 0;
}

#product-overview-split-bottom {
   margin: 5px;
   background: url(../img/design/trennstrich.gif) bottom left repeat-x;
}

#product-overview-split li{
   display: inline;
   list-style-type: none;
   vertical-align: middle;
   padding-right: 5px;
}

#product-overview-split li a {
    font-family: Georgia, sans-serif;
    font-size: 14px;
    text-decoration: none;
}

#product_category h4 {
	margin-left: 5px;
}

#product_category table {

}

/*-------------------------------------------------------------------
 brand product overview
 ------------------------------------------------------------------*/

#brand_overview {
    padding-top: 50px;
}

.brand_description p {
    padding: 0;
    margin: 0;
}

.brand_image {
    width: 200px;
    vertical-align: middle;
}
.brand_description {
    text-align: left;
    width: 380px;
}

.brand_description .bordered {
    margin: 0 0 0 10px;
    padding-left: 30px;
    border-left: 1px solid #ccc;
}

.brandproducts {
    clear: both;
    margin-top: 20px;
}
/*-------------------------------------------------------------------
 checkout navigation
 ------------------------------------------------------------------*/

#checkout-nav {
    background: url(../img/design/tab-bg.png) repeat-x bottom left;
    height: 38px;
    padding-top: 10px;
}

#checkout-nav a {
	text-decoration: none;
}

#checkout-nav .checkout-button {
	display: inline;
	float: left;
	height: 40px;
}

#checkout-nav span {
	margin: 20px 8px 8px 16px;
}

#checkout-nav .active {
	background: url(../img/design/tab-active-right.png) bottom right no-repeat;
	padding-right: 9px;
	height: 40px;
	color: #1e3061;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
}

#checkout-nav .active div {
	background: url(../img/design/tab-active-left.png) bottom left no-repeat;
	height: 40px;
}

#checkout-nav .active span {
	position: relative;
	top: 5px;
	padding-bottom: 10px;
	background: url(../img/design/tab-active-arrow.jpg) bottom center no-repeat;
}
#checkout-nav .inactive {
	background: url(../img/design/tab-inactive-right.png) bottom right no-repeat;
	padding-right: 9px;
	height: 40px;
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;
	color: #999;
}

#checkout-nav .inactive a {
	color: #999;
}

#checkout-nav .inactive div {
	background: url(../img/design/tab-inactive-left.png) bottom left no-repeat;
	height: 40px;
}

#checkout-nav .inactive span {
	position: relative;
	top: 10px;
}

#checkout-nav .disabled {
	background: url(../img/design/tab-disabled-right.png) bottom right no-repeat;
	padding-right: 9px;
	height: 40px;
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;
	color: #ccc;
}

#checkout-nav .disabled a {
	color: #ccc;
}

#checkout-nav .disabled div {
	background: url(../img/design/tab-disabled-left.png) bottom left no-repeat;
	height: 40px;
}

#checkout-nav .disabled span {
	position: relative;
	top: 10px;
}

#checkout-nav .checkout-label {
    padding: 0px 5px;
}

#checkout-nav .inactive {

}

#checkout-nav .disabled {

}



/*-------------------------------------------------------------------
 cart table
 ------------------------------------------------------------------*/

#cart-overview {
	margin: 10px;
	background: url(../img/design/trennstrich.gif) top left repeat-x;
	width: 640px;
}

#cart-overview .line {
	background: url(../img/design/trennstrich.gif) bottom left repeat-x;
}

#cart-overview .line th {
	padding: 5px 10px 5px 0;
}

#cart-overview td {
	vertical-align: top;
	margin-top: 5px;
}

#cart-overview .cart-item td {
	text-transform: uppercase;
        padding: 25px 10px 5px 0;
        font-weight: bold;
}

#cart-overview .cart-item a {
	text-decoration: none;
}

#cart-overview .cart-item a.productname {
	text-decoration: none;
	font-family: Georgia, serif;
        font-weight: normal;
        font-size: 1.1em;
}

#cart-overview .total {
	font-family: Georgia, serif;
	line-height: 1.8em;
}

#cart-overview .total td {
	padding-top: 10px;
	padding-bottom: 10px;
}

#cart-overview .total strong {
	font-size: 16px;
	padding-right: 15px;
}

#cart-overview .total-cart {
	font-size: 16px;
}

#cart-overview .cart-image {
	margin-top: 2px;
}

#cart-overview .cart-item .cart-product {
	padding-top: 19px;
	padding-bottom: 15px;
}

#cart-overview .cart-item .cart-image {
	padding-top: 15px;
}

#cart-overview .cart-item .cart-quantity {
	padding-top: 21px;
}

#cart-overview th {
    font-family: Georgia, serif;
}

#brand-flash {
    margin-left: -20px;
}

#cart-overview .buttons td {
	padding-top: 20px;
	vertical-align: bottom;
}

#cart-overview .buttons td.right a.button {
	margin: 0 0 0 auto;
}

#cart-overview .buttons td.left a.button {
	margin: 0 auto 0 0;
}



/* various */

html body h3.sansserif {
    font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,sans-serif;
    font-weight: bold;
    font-size: 16px;
}

.pdf a {text-decoration: none; padding: 20px 0; display:block;float:left;}
.pdf a span {margin: 18px 0 0 10px; display: block; float:left;}
.pdf a img {float:left;}


a#feinheit{
	display:block;
	position:absolute;
	right:0px;
	top:0px;
	width:16px;
	height:54px;
	text-indent:-7777px;
	background:url(/media/img/design/feinheit.gif) no-repeat;
}



/*-------------------------------------------------------------------
 galeria
 ------------------------------------------------------------------*/
.galleria{list-style:none;width:200px}
.galleria li{display:block;width:60px;height:60px;overflow:hidden;float:left;margin:0 10px 10px 0}
.galleria li a{display:none}
.galleria li div{position:absolute;display:none;top:0;left:180px}
.galleria li div img{cursor:pointer}
.galleria li.active div img,.galleria li.active div{display:block; border: 1px solid #ba3d6f; }
.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto}
.galleria li .caption{display:block;padding-top:.5em}
* html .galleria li div span{width:400px} /* MSIE bug */