////////////////////////////////////////////////////////////////////
//															      //
//		Shared Styles											  //
//																  //
////////////////////////////////////////////////////////////////////

// Sticky Footer
// -----------------------------------------------------------------
html, body { height: 100%; }
.wrapper {
	display: table;
	table-layout: fixed;
	width: 100%;
	height: 100%;
}
.block {
	display: table-row;
	height: 1px;
}
.push { height: auto; height: 100% !important;}
.push > .container-fluid {
	margin-top: 50px;
	margin-bottom: 50px;
}
.container-fluid {max-width: 1170px; margin: 0 auto;}

a:hover, a:active { outline:none; text-decoration: none; color:$linkColorHover;}
a:focus { outline:none; text-decoration: none;}

select option {font-family: Arial, Helvetica}

.cms, .html_block_view {
	ul { 
		margin-left: 0;
		li {
		    left: 2em;
		    padding-right: 2em;
		    position: relative;
		}
	}
}

// Header
// -----------------------------------------------------------------
header {
	.navbar {
		position: relative;
		z-index:1;
		min-height: 340px;
		.navbar-inner {
			background: transparent;
			@include box-shadow(none);
		}
	}
	.top-line {
		min-height:70px;
		> div {padding-top:15px;}
	}
}

#nav-main {
	> li > a {
		font-weight: 500;
		font-size: $baseFontSize + 2;
		padding-top: 27px;
		padding-bottom: 27px;
		margin-right: 1px;
		i {
			color: #777;
		}
		&:hover {
			@include gradient-vertical(lighten($accent, 5%), $accent);
			color: #fff;
			i {
				color: #fff;
			}
		}
	}
	> li {
		> button {
			padding: 27px 10px;
			border: 0;
			font-size: 18px;
			background: $accent;
			color: #fff;
			outline: none;
			&.collapsed {
				background: transparent;
				color: #fff;
			}
			&:hover {
				background: $accent;
				color: #fff;
				i {
					color: #fff;
				}
			}
		}
	}
	li.active, li.open {
		> a,
		> button {
			@include gradient-vertical(lighten($accent, 5%), $accent);
			color: #fff;
			i {
				color: #fff;
			}
		}
	}
	#search-drop {
		padding: 0 20px;
		background-color: rgba($dropdownBackground,0.85);
		form {
			margin: 20px 0;
		}
	}
}


#header-image {
	background-size: 100% auto;
	background-position: 50% 50%;
	-webkit-background-size: cover;
	background-size: cover;
	//background-attachment: fixed;
	h1 {
		height: 150px;
		color: #fff;
		display: table;
		margin: 0 0 10px 0;
		width: 100%;
		text-shadow: 0.5px 0.9px 3px rgba(1, 2, 2, 0.25);
		font-size: 60px;
		font-weight: 700;
		line-height: 72px;
		span {
			display: table-cell;
			vertical-align: bottom;
		}
	}
	&::before {
		content:"";
		position: absolute;
		top:0;
		left: 0;
		z-index:-1;
		width: 100%;
		height: 340px;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.5+0,0+100 */
		background: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
	}
}

.navbar {
	.navbar-inner {
		padding: 0;
		.menu-wrap {
			position: relative;
			display: inline-block;
			width: 100%;
			clear: both;
			&::before {
				content: '';
				position: absolute;
				@include gradient-vertical(#373032, #1f1b1c);
				width: 100%;
				height: 78px;
				display: block;
				z-index: 1;
			}
			.container-fluid {
				z-index: 5;
				position: relative;
			}
			.brand {
				margin: 0;
				padding: 0;
				vertical-align: middle;
				display: table-cell;
				@include transition(.3s);
				img {
					max-width: 250px;
					max-height: 120px;
					margin-top: -22px;
				}
				//&:hover {
				//	opacity: .9;
				//}
			}
			#nav-main {
				li {
					> a {

					}
					&.search-btn {
						#search-drop {
							position: absolute;
							right: 0;
							.collapse.in {
								height: auto;
							}
						}
					}
				}
			}
		}
	}
}


// add padding for span9
@media all and (min-width: 768px) {
	.span9.clmn-center,
	.span8.clmn-center {
		padding-right: 30px;
	}
}

