// Core variables and mixins
@import "variables.less"; // Custom for this template
@import "../../../media/jui/less/mixins.less";

body{
	background-color: #fff;
	font-family: @sansFontFamily;
}

img{
	max-width: 100%;
}
a{
	text-decoration: none !important;
	&:focus{
		outline: none;
	}
	&.selected{
		color:@linkColorHover;
	}
	&:hover{
		text-decoration: none;
	}
}

html,
body {
	height: 100%;
	font-family: @sansFontFamily;
	font-size: @baseFontSize;
	line-height: @baseLineHeight;
	color: @textColor;
}

#wrapper{
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -117px;
}

#push,
#footer-wrapper {
	height: 117px;
	position: relative;
}

.offline_container{
	height: 100%;
	text-align: center;
	font-size: 0;
	line-height: 0;
	&:before{
		content:'';
		display: inline-block;
		height: 100%;
		width: 0;
		overflow: hidden;
		vertical-align: middle;
	}
	.container{
		display: inline-block;
		vertical-align: middle;
		max-width: 100%;
	}
	#system-message{
		font-size: @baseFontSize;
		line-height: @baseLineHeight;
		max-width: 100%;
		display: inline-block;
	}
	.well{
		vertical-align: middle;
		margin: 0;
		display: inline-block;
		max-width: 100%;
		text-align: left;
		font-size: @baseFontSize;
		line-height: @baseLineHeight;
	}
}

.moduletable{
	&:after{
		clear:both;
		display: block;
		content: '';
	}
}

.radio input[type="radio"],
.checkbox input[type="checkbox"]{
	float: none;
	margin: -2px 0 0;
}

.radio input[type="radio"]{
	margin: -2px 3px 0 0;
}
.radio,
.checkbox{
	padding-left: 0;
}

.mod-menu .nav.menu.nav-pills > li > a{
	display: block;
}

.mod-menu .nav.menu.nav-pills > li.active > a{
	background: @linkColor;
}

time,
.item_hits,
.item_category-name
address,
.item_createdby{
	white-space: nowrap;
}

/*=================================================================*/
/*======================= MODULE STYLES ===========================*/
/*=================================================================*/

/*== Search ==*/

.mod-search__aside{
	.mod-search_searchword{
		width: 100%;
	}
}

/*== Login ==*/

.mod-login__aside{
	.mod-login_username, .mod-login_passwd{
		width: 100%;
	}
}

.mod-login_submit{
	margin: 9px 0;
}

#form-login-remember label{
	margin-bottom: 20px;
}

/*Finder*/
#mod-finder-searchword{
	.border-radius(0px);
	margin-bottom: 4px;
	border: 1px solid #ebebeb;
	box-shadow: none;
}

/*======================= MODULE ITEM WIDTH =======================*/

.fluid{
	margin-left: -@gridGutterWidth1200;
	width: auto;
}

.row-fluid {
	margin-left: -@gridGutterWidth1200;
	width: auto;
	[class*="itemSpan"],
	[class*="span"] {
		.box-sizing(border-box);
		margin-left: 0;
		display: block;
		float: left;
		padding-left: @gridGutterWidth1200;
		min-height: 30px;
		width: 100%;
	}

	.itemSpan1,.span1{
		.fluidcol(1);
	}
	.itemSpan2,.span2{
		.fluidcol(2);
	}
	.itemSpan3,.span3{
		.fluidcol(3);
	}
	.itemSpan4,.span4{
		.fluidcol(4);
	}
	.itemSpan5,.span5{
		.fluidcol(5);
	}
	.itemSpan6,.span6{
		.fluidcol(6);
	}
	.itemSpan7,.span7{
		.fluidcol(7);
	}
	.itemSpan8,.span8{
		.fluidcol(8);
	}
	.itemSpan9,.span9{
		.fluidcol(9);
	}
	.itemSpan10,.span10{
		.fluidcol(10);
	}
	.itemSpan11,.span11{
		.fluidcol(11);
	}
	.itemSpan12,.span12{
		width: 100%;
	}
}

.cols-1{
	[class*="span"]{
		.fluidcols(1);
	}
}

