/*
Theme Name: Troika
Theme URI: http://troika-inc.com/
Description: Troika WordPress Theme by Mind Medium Creative
Version: 1.0
Author: Mind Medium Creative
Author URI: http://mindmediumcreative.com/
Tags: troika, mmc
*/



/* MAIN
------------------------------------------------------------ */
* {
  margin: 0;
  padding: 0;
  outline: 0;
}
body {
  background: #222;
  color: #000;
  font-size: 12px;
  font-family: Arial, Helvetica, Verdana, Times;
  letter-spacing: -0.02em;
}
p {
  margin-bottom: 10px;
  line-height: 18px;
}
a {
  color: #FFF;
}
.alignright {
  float: right;
}
.alignleft {
  float: left
}






/* #CONTAINER
------------------------------------------------------------ */
#container {
  width: 900px;
  margin: 0px auto;
}



/* CONTAINER
------------------------------------------------------------ */
#header {
  clear: both;
  padding-bottom: 16px;
  height: 80px;
  /*background: url(../images/shadow_top.png) no-repeat 8px bottom;*/
}
#header div#logo {
}
#header div#logo a {
  background: url(../images/logo.png) no-repeat center bottom;
  width: 286px;
  height: 80px;
  display: block;
}
#header div#logo a span {
  display: none;
}
#header div.description {
  display: none;
}





/* NAVIGATION
------------------------------------------------------------ */
#navigation {
  float: left;
  position: relative;
  width: 450px;
  height: 600px;
  background: #F0F0F0;
  text-transform: uppercase;
}


/* level-0 */
#navigation ul {
  list-style-type: none;
  padding: 10px 0 0 0;
}
#navigation ul li {
  padding: 3px 0;
}
#navigation ul li:hover {
  /*background: url(../images/over1.png) 0px 10px no-repeat;*/
}
#navigation ul li a {
  padding: 5px 0px 5px 10px;
  text-decoration: none;
  font-size: 11px;
  color: #999;
  font-weight: bold;
}
/*#navigation ul li.current a {
  color: #3C280F;
  background: #FFF;
}*/
#navigation ul li a:hover {
}
#navigation ul li a span {
}




/* level-1 :: forever young, flaunt, red cherry, bliss */
#navigation ul li ul {
  padding: 0;
  margin-top: 5px;
}
#navigation ul li ul li.level-1 {
  margin-bottom: 0px;
}
#navigation ul li ul li.level-1:hover {
  /*background: #FFF;*/
}
#navigation ul li ul li.level-1 a.title {
  /*background: #FFF !important;*/
  padding-right: 10px;
}
#navigation ul li ul li.level-1 a {
  padding-left: 20px;
  color: #BEBEBE;
  background: none !important;
  font-size: 10px !important;
}
#navigation ul li ul li.level-1 a:hover {
  color: #836641;
}





/* level-2 */
#navigation ul li ul li.level-1 ul {
}
#navigation ul li ul li.level-1 ul li.level-2 {
  padding-left: 5px !important;
}
#navigation ul li ul li.level-1 ul li.level-2:hover {
  /*background: #FFF;*/
}
#navigation ul li ul li.level-1 ul li.level-2 a.title {
  font-weight: bold;
}
#navigation ul li ul li.level-1 ul li.level-2 a.title:hover {
  color: #836641;
}



/* level-3 */
#navigation ul li ul li.level-1 ul li.level-2 ul {
}
#navigation ul li ul li.level-1 ul li.level-2 ul li.level-3 {
  padding: 0;
}

#navigation ul li ul li.level-1 ul li.level-2 ul li.level-3 a {
  padding-left: 30px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}





ul.forever-young-submenu {
  display: none;
}

body.parent-pageid-7 ul.forever-young-submenu {
  display: block;
}




/* current links
body.home #navigation li.home a,
body.blog #navigation li.blog a,
body.profile #navigation li.profile a,
body.artists #navigation li.artists a,
body.events-openings #navigation li.events-openings a,
body.contact-us #navigation li.contact-us a {
  font-weight: bold;
  color: #630C18;
}
*/









/* FOOTER
------------------------------------------------------------ */
#footer {
  clear: both;
  height: 30px;
  padding: 5px 0 0 0;
  background: url(../images/footer_background.png) no-repeat 0px 13px;
}
#footer ul {
  text-align: right;
  overflow: auto;
  list-style-type: none;
}
#footer ul li {
  float: right;
  background: #222;
  padding: 0 0 0 10px;
}
#footer ul li a {
  color: #fff;
  background: #222;
  text-decoration: none;
  text-transform: lowercase;
}
#footer ul li.copyright a {
  text-transform: none;
  font-weight: bold;
}




