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

.block.push, footer, header .top-line {
	@include box-shadow(0 0 5px rgba(0,0,0,0.25));
}

// structure
.wrapper.home {
	.block.push {
		background-image: url('../images/home-banner.jpg');
		background-repeat: no-repeat;
		background-size: cover;
	}
}
.top-line {
	background: #9b9b9b;
	color: #fff;
	margin: 0 15px;
	padding: 0 30px;
	height: 34px;
	line-height: 34px;
	font-size: 18px;
	.links-social {
		margin: 0;
		li {
			padding: 0 2px;
			line-height: 34px;
			a {
				position: relative;
				top: -2px;
				line-height: 34px;
				img {
					width: 15px;
				}
			}
		}
	}
}
.block.push {
	background: #fff;
	padding: 5px 30px 20px;
	margin: 0 15px;
	> .container-fluid {
		margin-top: 0;
		margin-bottom: 0;
		padding: 0;
	}
}
footer.block {
	padding: 15px 30px;
	margin: 0 15px;
	background: #6d6d6d;
	color: #fff;
	> .container-fluid {
		padding: 0;
	}
}

html, body { height: 100%; }
.wrapper {
	/* display: table;
	table-layout: fixed; */
	width: 100%;
	max-width: 1170px;
	//height: 100%;
	margin: 0 auto 20px;
	//background: #fff;
    &.full-width {
        max-width: 100%;
        margin: 0;
        footer.block, .block.push {
            margin: 0;
        }
        header + div > * {
            padding-right: 0;
            padding-left: 0;
        }
    }
}
.block {
	//display: table-row;
	//height: 1px;
}
.push {
	height: auto;
	//height: 100%;
}
.push > .container-fluid {
	margin-top: $baseLineHeight * 1.2;
	margin-bottom: $baseLineHeight;
}
.container-fluid {max-width:1140px; margin: 0 auto;}

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

select option {font-family: Arial, Helvetica}

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

// Footer
// -----------------------------------------------------------------
footer {
	//vertical-align: bottom; // Sticky Footer
	font-size: 14px;
	background-color: #6d6d6d;
	.container-fluid {padding-top: 15px;}
	p {margin-bottom: 0; line-height: 25px;}
	a { color:$textColor;
		&:hover {color:$linkColorHover;}
	}
	.links-social {
		margin: 0;
	}
}

// Brand
// -----------------------------------------------------------------
.brand {
	//margin:25px 0 10px 0;
	padding-right: 28px;
	border-right: 2px solid $accent;
	.name {
		font-weight: 700;
		color:lighten(#119ca4, 1%);
		font-size: 30px;
		letter-spacing:0.02em;
		.thin {
			font-weight: 400;
			color:#7f8a90;
		}
	}
	.tagline {
		color:lighten(#637072, 5%);
		font-size: 13px;
		letter-spacing:0.15em;
	}
}
.descr-logo {
	line-height: 90px;
	font-weight: 300;
	font-size: 36px;
	color: #000;
	padding-left: 28px;
}
.link-to-main {
	line-height: 90px;
	margin-right: 30px;
}

// Popup
// -----------------------------------------------------------------
.body_popup { min-width:780px}
.popup h1 { text-align:center;}
.treeview .popover {max-width: 380px; 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-empty {
	border:0;
	background-color: $tableBackground!important;
	margin: 0;
	td {
		border: 0;
		background: none;
		margin: 0;
		padding:0;
		background-color: $tableBackground!important;
	}
}
.table-form {
	th {text-align: center}
	.c_rowNumber {width: 20px}
	.c_options {width: 150px; vertical-align: middle}
	tr.remove > td{background-color: #FFDEDE!important;}
}
.description, .hint, .preferred_size {
	font-size: 11px;
	color:$gray;
	line-height: normal;
	margin: 3px 0;
}

input.zip { width:60px;}
.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: 0 5px 0 0;
		border:none;
	}
	dt > label {
		font-weight: bold;
		color: $grayDarker;
	}
	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: $baseLineHeight + 10px;
			font-size: 16px;
		}
		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;}
    }
  }
}
// placeholder
input, select {
	&::-webkit-input-placeholder {
	  color: $placeholderText !important;
	  font-size: 15px;
	}
	&:-moz-placeholder {
	  color: $placeholderText !important;
	  font-size: 15px;
	}
	&::-moz-placeholder {
	  color: $placeholderText !important;
	  font-size: 15px;
	}
	&:-ms-input-placeholder {
	  color: $placeholderText !important;
	  font-size: 15px;
	}
	&::-ms-input-placeholder {
	  color: $placeholderText !important;
	  font-size: 15px;
	}
	&:placeholder-shown {
	  color: $placeholderText !important;
	  font-size: 15px;
	}
}
input[type="text"], input[type="password"], input[type="tel"], select, textarea {
	border: 1px solid $inputBorder;
	padding: 3px;
	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 10px 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:150px;}
