/* CSS Document */

/* Load other CSS files */
@import "reset.css";

/* Generic Styles */
p {
  margin: 0px 0px 10px 0px;
}
.clear {clear: both; height: 1px; }
.left {float: left;}
.right {float: right;}
.text-center {text-align: center;}
.text-right {text-align: right;}
.text-left {text-align: left;}


a, a:visited {
 color: #939;
 text-decoration: none;
}

a:hover, a:active {
 color: #909;
 text-decoration: underline;
}


h2 {
 font-size: 12px;
 padding: 0 0 15px 0;
 text-transform: uppercase;
 font-weight: bold;
}


hr {
 border-top: 0;
 border-left: 0;
 border-right: 0;
 border-bottom: 1px solid #eeeeee;
 height: 1px;
 padding: 1px 0 0 0;
 background: #ffffff;
}


ul.plain {
 list-style: none;
 margin: 30px 0 0 120px;
}

ul.plain li {
 padding: 0 0 8px 0;
 font-size: 12px;
}

ul.plain li a {
 font-size: 12px;
}



/* Main Layout and Styles */
body {
 background: url(images/bg.jpg) repeat;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 line-height: 13px;
}
* html body {
 text-align: center;
}
#pagewrap {
 background: #ffffff;
 width: 737px;
 margin: 20px auto 0px auto;
 padding: 30px 30px 30px 30px;
 color: #666666;
}
* html #pagewrap {
 width: 797px;
 text-align: left;
}
#header {
 padding: 0px;
 height: 85px;
}
#content {
 position: relative;
 padding: 0px 0px 0px 0px;
 margin: 0px;
 width: 739px;
 height: 379px;
 background: url(images/content_bg.gif) no-repeat;
}


#foot {
  clear: both;
  height: 8px;
  padding: 7px 0px 0px 0px;
  text-align: center;
  color: #990099;
  font-size: 10px;
  line-height: 14px;
  font-family: arial, helvetica, sans-serif;
}

#ftrNav {
  clear: both;
  padding: 12px 0 0 0;
  text-align: center;
  font-size: 12px;
  font-family: arial, helvetica, sans-serif;
}

#ftrNav a.ftr, a.ftr:visited {
  color: #666;
  text-transform: uppercase;
  text-decoration: none;
  margin: 0 3px;
  font-size: 11px;
}


#ftrNav a.ftr:hover, a.ftr:active {
  color: #939;
}





/* Header Layout and Styles */
#logo {
  position: relative;
  width: 202px;
  height: 134px;
  float: left;
  margin-left: -10px;
  margin-bottom: -50px;
}
#navbar {
  position: relative;
  float: left;
  background: url(images/scalop.gif) 0px 30px no-repeat;
  width: 540px;
  padding: 55px 0px 0px 0px;
  margin: 0px 0px 0px 5px;
}
#navbar ul {
  margin: 0px ;
  padding: 0px;
  list-style: none;
}
#navbar li {
  display: inline;
  list-style: none;
  margin: 0 -5px 0 0;
}




/* Content Layout and Styles */
.side {
  float: left;
  width: 224px; 
}

.side2 {
  float: left;
  width: 224px; 
  padding-top: 10px;
}

.side3 {
  float: left;
  width: 224px; 
  padding-top: 25px;
}


.anim_side {
  position: relative;
  width: 294px;
  height: 316px;
  background: url(images/anim_bg.gif) no-repeat;
}
.anim_side img {
  margin: 55px 0px 0px 18px;
}



#anim_home {
  position: relative;
  z-index: 1;
}

#content_home {
 position: absolute;
 width: 739px;
 height: 379px;
 background: url(images/content_bg.gif) no-repeat;
 z-index: 2;
 top: 134px;
}


.info_side {
  width: 215px;
  height: 240px;
  padding: 70px 0px 0px 10px;
}
* html .info_side {
  height: 310px;
  width: 225px;
}
.face {
  padding: 60px 0px 30px 15px;
  width: 225px;
  height: 220px;
}
.contact_big {
  position: absolute;
  width: 294px;
  height: 63px;
  z-index: 7;
  top: 444px;
}

