/* ================
	user nav bar
================== */
#user-menu{background-color: #fafafa;padding: 5px 0;text-align: center;border-top: 1px solid #eee;border-bottom: 1px solid #eee;margin-top: -8px; margin-bottom: 5px;margin-left: auto;margin-right: auto;width: 100%;width: calc(100% + 10px);left: -5px;position: relative;}
.buttonnav{display: inline-block;padding:0 7px; border-right: 1px solid #ccc }
.buttonnav:last-child{border-right: none }
.view-users-stats{display: inline-block;}
.user-msg {text-align: center;background-color: #4ba614;color: white;padding: 5px;margin-bottom: 15px;font-weight: bold;}
/* =====================
	/users/index.cfm
====================== */
.user-section {border: 1px solid #ddd; border-radius: 5px; margin: 10px auto; padding: 5px; position: relative; max-width: 800px}

.user-section .left-col, .user-section .right-col, .user-section .spacer{ display: inline-block;vertical-align: top}
.user-section .left-col{width: 30%; max-width: 175px; max-height: 200px;margin-right: 10px}
.user-section .right-col{width:65%;font-size: .9em}
.user-section .spacer{width: 40px}
.user-section .label{font-weight: bold;margin-top:10px;display: inline-block;}
.user-section p {margin: 2px 5px}
.user-section .section-label{margin-bottom: 10px;margin-top: 3px;}
.user-section ul{list-style-type: none;padding: 0}
.user-section ul li{margin-left: 5px;border-top: 1px solid #eee;}
.user-section ul li:last-child{border-bottom: 1px solid #eee}
.user-section ul li div{display: inline-block;padding: 10px 3px;}
.user-section .view,.user-section .view-all{text-align: right}
.user-section .view{width: 36px}
.user-section .view-all{position: absolute;top: 15px;right: 10px}

.user-section .edit-profile{padding: 5px;text-align: center;margin: 30px auto 10px }
.user-section .edit-profile span{font-weight: bold; padding: 5px;border:1px solid #eee;background-color: #fafafa;border-radius: 3px;display: inline-block; width: 75%;max-width: 200px}
.user-section .profile-picture{ text-align: center}
.user-section .profile-picture img{max-height: 175px;max-width: 100%}
.user-section .badges{display: inline-block;line-height: 1em;padding: 5px 25px 5px 13px;border: 1px solid #eee;background-color: #fafafa;margin-top: 10px;position: relative;}
.user-section .badges::after{content:"»";position: absolute;right: 7px;top: 38%;font-size: 1.2em;}
.user-section .badges .label{display: block;color: black;margin-top: 0;margin-bottom: 5px}
.user-section .badges img{display: inline-block;height: 20px;margin: 0 2px 3px 0}
/*.user-section .badges .link-arrow{font-size: 1.4em;margin-left: 5px}*/
.user-section .screen-name{font-size: 1.5em;font-weight: bold;color: #666;word-wrap: break-word;}

.user-section .newsletter-subscribe .label{vertical-align: text-bottom;margin-right: 10px;position: relative;}

.user-section li .order-detail{word-spacing: .9em;width: 80%;width:calc(100% - 60px);}

.user-section#user-lists div{padding: 10px;margin:0 auto 5px auto; border: 1px solid #eee;width: 90%;border-radius: 3px}
.user-section#user-lists img{max-height: 20px; max-width:20px; margin: 0 2px}
.user-section#user-lists img:first-child{margin-left: 20px}


.user-section#user-reviews .user-review{margin:0 auto 5px auto;width: 95%;padding:5px;border: 1px solid #eee;border-radius: 3px }
.user-section#user-reviews .review-prodphoto,.user-section#user-reviews .review-content{display: inline-block;vertical-align: top}
.user-section#user-reviews .review-prodphoto{width:75px;height: 75px}
.user-section#user-reviews .review-content{width: 69%;width:calc(100% - 85px);margin-left:5px;line-height: 1.1em;color:#000;}
.user-section#user-reviews .review-prodphoto img{ width:100%; max-height: 75px}

.user-section#user-reviews .review-title{font-weight: bold;float:none;color: #000;margin:0;}
.user-section#user-reviews .review-prodname{font-size: .8em;color: #4c4c4c;font-family: arial,serif}


/* ===============
	orders.cfm
=================*/
.order-line{border: 1px solid #eee;margin-bottom: 5px;padding:7px 5px;}
.order-line .line-item{display: inline-block; margin: 0 2%}
.order-line .order-no{font-weight: bold;width: 62px;}
.order-line .order-no a{text-decoration: underline;}
.order-line .order-date{width: 70px}
.order-line .order-qty { width: 70px;}
.order-line .order-total {width: 115px;}
.order-line .label{font-weight: bold;color:#666;}
.grey{background-color: #eee}
.list-header{max-width: 900px;margin:0 auto 20px;border-bottom: 1px solid #ccc;text-align: center;}
.list-title{margin: 40px auto 25px;text-align: center}
.list-description{margin:0 auto;color: #4c4c4c;font-weight: bold; padding:0 10px 15px; max-width: 500px}
.list-description img{ vertical-align: baseline; margin-left: 3px;height: .8em}
.list-description a{font-size: 1.2em}
.list-description .center-message{text-align: center;display: none}


/* ===============
	order.cfm
=================*/
.strong{font-weight: bold}
.order-details,.order-address-block{display: block; width: 300px; margin:0 auto 20px;text-align: left}
.order-details td:first-child{width:130px}
.order-details  .invoice-link{font-weight: bold;text-decoration: underline;}

.order-address{display: inline-block;vertical-align: top;width: 140px;}

.details-body{padding: 10px}

.order_product{border: 1px solid #eee;margin:0 auto 10px;padding: 5px;min-height: 110px;max-width: 800px}
.order_product .img-div,.order_product .info{display: inline-block;vertical-align: top}
.order_product .img-div{margin-left: 15px}
.order_product .img-div img{max-width: 100px;max-height: 100px}

.order_product .info{width: calc(100% - 155px);position: relative;min-height: 100px;margin-left: 20px;}
.order_product .catname{font-weight: bold;color: #367a13;display: block;}
.order_product .prodname{color:#666;}
.order_product .addit-details {line-height: 1.2em; font-size: .9em;}

.order_product .buttons{margin-top: 10px;}

.invoice-lnk{text-align: center;margin-bottom: 15px}
.invoice-lnk .black-btn{width: 110px}

.order_product .button-lnk{ padding: 4px 0;border: 1px solid #eee;background-color: #fafafa;display: block;width: 125px;margin: 5px 0; text-align: center}
/* ===============
	lists.cfm
=============== */

.wishlist-share{padding:1px 7px;background-color: #aa1b14; color:#fff;display: block;font-size: 1.1em; border-radius: 5px; margin:10px auto;width:125px}
.product-list.full-wide{max-width:900px; margin-left: auto;margin-right: auto}
.rmv-from-list{
	font-size: 16px;
    color: #92061a;
    line-height: 2;
    border: 1px solid #ccc;
    padding: 3px;
    border-radius: 3px;
    background-color: #f9f9f9;
    display: block;
    text-align: center;
    margin: 5px 10px 5px auto;
    transition: background-color 0.3s;
	cursor: pointer;
}
.rmv-from-list:hover{
	color: #fff;
    background: #af091d;
}
.noProductsMessage{background-color: #fcfcfc;width:90%; max-width: 500px; padding-top: 40px; padding-bottom: 50px; margin: 50px auto 125px auto; box-shadow: 0px 2px 4px #ddd;}
.noProductsMessage p { text-align: center; width: 80%; margin-left: auto; margin-right: auto; font-size: 1.2em; font-weight: 600; color: #666}
.subnumber{color: #af091d;text-align: center;}
.rank {
	background-color: #eee;
    color: #000;
    color: #aa1b14;
    font-weight: bold;
    font-size: 20px;
    margin-left: auto;
    width: 45px;
    height: 30px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==============
	badges.cfm
=============== */
.badge-container{border: 1px solid #ddd; padding: 10px 0; margin-bottom: 10px;}
.badge-img,.badge-info{display: inline-block;vertical-align: top}
.badge-img{width: 80px; height: 80px;margin:0 10px 10px;}
.badge-info{width: calc(100% - 115px);}
.badge-name{ margin: 0; font-size: 1.2em;}
.Silver { color: #C0C0C0; font-weight: bold }
.Gold { color: #886814; font-weight: bold }
.Bronze { color: #9C6963; font-weight: bold }

/* ===============
	reviews.cfm
================ */
.product-list .user-review{margin:0 auto 15px auto;padding:20px 5px 0;;border: 1px solid #eee;border-radius: 3px;position: relative; }
.product-list .review-prodphoto,.product-list .review-content{display: inline-block;vertical-align: top}
.product-list .review-prodphoto{width:100px; margin:0 15px 15px;}
.product-list .review-prodphoto img{ width:100%;}
.product-list .review-content{max-width:500px;margin-left:5px;line-height: 1.1em;padding:0 20px;}
.product-list .review-title{font-weight: bold;}
.product-list .review-prodname{font-size: .8em;color: #4c4c4c;font-family: arial,serif;}
.product-list .review-title,.product-list .review-prodname,
.product-list .star-container,.product-list  .review-date{float: none;margin: 0}

.product-list .review-content .review-title,.product-list .review-content .review-prodname,
.product-list .review-content .star-container,.product-list .review-content .review-date{display: none;}
.mob-review-header{display: inline-block;vertical-align: top;width: 50%;width: calc(100% - 155px);}
.review-actions{margin-top: 20px;text-align: center;border-top: 1px solid #eee;}
.action-btn { font-weight: bold; padding: 5px; border: 1px solid #eee; background-color: #fafafa; border-radius: 3px; display: inline-block; color:#af091d;}
.review-actions .action-btn{ width: 100px; text-align: center; margin: 15px;}
.user-review .confirm { position: absolute; top: 0; left: 0; height: 100%; width: 100%; text-align: center; z-index: 3;}
.user-review .overlay { position: absolute; background: #666; width: 100%; height: 100%; opacity: .6;}
.user-review .confirm-box { background-color: white; width: 75%; margin: 20px auto; padding: 40px 10px; font-size: 1.2em; font-weight: bold; z-index: 1; position: relative; max-width: 300px;}
.user-review .confirm-message{margin: 0 0 20px;}
.user-review .confirm-box .action-btn { width: 75px; margin: 5px;}




/* ===============
	review.cfm
================ */
.user-review-single {padding-bottom: 15px;border-bottom: 1px solid #eee;max-width: 500px;margin: 0 auto 25px;}
.user-review-single .user-review-prodphoto{width: 100%;text-align:center;}
.user-review-single .user-review-prodphoto{margin: 15px auto}
.user-review-single .user-review-prodphoto img{width: 90%;max-width: 300px}
.user-review-content{padding: 15px 30px;width: 75%;max-width:350px;border: 1px solid #eee;margin: 0 auto 25px;box-shadow: 0 2px 4px #ccc}
.user-review-single h2{margin: 0 0 0 5%}
.user-review-single .review-date{margin-bottom: 10px}
.user-review-single .action-btn{margin:15px 5% 0px;}
.review-stats{text-align: center;margin-bottom: 20px}
.review-avg,.review-total{width: 30%; display: inline-block; padding: 5px 20px; font-weight: bold; background-color: #eec; line-height: 1.4em;}
.review-stat-label{color:#6a6a6a;}
.review-stat{font-size: 1.5em}

.user-review-edit{margin:10px auto;width: 90%}
.user-review-edit label{font-weight: bold;display: block;font-size:1.2em}
.user-review-edit .input-select{width: 100px}
.user-review-edit .input-large{width: 94%}
.user-review-edit textarea{height:200px;font-size: 1em}







/* =====================
	edit-profile.cfm
====================== */
.section-divider{margin: 40px auto 5px;font-weight: bold;text-align: center;}
.update-profile-photo{max-width: 175px;max-height: 175px;display: block;margin: 10px auto 0;}
input.invalid{background-color: red;color:white;}
.validation-err{ margin-top: -15px;margin-bottom: 15px;display: block; color: red;}
#delete_pic{text-align: center;}
#delete_pic input{vertical-align: middle;}

/* ++++++++++++++++++++++++++
	new review stars setup
+++++++++++++++++++++++++++ */
/*set .star-container width and .review-star img width to control star size*/
.star-container{position: relative;width: 75px;height: 20px;display: inline-block;}
.review-star img{width:75px;}
.review-star-0{display: block;z-index: 1}
.review-star-1{display: block;position: absolute;top: 0;z-index: 2;overflow: hidden}




@media screen and (min-width:450px) {
	/*user nav bar*/
	.buttonnav:first-child{ border-left: 1px solid #ccc}
    .buttonnav:last-child{ border-right: 1px solid #ccc}

	/* /users/index.cfm */
	.user-section {width: 90%;margin-bottom: 25px}

	/*orders.cfm*/
	.break-below450{display: none}
	.order-line .line-item{margin: 0 1%}

	/*lists.cfm*/
	/* .rank { padding: 7px 6px;} */
	.rmv-from-list{margin-right: auto}

	/*reviews.cfm*/
	.review-actions{text-align: right}
	.mob-review-header{display: none}
	.product-list .review-content{width: 65%;width: calc(100% - 150px); display: inline-block;padding: 0;}
	.product-list .review-content .review-title,.product-list .review-content .review-prodname,
	.product-list .review-content .star-container,.product-list .review-content .review-date{display: block}
	.user-review .confirm-box{padding: 30px 10px}

	/*review.cfm*/
	.user-review-single .review-actions{text-align: center}
}

@media screen and (min-width:550px) {
	/*order.cfm*/
	.order_product .buttons{margin-top: 0;position: absolute;top: 0;right: 10px;width: 125px;text-align: center}
}

@media screen and (min-width: 600px){
	.badge-container { width: 48%; float: left; margin-left: 1%; height: 95px}

	/*reviews.cfm*/
	.product-list .user-review{padding: 30px 30px 0 30px;}
	.product-list .review-prodphoto {width: 100px; height: 100px; margin-right: 3%;}
	.product-list .review-content{width: calc(100% - 145px)}
}

@media screen and (min-width:750px) {
	/*order.cfm*/
	.order-details,.order-address-block{display: inline-block;vertical-align: top;}
	.order-details{margin-right: 5%;margin-left:5%;width: 250px}
	.order-address-block{margin-left: 0;margin-right: 0;width: 360px}
	.order-address{width: 175px}
}

@media screen and (min-width:900px) {
	/*orders.cfm*/
	.order-line .line-item{margin: 0 2.5%}

	/*reviews.cfm*/
	.product-list .user-review{padding: 30px}
	.product-list .review-prodphoto {margin-right: 30px;}
	.review-actions{text-align: center;border:none;margin:0;float: right;width: 125px;}
	.review-actions .action-btn {margin: 5px;}
	.user-review .confirm-box {padding:20px 10px }

	/*review.cfm*/
	.user-review-single .review-actions{float: none;margin-top: 20px;text-align: center;width: auto}
}

@media screen and (min-width:1140px) {
	/* user nav bar */
	#user-menu{width: 100%;left:0}
  	/*.view-users-stats{display: inline-block;}*/

	/*orders.cfm*/
	.list-description .center-message{display: block}

	/*order.cfm*/
	.order_product .addit-details{font-size:.8em}
}