@import "variables";

// Reset
html,body {
	background: #4b4b4b;

	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;

	font-family: 'Roboto', Arial, sans-serif;
	font-size: 16px;
	font-weight: normal;
	line-height: 1.5;
	color: $color_white;
}
input, select, textarea {
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 16px;
	color: $color_dark;
	outline: none !important;
}

p { margin: 0 0 .75em 0; padding: 0px; }

a, a:link, a:visited {
	color: $color_primary;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:focus,a:active { outline: none; }
a img, :link img, :visited img { border: none; }

table { border-collapse: collapse; border-spacing: 0; }
table td { padding: 0px; }

address {font-style: normal;}

label { margin: 0px; font-weight: normal; }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	margin: 0 0 .5em 0; padding: 0;
	font-weight: bold;
	line-height: 1.3em;
	color: inherit;
}

h1, .h1 {}
h2, .h2 {}
h3, .h3 {}
h4, .h4 {}
h5, .h5 {}
h6, .h6 {}

// common
.fs-12 {}

.fw-thin {font-weight: 100;}
.fw-extra-light {font-weight: 200;}
.fw-light {font-weight: 300;}
.fw-normal {font-weight: 400;}
.fw-medium {font-weight: 500;}
.fw-semi-bold {font-weight: 600;}
.fw-bold {font-weight: 700;}
.fw-extra-bold {font-weight: 800;}
.fw-black {font-weight: 900;}

.text-underline { text-decoration: underline; }
.text-nowrap { white-space: nowrap !important; }

.word-wrap-break { word-wrap: break-word; }

