﻿/*====================================================
	Retail Modules stylesheet

	- Key reusable modules 
	- reusable 'functional' modules, not just common layout
	- don't spam this stylesheet

	Contents: 
	- Accordion 
	- Tag Cloud
	- Options bar
	- Alphabet selector
	- Three step slider
	- Applicable info form
	- Comments control 
	- Pagination
	- Ratings
    - Filter panel

=====================================================*/

/*====================================
	Accordion
=====================================*/
#rightContentColumn .accordion{
	margin: 0 0 18px 0;	
}

#rightContentColumn .accordion .item{
    margin: 0 0 5px 0;
}
#rightContentColumn .accordion .item h3 a{ 
    background-color: #f7f7f7;
    border-bottom: 1px solid #008c93;
    color: #000;
    display: block;
    font-weight: normal;
    line-height: 1.17em;
    padding: 10px 10px 7px 10px;    
}

#rightContentColumn .accordion .item h3 a:hover{
    background-color: #f0f0f0;
}

#rightContentColumn .accordion .item h3 a .icon{ 
    background: #f7f7f7 url(/Standard.Website/Images/Consumer/icon_plus_minus_blue.gif) repeat-y 0 0;
    display: block;
    float: left;
    height: 20px;
    margin-right: 10px;
    overflow: hidden;
    width: 20px;
}

#rightContentColumn .accordion .item h3 a:hover .icon{
    background-position: 0 61px;
    background-color: #f0f0f0;
}

#rightContentColumn .accordion .on h3 a{
    background-position: 0 40px;
    border-bottom: 1px solid #d9d9d9;
}

#rightContentColumn .accordion .on h3 a .icon{
    background-position: 0 40px;
    border: none;
}

#rightContentColumn .accordion .on h3 a:hover .icon{
    background-position: 0 20px;
}

.accordion .contentContainer{
	height: 0px;
    overflow: hidden;
}

#rightContentColumn .accordion .contentContainer .content{
    border-bottom: 1px solid #008c93;
    padding: 10px 0 0 0;
}

/* Acordion heading link reset */
#mainContent #rightContentColumn .accordion h3{
	margin:0
}

/* Naturopath Request */
#mainContent #rightContentColumn .requestContent .accordion h3{
	color: #008c93;
	font-family: Verdana, Sans-Serif;
	font-size: 1.4em;
	font-weight: normal;	
}

#mainContent #rightContentColumn .requestContent .accordion h3 a{
	background-image: url(/Standard.Website/Images/Common/check_radio.gif);
	background-position: 81px -139px;
	background-repeat: no-repeat;
	color: #008c93;
	line-height: 1.14em;
	padding: 12px 10px 10px 109px;
}

#mainContent #rightContentColumn .requestContent .accordion h3 a:hover{
	background-position: 81px -177px;	
}

#mainContent #rightContentColumn .requestContent .accordion .on h3 a{
	background-position: 81px -216px;	
}

#mainContent #rightContentColumn .requestContent .accordion .on h3 a:hover{
	background-position: 81px -216px;	
}

#rightContentColumn .requestContent .accordion .contentContainer .content{
	padding-bottom: 15px;
}

/*====================================
	Tag Cloud
=====================================*/
.tagCloud{
	overflow: hidden;	
}

.tagCloud a{
	color: #008c9a;
}
	
.tagCloud a.rank1{
	font-size: 2.4em;
}

.tagCloud a.rank2{
	font-size: 2.1em;
}

.tagCloud a.rank3{
	font-size: 1.8em;
}

.tagCloud a.rank4{
	font-size: 1.5em;
}

.tagCloud a.rank5{
	font-size: 1.2em;
}

/* Health Topics */
.assistantTool .tagCloud a.healthTopic{}
.assistantTool .tagCloud a:hover.healthTopic{
	background-color: #008C9A;
	color: #fff;
	text-decoration: none;
}


/*Community group hover colours*/
#mainContent .tagCloud a:hover.comGroupColdFlu{
	background: #f39b15;
	color: #fff;	
	text-decoration: none;
}

#mainContent .tagCloud a:hover.comGroupFitness{
	background: #99bf12;	
	color: #fff;	
	text-decoration: none;
}

#mainContent .tagCloud a:hover.comGroupDigestion{
	background: #057dc1;	
	color: #fff;	
	text-decoration: none;
}

#mainContent .tagCloud a:hover.comGroupHealthyAgeing{
	background: #ec7530;	
	color: #fff;	
	text-decoration: none;
}

