search in user list

loading gif
lists can be closed and opened
number of trainings at diary

_css/default.css

@@ -12,6 +12,7 @@ body {
 	margin: 0px;
 	min-height: 100%;
 	background-color: #aaaaaa;
+	word-wrap: break-word;
 }
 
 #pageContainer {
@@ -40,6 +41,26 @@ main #main_content {
 
 }
 
+
+main #loading {
+
+	width: 100%;
+	min-height: 100vh;
+	background-color: #fff;
+	padding: 30px 10px 10px 10px;
+
+	webkit-box-shadow: 0px 0px 11px 4px rgba(0,0,0,0.75);
+	-moz-box-shadow: 0px 0px 11px 4px rgba(0,0,0,0.75);
+	box-shadow: 0px 0px 11px 4px rgba(0,0,0,0.75);
+
+    
+    z-index: 100;
+
+    background-image: url("/_image/spinner.gif");
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
 .italic {
 	font-style: italic;
 }
@@ -48,10 +69,51 @@ main #main_content {
 	font-weight: bold;
 }
 
+.danger {
+    background-color: #ffdddd;
+    border-left: 6px solid #002E4C;
+    padding: 6px 10px;
+	margin-top: 16px;
+	margin-bottom: 16px;
+	width: 100%;
+	font-weight: bold;
+}
+
+
 ul.topnav span {
 	color: #f2f2f2;
 }
 
+.user_filter {
+	width: 100%;
+	clear: both;
+	margin: 15px 0px;
+}
+
+.user_filter input {
+
+}
+
+.user_filter select, .user_filter input {
+	height: 40px;
+	width: 100%;
+	border-top: 1px solid #ccc;
+  	border-left: 1px solid #ccc;
+  	border-right: 1px solid #eee;
+  	border-bottom: 1px solid #eee;
+  	margin: 0px 0px 10px 0px;
+}
+
+.user_filter select:focus, .user_filter input:focus {
+	outline: 0;
+  	color: #333;
+   	border-color: rgba(41, 92, 161, 0.4);
+   	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
+    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
+    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
+  	outline: 0 none; 
+}
+
 .list .list_item .size20 {
 	font-size: 20px;
 }
@@ -151,7 +213,7 @@ td.create a {
 }
 
 .bigger_space {
-	margin: 10px 0px;
+	margin: 10px 0px !important;
 }
 
 .transp {
@@ -212,15 +274,49 @@ table.log tr.delete:hover {
 	background-color: #f02a2a;
 }
 
+.date_separator img {
+	width: 20px;
+	float: right;
+	margin-top: 4px;
+	margin-right: 10px;
+	border: 0;
+	cursor: pointer;
+}
+
+
+
+#main_content {
+	display: none;
+}
+
 @media (min-width: 680px) {
 
 
 
-main #main_content {
+main #main_content, main #loading {
 	width: 80%;
 	margin: 0px auto;
 }
 
+.user_filter {
+	width: 90%;	
+}
+
+.user_filter select {
+	width: 40%;
+	max-width: 200px;
+}
+
+.user_filter input {
+	width: 40%;
+	float: left;
+	margin: 0px 10px 0px 0px;
+}
+
+.danger {
+	width: 90%;
+}
+
 .list {
 	width: 40%;
 }

_css/default_view.css

@@ -6,6 +6,16 @@ main {
 	background-color: #002E4C;
 }
 
+.danger a:link {
+	color: #002E4C;
+	text-decoration: underline;
+}
+
+.danger a:visited {
+	color: #002E4C;
+	text-decoration: underline;
+}
+
 ul.topnav {
 	background-color: #FD9500;
 }