.right {float: right !important;}
.left {float: right !important;}
.nofloat {float: none !important;}
.clear {clear:both;}
.clear-left {clear:left;}

/* ******************************************* */
body {
  background-color: #fff;
  font-family:'Lucida Grande',sans-serif;
  margin-top: 2px;
}

h1, h2, h3, h4 {font-weight: bold; padding: 5px 0;}
h1 { font-size: 16px; }
h2 { font-size: 15px; }
h3 { font-size: 14px; }
h4 { font-size: 13px; }

ul { padding: 5px 0 5px 5px; }
li { list-style: circle inside; padding-right: 5px; }
p {padding: 5px 2px;}

img { border: 0;}
strong {font-weight: bold;}

hr.terminator {clear: both;}
hr.dashedred { border: none; border-bottom:1px dashed #e01532; }

#user-bar { height: 55px; float: right; padding-right: 30px; font-size: 12px; }
#header-search { height: 55px; float: right;}

#search-field {
  background: #fff url(/images/icons/search.png) no-repeat scroll left top;
  background-position: 0 50%;
  color: #434343;
  padding: 4px 0 4px 18px;
  font-size: 14px;
}

#flash {
  width: 500px;
  margin: 10px auto;
  padding: 10px 50px;
  background: #fddde1;
  border-top: 1px solid #f6b0ba;
  border-bottom: 1px solid #f6b0ba;
  clear: both;
}

#container {width: 980px; margin: 0 auto; }

/* ******************* header ************************** */

#header { height: 32px; }

#hleft{
  float: left;
  width: 680px;
  height: 110px;
  /*background: #fff url(/images/images/tmp-left-top.png) no-repeat scroll left top;*/
  position: relative;
}
#hright{
  float: right;
  width: 300px;
  height: 110px;
}

#top-categories { position: absolute; left: 20px; top: 0;}

#top-categories li{
  list-style: none; display: inline;
}

#top-categories li a
{
  color: #000;
  font-size: 13px;
  padding: 5px 15px;
  border: 1px solid #000;
  background: #fff;
  text-decoration: none;
}

#top-categories li a:hover { background-color: #f6b0ba; }

#beauty {position: absolute; top: 45px; left: 491px;}

#search-bar {
  height: 30px;
  width: 670px;
  padding: 32px 0 10px 10px;
  margin-top: 16px;
  background-color: #e01532;
}
#search-field { width: 400px; border: none; height: 19px; }
#search-submit { display: none;}

#brands-prompt { margin: 0; padding: 0; position: absolute; left: 0; top: 92px; font-size: 12px; color: #f00; }
#brands-az { font-family: serif; margin: 0; padding: 0; position: absolute; left: 50px; top: 90px;}
#brands-az li{
  list-style: none; display: inline; margin: 0; padding: 0;
}
#brands-az li a { font-size: 12px; text-decoration: none; color: #000; padding: 0 2px;}
#brands-az li a:hover { text-decoration: underline; }

/* ******************** content ************************* */

#content { border: none; background-color: #fff; }

#leftcol{
  float: left;
  width: 680px;
  margin-top: 10px;
}
#rightcol{
  float: right;
  width: 300px;
}
#footer{
  float: left;
  width: 100%;
}

