/* mac hide\*/
html, body {height:100%}
/* end hide */

body {
	margin: 0px;
	padding: 0px;
	font-size:11px;
	font-family: Arial, sans-serif;
	font-weight:normal;
	line-height:14px;
	text-align: center;
	background:  #fdf5ea url(images/bg.gif);
	background-repeat: repeat-x;
}

#container {
	text-align: left;
	margin: 0px auto;
	padding: 0px;
	font-weight:normal;
	line-height:14px;
	width: 980px;
	min-height: 100%;
	background: url(images/container_bg.gif) top right repeat-y;
}

* html #container { height:100%; }

#ban {
	margin: 0px;
	padding: 0px;
	background-image: url(images/ban.jpg);
	background-position: top;
	background-repeat: no-repeat;
	height: 179px;
	width: 980px;
}

#main {
	float: left;
	width: 980px;
	padding: 0px;
}

#main_left_bg {
	float: left;
	width: 180px;
	padding: 15px 10px 25px 20px;
	color: #154538;
}

* html #main_left_bg {
	padding: 25px 0px 25px 20px;
}

*+html #main_left_bg {
	padding: 25px 0px 25px 20px;
}

#main_middle_bg {
	float: left;
	width: 500px;
	margin: 20px 0px 0px 10px;
}

#main_middle_header {
	float: left;
	background-image: url(images/header_middle.gif);
	background-repeat: no-repeat;
	width: 490px;
	height: 31px;
	padding: 6px 0px 0px 10px;
	margin:0px;
	font-size: 13px;
	font-weight: bold;
	color: #508c7c;
}

#main_middle_box, #main_middle_box_home  {
	float: left;
	background-color: #fff3e1;
	border: 2px solid #fce2bb;
	width: 472px;
	margin: 0px;
	padding: 10px;
}

#main_middle_box_home {
	background-color: #fff3e1;
	border: 2px solid #fce2bb;
	width: 717px;
}

#main_right_bg {
	float: left;
	width: 240px;
	margin: 20px 0px 20px 10px;
}

div.main_right_header {
	float: left;
	background-image: url(images/header_right.gif);
	background-repeat: no-repeat;
	width: 223px;
	height: 31px;
	padding: 6px 0px 0px 10px;
	font-size: 13px;
	font-weight: bold;
	color: #508c7c;
}

div.main_right_box {
	float: left;
	background-color: #fff3e1;
	border: 2px solid #fce2bb;
	width: 212px;
	margin-bottom: 25px;
	padding: 10px 5px 10px 10px;
}

#content_footer{
    text-align: center;
    padding-bottom:39px;
    color: #000;	
}

#footer {
	margin: 0px auto;
	padding: 0px;
	margin-top: -190px;
	background: url(images/footer.gif) bottom;
	background-repeat: no-repeat;
	height: 190px;
	width: 980px;
	clear: both;
	font-size: 11px;
	color: #508C7C;
}

#footer_left{
	float: left;
	width: 200px;
	padding-top: 20px;
}

#footer_center{
    float: left;
    width: 580px;
}

#footer_right{
    float: left;
    width: 200px;
    padding-top: 20px;
}

div.error_box{
	width:400px;
	background-color:#FFC168;
	border:2px solid #FF9600;
	padding: 10px;
	margin:5px auto 15px;
}

#shipping_free_box {
	float: left;
	margin-top: 48px;
	margin-left: 6px;
}

#support_box{
    padding-left:372px;
    padding-top:16px;	
}

* html #support_box{
    padding-left:367px;
    padding-top:16px;   
}

.clear {
	clear:both;
	height: 200px;
}

.img_zoom_box{
	margin:0;
}

.img_zoom_box div.hoverbox{display:none;}

.img_zoom_box:hover div.hoverbox
{
	display:block;
	position:absolute;
	width:350px;
	/*height:232px;*/
	margin-top: -355px;
	background-color:#FFF;
	border:1px solid #000;
	padding:5px;
}

/*** text ***/
div,p {
	margin-top:0;  /*clear top margin for mozilla*/
	margin-bottom:10px;
}

p.left_header {
    font-size: 14px;
    font-weight: bold;
    color: #ff9600;
    text-decoration: underline;
    margin: 5px 0px 10px;	
}

p.right_header {
    font-size: 13px;
    font-weight: bold;
    color: #ff9600;
    margin: 10px 0px 5px 0px;
}

h1 {
	font-size: 11px;
	font-weight: bold;
	color: #000;
	margin: 5px 0px 5px 0px;
}

h2 {
	font-size: 14px;
	font-weight: bold;
	color: #ff9600;
	margin: 10px 0px 5px 0px;
}

