/* ********************************************** */
/* CCS document for site: www.design-and-arts.com */
/* ********************************************** */


/* Styles for Elements */
/* ******************* */

html {
margin: 0;
padding: 0;
height: 100%;
}

/* 1em should be the default font size of most win browsers, that is 16px */
/* using 'relative' em and percentages instead of 'fixed' px is done for accessibility reasons */
body {
background-color: #b3b3b3;
color: #000000;
text-align: center;
margin: 0;
padding: 0;
font: 16px Arial, Verdana, Helvetica, sans-serif;
height: 100%;
min-height: 560px;
min-width: 750px;
}

h1 {
font-size: 112.5%;
font-weight: bold;
margin: 0 0 15px 0;
padding: 10px 10px 0 0;
text-align: left;
}

h2 {
font-size: 100%;
font-weight: bold;
margin: 10px 0 15px 0;
padding: 0 10px 0 0;
text-align: left;
}

p {
font-size: 75%;
margin: 0 0 10px 0;
padding: 0 10px 0 0;
}

p.error {
font-size: 75%;
margin: 200px 0 0 0;
padding: 0;
font-weight: bold;
color: #ff0000;
text-align: center;
}

ul.content {
font-size: 75%;
margin: 0 0 10px 25px;
padding: 0;
}

ul.content li {
margin: 10px 0 0 0;
padding: 0;
}

ul.linklist {
padding: 0;
margin: 10px 0 0 20px;
list-style: disc;
}

ul.linklist li {
padding: 0;
margin: 0;
line-height: 1.6em;
}

.error {font-weight: bold; color: #ff0000;}
.bold {font-weight: bold;}
.justify {text-align: justify;}
.center {text-align: center;}

a.main:link {font-size: 87.5%; font-weight: bold; text-decoration: none; color: #000000;}
a.main:visited {font-size: 87.5%; font-weight: bold; text-decoration: none; color: #333333;}
a.main:hover {font-size: 87.5%; font-weight: bold; text-decoration: underline overline; color: #666666;}
a.main:active {font-size: 87.5%; font-weight: bold; text-decoration: underline overline; color: #666666;}

a.sub:link {font-size: 75%; font-weight: bold; text-decoration: none; color: #000000;}
a.sub:visited {font-size: 75%; font-weight: bold; text-decoration: none; color: #333333;}
a.sub:hover {font-size: 75%; font-weight: bold; text-decoration: underline overline; color: #666666;}
a.sub:active {font-size: 75%; font-weight: bold; text-decoration: underline overline; color: #666666;}

a.main.nav-highlight:link {text-decoration: underline overline;}
a.main.nav-highlight:visited {text-decoration: underline overline;}
a.sub.nav-highlight:link {text-decoration: underline overline;}
a.sub.nav-highlight:visited {text-decoration: underline overline;}

a img {
border: 0;
margin: 0;
padding: 0;
}


/* Background and Navigation */
/* ************************* */

/* containing div for vertical centering */
div#center-site {
position: relative; /* gain stacking context for absolutely placed element */
height: 100%;
min-height: 540px;
width: 750px;
margin-left: auto; /* center for compliant browsers */
margin-right: auto; /* center for compliant browsers */
}


/* Background */
/* ---------- */

/* Background Image */
div#background {
position: absolute;
width: 750px;
height: 540px;
left: 0;
top: 50%; /* for vertical centering, together with negative top margin and containing div center-site */
border: 1px solid #000000;
background: url(http://www.design-and-arts.com/images/site/bg-logofragment.gif) repeat-y #ffffff;
margin: -270px auto 0 auto; /* negative top margin is for vertical centering, total height is 540px */
padding: 0;
text-align:left;
z-index: 1;
}

/* Position Logo */
div#logo {
position: absolute;
width: 155px;
height: 90px;
top: 10px;
left: 10px;
background: transparent;
border: 0;
z-index: 3;
margin: 0;
padding: 0;
}

/* Vertical white line to cover the top part of the vertical black line in the background image */
div#white-line-cover {
position: absolute;
width: 1px;
height: 115px;
top: 0;
left: 189px;
background: #ffffff;
border: 0;
z-index: 2;
margin: 0;
padding: 0;
}

/* Position Pictograms */
div#pictograms {
position: absolute;
width: 530px;
height: 35px;
top: 67px;
left: 189px;
background: url(http://www.design-and-arts.com/images/site/bg-pictogramme.gif) no-repeat;
border: 0;
vertical-align: middle;
z-index: 3; /* has to be above div#contents-offset-top */
margin: 0;
padding: 0;
}


/* Content */
/* ******* */

div#contents-standard {
position: absolute;
width: 545px;
height: 375px;
top: 155px;
left: 199px;
background: transparent;
border: 0;
clear: both;
z-index: 2;
margin: 0;
padding: 0;
overflow: auto;
}

/* Navigation Elements */
/* ------------------- */

/* Position Navigationbar Products*/
div#nav-products {
position: absolute;
height: 20px;
width: 535px;
top: 125px;
left: 184px;
background: transparent;
border-bottom: 1px solid #000000;
z-index: 4;
margin: 0;
padding: 0;
}

/* Position of navigation for product subcategories (if present) */
div#nav-products-sub {
position: absolute;
left: 10px;
bottom: 10px;
height: 260px;
width: 179px;
text-align: left;
vertical-align: top;
background: transparent;
z-index: 2;
margin: 0;
padding: 0;
line-height: 1.2em;
}

/* Position Navigation General */
div#nav-general {
position: absolute;
left: 10px;
top: 128px;
text-align: left;
vertical-align: top;
background: transparent;
border: 0;
z-index: 3;
margin: 0;
padding: 0;
line-height: 1.2em;
}

/* Position of home and product categories navigation links */

div#nav-home {
position: absolute;
left: 435px;
line-height: 35px;
z-index: 3;
margin: 0;
padding: 0;
}

div#nav-1_de { /* Deutsch */
position: absolute;
left: 30px;
vertical-align: bottom;
z-index: 4;
margin: 0;
padding: 0;
}