a.captcha_refresh {margin: 0 0 12px;}
.captcha_refresh img { border: 1px solid $inputBorder; @include border-radius($inputBorderRadius);}
.defaultHint_element {color:#656565;}

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

// Filters
// -----------------------------------------------------------------
.filter_form, .sorter_form {
	margin-bottom: $baseLineHeight;
	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.2;}
		#query-element {width:300px;}

	}
}
#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;}

#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;
}

.app-test-testlist {
	margin-top: $baseLineHeight;
	.test-list {
		padding:20px;
		margin-bottom: $baseLineHeight;
		background-color: #f5f5f5;
		@include box-shadow(1px 1px 5px rgba(#000,0.33));
		h2 { font-weight: normal;}
        > a.pull-left {
            width: 148px;
            height: 156px;
            margin-right: 20px;
            img {
                width: 100%;
                @include border-radius(2px);
            }
        }
        .media-body {
            .media-heading {
                line-height: 1;
            }
        }
	}
}
.slide-header {
	background-color: $accent;
	padding: 8px 20px;
	color: #fff;
	strong {font-size: 18px;}
	@include border-radius(2px);
    margin-bottom: $baseLineHeight;
}
.slide-intro {
	font-style: italic;
	margin: $baseLineHeight 0;
}
.slide-video {
	#slide-player {
		width: 100%;
		height: 540px;
		@include box-shadow(0 0 5px rgba(#000, 0.25));
	}
	margin: $baseLineHeight 0;
}
.slide-questions {
    fieldset {
        margin-bottom: 20px;
        display: block;
        padding: 0 15px 10px;
        border-bottom: 1px solid #9b9b9b;
        //padding: 15px;
        //background: #f5f5f5;
        //@include border-radius(5px);
        * {
            font-size: 16px;
        }
        label {
            input {
                margin-top: -2px;
            }
        }
        [data-answer] :checked + .text { color: #0093b5 };
        &:last-child {
            border-bottom: 0;
        }
    }
}

//


.test-footer {
	margin-top: $baseLineHeight;
}
#training-test {
    min-height: 670px;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;

    #training-slide {
        flex: 1 auto;
    }
	.video-progress {
		overflow: hidden;
		height: 5px;
		@include gradient-vertical(#f5f5f5, #f9f9f9);
		@include box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
		@include border-radius($baseBorderRadius);
		.bar {
			width: 0%;
			height: 100%;
			color: $white;
			float: left;
			font-size: 12px;
			text-align: center;
			text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
			@include gradient-vertical(#ee5f5b, #c43c35);
			@include box-shadow(inset 0 -1px 0 rgba(0, 0, 0, .15));
			@include box-sizing(border-box);
			@include transition(width .350s ease);
		}
	}
	#training-result {
		.slide-header {
			margin-bottom: 18px;
		}
		.row-fluid {
			.btn,  {
				padding: 4px 30px !important;
			}
			> .span8, .span12 {
				border-right: 1px solid #d9d2c5;
				text-align: center;
				* {font-weight: 400; font-size: 16px; line-height: 30px;}
				strong {
					font-weight: 700;
				}
                h2 {
                    font-size: 16px;
                    color: #444;
                    font-weight: 700;
                }
				.congrat {
					color: $accent-sec;
					font-size: 30px;
					line-height: 36px;
				}
                .oops {
                    color: $orange;
                    font-size: 30px;
                    line-height: 36px;
                }
			}
			.span4 {
				* {line-height: 30px;}
				textarea {
					width: 100%;
                    padding: 10px;
					@include box-sizing (border-box);
                    margin-bottom: 10px;
                    height: 185px;
				}
                > form > p {
                    margin-bottom: 0;
                    label {
                        margin-bottom: 0;
                    }
                }
			}
            &.training-fail, &.training-done {
                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
            }
		}
	}
}

.accent-color {
	color: $accent;
}