h3 {
	font-size: 12px;
	font-weight: bold;
	color: #ff9600;
	margin: 10px 0px 10px 0px;
}

ul, ol {
    margin: 0;
    padding: 0;	
}

ul li, ol li {
	line-height:18px;
	padding-left:0px;
    margin-left: 15px;
    margin-bottom: 5px;
}


/*** hyperlinks ***/
a{
	text-decoration: none;
}

a.ban_link:active, a.ban_link:link, a.ban_link:visited{
	float: left;
	margin-top: 46px;
	margin-left: 14px;
	margin-bottom:3px;
	font-size: 12px;
	font-weight: bold;
	color: #205647;
	text-decoration: none;
}

a.ban_link:hover { color: #65a393; }

#main_right_header a{
	font-size: 13px;
	font-weight: bold;
	color: #508c7c;
	text-decoration:none;
}

.main_left_steps {
	background-image: url(images/pfeil.gif);
	background-repeat: no-repeat;
	font-size: 12px;
	font-weight: bold;
	color: #999;
	padding: 0px 0px 0px 25px;
}

div.main_left_steps a {
	color: #154538;
	text-decoration: none;
}

div.main_left_steps a:hover { color: #65a393; }

.active {
	font-style:italic;	
}

a.steps_backlink{
	color: #154538;
	text-decoration:none;
}

a:active, a:link, a:visited {
	color: #508c7c;
	text-decoration:none;
}

a:hover{
	text-decoration:underline;
}

#content_footer a:active, #content_footer a:link, #content_footer a:visited {
    color: #000;
    text-decoration:underline;
}

#footer a:active, #footer a:link, #footer a:visited {
    color: #508c7c;
    text-decoration:underline;
}

a img{
	border-width:0px;
}

/* *** home buttons *** */
div.product_btn_container, div.product_btn_container_single, div.product_btn_container_double{
    width:237px;
    height:153px;
    margin-bottom:15px;
    margin-right:2px;
    float:left;
    background-position:center;
    background-repeat:no-repeat;
    overflow: hidden;
}

div.product_btn_container_single {
    margin-left:239px;
}

* html div.product_btn_container_single {
    margin-left:120px;
}

div.product_btn_container_double {
    margin-left:119px;
}

* html div.product_btn_container_double {
    margin-left:60px;
}

div.discount_container {
    width:213px;
    height: 31px;
    padding:;
    margin: 9px 9px 0px 9px;
    padding:2px 3px 0px;
    overflow: hidden;
    text-align: center;
}

div.discount_container a:active, div.discount_container a:link, div.discount_container a:visited {
    display: block;
    font-size:12px;
    font-weight: bold;
    color: #FF9600;
}

div.discount_container a:hover{
    text-decoration: none;
}

div.discount_container p{
    width: 210px;
    padding:2px 10px;
    margin: 5px 4px 0 4px;
    text-align: center;
    color: #000;
    background-color: #FFF;
}

div.product_name_link_container, div.product_name_link_container2 {
    width:219px;
    height: 102px;
    margin: 0px 9px 0px 9px;
    overflow: hidden;
}

div.product_name_link_container2 {
    height: 135px;
    margin: 9px 9px 0px 9px;
}

div.product_name_link_container a.product_name_link, div.product_name_link_container2 a.product_name_link {
    font-size:13px;
    font-weight:bold;
    color:#000;
    text-decoration:none;
    display:block;
    width:215px;
    height:21px;
    padding:81px 3px 0px 3px;
    background-image: url(images/home_arrow_btn.gif);
    background-position:194px 75px;
    background-repeat:no-repeat;
    text-shadow: #FFF 1px 1px 2px;
}

div.product_name_link_container2 a.product_name_link {
    height:21px;
    padding:114px 3px 0px 3px;
    background-position:194px 108px;
}

a.product_name_link:hover {
    text-decoration:none;
}

/* *** forms *** */
form {
    margin: 0px;
    padding: 0px;
}

input,textarea,select {
    font: normal 11px Verdana, Arial, sans-serif;
    border-top: 1px solid #999;
    border-left: 1px solid #999;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
	background-color:#FFFEFC;
}

input, textarea {
    text-indent: 2px;
}

input:focus,textarea:focus,select:focus{
    border: 1px solid #FF9600;
}

fieldset {
    display: block;
    border: 1px solid #978870;
    clear: both;
	margin-bottom:25px;
}

* html fieldset {
    padding: 10px;
}

legend {
    background: #FCE2BB;
    padding: 4px;
    border: 1px solid #978870;
    margin-bottom: 4px;
    font-weight: bold;
}

