@import "magic-stylez";

html, body {
	width: 100%; height: 100%; position: relative;
	margin: 0; padding: 0;
	background: #f3f2f2;
}
body {
	position: relative;
	padding: 0 0 0 220px;
	&.blank {
		margin: 0; padding: 0;
		background: #fff;
	}
}

#app_content {
	display: block; position: relative;
	width: 100%; height: 100%;
	// margin-left: 220px;
	// background: #333;
	// .section {
	// 	&, & > .corset { background: #333; color: #ccc; }
	// 	&.head, &.head > .corset {
	// 		background: #000; color: #ccc;
	// 	}
	// }
	
	
}

.check_switch {
	display: block; position: relative; margin: 0; padding: 0;
	margin: 7px 0 0 7px;
	@include border-radius(100px);
	width: 30px;
	height: 15px;
	border: solid 1px #ccc;
	background: #c5c5c5;
	@include box-shadow( inset 0 1px 1px 0 rgba(0,0,0,.50) );
	.switch_toggle {
		display: block; position: relative; margin: 0; padding: 0;
		width: 17px; height: 17px;
		position: absolute;
		left: -2px; top: -2px;
		background: #fff;
		@include border-radius(100px);
		border: solid 1px #ccc;
		@include box-shadow( 0 1px 1px 0 rgba(0,0,0,.30) );
		@include linear-gradient(#ffffff, #e5e5e5);
	}
}


.check {
	display: block; position: relative;
	width: 30px;
	height: 28px;
	margin: -2px 2px;
	border: none;
	float: left;
	text-align: center;
	// clickable and disabled checkbox
	.checka {
	  display: block;
		position: absolute;
		top: 9px; right: 10px; bottom: 9px; left: 9px;
		border: solid 1px #ccc;
		color: #ccc;
		i {
		  display: none;
		  margin: -3px -4px -3px 0;
		  font-size: 15px;
			text-decoration: none;
			line-height: 22px;
		}
		&.checked i { display: block; }
	}
	// clickable checkbox
	a.checka {
	  color: #aaa;
	  border: solid 1px #999;
	}
}




.banner-box.responsive-hero {
	// .banner-head, .banner-footer {
	// 	padding: 10px 0;
	// }
	// .banner-footer { background: rgba(0,0,0,.23); }
}


#aside {
	// @mixin single_shine( $color, $times: 3, $position: right, $width: 5px, $blur: 5px, $size: 0, $corner: 100 )
	@include single_shine( rgba(0,0,0,.23), 1, right, 10px );
	display: block; position: fixed;
	top: 0; right: auto; bottom: 0; left: 0;
	width: 220px;
	z-index: 99;
	// box-shadow: inset -2px 0 3px 0 #000;
	border-right: solid 1px #ccc;
	overflow-y: scroll;
	.btn { width: 90%; margin: 0 auto; }
}

ul.list {
	display: block; position: relative;
	list-style: none;
	margin: 0; padding: 10px;
	text-align: left;
	li {
		display: block; position: relative;
		margin: 0; padding: 5px;
	}
}

// .section .corset { text-align: left; }
.section { text-align: left; }












