@import "lib/bootstrap.scss"; //Core styles
@import "qsf.scss";
@import "main.scss"; //Styles shared among user end and admin section
////////////////////////////////////////////////////////////////////
//															      //
//		User-End Styles											  //
//																  //
////////////////////////////////////////////////////////////////////

body { min-width: 320px;}

.link-to-main { font-size: 16px;}
.welcome {
    //float:right;
    //margin-top: -5px;
    text-align: right;
    margin-top: 10px;
    margin-bottom: -2px;
    //width: 100%;
}

.home {
	.block.push {
        min-height: 760px;
		position: relative;
		.span12.clmn-center {
			display: block;
			position: absolute;
			right: 30px;
			top: 30px;
			//float: right;
			max-width: 400px;
			width: 100%;
			background: #fff;
			background: rgba(#fff,0.9);
			color: #444;
			padding: 26px;
			@include border-radius (2px);
			@include box-shadow (0 0 10px rgba(0,0,0,.33));
			.cms {
				h2 {
					font-size: 22px;
					font-weight: 400;
				}
			}
			#user-login-form {
				margin: 20px 0 0;
				max-width: 100%;
				width: 100%;
				max-height: 510px;
				overflow: auto;
				input, select {
					border: solid 1px #9b9b9b;
					@include border-radius (2px);
					padding: 2px 8px;
					font-size:15px;				
				}
				select { width: 100%;}
				.required {
					input {
						padding: 3px 8px 3px 24px;
					}	
				}
				dl > dd { margin-bottom: 5px;}
			    .zip { width: 85px;}
				#languageId-element {
					#languageId {
						padding-left: 20px;
						option:first-child {color:$placeholderText;}
						option { padding:5px; color:$black;}
						&.not-selected {color: $placeholderText;}
					}
				}
				#state-element {
					#state{
						padding-left: 20px;
						option:first-child {color:$placeholderText;}
						option { padding:5px; color:$black;}
						&.not-selected {color: $placeholderText;}
					}
			    }
			    // ul.errors { float:right; text-align: right; margin-top: -24px; margin-right: 24px;  position: relative; top: -6px;}
				#btnSubmit-element {
					text-align: left;
					margin-bottom: 0;
					.btn {
						padding: 8px 22px;
					}
				}
			}
		}
	}
}

dd.required {
	position: relative;
	&::after {
		content: "*";
		color: $orange;
		font-size: 18px;
		position: absolute;
		left: 8px;
		top: 4px;
	}
}

// Header
// -----------------------------------------------------------------
.brand-tel {
	font-weight: 700;
	font-size: 18px;
	color: #bebebe !important;
	text-decoration: none;
	margin-left: 20px;
	&.visible-desktop { margin-right: 20px;}
	i {
		line-height: 40px;
		font-size: 31px;
		color: #7F8A90;
	}
}
#nav-main {
	> li > a {
		font-weight: bold;
		font-size: $baseFontSize + 2;
		padding-top: 21px;
		padding-bottom: 21px;
	}
}
#header-search-form {
	#header-search-form-query {padding-right: 33px; color:$black;}
	#header-search-form-query-hint {
		position: absolute;
		z-index: 1;
		bottom: 1px;
		left: 14px;
		font-size: 12px;
	}
	.fa-search {
		position: absolute;
		z-index: 2;
		bottom: 0px;
		right: 5px;
        cursor: pointer;
        color:$grayDarker;
        padding:5px;
	}
}
// header page
h1.hdr-page {
	font-size: 30px;
	line-height: 1.1;
	font-weight: 400;
}

// Header Banner
// -----------------------------------------------------------------
#header-image {
	background-size: 100% auto;
	background-position: 50% 50%;
	-webkit-background-size: cover;
	background-size: cover;
	h1 {
		height: 156px;
		@include font-shorthand(72px, 200, 80px);
		color: #fff;
		margin-top: 0;
		margin-bottom: 0;
		display: table;
		width: 100%;
		span {
			display: table-cell;
			vertical-align: middle;
		}
	}
}