#mainContent .tagCloud a:hover.comGroupMensHealth{
	background: #057b30;	
	color: #fff;	
	text-decoration: none;
}

#mainContent .tagCloud a:hover.comGroupParenting{
	background: #332a86;	
	color: #fff;	
	text-decoration: none;
}

#mainContent .tagCloud a:hover.comGroupPregancy{
	background: #f393d2;	
	color: #fff;	
	text-decoration: none;
}

#mainContent .tagCloud a:hover.comGroupMentalPerformance{
	background: #ba9b6c;	
	color: #fff;	
	text-decoration: none;
}

#mainContent .tagCloud a:hover.comGroupWeightManagement{
	background: #e2057c;	
	color: #fff;	
	text-decoration: none;
}

#mainContent .tagCloud a:hover.comGroupWomensHealth{
	background: #d43e91;	
	color: #fff;	
	text-decoration: none;
}


/*Product group hover colours*/
#mainContent .tagCloud a:hover.prodGroupArthritis{
	background: #fa4704;	
	color: #fff;	
	text-decoration: none;
}

#mainContent .tagCloud a:hover.prodGroupBrain{
	background: #8348b6;	
	color: #fff;	
	text-decoration: none;
}

#mainContent .tagCloud a:hover.prodGroupChildren{
	background: #002685;	
	color: #fff;	
	text-decoration: none;
}

#mainContent .tagCloud a:hover.prodGroupCold{
	background: #ff7300;	
	color: #fff;	
	text-decoration: none;
}

#mainContent .tagCloud a:hover.prodGroupDigestive{
	background: #0076cd;	
	color: #fff;	
	text-decoration: none;
}

#mainContent .tagCloud a:hover.prodGroupEnergy{
	background: #77b900;	
	color: #fff;	
	text-decoration: none;
}

#mainContent .tagCloud a:hover.prodGroupEveryday{
	background: #0135ad;	
	color: #fff;	
	text-decoration: none;
}

#mainContent .tagCloud a:hover.prodGroupEye{
	background: #00bab9;	
	color: #fff;	
	text-decoration: none;
}

#mainContent .tagCloud a:hover.prodGroupHeart{
	background: #c20336;	
	color: #fff;	
	text-decoration: none;
}

#mainContent .tagCloud a:hover.prodGroupMens{
	background: #00722a;	
	color: #fff;	
	text-decoration: none;
}

#mainContent .tagCloud a:hover.prodGroupNails{
	background: #5a98c9;	
	color: #fff;	
	text-decoration: none;
}

#mainContent .tagCloud a:hover.prodGroupNutritional{
	background: #00c4dc;	
	color: #fff;	
	text-decoration: none;
}

#mainContent .tagCloud a:hover.prodGroupPain{
	background: #fa4704;	
	color: #fff;	
	text-decoration: none;
}

#mainContent .tagCloud a:hover.prodGroupStress{
	background: #ba9b6c;	
	color: #fff;	
	text-decoration: none;
}

#mainContent .tagCloud a:hover.prodGroupWeight{
	background: #ed0086;	
	color: #fff;	
	text-decoration: none;
}

#mainContent .tagCloud a:hover.prodGroupWomens{
	background: #f393d2;	
	color: #fff;	
	text-decoration: none;
}

#mainContent .tagCloud a:hover.prodGroupTeen{
	background: #68a693;	
	color: #fff;	
	text-decoration: none;
}


/*====================================
	Options Bar
=====================================*/
.optionsBar{
	width: 100%;
}

.optionsBar ul{
	list-style: none;
	padding: 0;
}

.optionsBar ul li{
	border-left: 1px solid #d5d5d5;
	float: left;
	list-style: none;
	padding: 8px 10px 7px 10px;
}

.optionsBar ul li.first{
	border-left: none;
}

.optionsBar ul li.googlePlus{    
    padding-bottom: 4px!important;
}

    .optionsBar ul li.googlePlus div 
    {
        width: 50px;
    }
    
.optionsBar ul li.facebookLike{
    padding-top: 6px!important;
}

.optionsBar ul li.twitterTwitt{
    padding-top: 6px!important;
}

.optionsBar ul li.facebookLike div
{
    height: 17px;
    padding-left: 3px !important;
}

.optionsBar ul li.twitterTwitt div
{
    height: 17px;
    padding-left: 3px !important;
}

.optionsBar ul li a{
	color: #000;
	display: block;
	float: left;
	font-size: 1.1em;
	font-weight: bold;
	height: 14px;
	line-height: 1.18em;
	padding: 0 0 0 20px;
}

#innerLeftColumn .optionsBar ul li a{
	font-size: 0.92em;
}

