//
// Load core variables and mixins
// --------------------------------------------------

@import "variables.less";
@import "mixins.less";
@import "../font/font-awesome/css/font-awesome.min.css";



//
// List Question
// --------------------------------------------------

.dwqa-container {
	background: #fff;
}

.dw-question {
	margin: 0;
	line-height: @line-height-computed;

	.btn {
		.box-sizing(border-box);
	}

	.hide {
		display: none;
	}

	input[type="radio"],
	input[type="checkbox"] {
		margin: -3px 5px 0 0;
	}

	.wp-editor-container iframe {
		min-height: 100%;
	}

	.dw-search {
		margin-bottom: 20px;
	}

	.dwqa-search-form {
		width: 100%;
		text-align: left;
		position: relative;
		height: 100%;
		background: @main-bg;

		.dwqa-search-input {
			padding: 12px 6px 12px 18px;
			box-shadow: 0 0 8px rgba(0,0,0,.05) inset;
			font-size: 20px;
			height: 55px;
			width: 100%;
			color: @entry-title;
			border: 1px solid @gray-default;
			outline: 0;
			margin: 0;
			.box-sizing(border-box);
		}

		.dwqa-search-submit, 
		.dwqa-search-clear,
		.dwqa-search-loading {
			position: absolute;
			right: 6px;
			top: 0;
			width: 40px;
			line-height: 55px;
			padding: 0px;
			text-align: center;
			color: @entry-title;
			border: none;
			background: transparent;

			&:hover {
				color: @status-replied;
			}
		}

		.dwqa-search-submit {
			cursor: default;
		}

		.dwqa-search-clear {
			cursor: pointer;
		}

		.dwqa-search-loading {
			background: url('../img/facebook-loading.gif') no-repeat center;
			height: 100%;
		}
	}

	.tag-label {
		padding: 2px 8px;
		color: #fff;
		margin-right: 2px;
		position: relative;
		top: -1px;
		font-size: 10px;
		background: @gray;
		text-decoration: none;

		&.pending-review {
			background: @label-pending;
			border: 1px solid @border-pending;
			color: @text-pending;
		}
		&.overdue {
			background: @label-overdue;
			border: 1px solid @border-overdue;
			color: @text-overdue;
		}
	}

	.questions-list {
		border: 1px solid @main-border;
		border-top: none;

		&.search-result {
			border-top: 1px solid @main-border;
		}
	}

	.entry-header {
		width: 100%;
		margin-bottom: 10px;
		.box-sizing(border-box);

		.entry-title {
			margin: 0 !important;
			padding: 0 !important;
			font-size: 15px !important;
			line-height: 1.3 !important;

			a {
				font-weight: 700;
				font-family: @font-family-sans-serif;
			}
		}
	}

	.entry-content {
		width: 100%;
		padding: 0 0 10px 0;
		overflow: hidden;
		.box-sizing(border-box);
	}

	.entry-meta {
		color: @meta-color;
		font-size: 12px;

		> span:first-child {
			margin-left: 0;
			padding-left: 0;
			border-left: none;
		}

		> span {
			margin: 0 0 0 10px;
			padding: 0 0 0 10px;
			border-left: 1px solid @hentry-border;
		}

		.date {
			margin-left: 0 !important;
		}
	}

	.comment-meta a {
		font-weight: normal;
		color: @meta-color;
	}

	.entry-meta a {
		font-weight: normal;
		color: @gray;
	}

	.comment-meta a {
		font-size: 12px;
	}

	.edit-link a:before {
		content: "";
	}

	textarea,
	textarea:focus {
		border-width: 1px;
		resize: vertical;
	}

	p {
		margin: 0 0 7px 0;
	}

	.wp-switch-editor {
		height: auto;
	}

	a {
		text-decoration: none !important;
		outline: none !important;
		cursor: pointer;
	}

	.genericon {
		vertical-align: middle;
	}

	.loading {
	  	position: absolute;
	  	width: 100%;
	  	height: 100%;
	  	display: none;
	  	background: url(../img/loading.gif) no-repeat center 40%;
	  	z-index: 99999;
	}

	.dwqa-answer .loading{
		background: url(../img/facebook-loading.gif) no-repeat center;
		height: 11px;
		width: 16px;
		position: relative;
		top:0;
		left: 0;
		margin: 0 0 0 15px;
		display: none;
	}

	.select {
		position: absolute;
		top: 15px;
		right: 20px;

		li:hover {
			background: @main-border;
		}

		a {
			color: @entry-title;
			display: block;
		}

		.current-select {
			cursor: pointer;
			display: inline-block;
			border: 1px solid #ccc;
			line-height: 28px;
			min-width: 124px;
			padding: 0 40px 0 10px;
			position: relative;
			background-color: #f5f5f5;
			background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
			background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
			background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
			background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
			background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
			background-repeat: repeat-x;
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);

			&:before {
				content: "";
				width: 0;
				height: 0;
				border-top: 5px solid @text-color;
				border-left: 5px solid transparent;
				border-right: 5px solid transparent;
				position: absolute;
				right: 10px;
				top: 12px;
			}
		}

		ul {
			position: absolute;
			top: 30px;
			right: 0;
			border-bottom: 1px solid @main-border;
			border-top: none;
			margin: 0;
			padding: 0;
			display: none;
			width: 100%;
			z-index: 9999;

			li {
				display: block;
				border-top: 1px solid @main-border;
				border-left: 1px solid @main-border;
				border-right: 1px solid @main-border;
				background: @main-bg;
				width: auto;
				padding: 0 10px;
				cursor: pointer;
				line-height: 25px;
				margin: 0;

				&:first-child {
					border-top: none;
				}
			}
		}
	}

	.answer-flagged-alert{
		font-size: 12px;
		line-height: 30px;
	}

	.tags-list {
		padding: 0;
		margin: 0;
		list-style: none;

		li {
			padding: 0 5px;
			border: 1px solid @main-border;
			margin-right: 5px;
			display: inline-block;
		}

		li:first-child {
			border: none;
		}
	}
}


