/*
Author: LoginRadius
Version: 1.0
Author URI: http://www.LoginRadius.com
*/

drk_color = #626664
post_btn_color = #1BBC9B
post_btn_hover_color = #019875

border_color = #BDBDBD

.lr-editor-container *
	padding: 0
	margin: 0

.lr-comment-editor-toolbar-left
	float: left
	width: 140px
	@media (max-width: 370px)
		width: 80px
	
.lr-comment-editor-toolbar-right
	float: right
	width: 220px
	overflow: hidden
	@media (max-width: 370px)
		width: 100%
		
// Commenting Interface Buttons
.lr-editor-btn
	background-image: url(../images/editor/lr-commenting.png)
	background-image: linear-gradient(transparent,transparent),url(../images/editor/lr-commenting.svg)
	background-repeat: no-repeat
	background-size: 100%
	height: 30px
	width: 30px
	float: left
	&.share
		background-position: 0px -180px
	&.mention
		background-position: 0px -151px
	&.img
		background-position: 0px -211px
	&.format
		background-position: 0px -240px
	&.lr-post-button
		background: post_btn_color
		height:auto
		width: 150px
		float: right
		text-align: center
		border-bottom-right-radius: 10px
		font: 16px Arial
		line-height: initial
		@media (max-width: 370px)
			width: 100%
			border-bottom-left-radius: 10px
		span
			padding: 6px
			display: block
			color: #fff
			@media (max-width: 370px)
				font: 20px Arial
				padding: 30px
		&:hover
			background: post_btn_hover_color
	&.lr-close-popup 
		background-position: 0 -181px
		width: 20px
		height: 19px
		float: right
		margin-right: -10px
		cursor: pointer
		background-color: black
		border-radius: 5px

.jqte_tool_icon
	display: block
	width: 20px
	height: 20px
	background-image: url(../images/editor/lr-commenting.png)
	background-image: linear-gradient(transparent,transparent),url(../images/editor/lr-commenting.svg)
	background-repeat: no-repeat
	background-size: 130%
	
.jqte_tool.jqte_tool_4 .jqte_tool_icon
	background-position: -4px -107px

.jqte_tool.jqte_tool_5 .jqte_tool_icon
	background-position: -3px -81px

.jqte_tool.jqte_tool_6 .jqte_tool_icon
	background-position: -4px -55px

.jqte_tool.jqte_tool_7 .jqte_tool_icon
	background-position: -4px -3px

.jqte_tool.jqte_tool_8 .jqte_tool_icon
	background-position: -4px -29px

.lr-editor-format-container
	position: absolute
	left: 0

div[class*="lr-button-"]
	cursor: pointer

.lr-comment-editor .lr-comment-editor-toolbar .lr-format-toolbar 
	background-color: #ffffff
	border: 1px solid #a1a1a1
	border-top: none
	-webkit-border-radius: 0px 0px 5px 5px
	-moz-border-radius: 0px 0px 5px 5px
	-ms-border-radius: 0px 0px 5px 5px
	-o-border-radius: 0px 0px 5px 5px
	border-radius: 0px 0px 5px 5px
	left: 0px
	overflow: hidden
	position: absolute
	top: 30px
	width: 103px
	z-index: 3


.lr-mention-menu-filter 
	display: none

.lr-editor-media-upload .lr-url-invalid 
	border: 1px solid #b32d2d


.lr-editor-media-upload .lr-invalid-url-message 
	display: none
	width: 145px
	float: left
	color: #b32d2d
	font-size: 10px


.lr-attach-media
	float: right

.lr-mention-menu
	background-image: none
	border-top: none
	outline: none
	-webkit-border-radius: 0px 0px 5px 5px
	-moz-border-radius: 0px 0px 5px 5px
	-ms-border-radius: 0px 0px 5px 5px
	-o-border-radius: 0px 0px 5px 5px
	border-radius: 0px 0px 5px 5px
	position: absolute
	top: 29px
	left: 92px
	width: 35%
	background-color: #fff
	border: 1px solid #000
	padding: 20px
	z-index: 9999
	overflow-y: scroll
	height: 150px
	> .lr-mentions-menu-label 
		color: #404040
		display: block
		font: bold 13px "Helvetica Neue",Arial,Helvetica,Geneva,sans-serif
		padding: 8px

