/* common styles */
#erEmailConfirmation {
   display:none;
   color:#FF8888;
   font-size: inherit;
   }

.epContainer .clearfix,
.etContainer .clearfix,
.esContainer .clearfix { display: block; }

.epContainer .clearfix:after,
.etContainer .clearfix:after,
.esContainer .clearfix:after {
   visibility: hidden;
   display: block;
   font-size: 0;
   content: " ";
   clear: both;
   height: 0;
   }

.erDefault { font-weight:normal; }

/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
/* close commented backslash hack */

/* END COMMON STYLES */

/* summary styles */
.esContainer {
   margin:0px 14px 0px 0px; 
   border: none;
   }

.esHead {  }

.esSummary {
   padding:0px 10px 0px 0px;
   }

.esAvgStars { padding:0px 8px 0px 0px; }
.esAvgRating { padding:0px 8px 0px 0px; }
.esAvgCount { padding:0px 8px 0px 0px; }
.esNone { color:#404040; }

/* Product Review Styles */
.epContainer {  
    margin: 18px 0 0 0;
    background-color: #AA9B80;
   }

.epHead {
    font-size: 100%;
    font-weight: bold;
    color: #404040;
    padding: 12px;
}
#epBody {
   max-height: 350px;
    overflow-y: auto;
   }

#epCreate { 
   float:right; 
   width:30%; 
   text-align:right; 
   line-height:normal; 
   }

#epSummary {
   float:right;
   width:70%
   }

.epAvgStars { padding:0px 8px 0px 0px; }
.epAvgRating { padding:0px 8px 0px 0px; }
.epAvgCount { padding:0px 8px 0px 0px; }
.epNone { color:#404040; }

.epContent {
   margin:0 0 8px 0; 
   background-color:#fff;
   padding:12px;
   color:#404040
   }

.epRating {
   float:left;
   width:84px;
   position:relative;
   }

span.epBlanks { display:inline; float:left; width:0px}
span.epBlanks:before{  font-family:FontAwesome; color:#A0A0A0; content:"\f005 \f005 \f005 \f005 \f005"; white-space:nowrap}

.epTitle { 
   margin:0px 0 0 84px;
   font-weight:bold;
   }
   
.epReview {
   padding:15px 0px;
   }
 
.epSignature {margin:4px 0 0 84px} 
.epName {float:left; margin:0 12px 0 0 }
.epName:before {
   font-family:FontAwesome;
   font-size:120%; 
   color:#000099; 
   content:"\f007"; 
   padding-right:8px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   transform: translate(0, 0);
   text-rendering: auto;   
   }

.epDate { float:left }

.epBusiness {}
.epCompany { display:block; margin:0 12px 0 0 }
.epCompany:before { content:"PROS: "; margin-right:2px; font-weight:bold }
.epURL { display:block; } 
.epURL:before { content:"CONS: "; margin-right:2px }

.epVerified {}
.epVerified:before { 
   font-family:FontAwesome;
   font-size:120%; 
   color:#000099; 
   content:"\f00c";
   padding-right:4px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   transform: translate(0, 0);
   text-rendering: auto;
   }

.epVote { margin:8px 0 0 0 }
.epHelpful {font-style:italic; }

.epResponse {
 font-style: italic;
 margin: 0 0 18px 12px;
 }

.epResponse:before {content:"- Store Owner: "; }

/* Store Review/Testimonial Styles */
.etContainer {}

#etHead {
   font-size:105%;
   font-weight:bold;
   color: #444;   padding:5px;
   margin-bottom:12px;
   }

#etBody {
   max-height: 420px;
   overflow-y: auto;
   background-color:#F5F5F5;
   margin:5px;
   }

#etCreate {
   float:right;
   width:30%;
   text-align:right;
   line-height:normal;
   }

#etSummary {
   float:right;
   width:70%
   }

.etAvgStars { padding:0px 8px 0px 0px; }
.etAvgRating { padding:0px 8px 0px 0px; }
.etAvgCount { padding:0px 8px 0px 0px; }
.etNone { color:#A2A0A0; }

.etContent {
   margin:28px 12px 0 42px;
   }

#etContainer .quote {
   font: normal normal normal 24px/1 FontAwesome;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   transform: translate(0, 0);
   text-rendering: auto;
   float:left;
   margin-left:-36px;
   }

   .quote:before { content:"\f10d"; color:#666666 }

.etRating {
   float:left;
   padding:8px 12px 0px 0px;
   height:28px;
   width:84px;
   }

.etTitle {
   padding:8px 0px 0px 0px;
   font-weight:bold;
   }

.etReview {
   padding:15px 0px;
   }

.etResponse {
   padding:10px;
   color:#9B0829;
   }

.etSignature { font-style:italic; }
.etBusiness {}
.etName { float:right; margin:0 12px 0 0 }
.etDate { float:right }
.etCompany { float:right; margin:0 12px 0 0 }
.etURL { float:right }
.etCompany, .etURL { padding:5px 0px 0px 0px; }

.etVerified { font-size:90%}
.etVerified:before {
   font-family:FontAwesome; 
   font-size:18px; 
   color:#000099; 
   content:"\f00c";
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   transform: translate(0, 0);
   text-rendering: auto;
}

.etVote {display:none; }
.etHelpful {font-style:italic; }

/* Rating Distribution */

/* the box */
#boxPU {
   display: none; 
   position:absolute;
   z-index:9999;
   margin-top: 12px;
   margin-left: -54px;
   padding: 12px;
   background: #fff;
   border:1px solid #000;
   -webkit-box-shadow: 3px 3px 4px 0px rgba(50, 50, 50, 0.5);
   -moz-box-shadow:    3px 3px 4px 0px rgba(50, 50, 50, 0.5);
   box-shadow:         3px 3px 4px 0px rgba(50, 50, 50, 0.5);
   } 

#boxPU:after, #boxPU:before {
   bottom: 100%;
   left: 50%;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
   }

#boxPU:after {
   border-bottom-color: #fff;
   border-width: 12px; /* arrow height */
   margin-left: -13px; /* arrow height */
   }

#boxPU:before {
   border-bottom-color: #000;
   border-width: 13px; /* arrow height + 1 (makes line) */
   margin-left: -14px;/* arrow height + 1 (makes line) */
   }

/* the bars */

.chart { font-size:90%; margin-top:4px; }
.line { clear:both; line-height:17px }
.level { float:left; margin-right:4px } 

span.bar {
   float:left;
   margin-right:4px 
   display:block;
   width:100px;
   height:14px;
   margin-bottom: 6px;   
   background:#E2E2E2;
   border-radius: 1px;
   box-shadow: inset 0 1px 2px rgba(0,0,0,.1),inset 0 0 0 1px rgba(0,0,0,.1);
   background: -webkit-linear-gradient(top,#eee,#f4f4f4);
   background: linear-gradient(to bottom,#eee,#f4f4f4);
   box-sizing: border-box;
   }

span.count {
   float:left;
   margin-left:4px
   }

span.bar span:after {
   margin-left:106px;
   color:#3b3b3b3;
   }

a.openChart {  font-size: 15px; cursor:pointer; }
a.openChart:hover span#boxPU { display: block; position: absolute; color: #666; }
a:hover { text-transform:none }


@media screen and (max-device-width: 420px) and (orientation: portrait) {

#epCreate { float:none; text-align:center; width:100% }
#epSummary { float:none; text-align:center; width:100% }

}