// Footer
// -----------------------------------------------------------------
.links-social {
	clear:right;
	margin-top: $baseFontSize/2;
	a {
		img {vertical-align: middle;}
		&:hover {@include opacity(60);}
	}
}
// Bottom Navigation
// -----------------------------------------------------------------
#bottom-navigation {
	.nav_section {
		float:left; margin: 0 30px 0 0; font-size: 12px; width: 150px;
		li {margin: 3px 0;}
		h5 {font-weight: bold; font-size: 15px;}
		a { white-space:nowrap;} // no need for full navigation but required for one level navigation
	}
}

// Lists
// -----------------------------------------------------------------
.date-square {
	background-color: #6a7280;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	a {color: $white;}
	strong {
		display: block;
	}
}
.news-list {
	margin: 0 0 $baseLineHeight * 2;
	.date-square {
		margin:8px $gridGutterWidth 0 0;
		@include square(60px);
		font-size: 15px;
		line-height: 15px;
		strong {
			font-size: 24px;
			line-height: 36px;
		}
	}
}
.thumbnails {
	h3, h5 {
		margin: ($baseLineHeight / 2) 0 ($baseLineHeight / 4);
		a {
			color: #000;
			&:hover {
				text-decoration: none;
				color: $linkColor;
			}
		}
	}
	li.first {clear: left; margin-left: 0;}
}
#products-list {
	li.first {margin-left: 0;}
}

// Back Link
.back-to-all {text-align: right; font-size: $baseFontSize - 1;}

// Newsletters
.newsletters {
	border-bottom: 1px solid #ddd;
	margin-bottom: 15px;
	h5 {
		margin: 0;
	}
	p {
		margin-bottom: 15px;
		line-height: 36px;
	}
}
.btn.last-newsletter:before {
	content: ' ';
	@include size(19px, 20px);
	margin: -3px 7px 0 0;
	display: inline-block;
	vertical-align: middle;
	background: url('../images/icon-pdf.gif') no-repeat 0 0;
}

// Testimonial
 .testimonial {
 	h4 {margin: 0;}
 	.meta {font-size: $baseFontSize + 1;}
 }

// People
.bio, .meta {
	clear: both;
}
.bio {
	margin-bottom: $baseLineHeight;
	h2, h3 {margin:0 20px 10px 0; line-height: 1;}
	> .pull-left { margin:0 $gridGutterWidth 0 0;}
}
ul.bio-social {
	margin: 0;
	font-size: 20px;
	a {
		color: $accent;
		vertical-align: middle;
		line-height: $baseLineHeight * 1.33;
		&:hover {
			text-decoration: none;
			@include opacity(80);
		}
	}
}

// Partners
.partner {
	border-bottom: 1px dotted $grayLight;
	padding-bottom: $baseFontSize;
	.pull-left { margin-right: 30px;}
	&:last-child { border-bottom: none;}
}


// Search
// -----------------------------------------------------------------
.search_form {
  margin-bottom: $baseLineHeight;
  @include clearfix();
  dl {
    dt, dd { float:left; margin: 0 5px 0 0;}
    label { display:inline; line-height: $baseLineHeight * 1.2;}
    #query-element {width:500px;}
  }
}

ul.srch_results {
	padding: 0;
	margin-left: 0;
	list-style: none;
	ul {
		margin-top: $baseLineHeight / 2;
		list-style: none;
	}
	li {
		@include clearfix();
		padding: 10px;
		border-top: 1px dotted $tableBorder;
		&:first-child {
			padding-top: 0;
			border-top: none;
		}
	}
	h6 {margin-bottom: 0;}
	.list_thumb {float:left; width:10%; max-width:50px; margin-right:2%;}
	.list_item_content {float:left; width:85%;}
	.no_thumb .list_item_content {width:100%;}
	.highlighted {color: darken($accent, 5%); font-weight: bold;}
	.date-square {
		margin:5px 15px 0 0;
		@include square(43px);
		font-size: 11px;
		line-height: 11px;
		strong {
			font-size: 18px;
			line-height: 26px;
		}
	}
}