.lr-mention-menu-content
	.lr-mention-item 
		cursor: pointer
		position: relative
		margin-bottom: 5px
		.lr-mention-item-avatar
			border: 0
			width: 25px
			height: 25px
		.lr-mention-item-display-name 
			display: inline-block
			cursor: inherit
			font: normal 13px/1em "Helvetica Neue",Arial,Helvetica,Geneva,sans-serif
			margin: 0 10px
			color: #545454
			vertical-align: text-top
		span    
			position: absolute
			right: 10px
			top: 0
			height: 25px
			width: 25px
			&.lr-mention-item-twitter 
				background-position: 0 -471px
			&:before
				width: 22px
				height: 22px
		> .lr-mention-item 
			padding: 0

.lr-mention-menu .lr-mention-item-hover 
	background: #f2f2f2

/*Icon Sprite*/
span[class*="lr-img-icon-"]
	text-align: center
	font-size: 13px
	&.share 
		width: 20px
		height: 20px
		padding: 0px 2px
		line-height: 20px //vertically centers it properly
		&:before 
			width: 15px
			height: 15px

#lr-comment-error-msg
	width: 210px
	position: absolute
	background-color: #f22613
	color: white
	bottom: 29px
	right: 0
	border: 1px solid border_color
	padding: 5px 10px
	font-size: 12px
	border-top-left-radius: 10px

.lr-commenting-share-name + input[type="checkbox"] 
	width: auto
	height: auto
	margin: 0
	padding: 0
	margin-top: 6px

.lr_comment_loader 
	background: url('../images/editor/loading_icon.gif') no-repeat center 65% rgba(255,255,255,0.7)
	background-size: 139px
	z-index: 7999
	position: absolute
	bottom: 0
	left: 0
	width: 100%
	height: 100%

// Arrow Box
.arrow_box
	background: drk_color
	padding: 3px 4px
	bottom: 42px
	cursor: pointer
	display: none
	&:after
		top: 100%
		left: 13%
		border: solid transparent
		content: " "
		height: 0
		width: 0
		position: absolute
		pointer-events: none
		border-color: rgba(136, 183, 213, 0)
		border-top-color: drk_color
		border-width: 9px
		margin-left: -9px

#lr_comment_form 
	position: relative
	.jqte 
		//border: 1px solid #444
		border-bottom: 1px solid border_color
		margin-bottom: -1px
		-webkit-box-shadow: none
		box-shadow: none
		border-radius: 10px 10px 0 0
		//margin-top: 15px
		.jqte_toolbar 
			background: #444
			border-bottom: 1px solid #ccc
			padding: 0
		.jqte_tool 
			border-right: 1px solid #000
			border-radius: 0
	.lr-comment-editor-toolbar
		height: 30px
		margin: 0
		padding: 0
		position: relative
		//text-align: right
		width: 100%
		border-top: 1px solid #BDBDBD
		background-color: drk_color
		border-radius: 0 0 10px 10px
		@media (max-width: 370px)
			height: 83px
	.lr-share-container
		left: 88px
		position: absolute
		&:empty
			&:before 
				content: "Providers Not Configured"
				color: red
				font-size: 10px
				font-weight: bold
				padding: 10px
		label
			width: 100%
			display: block
			-webkit-box-sizing: border-box
			-moz-box-sizing: border-box
			-ms-box-sizing: border-box
			box-sizing: border-box
			display: inline
	.lr-comment-interface
		border-radius: 10px
		border: 1px solid border_color
		margin: 15px 0
		background-color: #fff
		font-family: arial
		textarea
			margin: 0px
			height: 160px
			width: 100%
			border: none
		#images
			border: none
	.lr-comment-login-container-header 
		width: 100%
		height: 30px
		padding: 0 20px
	.lr-comment-login-container 
		background-color:#ffffff
		border:1px solid #a1a1a1
		-webkit-border-radius:5px
		-moz-border-radius:5px
		-ms-border-radius:5px
		-o-border-radius:5px
		border-radius:5px
		overflow:hidden
		text-align:left
		z-index:9000
		padding-top: 10px
		padding-bottom: 40px
		position:absolute
		top:50%
		left:50%
		width:500px
		margin-left:-270px
		margin-top:-220px
		a 
			display: inline-block
			text-decoration: none
			color: #fff
			width: 100%
			margin-bottom: 5px
		span[class*="lr-img-icon-"]
			-webkit-box-sizing: border-box
			-moz-box-sizing: border-box
			-ms-box-sizing: border-box
			box-sizing: border-box
			&:after 
				content: attr(title)
				text-transform: capitalize
			&:before 
				margin-right: 10px
	.comment-reply-title
		font-size: 1.2em
		font-weight: normal
	.lr-login-form
		input[type="text"], input[type="email"], input[type="url"] 
			width: 100%
			padding: 5px 10px
	button, .button 
		background: post_btn_color
		box-shadow: none
		border: none
		color: #fff
		padding: 5px 10px


