@import "variables.less";
@import "mixins.less";
@import "answers/Sprites/Style.less";
@import "answers/Popup/Style.less";

//drag drog
.faqDnDCategory {
	position: absolute;
	padding:0px 0px 4px 20px;
	line-height:14px;
	height:14px;
	border: 1px solid @borderColor;
	.opacity(50);
}
.uiAnswersPortlet {
	padding: 20px 20px 0px 20px;

	.uiAnswersBreadcumbs {
		padding-top: 3px;
	}
	.uiAnserContainer {
		.answersContainer  {
			padding: 20px 10px 10px;

		}
		.leftColumn {
			width: 220px;

		}
		.avatarMini  {
			.square(16px);
			img {
				.square(16px);
			}
		}
	}
	.resize {
		margin-top: 8px;
		a {
			#gradient > .vertical(@white,@componentBackground);
			border: 1px solid @borderColor;
			border-right: 0;
			padding: 4px 0;
			display: block;
			float: left;
			margin-left: 2px;
			outline: none;
			.border-radius(@borderRadiusSmall 0  0 @borderRadiusSmall);
		}
		&.resizeLt {
			a {
				.border-radius(0 @borderRadiusSmall @borderRadiusSmall 0);
				border-right: 1px solid @borderColor;
				border-left: 0;
				margin-left: 0px;
			}
		}

		.iconControll {
			cursor: pointer;
		}
		.line {
		    width:2px;
		    border-left: 1px solid @borderColor;
		    margin:auto;
		    min-height: 300px;
		    cursor: col-resize;
		  }
	}

	.normalQuest  {
		margin-bottom: 10px;
		.leftContent {
			margin:0 20px 0 0;
			width: auto;
			& + .rightContent {
				margin-left: 160px;
			}
		}
		.rightContent .titleWithBorder {
			margin: 0 0 10px 0;
		}
		.time {
			color: @grayLight;
		}
	}
	.uiAnserContainer .resize {
		width: 30px;
	}
	.uiAnserContainer .rightColumn {
		margin-left: 255px;
		.uiGrayLightBox ,.metaContent{
				overflow: hidden;
			}
	}

	blockquote {
		background: none;
		border-left: 5px solid @grayLight;
	    margin: 0 0 20px;
	    padding: 0 0 0 15px;
	    width: auto;
	}
	blockquote:after {
		display: none;
	}

	// drapdrop categories
	.uiCategories {
		.listCategories > li {
			cursor: pointer;
     		 &.faqTmpCategory {
  				min-height:8px;
			}
      		&.faqHighlightCategory {
		        height:20px;
		      }
		}


	}

	.uiQuestions {
		margin: 10px 0 0 0;
		padding-bottom: 0;
		.answerToolbar {
			min-height: 28px;
			> ul > li{
				float: left;
				margin: 0 10px 0 0;
				a {
					color: @textColor;
				}
			}
			> .menuRight > li {
				margin: 0 0 0 10px;
			}
			.dropdown-menu li a:hover {
				color: @white;
			}
		}

	}
	.questionSelect {
		border: 1px solid @borderColor;
		.border-radius(@borderRadiusSmall);
		& >.responseItemContainer {
			.border-radius(@borderRadiusSmall @borderRadiusSmall  0 0);
			background: @componentBackground;
			min-height: 110px;
			.languageContainer  {
				margin: 0 20px 0 0;
			}
		}
		.attachmentContainer ,.notResponse{
			border-top: 1px solid @borderColor;
			color: @grayLight;
		}
		& + .questionContainer  {
			margin-top: 20px;
		}
		.voteResult {
			margin: 0px 0 5px 0;
			float: right;
			.ratingInfoContainer  {
				margin :1px 5px 0 0;
			}
		}
	}
	.uiFAQContent  + .questionContainer   {
			margin-top: 20px;
	}
	 .notResponse {
		padding:10px 16px;
	 }
	.uiQuestionInfo {
		.select-category {
			label {
				display: inline-block;
			}
			.uiSelectbox {
				width: 75px;
				select.selectbox {
					width: 100px;
				}
			}
		}
	}
	.questionRight {
		.iconContainer ,.sortAnswer {
			text-align: right;
		}
	}

	.responseItemContainer  {
		.avatarXSmall  + .responseItemContainerRight {
			margin-left: 50px;
		}
		&.itemFirst {
			.uiDropdownWithIcon  {
				margin-top: -28px;
			}
		}
	}
		.responseItemContainer {
			min-height:30px;
			padding:12px 16px;
			.actionBar {
				min-height: 25px;
			}
			& + .responseItemContainer {
				border-top: 1px solid @borderColor;
			}
			p {
				//margin: 2px 0;
			}
			.date{
				color: @grayLight;
				font-size: 12px;
			}
			.avatarXSmall {
				margin-top: 5px;
			}
		}
		.questionSelect {
			.sortAnswer a {
					color: @textColor;
				}
			.avatarLarge  {
				.size(auto,70px);
				.authorName {
				  .text-overflow;
				  .center();
				  font-weight: bold;
				  color: @linkColor;
				  margin-top: 5px;
				  display: block;
				}
				img {
					.square(70px);
					 border: 1px solid @white;
				}
				& + .questionRight {
					margin-left: 90px;
				}
			}
			h5 {
				margin: 0;
			}
		}
		.titleResponseContent {
			border-top: 1px solid @borderColor;
			margin: 0;
			padding:12px 16px 0 16px;
		}

		.responseComment .responseItemContainer:last-child {
			.border-radius(0 0 @borderRadiusSmall @borderRadiusSmall);
		}
		.questionContent {
			margin: 6px 0 0 0;
		}
		.theContent {
			word-wrap: break-word;
			ul, ol {
				padding: 0;
				margin: 0px 0px 10px 25px;
			}
			ul li {
			    list-style: disc outside none;
			}
			ol li {
			    list-style-type: decimal;
			}

		}
}

