moved warning and success messages to lower right corner of screen

added tabbed design for volume plugins (first draft)

pythonrewrite/www-data/cryptobox.css

@@ -71,10 +71,10 @@ body {
 	background-attachment: scroll;
 	background-repeat: no-repeat;
 	}
+
 #development {
 	font-weight: bold;
-}
-
+	}
 
 #content {
 	margin: 0;
@@ -182,46 +182,114 @@ body {
 	font-weight: bold;
 	}
 
+#volume_pane table, td {
+	padding: 0px;
+	margin: 0px;
+	}
+
+#volume_pane td.pane_top_left, td.pane_top_right {
+	height: 39px;
+	width: 10px;
+	}
+
+#volume_pane td.pane_bottom_left, td.pane_bottom_right {
+	height: 10px;
+	width: 10px;
+	}
+
+#volume_pane td.pane_top_left {
+	background-image: url(pane_top_left.png);
+	}
+
+#volume_pane td.pane_top_right {
+	background-image: url(pane_top_right.png);
+	}
+
+#volume_pane td.pane_bottom_left {
+	background-image: url(pane_bottom_left.png);
+	}
+
+#volume_pane td.pane_bottom_right {
+	background-image: url(pane_bottom_right.png);
+	}
+
+#volume_pane td.pane_left {
+	background-image: url(pane_side_left.png);
+	}
+
+#volume_pane td.pane_bottom {
+	background-image: url(pane_side_bottom.png);
+	}
+
+#volume_pane td.pane_right {
+	background-image: url(pane_side_right.png);
+	}
+
+#volume_pane td.pane_top {
+	background-image: url(pane_side_top.png);
+	}
+
+#volume_pane .volume_plugin_active {
+	background-image: url(register_active.png);
+	text-align: center;
+	vertical-align: middle;
+	width: 120px;
+	}
+
+#volume_pane .volume_plugin_passive {
+	background-image: url(register_passive.png);
+	text-align: center;
+	vertical-align: middle;
+	width: 120px;
+	}
+
+#words div.unavailable_action {
+	border: 1px dashed #808080;
+	text-align: center;
+	background-color: #f0f0f0;
+	padding: 10px;
+	margin: 20px;
+	font-size: 1.1em;
+	}
 
 /* -------=-=-=- warnings, errors and success messages-=-=-=-------- */
 
-#words div.warning,div.error,div.success {
-	margin-top: 20px;
-	margin-bottom: 20px;
-	padding-top: 10px;
-	padding-bottom: 15px;
-	color: #707070;
+div.warning,div.success {
+	width: 200px;
+	margin: 5px;
+	padding: 5px;
+	position: absolute;
+	float: right;
+	right: 5px;
+	bottom: 5px;
+	/* TODO: adapt warning color of text and border */
+	border: 3px dashed #808080;
+	/* RFC: maybe this needs some improvement [lars] */
+	outline-width: 2px;
+	outline-style: solid;
+	outline-color: white;
 	}
 
-#words .warning,.error,.success {
-	border: 1px dashed #808080;
-	text-align: center;
+div.warning p, div.success p{
 	color: #5e5e5e;
-	text-decoration: none;
 	font-weight: bold;
 	font-size: 0.9em;
 	padding-left: 40px;
 	padding-right: 40px;	
 	}
 
-#words .warning {
+.warning {
+	/* background-color: #f5e0e0;  light red color :) */
 	background-color: #f5f5f5; 
 	}
 	
-#words .error {
-	background-color: #f5f5f5; 
-	}
-	
-#words .success {
-/*	nice green color - but no one likes it right?
+.success {
+/*	RFC: nice green color - but no one likes it right? [unknown author]
 	background-color: #90EE90;	*/
+	background-color: #f5f5f5; 
 	}
 
-#words div.warning,div.error,div.success h1,h2 {
-	color: #808080;
-	}
-
-#words .warning,.error,.success a {
+.warning a,.success a {
 	color: #5e5e5e;
 	text-decoration: none;
 	font-weight: bold;