div#nav-2_de { /* Deutsch */
position: absolute;
left: 224px;
vertical-align: bottom;
z-index: 4;
margin: 0;
padding: 0;
}

div#nav-1_en { /* English */
position: absolute;
left: 30px;
vertical-align: bottom;
z-index: 4;
margin: 0;
padding: 0;
}

div#nav-2_en { /* English */
position: absolute;
left: 224px;
vertical-align: bottom;
z-index: 4;
margin: 0;
padding: 0;
}

div#nav-3 {
position: absolute;
left: 300px;
vertical-align: bottom;
z-index: 4;
margin: 0;
padding: 0;
}

div#nav-4 {
position: absolute;
left: 400px;
vertical-align: bottom;
z-index: 4;
margin: 0;
padding: 0;
}

/* Rollover navigation for product categories */
/* Code idea for drop-down menus based on Suckerfish Dropdownsby Patrick Griffiths and Dan Webb */
/* at http://www.alistapart.com/articles/dropdowns/ */

div#nav-products ul {
padding: 0;
margin:0 ;
list-style: none;
z-index: 4;
}

div#nav-products ul li {
float: left;
position: relative;
top: 0;
margin: 0;
padding: 0;
line-height: 1.3em;
z-index: 4;
}

/* Deutsch */
div#nav-products ul li ul.nav_ul_de {
display: none;
position: absolute; 
top: 1.25em;
left: 0;
margin: 0 0 0 -25px;
padding: 0 0 5px 25px;
list-style: none;
border: 1px solid #000000;
background: #fafafa;
vertical-align: middle;
line-height: 1em;
z-index: 4;
}

div#nav-products div#nav-1_de ul li ul {width: 249px;}
div#nav-products div#nav-2_de ul li ul {width: 112px;}

/* Hack for Firefox not to show several list items in the same row */
div#nav-products div#nav-1_de ul li {width: 249px;}
div#nav-products div#nav-2_de ul li {width: 112px;}

/* Modified SBMH Hack for IE 5 browsers */
* html div#nav-products div#nav-1_de ul li ul {width: 276px; w\idth: 249px;}
* html div#nav-products div#nav-2_de ul li ul {width: 139px; w\idth: 112px;}


/* English */
div#nav-products ul li ul.nav_ul_en {
display: none;
position: absolute; 
top: 1.25em;
left: 0;
margin: 0 0 0 -25px;
padding: 0 0 5px 25px;
list-style: none;
border: 1px solid #000000;
background: #fafafa;
vertical-align: middle;
line-height: 1em;
z-index: 4;
}

div#nav-products div#nav-1_en ul li ul {width: 249px;}
div#nav-products div#nav-2_en ul li ul {width: 112px;}

