@charset "utf-8";
body {
	position:relative;
	background-image:url(images/_resize_bg_07.png);
	background-repeat:no-repeat;
	background-position:center 0%;
	text-align:justify;
	text-justify:distribute;
	
}
#header{
	height:80px;
	width: 100%;
	float: none;
}
#header img{
	float:right;
	/*width:60px;*/
	margin-top: 3%;
	margin-right: 3%;
	opacity:0.7;
}

.mainnav {
	background-color:rgba(0,0,0,0.5);
	display:block;
	height:40px;
	width: 100%;
	float: none;
	padding: 0px;
	font-size: 100%;
	z-index: 1;
	position:absolute;
	margin-top: 25px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	line-height: 40px;
}
.mainnav ul {
	background-color:rgba(0,0,0,0.5);
	display:block;
	height:40px;
	width: 100%;
	float: none;
	padding: 0px;
	font-size: 100%;
	z-index: 1;
	position:absolute;
	margin:0 auto;
}

.mainnav ul li {
	float: left;
	/*width:200px;*/
	width: 14.28%;
	/*height:40px;*/
	line-height:40px;
	text-align:center;
	list-style-type: none;
	text-decoration: none;
	display:block;
	padding: 0px;
	background-color: #000000;
	height: 120%;
	margin: 0px;
}

.mainnav ul li a {
	font-style: normal;
	font-weight: bolder;
	display:block;
	color: #CCCCCC;
	text-decoration:none;
	clear: none;
	font-size: 80%;
	width: 100%;
	line-height: 40px;
}

.mainnav ul li a:hover {
	background-color:#330066;
	color:#FFFFFF;
}
.mainnav ul li ul {
	float: left;
	/*width:200px;*/
	width: 16.65%;
	text-align:center;
	list-style-type: none;
	text-decoration: none;
	display:block;
	padding: 0px;
	background-color: #333333;
	margin: 0px;
	height: 100%;
}
.mainnav ul li ul li {
	float: left;
	/*width:200px;*/
	width: 100%;
	text-align:center;
	list-style-type: none;
	text-decoration: none;
	display:block;
	border-top-width: thin;
	border-top-style: solid;
	border-top-color: #333333;
	height: 100%;
	font-size: 100%;
	line-height: 90%;
	margin: 0px;
	padding: 0px;
}
.mainnav ul li ul li a {
	float: left;
	/*width:200px;*/
	width: 100%;
	text-align:center;
	list-style-type: none;
	text-decoration: none;
	display:table-cell;
	font-size: 67%;
	margin: 0px;
	clear: none;
	vertical-align: middle;
	padding: 0px;
	line-height: 40px;
}
.mainnav ul li ul li a:hover {
	float: left;
	/*width:200px;*/
	width: 100%;
	text-align:center;
	list-style-type: none;
	text-decoration: none;
	display:table-cell;
	font-size: 67%;
	background-color: #640066;
	margin: 0px;
	padding: 0px;
	height: 100%;
	vertical-align: middle;
	color: #FFFFFF;
}
.mainnav ul li a.focus:link, a.focus:active {
	background-color:#330066;
	color:#FFFFFF;
}
.mainnav ul li h4 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	/*font-size: 1.25em;*/
	font-size: 80%;
	;
}

#container {
	/**width: 1280px;*/
	width: 96%;
	height: auto;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-color:#1B0035;
	/* word-spacing:-1px; */
}

#imageStage{
	margin-top:75px;
	margin-bottom:5px;
	vertical-align:middle;
	background-color:rgba(51,51,51,0.5);
	background-position: center center;
	background-repeat: no-repeat;
	z-index: 0;
	height: 100%;
	width: 100%;
}

#contentStage{
	width: 100%;
}

.sideContent {
	float:left;
	/*width:400px;*/
	width:24%;
	height:640px; 
	background-color:rgba(51,51,51,0.5);
	padding:20px auto;
	margin:10px 0;
}

.sideContent img{
	margin:2.5%;
}

.sideContent h4{
	background-image: url(images/_text_decoration.jpg);
	background-repeat: no-repeat;
	background-position: 0% 0%;
	padding-left:28px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 150%;
	text-align:left;
	color: #FFFFFF;
	margin-top: 1.33em;
	margin-right: 0px;
	margin-bottom: 3%;
	margin-left: 4%;
}

.sideContent p{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 70%;
	color: #FFFFFF;
	/* border:solid 1px red; */
	padding:0.33em;
	text-align:justify;
}

.sideContent .advanced{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 95%;
	color: #FFFFFF;
	margin-top:2.5%;
	margin-left: 6%;
	margin-right: 6%;
	margin-bottom: 2.5%;
	text-align:justify;
	line-height: 150%;
	text-decoration: none;
	font-style: normal;
}

.sideContent .review{
	font-family: 'Architects Daughter', cursive;
	/* font-family: 'Indie Flower', cursive; */
	font-size: 0.92em;
	color: #FFFFFF;
	margin:1.5em 1em;
	text-align:justify;
	/* text-justify:distribute; */
	/* word-spacing:-0.15em; */
	line-height:2em;
	text-decoration: none;
	font-style: normal;
}

#reviewTitle{
	font-family: 'Shadows Into Light Two', cursive;
	font-size:1.33em; 
	color:white;
	margin:1.5em 2em 0;
	text-align:center;
	border-bottom:dotted 1px white;
	border-top:dotted 1px white;
	padding:2px;
}