a.shop, a.shop:visited {
 position: absolute;
 width: 224px;
 height: 69px;
 z-index: 7;
 top: 444px;
 background: url(images/contact_sm.gif) no-repeat;
 display: block;
 cursor: pointer;
}

a.shop:hover, a.shop:active {
 background: url(images/contact_sm_on.gif) no-repeat;
}

a.shop2, a.shop2:visited {
 position: absolute;
 width: 224px;
 height: 69px;
 z-index: 7;
 top: 310px;
 background: url(images/contact_sm.gif) no-repeat;
 display: block;
 cursor: pointer;
}

a.shop2:hover, a.shop2:active {
 background: url(images/contact_sm_on.gif) no-repeat;
}


a.dsp, a.dsp:visited {
 position: absolute;
 width: 224px;
 height: 69px;
 z-index: 7;
 top: 310px;
 background: url(images/contact_dsp.gif) no-repeat;
 display: block;
 cursor: pointer; 
}

a.dsp:hover, a.dsp:active {
 background: url(images/contact_dsp_on.gif) no-repeat;
}



.main_content {
  position: relative;
  float: right;
  margin: 7px 0px 0px -1px;
}

.regular {
  width: 490px;
  height: 340px;
  padding: 10px 10px 0 10px;
}

.regular_how {
  width: 490px;
  height: 340px;
  padding: 5px 10px 29px 10px;
}

.regular_scroll {
  width: 485px;
  height: 325px;
  padding: 20px 10px;
  margin: 5px 5px 0 0;
  overflow: auto;
}


.special {
  width: 490px;
  padding: 0 10px;
}


#featuredTop {
 position: absolute;
 right: 80px;
}

#featuredTop img {
 padding-left: 5px;
}


#featuredBottom {
 position: absolute;
 width: 530px;
 top: 200px;
 right: 80px;
 z-index: 7;
}

#featuredBottom img {
 padding-left: 5px;
}


.scroll{
  width: 480px;
  height: 325px;
  padding: 20px 10px;
  margin: 7px 6px 0 0;
  overflow: auto;
}

* html .regular {
  width: 510px;
  height: 380px;
}
.full {
  width: 445px;
  height: 380px;
}
.contact_form {
  padding: 15px;
}
.contact_form p {
  width: 500px;
  float: right;
}
.contact_form form {
  clear: both;
  padding: 20px 5px 5px 5px;
}
.contact_form form label {
  display: block;
  float: left;
  margin: 0px 10px 10px 0px;
}
*:first-child+html .contact_form form label {
  margin-right: 5px;
}
* html .contact_form form label {
  margin-right: 5px;
}
.contact_form form label input,
.contact_form form label select,
.contact_form form label textarea {
  display: block;
}
.contact_form form label input,
.contact_form form label select {
  width: 150px;
}
#contact_method label input {
  display: inline;
  width: auto;
}
#contact_info {
  width: 350px;
  float: left;
}
#contact_method {
  width: 175px;
  float: left;
}
#country {
  width: 155px;
}
*:first-child+html #country {
  width: 155px;
  margin-right: 5px;
}
* html #country {
  width: 150px;
  margin-right: 5px;
}

#client_type,
#learned_how {
  width: 165px;
  * width: 155px;
}


#company {
  width: 160px;
  * width: 150px;  
}


*:first-child+html #client_type {
  width: 155px;
  margin-right: 5px;
}
* html #client_type {
  width: 150px;
  margin-right: 5px;
}
#comment {
  width: 315px;
  height: 70px;
}
* html #comment {
  width: 315px;
  height: 116px;
}
*:first-child+html #comment {
  width: 315px;
  height: 105px;
}
* html #end_form {
  margin-top: 10px;
}
*:first-child+html #end_form {
  margin-top: 10px;
}
#submit {
  float: left;
  width: 110px;
}
.required {
  color: #cc6699;
}
#errormsg {
  width: 250px;
  float: left;
  padding: 0px;
  margin: 0px;
  text-align: left;
}
#errormsg p {
  width: auto;
  padding: 0px;
  margin: 0px;
  float: none;
}
.company_info {
  position: relative;
  width: 300px;
  float: left;
  margin: 0px 0px 0px 0px;
}
.company_info p {
  width: auto;
  float: none;
}


