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

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


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

ul {
	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; }



.help_arrow {
	// display: block;
	position: relative;
	z-index: 7;
	&:before, &:after {
		font-family: 'Gloria Hallelujah', cursive;
		font-weight: 400;
	}
	&:before {
		display: block; position: absolute; content: "";
		padding: 0;
		width: 50px; height: 50px;
		bottom: 100%; left: 50%;
		margin: 0 0 10px -25px;
		background: transparent image-url("magic/arrows/arrow2-2.png") center center no-repeat;
		background-size: contain;
		@include rotation(-53);
	}
	&:after {
		display: block; position: absolute; content: attr(data-intro);
		padding: 0;
		height: 30px; line-height: 30px;
		bottom: 100%; left: 50%;
		margin: 0 0 37px 30px;
		color: #a0c775;
		font-size: 28px; font-weight: 300;
		text-shadow: 0 1px 1px #000;
	}
}








.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);
		}
	}
}