.mainContent {
	float:left;
	/*idth:870px;*/
	width:50%;
	height:640px; 
	background-color:rgba(51,51,51,0.5);
	margin:10px 1%;
	padding:20px auto;
	z-index: 0;
}

.mainContent h4{
	background-image: url(images/_text_decoration.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
	padding-left:28px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 150%;
	color: #FFFFFF;
	text-align:left;
	margin-right: 0px;
	margin-bottom: 2%;
	margin-left: 5%;
}

.mainContent #productTitle{
	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #FFFFFF;
	text-align:left;
	margin-top: 1.33em;
	margin-right: 0px;
	margin-bottom: 2%;
	margin-left: 4%;
}

.mainContent p{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 120%;
	color: #FFFFFF;
	text-align:justify;
}
.mainContent    .beauty, .mainContent .skin{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 95%;
	color: #FFFFFF;
	margin-left: 4%;
	margin-right: 4%;
	margin-bottom: 2.5%;
	text-align:justify;
	line-height: 150%;
}

.mainContent img{
	width:180px;
	height:120px;
	margin:0.5em 1.5em;
}
.content ul, .content ol {

}

/* ~~ The footer ~~ */

#footer {
	width: 100%;
	height: 65px;
	float:left;
	background-color:rgba(0,0,0,0.75);
	margin-top:5px;
	text-align: center;
	vertical-align: top;
}
#footer ul{
	width:auto;
}
#footer ul li{
	float:left;
	/*width: 125px;*/
	width: 8%;
	height:15px;
	/*line-height:40px;*/
	vertical-align:middle;
	text-align:center;
	margin-left: auto;
	margin-right:2px;
	list-style-type: none;
	text-decoration: none;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-right-color: #CCCCCC;
	border-left-style: solid;
	border-left-color: #CCCCCC;
}
#footer      ul   li h4     {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:60%;
	background-position: center center;
	color: #666666;
}

#footer ul li a{
	text-decoration: none;
	font-style: normal;
	vertical-align:middle;
	color: #666666;
}

#footer ul li a:hover{
	text-decoration: none;
	font-style: normal;
	color:#FFFFFF;
}

#footer p{
	vertical-align:middle;
	width:18%;
	/*line-height:30px;*/
	float:left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 60%;
	color:#FFFF99;
	text-decoration: none;
}
#footer p a{
	text-decoration:none;
	color:#FFFF99;
}


/* ~~ Element/tag selectors ~~ */
ul, ol, dl {
	list-style-type: none;
	position: relative;
	background-color: #000000;
}
h1, h2, h3, h4, h5, h6, p {
	display:block;
	margin-top: 0;	 
/*	padding-right: 15px;
	padding-left: 15px; */
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

.img {
	background-position: center center;
	width:98%;
	clear: both;
	margin:5px;
}

a:link {
	color: #42413C;
	text-decoration: underline; 
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus {
	text-decoration: none;
}
.sideContent a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	font-style: normal;
	font-weight: bold;
	color: #CCCCCC;
	text-decoration: none;
	background-color: #333333;
	float: right;
	padding: 0.25em 0.75em;
	margin: 1em 0em 2em 0;
	
}
.mainContent a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	font-style: normal;
	font-weight: bold;
	color: #CCCCCC;
	text-decoration: none;
	background-color: #333333;
	float: right;
	padding: 0.25em 0.75em;
	margin: 1em 0em 0.5em 0;
}
.sideContent a:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	background-color: #330066;
	float: right;
	padding: 0.25em 0.75em;
	margin: 1em 0em 2em 0;
}
.mainContent a:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	background-color: #330066;
	float: right;
	padding: 0.25em 0.75em;
	margin: 1em 0em 0.5em 0;
}
#container #header #banner {
	float: right;
	clear: left;
}
#container .mainnav .zindex {
	z-index: 1000;
}
#container .mainnav #longTitle {
	font-size: 75%;
}
#voucher {
	clear:both;
	color: #FF33FF;
	text-align:center;
	font-size:1.4em;
	margin:12.75em 5em 2em 5em;
	padding:15px;
	border-top:solid 1px #FF33FF;
	border-bottom:solid 1px #FF33FF;
}
#voucher a {
	float:none;
	background-color:transparent;
	color: #FF33FF;
	font-size:1em;
	
	
}
#voucher a:hover, a:active, a:visited{
	float:none;
	background-color:transparent;
	color:#FCC;
}
.mainContent .productList{	
	width: 90%;
	padding:0;
	margin:1.5em auto 0.5em;
}

.mainContent .productList ul li{
	position:relative;
	display:lnline;
	float:left;
	text-align:center;
	margin:0 auto;
	/*border:dotted 1px white;*/
}

.mainContent .productList ul li img{
	width:100px;
	height:100px;
	margin:0.5em 12px;
}

.mainContent .productList ul li div.preview {
  position: absolute;
  top: 0px;
  left: 120px;
  z-index: 100;
}

.mainContent .productList ul li div.preview img {
  width:300px;
  height:100%;
  max-width: 400px;
  display: block;
  border: 1px solid #FCF4DC;
  -webkit-box-shadow: 5px 5px 12px black;
  -moz-box-shadow: 5px 5px 12px black;
  box-shadow: 5px 5px 12px black;
}