.optionsBar ul li a.orangePlus{
	background: url(/Standard.Website/Images/Consumer/icon_plus_orange_14x14.gif) no-repeat top left;
}

.optionsBar ul li a.bluePlus{
	background: url(/Standard.Website/Images/Consumer/icon_plus_blue.gif) no-repeat top left;
}

.optionsBar ul li a.email{
	background: url(/Standard.Website/Images/Consumer/icon_email.gif) no-repeat top left;
}

.optionsBar ul li a.print{
	background: url(/Standard.Website/Images/Consumer/icon_print.gif) no-repeat top left;
}

/*.optionsBar ul li a.text, .optionsBar ul li a.bmXtext{
	background: url(/Standard.Website/Images/Consumer/icon_text_14x14.gif) no-repeat top left;
}
*/
.optionsBar ul li .bmXwrap,
.optionsBar ul li .bmXwrap img{
	float: left;	
}
.optionsBar ul li a.bmXtext{
	padding-left: 4px;
}

.optionsBar ul li.chat-link div {
    float: left;
    height: 14px;
}

.optionsBar ul li.chat-link a{
	background: url(/Standard.Website/Images/Consumer/icon_chat_15x14.gif) no-repeat top left;
}

.optionsBar ul li a.discuss{
	background: url(/Standard.Website/Images/Consumer/icon_discuss_21x15.gif) no-repeat top left;
	padding-left: 25px;
}

#innerLeftColumn .optionsBar ul li {
    background-image: none;
    border-left: 1px solid #D5D5D5;
    list-style-type: none;
    padding: 8px 10px 7px;
}

#innerLeftColumn .optionsBar ul li.first {
    border-left: medium none;
}


/*====================================
	Alphabet Selector
=====================================*/
.assistantTool .startingWith{
	padding: 13px 7px 30px 10px;	
}

#leftContentColumn .subPanel div.sideAlphaSelect{
	overflow: hidden;
	padding: 15px 14px 9px 14px;	
	width: 175px;
}

.assistantTool .startingWith .alphaGrid,
.sideAlphaSelect .alphaGrid{
	padding: 0 0 9px 0;	
}

.assistantTool .startingWith .alphaGrid a,
.sideAlphaSelect .alphaGrid a{	
	background: url(/Standard.Website/Images/Consumer/bg_alpha_select.gif) no-repeat left top;
	color: #008c9a;
	display: block;
	float: left;
	font-size: 1.4em;
	font-weight: bold;
	height: 25px;
	line-height: 1.14em;
	padding: 10px 5px 0 4px;
	text-align: center;
	width: 26px;
}

.assistantTool .startingWith .alphaGrid a:hover,
.sideAlphaSelect .alphaGrid a:hover{
	background-position: left bottom;
}

.assistantTool .startingWith .alphaGrid a.disabled,
.sideAlphaSelect .alphaGrid a.disabled{
	color: #b2b2b2;
	cursor: default;
}

.assistantTool .startingWith .alphaGrid a:hover.disabled,
.sideAlphaSelect .alphaGrid a:hover.disabled{
	background-position: left top;
	text-decoration: none;
}

.assistantTool .startingWith .break{
	border-top: 1px solid #d5d5d5;
	height: 20px;
	margin: 0 auto;
	width: 210px;
}

.sideAlphaSelect .break{
	border-top: 1px solid #d5d5d5;
	height: 10px;
	margin: 0 auto;
	width: 175px;
}

.assistantTool .startingWith .leftLabel{
	color: #666;
	float: left;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.17em;
	margin: 11px 5px 0 35px;	
}


/*====================================
	Three step slider
=====================================*/
.valueSliderControl{
	background: url(/Standard.Website/Images/Consumer/bg_slider_track_small.gif) no-repeat center 0px;
	cursor: pointer;
	height: 24px;
	margin: 0 auto;
	width: 210px;	
}

.valueSlider{
	cursor: pointer;
	height: 24px;
	margin: 0 auto;
	position: relative;
	width: 198px;	
}

.valueSlider a{
	background: url(/Standard.Website/Images/Consumer/bg_slider_handle.gif) no-repeat top left;
	display: block;
	height: 20px;
	margin-left: -7px;
	overflow: hidden;
	position: absolute;
	top: 4px;	
	width: 14px;
}


/*====================================
	Naturopath slider
=====================================*/
.naturopathRequest .formContent .slideLabel{
	color: #666;
	float: left;
	line-height: 1.2em;
	padding: 11px 0 0 33px;
	width: 45px;
}