/* Specific Styles */
.eco-package {
  float: right;
  margin-top: -13px;
  padding: 0 0 0 15px;
}

h3.tsuit {
 padding: 30px 0 10px 0;
}


.tracksuit {
 float: right;
 width: 265px;
 padding: 0 0 0 20px;
}



.foundation {
position: absolute;
right: 20px;
bottom: 5px;
}


.mineral,
.conceal,
.blush,
.eyeshadow,
.lipliner {
position: absolute;
right: 2px;
bottom: 11px;
}



.eyeliner {
position: absolute;
right: 7px;
bottom: 5px;
}



.gina {
 position: relative;
 top: -37px;
 left: 370px;
 width: 89px;
 height: 73px;
}


#marine_botanicals {
  background: url(images/arrow_left.gif) 88px 3px no-repeat;
  width: 290px;
  position: relative;
  float: left;
}
#marine_botanicals img {
  margin: -5px 5px 0 -20px;
  *margin: -5px 5px 0 0;
  position: relative;
  float: left;
}
#honeysuckle {
  width: 200px;
  background: url(images/arrow_left.gif) 88px 3px no-repeat;
  position: relative;
  float: left;
}
#honeysuckle img {
  float: left;
  position: relative;
  margin: -5px 5px 0px 0px;
}
#green_tea {
  width: 250px;
  background: url(images/arrow_left.gif) 88px 3px no-repeat;
  position: relative;
  margin: 10px 0 0 -60px;
  float: left;  
}

#green_tea img {
  float: left;
  position: relative;
  margin: 0px 5px 0px 0px;
}
#shea_butter {
  float: left;
  position: relative;
  width: 280px;
  margin: 20px -100px 0 -90px;
  text-align: center;
  background: url(images/arrow_up.gif) 85px 100px no-repeat;
}
#shea_butter img {
  position: relative;
  margin: 0 0 0 -10px;
}
#vanilla {
  position: relative;
  float: left;
  margin: -15px 0 0 0;
  width: 210px;
  background: url(images/arrow_right.gif) 110px 21px no-repeat;
  text-align: right;
}
#vanilla img {
  position: relative;
  float: right;
  margin: -5px 0px 0px 7px;
}
#vanilla p {
  margin: 18px 0px 0px 0px;
}
#cotton {
  background: url(images/arrow_left.gif) 88px 3px no-repeat;
  width: 280px;
  position: relative;
  float: left;
  margin: -5px 5px 0 0;
}
#cotton img {
  margin: -5px 5px 0px 0px;
  position: relative;
  float: left;
}
#almond {
  width: 195px;
  background: url(images/arrow_left.gif) 93px 3px no-repeat;
  position: relative;
  float: left;
  margin: -5px 0 0 0;
}
#almond img {
  float: left;
  position: relative;
  margin: -5px 5px 0px 0px;
}
.face_powder {
  margin: -5px 0px 0px -5px;
  float: left;
  text-align: center;
  position: relative;
  font-size: 9px;
  line-height: 9px;
  height: 140px;
  font-family: arial, helvetica, sans-serif;
}
#peekaboo {
  height: 100px;
  width: 500px;
  margin: 0 -10px 0 0;
  float: left;
}
#peekaboo p {
  font-size: 11px;
  font-family: arial, helvetica, sans-serif;
  margin: 5px 5px 0 0;
}
#peekaboo .name_code {
  float: left;
  position: relative;
  margin: 40px 0px 0px -130px;
  text-align: center;
  font-size: 9px;
  line-height: 9px;
  font-family: arial, helvetica, sans-serif;
}
#peekaboo img {
  margin: -11px 0 0 0;
  float: left;
  position: relative;
}
.contour1 {
  width: 324px;
  float: left;
  position: relative;
  margin: -10px 0px 0px 0px;
}
.contour2 {
  float: left;
  width: 100px;
  margin: -13px 0px 0px -10px;
}
.contour_powder {
  position: relative;
  float: left;
  width: 162px;
  text-align: center;
  font-size: 9px;
  line-height: 9px;
  font-family: arial, helvetica, sans-serif;
}
.contour_pencil {
  float: left;
  margin: -15px 0px 0px 0px;
}
.concealer {
  text-align: center;
  margin: -1px 0 0 0;
  font-size: 9px;
  line-height: 9px;
  font-family: arial, helvetica, sans-serif;
  height: 130px;
}