/* Hack for Firefox not to show several list items in the same row */
div#nav-products div#nav-1_en ul li {width: 249px;}
div#nav-products div#nav-2_en ul li {width: 112px;}

/* Modified SBMH Hack for IE 5 browsers */
* html div#nav-products div#nav-1_en ul li ul {width: 276px; w\idth: 249px;}
* html div#nav-products div#nav-2_en ul li ul {width: 139px; w\idth: 112px;}

/* not language-specific */
div#nav-products ul li > ul {
top: auto;
left: auto;
}

div#nav-products ul li:hover ul { display: block; } /* doesn't currently work for Gecko based browsers if the drop-down menus expand over a div with overflow: auto | scroll set */
div#nav-products ul li.over ul { display: block; border: 1px solid #000000; top: 20px;} /* for IE */


/* Needed for Gecko drop-down menu hover - overflow: auto | scroll bug workaround */
/* The div size and position should cover the whole area of the drop-down menu + large margins; z-index should be as low as possible, background transparent */
div#nav-productgroup0 {
position: absolute;
top: 0px;
left: 0px;
background: transparent;
width: 750px;
height: 540px;
z-index: 1;
}

/* Position of the black vertical separation lines between product navigation links */
div#nav-separator1_de {
position: absolute;
bottom: 0;
width: 1px;
height: 14px;
left: 199px;
background: #000000;
border: 0;
overflow: hidden;
z-index: 4;
margin: 0;
padding: 0;
}

div#nav-separator1_en {
position: absolute;
bottom: 0;
width: 1px;
height: 14px;
left: 199px;
background: #000000;
border: 0;
overflow: hidden;
z-index: 4;
margin: 0;
padding: 0;
}

div#nav-separator2 {
position: absolute;
bottom: 0;
width: 1px;
height: 14px;
left: 280px;
background: #000000;
border: 0;
overflow: hidden;
z-index: 4;
margin: 0;
padding: 0;
}

div#nav-separator3 {
position: absolute;
bottom: 0;
width: 1px;
height: 14px;
left: 375px;
background: #000000;
border: 0;
overflow: hidden;
z-index: 4;
margin: 0;
padding: 0;
}

/* Spacers are necessary so that IE(6) shows the right length of the separators; otherwise they would be as high as #nav-produkte */
div#nav-spacer1_de {
position: absolute;
top: 0;
width: 1px;
height: auto;
left: 199px;
background: #ffffff;
border: 0;
z-index: 4;
margin: 0;
padding: 0;
}

div#nav-spacer1_en {
position: absolute;
top: 0;
width: 1px;
height: auto;
left: 199px;
background: #ffffff;
border: 0;
z-index: 4;
margin: 0;
padding: 0;
}

div#nav-spacer2 {
position: absolute;
top: 0;
width: 1px;
height: auto;
left: 280px;
background: #ffffff;
border: 0;
z-index: 4;
margin: 0;
padding: 0;
}

div#nav-spacer3 {
position: absolute;
top: 0;
width: 1px;
height: auto;
left: 375px;
background: #ffffff;
border: 0;
z-index: 4;
margin: 0;
padding: 0;
}


/* Page-specific Styles */
/* ******************** */

/* Index */
/* ----- */

h1.index {
font-size: 125%;
margin: 20px 0 10px 0;
padding: 0;
text-align: center;
}

p.index {
font-size: 62.5%;
margin: 0 0 10px 0;
padding: 0;
}

/* Background Image */
div#background-index {
position: absolute;
width: 750px;
height: 540px;
left: 0;
top: 50%;
border: 1px solid #000000;
background: url(http://www.design-and-arts.com/images/site/bg-logofragment-index.gif) no-repeat #ffffff;
margin: -270px auto 0 auto;
padding: 0;
z-index: 1;
}

/* Position Animation */
div#logo-index {
position: relative;
width: 189px;
height: 110px;
background: #ffffff;
border: 0;
z-index: 2;
margin: 25px auto 5px auto;
padding: 0;
clear: both;
}

/* Main Content */
div#contents-index {
position: relative;
width: 710px;
height: 240px;
top: 0;
left: 0;
background: transparent;
border: 0;
clear: both;
z-index: 3;
margin: 0;
padding: 0 20px 0 20px;
text-align: center;
}

