added some images with different resolutions for a new design draft

new design draft for volume properties

pythonrewrite/www-data/cryptobox.css

@@ -1,20 +1,27 @@
 body {
-	background-image: url(backg.gif);
-	background-position: top center;
-	background-attachment: fixed;
-	background-repeat: no-repeat;
 	text-align: center;
 	margin: 0;
 	padding: 0;
 	font-family: verdana, lucida, arial, helvetica, sans-serif;
 	}
 
-#main {
+a {
+	text-decoration: none;
+	}
+
+
+div#main_menu {
+	width: 130px;
+	}
+
+div#main {
 	background: none;
-	width: 600px;
-	padding: 0px;
-	margin-left: auto;
+	padding: 20px;
+	margin-left: 140px;
+	/* RFC: 'auto' is not a valid value, or? [l] */
 	margin-right: auto;
+	/* RFC: should we restrict the width? [l] */
+	max-width: 700px;
 	}
 
 #main h1, h2, h3 {
@@ -39,71 +46,16 @@ body {
 	font-size: 1.2em;
 	}
 
-#head {
-	width: 600px;
-	height: 120px;
-	margin: 0;
-	padding: 0;
-	background-image: url(antlogo100px.png);
-	background-position: top right;
-	background-attachment: scroll;
-	background-repeat: no-repeat;
+div#head {
+	height: 130px;
 	}
 
-#head_green {
-	width: 600px;
-	height: 120px;
-	margin: 0;
-	padding: 0;
-	background-image: url(antlogo100px_green.png);
-	background-position: top right;
-	background-attachment: scroll;
-	background-repeat: no-repeat;
+div#head table {
+	width:100%;
 	}
 
-#head_red {
-	width: 600px;
-	height: 120px;
-	margin: 0;
-	padding: 0;
-	background-image: url(antlogo100px_red.png);
-	background-position: top right;
-	background-attachment: scroll;
-	background-repeat: no-repeat;
-	}
-
-#development {
-	font-weight: bold;
-	}
-
-#content {
-	margin: 0;
-	padding: 0;
-	width: 600px;
-	font-size: 0.9em;
-	min-height: 300px;
-	}
-
-#content a {
-	line-height: 1.2em;
-	color: black;
-	text-decoration: none;
-	font-weight: bold;
-	font-size: 0.9em;
-	}
-
-TODOa:hover {
-	text-decoration: underline;
-	}
-
-#content a:visited {
-	color: #acacac;
-	}
-
-#content p {
-	font-size: 0.9em;
-	padding: 0 1em;
-	text-align: justify;
+div#head img {
+	vertical-align: middle;
 	}
 
 #menu {
@@ -127,7 +79,10 @@ TODOa:hover {
 	}
 
 #words {
-	width: 565px;
+	background-image: url(background_frame_top.png);
+	background-position: top left;
+	background-repeat: no-repeat;
+	min-height: 320px;
 	padding: 1.1em 0em 1.1em 1.1em;
 	margin-top: 0;
 	}
@@ -155,17 +110,20 @@ TODOa:hover {
 	list-style-image: url(list.gif);
 	}
 
-#footer {
+div#footer {
 	clear: both;
 	text-align: center;
-	border-top: 1px solid #5e5e5e;
+	/* border-top: 1px solid #5e5e5e;
 	border-bottom: 1px solid #5e5e5e;
-	background-color: #ACE149;
+	background-color: #ACE149; */
+	background-image: url(footer_line.png);
+	background-repeat: no-repeat;
+	background-position: top center;
 	font-size: 0.8em;
 	color: #5e5e5e;
 	}
 
-#footer a:link, #footer a:visited {
+div#footer a:link, #footer a:visited {
 	color: #5e5e5e;
 	margin: 5px;
 	text-decoration: none;
@@ -173,26 +131,22 @@ TODOa:hover {
 	padding: 4px;
 	}
 
-#footer a:hover {
+div#footer a:hover {
 	text-decoration: underline;
 	}
 
-#confirmtext span {
-	color: red;
-	font-weight: bold;
-	}
 
-#volume_pane table, td {
+#volume_pane table, #volume_pane td {
 	padding: 0px;
 	margin: 0px;
 	}
 
-#volume_pane td.pane_top_left, td.pane_top_right {
+#volume_pane td.pane_top_left, #volume_pane td.pane_top_right {
 	height: 39px;
 	width: 10px;
 	}
 
-#volume_pane td.pane_bottom_left, td.pane_bottom_right {
+#volume_pane td.pane_bottom_left, #volume_pane td.pane_bottom_right {
 	height: 10px;
 	width: 10px;
 	}
@@ -252,55 +206,35 @@ TODOa:hover {
 	font-size: 1.1em;
 	}
 
-/* -------=-=-=- warnings, errors and success messages-=-=-=-------- */
+/* -------=-=-=- all messages -=-=-=-------- */
 
-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;
-	}
-
-div.warning p, div.success p{
+#words div.message {
+	text-align: left;
+	margin: 20px; 
+	padding: 0px;
+	border: 1px solid #bbb;
 	color: #5e5e5e;
-	font-weight: bold;
 	font-size: 0.9em;
-	padding-left: 40px;
-	padding-right: 40px;	
 	}
 