.cols-2{
	[class*="span"]{
		.fluidcols(2);
	}
}

.cols-3{
	[class*="span"]{
		.fluidcols(3);
	}
}

.cols-4{
	[class*="span"]{
		.fluidcols(4);
	}
}

.cols-5{
	[class*="span"]{
		.fluidcols(5);
	}
}

.cols-6{
	[class*="span"]{
		.fluidcols(6);
	}
}

/*======================= MAILTO WINDOW =======================*/

#mailto-window{
	padding-top: 1em;
}
.mailto-close{
	margin-bottom: 1em;
	overflow: hidden;
	a{
		float: right;
	}
}

/*======================= MODAL WINDOW =======================*/

div.modal.fade.loginPopup{
	width: 260px; 
	margin: 0; 
	top: 0; 
	left: 50%;
	background: @bodyBackground;
	position: absolute;
	z-index: 99000;
	.transition(all 0.2s ease);
	.opacity(0);
	&.in{
		.opacity(100);
	}
}

div.modal.fade {
	top: -200%;
}
.modalClose{
	margin: 14px;
}
.login-greeting{
	margin: 0 0 9px 0;
}
.input-modal{
	width: 146px;
}
div.modal.fade{
	z-index: 0;
}
div.modal.fade.in{
	z-index: 1100;
}

/*=================================================================*/
/*======================= COMPONENT STYLES ========================*/
/*=================================================================*/

/*Forms*/

input,
textarea {
	width: 220px;
}

textarea{
	resize: none;
}

select, 
textarea, 
input[type="text"], 
input[type="password"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="date"], 
input[type="month"], 
input[type="time"], 
input[type="week"], 
input[type="number"], 
input[type="email"], 
input[type="url"], 
input[type="search"], 
input[type="tel"], 
input[type="color"], 
.uneditable-input{
	.box-sizing(border-box);
	height: @inputHeight;
	color:    @inputColor;
}

#helpsite-refresh{
	margin-bottom: 9px;
}

.checkbox-radio-wrap__inline{
	display: inline-block;
	margin-left: 6px;
	vertical-align: top;
	input[type="radio"], input[type="checkbox"] {
		margin: -2px 0 0 0;
	}
}

.page-registration,
.page-remind,
.page-reset,
.page-login,
.page-login,
.page-profile__edit{
	form{
		label{
			display: inline-block;
		}
	}
}

textarea.invalid{
	border: 1px solid #9D261D;
}

.form-vertical{
	label{
		display: inline-block;
	}
}

/* Placeholder color */

input::-webkit-input-placeholder { /* WebKit browsers */
		color:    @inputColor;
		opacity: 1;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
		color:    @inputColor;
		opacity: 1;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
		color:    @inputColor;
		opacity: 1;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
		color:    @inputColor;
		opacity: 1;
}

/* Category */

.category_desc{
	padding-bottom: 2em;
}

/*======================= Search & Smart Search ========================*/

ul#finder-filter-select-dates {
	li.filter-date {
		margin-bottom: 4px;
		margin-right: 4px;
		select.filter-date-operator{
			margin-bottom: 9px;
		}
	}
}

#searchForm{
	fieldset{
		margin-bottom: 20px;
		label{
			display: inline-block;
			margin-right: 1em;
		}
	}
	.form-limit{
		label{
			float: left;
		}
		select{
			float: right;
			position: relative;
			top: -4px;
		}
		p{
			overflow: hidden;
			clear: both;
		}
	}
	.phrases-box{
		padding-bottom: 1em;
		label{    
			min-width: 90px;
		}
	}

	.btn{
		padding: 4px 15px;
	}
}

dl.search-results{
	margin-bottom: 30px;
	dt{
		margin-top: 20px;
	}
}

.navbar-form .btn,
.navbar-form .btn-group {
	margin-top: 5px;
}

/*======================= Gallery Page ========================*/

