body {
/*	font-family: 'Ubuntu', 'Arial', sans-serif;*/
	font: 16px/1.5 Georgia, Verdana, Arial;
	margin: 0 auto;
/*  border: 10px solid lightgrey; */
	padding: 10px; 
/*	width: 600px; */
/*	max-width: 1280px; */
	color: #000;
    background-color: #bbb;
}

div.flash {
	color: black;
	background: #FFF9D7;
	border: 1px solid #E2C822;
	padding: 1em;
	margin: 1em 0;
}

a[href^="#error:"] {
	background: red;
	color: white;
}

a {
	-webkit-transition: all .2s ease-in 0s;
	   -moz-transition: all .2s ease-in 0s;
		 -o-transition: all .2s ease-in 0s;
			transition: all .2s ease-in 0s;
}

a:focus, a:hover {
    color: #eee;
}

.kill-margin-bottom {
	margin-bottom: 0 !important;
}



form th, form td {
	vertical-align: top;
	font-weight: normal;
}

form th {
	text-align: right;
}

form .required label {
	font-weight: bold;
}

form .error {
	color: #D00;
	font-weight: bold;
}

.err {
	background-color: #ff8080;
}

#events {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
/*    width: 100%;*/
    color: black;
	background-color: #d0d0d0;
}

#access {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
/*    width: 100%;*/
    color: black;
}

#events td, #events th, #access td, #access th {
    border: 1px solid #aaa;
    padding: 4px;
    padding-left: 1em;
    padding-right: 1em;
    color: black;
}

#events tr:nth-child(even) {
	background-color: #dadada;
}


tr:hover, #events tr:hover, #access tr:hover, #work_day tr:hover {
	background-color: #666;
}


#events th, #access th, #work_day th {
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: center;
    background-color: #4CAF50;
    color: black;
}

#events tr.selected {
	background-color: #ccf;
}

#access tr.accessin {
	background-color: #cfc;
}

#access tr.accessout {
	background-color: #fcc;
}

#work_day {
    border-collapse: collapse;
	border: 10px solid #ccc; 
	background-color: #cdc;
    color: black;
}

#work_day td {
    border: 1px solid #ddd;
    padding: 2px;
 /* padding-left: 1em;
    padding-right: 1em;*/
	text-align: center;
    color: black;
}

#work_day tr.weekend {
	background-color: #e0e0e0;
}

#work_day_data {
	table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
/*	max-width: 600px;*/
    color: black;
}

#work_day_data td, #work_day_data th {
	overflow: hidden;
    border: 1px solid #888;
    padding: 2px;
 /*   padding-left: 1em;
    padding-right: 1em;*/
	text-align: left;
    color: black;
}

#work_day_data td.accessin {
	background-color: #8f8;
}

#work_day_data td.accessout {
	background-color: #ccc;
}

#work_day_data td.accesserr {
	background-color: #f88;
}

#work_day_data td.accessevt {
	background-color: #faa;
}

ul.sidenav {
    list-style-type: none;
    margin: 0;
    padding: 0;
	width: 150px;
/*  width: 25%; */
/*	max-width: 1280px; */
    background-color: #ddd;
    position: fixed;
/*    height: 100%;*/
    overflow: auto;
	text-align: center;
}

ul.sidenav li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
 
ul.sidenav li a.active {
    background-color: #4CAF50;
    color: black;
}

ul.sidenav li a:hover:not(.active) {
    background-color: #666;
    color: white;
}

div.content {
    margin-left: 160px; /* max-width + padding */
/*    padding: 1px 16px; */
/*    height: 1000px; */
}

.footer {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 2px;
	background-color: #888;
	text-align: center;
/*	height:1em;   */
}

@media screen and (max-width: 900px) {
    ul.sidenav {
        width: 100%;
        height: auto;
        position: relative;
		max-width:none;
    }
    ul.sidenav li a {
        float: left;
        padding: 10px; 
    }
    div.content {margin-left: 0;}

	#work_day {
		border: 0; 	
	}
}

@media screen and (max-width: 400px) {
    ul.sidenav li a {
        text-align: center;
        float: none;
    }
	body {
		padding: 1px; 
	}

}