// Footer
// -----------------------------------------------------------------
footer {
	vertical-align: bottom; // Sticky Footer
	font-size: 13px;
	background-color: #575757;
    font-weight: 400;
	color: #fff;
    .top-footer {
        @include gradient-vertical(#373032, #1f1b1c);
		padding-bottom: 20px;
		padding-top: 20px;
		#bottom-navigation {
			.nav-col {
				h5 {
					font-size: 18px;
					font-family: $baseFontFamily;
					border-bottom: 1px solid #676263;
					padding-bottom: 4px;
					margin-bottom: 8px;
					a {
						color: #999999;
						@include transition(.3s);
						white-space: normal;
						&:hover {
							color: #fff;
						}
					}
				}
				ul {
					margin: 0;
					li {
						list-style-type: none;
						line-height: 18px;
						margin-bottom: 8px;
						a {
							color: #eeeeee;
							@include transition(.3s);
							white-space: normal;
							&:hover {
								color: #999999;
							}
						}
					}
				}
			}
		}
		.footer-logo {
			display: block;
			margin: 0 0 20px;
			text-align: center;
			@include transition(.3s);
			opacity: .8;
			&:hover {
				opacity: 1;
			}
		}
    }
	.container-fluid {
		padding-top: $baseLineHeight;
		padding-bottom:$baseLineHeight / 2;
	}
	a { color: #fff;
		&:hover {color: darken(#fff, 15%);}
	}
}

// Popup
// -----------------------------------------------------------------
.body_popup { min-width:780px}
.popup h1 { text-align:center;}
.treeview .popover {max-width: 430px; width: auto;}
#categories-tree .popover {max-width: 450px; width: auto;}

// Common Elements
// -----------------------------------------------------------------
.meta {color: $grayDarker}
.errors {
	clear: both;
	color:$red; 
	list-style: none; 
	padding:0; 
	margin:0; 
	font-size: 12px;
}
.asterisk {color: $linkColor;}
label.required {
	padding-left:7px;
	margin-left:-7px; 
	background:url("../images/asterisk.png") no-repeat 0 5px; 
}
.empty, .table td.empty { 
	padding:10px 0; 
	text-align:center; 
	font-style:italic; 
	list-style:none;
}

.table-form {
	width:auto;
	th {text-align: center; padding:8px}
	td {padding: 3px 5px}
	.c_rowNumber {width: 20px}
	.c_options {width: 70px; vertical-align: middle}
	.c_sortable {width: 150px;}
	tr.removing > td{background-color: #FFDEDE!important;}
	.input-prepend {
		display: table-cell;
		input {width: auto}
	}
}

.description, .hint, .preferred_size {
	font-size: 12px;
	color:$gray; 
	line-height: normal;
	margin: 3px 0;
}

input.zip { width:160px;}
.hidden {display:none !important;}
.clear {clear: both;}

// FORM
// -----------------------------------------------------------------
form {
	fieldset { 
		legend { 
			color: lighten($black, 20%); 
			padding: 0; 
			font-weight:700;
		}
	}
	input[type="checkbox"], 
	input[type="radio"] {
		margin: -1px 5px 0 0;
		border:none;
	}
	dt > label {
		font-weight: 700;
        color: $textColor;
	}
	dd {
		label { display: inline-block; /*margin-right: 10px;*/}
		input, textarea, .uneditable-input {
		    width: 100%;
		}
		input, textarea, select, .uneditable-input {
		    @include box-sizing(border-box);
		}
		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 {
			height: 36px;
		}
		input.date {width: 120px;}
	}
	textarea {
		overflow: auto;
		min-height: 110px;
	}
	.label_description {
		font-weight:normal; 
		margin-left:10px; 
		font-size: 11px;
		line-height: 12px;
		color:#666;
	}
  dd.date-time-range-group {
    tr:nth-child(odd) td {border-bottom: solid silver 1px}
    td {
    	padding: 10px 5px; vertical-align: top;
    	label { margin-top: 3px;}
    }
  }
}
input[type="text"], input[type="password"], input[type="tel"], select, textarea {
	border: 1px solid $inputBorder;
	padding: 3px 6px;
	margin: 0;
}
select {width: auto;}
input[type="checkbox"], input[type="radio"] {padding: 0;}
.checkboxlist td { padding-right: 20px;}

// Custom Forms
// -----------------------------------------------------------------
.form_header {
    font-weight: 700;
  	font-size: $baseFontSize * 1.4;
  	line-height: $baseLineHeight * 2;
    border-bottom: 1px solid #e5e5e5;
    color: $headingsColor;
}
dl {
	margin: 0;
	> dd { margin:0 0 ($baseLineHeight / 2) 0;}
}
input.autocomplete_not_found {background-color:#FFDEDE}

#submitGroup-element { 
	margin:0;
	fieldset {
		padding:0; 
		margin:0; 
		border:0;
	}
	dl { text-align:center;}
	dd { display:inline-block;}
}
#admin-login-form #btnSubmit-element, 
form#stsauth-form #btnSubmit-element {
	text-align:center; 
	margin:0;
}

// Captcha
// -----------------------------------------------------------------
a.loading_captcha img {visibility:hidden}
a.loading_captcha {background: url('../images/loading.gif') no-repeat center center}
input.captcha {width:100%;}
a.captcha_refresh {margin: 0 0 12px;}
#captcha-label {display: none;}
.captcha_refresh img { border: 1px solid $inputBorder; @include border-radius($inputBorderRadius);}
.defaultHint_element {
    color: #000;
    top: 3px !important;
    .asterisk {
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        color: #fe4723;
    }
}

// Spam protection: hidden field
// -----------------------------------------------------------------
.alternative_email_address { display: none;}

// Filters
// -----------------------------------------------------------------
.filter_form, .sorter_form {
	margin-bottom: $baseLineHeight;
	padding: 20px;
	border:1px solid #ccc;
	background-color: #fafafa;
	dl {
		dt, dd { float:left; margin: 0 5px 0 0;}
		dd {margin: 0 10px 0 0;}
		dd#btnSearch-element, dd#btnCancel-element {padding-right: 0;}
		label { display:inline; line-height: $baseLineHeight * 1.3;}
		//#query-element {width:220px;}
	}
}
#ecommerce-filter-form{
	dd#query-element {width:270px;}
	dd#submitGroup-element{
		clear: both; width: 100%; 
		fieldset{
			dd{float: none;}
		}
	}
	dd#userId-element { width: 180px}
}

