/* 
	_tpl/header.php <div class="page-wrapper"> 
*/

.page-wrapper {  
	width: 100%;
	max-width: 1200px;
	margin: 0 auto; 
}

header {	
	float: none;
	margin: 0;
	width: 100%;
	overflow: auto;
    padding: 0;		
}

.main {
	width: 100%;
	padding: 0;	
	/* clearing für die floatenden gleichlangen Spalten (.mainContent und .aside) */
    overflow: hidden;
}

aside {
    padding: 0.6em 20px;
}

footer {
    padding: 0;
    clear: left;
}

.mainContent {
    width: 100%;
	margin: 0;
	padding: 0px 1.5em;
}

aside {
    width: 100%;
}

/* ----------------------------------------------------------------------------- * 
 *                                Media Queries                                  *
 * ----------------------------------------------------------------------------- */
/*
breakpoints from Bootstrap:  scss/_variables.scss
 
grid-breakpoints
$grid-breakpoints: (
  xs: 0,		Styles für kleine Smartfons   
  sm: 576px, 	Styles für große Smartfons  
  md: 768px,  	Styles der Tabletversion 
  lg: 992px,  	Styles der Tabletversion 
  xl: 1200px, 	Styles für kleine Desktops   
  xxl: 1400px	Styles für große Desktops   
) !default;

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);
*/

/* Small devices (small phones, 576px and up) */
@media only screen and (min-width: 320px) and (max-width: 459px) {	
body {
    font-size: 0.938em; /* 15px */
    }
.page-wrapper {	}
}
/* Small devices (landscape phones, 576px and up) */
@media only screen and (min-width: 460px) and (max-width: 575px) {
body {
    font-size: 1em; /* 16px */
    }
.page-wrapper {	}
}
/* Medium devices (tablets, 576px and up) */
@media only screen and (min-width: 576px) and (max-width: 767px) {
body {
    font-size: 1.1em; /* 17.6px */
    }
.page-wrapper {
	width: 540px; 	  
	}
}
/* Medium devices (tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
body {
    font-size: 1.2em; /* 1.92px */
    }
.page-wrapper {
	width: 720px;  	  
	}
}
/* Large devices (desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
body {
    font-size: 1.2em; /* 1.92px */
    }
.page-wrapper {
	width: 960px;  
	margin-top: 16px; 
	}
.main {
	width: 75%;
	margin-left: 25%;
	border-left-style: groove;
	border-left-width: 4px;
	border-left-color: #9EAEC0;	
	} 
form#bottomFS {
	visibility: hidden;
/* display: hidden; */
}
}
/* Extra large devices (large desktops, 1200px and up) */
@media only screen and (min-width: 1200px)  and (max-width: 1399px) {
body {
    font-size: 1.25em; /* 20px */
    }
.page-wrapper {
	width: 1140px; 
	width: 960px; 	
	margin-top: 16px; 
	}
.main {
	width: 75%;
	margin-left: 0 25%;
    /* clearing für die floatenden gleichlangen Spalten (.mainContent und .aside) */
    overflow: hidden;
	border-left-style: groove;
	border-left-width: 4px;
	border-left-color: #9EAEC0;
	}
/*	
.mainContent {
        width: 70%;
        float: left;
	}
aside {
    width: 30%;
    margin-left: 70%;
	border-left-style: groove;
	border-left-width: 4px;
	border-left-color: #9EAEC0;	
    margin-bottom: -99999px !important;
    padding-bottom: 99999px !important;
	}
*/	
form#bottomFS {
	visibility: hidden;
/* display: hidden; */
}	
}
/* Extra large devices (extra large desktops, 1200px and up) */
@media only screen and (min-width: 1400px) {
body {
    font-size: 1.25em; /* 20px */
    }
.page-wrapper {
	width: 1320px; 
	width: 960px; 	
	margin-top: 16px; 
  }
.main {
	width: 75%;
	margin-left: 0 25%;
    /* clearing für die floatenden gleichlangen Spalten (.mainContent und .aside) */
    overflow: hidden;
	border-left-style: groove;
	border-left-width: 4px;
	border-left-color: #9EAEC0;
	} 
	
/*	
.mainContent {
        width: 70%;
        float: left;
	}
aside {
    width: 30%;
    margin-left: 70%;
	border-left-style: groove;
	border-left-width: 4px;
	border-left-color: #9EAEC0;	
    margin-bottom: -99999px !important;
    padding-bottom: 99999px !important;
	}
*/	
form#bottomFS {
	visibility: hidden;
/* display: hidden; */
}
}