@import url("jquery.fancybox-1.3.2.css");

/* CSS Reset, based on Eric Meyer http://meyerweb.com/eric/tools/css/reset/ */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
/* Auskommentiert wg. Gefahr f�r Accessibility */
/*
:focus { outline: 0; }
*/

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* END CSS Reset */




/*
 *  GRIDS
 *  Based on "The Simpler CSS Grid", http://www.webdesignerwall.com/tutorials/the-simpler-css-grid/
 */

.container {
	/*width: 960px;
	padding:0 10px;*/
	margin: 0 auto;
  /*background:url(../img/scaffold/bg_container.gif) center repeat-y;*/
}
.topHeader {
	background-color: #50065D; 
	height: 75px;
	z-index: 5 !important;
}
.topHeader a {
	color: #fff;
	background-color: #50065D;
}
.centerContainer {
	width:100%; 
	position: relative;
}
.centerContainer .centerContent {
	width: 960px; 
	margin:0 auto;
}
.mainContainer {
	z-index: 2;
}

.headerContainer {
	position: realtive;
	z-index: 3;
}

.headerContainer .warenkorb {
    display: block;
    position: relative;
    bottom: 2px;
    font-size: 14px;
	width: 350px;
	float: right;
}

.headerContainer .warenkorb a {
	text-align: right;
	float: right;
}
.headerContainer .warenkorb:hover {
    color:#FFF;
}
.footerContainer {
  margin-top: 30px;
	background-color: #E6E6E6;
	min-height: 200px;
}
.footerContainer .centerContent {
	width: 1096px;
}
.headerContent .grid16 {
	margin: 0;
}
.headerContent .grid12 {
	height: 75px;
	float: right;
	width: auto;
}

div.centerContainer div.bannerContent {
	background: none repeat scroll 0 0 #E6E6E6;
    height: 50px;
    padding-top: 17px;
    text-align: center;
    margin-bottom: 20px;
}
.bannerContent .purpleBold {
	color: #50065D;
    font-weight: bold;	
}
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11, .grid12, .grid13, .grid14, .grid15, .grid16 {
	float: left;
	margin-left: 20px;
}
.grid1 {
	width: 40px;
}
.grid2 {
	width: 100px;
}
.grid3 {
	width: 160px;
}
.grid4 {
	width: 220px;
}
.grid5 {
	width: 280px;
}
.grid6 {
	width: 340px;
}
.grid7 {
	width: 400px;
}
.grid8 {
	width: 460px;
}
.grid9 {
	width: 520px;
}
.grid10 {
	width: 580px;
}
.grid11 {
	width: 640px;
}
.grid12 {
	width: 700px;
}
.grid13 {
	width: 760px;
}
.grid14 {
	width: 820px;
}
.grid15 {
	width: 880px;
}
.grid16 {
	width: 940px;
}
.first {
	margin-left: 0;
	clear: left;
}
.bottomSpace {
	margin-bottom: 24px;
}
	
.headerContainer  .headerContent .grid16 {
	width: 960px;
}

.hide {
  display:none;
}
/* END "the simpler CSS grid" */


/* Clearfix based on http://positioniseverything.net/easyclearing.html, but with shorter naming ('clear' instead of 'clearfix') */
/* clearfix */
.clear {
  position:relative;
}

.clear:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

/* for IE6 */
* html .clear { height: 1%;}
/* END Clearfix */


::-moz-selection{ background: #954489; color:#fff; text-shadow: none; }
::selection { background:#954489; color:#fff; text-shadow: none; } 

/* Charles V�gele Shop */
html {
  height: 100%;
  overflow-y:scroll;
}

body {
  background-color:#fff;
  font-family:Verdana,sans-serif;
  color:#333;
}


.logo {
  padding:5px 0 0 15px;
  width: 220px;
  position:relative;
  z-index: 30;
  margin-left:-2px;
}

.metanavi {
  color: #9e9e9e;
  font-size: 0.625em; /* entspricht 10px */
  margin:5px 0 15px 0;
  position:relative;
  z-index:200;
}

.metanavi a:hover,
.metanavi .selected a {
  color: #FFF;
}

.metanavi li,
.mainnavi li,
.footer li {
  float: left;
  position: relative;
}

.metanavi a { color: #9e9e9e; }
.metanavi a.last { padding-right: 0; }

#language {position: relative; z-index:100;}

#language a {
 /* padding-right:13px;
  padding-bottom:13px;
  background: url(../img/scaffold/language_arrow.gif) 100% 4px no-repeat;*/
}

#language a:hover {
  /*background: url(../img/scaffold/language_arrow_hover.gif) 100% 4px no-repeat;*/
}

#accountHeaderLink ul.accountLinkWrapper,
#serviceHeaderLink ul.serviceLinkWrapper,
#language .languageWrapper {
  background-color: #FFFFFF;
  box-shadow: 0 0 1px 1px #E9E9E9;
  padding: 18px 20px 20px;
  width: 86px;
  display: block;
}