.srch_header, .srch_footer {
	padding: 0 10px; margin: 0 0 12px 0;
}
.srch_header {
	color: #333;
	margin-top: $baseLineHeight;
	font-size:$baseFontSize - 3px;
	line-height:$baseLineHeight + 4px;
	@include clearfix();
	@include gradient-vertical($grayLighter, darken($grayLighter,10%));
	@include border-radius(5px);
	h4 {
		font-size:$baseFontSize - 1px;
		line-height:$baseLineHeight + 4px;
		margin: 0;
		font-weight:bold;
		float: left;
		min-width:50%;
	}
	span { float: right; display:block;}
}

// Side Blocks
// -----------------------------------------------------------------
.side_block {
	@include  clearfix();
	@include border-radius(5px);
	margin-bottom: $baseLineHeight;
	position: relative;
	z-index: 1;
	&.color-1 {
		background: $sideColor1;
		padding: 20px;
	}
	&.color-2 {
		background: $sideColor2;
		padding: 20px;
		h2 {color: #fff;}
	}
	.date-square {
		margin:5px 15px 0 0;
		@include square(43px);
		font-size: 11px;
		line-height: 11px;
		strong {
			font-size: 18px;
			line-height: 26px;
		}
	}
	.last-newsletter {
		padding-left:28px;
		background: url('../images/icon-pdf.gif') no-repeat 0 50%;
	}
	#submitGroup-element dl { text-align: left;}
	a.view-all {
		font-size: $baseFontSize - 2;
		display: inline-block;
		margin-top: 5px;
	}
	.fa-ul {
		li { margin-bottom: 5px;}
	}
	img.bottom {
		position:absolute;
		z-index:2;
		right:20px;
		bottom:0px;
		max-width:80px;
		height:auto;
	}
}

.home {
	h2 {
		font-size: $baseFontSize * 1.66;
	}
	.side_block {
		&.sb-recentNews{
		@include border-radius(0);
		padding: 0;
		background: transparent;}
		&.color-2{
			*,*:before,*:after{color:#fff}
		}
	}
}
#form_newsletter-form-btnSubmit-element { margin:0;}
#form_contact-form {
	dl > dd {margin: 0 0 5px;}
	select {width: 100%;}
	textarea {
		min-height: 80px;
	}
	.captcha_refresh {margin-top: 10px;}
	#form_contact-form-captcha-label {display: none;}
	#form_contact-form-submitGroup-element,
	#form_contact-form-btnSubmit-element {margin: 5px 0 0;}
}
ul.links-section {
	margin-left: 1.5em;
	li {line-height: $baseLineHeight * 1.25;}
	.fa {line-height: $baseLineHeight * 1.25;}
}
ul.brief-info {
	[class^="fa-"] {
		color:$accent-sec;
		font-size: 110%;
	}
}
// Gallery
// -----------------------------------------------------------------
#gallery-items {
	width: 100%;
	margin:0 0 $baseLineHeight;
	padding-top: 0;
    background: $grayLighter;
    height: 400px !important;
    .rsOverflow {height: 400px !important;}
    .rsOverflow, .rsSlide {
	    background: none;
    }
    .rsImg {margin-top: 10px !important;}
	.rsGCaption {
		font-size: $baseFontSize;
		padding: 12px 0 16px;
		background: darken($grayLighter, 10%);
		color:$black;
		width: 100%;
		position: static;
		float: left;
		left: auto;
		bottom: auto;
		text-align: center;
	}
	.rsGCaption span {
		display: block;
		clear: both;
		font-size: $baseFontSize + 2;
		font-weight: bold;
	}
	/* Scaling transforms */
	.rsSlide img {
	  @include opacity(45);
	  @include transition(all 0.3s ease-out);
	  @include scale(0.9);
	  @include backface-visibility(hidden);
	}
	.rsActiveSlide img {
	  @include opacity(100);
	  @include scale(1);
	}
}