//
// Single Question Sidebar
// --------------------------------------------------

.single-dwqa-question {

	line-height: 20px;

	.dw-question {
		overflow: visible;
	}

	.dwqa-container {
		
		.dw-question {
			width: 66.66%;
			float: left;

			@media (max-width: @screen-xs-max) {
				width: 100%;
				float: none;
			}
		}

		.dwqa-sidebar {
			width: 30.33%;
			float: right;

			@media (max-width: @screen-xs-max) {
				width: 100%;
				float: none;
				margin-top: 30px;
			}
			
			a {
				text-decoration: none;
			}

			.author-info {

				position: relative;
				padding: 0 0 0 50px;
				min-height: 38px;
				border: 0;
				margin: 0;

				.avatar {
					border: 1px solid @hentry-border;
					padding: 2px;
					background: #fff;
					position: absolute;
					left: 0;
					height: 32px;
					width: 32px;
				}

				.time {
					color: @gray-light;
					font-size: 11px;
				}
			}

			.list-info {
				span {
					color: @gray;
					text-align: right;
					width: 70%;
				}
			}

			.dwqa-widget {
				h3 {
				    color: @gray-light;
				    font-size: 11px;
				    line-height: 1;
				    margin: 0 0 15px;
				    letter-spacing: 1px;
				    font-weight: bold;
				    text-transform: uppercase;
				}

				ul {
				    margin: 15px 0 0;
				    padding: 0;
				    border-bottom: 1px solid @hentry-border;
				    list-style: none;
				}

				li {
				    border-top: 1px solid @hentry-border;
				    padding: 9px 0 9px 30px;
				    margin: 0;
				    font-size: 11px;

				    &:before {
				      font-family: 'FontAwesome';
				      font-size: 8px;
				      color: @gray-light;
				      float: left;
				      margin: 0 10px 0 0;
				      content: "\f059";
				      font-size: 14px;
				      margin-left: -29px;
				    }
				}

				.question-title {
				    display: block;
				    font-size: 14px;
				    font-weight: 600;
				}
			}
		}

		// Base class
		.well {
		  min-height: 20px;
		  padding: 14px;
		  margin-bottom: 20px;
		  background-color: @well-bg;
		  border: 1px solid darken(@well-bg, 7%);
		  border-color: @border-color;
		  border-radius: 0;
		  .box-shadow(none);
		}

		// list
		.well {
		  ul {
		    list-style: none;
		    margin: 0;
		    padding: 0;
		    
		    li {
		      border-top: 1px solid @gray-lighter;
		      color: @gray-light;
		      text-transform: capitalize;
		      padding: 7px 0;
		      overflow: hidden;
		      margin: 0;

		      &:first-child {
		        border-top: none;
		      }
		    }

		    i {
		      margin-right: 5px;
		    }
		  }
		}

		#content .hentry .well:first-child {
		    margin-top: 0;
		}

		@media(max-width: 767px) {
		  .well {
		    .row-fluid [class*="span"] .btn {
		      display: block;
		      margin-top: 20px;
		    }

		    .row-fluid [class*="span"]:first-child .btn {
		      margin-top: 0;
		    }
		  }  
		}
	}

	.best-answer {
		display: block;
		color: @text-best-answer;
		font-weight: bold;
		font-size: 12px;
		padding: 5px 15px 0 0 !important;
		position: absolute;
		top: 0;
		right: 0;
		background: transparent;
		display: block;
		z-index: 1;

		&:before {
			content: "\f00c";
			font-size: 14px;
			color: @text-best-answer;
			padding-right: 5px;
			font-family: 'FontAwesome';
		}
	}
}