// DatePicker 
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {margin-top: -0.9em !important; top: 50% !important; cursor: pointer;}
 
// Pager
// -----------------------------------------------------------------
.pagination .pull-left { line-height: 30px;}

// Form Element Decorator FckEditor
// -----------------------------------------------------------------
textarea.htmleditor {display:none;}
div.htmleditor_preview {
	height:190px;
	overflow:auto;
	border:solid silver 1px;
	padding:2px;
	@include border-radius(3px);
	@include box-sizing(border-box);
}
div.ck_toolbar {padding:5px; text-align:right; @include box-sizing(border-box);}
.ckeditor_edit div.ck_toolbar, .ckeditor_edit div.htmleditor_preview {display:none;}
.htmleditor_modal {width:950px}

#loading-box {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -25px;
	margin-left: -25px;
	width: 50px;
	height: 50px;
	background: black;
	opacity: 0.8;
	cursor: pointer;
	z-index: 1000;
	@include border-radius(5px);
}
#loading-box div { width: 100%; height: 100%; background: url('../images/loading-black.gif') center center no-repeat; }
.ui-datepicker-trigger { vertical-align:middle; cursor:pointer; margin:0 5px;}

#btn-print { margin: -5px 0 0 10px;}

// Debug Info
// -----------------------------------------------------------------
#qsf-debug-container {color:black!important; background-color:white!important;}
#qsf-debug-container pre {text-align:left!important; color:black!important; background-color:white!important;}
#qsf-debug-container td, #qsf-debug-container th {border: 1px solid #000000;}
#qsf-debug-container th {text-align: center; padding: 5px 10px; background: #cccccc;}
#qsf-debug-container td {padding: 5px;}

#qsf-debug-container div#debug_db_profiler table tr td pre {background-color: transparent!important; border: medium none; display: inline; margin: 0;}
#qsf-debug-container div#debug_db_profiler td, #qsf-debug-container div#debug_db_profiler th {border: none;}
#qsf-debug-container div#debug_db_profiler td.color_type div.colored_code,
#qsf-debug-container div#debug_db_profiler td.format_type div.formatted_code {display: block;}
#qsf-debug-container div#debug_db_profiler td.color_type div.formatted_code,
#qsf-debug-container div#debug_db_profiler td.format_type div.colored_code
{display: none;}
#qsf-debug-container div#debug_db_profiler td.format_type a, #qsf-debug-container div#debug_db_profiler td.color_type a {
  display: inline-block;
  width: 8px;
}
#qsf-debug-container .table-hover tbody tr:hover > td, .table-hover tbody tr:hover > th {
    background-color: #FFFFD7;
}
.preview-page {
	color: #fff;
	background-color: #B60000;
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	line-height: 28px;
}

/* buttons rewrite */
.btn {
	// vars
	$btnPrimaryBg: #231f20 !default;
	$btnDefaultBg: #777 !default;

	// styles
	@include border-radius(0);
	text-shadow: none;
	@include box-shadow(none);
	background: $btnDefaultBg;
	color: #fff;
	border-color: $btnDefaultBg;
	font-weight: 500;
	@include transition(.3s);
	padding: 6px 20px;
	margin-bottom: 6px;

	&.btn-primary {
		background: $btnPrimaryBg;
		color: #fff;
		border-color: $btnPrimaryBg;
		&:hover,
		&:focus {
			background: $accent;
			border-color: $accent;
		}
	}

	&:hover,
	&:focus {
		background-position: 0 0;
		background: darken(#777, 10%);
		border-color: darken(#777, 10%);
		color: #fff;
	}
}