// FAQ
// -----------------------------------------------------------------
.faq-questions, .faq-answer {
	margin:0 0 $baseLineHeight 0;
}
.faq-questions {
	border-bottom:1px solid $grayLight;
	padding-bottom: 20px;
	list-style-position: inside;
}
.faq-answer {
	position: relative;
	z-index: 1;
	.gotop {
		color: $grayLight;
		text-align:right;
		position: absolute;
		z-index: 2;
		right: 0;
		bottom: 0;
		&:hover {
			text-decoration: none;
			color: $linkColor;
		}
	}
}

// Site Map
// -----------------------------------------------------------------
#table-sitemap {
	width:100%;
	td { width:50%; vertical-align:top;}
}
.site_map_div {
	font-weight:bold; padding:6px 20px 6px 15px;
	a, a:visited {text-transform:uppercase;}
	.site_map_div a, .site_map_div a:visited {text-transform:none; font-weight:normal;}
	.site_map_div {
		padding:3px 0 3px 20px; font-weight:normal;
		.site_map_div {padding:0 0 0 20px;}
	}
}

// Blog
// -----------------------------------------------------------------
.post {
	margin-bottom: $baseLineHeight;
}
h2.post-title, h3.post-title {
	font-weight: 400;
	line-height: 45px;
	font-size: 30px;
	a {
		color: $black;
		&:hover {color: $accent;}
	}
}
ul.post-meta {
	font-size: 13px;
	color: #979797;
	li {
		padding-left: 0;
		padding-right: 20px;
	}
	a {
		color: $black;
		&:hover {color: $accent;}
	}
}
.post-image, .post-content {
	margin-bottom: $baseLineHeight;
}
.posts {
	> li {
		margin-bottom: 6px;
		&.active > a {
			font-weight: bold;
			color: $grayDarker;
		}
	}
}
.post-month > li.active > a {
	font-weight: bold;
	color: $grayDarker;
}
#blog-calendar {
	margin-bottom: $baseLineHeight;
	.ui-datepicker { width:auto;}
}
.feat-post {
	.meta {
		font-size: 12px;
		color: #030404;
		li {padding: 0 10px 0 0;}
	}
}
.comment {
	font-size: 13px;
	border-top: 1px dotted $grayLight;
	margin-bottom: $baseLineHeight;
	padding-top: 10px;
	.comment-body {
		font-size: 14px;
	}
}
.post-comment-form-block, .post-comment-submitted-block {
	@include border-radius(5px);
	margin-bottom: $baseLineHeight;
	background: $sideColor1;
	padding: 20px;
}
.post-comment-form-block #submitGroup-element dl { text-align: left;}
#blog-form-login {
	max-width: 250px;
	margin: 0 auto;
}

// Facebook Comments
// -----------------------------------------------------------------
.fb_iframe_widget {
	width: 100% !important;
	span, .fb_ltr {width: 100% !important; max-height: 350px !important;}
	span { height:auto !important; overflow: auto !important;}
	.fb_ltr {
		position: relative !important;
	}
	// position: relative;
	// padding-bottom: 26.25%; /* 16:9 ratio */
	// height: 0;
	// overflow: hidden;
	// iframe {
	// 	position: absolute;
	// 	top: 0;
	// 	left: 0;
	// 	width: 100%;
	// 	height: 100%;
	// }
}


// Modernizr
.touch {
	select {
		outline-style: none;
	}
	.fb_iframe_widget span {border:1px solid $tableBorder;}
}