.ellipsis {
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

// Colors
.color-white { color: $color_white !important; }
.color-black { color: $color_black !important; }
.color-primary {color: $color_primary !important; }
.color-secondary { color: $color_secondary !important; }
.color-success { color: $color_success !important; }
.color-danger { color: $color_danger !important; }
.color-warning { color: $color_warning !important; }
.color-info { color: $color_info !important; }
.color-light { color: $color_light !important; }
.color-dark { color: $color_dark !important; }
.color-body { color: $color_body !important; }
.color-muted { color: $color_muted !important; }

// images
.img-block {
	position: relative;
	display: block;
	width: 100%;
	img {
		display: block;
		width: 100%;
	}
}
.img-thumbnail {
	margin: 0px; padding: 0px;
	border-color: $color_gray_10;
	@include border-radius(0px);
}

// Helpers
.posr { position: relative; }
.ofl { overflow: hidden; position: relative; *zoom: 1; }

.hr { background: $color_gray_10; position: relative; overflow: hidden; display: block; height: 1px; }

//links
.overlink {
	background: url(../images/blank.gif) no-repeat 0 0;
	border: none !important;
	position: absolute; top: 0px; left: 0px; z-index: 55;
	display: block; width: 100%; height: 100%;
}

// Buttons
.btn {
	position: relative;
	text-decoration: none !important;
	white-space: normal;
	@include border-radius(3px);
	&.btn-primary {
		background: $color_primary;
		border-color: $color_primary;
		color: $color_white;
		&:hover {
			background: darken($color_primary, 10%);
			border-color: darken($color_primary, 10%);
		}
	}
}

//rows
.row-0 { margin-left: 0px !important; margin-right: 0px !important; }
.row-0 > .col-xs-1, .row-0 > .col-sm-1, .row-0 > .col-md-1, .row-0 > .col-lg-1, .row-0 > .col-xs-2, .row-0 > .col-sm-2, .row-0 > .col-md-2, .row-0 > .col-lg-2, .row-0 > .col-xs-3, .row-0 > .col-sm-3, .row-0 > .col-md-3, .row-0 > .col-lg-3, .row-0 > .col-xs-4, .row-0 > .col-sm-4, .row-0 > .col-md-4, .row-0 > .col-lg-4, .row-0 > .col-xs-5, .row-0 > .col-sm-5, .row-0 > .col-md-5, .row-0 > .col-lg-5, .row-0 > .col-xs-6, .row-0 > .col-sm-6, .row-0 > .col-md-6, .row-0 > .col-lg-6, .row-0 > .col-xs-7, .row-0 > .col-sm-7, .row-0 > .col-md-7, .row-0 > .col-lg-7, .row-0 > .col-xs-8, .row-0 > .col-sm-8, .row-0 > .col-md-8, .row-0 > .col-lg-8, .row-0 > .col-xs-9, .row-0 > .col-sm-9, .row-0 > .col-md-9, .row-0 > .col-lg-9, .row-0 > .col-xs-10, .row-0 > .col-sm-10, .row-0 > .col-md-10, .row-0 > .col-lg-10, .row-0 > .col-xs-11, .row-0 > .col-sm-11, .row-0 > .col-md-11, .row-0 > .col-lg-11, .row-0 > .col-xs-12, .row-0 > .col-sm-12, .row-0 > .col-md-12, .row-0 > .col-lg-12 { padding-left: 0px !important; padding-right: 0px !important; }
.row-10 { margin-left: -5px !important; margin-right: -5px !important; }
.row-10 > .col-xs-1, .row-10 > .col-sm-1, .row-10 > .col-md-1, .row-10 > .col-lg-1, .row-10 > .col-xs-2, .row-10 > .col-sm-2, .row-10 > .col-md-2, .row-10 > .col-lg-2, .row-10 > .col-xs-3, .row-10 > .col-sm-3, .row-10 > .col-md-3, .row-10 > .col-lg-3, .row-10 > .col-xs-4, .row-10 > .col-sm-4, .row-10 > .col-md-4, .row-10 > .col-lg-4, .row-10 > .col-xs-5, .row-10 > .col-sm-5, .row-10 > .col-md-5, .row-10 > .col-lg-5, .row-10 > .col-xs-6, .row-10 > .col-sm-6, .row-10 > .col-md-6, .row-10 > .col-lg-6, .row-10 > .col-xs-7, .row-10 > .col-sm-7, .row-10 > .col-md-7, .row-10 > .col-lg-7, .row-10 > .col-xs-8, .row-10 > .col-sm-8, .row-10 > .col-md-8, .row-10 > .col-lg-8, .row-10 > .col-xs-9, .row-10 > .col-sm-9, .row-10 > .col-md-9, .row-10 > .col-lg-9, .row-10 > .col-xs-10, .row-10 > .col-sm-10, .row-10 > .col-md-10, .row-10 > .col-lg-10, .row-10 > .col-xs-11, .row-10 > .col-sm-11, .row-10 > .col-md-11, .row-10 > .col-lg-11, .row-10 > .col-xs-12, .row-10 > .col-sm-12, .row-10 > .col-md-12, .row-10 > .col-lg-12 { padding-left: 5px !important; padding-right: 5px !important; }
.row-20 { margin-left: -10px !important; margin-right: -10px !important; }
.row-20 > .col-xs-1, .row-20 > .col-sm-1, .row-20 > .col-md-1, .row-20 > .col-lg-1, .row-20 > .col-xs-2, .row-20 > .col-sm-2, .row-20 > .col-md-2, .row-20 > .col-lg-2, .row-20 > .col-xs-3, .row-20 > .col-sm-3, .row-20 > .col-md-3, .row-20 > .col-lg-3, .row-20 > .col-xs-4, .row-20 > .col-sm-4, .row-20 > .col-md-4, .row-20 > .col-lg-4, .row-20 > .col-xs-5, .row-20 > .col-sm-5, .row-20 > .col-md-5, .row-20 > .col-lg-5, .row-20 > .col-xs-6, .row-20 > .col-sm-6, .row-20 > .col-md-6, .row-20 > .col-lg-6, .row-20 > .col-xs-7, .row-20 > .col-sm-7, .row-20 > .col-md-7, .row-20 > .col-lg-7, .row-20 > .col-xs-8, .row-20 > .col-sm-8, .row-20 > .col-md-8, .row-20 > .col-lg-8, .row-20 > .col-xs-9, .row-20 > .col-sm-9, .row-20 > .col-md-9, .row-20 > .col-lg-9, .row-20 > .col-xs-10, .row-20 > .col-sm-10, .row-20 > .col-md-10, .row-20 > .col-lg-10, .row-20 > .col-xs-11, .row-20 > .col-sm-11, .row-20 > .col-md-11, .row-20 > .col-lg-11, .row-20 > .col-xs-12, .row-20 > .col-sm-12, .row-20 > .col-md-12, .row-20 > .col-lg-12 { padding-left: 10px !important; padding-right: 10px !important; }
.row-50 { margin-left: -25px !important; margin-right: -25px !important; }
.row-50 > .col-xs-1, .row-50 > .col-sm-1, .row-50 > .col-md-1, .row-50 > .col-lg-1, .row-50 > .col-xs-2, .row-50 > .col-sm-2, .row-50 > .col-md-2, .row-50 > .col-lg-2, .row-50 > .col-xs-3, .row-50 > .col-sm-3, .row-50 > .col-md-3, .row-50 > .col-lg-3, .row-50 > .col-xs-4, .row-50 > .col-sm-4, .row-50 > .col-md-4, .row-50 > .col-lg-4, .row-50 > .col-xs-5, .row-50 > .col-sm-5, .row-50 > .col-md-5, .row-50 > .col-lg-5, .row-50 > .col-xs-6, .row-50 > .col-sm-6, .row-50 > .col-md-6, .row-50 > .col-lg-6, .row-50 > .col-xs-7, .row-50 > .col-sm-7, .row-50 > .col-md-7, .row-50 > .col-lg-7, .row-50 > .col-xs-8, .row-50 > .col-sm-8, .row-50 > .col-md-8, .row-50 > .col-lg-8, .row-50 > .col-xs-9, .row-50 > .col-sm-9, .row-50 > .col-md-9, .row-50 > .col-lg-9, .row-50 > .col-xs-10, .row-50 > .col-sm-10, .row-50 > .col-md-10, .row-50 > .col-lg-10, .row-50 > .col-xs-11, .row-50 > .col-sm-11, .row-50 > .col-md-11, .row-50 > .col-lg-11, .row-50 > .col-xs-12, .row-50 > .col-sm-12, .row-50 > .col-md-12, .row-50 > .col-lg-12 { padding-left: 25px !important; padding-right: 25px !important; }

//layout
#__app {
	background: #4b4b4b url(../images/bg.jpg) no-repeat center bottom;
	position: relative;
	width: 100%;
	height: 100%;
}
/*#__layout {
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	overflow: hidden;
}*/
.wrapper {
	position: fixed; top: 0; right: 0; bottom: 0; left: 0;
	overflow: hidden;
}

.aligner {
	position: relative;
	top: 50%; left: 50%;
	@include transform(translateX(-50%) translateY(-50%));
	padding: 24px;
	&.responsive-md {
		@media (max-width: 1199px){
			top: auto; left: auto;
			padding-top: 80px;
			@include transform(none);
		}
	}
	&.responsive-sm {
		@media (max-width: 991px){
			top: auto; left: auto;
			padding-top: 80px;
			@include transform(none);
		}
	}
	&.responsive-xs {
		@media (max-width: 767px){
			top: auto; left: auto;
			padding-top: 80px;
			@include transform(none);
		}
	}
}

.layout-logo {
	position: absolute; top: 24px; left: 24px;
	display: block; width: 140px;
	@media (max-width: 991px){ width: 100px; }
	@media (max-width: 767px){ width: 75px; }
}

.page-closer {
	position: absolute; top: 24px; right: 24px;
	z-index: 55;
	width: 32px;
	img { display: block; width: 100%; }
}