.naturopathRequest .formContent .topLabels{ 
	height: 34px;
	margin: 0 0 0 78px;
	position: relative;
	width: 508px;
}

.naturopathRequest .topLabels label{	
	background: #fff url(/Standard.Website/Images/Consumer/bg_slider_mark.gif) no-repeat center bottom;
	bottom: -8px;
	color: #008c9a;
	cursor: pointer;
	display: block;
	font-size: 1.4em;
	line-height: 1.14em;
	padding: 0 0 12px 0;
	position: absolute;
	text-align: center;
	width: 65px;
}

.naturopathRequest .formContent .sliderControl{
	float: left;
	position: relative;
	width: 508px;
}

.naturopathRequest .formContent .sliderTrack{
	background: url(/Standard.Website/Images/Consumer/bg_naturopath_slider_track.gif) no-repeat left top;
	height: 14px;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 10px;
	width: 508px;	
}

.naturopathRequest .formContent .sliderTrackOver{
	background: url(/Standard.Website/Images/Consumer/bg_naturopath_slider_track.gif) no-repeat left -14px;
	height: 14px;
	overflow: hidden;
	width: 11px;	
}

.naturopathRequest .formContent .valueSlider{
	cursor: pointer;
	height: 30px;
	margin: 0 auto;
	position: relative;
	width: 486px;	
}

.naturopathRequest .formContent .valueSlider a{
	background: url(/Standard.Website/Images/Consumer/bg_naturopath_slider_handle.gif) no-repeat top left;
	display: block;
	height: 30px;
	margin-left: -11px;
	overflow: hidden;
	position: absolute;
	top: 0px;	
	width: 22px;
}

/*====================================
	Applicable Form
=====================================*/
.applicableForm .genderSelect{
	margin: 0 auto;	
	padding: 0 0px 18px 7px;
}

.applicableForm .genderSelect .genderMen{
	background: url(/Standard.Website/Images/Consumer/bg_btn_men.gif) no-repeat center top;
	color: #008c9a;
	display: block;
	float: left;	
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.17em;	
	padding: 67px 0 0 0;
	text-align: center;
	width: 83px;
}

.applicableForm .genderSelect .genderWomen{
	background: url(/Standard.Website/Images/Consumer/bg_btn_women.gif) no-repeat center top;
	color: #008c9a;
	display: block;
	float: left;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.17em;	
	padding: 67px 0 0 0;	
	text-align: center;
	width: 83px;
}

.applicableForm .genderSelect a.genderOn{
	color: #000;
	background-position: center -86px;	
}

.applicableForm .genderSelect .divider{
	border-right: 1px solid #d5d5d5;
	float: left;
	height: 78px;
	margin: 0 15px;
	overflow: hidden;
	width: 0px;
}

.applicableForm .valueSliderParent{
	border-bottom: 1px solid #d5d5d5;
	border-top: 1px solid #d5d5d5;
	padding: 0 0 20px 0;
}	

.applicableForm .sliderLabels{
	height: 16px;
	padding: 20px 0 8px 0;	
}

.applicableForm .sliderLabels a{
	color: #008c9a;
	display: block;
	float: left;
	font-size: 1.1em;
	font-weight: bold;
	line-height: 1.27em;	
}

.applicableForm .leftLabel{
	padding: 0 0 0 0;
	text-align: left;
	width: 50px;
}

.applicableForm .centerLeftLabel{
	padding: 0 0 0 2px;
	text-align: left;
	width: 51px;
}

.applicableForm .centerRightLabel{
	padding: 0 6px 0 0;
	text-align: right;
	width: 47px;
}

.applicableForm .rightLabel{
	padding: 0 0 0 0;
	text-align: right;
	width: 54px;
}

.applicableForm input.btnFindSubmit{
	background: url(/Standard.Website/Images/Consumer/bg_btn_find.gif) no-repeat top left;
	background-position: left top;
	border: none;
	color: #000;
	cursor: pointer;
	display: block;
	font-size: 130%;
	font-weight: bold;
	height: 36px;
	margin: 20px 0 0 62px;
	overflow: hidden;
	padding: 0 0 0 35px;
	text-align: left;
	vertical-align: top;
	width: 83px;
}

.applicableForm input.btnOver{
	background-position: left bottom;
	color: #fff;
}



/*====================================
	Comments Control
=====================================*/
#mainContent #bannedWordMessage{
	display: none;	
}