/* CONTENT
------------------------------------------------------------ */
#content {
  float: left;
  position: relative;
  width: 450px;
  height: 600px;
}
#content h3 {
  display: none;
}
#content #page {
  border: 1px solid #F0F0F0;
  background: #FFFFFF;
  border-left: 0;
  width: 449px;
  height: 598px;
  overflow: auto;
}
#content div.wrapper {
  padding: 10px;
}
#content h1 {
  font-size: 20px;
  margin-bottom: 10px;
}








/* FORMS
------------------------------------------------------------ */
div.form-container { }

p.legend { margin-bottom: 1em; }
p.legend em { color: #C00; font-style: normal; }

div.errors { margin: 0 0 10px 0; padding: 5px 10px; border: #FC6 1px solid; background-color: #FFC; }
div.errors p { margin: 0; }
div.errors p em { color: #C00; font-style: normal; font-weight: bold; }

div.form-container form p { margin: 0; }
div.form-container form p.note { margin-left: 170px; font-size: 90%; color: #333; }
div.form-container form fieldset { margin: 10px 0; padding: 10px; border: #2a2a2a 1px solid; background: #000; }
div.form-container form legend { display: none;font-weight: bold; color: #666; }
div.form-container form fieldset div { padding: 0.25em 0; }
div.form-container form fieldset input,
div.form-container form fieldset textarea {border:0;padding:3px;width:250px;}
div.form-container label, 
div.form-container span.label { font-weight: bold;margin-right: 10px; padding-right: 10px; width: 150px; display: block; float: left; text-align: right; position: relative; }
div.form-container label.error, 
div.form-container span.error { color: #C00; }
div.form-container label em, 
div.form-container span.label em { position: absolute; right: 0; font-size: 120%; font-style: normal; color: #C00; }
div.form-container input.error { border-color: #C00; background-color: #FEF; }
div.form-container input:focus,
div.form-container input.error:focus, 
div.form-container textarea:focus {	}
div.form-container div.controlset label, 
div.form-container div.controlset input { display: inline; float: none; }
div.form-container div.controlset div { margin-left: 170px; }
div.form-container div.buttonrow { margin-left: 180px; }




/*
body.index #content #imageContainer {
  position: absolute !important;
  z-index: 1;
}
body.index #content #imageContainer img {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 450px;
  height: 600px;
}
*/

#content div.grid {
  position: absolute;
  left: -285px;
  bottom: 30px;
  /*width: 275px;*/
  width: 280px;
  z-index: 5;
  
  text-transform: uppercase;
  border: 2px solid #BDB8B1;
  padding: 10px 0 0px 10px;
  background: #FFF
}
#content div.grid h3 {
  font-size: 14px;
  display: block;
}
#content div.grid h4 {
  font-size: 20px;
}
#content div.grid ul {
  list-style-type: none;
  overflow: auto;
  /*width: 255px;*/
  height: 330px;
  /*background: url(../images/grid_background.png) repeat-y !important;*/
}
#content div.grid ul li {
  float: left;
  margin: 0 10px 10px 0;
  
}
#content div.grid ul li a {
  width: 75px;
  height: 100px;
  display: block;
  background: #F0F0F0;
}
#content div.grid ul li a span {
  display: none;
}
#content div.grid ul li a img {
  width: 75px;
  height: 100px;
  border: 0;
}
#content div.grid div.bar {
  clear: both;
  height: 10px;
  
  background: #3B270C;
}




/* PAGE - PRODUCT
------------------------------------------------------------ */
#content div.info {
  position: absolute;
  right: 0;
  bottom: 0px;
  width: 220px;
  padding: 8px;
  background: url(../images/i-75.png);
  text-transform: uppercase;
}
#content div.info p {
  margin-bottom: 2px;
  color: #574631;
}
#content div.info p.title {
  font-size: 18px;
  color: #000;
}
#content div.info p.style {
  margin-top: -5px;
  font-size: 10px;
}
#content div.info p.color-title {
  font-size: 10px;
  margin-bottom: -2px;
  
  font-weight: bold;
}
#content div.info div.colors,
#content div.info div.colors p {
  font-size: 10px;
  line-height: 12px;
  color: #574631;
}
  #content div.info div.colors strong {
    text-decoration: underline;
  }
#content div.info p.tell a {
  font-size: 10px;
  line-height: 12px;
  color: #000;
  text-transform: capitalize;
}
#content div#tell-form {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 5px;
  background: #FFF;
  border: 2px solid #F0F0F0;
}
#content div#tell-form p.close {
  text-align: right;
}
#content div#tell-form p.close a {
  color: #900;
  font-size: 11px;
  text-transform: uppercase;
  text-decoration: none;
}



/* PAGE - SITEMAP
------------------------------------------------------------ */
ul.sitemap a {
  color: #000 !important;
  text-decoration: none;
}
ul.sitemap {
  margin-left: 20px;
}
ul.sitemap li {
  margin-left: 30px;
}