.boxNum {
	border: 1px solid @borderColor;
	text-align:center;
	background: @white;
    float: left;
    min-width: 64px;
    padding: 2px;
    text-align: center;
	h5{
		margin: 0 ;
	}
	&:first-child {
		.border-radius(@borderRadiusSmall 0 0 @borderRadiusSmall);
	}
	&:last-child {
		.border-radius(0  @borderRadiusSmall @borderRadiusSmall  0 );
	}
	&.boxNumGray {
		background: @componentBackground;
	}
	& + .boxNum {
		border-left: 1px solid @componentBackgroundHover;
	}
}
//attachmentContainer

.attachmentContainer{
		background: @componentBackgroundLight;
		padding: 18px;

		.otherAttachmentBox + .otherAttachmentBox{
			margin-top: 5px;
		}

		.attachmentTitle{
			margin-bottom: 15px;
		}
		.attachmentContentImage {
			margin-bottom: 10px;

		.imageAttachmentBox{
			display: inline-block;
			.square(128px);
			text-align: center;
			margin-right: 15px;
			margin-bottom: 15px;
			position: relative;
			&:hover{
				.actionAttachImg{
					display: block;
				}
			}

			.imgAttach{
				line-height: 125px;
				max-height: 128px;
				max-width: 128px;
				img {
					max-height: 128px;
					max-width: 128px;
				}
			}
			.actionAttachImg{
				position: absolute;
				display: none;
				top: 0;
				left: 0;
				background-color: rgba(0,0,0,0.1);
				.square(128px);
				p{
					a{
						color: @white;
						&:hover {
							font-weight: bold;
						}
					}

					margin: 45px 0 0 0;
					&+p{
						margin-top: 0;
					}
				}
			}
		}
	}
}

/* Content Quote */
.theContent{
	.uiWikiPortlet {
		background: none;
	}
	br {
		display: block;
		margin-top: 10px;
	}
	.contentQuote{
		font-style: italic;
		padding: 15px 15px 15px 20px;
		background: @quoteSecondBackground;
		margin: 10px 0 0 15px;
		word-wrap: break-word;
		.border-radius(2px);
		.textContent{
			border-left: none;
			padding-left: 0;
			margin-top: 10px;
			.contentQuote{
				border-left: solid 5px @quoteSecondBorder;
				padding: 0px 0px 0px 20px;
				margin-top: 15px;
				.titleQuote{
					line-height: 8px;
					height: 13px;
				}
			}
			.singleQuote {
				padding: 5px 0px 5px 20px;
				margin: 5px 0px;
			}
		}
		.titleQuote{
			font-weight:bold;
		}
	}

	.textContent {
		word-wrap: break-word;
		.contentQuote{
			font-style: italic;
			padding-left: 0;
			margin: 0;
			.titleQuote{
				font-weight:bold;
			}
		}
	}
}

/* Question Container */
.questionContainer {
	.theContent {
		.contentQuote {
			background: @componentBackgroundLight;
		}
	}
}