#mainContent .commentsBox{  
    background: url(/Standard.Website/Images/Consumer/bg_comments_hdr.gif) no-repeat 0 0;
    padding: 10px 0 0 0;
    width: 510px
}

    #innerLeftColumn .commentsBox .formItem 
    {
        margin-bottom: 10px;
    }
    
#mainContent .wideComments .commentsBox{  
    background: url(/Standard.Website/Images/Consumer/bg_comments_wide_hdr.gif) no-repeat 0 0;
    margin: 0 0 20px 0;
    overflow: hidden;
    width: 730px
}

#mainContent .commentsBox .footer{
    background: url(/Standard.Website/Images/Consumer/bg_comments_footer.gif) no-repeat 0 0;
    clear: both;
    display: block;
    height: 18px;
    width: 510px
}

#mainContent .wideComments .commentsBox .footer{
    background: url(/Standard.Website/Images/Consumer/bg_comments_wide_footer.gif) no-repeat 0 0;
    width: 730px
}

#mainContent #innerLeftColumn .commentsBox h2,
#mainContent #rightContentColumn .commentsBox h2,
#mainContent .wideComments .commentsBox h2{ 
    border-bottom: none;
    background-color: #e3712f;  
    color: #fff;
    font-size: 1.8em;
    font-weight: normal;
    margin: 0;
    padding: 2px 10px 12px 16px;    
}

#mainContent #innerLeftColumn .commentsBox h3,
#mainContent #rightContentColumn .commentsBox h3,
#mainContent .wideComments .commentsBox h3{
    color: #000;
    font-size: 1.6em;
    font-weight: bold;
    padding: 2px 0 10px 3px;
}

#mainContent #innerLeftColumn .commentsBox .otherComments h3,
#mainContent #rightContentColumn .commentsBox .otherComments h3{
	padding-bottom: 2px;
}

#mainContent #innerLeftColumn .commentsBox h3.leftHeading,
#mainContent #rightContentColumn .commentsBox h3.leftHeading,
#mainContent .wideComments .commentsBox h3.leftHeading{
    float: left;
    width: 172px;
}

#mainContent .commentsBox .rightLinks{
    float: left;
    font-size: 1.2em;
    line-height: 1.17em;
    text-align: right;
    width: 275px;
}

#mainContent .commentsBox .rightLinks a{
	background: url(/Standard.Website/Images/Consumer/icon_orange_plus.gif) no-repeat left top; 
	color: #000;
	display: block;
	font-weight: bold;
	height: 18px;
	padding: 2px 0 0 30px; 
}

#mainContent .commentsBox .divider{
	border-bottom: 1px solid #e3712f; 
	clear: both;
	height: 4px;
	overflow: hidden;
}

#mainContent .commentsBox .rightLinks span{
	display: block;
	float: right;
	margin: 0 0 0 14px;
}

#mainContent .commentsBox .rightLinks span.plain{
	padding: 3px 0 0 0;
}

#mainContent .commentsBox p{
    padding: 3px 0 0 0;
}

#mainContent .commentsBox div.commentsLogin{
	float: left;	
    font-size: 1.2em;
    height: 20px;
    padding: 3px 0 0 0;
    width: 300px;
}

#mainContent .commentsBox div.commentsLogin span{
	height: 17px;
	margin-left: 20px;
	padding:3px 0 3px 0px;
}

#mainContent .commentsBox textarea{
    border: 1px solid #b2b2b2;
    color: #666;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 1.2em;
    padding: 10px 0 10px 19px;
    width: 450px;
}
    #mainContent .commentsBox textarea.fieldError
    {
        background: #fff3eb;
        border: 1px solid #ce0541;
    }
#mainContent .wideComments .commentsBox textarea{
	width: 670px;	
}

#mainContent .commentsBox textarea.focus{
     background-color: #fff3eb;
     border: 1px solid #64a1f9;
     color: black;
}

#mainContent .commentsBox p.tcText{	
}

    .tcValidation
    {
        padding-bottom: 28px;
    }
    
#mainContent .commentsBox .tAndC{
   display: block;
   float: left;
   font-size: 0.9em;
   line-height: 1.25em;
   padding: 0 0 0 10px;
   width: 345px;
}

#mainContent .wideComments .commentsBox .tAndC{
	font-size: 1.1em;
	width: 565px;	
}

#mainContent .commentsBox .arrowBtnWht{
    float: right;
    margin-top: 6px;
    margin-right: 10px;
}

#mainContent .commentsBox .content{
     background: url(/Standard.Website/Images/Consumer/bg_comments_fill.gif) repeat-y 0 0;
     padding: 17px 15px 4px 20px;
     width: 475px;
}