//
// Submit Question
// --------------------------------------------------
#submit-question {
	input, select {
		margin: 0;
	}

	input.required,
	select.required {
		
		border-color: @state-danger-border;

		&::-webkit-input-placeholder {
		   color: @state-danger-text;
		}

		&:-moz-placeholder { /* Firefox 18- */
		   color: @state-danger-text;  
		}

		&::-moz-placeholder {  /* Firefox 19+ */
		   color: @state-danger-text;  
		}

		&:-ms-input-placeholder {  
		   color: @state-danger-text;  
		}
	}

	label {
		display: block;
		margin-bottom: 15px;
	}

	#dwqa-submit-question-form {
		margin-bottom: 0;
	}

	.question-meta,
	.input-title,
	.input-content,
	.checkbox-private,
	.question-signin {
		margin-bottom: 20px;
	}

	.question-meta {
		.clearfix();
	}

	.question-meta .select-category,
	.question-meta .input-tag {
		width: 48%;
		float: left;
	}

	.question-meta .select-category select,
	.question-meta .input-tag input {
		padding: 5px 15px;
		width: 100%;
		height: 40px;
		font-size: 14px;
		.box-sizing(border-box);
	}

	.question-meta .input-tag {
		float: right;
	}

	.input-title {
		position: relative;
	}

	.input-title #question-title {
		font-size: 14px;
		width: 100%;
		height: 40px;
		padding: 5px 15px;
		margin: 0;
		.box-sizing(border-box);
	}

	.input-title .dwqa-search-clear,
	.input-title .dwqa-search-loading {
		position: absolute;
		right: 6px;
		top: 38px;
		width: 40px;
		line-height: 34px;
		padding: 0px;
		text-align: center;
		color: @entry-title;
		border: none;
		background: transparent;

		&:hover {
			color: @status-replied;
		}
	}

	.input-title .dwqa-search-clear {
		cursor: pointer;
	}

	.input-title .dwqa-search-loading {
		background: url('../img/facebook-loading.gif') no-repeat center;
		height: 34px;
	}

	.checkbox-private input {
		margin: -3px 5px 0 0;
	}

	.question-signin {
		position: relative;
		overflow: hidden;
	}

	.question-register,
	.question-login {
		position: absolute;
		width: 100%;
	}

	.question-register .register-input,
	.question-login .login-input {
		width: 48%;
		float: left;
	}

	.question-register .register-username,
	.question-login .login-password {
		float: right;
	}

	.question-register input,
	.question-login input {
		padding: 5px 15px;
		width: 100%;
		height: 40px;
		font-size: 14px;
		margin-bottom: 10px;
		.box-sizing(border-box);
	}

	.login-switch {
		clear: both;
	}
}

//
// Single Question
// --------------------------------------------------

#single-question {

	> .hentry {
		border: 1px solid @hentry-border !important;
		border-color: @border-color !important;
		padding: 15px 19px 0!important;
		margin-bottom: 20px!important;
		position: relative;
	}

	.answer-flagged-content {

		.entry-content {
			display: none;
		}

		.alert {
			border: none;
			margin-bottom: 0;
		}
	}

	.answer-flagged-show {
		cursor: pointer;
	}

	.entry-title {
		font-size: 24px!important;
		line-height: 1.3!important;
		margin: 0 0 10px!important;
	}

	.entry-footer {
		background: @main-bg;
		border-top: 1px solid @hentry-border;
		border-bottom: 0 !important;
		margin: 0 -19px 0;
		padding: 10px 15px !important;
		position: relative;
		width: auto;

		.meta-bottom {
			line-height: 30px;
			min-height: 30px;
			padding: 0;
			margin: 0 0 10px 0;
		}
	}

	.select {
		right: 10px;
		top: 10px;
	}

	.date {
		float: none;
		font-size: 12px;
		line-height: 16px;
		display: block;

		a {
			color: @gray-light;
		}
	}

	.avatar {
		width: 32px;
		height: 32px;
		padding: 2px;
		margin: 0 10px 0 0;
		border: 1px solid @hentry-border;
		position: absolute;
		top: 15px;
		left: 15px;
		background: #fff;
	}

	.comments-area {	
		.alert {
			margin: 0 !important;
			border: none;
			background: transparent;
			padding: 0;
			color: @red;
		}
	}

	.comment-meta {

		a {
			color: @gray;
		}

		.avatar {
			left: 15px;
			top: 15px;
			position: absolute;
			background: #fff;
		}

		.author {
			padding: 0;
		}
	}

	.entry-meta {
		padding: 15px 15px 10px 70px;
		margin: 0 !important;
		background: transparent;
		border-bottom: 0;
		overflow: hidden;

		.author,
		.date {
			display: inline-block;
			margin: 0;
			vertical-align: top;

			a:before {
				content: "";
			}
		}

		.author {
			padding-right: 10px;
			font-size: 15px;
			font-weight: 600;
			line-height: 1.3;
		}

		.date {
			display: block;
			float: none;
			padding: 0 !important;
			line-height: 1.3;
			font-size: 11px;
			border-left: none;
		}
	}

	#wp-dwqa-answer-question-editor-wrap,
	#wp-dwqa-custom-content-editor-wrap {
		margin-bottom: 15px;
		overflow: hidden;
	}

	.comment-edit-field {
		min-height: 90px;
		margin-bottom: 10px;
		width: 100%;
		.box-sizing(border-box);
	}
	.cancel-link {
		display: inline;
		padding-left: 5px;
		cursor: pointer;
	}

	.alert {
		background: @label-pending;
		border: 1px solid @border-pending;
		color: @text-pending;
		margin-bottom: 30px;
		padding: 8px 35px 8px 14px;

		p {
			margin: 0;
		}

		i {
			padding-right: 10px;
		}
	}

	.dwqa-answer-signin input {
		width: 100%;
		margin-bottom: 10px;
	}
}



//
// Archive Question
// --------------------------------------------------