#lr_comment_form .jqte .jqte_tool,
.lr-editor-container #lr_comment_form .jqte .jqte_tool_icon,
.lr-editor-container #lr_comment_form .jqte .jqte_tool_label 
	border: 0
	margin: 2px

#lr_comment_form .jqte .jqte_tool:hover .jqte_tool_icon,
.lr-editor-container #lr_comment_form .jqte .jqte_tool:hover .jqte_tool_label 
	border: 0

.lr-comment-overlay 
	background-color: #CCC
	position: fixed
	top: 0
	left: 0
	width: 100%
	height: 100%
	z-index: 8000
	opacity: 0.6

#author
	margin-top: 0

.comment-notes 
	clear: both
	font-size: 11px
	font-style: italic
	color: #ccc

$lr-column-2
	width: 50%
	float: left
	padding: 0 20px
	-webkit-box-sizing: border-box
	-moz-box-sizing: border-box
	-ms-box-sizing: border-box
	box-sizing: border-box
	.comment-header
		display:block
		line-height: 15px
		margin-bottom: 16px

.lr-column-2
	@extend $lr-column-2

#required-login
	margin: 20px 0
	#loginform
		padding:0px
		margin:0px
		padding-left: 30px
		border-left: 1px solid #eee
		position: relative
	p 
		margin-bottom: 15px
		label 
			margin-bottom: 5px
			display: inline-block
		input[type='text'], input[type='password'] 
			width: 100%
			-webkit-box-sizing: border-box
			-moz-box-sizing: border-box
			-ms-box-sizing: border-box
			box-sizing: border-box
		&:first-child 
			padding-top:0px
			margin-top:0px
	.lr-column-2  
		@extend $lr-column-2
		&:nth-child(3)
			padding-left: 10px
	.must-log-in 
		margin-bottom: 20px
		padding: 0 20px

.required.email,.required.name 
	font-size: 12px

.lr-login-form 
	line-height: 1.5
	border-left: 1px solid #eee
	position: relative

.lr-login-form:before, #required-login #loginform:before 
	content: "or"
	position: absolute
	right: 100%
	top: 50%
	border: 1px solid #eee
	background: #fff
	width: 24px
	height: 24px
	font-size: 14px
	line-height: 24px
	margin-right: -13px
	margin-top: -13px
	border-radius: 50%
	display: inline-block
	text-align: center
	color: #888

.lr-login-form p 
	position: relative
	margin-bottom: 15px

.lr-login-form .comment-form-author label, .lr-login-form .comment-form-email label  
	position: absolute
	right: 10px
	top: 9px	

#lr_comment_form #images [type=file] 
	display: none

.lr-share-container input[type="checkbox"]
	position: relative
	top: 3px

.jqte_tool
	margin: 0
	padding: 2px
	float: left

.jqte_editor ul li
	list-style: initial

	.jqte * 
		color: #333
		font-family: Arial, Helvetica, sans-serif
		font-size: 14px
	

/* toolbar */
.jqte_hiddenField 
	display: none