.eyes1 {

  float: left;
  width: 396px;
  height: 115px;
  margin: -15px 0px 0px 20px;
}
* html .eyes1 {
  margin: -15px 0px -9px 10px;
}
* html .eyes2 {
  margin-left: 10px;
}
.eyes2 {
  float: left;
  width: 301px;
  height: 204px;
  margin: 0px 0px 0px 20px;
}
.eyes3 {
  float: left;
  width: 115px;
  height: 204px;
  margin: 0px 0px 0px 11px;
}
.eyes4 {
  position: relative;
  float: left;
  width: 43px;
  height: 371px;
  margin: -113px -11px 0px 0px;
}
.eye_powder {
  float: left;
  text-align: center;
  font-size: 9px;
  line-height: 9px;
  font-family: arial, helvetica, sans-serif;
}
.eye_pencil {
  float: left;
  text-align: center;
  font-size: 9px;
  line-height: 9px;
  font-family: arial, helvetica, sans-serif;
}
.eye_pencil p {
  z-index: 5;
  margin: -30px -70px 0px 0px;
}
.lip_pencil {
  position: relative;
  float: left;
  width: 55px;
  height: 374px;
  margin: -15px 10px 0px 0px;
}
.lips {
  position: relative;
  float: left;
  text-align: center;
  font-size: 9px;
  line-height: 9px;
  font-family: arial, helvetica, sans-serif;
  margin: -5px 0px 0px 0px;
}
.sharpener {
  position: relative;
  float: left;
  text-align: center;
  font-size: 9px;
  line-height: 9px;
  font-family: arial, helvetica, sans-serif;
  margin: -5px 0px 0px 30px;
}
* html .sharpener {
  margin-top: -10px;
}
*:first-child+html .sharpener {
  margin-top: -10px;
}
.sharpener img {
  position: relative;
  float: left;
  width: 122px;
  height: 122px;
}
.sharpener p {
  position: relative;
  float: left;
  width: 65px;
  margin: 60px 0px 0px 0px;
}
.applicators1 {
  position: relative;
  float: left;
  width: 340px;
  margin: -15px 0px 0px -35px;
}
* html .applicators1 {
  margin: -15px 0px 0px -25px;
}
.applicators2 {
  position: relative;
  float: left;
  margin: 0px -20px 0px 0px;
}
.hbrush {
  position: relative;
  text-align: center;
  font-size: 9px;
  line-height: 9px;
  font-family: arial, helvetica, sans-serif;
}
.hbrush p {
  position: relative;
  margin: -18px 0px 0px 0px;
}
.vbrush {
  position: relative;
  float: left;
  text-align: center;
  font-size: 9px;
  line-height: 9px;
  font-family: arial, helvetica, sans-serif;
  margin: 11px 20px 0px 0px;
}
.vbrush p {
  margin: 0px;
}
.item_desc {
  position: relative;
  text-align: center;
  font-size: 9px;
  line-height: 9px;
  font-family: arial, helvetica, sans-serif;
  width: 160px;
  margin: 20px 0px 0px 0px;
}
.thankyou {
  width: 300px;
  height: 200px;
  background: #ffffff;
  margin: 20px;
  text-align: center;
}
.thankyou h1 {
  font-family: arial, helvetica, sans-serif;
  font-size: 24px;
  line-height: 24px;
  color: #cc6699;
}




/* Larger Rollover Images */

#Menu-Clover,
#Menu-Holly,
#Menu-Honey,
#Menu-Star {
 position:absolute; 
 width: 398px;
 top: 135px; 
 left: 95px !important;
 visibility:hidden; 
 z-index:6;
 background: url(images/bg_rollover.png) no-repeat; 
}