/* PAGE - BLOG
------------------------------------------------------------ */
body.page-permalink-blog #container {
}






/* PAGE - COLOR CHART
------------------------------------------------------------ */
body.page-permalink-color-chart #container {
}
  body.page-permalink-color-chart #container #navigation {
    width: 200px !important;
  }
body.page-permalink-color-chart #container #content {
  width: 700px !important;
  background: #CBCBCB;
}
  body.page-permalink-color-chart #container #content div.wrapper {
    overflow: auto !important;
    padding: 0;
    height: 600px;
    position: relative;
    
  }
    body.page-permalink-color-chart #container #content ul {
      list-style: none;
      overflow: auto;
      margin-left: 30px;
      margin-top: 30px;
      margin-bottom: 30px;
    }
      body.page-permalink-color-chart #container #content ul li {
        float: left;
        position: relative;
        margin: 0 20px 20px 0;
        /*
        width: 140px;
        height: 120px;
        */
        width: 300px;
        height: 101px; /* img + 20 */
      }
        body.page-permalink-color-chart #container #content ul li div.corner {
          position: absolute;
          top: 0;
          left: 0;
          background: url(../images/lash_background.png) top left no-repeat;
          width: 30px;
          height: 30px;
          z-index: 50;
        }
        body.page-permalink-color-chart #container #content ul li img {
          /*
          width: 140px;
          height: 100px;
          */
          width: 300px;
          height: 81px;
          clear: both;
          margin-bottom: 0;
        }
        body.page-permalink-color-chart #container #content ul li span {
          display: block;
          height: 20px;
          padding-left: 5px;
          font-size: 10px;
          line-height: 20px;
          background: #999;
          color: #FFF;
          margin-top: -3px;
          text-transform: uppercase;
          border: 1px solid #FFF;
        }
body.page-permalink-color-chart #container #content div.grid {
  position: absolute;
  left: -150px;
  z-index: 555 !important;
  width: 130px;
  text-align: right;
  padding: 10px;
}





/* PAGE - FOREVER YOUNG
------------------------------------------------------------ */
/* referring to it by the page parent */
body.parent-pageid-7 #navigation {
  background: url(../images/logo_forever_young.jpg) #F0F0F0 203px 29px no-repeat;
}



/* PAGE - FLAUNT
------------------------------------------------------------ */
body.page-permalink-flaunt-wigs #navigation {
  background: url(../images/logo_flaunt.jpg) #F0F0F0 203px 56px no-repeat;
}



/* PAGE - RED CHERRY LASHES
------------------------------------------------------------ */
body.page-permalink-red-cherry-lashes #container {
}
body.page-permalink-red-cherry-lashes #container #navigation {
  width: 200px !important;
}
body.page-permalink-red-cherry-lashes #container #content {
  width: 700px !important;
  background: #CBCBCB;
}
body.page-permalink-red-cherry-lashes #container #content div.wrapper {
  overflow: auto !important;
  padding: 0;
  height: 600px;
  position: relative;
  background: url(../images/logo_red_cherry.jpg) 32px 30px no-repeat;
}
body.page-permalink-red-cherry-lashes #container #content ul {
  list-style: none;
  overflow: auto;
  margin-left: 30px;
  margin-top: 116px;
  margin-bottom: 30px;
  background: #CBCBCB;
}
body.page-permalink-red-cherry-lashes #container #content ul li {
  float: left;
  position: relative;
  margin: 0 20px 20px 0;
  width: 140px;
  height: 120px; /* img + 20 */
}
body.page-permalink-red-cherry-lashes #container #content ul li div.corner {
  position: absolute;
  top: 0;
  left: 0;
  background: url(../images/lash_background.png) top left no-repeat;
  width: 30px;
  height: 30px;
  z-index: 50;
}
body.page-permalink-red-cherry-lashes #container #content ul li img {
  width: 140px;
  height: 100px;
  clear: both;
  margin-bottom: 0;
}
body.page-permalink-red-cherry-lashes #container #content ul li span {
  display: block;
  height: 20px;
  padding-left: 5px;
  font-size: 10px;
  line-height: 20px;
  background: #999;
  color: #FFF;
  margin-top: -3px;
  text-transform: uppercase;
  border: 1px solid #FFF;
}
body.page-permalink-red-cherry-lashes #container #content div.grid {
  position: absolute;
  left: -150px;
  z-index: 555 !important;
  width: 130px;
  text-align: right;
  padding: 10px;
}













/* PAGE - CONTACT
------------------------------------------------------------ */
p.linklove {
  display: none !important;
}














/* PAGE - WHOLESALE TERMS AND CONDITIONS
------------------------------------------------------------ */
body.page-permalink-wholesale-terms-and-conditions #content a {
  color: #000;
}