.dw-question {

	.questions-wrap  {
		min-height: 400px;
		position: relative;
	}

	.filter-bar {

		border: 1px solid @main-border;
		border-bottom: 0;
		position: relative;

		> ul  {
			margin: 0;

			> li  {
				display: block;
			}
		}

		.order  {
			padding: 0;
			margin: 0;
			border-bottom: 0;
			display: inline-block;
			position: absolute;
			top: 15px;
			right: 20px;
			text-align: center;

			li  {
				display: inline-block;
				border-style: solid;
				border-width: 1px 1px 0;
				border-color: transparent;
				background: transparent;
				color: @gray-dark;
				font-size: 13px;

			    .transition(border-color 0.3s ease-out); 

			    &.active a  {
					padding: 0;
					color: @main-gray;
					text-decoration: none !important;
				}

				&:last-child {
					margin-right: 0;
				}
			}

			span,i {
				cursor: pointer;
				font-size: 12px;
			}

			a  {
				padding: 0;
				display: inline-block;
				font-size: 11px;
				font-weight: 600;
				color: @main-gray;	
			}

			i {
				display: inline-block;
				position: relative;
				top: 0;
				padding-left: 4px;
			}
		}
	}

	.filter  {
		padding: 15px 20px;
		position: relative;
		border-bottom: 1px solid @main-border;
		clear: both;
		.box-sizing(border-box);

		&.sort-by {
			height: 60px;
		}

		ul {
			margin: 0;
			padding: 0;
		}

		li  {
			display: inline-block;
			line-height: 30px;
			font-size: 90%;
			margin: 0 9px 0 0;
			font-weight: bold;
		}

		.status {
			padding-right: 150px;
		}

		.select li {
			margin: 0;
		}

		li.tag,
		.filter-by-category {
			display: inline-block;
			margin: 0;
		}

		.filter-by-category.select {
			left: 20px;
			right: auto;
		}

		.filter-by-category li  {
			margin: 0;
			display: block;
		}

		.status a:hover,
		.active a {
			text-decoration: underline !important;
		}
		.status-new a  { 
			color: @status-new; 
		}
		.status-open a  { 
			color: @status-open; 
		}
		.status-replied a,
		.replied a  { 
			color: @status-replied; 
		}
		.status-answered a,
		.answered a  { 
			color: @status-replied; 
		}
		.status-resolved a,
		.resolved a  { 
			color: @status-resolved; 
		}
		.status-closed a,
		.closed a  { 
			color: @status-closed; 
		}
		.status-pending-review a,
		.pending-review a {
			color: @status-pending; 
		}
		.status-overdue a,
		.overdue a {
			color: @status-overdue; 
		}
		.status-active a  { 
			text-decoration: underline !important; 
		}
	}

	.hentry  {
		position: relative;
		min-height: 90px;
		padding: 20px 220px 20px 0 !important;
		margin: 0 !important;
		border-top: 1px solid @gray-lighter;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
		.box-sizing(border-box);
		.transition(all 0.25s ease-in-out);
		overflow: visible;
		width: auto;
		float: none;

		&:first-child  {
			border-top: 0;
		}

		&:hover,
		&.current {
			background-color: @question-hover-bg;

			.single-dwqa-question & {
				background-color: transparent;
			}
		}
	}

	.not-found  {
		padding: 10px;
		margin: 0;
	}

	.entry-header {
		margin: 0;
		padding: 6px 0 0 70px !important;
		position: relative;

		.single-dwqa-question & {
			padding: 0 !important;
		}
	}

	.entry-title {

		a {
			color: @entry-title;
		}

		&:first-letter {
			text-transform: uppercase;
		}
	}

	.entry-meta  {
		margin: 0 !important;
	}

	.questions-list .entry-meta {
		padding: 0;
		border: 0;
	}

	.entry-status  {
		position: absolute;
		left: 20px;
		top: 10px;
		background: #000;
		font-size: 90%;
		font: 0/0 a;
		color: #fff;
		margin: 0 5px 0 0;
		text-transform: uppercase;
		width: 30px;
		height: 30px;
		line-height: 30px;
		display: block;
		text-align: center;
		border: none !important;

		&:before {
			display: inline-block;
			width: 16px;
			height: 16px;
			-webkit-font-smoothing: antialiased;
			line-height: 1;
			font-family: 'FontAwesome';
			text-decoration: inherit;
			font-weight: normal;
			font-style: normal;
			vertical-align: top;
			color: #fff;
			font-size: 14px;
			line-height: 30px;
		}

		&.status-new:before {
			content: "\f059";
		}
		&.status-open:before, 
		&.status-re-open:before {
			content: "\f059";
		}
		&.status-answered:before {
			content: "\f112";
		}
		&.status-resolved:before {
			content: "\f00c" !important;
		}
		&.status-closed:before {
			content: "\f023";
		}

		.staff-answered {
			background: @status-replied !important;

			&:before {
				content: "\f112";
			}
		}

		&.status-overdue {
			background: @status-overdue !important;
		}

		&.status-new  { 
			background: @status-new; 
		}
		&.status-open,
		&.status-re-open { 
			background: @status-open; 
		}
		&.status-answered { 
			background: @status-replied; 
		}
		&.status-resolved { 
			background: @status-resolved !important; 
		}
		&.status-closed { 
			background: @status-closed !important; 
		}
		&.status-pending { 
			background: @status-pending;
		}
	}


	footer.entry-meta {
		position: absolute;
		margin: 0 !important;
		padding: 0;
		top: 20px;
		right: 20px;
		margin: 0;
		width: auto;
	}

	.entry-comment,
	.entry-view,
	.entry-vote {
		width: 50px;
		height: 50px;
		text-align: center;
		border: 1px solid @main-border;
		float: left;
		margin-left: 14px;
		font-size: 11px;

		strong {
			display: block;
			line-height: 20px;
			margin-top: 5px;
			font-size: 120%;
			font-weight: 500;
			color: @main-gray;
		}
	}

	.archive-question-footer {
		padding: 20px 0 0;
		overflow: hidden;
	}

	.pagination {
		text-align: center;
		float: left;
		border: none !important;
		margin: 0 !important;
		padding: 0 !important;

		ul  {
			margin: 0;
			padding: 0;
			float: left;

			>li {
				display: inline !important;

				>a, 
				span {
					float: left;
					padding: 0 15px;
					line-height: 34px;
					text-decoration: none;
					background-color: #fff;
					border: 1px solid @main-border;
					border-left-width: 0;
					margin: 0;

					&:hover {
						color: @gray-darker;
					}
				}
			}

			>li:first-child>a, 
			>li:first-child>span {
				border-left-width: 1px;
			}

			> .active > a, 
			> .active > span, 
			> li > span.current {
				color: @gray-light;
				cursor: default;
			}

			> li > a:hover, 
			> li > a:focus, 
			> .active > a, 
			> .active > span, 
			> li > span.current {
				background-color: #f5f5f5;
			}

			li a:hover {
				background: @gray-lighter !important;
				filter: none !important;
				border-color: @main-border;
			}

			li.hide a,
			li.current a {
				background: none !important;
				filter: none !important;
				color: @gray-light;
				cursor: inherit !important;
			}

		}
	}

	.questions-wrap .btn {
		float: right;
		margin: 0
	}

	.questions-wrap .filter-bar .btn {
		margin-top: 0;
		z-index: 1;
		position: absolute;
		top: 15px;
		right: 20px;
		text-align: center;
	}

	.search-results-suggest {
		
		position: absolute;
		width: 100%;
		z-index: 2;
		.box-sizing(border-box);

		#gradient .vertical(#fff; rgba(255,255,255,0); 0%; 100%);

		ul {
			list-style: none;
			margin: 0 5px;
			padding: 0;
			background-color: #fff;
			border-left: 1px solid @gray-default;
			border-right: 1px solid @gray-default;
			border-bottom: 1px solid @gray-default;
		}

		li {
			border-bottom: 1px solid @main-border;
			background-color: @sugest-bgcolor;
			margin: 0;

			&:hover {
				background: @sugest-color;
			}		

			a {
				color: @gray;
				display: block;
				padding: 10px 15px;

				strong {
					color: #000;
				}
			}

			&.no-link {
				background: transparent;
			}
		}
		li:last-child {
			border-bottom: none;
		}

		span {
			padding: 10px 20px 350px 20px;
			display: block;
		}
	}
}