.page-gallery,
.page-item__gallery{
	a.zoom{
		position: relative;
		display: block;
		overflow: hidden;
		z-index: 1;
		span.zoom-bg{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: block;
			background: #000;
			.opacity(0);
			z-index: 3;
			.transition(all 0.5s);
		}
		span.zoom-icon{
			background: url(../images/zoom.png) left top no-repeat;
			display: block;
			width: 36px;
			height: 36px;
			position: absolute;
			top: -50%;
			left: 50%;
			margin: -18px 0 0 -18px; 
			z-index: 4;
			.transition(all 0.5s);
		}
		&:hover{
			span.zoom-bg{
				.opacity(50);
			}
			span.zoom-icon{
				top: 50%;
			}
		}
		img{
			.transition(all .4s);
			z-index: 2;
		}
		&.active{
			img{
				z-index: 2;
			}
		}
	}
	.item_icons{
		margin-bottom: 9px;
	}
}

.view-article{
	#prevArrow, 
	#nextArrow{
		display: none;
	}
}
.gallery-grid{
	margin-bottom: 24px;
	.view{
		position: relative;
		overflow: hidden;    
		.mask, .content {
			width: 100%;
			height: 100%;
			position: absolute;
			overflow: hidden;
			top: 0;
			left: 0;
			z-index: 2;
			.mask_wrap{
				text-align: center;
				width: 100%;
				height: 100%;
				font-size: 0;
				line-height: 0;
				&:before{
					content: '';
					display: inline-block;
					height: 100%;
					vertical-align: middle;
				}
				.mask_cont{
					display: inline-block;
					vertical-align: middle;
					padding: 0 5%;
					font-size: @baseFontSize;
					line-height: @baseLineHeight;
				} 
			}
		}
		.item_img{
			margin: 0;
		}
		img {
			display: block;
			position: relative;
			z-index: 1;
		}
		h2,
		p{
			position: relative;
		}
		.item_more{
			a{
				display: inline-block;
				font-size: 1.5em;
				font-weight: normal;
				padding: 2%;
			}
		}
	}
}

/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/

.isotope-item {
	z-index: 2;
}

.isotope-hidden.isotope-item {
	pointer-events: none;
	z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
	-webkit-transition-duration: 0.8s;
		 -moz-transition-duration: 0.8s;
			-ms-transition-duration: 0.8s;
			 -o-transition-duration: 0.8s;
					transition-duration: 0.8s;
}
.isotope {
	-webkit-transition-property: height, width;
		 -moz-transition-property: height, width;
			-ms-transition-property: height, width;
			 -o-transition-property: height, width;
					transition-property: height, width;
}
.isotope .isotope-item {
	-webkit-transition-property: -webkit-transform, opacity;
		 -moz-transition-property:    -moz-transform, opacity;
			-ms-transition-property:     -ms-transform, opacity;
			 -o-transition-property:         top, left, opacity;
					transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
	-webkit-transition-duration: 0s;
		 -moz-transition-duration: 0s;
			-ms-transition-duration: 0s;
			 -o-transition-duration: 0s;
					transition-duration: 0s;
}

/* End: Recommended Isotope styles */

.filters,.sorting,.layout-mode{
	b{
		display: block;
		margin: 0 0 15px;
	}
}

.layout-mode{
	float: right;
}

ul#filters{
	margin: 0 0 15px;
	li{
		display: inline-block;
		vertical-align: top;
		a{
			cursor: pointer;
			padding: 4px 9px;
			&:after{
				content: "";
			}

			&.active,
			&:hover{
				background: transparent;
				color: #000;
				box-shadow: none;
			}
		}
	}
}

ul#sort{    
	margin: 0 0 15px;
	li{
		display: inline-block;
		vertical-align: top;
		a{
			cursor: pointer;
			padding: 4px 9px;
			&:after{
				content: "";
			}
			&.active,
			&:hover{
				background: transparent;
				color: #000;
				box-shadow: none;
			}
		}
	}
}

ul#grid-list{
	margin: 0 0 15px;
	li{
		display: inline-block;
		a{
			cursor: pointer;
			padding: 4px 9px;
			&:after{
				content: "";
			}

			&.active,
			&:hover{
				background: transparent;
				color: #000;
				box-shadow: none;
			}
		}
	}
}

