.section {
    display: block; position: relative;
    margin: 0; 
    padding: $section-padding 0;
    // background: $white;
    text-align: center;
    
	font-size: $font-size-base;
	.corset, .container { background: inherit; }
	
    
    &.z, &.zindex, &.z-index { z-index: 1; }
    
	// 
	//   Sections with shine
	// 
    &.shine-top {
        z-index: 1;
        overflow: hidden;
        &:before {
            display: block; position: absolute; content: ""; z-index: 11;
            margin: 0; padding: 0;
            bottom: 100%; left: 10%; right: 10%; height: 100px;
            @include spezial_radius( 500px / 20px );
            @include box-shadow( 0 5px 20px 0 rgba(0,0,0,.23) );
        }
    }
    &.shine-bottom {
        z-index: 1;
        overflow: hidden;
        &:after {
            display: block; position: absolute; content: ""; z-index: 11;
            margin: 0; padding: 0;
            top: 100%; left: 10%; right: 10%; height: 100px;
            @include spezial_radius( 500px / 20px );
            @include box-shadow( 0 -5px 20px 0 rgba(0,0,0,.23) );
        }
    }
    

	// 
	//   Border Stylez
	// 
    &.hard-top {
        border-top: solid 1px $main-border-color;
        @include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75) );
    }
	&.hard-bottom {
        border-bottom: solid 1px rgba(255,255,255,.75);
        @include box-shadow( inset 0 -1px 1px 0 $main-border-color );
    }
	&.hard-top.hard-bottom {
		@include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75), inset 0 -1px 1px 0 $main-border-color );
	}
	
	&.dotted-top {
        border-top: dotted 2px $gray-light;
        @include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75) );
    }
	&.dotted-bottom {
        border-bottom: dotted 2px $gray-light;
        @include box-shadow( 0 1px 1px 0 rgba(255,255,255,.75) );
    }
	&.dotted-top, &.dotted-bottom {
		@include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75), 0 1px 1px 0 rgba(255,255,255,.75) );
	}
	
	// 
	//   Section Sizes
	// 
	&.compact { padding-top: $section-compact-padding; padding-bottom: $section-compact-padding; }
	&.flatted, &.tight { padding-top: $section-flatted-padding; padding-bottom: $section-flatted-padding; }
	
	&.fat { padding-top: $section-fat-padding; padding-bottom: $section-fat-padding; }
	&.fatter { padding-top: $section-fatter-padding; padding-bottom: $section-fatter-padding; }
	
	&.flat { padding-top: 0; padding-bottom: 0; }
	&.flat-top { padding-top: 0; }
    &.flat-bottom { padding-bottom: 0; }
	
	
	// 
	//   Section Colors
	// 
	background: $section-background;
	@include all_form_elements { background: $section-input-bg; }
	
    &.dark {
		background: $section-dark-background;
		.three-previews .preview { border-color: $main-border-color; }
		@include all_form_elements { background: $section-dark-input-bg; }
    }
	&.bright {
		background: $section-bright-background;
		@include all_form_elements { background: $section-bright-input-bg; }
	}
	&.brand { 
		background: $section-brand-background; 
		@include all_form_elements { background: $section-brand-input-bg; }
	}
	&.soft { 
		background: $section-soft-background; 
		@include all_form_elements { background: $section-soft-input-bg; }
	}
    &.blank { background: transparent; }
    
    &.one { 
		background: $section-one-background; 
		@include all_form_elements { background: $section-one-input-bg; }
	}
	&.two { 
		background: $section-two-background; 
		@include all_form_elements { background: $section-two-input-bg; }
	}
	&.three { 
		background: $section-three-background; 
		@include all_form_elements { background: $section-three-input-bg; }
	}

	&.head {
		z-index: 2;
		background: $section-head-background;
		padding: $section-head-padding 0;
		h1, h2, .h1, .h2 {
			margin: 0; padding: 0;
			line-height: $section-head-line-height;
			font-size: $section-head-font-size;
			color: $brand-color;
			text-align: left;
			small { color: $section-head-small-color; }
		}
		@include all_form_elements { background: $section-head-input-bg; }
	}
	
	
	&.speech {
        &:after {
            display: block; position: absolute; content: "";
            margin: 0; padding: 0;
            width: 0; height: 0;
            border: solid 10px transparent;
            border-right:  solid 10px $section-background;
            border-bottom: solid 10px $section-background;
            bottom: -8px;
            left: 50%;
            margin-left: -8px;
            @include rotation( 45 );
            z-index: 99;
        }
        &.dark:after {
            border-right:  solid 10px $section-dark-background;
            border-bottom: solid 10px $section-dark-background;
        }
        &.bright:after {
            border-right:  solid 10px $section-bright-background;
            border-bottom: solid 10px $section-bright-background;
        }
        &.brand:after {
            border-right:  solid 10px $section-brand-background;
            border-bottom: solid 10px $section-brand-background;
        }
        &.soft:after {
            border-right:  solid 10px $section-soft-background;
            border-bottom: solid 10px $section-soft-background;
        }
        
        &.one:after {
            border-right:  solid 10px $section-one-background;
            border-bottom: solid 10px $section-one-background;
        }
        &.two:after {
            border-right:  solid 10px $section-two-background;
            border-bottom: solid 10px $section-two-background;
        }
        &.three:after {
            border-right:  solid 10px $section-three-background;
            border-bottom: solid 10px $section-three-background;
        }
    }
	
	
}





@media only screen and (min-width: 760px) {
	
	
	.section {
		.half, .btn.half, input.half, select.half, textarea.half {
			// margin: 0 auto 10px;
			@include horizontal-margin( auto );
			width: 50%;
		}
		
		
		
		
		// kill margin of child elements, to avoid unwanted sizing
		&, & > .corset, & > .container {
			@if $section-reset-child-spacing == true {
				& > * {
					&:first-child { margin-top: 0; }
					&:last-child { margin-bottom: 0; }
				}
			}
			@if $section-reset-row-child-spacing == true {
				& > *, & > .row, & > .row > *, & > .row > * > * {
					&:first-child { margin-top: 0; }
					&:last-child { margin-bottom: 0; }
				}
				& > .row:first-child > * { margin-top: 0; padding-top: 0; }
				& > .row:last-child > * { margin-bottom: 0; padding-bottom: 0; }
			}
			@if $section-reset-table-child-spacing == true {
				& > .layout-table > * > *, & > .inline_table > * > * {
					&:first-child { margin-top: 0; }
					&:last-child { margin-bottom: 0; }
				}
			}
		}
		
		
	}
	
}

@media only screen and (min-width: 1200px) {
	
	.section {
		.half, .btn.half, input.half, select.half, textarea.half {
			// margin: 0 auto 10px;
			@include horizontal-margin( auto );
			width: 40%;
		}
	}
	
}