/*	Less Framework 4 with 16/24 type presets
	http://lessframework.com
	by Joni Korpi
	License: http://opensource.org/licenses/mit-license.php	*/



/*	Resets
	------	*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
	display: block;
}

a img {border: 0;}


/* Selection colours (easy to forget) */

::selection 	 	{background: rgb(255,255,158);}
::-moz-selection 	{background: rgb(255,255,158);}
img::selection 		{background: transparent;}
img::-moz-selection	{background: transparent;}
body {-webkit-tap-highlight-color: rgb(255,255,158);}



/*		Default Layout: 992px. 
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

*{margin: 0; padding: 0;}

.mobileLayoutCrew, .listLocationsMobile, .showCrewDetailsMobile, .guestListListMobile, .mobileMenue, .crewListMobile, .listUserMobile, .listRolesMobile, #newCrewMemberForm, #newAreaForm, .editProject, .copyProject, .newLocation, .addNewCrew, .guestListAddGuestForm, .toDoListAddForm, .newUserForm, .newRoleForm, .frontPagePrintCrewMarked {display:none;}
			
@font-face {font-family: OpenSansRegular; src: url(fonts/opensans/OpenSans-Regular.ttf); }
@font-face {font-family: OpenSansSemibold; src: url(fonts/opensans/OpenSans-Semibold.ttf); }
@font-face {font-family: OpenSansBold; src: url(fonts/opensans/OpenSans-Bold.ttf); }
@font-face {font-family: OpenSansExtraBold; src: url(fonts/opensans/OpenSans-ExtraBold.ttf); }

body{width: 100%;height: auto; font-family: OpenSansRegular;}
.button{cursor: pointer;}
.pointer{cursor: pointer;}

header{background: #231F20; color: #fff; height: 100px; width: 100%;}
	header #logo{float: left; height: 10px; width: auto; margin: 10px 0 0 25px;}
	header #logo img{width: auto; height: 80px; }
	header #heading{float:left; width: 70%; padding: 1% 0 0 0;margin: 0 0 0 50px;}	
	header #heading h1{font-family: OpenSansBold;}	
	header #accountinfo {width: 30px; float:right; margin: 30px;}
	header #accountinfo img{width: 100%;}

section{min-height: 500px;}	

	nav{background: yellow; height: 38px; /*float: left;*/ padding: 15px 0 0 30px;}	
	nav ul{list-style-type: none;}			
	nav ul li{display: inline;}
	nav ul li a{color: #231F20; text-decoration: none;padding:15px; }
	nav ul li a:hover{color: #231F20; text-decoration: none;background:#FFF200;/*border-bottom:3px solid #000;*/}				
	/*nav ul li a img{width: 25px; float: left;}*/			


	/* Formatierung von Projekte-Seite */
	article{margin: 20px; padding: 0 20px; width: auto; /*float:left;*/}
	article .frontPagePrint{display: none;}
	article .success{padding: 15px;background: #92D050;margin: 15px 0 15px 0;text-decoration: none;font-weight: bold;color: #fff;border-radius: 8px;text-transform: uppercase;display: block;width: 280px;text-align:center;}
	article .error{background: #F79F81; margin: 10px 0 0 0; padding: 10px; border: 1px solid #FE642E; border-radius: 8px; display: block; width: 18%; text-align: center; color: #fff;}
	article .warning{background: #F7D358; border: 1px solid #FFBF00; border-radius: 5px;width: 25%; padding: 10px; margin: 10px 10px 10px 0; text-align: center; color: #fff; display: block;}
	article h1{font-size: 120%; margin: 10px 0 10px 0;}
	article p{font-size: 100%;}
	article .projectFunctions{display: block; margin: 15px 10px 0 0; border: 1px solid #ddd; padding: 10px; border-radius: 8px;background: #eee; font-size: 80%; float: left;cursor: pointer;}
	
	/* Startseite Übersichts-Boxen */
	article .mainPageBoxesHello .welcome img{width: 100px;}
	article .mainPageBoxesHello .welcome .welcomeUser{font-family: OpenSansSemibold;}
	article .mainPageBoxesHello .welcome .smallDetail{font-size: 60%;}
	article .mainPageBoxes {display: grid; height:265px;float:left;}
	article .mainPageBoxes a img{width: 120px; height: auto; }
	article .mainPageBoxesHello, article .mainPageBoxes a{border: 1px solid #eee; border-radius: 8px; padding: 30px; margin: 0 10px 10px 0; float: left; width: 300px; text-align: center; text-decoration: none; color: #231F20;display:block;}
	/*article .mainPageBoxesHello {float:none;}*/
	article .mainPageBoxes a:hover{color: #231F20;background:#ddd;}
	article .mainPageBoxes a:hover img {filter: sepia(100%)}
	
	article .loginForm {margin: 0px auto; text-align: center; background: #eee;	padding: 50px 50px 50px 50px; width: 500px;	margin-top: 100px; border: 1px solid #eee; border-radius: 8px; font-size: 17px;	font-family: OpenSansRegular; text-transform: uppercase;}
	article .loginForm input {padding: 15px; border: 1px solid #ddd; margin: 5px 5px 5px 0;	width: 270px; border-radius: 5px;}
	article .loginForm .loginBttn {padding: 15px; width: 300px;	font-size: 15px; text-transform: uppercase;}
	
	/* Neues Projekt anlegen Button */	
	article .newProject input {min-width:280px;padding: 15px;border: 1px solid #ddd; margin: 5px 5px 5px 0; width: 50%; border-radius: 5px;}
	article .newProject select {min-width:280px;padding: 15px;border: 1px solid #ddd; margin: 5px 5px 5px 0; width: 19%; border-radius: 5px;}
	article .newProject label {width: 180px;display: inline-block;}
	article .newProject .printText {width:auto;}
	article .newProject .newProjectDateStart, article .newProject .newProjectDateEnd {width:200px;}
	article .newProject .newProjectDateEnd {margin:0 0 35px 0;}
	article .newProject #newProjectDescription {width:50%;resize:none;border-radius: 8px;border:1px solid #ddd;padding:15px;}
	article .newProject a {padding: 15px;background: #92D050;margin: 15px 0 0 10px;text-decoration: none;font-weight: bold;color: #fff;border-radius: 8px;text-transform: uppercase;display: block;width: 230px;float: left;}		
	article .newProject a:hover {background:#7FC535;}
	
	article .selectDate {display: grid; margin: 15px 0 0 10px; float: left;}	
	article .selectDate select, article .selectOrg select, 
	article .selectDate input, article .selectOrg input
	{padding: 17px; border-radius: 8px; border: 1px solid #ddd;}
	article .selectOrg {display: grid; margin: 15px 5px 0 10px; float: left;}
	
	/* Neues Cremitglied anlegen Button */		
	article .buttonContainer {margin: 0 0 50px 0;}
	article .buttonContainer a{cursor: pointer;}
	article .buttonContainer .newCrewmember a, article .newRole a {padding: 15px;background: #92D050;margin: 0;text-decoration: none;font-weight: bold;color: #fff;border-radius: 8px;text-transform: uppercase;display: block;width: 280px;}	
	article .buttonContainer .newOrganization{margin: 0 0 0 15px;}
	article .buttonContainer .newOrganization a {padding: 15px;background: #92D050;margin: 0;text-decoration: none;font-weight: bold;color: #fff;border-radius: 8px;text-transform: uppercase;display: block;width: 280px;}		
	article .buttonContainer .newCrewmember a:hover, article .newOrganization a:hover {background:#7FC535;}
	article .buttonContainer .newCrewmember, article .newOrganization {float: left;}
	
	/* Benutzer/Berechtigungen/Systemeinstellungen/Logs */
	article .newModule, article .newModuleForm{margin: 20px 0 0 0;}
	article .newModule select, article .newModule input, article .editSettings input {min-width:280px;padding: 15px;border: 1px solid #ddd; margin: 5px 5px 5px 0; width: 50%; border-radius: 5px;}
	article .listUserDesktop, article .listRolesDesktop, article .moduleDetails, article .listSettings, article .editSettings{margin: 20px 0 0 0; padding: 10px; border: 1px solid #eee; border-radius: 5px; width: 60%;min-width:600px;}
		
		/* Logtabelle */
		article .editSettings .logTable td {padding: 3px 5px;}
		article .editSettings .logTable tr {background:#eee;}
	
	/* Impressum */
	article .impressum {margin: 20px 0 0 0; padding: 20px; border: 1px solid #eee; border-radius: 5px; width: 50%;}
	
	/* Neues Bereich anlegen Button */		
	article .newArea a {padding: 15px;background: #92D050;margin: 0;text-decoration: none;font-weight: bold;color: #fff;border-radius: 8px;text-transform: uppercase;display: block;width: 230px;}		
	article .newArea a:hover {background:#7FC535;}
	
	/* Projekt-Übersicht */
	article .projectsList {width: 100%; margin:25px 0 30px 0;}
	article .projectsList .projectBox a {text-decoration:none;color:black;display:block;background: #eee; border: 1px solid #eee; border-radius: 8px; margin: 10px; padding: 10px 10px 10px 30px; width: 30%;float:left;}
	article .projectsList .projectBox a:hover{background:#ddd;}
	article .projectsList .projectBox h1{font-size: 120%;margin: 0 0 10px 0;}
	article .projectsList .projectBox h2{font-size: 100%;margin: 10px 0 0 0;font-family: OpenSansRegular;}
	
	article .projectsList .projectBox .smallInfoProjects{font-size:80%; padding: 10px 0 0 0;}
	article .projectsList .projectBox img{width: 30px; float: left;}
	article .projectsList .projectBox .infoLocations{font-size:100%; padding: 10px 0 0 0; font-family: OpenSansSemibold; margin: 0;}
	article .projectsList .projectBox .projectLock {float: left; padding: 40px 0 0 0;}
	article .projectsList .projectBox .projectInfoInner {margin: 0 0 0 50px;}
	article .projectsList .locationOuter{border: 1px solid #eee; border-radius: 8px;background: #eee;width: 100%;margin: 20px 0 0 0; padding: 0 0 0px 0;}	
	article .projectsList .locationOuter .locationDay{font-family: OpenSansSemibold; margin: 0 0 0 20px; padding: 10px 0; font-size: 110%;}	
	article .projectsList .locationContainer{display: block; margin: 0 0 10px 30px;}	
	article .projectsList .crewFunction{float: left; display: block;}	
	article .projectsList .locationFunction{float: left; display: block;}	
	article .projectsList .deleteCrewIcon img{width: 20px; height: auto; }	
	article .projectsList .statusCrewIcon img{width: 18px; height: auto; margin: 0 0 0 4px;}	
	article .projectsList .timeCrewIcon img{width: 20px; height: auto; margin: 0 0 0 3px;}	
	article .projectsList .organizationIcon img{width: 20px; height: auto; margin: 0 5px 0 13px;}	
	article .projectsList .crewContainer {margin: 0 0 10px 85px; display: block;}		
	article .projectsList .crewContainerHideFromPrint .crewContainerWarning{background: #F7D358; padding: 3px; border-radius: 8px; border: 1px solid #FFBF00; color: white;}

	/* Markierung der Person für Ausdruck */	
	article .crewContainerPrintMarked{margin: 5px 0 5px 0; display:block;}
	article .crewMarked{background: #F7D358; padding: 3px; margin: 5px 0 0 0; border-radius: 8px; border: 1px solid #FFBF00; color: white;}		
	
	
	article .projectsList .projectHeader {width: 81%; height: 220px;}		
	article .projectsList .projectHeader .projectDate {display: grid; margin: 10px 0 0 0; border: 1px solid #eee; border-radius: 8px; padding: 10px; float: left;}		
	article .projectsList .projectHeader .projectAmountCrew {display: grid; margin: 10px 5px 0 5px; border: 1px solid #eee; border-radius: 8px; padding: 10px;  float: left;}		
	article .projectsList .projectHeader .descriptionShort {display: grid; margin: 10px 5px 0 5px; border: 1px solid #eee; border-radius: 8px; padding: 10px; float: left;}		
	article .projectsList .projectHeader .printButton {display: grid; margin: 10px 5px 0 5px; float: left; padding: 10px;}		
	article .projectsList .projectHeader .printButton img {width: 30px; }		
	article .projectsList .projectHeader .printButton .printButtonMarked{width: 47px;}		
	
	
	/* ToolBar */
	article .projectsList .projectHeader .toolBar { margin: 10px 5px 0 0; border: 1px solid #eee; border-radius: 8px; padding: 10px;  float: left;}	
	article .projectsList .projectHeader .toolBar .selectDate {display: grid; margin: 15px 5px 0 0; float: left;}
	article .projectsList .projectHeader .toolBar .selectDate select, 
	article .projectsList .projectHeader .toolBar .selectDate input
	{padding: 10px; border-radius: 8px; border: 1px solid #ddd;background: #eee;}	
	
	/* Projektlocations -areas bearbeiten */	
	article .editAreaIcon{width: 20px; margin: 0 5px 0 0; cursor: pointer;}
	article .editArea {display: none; margin: 10px 0; padding: 5px; border: 1px solid #fff; border-radius: 8px;width: 80%;}
	article .editArea input, article .editArea select{padding: 5px; margin: 0 10px 0 0; border: 1px solid #ddd; border-radius: 5px;}
	article .editArea label {margin: 0 5px 0 0;}
	
	article .projectsList .projectHeader .descriptionLong {display: block; margin: 10px 5px 0 5px; border: 1px solid #eee; border-radius: 8px; padding: 10px; }		
	article .projectsList .projectDescriptionOuter {display: block; margin: 10px 0 0 0; border: 1px solid #eee; border-radius: 8px; padding: 0; width: 80%;}

	article .projectsList .projectDescriptionOuter .editDescriptionHeading {display: block; background: #eee; padding: 10px; border: 1px solid #eee; border-radius: 8px 8px 0 0; font-family: OpenSansSemibold;}	
	article .projectsList .projectDescriptionOuter .editDescriptionHeading img {width: 25px;}	
	article .projectsList .projectDescriptionOuter .descriptionLong {display: block; padding: 10px;}	
	
	article .projectsList .shiftCrew {font-size: 80%;}		
	
	/* Projekt bearbeiten */
	.buttonPlanbar{display: block; margin: 10px 0; padding: 10px; background: #eee; border: 1px solid #ddd; border-radius: 8px; width: 40%; }
	.buttonPlanbar:hover{cursor: pointer;}
	
	
	/* Funktionen in Projekt - Details bearbeiten, Inhalte kopieren, Areas zuweisen, Personen zuweisen */
	article .projectViewHead .headingProjectBoxes
	{font-family: OpenSansSemibold;margin: 0 0 15px 0; display: block;}
	
	article .projectViewHead .detailBox
	{border: 1px solid #ddd;background: #ddd; border-radius: 8px; padding: 15px; margin: 5px; display: inline-block;}
	
	article .projectViewHead .editProject,
	article .projectViewHead .copyProject,
	article .projectViewHead .newLocation,
	article .projectViewHead .addNewCrew	
	{border-radius: 8px; margin: 5px 0;padding: 10px; background: #eee;}
	
	article .projectViewHead .editProject .projectDetailsForm, article .projectViewHead .copyProject .copyProjectForm, article .projectViewHead .newLocation .newLocationForm, article .projectViewHead .addNewCrew .addNewCrewForm
	{display: flex;flex-flow: row wrap; align-items: center;}
	article .projectViewHead .editProject label, article .projectViewHead .copyProject label, article .projectViewHead .newLocation label, article .projectViewHead .addNewCrew label
	{margin: 5px 10px 5px 10px;}
	article .projectViewHead .editProject input, article .projectViewHead .copyProject input, article .projectViewHead .newLocation input, article .projectViewHead .addNewCrew input 
	{vertical-align: middle; margin: 5px 10px 5px 10px; padding: 10px; background-color: #fff; border: 1px solid #ddd;border-radius: 8px;}
	article .projectViewHead .editProject select, article .projectViewHead .copyProject select, article .projectViewHead .newLocation select, article .projectViewHead .addNewCrew select
	{vertical-align: middle; margin: 5px 10px 5px 0; padding: 10px; background-color: #fff; border: 1px solid #ddd; border-radius: 8px;}
	article .projectViewHead #changeShift{display: none;}
	

	/* Auflistung restliches Projekt */
		
	article .projectViewHead .editProject textarea {resize:none;}
	article .projectViewHead .copyProject .warning{background: #F7D358; border: 1px solid #FFBF00; border-radius: 5px;width: 90%; padding: 10px; margin: 10px 0 0 0; text-align: center; color: #fff; display: block;}
	article .projectViewHead .editProject .warning{background: #F7D358; border: 1px solid #FFBF00; border-radius: 5px;width: 85%; padding: 10px; margin: 50px 10px 10px 0; text-align: center; color: #fff; display: block;}
	
	article .projectsList .locationBox .infoLocations{font-size:100%; padding: 10px 0 0 0; font-family: OpenSansSemibold; margin: 0;}	
	article .projectsList .locationBox {margin: 10px 0 10px 20px; padding: 10px;width: 96%; border: 1px solid #fff; border-radius: 8px;}
	article .projectsList .subInfoLocations {font-family: OpenSansRegular; padding: 0 0 10px 0; font-size: 80%;}
	
	article .projectsList .locationBox .crew{width: 100%;}
	article .projectsList .locationBox .crew .crewInner{float: left; width: 350px;}
	
	article .projectsList .locationBox .crewInfo{padding: 0 0 0 25px;}
	
	/* Bereiche anzeigen/bearbeiten */
	article .listLocationsDesktop{margin: 20px 0 0 0; padding: 10px; border: 1px solid #eee; border-radius: 5px; width: 50%;}
	
	/* Crewmitglieder anzeigen/bearbeiten */
	article .listCrew{margin: 20px 0 0 0; padding: 10px; border: 1px solid #eee; border-radius: 5px; width: 80%;}
	article .listCrew .clipboard{cursor: pointer;}
	article .searchCrew input{padding: 10px; margin: 0 5px 0 0; border: 1px solid #ddd; border-radius: 5px;}
	article .searchCrew .inputField{width: 200px;}
	
	/* Input Felder Formatierung */
	article .addNewLocation{background: #eee; margin: 10px 0 10px 0; padding: 10px; display: grid; width: 25%; border: 1px solid #eee; border-radius: 8px;min-width:315px;}
	article .newUserForm, article .editUser, article .editLocation, article .newRoleForm{background: #eee; margin: 20px 0 20px 0; padding: 10px; /*display: grid;*/ width: 25%; border: 1px solid #eee; border-radius: 8px;min-width:315px;}
	article .editUser form input,  article .editUser form select,article .newUserForm form input,  article .newUserForm form select, article .newRoleForm form input,  article .newRoleForm form select, article .addNewLocation form input, article .editLocation form input {min-width:280px;padding: 15px;border: 1px solid #ddd; margin: 5px 5px 5px 0; width: 90%; border-radius: 5px;}
	article .editUser form select, article .newUserForm form select, article .editLocation form select, article .editLocation form select {width:98%;}
	article .newUserForm form input .submit, article .editUser form input .submit, article .addNewLocation form input .submit {minwidth:270px;width:98%; cursor:pointer;} 
	
	
	/* Einstellungen - Passwort zurücksetzen (Admin) */
	article .userDetails input,
	article .userDetails button
	{min-width:280px;padding: 15px;border: 1px solid #ddd; margin: 5px 5px 5px 0; width: 90%; border-radius: 5px;}
	
	article .userListHead th, article .settingsListHead th{padding: 5px; text-align: left;}
	article .userDetails, article .moduleDetails{margin: 20px 0 0 0; padding: 10px; border: 1px solid #eee; border-radius: 5px; width: 40%;}
	article .userList td, article .settingsList td {padding: 5px; background: #eee;}
	article .userList img, article .settingsList img{width: 20px; height: auto;}
	article .userDetails img{width: 20px; height: auto; padding: 5px 0 0 0;}
	
	/* Einstellungen - Übersichtsseite */
	article .settingsItem {float:left; margin: 0 0 50px 0;}
	article .settingsItem a {border: 1px solid #eee; border-radius: 8px; padding: 30px; margin: 0 10px 10px 0; width: 300px; text-align: center; text-decoration: none; color: #231F20;display:block;}
	article .settingsItem a:hover{color: #231F20;background:#ddd;}
	
	/* Einstellungen User persönlich */ 
	article .personalSettingBody{margin: 20px 0 0 0; padding: 10px; border: 1px solid #eee; border-radius: 5px; width: 30%;background:#eee;min-width: 315px;}
	article .personalSettingBody input, article .personalSettingBody button {min-width: 280px;padding: 15px;border: 1px solid #ddd;margin: 5px 5px 5px 0;width: 90%;border-radius: 5px;}


	/* Einstellungen - Unterseite - Neuen Benutzer anlegen */
	article .newUser a {padding: 15px;background: #92D050;margin:0 0 15px 0;text-decoration: none;font-weight: bold;color: #fff;border-radius: 8px;text-transform: uppercase;display: block;width: 250px;}		
	article .newUser a:hover {background:#7FC535;}
	
	
	
	/* crewListLocation - zweite Liste, in der die User (Feuerwehrmitglieder) alphabethisch aufgelistet werden, und angezeigt wird, an welchem Tag sie wo arbeiten */	
	article .crewListLocation .crewListLocationHead .searchCrew {float: left; margin: 0 0 0 10px;}
	article .crewListLocation .crewListLocationHead .subnavigation a {float: left; margin: 0 10px 0 0;}
	article .crewListLocation .crewListLocationHead .subnavigation a img{width: 30px;}
	article .crewListLocation .crewListLocationHead .infoCrewListLocation {background: #F7D358; border: 1px solid #FFBF00; border-radius: 5px;width: 40%; padding: 10px; margin: 10px 10px 10px 0; text-align: center; color: #fff;}
	article .crewListLocation .crewListLocationHead .crewSelectOrganization {float:left;}
	article .crewListLocation .crewListLocationHead .crewSelectOrganization select {padding: 10px; margin: 0 0 0 10px; border: 1px solid #ddd; border-radius: 8px;}
	article .crewShowAll {margin: 0 0 0 10px;}
	article .crewListLocation .crewListLocationInner {margin: 20px 0 0 0; padding: 10px; border: 1px solid #eee; border-radius: 5px; width: 90%;}
	article .crewListLocation .crewListLocationInner table tr th, article .crewListLocation .crewListLocationInner table tr td{padding: 15px;}	
	
	/* guestList - Gästeliste */
	article .guestList {margin: 20px 0 0 0; padding: 10px; border: 1px solid #eee; border-radius: 5px; width: 90%;}
	article .guestList .guestListHead .subnavigation a {float: left; margin: 0 10px 0 0;}
	article .guestList .guestListHead .subnavigation a img{width: 30px;}
	article .guestList .guestListHead .subnavigation img{width: 30px;}
	article .guestList .guestListHead h2{padding: 15px 0 0 0;}
	article .guestList .guestListHead .guestListProjectInfo{padding: 0 0 20px 0;}
	article .guestList .guestListListDesktop table img{width: 20px;}
	article .guestList .guestListListDesktop table tr th, article .guestList .guestListListDesktop table tr td {padding: 5px; background: #eee;}
	article .buttonContainer {margin: 10px 0 0 0;}	
	article .buttonContainer .newGuest a {padding: 15px;background: #92D050;margin: 0;text-decoration: none;font-weight: bold;color: #fff;border-radius: 8px;text-transform: uppercase;display: block;width: 280px; }	
	
	/* ToDo - Liste */	
	article .newToDo {margin: 10px 0 10px 0; background: #eee; border-radius: 8px; width: 25%; padding: 10px;}	
	article .newToDo label {width: 130px; display: inline-block;}
	article .newToDo input {padding: 10px; width: 90%;margin: 5px 0; border-radius: 5px; border: 1px solid #ddd;}
	article .toDoList .toDoListHeadInfo {margin: 20px 0 0 0;}
	article .toDoList {margin: 20px 0 0 0; padding: 10px; border: 1px solid #eee; border-radius: 5px; width: 90%;}
	article .toDoList .toDoListHead .subnavigation a {float: left; margin: 0 10px 0 0;}
	article .toDoList .toDoListHead .subnavigation a img{width: 30px;}
	article .toDoList .toDoListList h2{padding: 15px 0;}
	article .toDoList .toDoListHeadInfo .toDoListProjectInfo{padding: 0 0 20px 0;}
	article .toDoList .toDoListList table a img{width: 20px;}
	article .toDoList .toDoListList table tr th, article .toDoList .toDoListList table tr td {padding: 5px; background: #eee;}
	article .toDoList .toDoListList img{width: 20px;}
	
	
	/* Liste für Anzeige der Bereiche/Zeiten über den Token */
	article .crewInfoHead{margin: 10px 0; display: block;}
	article .chooseYearCrew{margin: 10px 0;}
	article .chooseYearCrew select{padding: 10px; border: 1px solid #ddd; border-radius: 8px;}
	article .showCrewDetails tr td, article .showCrewDetails tr th{padding: 20px;}
	article .showCrewDetails tr:nth-child(odd) {background-color: #eee;} 
	
	
	
footer{text-align: center; padding: 10px;font-size: 70%;clear:both;}

.clear{clear:both;}



/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
	body {
		width: 100%;
		/*padding: 48px 28px 60px;*/
	}
	/* header #logo img{display: none;} */
	header #heading h1 {text-align: center; padding: 20px 0 0 0;}
	article .loginForm{width: auto !important;}
}



/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 767px) {
	.frontPagePrint, .smallInfoProjects, .desktopLayoutCrew, .listLocationsDesktop, .showCrewDetailsDesktop, .guestListListDesktop, #accountinfo, nav, .crewListDesktop, .infoCrewListLocation, .listUserDesktop, .listRolesDesktop, .onlyOnDesktop, .editProject, .copyProject, .newLocation, .addNewCrew{display:none;}
	.printButtonCrewMarked {display: none !important;}
	.mobileLayoutCrew, .listLocationsMobile, .showCrewDetailsMobile, .guestListListMobile, .mobileMenue, .crewListMobile, .listUserMobile, .listRolesMobile, .searchCrew {display:block;}
	.onlyMobile {float:none !important;}
	body {
		width: 100%;
		/*padding: 48px 34px 60px;*/
	}
	header .mobileMenue {width: 30px; float:right; margin: 30px;}
	header .mobileMenue img{width: 100%;}
	
	article .loginForm{width: auto !important;}
	
	/* header #logo img{display: none;} */
	header #heading {margin: 0;}
	header #heading h1 {text-align: center; padding: 20px 0 0 0;}
	nav {height: auto; padding: 0;}
	nav ul li {text-align: center;}
	nav ul li a {display: block;border-bottom: 2px solid #FFF200;padding:20px;}
	nav ul li a:hover {border-bottom:2px solid #FFF200;}
	
	.warning, .error, .editUser, .impressum {width: auto !important;}
	
	article .projectBox a{width: auto !important; float: none !important;}
	article .article .projectsList, 
	article .projectsList .projectHeader, 
	article .projectsList .locationOuter, 
	article .projectsList .projectDescriptionOuter
	{width: auto; height: auto;}
		
	/* Funktionen in Projekt - Details bearbeiten, Inhalte kopieren, Areas zuweisen, Personen zuweisen */
	article .projectViewHead .detailBox{width: 90%; margin: 5px 0; display:block;}
		
	article .projectViewHead .editProject input, 
	article .projectViewHead .copyProject input, 
	article .projectViewHead .newLocation input, 
	article .projectViewHead .addNewCrew input, 
	article .projectViewHead .editProject select, 
	article .projectViewHead .copyProject select, 
	article .projectViewHead .newLocation select, 
	article .projectViewHead .addNewCrew select, 
	article .projectViewHead .editProject label, 
	article .projectViewHead .copyProject label, 
	article .projectViewHead .newLocation label, 
	article .projectViewHead .addNewCrew label
	{display: block; width: 90%; margin: 0;}
	
	article .projectViewHead #changeShift{width: 90%;}
	
	article .projectsList .projectHeader .projectDate,
	article .projectsList .projectHeader .descriptionShort{margin: 10px 10px 0 0;width: 95%;}
	article .projectsList .projectHeader .projectAmountCrew{margin: 10px 5px 0 0;width: 95%;}
	
	
	article .toolbarIcons{display: block !important; float: none;}
	article .projectsList .projectHeader .toolBar {width: 95%;}
	article .projectsList .projectHeader .toolBar .selectDate{float: none;}
	article .projectsList .projectHeader .toolBar .selectDate select{width: 90%;}	
	
	/* Projektarea -location bearbeiten */
	article .editArea{width: auto;}
	article .editArea input, article .editArea select{width: 100%;}
	article .editAreaIcon{width: 20px; margin: 0 5px 0 0; cursor: pointer;}
	
	article .projectsList .locationOuter .locationDay{margin: 0 0 0 10px;}
	article .projectsList .locationBox{width: auto; margin: 10px 5px;}
	
	article .projectsList .locationContainer{margin: 0 0 10px 0;}
	
	article {margin: 10px 0 0 0;}
	article .listCrew {width: auto;}
	article .listCrew .crewHeadingInfo{margin: 10px 0 10px 5px; display:block;}
	article .listCrew .mobileLayoutCrew .userList h1{font-size: 100%;}
	article .listCrew .mobileLayoutCrew .userList {background: #eee; padding: 5px 5px 5px 10px; margin: 5px 0 5px 0;}
	article .listCrew .mobileLayoutCrew .userList img{width: 30px; margin: 0 5px;}
	article .listCrew .mobileLayoutCrew .userList .crewSubInfo{display: block; font-size: 90%; margin: 0 0 20px 0;}
	
	
	/* Zweite Liste zum Anzeigen der Personen in alphabethischer Reihenfolge */
	article .crewListLocation .crewListLocationHead .print{}
	article .crewListLocation .crewListLocationHead .crewSelectOrganization{margin: 0 0 0 0;float: none;}
	article .crewListLocation .crewListLocationHead .searchCrew{margin: 10px 0 10px 0;float: none;}
	article .crewListLocation .crewListLocationHead .searchCrew .inputField{width: 60%;}
	article .crewListLocation .crewListLocationHead .infoCrewListLocation{width: auto;}
	article .crewListLocation h1{margin: 0; font-size: 100%;}
	article .crewListLocation p{margin: 0; font-size: 90%;}	
	article .crewListLocation .crewMembershipOrganization{display: block;}
	article .crewListLocation .crewListLocationInner{margin: 20px 0 0 0; padding: 0; border: none; width: auto;}
	article .crewListMobile .userList{margin: 0 0 20px 0; padding: 5px; display: block; background: #eee; border: 1px solid #eee; border-radius: 8px;}
	article .crewListMobile .userList .dayContainer{margin: 10px 0;}
	article .crewListMobile .userList .dayContainer .success{width: auto; font-size: 90%; font-weight: normal; margin: 5px 0;}
	article .crewListMobile .userList .dayContainer .crewListDate{font-family: OpenSansSemiBold;}
	
	/* ToDo Liste */
	article .toDoList{width: 95%;}
	article .newToDo{width: 90%;}
	
	/* Areas */
	article .addNewLocation, article .editLocation {width: auto !important;}
	article .listLocationsMobile{border: 1px solid #eee; border-radius: 8px; margin: 5px 0 0 0;}
	article .listLocationsMobile label{margin: 20px 10px 0px 10px; display: block;}
	article .listLocationsMobile .listArea{padding: 10px;}
	article .listLocationsMobile .listArea .areaList h1{font-size: 100%;}
	article .listLocationsMobile .areaList {background: #eee; padding: 5px 5px 5px 10px; margin: 5px 0 5px 0;}
	article .listLocationsMobile .areaList .areaSubInfo {display: block;font-size: 90%; margin: 0 0 20px 0;}
	article .listLocationsMobile .areaList img{width: 30px; margin: 0 5px;}
	
	article .personalSettingBody{width: auto;}
	
	/* Systemeinstellungen */
	article .editSettings{width:95%;}
	article .settingsItem{float: none; margin: 0;}
	article .settingsItem a{width: auto; padding: 10px;}
	
	/* Systemeinstellungen - Benutzer */
	article .listUserMobile .listUserMobileUsers .userList {display: block;background: #eee; border: 1px solid #eee; border-radius: 8px;margin: 5px 0;padding: 5px;}
	article .listUserMobile .listUserMobileUsers .userList h1{font-size: 100%;}
	article .listUserMobile .listUserMobileUsers .userList .subInfoUser{display: block; font-size: 90%;}
	article .listUserMobile .listUserMobileUsers .userList .subInfoUserButtons {display: block; margin: 10px 0;}
	article .listUserMobile .listUserMobileUsers .userList .subInfoUserButtons img{width: 30px; margin: 0 20px 0 0;}
	article .userDetails, article .moduleDetails{width: auto;}
	
	/* Systemeinstellungen - Rollen */
	article .listRolesMobile .listRole {display: block; background: #eee; border: 1px solid #eee; border-radius: 8px;margin: 5px 0;padding: 5px;}
	article .listRolesMobile .listRole h1{font-size: 100%;}
	article .listRolesMobile .listRole .subInfoRole {display: block; font-size: 90%;}
	article .listRolesMobile .listRole .subInfoRoleButtons {display: block;}
	article .listRolesMobile .listRole .subInfoRoleButtons img {width: 30px; margin: 10px 20px 0 0;}
	
	/* Systemeinstellungen - Logs */
	
	
	/* Gästeliste */
	article .guestList{width: auto;}	
	article .guestList .subnavigation .print{display: none;}	
	article .guestList .guestListListMobile .listGuest {display: block;background: #eee; border: 1px solid #eee; border-radius: 8px;margin: 10px 0; padding: 10px;}	
	article .guestList .guestListListMobile .editGuestList {display: block;}
	article .guestList .guestListListMobile h1{margin: 0; font-size: 100%;}
	article .guestList .guestListListMobile .listGuestDescription {display: block; margin: 10px 0;}
	article .guestList .guestListListMobile .listGuestParticipants {display: block;}
	article .guestList .guestListListMobile .editListGuest {display: block; margin: 15px 0 0 0;}
	article .guestList .guestListListMobile .editListGuest img{width: 30px; margin: 0 20px 0 0;}
	
	article .guestList .guestListListMobile .listGuestGreen {display: block;background: #92D050; border: 1px solid #eee; border-radius: 8px;margin: 10px 0; padding: 10px; color: #fff;}

	
	/* Seite für Externen Zugriff für Crewmitglieder über Token */
	article .showCrewDetailsMobile .showCrewDivision{background: #eee; border: 1px solid #eee; border-radius: 8px;margin: 10px 0; padding: 10px;}
	article .showCrewDetailsMobile .showCrewDivision h1{margin: 0; font-size: 100%;}
	article .showCrewDetailsMobile .showCrewDivision .showCrewTime{display: block; margin: 0 0 10px 0; font-size: 90%;}
	article .showCrewDetailsMobile .showCrewDivision .showCrewArea{display: block; font-family: OpenSansSemiBold;}
	article .showCrewDetailsMobile .showCrewDivision .showCrewAreaLeader{display: block;font-size: 90%;}
	article .showCrewDetailsMobile .showCrewDivision .showCrewProject{display: block;font-size: 90%;}
	article .showCrewDetailsMobile .showCrewDivision .showCrewOrganizer{display: block;font-size: 90%; margin: 10px 0 0 0;}
}



/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	body {
		width: 100%;
		/*padding: 36px 22px 48px;*/
	}
	article .loginForm{width: auto !important;}	

}


/*	Retina media query.
	Overrides styles for devices with a 
	device-pixel-ratio of 2+, such as iPhone 4.
-----------------------------------------------    */

@media 
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min-device-pixel-ratio: 2) {
	
	body {
	
	}
	article .loginForm{width: auto !important;}
}