.gallery-grid{
	.item_img{
		margin-right: 0;
	}
}

.page-gallery_img{
	margin-left: 0;
}

.category_children{
	.category_child{
		margin-bottom: 20px;
	}
}

/*======================= Archives Page ========================*/

.page-archive_filters{
	.filter-search{
		padding-bottom: 21px;
		overflow: hidden;
	}
	select{
		margin-bottom: 8px;
		display: inline-block;
	}
	button{
		display: inline-block;
		margin-bottom: 8px;
	}
}

/*======================= Contacts Page ========================*/

#jform_contact_message{
	resize:none;
	width: 100%;
	height: 149px;
}
#contact-form{
	label {
		display: inline-block;
		margin-bottom: 5px;
	}
}
.phone-num{
	display: inline-block;
}

#jform_contact_name,
#jform_contact_email,
#jform_contact_emailmsg{
	width: 100%;
}

.contact_email-copy,
.contact_vcard{
	margin: 0 @inputHeight/2;
	height: @inputHeight;
	line-height: @inputHeight;
	display: inline-block;
}

.contact_vcard{
	 margin: 0;
}

.contact_details{
	.icons-marker{
		display: block;
		width: 16px;
		margin-top: 4px;
		margin-right: 12px;
		float: left;
	}
}

.contact_address{
	overflow: hidden;
}

#contact_map{
	margin-bottom: @baseLineHeight;
	.map{
		border:1px solid darken(@bodyBackground, 15%);
		.box-sizing(border-box);
		&.mfp-hide{
			display: block !important;
		}
	}
}
.map{
	img{
		max-width: none !important;
	}
}

.mfp-content{
	.map{
		max-width: @gridRowWidth1200;
	}
}

.map-popup{
	.mfp-inline-holder,
	.mfp-content{
		cursor: zoom-out !important;
	}
}

.contact_details_item{
	margin-bottom: 20px;
}

/*======================= User Pages ========================*/

.page-login{
	form{
		.control-group{
			margin: 0;
		}
	}
}

/*======================= ADDTHIS STYLES =======================*/


.page-item_addThis{
	padding-top: 12px;
}

/*======================= CAPTION FIXES =======================*/

.img_caption{
	text-align: center!important;
	&.left{
		float: left;
		margin-right: 1em;
		p{
			clear: left;
			text-align: center;
		}
	}
	&.right{
		float: right;
		margin-left: 1em;
		p{
			clear: right;
			text-align: center;
		}
	}
	&.none{
		margin-left:auto;
		margin-right:auto;
	}
}

/*======================= 404 PAGE =======================*/

.errorBox{
	background: none;
	text-align:left;
}

#error{
	.well{
		margin-bottom: 0;
	}
}

/*======================= DOCUMENTATION =======================*/

#mod_table{
	.module{
		.box-sizing(border-box);
		padding: 10px;
	}
	.module:nth-child(even){
		background: @grayLighter;
	}
	ul li{
		list-style: none;
	}
}

/*======================= SCROLL TO TOP =======================*/

#back-top {
	position: fixed;
	bottom: 90px;
	right: 20px;
	z-index: 99;
	a {
		width: 51px;
		display: block;
		text-align: center;
		font-size: @baseFontSize;
		line-height: @baseLineHeight;
		font-family: @baseFontFamily;
		text-transform: none;
		text-decoration: none;
		color: @textColor;

		/* transition */
		.transition(0.2s);
		&:hover {
			color: @linkColorHover;
			span {
				.opacity(50);
			}
		}
	}
	span {
		width: 51px;
		height: 51px;
		display: block;
		margin-bottom: 7px;
		background: url(../images/up-arrow.png) no-repeat center center;
		.opacity(100);

		/* transition */
		.transition(0.2s);
	}
}

#to-desktop{
	display: none;
	a{
		span.to_mobile{
			display: none;
		}
	}
}

.dropdown-toggle{
	.fa-cog{
		margin-right: 4px;
	}
}

label[for=mod-login_remember]{
	display: inline-block;
}

.btn-group{
	max-width: 100%;
	white-space: normal;
}