// Event
#event {
	.span4 {
		.event-links {
			line-height: $baseFontSize;
			padding-left: 35px;
			margin-bottom: 20px;
			img {margin:5px 0 0 -35px;}
		}
	}
	.span8 {
		table {
			th { width: 30%;}
		}
	}
	.table .unstyled { margin-bottom: 0;}
}

// Upcoming events
.sb-upcomingEvents {
	max-width: 370px; // The width should match App/Event/config.php
	//min-width:280px;
	// margin: 0 auto;
	h2, h3 { float:left;}
	.view-all-events { display: block; float:right; margin: 3px 0 5px 0;}
	#event-upcomingblock {
		> div {
			clear:both;
			width: 100%;
			min-height: 280px;
			.item {
				img {
					margin: 5px 0 10px 0; display: block;
					margin-top: 0 !important;
					// max-width: 100%; height: auto;
				}
				h4 { margin: 0; font-size: $baseFontSize + 2;  margin-bottom:10px;}
				.event-slider-body { padding: 0 30px;}
			}
			.fa-ul{
				margin-top: 5px;
				margin-left: 1.5em;
				margin-bottom: 0;
				li { font-size: $baseFontSize - 1; line-height: normal; margin-bottom:2px;}
				.fa-li { width: 1em; left: -1.5em;}
			}
			&.contentSlider, .rsSlide, .rsOverflow, .content-slider-bg {
		  		background: none;
		  		color: $textColor;
			}
			.rsArrow {
				width: 20px; height:36px; top: auto; bottom:50px;
				&:hover {
					.rsArrowIcn {
						color: $linkColorHover;
					}
				}
			}
			.rsArrowIcn {
				width: 20px; height:30px; margin-top: -13px; margin-left: -10px; background: none; font-size: 32px; color: #999; text-align: center;
				&:after { display: inline-block; font-family: FontAwesome; }
			}
			.rsArrowLeft .rsArrowIcn:after { content:"\f104";}
			.rsArrowRight .rsArrowIcn:after { content:"\f105";}
		}
	}
}

// Calendar
#event-block {
	margin-bottom: $baseLineHeight;
	.calendar-legend {
	    text-align: right;
	    font-size: $baseFontSize - 1;
	    color: $black;
	    margin: 10px 0;
	    line-height:14px;
		li {
			padding-right: 15px;
			display: inline-block;
			line-height: 1;
		    span {
		        display: inline-block; width: 14px; height: 14px; margin:0 3px 0 0;
		    }
	        &.committee span { background-color: $accent; border:1px solid darken($accent, 5%);}
	        &.registration span { background-color: $accent-sec; border:1px solid darken($accent-sec, 5%);}
		 }
	}
	#event-calendar {
		.fc-header {
			.fc-button { text-transform: capitalize;}
		}
		.fc-day-header { background-color: #eee; padding: 5px;}
		.fc-event { padding: 5px 5px; line-height: 1.3; border:none; cursor: pointer;}
		.fc-event.committee {background-color: $accent; border:1px solid darken($accent, 5%);}
		.fc-event.registration {background-color: $accent-sec; border:1px solid darken($accent-sec, 5%);}
		.fc-event-title {
			word-wrap: break-word;
			word-break: break-word;
			display: block;}
		.fc-event-time {padding: 0 5px 0 0; display: none;}
		.fc-day-number { color: $grayDark;}
		.fc-state-highlight {
			.fc-day-number { font-weight: bold;}
		}
		.fc-event:hover .fc-event-title { text-decoration: underline; }
	}
}
.event-popup {
	h5 { margin: 0 0 5px 0; line-height: 1.1;}
}
.calendar-tip {
	min-width:400px !important;
}
.simple-calendar {
	li {
		margin-bottom: $baseLineHeight;
		h5 {margin: 0 0 3px 0; line-height: 1.1;}
	}
}
#event {
	.registration-closed {
		td {padding: 10px 0;}
		.alert { margin-bottom: 0;}
	}
}