#Menu-Laci,
#Menu-Scarlette,
#Menu-Lola,
#Menu-Sienna {
 position: absolute; 
 width: 398px;
 height: 256px;
 top: 255px;
 left: 95px !important;
 visibility:hidden; 
 z-index:6; 
 background: url(images/bg_rollover.png) no-repeat; 
}


#Menu-Devine,
#Menu-Lolita {
 position: absolute; 
 width: 398px;
 height: 256px;
 top: 175px;
 left: 95px !important;
 visibility:hidden; 
 z-index:6; 
 background: url(images/bg_rollover.png) no-repeat; 
}

#Menu-Sugar,
#Menu-Bella {
 position: absolute; 
 width: 398px;
 height: 256px; 
 top: 365px;
 left: 95px !important;
 visibility:hidden; 
 z-index:6;
 background: url(images/bg_rollover.png) no-repeat; 
}

#Menu-Light_Med {
 position: absolute; 
 width: 398px;
 height: 256px; 
 top: 0;
 right: 90px !important;
 visibility:hidden; 
 z-index:6; 
 background: url(images/bg_rollover.png) no-repeat; 
}

#Menu-Medium {
 position: absolute; 
 width: 398px;
 height: 256px; 
 top: 120px;
 right: 90px !important;
 visibility:hidden; 
 z-index:6; 
 background: url(images/bg_rollover.png) no-repeat;
}


#Menu-Med_Dark {
 position: absolute; 
 width: 398px;
 height: 256px; 
 top: 250px;
 right: 90px !important;
 visibility:hidden; 
 z-index:6; 
 background: url(images/bg_rollover.png) no-repeat;
}


#Menu-FW,
#Menu-FN,
#Menu-LW,
#Menu-LN,
#Menu-LMW {
 position: absolute; 
 width: 398px;
 height: 256px; 
 top: 150px;
 right: 90px !important;
 visibility:hidden; 
 z-index:6; 
 background: url(images/bg_rollover.png) no-repeat;
}


#Menu-MDNC,
#Menu-DNW,
#Menu-DC,
#Menu-DW,
#Menu-DNC {
 position: absolute; 
 width: 398px;
 height: 256px; 
 top: 280px;
 right: 90px !important;
 visibility:hidden; 
 z-index:6; 
 background: url(images/bg_rollover.png) no-repeat;
}

#Menu-MV {
 position: absolute; 
 width: 398px;
 height: 256px; 
 top: 325px;
 right: 0 !important;
 visibility:hidden; 
 z-index:6; 
 background: url(images/bg_rollover.png) no-repeat;
}


#Menu-Venus,
#Menu-Skye,
#Menu-Jasmine,
#Menu-Katrina {
 position: absolute; 
 width: 398px;
 height: 256px; 
 top: 123px;
 right: 66px !important;
 visibility:hidden; 
 z-index:6; 
 background: url(images/bg_rollover.png) no-repeat;
}


#Menu-Jewel,
#Menu-Misty,
#Menu-Roxie {
 position: absolute; 
 width: 398px;
 height: 256px; 
 top: 245px;
 right: 66px !important;
 visibility:hidden; 
 z-index:6; 
 background: url(images/bg_rollover.png) no-repeat;
}


#Menu-Latoya,
#Menu-Eve,
#Menu-Raven {
 position: absolute; 
 width: 398px;
 height: 256px; 
 top: 377px;
 right: 66px !important;
 visibility:hidden; 
 z-index:6; 
 background: url(images/bg_rollover.png) no-repeat;
}



#Menu-Ebony {
 position: absolute; 
 width: 398px;
 height: 256px; 
 top: 207px;
 right: 0 !important;
 visibility:hidden; 
 z-index:6; 
 background: url(images/bg_rollover.png) no-repeat;
}

#Menu-Dawn {
 position: absolute; 
 width: 398px;
 height: 256px; 
 top: 287px;
 right: 0 !important;
 visibility:hidden; 
 z-index:6; 
 background: url(images/bg_rollover.png) no-repeat;
}


#Menu-Coco {
 position: absolute; 
 width: 398px;
 height: 256px; 
 top: 377px;
 right: 0 !important;
 visibility:hidden; 
 z-index:6; 
 background: url(images/bg_rollover.png) no-repeat;
}