//
// Answers & Comments
// --------------------------------------------------

.single-dwqa-question {

	#answers {
		.hentry {
			padding: 0 !important;
			min-height: 90px;
			margin-left: 0 !important;
			margin-bottom: 30px !important;
			position: relative;
			border: 1px solid @main-border !important;
			border-color: @border-color !important;
			.box-shadow(0 1px 0 @gray-shadow);

			&:hover {
				.entry-vote-best,
				.answer-actions {
					.opacity(1);
				}
			}

			&.staff {
				border: 1px solid @border-user-role !important;
				border-color: @border-user-role !important;
				.box-shadow(0 0 1px @border-user-role);

				.entry-meta {

					span {
						border: none !important;
					}
				}

				.entry-vote {
					border: 1px solid @border-user-role !important;
					border-color: @border-user-role !important;
					.box-shadow(0 0 1px @border-user-role);
				}
			}

			&.best_answer {
				border: 1px solid @border-best-answer !important;
				border-color: @border-best-answer !important;
				.box-shadow(0 0 1px @border-best-answer);

				.entry-meta {

					span {
						border: none !important;
					}
				}

				.entry-vote {
					border: 1px solid @border-best-answer !important;
					border-color: @border-best-answer !important;
					.box-shadow(0 0 1px @border-best-answer);
				}

				.entry-vote-best {
					.opacity(1);
				}

				&.no-click {
					.entry-vote-best a {
						cursor: default;
					}
				}
			}
		}

		h3 {
			line-height: 30px;
			margin: 0;
			padding: 0 0 20px 0;
			font-size: 16px;
		}

		.entry-vote {
			width: 23px;
			height: auto;
			left: -25px;
			top: 10px;
			position: absolute;
			background-color: #fff;			
			margin: 0;
			padding: 0;
			border: 1px solid @main-border;
			border-color: @border-color !important;

			a {
				text-indent: -9999px;
				position: relative;
				width: 23px;
				height: 23px;
				font-size: 11px;
				line-height: 23px;
				padding: 0;
				font-weight: 600;
				.box-sizing(border-box);
				box-shadow: none;
				display: inline-block;
				color: @gray-dark;
				text-align: center;
				text-shadow: none;
				cursor: pointer;
				border: 0;
				text-transform: uppercase;
				#gradient .vertical(@start-color: #fff; @end-color: @gray-lighter; @start-percent: 0%; @end-percent: 100%);
				
				&:before {
					content: "";
					border-bottom: 6px solid @gray-light;
					border-left: 6px solid transparent;
					border-right: 6px solid transparent;
					top: 8px;
					left: 50%;
					margin-left: -6px;
					position: absolute;
				}
			}

			.vote-up:hover:before {
				border-bottom-color: @gray-dark;
			}
			.vote-down:hover:before {
				border-top-color: @gray-dark;
			}

			.vote-down:before {
				border-top: 6px solid @gray-light;
				border-bottom: none;
			}

			.vote-up {
				border-bottom: 1px solid @gray-border;
			}

			.vote-down {
				border-top: 1px solid @gray-border;
			}

			.vote-count {
				font-size: 14px;
				line-height: 28px;
				font-weight: 500;
				width: 23px;
				text-align: center;
			}

			.answer-flagged-content{
				display: none;
			}
		}

		.entry-vote-best {
			.opacity(0);
			.transition(opacity .1s);

			position: absolute;
			overflow: hidden;
			top: -1px;
			right: -1px;
			width: 50px;
			height: 50px;
			z-index: 1;

			.entry-vote-best-bg {
				.rotate(45deg);
				font-weight: bold;
				font-size: 12px;
				text-transform: uppercase;
				padding: 0;
				position: absolute;
				top: -35px;
				right: -35px;
				background: @gray-light;
				color: #fff;
				display: block;
				z-index: 1;
				width: 70px;
				height: 70px;
			}

			a:hover,
			&.active {
				.entry-vote-best-bg {
					background: @bg-best-answer;
				}
			}

			i {
				font-size: 15px;
				position: absolute;
				top: 8px;
				right: 8px;
				color: #fff;
				z-index: 1;	
			}

			a {
				color: @gray-light;
			}
		}

		// .entry-vote-best {
		// 	position: absolute;
		// 	left: -25px;
		// 	top: 95px;
		// 	text-align: center;
		// 	width: 23px;
		// }
	}

	#add-answer {

		#dwqa-answer-question-editor {
			min-height: 120px;
			height: 120px;
		}
	}

	.commentlist {

		.date a {
			color: @gray-light !important;
			font-size: 11px;
		}
	}

	#comments .comment-content {
		padding: 0 0 5px 0;
		border: 0;
	}

	.entry-footer {

		#respond {
			padding: 5px 15px 0 15px;
			border-top: 1px solid @gray-lighter;
		}

		#comments {

			margin: 0 -15px 0 -15px;
			border: 0;
			padding: 0;
			background: transparent;

			.comments-area {
				background: transparent;
				border: none;
				padding: 0;
				margin: 15px 0 0 0 !important;
			}

			.commentlist {
				border: 0;
				border-top: 1px solid @gray-lighter;
				padding: 0;
				margin: 10px 0 0 0;

				&:before,
				&:after {
					border: none;
				}

				.comment-action {
					border: 1px solid @gray-lighter;
					border-top: 0;
					background: @main-bg;
					padding: 5px;
					top: 0;
					right: 0;
				}
			}

			.comment {
				background: transparent !important;
				border: 0;
				border-bottom: 1px solid @gray-lighter;
				padding: 10px 15px;
				margin: 0;

				&:before,
				&:after {
					border: 0;
				}

				&:last-child {
					border-bottom: none;
				}
			}
		}
	}

	#comments.comments-area #respond #comment {
		min-height: 38px !important;
		height: 38px;
		padding: 3px 5px;
		border: 1px solid #ddd;
	}

	.comments-area {
		margin: 0;
		background: @answer-bg;
		padding: 0;
		border: 0;
		position: relative;

		#respond {
			border-top: 1px solid @gray-lighter;

			textarea {
				min-height: 38px;
				height: 38px;
			}
		}

		.commentlist {
			padding: 0;
			margin: 0;
			width: 100%;

			&:before {
				content: "";
				border-left: 12px dashed transparent;
				border-right: 12px solid transparent;
				border-bottom: 12px solid @gray-lighter;
				position: absolute;
				left: 22px;
				top: -11px;
			}

			&:after {
				content: "";
				border-left: 10px dashed transparent;
				border-right: 10px solid transparent;
				border-bottom: 10px solid @answer-bg;
				position: absolute;
				left: 24px;
				top: -9px;
			}
		}

		.comment {
			border: none;
			border-top: 1px solid @gray-lighter;
			padding: 15px 15px 10px 70px;
			list-style: none;
			background: transparent;
			margin: 0;

			&:before {
				content: "";
			}

			p {
				margin-bottom: 15px;
			}
		}

		.comment-meta {
			margin-bottom: 10px;
			font-size: 11px;
			line-height: 20px;

			.sep {
				display: none;
			}

			.avatar {
				float: left;
				margin: 2px 7px 0 0;
				background: #fff;
			}

			.author a {
				font-weight: 700;
			}
		}

		.comment-author {
			font-weight: bold;
			color: @text-color;
		}

		.reply {
			display: none;
		}
	}

	#respond {
		margin: 0;
		padding: 5px 15px 15px 15px;
		background: transparent;
		border: none;
		width: 100%;
		.box-sizing(border-box);

		textarea {
			text-indent: 0;
			border: 1px solid @main-border;
			height: 40px;
			min-height: 40px;
			box-shadow: none;
			width: 100%;
			margin: 0;
			outline: 0;
			overflow-y: hidden;
			.box-sizing(border-box);
			.transition(height 0.3s);
		}

		h3 { 
		    border-top: none;
		    color: @text-color;
		    font-size: 14px;
		    line-height: 30px;
		    margin: 0;

		    display: none;
		}

		form {
			margin: 0;
			padding: 10px 0 0 50px;
			position: relative;

			.avatar {
				position: absolute;
				top: 10px;
				left: 0;
				background: #fff;
			}

			.form-submit {
				margin: 15px 0 0 0;
				float: none;
				display: none;
				overflow: hidden;

				#submit {
					left: 0;
					top: 0;
					margin: 0;
					width: auto;
				}
			}
		}

		.comment-form-comment {
			label {
				display: none;
			}
			textarea {
				width: 100% !important;
				resize: vertical;
				.box-sizing(border-box);
				min-height: 80px;
				height: 80px;
				margin: 0;
			}
		}

		.form-submit {
			margin-bottom: 0;
		}
	}

	.commentlist {
		margin: 0;

		.comment {
			position: relative;

			&:hover .comment-action{
				display: block;
			}
		}

		.comment-content {
			margin-bottom: 0px;
			padding: 0 0 5px 0;
			float: none;
			font-size: 13px;
			width: 100%;
			position: relative;
			border: 0;
		}

		.comment-action{
			position: absolute;
			display: none;
			padding: 0;
			top: 15px;
			right: 15px;
			font-size: 13px;
			line-height: 13px;

			a {
				float: none;
				display: inline-block;
				line-height: 1;
			}
		}
	}

	.comment-action,
	.answer-actions {
		.answer-comment {
			display: none;
		}
		> span {
			position: relative;
			display: block;
			width: 16px;
			height: 16px;
			float: left;
			margin: 0 !important;

			a {
				color: @meta-color;
				font: 0/0 a;
			}

			i {
				position: absolute;
				z-index: 1;
				color: @gray-light;
				top: 0;
				left: 0;
				cursor: pointer;
			}
		}
	}

	.answers-list {
		margin-bottom: 20px;

		.entry-content {
			padding: 0 15px 15px 70px !important;
			word-wrap: break-word;
		}

		.author a {
			font-size: 13px;
			font-weight: 700;
		}

		.answer-actions{
			.opacity(0);
			.transition(opacity .1s);

			font-size: 13px;
			color: #ccc;
			float: right;
			position: relative;
			display: inline-block;
			margin-right: 30px;
			margin-top: 0;
			height: 30px;

			i {
				line-height: 1.3;
			}

			span:hover{
				color: @gray-darker;
			}
		}

		.dwqa-answer {

			.entry-meta{
				margin: 0 0 1.714285714rem;

				.user-role {
					position: absolute;
					top: 55px;
					left: 17px;
					background: transparent;
					padding: 0 !important;
					margin: 0 !important;
					text-transform: uppercase;
					font-size: 11px;
					color: @text-user-role;
				}

				.tag-label {
					background: @bg-user-role;
					border: 1px solid @border-user-role !important;
					color: @text-user-role;
					padding: 1px 5px;
					display: inline-block;
					vertical-align: top;
					margin-top: 0;
					margin-left: 0 !important;
					text-transform: uppercase;
					font-size: 11px;
				}

				.tag-label {
					background: @status-pending;
					color: #fff;
					margin-left: 5px !important;
				}
			}

			.draft-tag{
				background: red;
				color: white;
				font-size: 0.7em;
				padding: 0 0.5em;
				position: relative;
				margin-left: 0.7em;

				&:before {
					content: "";
					position: absolute;
					top: 0px;
					left: -0.6em;
					border-top: 0.8em solid transparent;
					border-bottom: 0.8em solid transparent; 
					border-right:0.8em solid red; 
				}
			}
		}
	}

}



