@import "magic-stylez";
@import "magic/content/wrapped_fields";
@import "magic/content/check_switch";

html, body {
	width: 100%; height: 100%; 
	background: #f3f2f2;
	
	overflow-x: hidden;
	
	position: relative;
	// position: static;
	
}
body {
	&.blank {
		background: #fff;
	}
	&.main_template {
	    padding: 40px 0 0 0;
	}
}

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

.testtestest { display: block; position: relative; }

#aside {
	// @mixin single_shine( $color, $times: 3, $position: right, $width: 5px, $blur: 5px, $size: 0, $corner: 100 )
	display: block; position: fixed;
	top: 40px; right: auto; bottom: 0; left: 0;
	width: 220px;
	z-index: 99999;
	background: #e5e5e5;
	// box-shadow: inset -2px 0 3px 0 #000;
	border-right: solid 1px #ccc;
	overflow-y: scroll;
	.btn { width: 90%; margin: 0 auto; }
	
	// @include transform( translateZ( 0 ) );
	// @include transform( translateX( -222px ) ); 
    
    @include transform( translate(-220px,0) );
    
    @include transition (all 0.5s ease-in-out);
    
}



#mobile_header {
    position: fixed;
    top: 0; right: 0; left: 0;
    height: 40px; line-height: 40px;
    z-index: 999999;
    @include linear-gradient( #222, #111 );
    color: #ccc;
    text-shadow: 0 1px 1px #000;
    i, i:before { font-size: 24px; line-height: 40px;}
    text-decoration: none;
}

body.aside-on {
    #aside {
        // @include transform( translateX( 0 ) );
        @include transform( translate(0,0) );
    }
    #mobile_header { color: #069; }
}


@include responsiveStep-sm {
    
    body {
    	&.main_template {
    	    padding: 0 0 0 220px;
    	}
    }
    
    #aside {
        @include single_shine( rgba(0,0,0,.23), 1, right, 10px );
        display: block; position: fixed;
        top: 0;
        
        // @include transform( translateX( 0 ) );
        @include transform( translate(0,0) );
    }
    
    #mobile_header {
        display: none;
    }
}




// .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); }
	
	// http://lorempixel.com/g/1200/500/nature/
	
	&.lorempixel {
		background-color: rgba(255,255,255,.50);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		background-image: image-url('http://lorempixel.com/g/1200/500/nature/');
	}
	
}





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


// text-helper-samples

.text_outline_sample {
    @include text_outline( #000, 1px );
}
.colored_inset_font_sample {
    @include colored_inset_font( rgba(255,255,255,90), rgba(0,0,0,.50) );
}
.inset_font_sample {
    @include inset_font( 90, 50);
}




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







    /*only for webkit  browsers*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .section.image.fixed{ 
        // background-size:auto;
        // background-attachment: scroll;
        z-index: 3;
        background-position: center 0%;
        @include backface-visibility(hidden);
    }
}