#mainContent .wideComments .commentsBox .content{
     background: url(/Standard.Website/Images/Consumer/bg_comments_wide_fill.gif) repeat-y 0 0;
     width: 695px;
}

#mainContent .commentsBox .content .otherComments{
    padding: 13px 0 20px 0;
    width: 475px;
}

#mainContent .wideComments .commentsBox .content .otherComments{
    width: 695px;
}

#mainContent .commentsBox .otherComments p{
    font-size: 1.1em;
    line-height: 1.27em;
    padding: 15px 0 0 0;    
}

#mainContent .commentsBox .content .item{ 
     background-color: #f7f7f7;
    margin: 0 10px 0 0;
    padding: 10px 10px 10px 10px;
    overflow: hidden;
    width: 455px;
}

#mainContent .wideComments .commentsBox .content .item{ 
    width: 670px;
}

#mainContent .commentsBox .content .alt{
	background: #fff;
}

#mainContent .commentsBox .content .item .memberImage{
    float: left;
    height: 60px;
    position: relative;
    width: 60px;
    
}

#mainContent .commentsBox .content .item .memberImage .frame {
    left: 0;
    position: absolute;
    top: 0;
}

#mainContent .commentsBox .content .item .comment{
    float: right;
    padding: 0px 0 0 0;
    width: 380px;
}

#mainContent .wideComments .commentsBox .content .item .comment{
    width: 600px;
}

#mainContent .commentsBox .content .item .comment .member{
    color: #666666;
    display: block;
    font-size: 0.91em;
    padding-top: 5px;
    position: relative;
}

#mainContent .commentsBox .content .item .comment .member a{
    font-weight: bold
}

#mainContent .commentsBox .content .item .comment .member a.report{
    font-weight: normal;
    font-size: 0.9em;
    position: absolute;
    right: 0;
}

#mainContent .commentsBox label 
{
    display: block;
    font-size: 1.2em;
    line-height: 1.33em;
    margin-bottom: 5px;
}

#mainContent .commentsBox label.miniLabel 
{
    margin-top: 2px;
}

#mainContent .commentsBox .fieldColumn 
{
    margin-bottom: 5px;
}

    #mainContent .commentsBox .fieldColumn.gender 
    {
        margin-bottom: 8px;
    }
    
    #mainContent .commentsBox .fieldColumn.gender input
    {
        margin-top: 0;
    }
    #mainContent .commentsBox .fieldColumn.gender span
    {
        font-size: 1.2em;
        line-height: 1.33em;
        margin-bottom: 5px;
    }
    
#mainContent .commentsBox .fieldValidation {
    color: #666;    
    line-height: 1.2em;
    padding: 3px 0 0 3px;
}
/*====================================
	Pagination
=====================================*/
/* Single column pagination */
#rightContentColumn .pagination{
    padding-top: 0px;
}

#rightContentColumn .pagination li{
    /* font-size:1.2em */
}

/* Inner left and base module setup */
#mainContent #innerLeftColumn .pagination,
#mainContent #rightContentColumn .pagination,
#moderation.pagination{
    height: 36px;
    overflow: hidden;
}

#mainContent #innerLeftColumn .pagination .summary,
#mainContent #rightContentColumn .pagination .summary,
#moderation .pagination .summary{
    color: #666;
    font-size: 1.1em;
    float: left;
    padding-top: 15px;
    width: 240px;
}

#mainContent #innerLeftColumn .pagination ol,
#mainContent #rightContentColumn .pagination ol,
#moderation .pagination ol{
    background: url(/Standard.Website/Images/Consumer/bg_pagination.gif) repeat-x 0 0;
    display: block;
    float: right;
    height: 36px;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

#mainContent #innerLeftColumn .pagination li,
#mainContent #rightContentColumn .pagination li,
#moderation .pagination li{
    background-image: none;
    float: left;
    height: 17px;
    margin: 0;
    overflow: hidden;
    padding: 10px 0;
}

#mainContent .pagination li a, 
#mainContent .pagination li .dotdot,
#moderation .pagination li a, 
#moderation .pagination li .dotdot {
    border-right: 1px solid #d5d5d5;
    color: Black;
    cursor: pointer;
    font-size: 11px; /* can't guarantee the container */
    font-weight: bold;
    padding: 5px;
}

#mainContent #rightContentColumn #innerLeftColumn .pagination li a, 
#mainContent #rightContentColumn #innerLeftColumn .pagination li .dotdot{
    font-size: 11px;   /* can't guarantee the container */
}