//
// Login form
// --------------------------------------------------

.dw-question {

	#loginform {
		overflow: hidden;
		margin: 0;

		.input {
			width: 100%;
			margin-bottom: 0;
			font-size: @font-size-base;
			.box-sizing(border-box);
		}

		.login-username,
		.login-password,
		.login-submit {
			float: left;
			margin: 0;

			@media (max-width: @screen-phone) {
				width: 100% !important;
				float: none;
				margin: 0 0 5px 0 !important;
			}
		}

		.login-username {
			width: 37%;
		}

		.login-password {
			width: 37%;
			margin-left: 20px;
		}

		.login-remember {
			display: none;
		}

		.login-submit {
			float: right;
			width: 20%;
			margin-top: 25px;

			input {
				width: 100%;
			}
		}
	}

	&#submit-question {
		.login-submit {
			margin-top: 30px;
		}
	}

	.login-box {

		h3 {
			font-size: 14px !important;
		}
		
		background: @main-bg;
		padding: 20px;
		margin-bottom: 20px;
		border: 1px solid @main-border !important;
		border-color: @border-color !important;
		.box-shadow(0 1px 0 @gray-shadow);
	}
}


//
// Utility class
// --------------------------------------------------

.dw-question {
	.dwqa-title {
		line-height: 30px;
		margin: 0;
		padding: 0 0 20px 0;
		font-size: 16px;
	}

	.answer-edit-cancel {
		color: #3a3a3a;
	}

	.wp-editor-container {
		border-radius: 0;
	}

	.pagination ul>li:first-child>a, 
	.pagination ul>li:first-child>span,
	.pagination ul>li:last-child>a, 
	.pagination ul>li:last-child>span {
		border-radius: 0;
	}

	input[type="checkbox"] {
		-webkit-appearance: checkbox;
	}

	// Alert style
	.alert {
	  padding: 8px 35px 8px 14px;
	  margin-bottom: 20px;
	  text-shadow: 0 1px 0 rgba(255,255,255,.5);
	  background-color: @alert-warning-bg;
	  border: 1px solid @alert-warning-border;
	  border-radius: @alert-border-radius;
	}
	.alert .close {
	  position: relative;
	  top: -2px;
	  right: -21px;
	  line-height: @line-height-base;
	}
	.alert,
	.alert h4 {
	  color: @state-warning-text;
	}
	.alert a {
	  color: @state-warning-text;
	  font-weight: bold;
	}
	.alert-success a {
	  color: @alert-success-text;
	}
	.alert-danger a,
	.alert-error a {
	  color: @alert-danger-text;
	}
	.alert-info a {
	  color: @alert-info-text;
	}
	.alert a:hover,
	.alert a:active,
	.alert a:focus {
	  color: #000 !important;
	}
	.alert-success {
	  background-color: @alert-success-bg;
	  border-color: @alert-success-border;
	  color: @alert-success-text;
	}
	.alert-success h4 {
	  color: @alert-success-text;
	}
	.alert-danger,
	.alert-error {
	  background-color: @alert-danger-bg;
	  border-color: @alert-danger-border;
	  color: @alert-danger-text;
	}
	.alert-danger h4,
	.alert-error h4 {
	  color: @alert-danger-text;
	}
	.alert-info {
	  background-color: @alert-info-bg;
	  border-color: @alert-info-border;
	  color: @alert-info-text;
	}
	.alert-info h4 {
	  color: @alert-info-text;
	}
	.alert-block {
	  padding-top: 14px;
	  padding-bottom: 14px;
	}
	.alert-block > p,
	.alert-block > ul {
	  margin-bottom: 0;
	}
	.alert-block p + p {
	  margin-top: 5px;
	}
}