/* Footer */
div#nav-impressum-sitemap {
position: relative;
width: 750px;
height: 20px;
top: 8px;
font-size: 75%;
text-align: center;
background: transparent;
border: 0;
z-index: 4;
}

/* Promotion Images */
div#nav-promotion-images {
position: relative;
top: 0px;
width: 715px;
height: 114px;
text-align: center;
background: transparent;
overflow: hidden;
border: 0;
z-index: 4;
padding: 0;
margin: 0 auto 0 auto;
clear: both;
}

div.promotion-image {
position: relative;
float: left;
width: 133px;
height: 110px;
margin-left: 10px;
padding: 0;
border: 1px solid #d9d9d9;
overflow: hidden;
background: transparent;
text-align: center;
}


/* Sitemap */
/* ------- */

h1.sitemap {
font-size: 125%;
margin: 25px 0 10px 0;
padding: 0;
text-align: center;
}

/* Background Image is same as for index */

div#contents-sitemap {
position: relative;
width: 750px;
height: 465px;
top: 0;
left: 0;
background: transparent;
border: 0;
clear: both;
z-index: 2;
margin: 0;
padding: 0;
overflow: auto;
}

div#col-left-sitemap {
position: absolute;
width: 220px;
top: 0;
left: 10px;
background: transparent;
border: 0;
margin: 0;
padding: 0;
text-align: left;
}

div#col-middle-sitemap {
position: absolute;
width: 230px;
/* SMBH Hack */
\width: 250px;
w\idth: 230px;
top: 0;
left: 240px;
background: transparent;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
margin: 0;
padding: 0 10px 0 10px;
text-align: left;
}

div#col-right-sitemap {
position: absolute;
width: 220px;
top: 0;
left: 500px;
background: transparent;
border: 0;
margin: 0;
padding: 0;
text-align: left;
}


/* Contact Forms */
/* ------------- */

form {
font-size: 75%;
margin-top: 5px;
}

input, textarea {
font: 100% Arial, Verdana, Helvetica, sans-serif;
color: #000000;
}

fieldset {
border: 0;
margin: 0;
padding: 0;
}

legend {
font-weight: bold;
color: #000000;
}

fieldset#contact-sender {
float: left;
width: 230px;
}

fieldset#contact-sender label {
width: 5em;
float: left;
text-align: right;
margin: 0 1em 3px 0;
clear: both;
color: #000000;
}

fieldset#contact-message {
border: 0;
width: 270px;
margin: 0;
}

fieldset#contact-message label {
text-align: left;
margin: 0 0 5px 0;
clear: both;
color: #000000;
}

input.input-box {
margin-bottom: 3px;
color: #000000;
}

input.submit-button {
width: 100px;
margin: 20px 0 0 20px;
font-weight: bold;
color: #ffffff;
background: #000000;
border: 2px #efefef outset;
}

div#contents-contact h1,div#contents-contact p,div#contents-contact form {
margin-left: 10px;
}

div#contact-address p {
margin: 0 0 0 10px;
padding: 0;
}

div#contact-means p {
margin: 0;
padding: 0;
}

div#contents-contact {
position: absolute;
width: 540px;
height: 375px;
top: 155px;
left: 199px;
background: transparent;
color: #000000;
line-height: 1.2em;
border: 0;
clear: both;
z-index: 2;
margin: 0;
padding: 0;
overflow: auto;
}

div#contact-address {
position: absolute;
top: 35px;
left: 0;
width: 200px;
height: 60px;
margin: 0;
padding: 0;
text-align: left;
color: #000000;
}

div#contact-means {
position: absolute;
top: 35px;
left: 200px;
width: 320px;
height: 60px;
margin: 0;
padding: 0;
text-align: left;
color: #000000;
}


/* Products and Services */
/* --------------------- */

h1.product-preview {
margin: 0 0 15px 0;
padding: 15px 0 0 10px;
text-align: left;
}

h2.product-preview {
font-size: 87.5%;
margin: 0 0 5px 0;
padding: 0;
}

p.product-preview {
margin: 0;
padding: 0;
}

p.product-preview-status {
font-size: 87.5%;
font-weight: bold;
margin: 0;
padding: 0;
text-align: left;
}

p.product-preview-status.sold {
color: #ff828c;
}

p.product-preview-status.available {
color: #cfffcd;
}

p.product-preview-status.available-ebay {
color: #fffaae;
}

p.product-preview-status.hold {
color: #ffcc33;
}

a.products-sub-title {
font-variant: small-caps;
line-height: 2em;
}