label {
    margin: 5px 0px;
}


/* *** misc *** */
table tr td {
	vertical-align: top;
	font-size:11px;
	font-family:Arial, sans-serif;
	font-weight:normal;
	line-height:14px;
}

img.image_border{
	border:1px solid #000;
}

hr{
	border:solid #FCE2BB 1px;
	height:1px;
	margin:0px auto 10px;
	padding: 0;
}

.NoBorder{
    border:none;
}

/* *** lightbox *** */
#lightbox{
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 100;
    text-align: center;
    line-height: 0;
    }

#lightbox a img{ border: none; }

#outerImageContainer{
    position: relative;
    background-color: #fff;
    width: 250px;
    height: 250px;
    margin: 0 auto;
    }

#imageContainer{
    padding: 10px;
    }

#loading{
    position: absolute;
    top: 40%;
    left: 0%;
    height: 25%;
    width: 100%;
    text-align: center;
    line-height: 0;
    }
#hoverNav{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
    }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(images/blank.gif) no-repeat; /* Trick IE into showing hover */
    display: block;
    }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prev.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/next.gif) right 15% no-repeat; }


#imageDataContainer{
    font: 10px Verdana, Helvetica, sans-serif;
    background-color: #fff;
    margin: 0 auto;
    line-height: 1.4em;
    overflow: auto;
    width: 100% 
    }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }  
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;  }           
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;  }   
        
#overlay{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    height: 500px;
    background-color: #000;
}


/* *** MagicZoom *** */

/* CSS class for zoomed area */
.MagicZoomBigImageCont {
    border:         0px solid #000;
}

/* Header look and feel CSS class */
/* header is shown if "title" attribute is present in the <A> tag */
.MagicZoomHeader {
    font:           10px Tahoma, Verdana, Arial, sans-serif;
    color:          #fff;
    background:     #91b817;
    text-align:     center !important; 
}


/* CSS class for small looking glass square under mouse */
.MagicZoomPup {
    border:         1px solid #aaa;
    background:     #ffffff;
    cursor:         hand;
}

/* CSS style for loading animation box */
.MagicZoomLoading {
    text-align:     center;
    background:     #ffffff;
    color:          #444;
    border:         1px solid #ccc;
    opacity:        0.8;
    padding:        3px 3px 3px 3px !important;
    display:        none; /* do not edit this line please */
}

/* CSS style for gif image in the loading animation box */
.MagicZoomLoading img {
    padding-top:    3px !important;
}
/* ©2008 MagicToolbox.com. To use this code on your own site, visit http://www.magictoolbox.com */

/* CSS class for thumbnail link <A> */
.MagicThumb {
    cursor: url(include/jscript/magiczoom/cursor/zoomin.cur), pointer;
    outline: none;
}

/* CSS class for the thumbnail link <A> when the big image is zoomed */
.MagicThumb-zoomed { cursor: default; }

/* CSS class for span inside the thumbnail <A> */
.MagicThumb span { display: none; }

/* CSS class for the thumbnail image */
.MagicThumb img { border: 0px solid #808080; outline: none; }

/* CSS class for the big image while zooming */
.MagicThumb-image { border: 0px solid #cccccc; outline: none; }

/* CSS class for the zoomed big image */
.MagicThumb-image-zoomed { cursor: url(include/jscript/magiczoom/cursor/zoomout.cur), pointer; }

/* CSS class for the caption under the big zoomed image */
.MagicThumb-caption {
    color: #333333;
    background-color: #F0F0F0;
    border: 1px solid #CCCCCC;
    border-top: none;
    font-family: Verdana, Helvetica;
    font-size: 11px;
    padding: 8px 16px;
    text-align: left;
}

/* CSS class for the control bar */
.MagicThumb-controlbar {
    display: block;
    height: 18px;
}

.MagicThumb-controlbar a {
    display: block;
    width: 18px;
    height: 18px;
    margin: 0px 1px;
    outline: none;
    float: left;
    overflow: hidden;
}

.MagicThumb-controlbar a span {
    display: block;
    width: 1000px;
    height: 1000px;
    background: transparent url(include/jscript/magiczoom/graphics/controlbar.png) no-repeat 0 0;
    outline: none;
    position: absolute;
    left: 0px;
    top: 0px;
}

/* CSS class for the loading message box */
.MagicThumb-loading {
    border: 1px solid #000000;
    background: #ffffff url(include/jscript/magiczoom/graphics/loader.gif) no-repeat 2px 50%;
    padding: 2px 2px 2px 22px;
    margin: 0;
    text-decoration: none;
    text-align: left;
    font-size: 8pt;
    font-family: sans-serif;
}