//
// Other fix
// --------------------------------------------------

.dw-question .wp-editor-container,
.dw-question .questions-list,
.dw-question .filter-bar,
#single-question > .hentry,
.single-dwqa-question #answers .hentry {
	background: #fff;
}


//
// Responsive
// --------------------------------------------------

@media(max-width: @screen-tablet-u) {
	.dw-question {

		> article {
			.entry-header,
			.entry-content {
				padding: 0 0 10px 0 !important;
			}
		}

		.meta-bottom {
			.sep,
			.question-vote {
				display: none;
			}
		}
		.comment-action {
			display: none !important;
		}
	}
}

@media (min-width: @screen-tablet) and (max-width: @screen-desktop) {
	.dw-question {

		.tags-list {
			margin-top: 40px;
		}
	}
}

@media(max-width: @screen-phone) {
	.dw-question {

		.hentry {
			padding: 0px 15px 15px 0 !important;
		}

		#answers .hentry {
			margin-left: 0 !important;
		}

		.filter-by-category {
			position: relative;
			right: 0;
		}

		footer.entry-meta {
			position: static;
			overflow: hidden;
			padding: 5px 0 0 70px !important;

			> div {
				width: auto;
				height: auto;
				border: none;
				margin: 0 10px 0 0;
			}

			strong {
				display: inline;
			}
		}

		.filter-bar > .order {
			padding: 40px 0 0 0;
			display: none;
		}

		.questions-wrap .filter-bar .btn {
			width: 100%;
			position: relative;
			z-index: 1;
			right: auto;
		}

		.filter {
			&.sort-by {
		      height: auto;
		    }

			.status {
				margin: 10px 0 0 0;
				padding-right: 0;
				text-align: center;
			}

			.status li:first-child {
				//display: none;
			}

			.filter-by-category.select {
				float: none;
				margin: 0; 
				width: 100%;
				left: auto;
				top: 0;

				.current-select {
					width: 100%;
					.box-sizing(border-box);
				}
			}

			.order {
				display: none;
			}
		}

		.entry-header {
			padding-top: 20px !important;

			.entry-status {
				top: 22px;
			}
		}

		.pagination { 
			float: none;
			display: inline-block;

			ul {
				float: none;
			}
		}
	}

	#submit-question {
		.question-meta .select-category,
		.question-meta .input-tag,
		.question-register .register-input,
		.question-login .login-input {
			width: 100%;
			float: none;
		}
		.question-meta .select-category,
		.question-register .register-input {
			margin-bottom: 20px;
		}
	}

	.dw-question .questions-wrap .filter-bar .btn {
	    top: 0 !important;
	}
	.dw-question .questions-wrap .archive-question-footer {
	  	text-align: center;
	}
	.dw-question .questions-wrap .archive-question-footer .btn {
		float: none;
		margin-top: 10px;
	}
}

@media(max-width: @screen-iphone) {
	.dw-question {

		.meta-bottom {
			margin-top: 30px;
		}
	}
}