a.product-preview:link {font-size: 100%; font-weight: normal; text-decoration: none; color: #ffffff;}
a.product-preview:visited {font-size: 100%; font-weight: normal; text-decoration: none; color: #ffffff;}
a.product-preview:hover {font-size: 100%; font-weight: normal; text-decoration: underline overline; color: #cccccc;}
a.product-preview:active {font-size: 100%; font-weight: normal; text-decoration: underline overline; color: #cccccc;}

div#contents-products div.ident-detail {
position: relative;
float: right;
clear: both;
bottom: 0;
right: 20px;
margin: 0;
padding: 0;
}

div#contents-products div.ebay-url {
position: relative;
float: right;
clear: both;
bottom: 0;
right: 20px;
margin: 0;
padding: 0;
}

div#contents-products div.info-buy {
position: relative;
float: right;
clear: both;
bottom: 0;
right: 20px;
margin: 0;
padding: 0;
}

div#contents-products {
position: absolute;
width: 540px;
height: 375px;
top: 155px;
left: 199px;
background: #000000;
color: #ffffff;
line-height: 1.2em;
border: 0;
clear: both;
z-index: 2;
margin: 0;
padding: 0;
overflow: auto;
}

div.product-preview {
position: relative;
clear: both;
width: 500px;
min-height: 120px;
height: auto;
margin: 20px 10px 10px 10px;
padding: 0;
}

* html div.product-preview {height: 120px;} /* min-height workaround for IE */

div.product-preview-image {
position: absolute;
top: 0;
left: 0;
width: 133px;
height: 120px;
margin: 0;
padding: 0;
background: transparent;
text-align: center;
overflow: hidden;
z-index: 3;
}

div.product-preview-text {
position: relative;
top: 0;
left: 150px;
width: 350px;
margin: 0;
padding: 0;
background: transparent;
text-align: left;
vertical-align: top;
z-index: 3;
}

div.contents-products img {
text-align: center;
margin: 0;
padding: 0;
z-index: 2;
}


/* Product detail pop-ups */
body#product-detail {
background: #000000;
color: #ffffff;
margin: 0;
padding: 0;
}

body#product-detail img {
border: 0;
margin: 0;
padding: 0;
}

div#product-detail-largeimage1 {
position: absolute;
top: 5px;
left: 195px;
width: 800px;
height: 800px;
background: #000000;
border: 0;
overflow: hidden;
z-index: 2;
}

div#product-detail-largeimage2 {
position: absolute;
top: 5px;
left: 195px;
width: 800px;
height: 800px;
background: #000000;
border: 0;
overflow: hidden;
z-index: 1;
}

div#product-detail-largeimage3 {
position: absolute;
top: 5px;
left: 195px;
width: 800px;
height: 800px;
background: #000000;
border: 0;
overflow: hidden;
z-index: 1;
}

div#product-detail-largeimage4 {
position: absolute;
top: 5px;
left: 195px;
width: 800px;
height: 800px;
background: #000000;
border: 0;
overflow: hidden;
z-index: 1;
}

div#product-detail-smallimage1 {
position: absolute;
top: 5px;
left: 15px;
width: 150px;
height: 130px;
background: transparent;
border: 0;
overflow: hidden;
z-index: 1;
}

div#product-detail-smallimage2 {
position: absolute;
top: 145px;
left: 15px;
width: 150px;
height: 130px;
background: transparent;
border: 0;
overflow: hidden;
z-index: 1;
}

div#product-detail-smallimage3 {
position: absolute;
top: 285px;
left: 15px;
width: 150px;
height: 130px;
background: transparent;
border: 0;
overflow: hidden;
z-index: 1;
}

div#product-detail-smallimage4 {
position: absolute;
top: 425px;
left: 15px;
width: 150px;
height: 130px;
background: transparent;
border: 0;
overflow: hidden;
z-index: 1;
}


/* not needed any more

div#product-detail-h1 {
position: absolute;
top: 55px;
left: 15px;
width: 550px;
height: 25px;
vertical-align: middle;
text-align: center;
background: transparent;
border: 0;
}

div#product-detail-close {
position: absolute;
top: 15px;
left: 15px;
background: transparent;
border: 0;
font-size: 75%;
}

h1.product-detail {
font-size: 100%;
width: 100%;
margin: 0;
padding: 0;
line-height: 25px;
text-align: center;
}

*/