/*jQuery toolbar icons*/

/*Image upload icon*/

.jqte_tool:hover 
	background-color: #ccc
	border-color: #ccc


.jqte_tool:active .jqte_tool_icon,
.jqte_tool:active .jqte_tool_label 
	border: #777 1px solid

.jqte_tool_depressed 
	background-color: #DDD
	border-color: #CCC

.jqte_tool_depressed .jqte_tool_icon 
	border-color: #AAA

.jqte_tool_depressed:hover 
	background-color: #EEE


/* link form area */
.jqte_linkform 
	padding: 5px 10px
	background: #DDD
	border-bottom: #BBB 1px solid

.jqte_linktypeselect 
	position: relative
	float: left
	width: 130px
	background: #EEE
	cursor: pointer

.jqte_linktypeselect:Active 
	background: #FFF

.jqte_linktypeview 
	padding: 3px 5px
	border: #333 1px solid
	color: #777
	border-radius: 3px
	-webkit-border-radius: 3px
	-moz-border-radius: 3px
	outline: none

.jqte_linktypetext 
	font-size: 12px

.jqte_linktypearrow 
	position: absolute
	bottom: 8px
	right: 6px
	width: 7px
	height: 6px
	margin: 0 auto

.jqte_linktypes 
	display: none
	position: absolute
	top: 22px
	left: 1px
	width: 125px
	background: #FFF
	border: #333 1px solid
	box-shadow: 0 1px 4px #AAA
	-webkit-box-shadow: 0 1px 4px #AAA
	-moz-box-shadow: 0 1px 4px #AAA

.jqte_linktypes a 
	display: block
	padding: 4px 5px
	font-size: 12px

.jqte_linktypes a:hover 
	background: #DDD

.jqte_linkinput 
	float: left
	margin: 0 5px
	padding: 3px 5px
	width: 300px
	background: #EEE
	border: #333 1px solid
	color: #777
	font-size: 12px
	border-radius: 3px
	-webkit-border-radius: 3px
	-moz-border-radius: 3px
	outline: none

.jqte_linkinput:focus,
.jqte_linkinput:hover 
	background: #FFF
	border-color: #000

.jqte_linkbutton 
	float: left
	padding: 3px 12px
	background: #AAA
	border: #333 1px solid
	color: #FFF
	font-size: 12px
	font-weight: bold
	cursor: pointer
	border-radius: 3px
	-webkit-border-radius: 3px
	-moz-border-radius: 3px
	box-shadow: inset 0 1px #EEE
	-webkit-box-shadow: inset 0 1px #EEE
	-moz-box-shadow: inset 0 1px #EEE

.jqte_linkbutton:hover
	background: #A1A1A1

.jqte_linkbutton:active
	box-shadow: inset 0 1px #CCC
	-webkit-box-shadow: inset 0 1px #CCC
	-moz-box-shadow: inset 0 1px #CCC
	background: #888

/* editor area */
.jqte_editor, .jqte_source
	padding: 10px
	min-height: 100px
	max-height: 900px
	overflow: auto
	outline: none
	word-wrap: break-word
	-ms-word-wrap: break-word
	resize: vertical

.jqte_editor div, .jqte_editor p
	margin: 0 0 7px

.jqte_editor ol, .jqte_editor ul
	padding-left:20px

.jqte_editor ol
	list-style-type: decimal

.jqte_editor ul
	list-style-type: disc

.jqte_editor a:link,
.jqte_editor a:link * 
	color: #0066FF !important
	text-decoration: underline

.jqte_editor blockquote 
	margin-top: 0
	margin-bottom: 7px

.jqte_editor img 
	float: left
	margin: 0 10px 5px 0

.jqte_editor a[jqte-setlink],
.jqte_editor a[jqte-setlink] * 
	background: #3297FD !important
	color: #FFF !important

.jqte_editor h1,
.jqte_editor h2,
.jqte_editor h3,
.jqte_editor h4,
.jqte_editor h5,
.jqte_editor h6,
.jqte_editor pre 
	display: block
	margin: 0 0 3px