/* ***** products ************************************** */
.left-panel {width: 240px; float: left; border: 1px solid #777; padding: 4px; margin-right: 5px; }

.center-panel {width: 694px; border: 1px solid #777; margin-left: 255px; }

ul.alphabetic li { list-style: none; margin: 0; display: inline  }

/* Error Styling
   ========================== */

.errorExplanation {
  background-color: #fcc;
  margin: 20px;
  border: solid 1px #f66;
  width: 400px;
  padding: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.errorExplanation h2 {
  padding: 2px 5px 10px 5px;
  font-size: 11px;
  margin: 0;
  letter-spacing: 0;
  font-family: Verdana;
}

.errorExplanation ul {
  margin: 0;
  padding: 0 2px 4px 25px;
  list-style: disc;
}

.errorExplanation p {
  font-size: 11px;
  padding: 2px 5px;
  font-family: Verdana;
  margin: 0;
}

.errorExplanation ul li {
  font: bold 11px verdana;
  letter-spacing: -1px;
  margin: 0;
  padding: 0;
  background-color: transparent;
}

.fieldWithErrors { display: inline; }

.fieldWithErrors input { border: 1px solid red; }

/* ------------------------------------ */
#navlist
{
  padding: 3px 0;
  margin-left: 0;
  /*border-bottom: 1px solid #e01532;*/
  font: bold 12px Verdana, sans-serif;
}

#navlist li
{
  list-style: none;
  margin: 0;
  display: inline;
}

#navlist li a
{
  padding: 4px 16px;
  border: 1px solid #e01532;
  border-bottom: none;
  background-color: #f6b0ba;
  text-decoration: none;
/*  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;*/
}

#navlist li a:visited { color: #fff;}

#navlist li a:link { color: #fff; }

#navlist li a:hover
{
  background: #e01532;
}

#navlist li a.current
{
  background: #e01532;
  /* border-bottom: 1px solid white; */
}

/* -------------- login ------------------*/

.oauth_providers li {
    float: left;
    list-style: none;
    margin:0;
}


/* -------------------------------------- */
#article-preview { width: 668px; border: 1px solid #e01532; padding: 0; min-height: 220px; }
#article-preview img {
  float: left;
  margin: 0 10px 10px 0; border: 1px solid #000;
}
#article-preview h2 { text-align: center; }
#article-preview h2 a { color: #71202c; text-decoration: none; font-size: 14px; }
#article-preview a.read-more { color: #f00; text-decoration: none; font-size: 12px; margin-right: 15px; }
#article-preview p { color: #000; font-size: 13px; }

#articles-preview { width: 670px; height: 145px; overflow-y: hidden; }
#articles-preview h4 { color: #f00; font-size: 13px; }
#articles-preview li { list-style: none; display: inline; }

#short-profile { background-color: #fddde1; margin-left: 10px; padding: 5px;}
#short-profile img { float: left; margin: 6px; padding: 4px; border: 1px solid #f6b0ba; }
#short-profile h3 {  }
#short-profile h3 a {color: #71202c; text-decoration: none; font-size: 14px; }
#short-profile .quick-links { margin-left: 110px; }

.spblock { clear: left;  }
.spblock h4 {color: #71202c; font-size: 13px; margin-left: 6px; }
.spblock ul li { margin: 0; list-style: none; display: inline; background-color: #fff; padding: 10px 15px;}

/* +++++++++++++++++++++ */
.coda-slider { background: #fff; }

/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
/*.coda-slider-no-js .coda-slider { height: 200px; overflow: auto !important; padding-right: 20px }*/

/* Change the width of the entire slider (without dynamic arrows) */
#article-preview .coda-slider, #article-preview .coda-slider .panel { width: 626px }
#product-images .coda-slider, #product-images .coda-slider .panel { width: 310px }

/* Change margin and width of the slider (with dynamic arrows) */
/*.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 626px; }*/
.coda-slider-wrapper.arrows .coda-slider { margin: 0 }


/* Tab nav */
.coda-nav ul li a.current { background: #39c }

/* Panel padding */
.coda-slider .panel-wrapper { padding: 5px }

/* Preloader */
.coda-slider p.loading { padding: 20px; text-align: center }

/* Don't change anything below here unless you know what you're doing */

/* Tabbed nav */
.coda-nav ul { clear: both; display: block; margin: auto; overflow: hidden }
.coda-nav ul li { display: inline }
.coda-nav ul li a { background: #000; color: #fff; display: block; float: left; margin-right: 1px; padding: 3px 6px; text-decoration: none }

/* Miscellaneous */
.coda-slider-wrapper { clear: both; overflow: auto }
.coda-slider { float: left; overflow: hidden; position: relative }
.coda-slider .panel { display: block; float: left; }
.coda-slider .panel-container { position: relative }
.coda-nav-left, .coda-nav-right { float: left }
.coda-nav-left a, .coda-nav-right a {
  background: #fff; color: #E01532; padding: 5px; width: 10px;
  display: block; text-align: center; text-decoration: none;
  position: relative; top: 130px; font-size: 30px;
}

/* =================== products list ===================== */
ul.products{
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
}

ul.products > li, ul#reviews > li {
  border-bottom:1px dashed #e01532;
  padding: 10px 0;
  position: relative;
  list-style: none;
}

.psv .desc  {
  margin-left: 60px;
}


.psv .desc .image {
  width: 48px;
  height: 48px;
  left: 0;
  top: 10px;
  margin:0 10px 0 2px;
  position:absolute;
  text-align: center;
}

.psv .desc .image img { margin: 0 auto;}

.psv .added-by { color: #777; margin-left: 60px; font-size: 12px;}
.psv .reviews { color: #777; margin-left: 60px; font-size: small; position: relative; }
.psv .reviews img { position: relative; top:3px;}

ul.products .info {
  margin-left: 60px;
  font-size: 12px;
}

/* =================== brands list ===================== */
ul#brands li { display: block; width: 100px; height: 100px; float: left; padding: 15px; text-align: center; vertical-align: middle;}

/* =================== product ===================== */
#product-images { width: 310px; float: left;}
#product-images ul.media li { display: inline; text-decoration: none; float: left; }
#product-images .panel-container { width: 310px; margin: 0 auto; text-align: center;}
.hproduct h2 {font-family:serif; font-weight: normal; color: #777; }
.hproduct .hreview-aggregate {color: #777; font-size: small; position: relative; }
.hproduct .hreview-aggregate img { position: relative; top:3px;}
#breadcrumbs { font-family:serif; font-weight: normal; color: #777; font-size: 12px; }
#breadcrumbs a {  color: #555; }

.prodthumbs li { display: inline; text-decoration: none; float: left; margin-right: 16px;}
.prodthumbs li .title { font-size: 10px; width: 80px;}


/* =================== rating =======================*/
.rating span { color: #777; font-size: small; position: relative; top:-3px; }
.version-info { color: #777; font-size: small; }

.leftnav {width: 200px; float: left;}
.rightblock {width: 400px; margin-left: 200px;}

/* =================== reviews =======================*/
#review-errors {font-size: small; color: #f00;}
li.hreview .review-content{ margin-left: 100px; }
li.hreview .review-rating {
  width: 48px;
  height: 48px;
  left: 0;
  top: 30px;
  position:absolute;
  text-align: center;
  font-size: 12px; color: #777;
}
li.hreview .added-by { color: #777; font-size: 12px;}

/* ================= jquery ui ==================== */
.ui-state-error { padding: 10px 5px; font-size: 90%; margin-bottom:1em;}
.ui-button-text { font-size: 13px;}

form.formtastic fieldset > ol > li {
  margin-bottom:1em !important;
}
form.formtastic fieldset > ol > li.commit {
  margin-bottom:0 !important;
}

form.formtastic .inline-hints { font-size: small; }
form.formtastic .inline-hints a{ color:#555; }

#combined-form #register-form { float: left; height: 310px; width: 320px; border: 1px solid #e01532; padding: 10px;}
#combined-form #register-form form.formtastic fieldset > ol > li label {width: 200px;}
#combined-form #user_session_remember_me_input label {width: 200px !important;}

#combined-form #login-form {margin-left: 360px; height: 310px; width: 320px; border: 1px solid #e01532; padding: 10px;}

/* ================= user profiler ================= */
#user {margin: 5px 5px 20px 5px;}
#user-photo {float: left; margin: 0 16px 20px 0;}

/* ================ events/updates ================= */
.updates .created_at { font-size: small; color: #777;}
.updates li { font-size: 14px; list-style: none; border-bottom: 1px dashed #777; margin: 0 10px 12px 0; }