// My Accoynt. Event History
.app-event-history-historylist{
  .cell_payment_date {width: 110px}
}
//--------------------------------
// Committee
.committee-list{
	li{margin-bottom: 5px;}
	a {font-weight: 600;}
}
.committe-detail{
	.purpose{
		margin-bottom: 15px;
	}
	.members{
		margin-bottom: 10px;
		padding-right: 15px;
	}
	.committee-address{
		margin-left: 0;
		margin-top: 5px;
		a {color: $textColor;
			&:hover{color: $linkColorHover;}
		}
		i.fa{
			color: $linkColor;
			margin-right: 5px;
		}
	}
	.next-meetings { margin-bottom: $baseLineHeight;}
	.fa-li { text-align: left; width: 17px; left: -17px;}
	.fa-ul { margin-left: 17px;}
	a.chair-title{
		font-weight: 600;
	}
}


// Leadership
.accordion-heading {
  @include gradient-vertical(#fff, #eee);
}
.accordion-arrows {
	h3 {
		margin: 0; font-weight: 600;
		a.accordion-toggle {
			&:before {
				margin-right: 5px;
				content:"\f13a";
				font-family: FontAwesome;
				display: inline-block;
			}
			&.collapsed:before {
				content:"\f138";
			}
			color: $linkColorHover !important;
			&:focus { color: $linkColor;}
			&.collapsed { color: $linkColor !important;}
			&:hover, &.collapsed:hover { color: $linkColorHover !important;}
		}
	}
}
.leadership-bio {
	margin-bottom: $baseLineHeight / 2;
	h3, h4 {margin:0 20px 0 0;}
	.meta-bio {
		span { font-weight: 600;
			&.specification{font-weight: 400; font-style: italic;}
		}
	}
	.media-heading a { color: $linkColor; &:hover { color: $linkColorHover;}}
	.media-object { margin: 8px 10px 10px 0;}
	ul.bio-social {
		margin: 0 0 $baseLineHeight / 4;
		font-size: 18px;
		li { padding: 0 10px 0 0;}
		a {
			color: $accent;
			vertical-align: middle;
			line-height: $baseLineHeight * 1.33;
			&:hover {
				color: $linkColorHover;
			}
		}
	}
	&.third {margin-left: 0 !important; clear:both;}
}

/* Event Login Form */
#event-login-block {
	hr.delimiter {
		background-color: #EBE7E1;
	    height: 150px;
	    margin: 0 auto;
	    width: 1px;
	}
	.span6 {
		p {margin-top: -4px;}
		.btn.btn-primary{min-width: 190px; margin-bottom: 10px;}
	}
}

/* Event attendee */
.event_form{
	[id^="attendee-fieldset-"] {
		border-top: 1px solid #cecece;
		width: 61%;
	}
	[id^="attendee-fieldset-"]:first-child{
		border: none;
	}
	#attendee-element{
		fieldset dl{
			margin-top: 10px;
		}
		fieldset#attendee-fieldset-current dl{
			margin-top: 0;
		}
	}
	#addAttendee-element{
		float: left;
		margin-right: 10px;
		button{
			padding: 3px 12px;
		}
	}
}

#ecommerce-form table.order td {vertical-align: middle!important;}

#training-test #training-result .training-answers {
	.span12 {
		border: none;
		border-top: 1px solid #999;
		padding: 5px 10px;
		background-color: #eee;
		text-align: left;
	}
	.span5 {
		width: 45%;
	}
	.span7 {
		width: 55%;
	}
	.span5, .span7 {
		border-top: 1px solid #999;
		padding: 5px 10px;
		margin: 0;
	}
	.label { margin-top: 4px;}
}

//	Project depending modules
@import "lib/bootstrap-responsive.scss";
//@import "_cart.scss"; // E-commerce styles
@import "_qsf-responsive.scss";
@import "_print.scss"; // Print styles