#mainContent #innerLeftColumn .pagination li a.first,
#mainContent #rightContentColumn .pagination li a.first,
#moderation .pagination li a.first{
   border-left: 1px solid #d5d5d5;  
}

#mainContent #innerLeftColumn .pagination li a.active,
#mainContent #rightContentColumn .pagination li a.active,
#moderation .pagination li a.active{
   color: #008c9a;  
   cursor: default;
   text-decoration: none;
}  

#mainContent #innerLeftColumn .pagination li a:hover.active,
#mainContent #rightContentColumn .pagination li a:hover.active,
#moderation .pagination li a:hover.active{
   cursor: default;
   text-decoration: none;
} 

#mainContent #innerLeftColumn .pagination li.next a.inactive,
#mainContent #rightContentColumn .pagination li.next a.active,
#moderation .pagination li.next a.active,
#mainContent #innerLeftColumn .pagination li.previous a.active,
#mainContent #rightContentColumn .pagination li.previous a.active,
#moderation .pagination li.previous a.active{
    cursor: pointer;
}

#mainContent #innerLeftColumn .pagination li.previous, 
#mainContent #innerLeftColumn .pagination li.next,
#mainContent #rightContentColumn .pagination li.previous, 
#mainContent #rightContentColumn .pagination li.next,
#moderation .pagination li.previous, 
#moderation .pagination li.next{
    height: 36px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 38px;
}

#mainContent #innerLeftColumn .pagination li.previous a,
#mainContent #rightContentColumn .pagination li.previous a,
#moderation .pagination li.previous a{
    background: url(/Standard.Website/Images/Consumer/btn_pagination_previous.gif) no-repeat 0 -35px;
    border: none;
    display: block;
    height: 26px;
    padding: 5px;
    width: 28px;
}

#mainContent #innerLeftColumn .pagination li.next a,
#mainContent #rightContentColumn .pagination li.next a,
#moderation .pagination li.next a{
    background: url(/Standard.Website/Images/Consumer/btn_pagination_next.gif) no-repeat 0 -35px;
    border: none;
    display: block;
    height: 26px;
    padding: 5px 0 5px 5px;
    width: 33px;
}

#mainContent #innerLeftColumn .pagination li.next a.inactive,  
#mainContent #innerLeftColumn .pagination li.previous a.inactive,  
#mainContent #innerLeftColumn .pagination li.next a:hover.inactive, 
#mainContent #innerLeftColumn .pagination li.previous a:hover.inactive,
#mainContent #rightContentColumn .pagination li.next a.inactive,  
#mainContent #rightContentColumn .pagination li.previous a.inactive,  
#mainContent #rightContentColumn .pagination li.next a:hover.inactive, 
#mainContent #rightContentColumn .pagination li.previous a:hover.inactive,
#moderation .pagination li.next a.inactive,  
#moderation .pagination li.previous a.inactive,  
#moderation .pagination li.next a:hover.inactive, 
#moderation .pagination li.previous a:hover.inactive{
    background-position: 0 0;
    cursor: default;
    text-decoration: none;
}

#mainContent #innerLeftColumn .pagination li.next a:hover, 
#mainContent #innerLeftColumn .pagination li.previous a:hover,
#mainContent #rightContentColumn .pagination li.next a:hover, 
#mainContent #rightContentColumn .pagination li.previous a:hover
#moderation .pagination li.next a:hover, 
#moderation .pagination li.previous a:hover{
    background-position: 0 -70px;
    text-decoration: none;
}

.widePaginationHold{
	border-top: 1px solid #d9d9d9;
	padding: 20px 0 0 0;
	width: 730px;
}

.widePaginationHold .pagination ol{
	font-size: 1.2em;
}


/*====================================
	Rating control
=====================================*/
.stars-wrapper{
	float: left;
	padding: 2px 0 0 0;	
}

.ui-stars-star,
.ui-stars-cancel{
	cursor:pointer;
	display:block;
	float:left;
	overflow:hidden;
	text-indent:-999em;
}

.ui-stars-star a,
.ui-stars-cancel a{
	background:url(/Standard.Website/Images/Common/bg_rating_stars.gif) no-repeat 0 0;
	display:block;
	height:15px;
	width:16px;
}

.ui-stars-star a{
	background-position:0 -32px;
}

.ui-stars-star-on a{	
	background-position:0 -48px;
}

.ui-stars-star-hover a{
	background-position:0 -64px;
}

.ui-stars-cancel-hover a{
	background-position:0 -16px;
}

.ui-stars-star-disabled,
.ui-stars-star-disabled a,
.ui-stars-cancel-disabled a{
	cursor:default!important;
}