-.warning {
-	/* background-color: #f5e0e0;  light red color :) */
-	background-color: #f5f5f5; 
+#words div.message h1 {
+	font-size: 1.5em;
+	padding: 0px;
 	}
 
-.success {
-/*	RFC: nice green color - but no one likes it right? [unknown author]
-	background-color: #90EE90;	*/
-	background-color: #f5f5f5; 
+#words div.message img.message_symbol {
+	width: 32px;
+	height: 32px;
+	padding: 5px 20px 5px 10px;
+	border: none;
+	vertical-align: middle;
 	}
 
-.warning a,.success a {
+#words div.message a {
 	color: #5e5e5e;
 	text-decoration: none;
-	font-weight: bold;
-	font-size: 0.9em;
 }
 
-#words .note {
-	text-align: center;
-	color: #F48659;
-	font-style: italic;
-	}
 
 /* ----------------------=-=-=- Forms -=-=-=--------------------- */
 /* pretty forms and buttons */	
@@ -371,39 +305,21 @@ button:hover {
 	width: 140px;
 	}
 
-#main_menu div {
-	height: 80px;
-	padding: 5px;
-	margin: 10px 5px 10px 15px;
-	background-repeat: no-repeat;
-	background-position: center;
-	}
-
-#main_menu div.current {
-	border-style: dashed;
-	border-width: 2px;
-	border-color: gray;
-	}
 
 /* ------------=-=-=- language selection -=-=-=------------- */
 
 div#lang {
-	/* position: absolute;
-	float: right;
-	right: 5px;
-	top: 5px; */
+	/* position: fixed;
+	float: left;
+	left: 30px;
+	bottom: 10px; */
 	text-align: center;
-	margin-top: 10%;
+	padding: 5px;
+	margin: 10px;
 }
 
-#lang a {
-	color: #acacac;
-	font-family: verdana, lucida, arial, helvetica, sans-serif;
-	font-size: smaller;
-	}
-
-#lang a:hover {
-	color: #707070;
+div#lang button {
+	margin-top: 5px;
 }
 
 
@@ -439,6 +355,8 @@ div#lang {
 div.plugin_menu, div.plugin_system, div.plugin_volume, div.volume {
 	text-align: center;
 	margin: 10px 15px 10px 15px;
+	vertical-align: center;
+	padding: none;
 }
 
 div.plugin_menu a, div.plugin_system a, div.plugin_volume a, div.volume a {
@@ -453,12 +371,21 @@ div.plugin_menu a:hover, div.plugin_system a:hover, div.plugin_volume a:hover, d
 div.plugin_menu img, div.plugin_system img, div.plugin_volume img, div.volume img {
 	border: none;
 	padding: none;
-	margin: none;
+	margin-top: 10px;
 }
 
 div.plugin_menu {
-	width: 90px;
-	min-height: 100px;
+	width: 100px;
+	height: 110px;
+	background-position: center;
+}
+
+div.plugin_menu_passive {
+	background-image: url(icon_background_passive_100.png);
+}
+
+div.plugin_menu_active {
+	background-image: url(icon_background_active_100.png);
 }
 
 div.plugin_menu img {
@@ -486,6 +413,7 @@ div.plugin_volume img {
 }
 
 div.volume {
+	/* FIXME: float-left breaks the background image in firefox */
 	float: left;
 	width: 64px;
 }
@@ -495,3 +423,67 @@ div.volume img {
 	height: 48px;
 }
 
+/* -------------=-=-=- help -=-=-=------------------ */
+
+div.help_link {
+	text-align: right;
+	margin: 20px 10px 10px 10px;
+	}
+
+div.help_link a {
+	text-decoration: none;
+	color: #555;
+	font-size: 0.9em;
+}
+
+div.help_link img {
+	width: 24px;
+	height: 24px;
+	vertical-align: middle;
+	border: none;
+}
+
+
+/* --------------=-=-=- new volume pane -=-=-=----------- */
+
+div#volume_area_inner {
+	width: 620px;
+	/* margin: 13px; */
+	padding: 20px;
+	border: 1px solid #ccc;
+	border-right: 1px solid #ccc;
+	border-bottom: 1px solid #ccc;
+	background-image: url(volume_property_frame.png);
+	background-repeat: no-repeat;
+	background-position: top left;
+}
+
+table#volume_area {
+	clear: both;
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+
+table#volume_area td.volume_plugin_active, table#volume_area td.volume_plugin_passive {
+	width: 120px;
+	height: 40px;
+	text-align: center;
+	padding-top: 10px;
+	background-repeat: no-repeat;
+	background-position: top left;
+}
+ 
+table#volume_area td.volume_plugin_active {
+	background-image: url(register_active2.png);
+}
+
+table#volume_area td.volume_plugin_passive {
+	background-image: url(register_passive2.png);
+}
+
+div.volume_spacer {
+	width: 30px;
+	float: left;
+}
+