#accountHeaderLink ul.accountLinkWrapper,
#serviceHeaderLink ul.serviceLinkWrapper {
  width: auto;
}

#accountHeaderLink ul.loginLinkWrapper {
	width: 70px;
}

#accountHeaderLink div.linkSelection,
#serviceHeaderLink div.serviceSelection,
#language span.languageSelection {
  position: absolute;
  right:0px;
  z-index: 100;
  padding: 11px 0 0;
}

#accountHeaderLink img.arrow_img,
#serviceHeaderLink img.arrow_img,
#language img.arrow_img {
  position: absolute;
  right: 0;
  top: 3px;
}

#accountHeaderLink .hide img.arrow_img {
	display: block;
}

#accountHeaderLink li,
#serviceHeaderLink li {
	float: none;
	display: block;
	margin: 0;
}

#accountHeaderLink li a,
#serviceHeaderLink li a,
#language span a {
  height:auto;
  background:none;
  padding:0px;
  display:block;
  margin:2px 0;
  width:100%;
  color: #6f6f6f;
}

#accountHeaderLink li a:hover,
#serviceHeaderLink li a:hover,
#language span a:hover {background:none; color: #9E9E9E;}

.divider {
  padding: 0 7px;
}

.searchForm #query {
	color: #8c8c8c;
}

.header {
	position:relative;
	z-index:100;		
  	height:38px;
}

.headerContent {
	position:relative;
}


.headerContent form {
	float: right;
    padding-top: 7px;
}

.metanavi li {
	margin: 0 0 0 10px;
	float: right;
}

.metanavi li a {
	 line-height: 13px;
	 padding-bottom: 1px;
}
.metanavi li a.arrowLink {
	background-image: url("../img/scaffold/pfeil_unten.png");
	background-repeat: no-repeat;
	background-position: right 2px;
    padding-right: 16px;
    margin-top: 0px;
} 

.header label.futura {
	display:block;
	float:left;	
	height:50px;
	margin-top:5px;	
  	color: #333;
}

.warenkorb span.headerCart {
	position:relative;
	bottom:11px;	
	height:50px;
	color: #ffffff;
}
.warenkorb span.headerCart:hover {
}
.warenkorb span.futura {	
	font-weight:bold;
}

.searchForm {
  float:left;
  margin-left: 5px;
  position:relative
}

.searchForm .btnsearch {
	background: #48005E url(../img/scaffold/search_zoom.png) center center no-repeat;
	border:none;
	padding:0px;
	margin:0px;
	float:left;
	width:35px;
	height:25px;
    cursor:pointer;
	z-index: 10051;
}

/* Webkit Hack */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.searchForm .btnsearch { top: 0px; }
}

.header label.futura,
.meinKontoLink,
.header .warenkorb,
.mainnavi {
  font-size: 0.75em; /* entspricht 12px */
	text-transform: uppercase;
}

.header .warenkorb {
	margin-top:4px;
	margin-bottom:-4px;
	position:relative;	
}

.header .warenkorb  a {
  text-transform: none;
}

.header .warenkorb  .kasse {
  position:absolute;
  top:16px;
  right:38px;
  font-weight:bold;
}

.header .warenkorb  .kasse img {
  vertical-align:middle;
}


.searchForm input[type=text] {
 /* position:relative;
  padding: 3px 17px 4px 2px;*/
  border: 1px solid #48005E;
  height: 17px;
  /* vertical-align: middle; */
  width: 215px;
  z-index: 10050;
  margin:0;
  float:left;
  
}
.searchForm input:focus 
{
  outline: none; 
} 

.account_login {
  float:left;  
  margin-top:5px;  
}

.login {
  font-size: 0.75em; 
  font-weight:bold; 
  clear:both;
  display:block;
  margin-top:3px;
}

.meinKontoLink {  
  font-weight:normal;
  margin-top:0px;
  display:block;
}

.header .login img {
    vertical-align: middle;
}

.header .warenkorb {
  float:right;  
}

.header .warenkorb .bag {
	vertical-align:top;
}

.header .warenkorb span.futura {
  position: relative;
  top: -1px;
  color: #333;
}

.mainnavi {
  position:relative;
  float:left;
  width:600px;
  margin:3px 0 0 7px;
  font-weight: bold;
  z-index:100;
}

.mainnavi a:hover,
.mainnavi .selected a {
  color: #772974;
}

.mainnavi li {
  margin-right: 29px;
}

.sidebarleft {
  padding: 0 0 0 20px;
  width: 200px;
  /*min-height:1080px;*/
}

.subnavi {
  margin-top:-13px;
}

.subnavi li {
  font-size: 0.9375em; /* entspricht 15px */
	text-transform: uppercase;
  margin-top: 14px;
  font-weight: bold;
}


.subnavi a:hover,
.subnavi .selected a {
  color: #772974;
  padding-right: 10px;
  background: transparent url(../img/scaffold/gt.gif) right center no-repeat;
}