.jqte_editor h1,
.jqte_editor h1 * 
	font-size: 26px

.jqte_editor h2,
.jqte_editor h2 * 
	font-size: 24px

.jqte_editor h3,
.jqte_editor h3 * 
	font-size: 22px

.jqte_editor h4,
.jqte_editor h4 * 
	font-size: 20px

.jqte_editor h5,
.jqte_editor h5 * 
	font-size: 18px

.jqte_editor h6,
.jqte_editor h6 * 
	font-size: 15px

.jqte_editor pre,
.jqte_editor pre * 
	font-family: "Courier New", Courier, monospace


/* source area */
.jqte_source,
.jqte_source textarea 
	background: #FFF1E8

.jqte_source textarea
	margin: 0 !important
	padding: 0 !important
	display: block !important
	width: 100% !important
	min-height: 100px
	font-family: Courier, Arial, sans-serif !important
	font-weight: normal
	font-size: 15px
	overflow: hidden !important
	outline: none
	resize: none

.jqte_source textarea,
.jqte_source textarea:focus
	css_shadow: none !important
	background: none !important
	border: none !important

/* title box */
.jqte_title
	display: none
	position: absolute
	z-index: 7000

.jqte_titleArrow
	position: relative

.jqte_titleArrowIcon
	width: 7px
	height: 6px
	margin: 0 auto

.jqte_titleText
	padding: 5px 7px
	margin-top: 0
	min-width: 5px
	min-height: 1px
	max-width: 400px
	background: #000
	border-radius: 3px
	-webkit-border-radius: 3px
	-moz-border-radius: 3px
	word-wrap: break-word
	-ms-word-wrap: break-word

.jqte_titleText,
.jqte_titleText *
	color: #FFF
	font-size: 11px

.lr-comment-editor-length
	line-height: 30px
	color: #fff
	margin-left: 15px
	&.error
		animation: shake-it 1.5s ease
		background-color: #DA1919
		padding: 5px
		border-radius: 2px
	@media (max-width: 370px)
		line-height: 90px
		font-size: 18px

@-webkit-keyframes shake-it 
	0% 
		-webkit-transform: translatex(0px)
		transform: translatex(0px)
	4% 
		-webkit-transform: translatex(5px)
		transform: translatex(5px)
	8% 
		-webkit-transform: translatex(0)
		transform: translatex(0)
	12% 
		-webkit-transform: translatex(-5px)
		transform: translatex(-5px)
	16% 
		-webkit-transform: translatex(0px)
		transform: translatex(0px)
	20% 
		-webkit-transform: translatex(3px)
		transform: translatex(3px)
	24% 
		-webkit-transform: translatex(0)
		transform: translatex(0)
	28% 
		-webkit-transform: translatex(-3px)
		transform: translatex(-3px)
	32% 
		-webkit-transform: translatex(0)
		transform: translatex(0)
	36% 
		-webkit-transform: translatex(1px)
		transform: translatex(1px)
	40% 
		-webkit-transform: translatex(0)
		transform: translatex(0)

#TB_caption
	float: none !important

.comment
	list-style-type: none
	border-left: 2px solid #fcfcfc
	overflow: hidden
	.comment-body
		border-top: 1px solid #eee
		padding: 20px 5px 20px 10px
		overflow: hidden
	.comment_image
		max-width: 350px
	.comment-meta
		.comment-author.vcard
			img
				float: left
				margin-right: 10px
				width: 32px
				height: 32px
		.comment-metadata
			a
				color: #ccc
				text-decoration: none
				font-style: italic
				font-size: 14px
	.lr-comment-text
		clear: both
		p, div
			padding: 0
			margin: 0
		b, strong
			font-weight: bold
		u, ins
			text-decoration: underline
		i
			font-style: italic
	.odd
		background: #fdfdfd
	.even
		background: #fff
	.reply
		padding: 10px 10px 10px 0px
		float: right
		a
			display: inline-block
			padding: 5px 10px
			color: #fff
			background: #444
			font-size: 14px
			text-decoration: none
			&:hover
				background: #666
	ol, ul
		margin: 0
		padding-left: 5%