.ui-stars-star-on.ui-stars-star-disabled a{
	/*may need to script the double class necessity */
	background-position:0 -64px;	
}

.disabled-listing .ui-stars-star-on.ui-stars-star-disabled a{
	background-position:0 -48px;
}

.enabled-user .ui-stars-star-on a{
	background-position:0 -64px;
}

.disabled-user .ui-stars-star-on.ui-stars-star-disabled a{
	background-position:0 -64px;
}

/*****************************
 Filter Results
 - attributes for Grey panel, Inner right or left
   Same style panel is used forProduct Assistant results
*****************************/
.filter{    
}

.filter li{
    width: 198px;
}

#leftContentColumn .filter li{
    width: 203px
}

.filter li.active{   
}

.filter li.active a, .filter li.active a:hover{
    background: url(/Standard.Website/Images/Consumer/bg_filter_topLevel_active.gif) no-repeat 0 50%;
    border-bottom: 1px solid #f7f7f7;
    color: #fff;
}

.filter li a{
    display: block;
    padding: 9px 0 8px 20px;
}

#leftContentColumn  .filter li a{
    padding-right:10px
}

.filter li a:hover{
    background: url(/Standard.Website/Images/Consumer/bg_filter_topLevel_over.gif) no-repeat 0 50%;
}

/* This is a fail safe to make sure that the active is applied to have the children open */
.filter li ul {
    background-color: #f7f7f7;
    display: none;
}

/* If active is applied then the children are visible */
.filter li.active ul {
    background-color: #f7f7f7;
    display: block;
}

.filter li.active ul li{    
}

.filter li.active ul li a{
    background-image: none;
    color: #008c9a;
    padding-left: 30px
}
.filter li.active ul li a:hover{
    background: url(/Standard.Website/Images/Consumer/bg_filter_secondLevel_over.gif) no-repeat 0 50%;
    color: #008c9a;
}

.filter li.active ul li.active a, .filter li.active ul li.active a:hover{
     background: url(/Standard.Website/Images/Consumer/bg_filter_topLevel_active_grey.gif) no-repeat 0 50%;
     border-bottom: none;
}

/* Redefine post count */
.filter li a .postCount, .filter li.active ul  li a .postCount{ 
    color: #000; 
    text-decoration: none;
}
.filter li.active a .postCount{
    color: #fff;
}

.filter li.active ul li.active a .postCount{
    color: #000
}

.filter li a:hover .postCount{ 
   text-decoration: none;
}

/* Redefine content and heading spacing for Filter panel */
#mainContent #rightContentColumn .filter h4.minimalPadding{
    text-align: left;
    padding-left: 15px;
}

#rightContentColumn .filter .content{
   padding: 0 0 11px 0;
}

/* used to change the background image of a parent with an active child */
.filter li.child a, .filter li.child a:hover{
    background-image: url(/Standard.Website/Images/Consumer/bg_filter_topLevel_active.gif);
    color: #fff;
    font-weight: bold;
}
.filter li.child a .postCount{
    color: #fff;
}
.filter li.child ul li a, .filter li.child ul li a:hover{
    font-weight: normal;
}


/* Show Content for panel*/
#leftContentColumn .filter .showProductsFor{
	padding: 5px 0 0 0;	
}

#mainContent #leftContentColumn .filter .showProductsFor h4{
	background: none;
	border-top: 1px solid #F0F0F0;
	padding: 10px 15px 12px 15px;
}

#leftContentColumn .filter .showProductsFor .productsForContent{
	padding: 0 15px 10px 15px;
}

#leftContentColumn .filter .showProductsFor .productsForContent label{
	color: #008c9a;
	font-size: 1.1em;
	line-height: 1.18em;
	padding-bottom: 8px;
}

#leftContentColumn .filter .showProductsFor .productsForContent label span{
	color: #000;
}

#leftContentColumn .filter .showProductsFor table{
	margin: 0 0 5px 0;	
}

#leftContentColumn .filter .showProductsFor .btnUpdateResults{
	background: url(/Standard.Website/Images/Consumer/bg_btn_update_results.gif) no-repeat top left;
	background-position: left top;
	border: none;
	color: #000;
	cursor: pointer;
	display: block;
	font-size: 130%;
	font-weight: bold;
	height: 36px;
	overflow: hidden;
	padding: 0 0 0 35px;
	text-align: left;
	vertical-align: top;
	width: 162px;
}

#leftContentColumn .filter .showProductsFor input.btnUpdateResultsOver{
	background-position: left bottom;
	color: #fff;
}