.subnavi li li {
  font-size: 0.8125em; /* entspricht 13px */
  text-transform: none;
  margin-top: 9px;
  font-weight: normal;
}

.subnavi li.selected li a,
.subnavi li li a {
  color:#333;
  padding-right: 0;
  padding-left: 10px;
  background-image: none;
}


.subnavi li li.selected a,
.subnavi li li a:hover {
  color: #772974;
  background: url(../img/scaffold/secondNavArrow.gif) 0px 4px no-repeat;
}

/* Menü 4. Ebene */

.subnavi li li li {
  font-size:1em;	
  padding-left: 10px;
}

.subnavi li li li.selected a,
.subnavi li li.selected li a,
.subnavi li li li a:hover {
  background:none;
}

.subnavi li li.selected li.selected a {
  color: #772974;
}

.subnavi li li.selected li a {
  color:#333;
}

.footer {
  /* Fallback for web browsers that doesn't support RGBa */
	/*background: rgb(218, 218, 218);*/
	/* RGBa with 0.6 opacity */
	/*background: rgba(218, 218, 218, 0.85);*/
	/* For IE 5.5 - 7*/
	/*filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#dadadada, endColorstr=#dadadada);*/
	/* For IE 8*/
	/*-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#dadadada, endColorstr=#dadadada)";*/
  width: 100%;
}

.footer .addthis_toolbox,
.footer ul {
  float: right;
}

.footer a {
  color: #808080;
  font-size:0.625em;
}

.footer ul {
  margin: 3px 0px 6px 0;
}

.footer p {
  color:#666666;
  font-size:0.625em;
  margin: 6px 0 5px 20px;
}

.footer .addthis_toolbox {
  margin: 4px 18px 0 15px;
}

.copyright {
  float: left;
  padding:0.75em 20px 10px 10px;
  clear:both;
  margin-left:-10px;
  /*background:url(../img/scaffold/shadow_footer.png) -10px 0px  no-repeat #954489;*/
  font-size:0.625em;
  color:#808080;
}

#webServiceWaitingLayer {
	position: fixed;
	top: 0;
	left: 0;
	z-index:100000;
	width:100%;
	height:100%;	
}

#webServiceWaitingLayer .background {	
	position:absolute;
	z-index:888;
	width:100%;
	height:100%;
	left:0px;	
	background-color: #000;
	opacity: 0.5;
	filter: alpha(opacity=50);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

#webServiceWaitingLayer .text {
	position:relative;
	z-index:999;
	margin:0 auto;
	top:300px;
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	width:400px;
	padding:20px 118px 20px 20px;
	border:10px solid #772974;
	background:#fff;
}

#webServiceWaitingLayer .text hr {
	margin-left:0px;	
}

#webServiceWaitingLayer .text button { 
	margin-top:15px;
}

#webServiceWaitingLayer .text img {
	position:absolute;
	right:50px;
	top:50px;
}


/**
 * Grid
 */
#grid{

    /* Dimensions - same width as your grid with gutters */
    width: 980px;

    /* Grid (left-aligned)
    position: absolute;
    top: 0;
    left: 0;
    */

    /* Grid (centered) */
    position: absolute;
    top: 0;
    left: 50%;
    z-index:10000;
    margin-left: -490px;

}

/**
 * Vertical grid lines
 *
 * Set the column width taking the borders into consideration,
 * and use margins to set column gutters.
 */
#grid div.vert{

    width: 39px;
    border: solid darkturquoise;
    border-width: 0 1px;
    margin-right: 19px;

}

#grid div.vert.first-line {

    margin-left: 10px;

}


/**
 * Horizontal grid lines, defined by your base line height
 *
 * Remember, the CSS properties that define the box model:
 * visible height = height + borders + margins + padding
 */
#grid div.horiz{

    /* 20px line height */
    height: 19px;
    border-bottom: 1px dotted darkgray;
    margin: 0;
    padding: 0;

}

/**
* Classes for multiple grids
*
* When using more than one grid, remember to set the numberOfGrids 
* option in the hashgrid.js file.
*/
#grid.grid-1 div.vert{

   /* Vertical grid line colour for grid 2 */
    border-color: crimson; 

}



#grid.grid-2 {

    /* Dimensions - same width as your grid with gutters */
    width: 980px;

    /* Grid (centered) */
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -490px;

}
#grid.grid-2 div.vert{

    
    /* Vertical grid line colour for grid 1 */
    border-color: darkturquoise;
    background:rgba(255,255,255,0.5);
    background-color: transparent\9; /* Hide solid background for IE8 */
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); 

}

#grid.grid-2 div.horiz{

 /* 20px line height */
    height: 19px;
    border-bottom: none;
    margin: 0;
    padding: 0;    

}
.customReviewForm
{
	margin-top:20px;
}

.searchForm #query {
	padding: 3px;
}