.samplebox {
	display: block; position: relative;
	margin: 0 0 20px;
	padding: 10px;
	border: solid 1px #ccc;
	background: #fff;
	
	h2 { font-size: 16px; }
	
	&.raised_shadow { 
		@include raised_shadow( rgba(0, 0, 0, 0.5), 5 );
		&.one { @include raised_shadow( rgba(102, 53, 53, 0.5), 5 ); }
		&.two { @include raised_shadow( rgba(102, 53, 53, 0.5), 5, -10px, 0 ); }
	}
	&.pseudo_raised_shadow {
		@include pseudo_raised_shadow( rgba(0, 0, 0, 0.5), 3 );
		&.one { @include pseudo_raised_shadow( rgba(102, 53, 53, 0.5), 5, 30px, 10px, 0, 10px ); }
		&.two { @include pseudo_raised_shadow( rgba(102, 53, 53, 0.5), 5, 10px, 10px, 20px, 10px ); }
	}
	&.lifted_shadow {
		@include lifted_shadow( rgba(0, 0, 0, 0.5), 2 );
		&.one { @include lifted_shadow( rgba(102, 53, 53, 0.5), 5 ); }
		&.two { @include lifted_shadow( rgba(204, 0, 0, 0.5), 2 ); }
	}
	&.perspective_shadow {
		@include perspective_shadow( rgba(0, 0, 0, 0.42), 1, 30, 3px );
		&.one { @include perspective_shadow( rgba(102, 53, 53, 0.5), 5, 50, 5px ); }
		&.two { @include perspective_shadow( rgba(204, 0, 0, 0.5), 2, 42, 10px ); }
	}
	&.vertical_curves {
		@include vertical_curves( rgba(0, 0, 0, 0.42), 3 );
		&.one { @include vertical_curves( rgba(102, 53, 53, 0.5), 5 ); }
		&.two { @include vertical_curves( rgba(204, 0, 0, 0.5), 2 ); }
	}
	&.horizontal_curves {
		@include horizontal_curves( rgba(0, 0, 0, 0.42), 3 );
		&.one { @include horizontal_curves( rgba(102, 53, 53, 0.5), 5 ); }
		&.two { @include horizontal_curves( rgba(204, 0, 0, 0.5), 2 ); }
	}
	&.vertical_shine {
		@include vertical_shine( rgba(0, 0, 0, 0.3), 2 );
		&.one { @include vertical_shine( rgba(102, 53, 53, 0.5), 5 ); }
		&.two { @include vertical_shine( rgba(204, 0, 0, 0.5), 2 ); }
	}
	&.horizontal_shine {
		@include horizontal_shine( rgba(0, 0, 0, 0.3), 2 );
		&.one { @include horizontal_shine( rgba(102, 53, 53, 0.5), 5 ); }
		&.two { @include horizontal_shine( rgba(204, 0, 0, 0.5), 2 ); }
	}
	
	&.single_shine {
		@include single_shine( rgba(0, 0, 0, 0.5), 2 );
		&.one { @include single_shine( rgba(102, 53, 53, 0.5), 5 ); }
		&.two { @include single_shine( rgba(204, 0, 0, 0.5), 2 ); }
	}
	
	&.single_curve {
		@include single_curve( rgba(0, 0, 0, 0.5), 2 );
		&.one { @include single_curve( rgba(102, 53, 53, 0.5), 5 ); }
		&.two { @include single_curve( rgba(204, 0, 0, 0.5), 2 ); }
	}
	
	&.paper_shadow {
		@include paper_shadow( rgba(0, 0, 0, 0.5), 2 );
		&.one { @include paper_shadow( rgba(102, 53, 53, 0.5), 5 ); }
		&.two { @include paper_shadow( rgba(204, 0, 0, 0.5), 2 ); }
	}
	
	
	&.smal { 
		width: 40%; float: left;
		margin: 0 4% 3% 5%;
		padding: 0;
		// border: solid 1px #555;
		// @include verlauf_A;
		h2 { padding: 20px 30px; text-align: center; }
		p.warning { font-size: 10px; color: #663333; }
	}
	.warning { text-align: left; }
}




.icon_sample {
	display: inline-block;
	position: relative;
	margin: 5px;
	padding: 0;
	width: 100px;
	font-size: 13px;
	line-height: 20px;
	text-align: center;
	vertical-align: top;
	@include border-radius(3px);
	.sample_icon, .sample_name {
	    display: block; position: relative;
	    margin: 0; padding: 0;
	}
	.sample_icon {
		margin: 5px 5px 0;
	    line-height: 60px;
	    font-size: 42px;
	    color: #444;
		background: #fff;
		border: solid 1px #ccc;
		@include border-radius(3px);
	}
	.sample_name { font-weight: bold; height: 40px; vertical-align: middle; }
	&:hover {
		background: #ccc;
		i { 
			font-size: 60px; color: #09c;
			text-shadow: 1px 1px 0 rgba(255,255,255,.75), 0 1px 0 rgba(255,255,255,.75), 1px 0 0 rgba(255,255,255,.75), -1px -1px 0 rgba(0,0,0,.90), 0 -1px 0 rgba(0,0,0,.90), -1px 0 0 rgba(0,0,0,.90);
		}
	}
}



#mainFrame {
	display: block; position: relative;
	margin: 0; padding: 0;
	width: 100%; height: 100%;
	border: none;
}

.main_content.fixed-nav {
	padding: 50px 0 0;
}