Set new design of Alterator web-interface

components/ahttpd/styles/alterator.css.in

 /* basic elements and widgets */
 
 body {
-	background-color: #@LIGHT_COLOR_HEX@;
-	color: #@DARK_LABELS_HEX@;
-	margin: 0px;
+	background-color: white;
+	margin: 5px;
 	padding: 10px;
-	font-family : Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
+	font-family : "Liberation Sans", Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
 	font-size: 9pt;
+	width: 85%;
 }
 
 a {
-	color: #@DARK_LABELS_HEX@;
+	color: #0088bf;
 	font-weight: bold;
 }
 
@@ -21,9 +21,14 @@ a {
 
 table {
 	font-size: 9pt;
-	border-color: #@MIDDLE_COLOR_HEX@;
+	border-color: #306ac4;
 	border-spacing: 0px;
-/*	border-collapse: collapse;*/
+	border-collapse: collapse;
+}
+
+#main table {
+	margin-top: 6px;
+	margin-bottom: 6px;
 }
 
 th {
@@ -45,15 +50,15 @@ hr {
 h1 {
 	text-align: center;
 	margin: 0px;
-	color: #@DARK_LABELS_HEX@;
+	color: black;
 }
 
 h2 {
-        color: #@DARK_LABELS_HEX@;
+	color: black;
 }
 
 h3 {
-        color: #@DARK_LABELS_HEX@;
+	color: black;
 }
 
 
@@ -61,53 +66,56 @@ textarea, select, input.text {
 	
 	/*border: 1px solid #e2e6eb; #MIDDLE_LABELS_HEX@;*/ /*FIX NEEDED!!!!!*/
 
-	font-size: 8pt;
-	margin: 1px 3px 1px 0px;
-	padding: 1px 3px;
-	border-color: #c1c3cb;
-	
-	-moz-border-radius: 0.3em;
-        -webkit-border-radius: 0.3em;
-        -khtml-border-radius: 0.3em;
-        border-radius: 0.3em;
-	background-color: #eaecf2;
+	font-size: 9pt;
+	margin: 0px 5px 1px 5px;
+	padding: 2px 4px;
+	border: 1px solid #c4c4c4;
+	background-color: white;
+	vertical-align: middle;
+}
+
+select {
+	background-color: #e6e6e6;
+}
+
+fieldset {
+	border: 1px solid #c4c4c4;
+	margin-bottom: 6px;
 }
 
 input.text[disabled], select[disabled]{
-background-color: #e2e6eb;
+	background-color: #e2e6eb;
 }
 
 .disabled{
-color:#@MIDDLE_LABELS_HEX@;
+	color:#666666;
 }
 
 .btn, button {
-	background-image: url(/design/images/button-active.png);
-	background-repeat:repeat-x;
-	color: #@DARK_LABELS_HEX@;
-	border: 1px solid #@MIDDLE_COLOR_HEX@;
-	
-	-moz-border-radius: 0.7em;
-	-webkit-border-radius: 0.7em;
-	-khtml-border-radius: 0.7em;
-	border-radius: 0.7em;
+	color: black;
+	background-color: #dbeef6;
+	border: 1px solid #36a1cc;
 	
 	cursor: pointer;
 	font-size: 9pt;
+	font-weight: bold;
 	padding: 2.5px 10px;
+	vertical-align: middle;
+}
 
+.btn:hover, button:hover, #main .btn, .box .btn {
+	font-weight: bold;
+	color: #FFFFFF;
+	background-color: #455a85;
+	border: 1px solid #1b2575;
+}
 
-	-moz-box-shadow: 5px 5px 6px #a6a6a6;
-	-webkit-box-shadow: 5px 5px 6px #a6a6a6;
-	box-shadow: 5px 5px 6px #a6a6a6;
-
+#main .btn:hover, .box .btn:hover {
+        background-color: #5b76af;
 }
 
-.btn:hover, button:hover {
-	background-image: url(/design/images/button-passive.png);
-	background-repeat:repeat-x;
-	color: #@LIGHT_LABELS_HEX@;
-	border: 1px solid #@DARK_LABELS_HEX@;
+div#top .btn {
+	width: 7em;
 }
 
 .box {
@@ -117,8 +125,10 @@ color:#@MIDDLE_LABELS_HEX@;
 
     padding: 10px 20px;
     padding-top: 10px;
-    background-color: #cfd4e3;
-    border: 1px solid #@SHADOW_HEX@;
+    background-color: #dbeef6;
+    border: 1px solid #36a1cc;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
 }
 
 .next-page-button,.prev-page-button,.first-page-button,.last-page-button {
@@ -167,10 +177,11 @@ color:#@MIDDLE_LABELS_HEX@;
 
 .alterator-attention-message {
     color: darkred;
-    border-color: darkred;
+    border-color: #cf7878;
     border-width: 5px;
-    border-style: double;
-    padding: 4px;
+    border-style: solid;
+    background-color: #e8cfcf;
+    padding: 14px;
     margin: 4px;
 
     min-width:10px;
@@ -182,6 +193,10 @@ color:#@MIDDLE_LABELS_HEX@;
     border-radius: 7px;
 }
 
+.alterator-attention-message a {
+    color: darkred;
+}
+
 .alterator-attention-message img {
     vertical-align:middle;
 }
@@ -196,15 +211,16 @@ canvas.alterator-clock {
 
 .year {
 	font-weight: bold;
-	color:#@DARK_LABELS_HEX@;
-	font-size:10pt;
-	/*background-color: #F4F8F9;*/
+	color: black;
+	font-size: 10pt;
+	vertical-align: middle;
 }
 
 .month {
 	font-weight:bold;
-	color:#@DARK_LABELS_HEX@;
-	font-size:10pt;
+	color: black;
+	font-size: 10pt;
+	vertical-align: middle;
 }
 
 .week {
@@ -214,7 +230,7 @@ canvas.alterator-clock {
 }
 
 .today {
-	border: 1px solid #@DARK_LABELS_HEX@;
+	border: 1px solid #242a60;
 	cursor: pointer;
 
 	background-image: url(/design/images/button-passive.png);
@@ -226,29 +242,30 @@ canvas.alterator-clock {
 .day {
 	border-style:solid;
 	border-width:1px;
-	background-color: #@LIGHT_LABELS_HEX@;
+	background-color: #FFFFFF;
 	cursor: pointer;
 }
 
 .day:hover {
-	background-color: #@MIDDLE_COLOR_HEX@;
+	background-color: #306ac4;
 }
 
 .alterator-dateedit-calendar table {
 	width: 100%;
 	text-align: center;
-	background-image: url(/design/images/table-header.png);
-	background-repeat:repeat-x;
+	background-color: #ebebeb;
+	margin-top: 10px;
+/*	background-image: url(/design/images/table-header.png);
+	background-repeat:repeat-x;*/
 
-	-webkit-border-top-left-radius: 0.7em;
+/*	-webkit-border-top-left-radius: 0.7em;
 	-webkit-border-top-right-radius: 0.7em;
 	-moz-border-radius-topleft: 0.7em;
 	-moz-border-radius-topright: 0.7em;
 	border-top-left-radius: 0.7em;
-	border-top-right-radius: 0.7em;
-/*border-width: 2px;
-border-style: solid;
-border-color: #242a60;*/
+	border-top-right-radius: 0.7em;*/
+	/*border: 2px solid #242a60;*/
+	border: 2px solid #c4c4c4;
 	border-collapse: collapse;
 
 /*
@@ -259,9 +276,9 @@ border-color: #242a60;*/
 	-webkit-border-top-right-radius: 4px;
 */
 
-	-moz-box-shadow: 0 0 8px 0.2em #a6a6a6;
+/*	-moz-box-shadow: 0 0 8px 0.2em #a6a6a6;
 	-webkit-box-shadow: 0 0 8px 0.2em #a6a6a6;
-	box-shadow: 0 0 8px 0.2em #a6a6a6;
+	box-shadow: 0 0 8px 0.2em #a6a6a6;*/
 }
 
 .alterator-dateedit-calendar td {
@@ -279,13 +296,14 @@ border-color: #242a60;*/
 /* main menu */
 
 #main, #box {
+	margin-top: 14px;
 	padding: 10px 20px;
 	padding-top: 10px;
 
-	background-color: #cfd4e3;
-	border: 1px solid #@MIDDLE_COLOR_HEX@;
-	-moz-border-radius: 0.8em;
-	-webkit-border-radius: 0.8em;
+	background-color: #dbeef6;
+	border: 1px solid #36a1cc;
+	-moz-border-radius: 0;
+	-webkit-border-radius: 0;
 }
 
 #main-td {
@@ -294,37 +312,30 @@ border-color: #242a60;*/
 }
 
 #menu-td {
-	padding-right: 10px;
 	padding-top: 10px;
 }
 
 #menu {
-	/*padding: 10px;*/
-	background-color: white;
-	border: 1px solid #c1c3cb;
-	-moz-border-radius: 7px;
-	-webkit-border-radius: 7px;
-	-khtml-border-radius: 7px;
-	border-radius: 7px;
+	padding: 0;
+	margin-right: 10px;
 }
 
 .menu-item-normal a {
 	font-weight: normal;
 	text-decoration: none;
-	color: #@DARK_LABELS_HEX@;
+	color: black;
 }
 
 .menu-item-selected a {
 	font-weight: bold;
 	text-decoration: none;
-	color: #@DARK_LABELS_HEX@;
+	color: #0088bf;
 	padding-top: 10px;
 	margin-top: 10px;
-	width: 200px;
 }
 
 .menu-item-normal {
-	padding-left: 20px;
+	padding-left: 10px;
 	width: 100%;
 	padding-right: 4px;
 	margin-top: 3px;
@@ -332,58 +343,48 @@ border-color: #242a60;*/
 }
 
 .menu-item-selected {
-	background-image: url(/design/images/menu-selected.png);
-	background-repeat:repeat-y;
-	padding-left: 20px;
-	width: 80%;
+	color: #0088bf;
+	background-color: #dbeef6;
+	padding-left: 10px;
 	padding-top: 3px;
 	padding-bottom: 3px;
 	padding-right: 3px;
 	margin-top: 3px;
 	margin-bottom: 2px;
+	margin-right: 10px;
+
+}
+.menu-item-normal a:hover {
+	color: #0088bf;
 }
 
 .menu-group-name  {
-	color: #@DARK_LABELS_HEX@;
-	/*background-image: url(/design/images/menu-header.png);*/
-	background-repeat:repeat-x;
+	width: 204px;
+	color: #0088bf;
+	height: 16px;
+	background: url(/design/images/section.png) no-repeat 0px 23px;
 	font-size: 10pt;
 	
 	padding-top: 3px;
-	padding-bottom: 3px;
+	padding-bottom: 10px;
 	padding-right: 4px;
 	padding-left: 10px;
-	margin: 10px;
-
+	margin-top: 10px;
+	margin-bottom: 8px;
+	margin-right: 10px;
 	font-weight: bold;
-	border-bottom: 3px solid #6aacf1;
 }
 
 /* tables */
 
 table.alterator-listbox {
 	font-family:arial;
-	margin:10px 0pt 15px;
+	/*margin:10px 0pt 15px;*/
 	font-size: 8pt;
 	width: 100%;
 	text-align: left;
-/*	border: solid 1px;*/
-
-	-webkit-border-top-left-radius: 0.7em;
-	-webkit-border-top-right-radius: 0.7em;
-	-moz-border-radius-topleft: 0.7em;
-	-moz-border-radius-topright: 0.7em;
-
-	border-top-left-radius: 0.7em;
-	border-top-right-radius: 0.7em;
-	border-style:solid;
-	border-color:#242a60;
-	border-width: 1px;
-	border-spacing:0px;
-
-	background-image: url(/design/images/table-header.png);
-        background-repeat:repeat-x;
-
+	border: 1px solid #306AC4;
+	border-spacing: 0;
 }
 
 table.alterator-listbox thead tr th, table.alterator-listbox tfoot tr th {
@@ -395,7 +396,10 @@ table.alterator-listbox thead tr th, table.alterator-listbox tfoot tr th {
 	font-size: 8pt;
 	margin: 0px;
 	padding: 4px;
-	color: #@DARK_LABELS_HEX@;
+	color: #242a60;
+	background-color: #e6e6e6;
+	border: 1px solid #306AC4;
+	vertical-align: middle;
 }
 
 table.alterator-listbox thead tr .header {
@@ -404,20 +408,17 @@ table.alterator-listbox thead tr .header {
 	background-position: center right;
 	cursor: pointer;
 	padding-right: 24px;
-border-right: #@MIDDLE_COLOR_HEX@ solid 1px;
-
 }
 
 table.alterator-listbox tbody td {
-	color: #@DARK_COLOR_HEX@;
+	color: #001056;
 	padding: 4px;
-	background-color: #@LIGHT_LABELS_HEX@;
+	background-color: #FFFFFF;
 	vertical-align: top;
 	/*border-left: solid 1px;
 	border-right: solid 1px;
 	border:none;*/
-border-right: #@MIDDLE_COLOR_HEX@ solid 1px;
-	
+	border-right: #306ac4 solid 1px;
 }
 
 table.alterator-listbox tbody tr.odd td {
@@ -457,7 +458,8 @@ table.alterator-listbox thead tr .headerSortDown {
 }
 
 table.alterator-listbox thead tr .headerSortDown, table.alterator-listbox thead tr .headerSortUp {
-	background-color: #@LIGHT_LABELS_HEX@;
+	color: white;
+	background-color: #00a5d2;
 }
 
 /* states */
@@ -465,7 +467,7 @@ table.alterator-listbox thead tr .headerSortDown, table.alterator-listbox thead
 .ui-state-disabled {
 	cursor: default !important;
 	color: #c3c7cb;
-	background-color: #e2e6eb;
+	/*background-color: #e2e6eb;*/
 }
 
 .btn.ui-state-disabled {
@@ -492,16 +494,14 @@ table.alterator-listbox thead tr .headerSortDown, table.alterator-listbox thead
 .ui-state-disabled {
 	cursor: default !important;
 	color: #c3c7cb;
-	background-color: #@LIGHT_COLOR_HEX@;
+/*	background-color: #F5F5F5;*/
 }
 
-.btn.ui-state-disabled {
-	color: #@MIDDLE_LABELS_HEX@;
-	background-color: #@MIDDLE_COLOR_HEX@;
-}
-
-.btn.ui-state-disabled:hover {
-	background-color: #@MIDDLE_COLOR_HEX@;
+#main .btn.ui-state-disabled, #main .btn.ui-state-disabled:hover {
+	cursor: default !important;
+	color: #c3c7cb;
+	background-color: #E2E6EB;
+	border: 1px solid #c0c0c0;
 }
 
 /* progressbar */
@@ -517,23 +517,50 @@ table.alterator-listbox thead tr .headerSortDown, table.alterator-listbox thead
 /* accordion */
 
 div.alterator-accordion h3 {
-	background-color:  #eaecf2;
+	background-color:  #DBEEF6;
 	font-size: 9pt;
 
 	padding-top: 3px;
 	padding-bottom: 3px;
 	padding-left: 24px;
 
-	margin: 2px;
+	margin: 0px;
+	border-top: 1px solid #36A1CC;
+	border-left: 1px solid #36A1CC;
+	border-right: 1px solid #36A1CC;
 
 	background-image: url(/design/images/right.gif);
 	background-repeat: no-repeat;
 	background-position: center left;
 	cursor: pointer;
+	outline: none;
 }
 
 div.alterator-accordion h3.ui-state-active {
-	background-image: url(/design/images/asc.gif);
+	color: #0088bf;
+	background-image: url(/design/images/bottom.gif);
+	background-repeat: no-repeat;
+	background-position: center left;
+	cursor: pointer;
+}
+
+/* TODO: don't work */
+div.alterator-accordion .btn {
+	font-weight: bold;
+        color: black;
+        background-color: #dbeef6;
+        border: 1px solid #36a1cc;
+}
+
+div.alterator-accordion div {
+	padding: 10px 10px 5px 15px;
+	border-top: 1px solid #36A1CC;
+	border-left: 1px solid #36A1CC;
+	border-right: 1px solid #36A1CC;
+}
+
+div.alterator-accordion {
+	border-bottom: 1px solid #36A1CC;
 }
 
 /* resizeable */
@@ -555,51 +582,51 @@ div.alterator-accordion h3.ui-state-active {
 /* corner radius */
 
 .ui-corner-tl {
-	-moz-border-radius-topleft: 4px;
-	-webkit-border-top-left-radius: 4px;
+	-moz-border-radius-topleft: 0px;
+	-webkit-border-top-left-radius: 0px;
 }
 
 .ui-corner-tr {
-	-moz-border-radius-topright: 4px;
-	-webkit-border-top-right-radius: 4px;
+	-moz-border-radius-topright: 0px;
+	-webkit-border-top-right-radius: 0px;
 }
 
 .ui-corner-bl {
-	-moz-border-radius-bottomleft: 4px;
-	-webkit-border-bottom-left-radius: 4px;
+	-moz-border-radius-bottomleft: 0px;
+	-webkit-border-bottom-left-radius: 0px;
 }
 
 .ui-corner-br {
-	-moz-border-radius-bottomright: 4px;
-	-webkit-border-bottom-right-radius: 4px;
+	-moz-border-radius-bottomright: 0px;
+	-webkit-border-bottom-right-radius: 0px;
 }
 
 .ui-corner-top {
-	-moz-border-radius-topleft: 4px;
-	-webkit-border-top-left-radius: 4px;
-	-moz-border-radius-topright: 4px;
-	-webkit-border-top-right-radius: 4px;
+	-moz-border-radius-topleft: 0px;
+	-webkit-border-top-left-radius: 0px;
+	-moz-border-radius-topright: 0px;
+	-webkit-border-top-right-radius: 0px;
 }
 
 .ui-corner-bottom {
-	-moz-border-radius-bottomleft: 4px;
-	-webkit-border-bottom-left-radius: 4px;
-	-moz-border-radius-bottomright: 4px;
-	-webkit-border-bottom-right-radius: 4px;
+	-moz-border-radius-bottomleft: 0px;
+	-webkit-border-bottom-left-radius: 0px;
+	-moz-border-radius-bottomright: 0px;
+	-webkit-border-bottom-right-radius: 0px;
 }
 
 .ui-corner-right {
-	-moz-border-radius-topright: 4px;
-	-webkit-border-top-right-radius: 4px;
-	-moz-border-radius-bottomright: 4px;
-	-webkit-border-bottom-right-radius: 4px;
+	-moz-border-radius-topright: 0px;
+	-webkit-border-top-right-radius: 0px;
+	-moz-border-radius-bottomright: 0px;
+	-webkit-border-bottom-right-radius: 0px;
 }
 
 .ui-corner-left {
-	-moz-border-radius-topleft: 4px;
-	-webkit-border-top-left-radius: 4px;
-	-moz-border-radius-bottomleft: 4px;
-	-webkit-border-bottom-left-radius: 4px;
+	-moz-border-radius-topleft: 0px;
+	-webkit-border-top-left-radius: 0px;
+	-moz-border-radius-bottomleft: 0px;
+	-webkit-border-bottom-left-radius: 0px;
 }
 
 .ui-corner-all {
@@ -623,13 +650,12 @@ div.alterator-accordion h3.ui-state-active {
 /* dialog */
 
 .ui-widget-content {
-	background-color: #@LIGHT_LABELS_HEX@;
-	border: 1px solid #@MIDDLE_COLOR_HEX@;
+	background-color: #FFFFFF;
 }
 
 .ui-widget-header {
 	color: #EAEDEF;
-	background-color: #@MIDDLE_COLOR_HEX@;
+	background-color: #306ac4;
 	font-weight: bold;
 }
 
@@ -695,7 +721,7 @@ div.alterator-accordion h3.ui-state-active {
 /* help button */
 
 .ui-help-button {
-	background-color: #@LIGHT_LABELS_HEX@;
+	background-color: #FFFFFF;
 	margin-bottom: 10px;
 	padding-top: 7px;
 
@@ -715,17 +741,15 @@ div.alterator-accordion h3.ui-state-active {
 
 #top {
 	text-align:left;
-	/*background: url(/design/images/header-gradient.png) repeat-x;*/
-
 	padding: 0em;
 	margin-bottom: 0px;
-	border-bottom: 1px solid #c1c3cb;
+	border-bottom: 1px solid #ebebeb;
 }
 
 #product-logo {
 	background: url(/design/images/product-logo.png) no-repeat;
-	width: 194px;
-	height: 56px;
+	width: 348px;
+	height: 52px;
 	border: 0px;
 	padding: 0px;
 	margin: 0px;
@@ -736,14 +760,16 @@ div.alterator-accordion h3.ui-state-active {
 	padding-right: 1em;
 	text-align: left;
 
-	color: #@DARK_LABELS_HEX@;
+	color: black;
+	font-family: "DejaVu Sans",Verdana,Tahoma,Helvetica;
 	font-weight: bold;
 	text-decoration: none;
 	font-size:large;
+	text-transform: uppercase;
 }
 
 .top-button {
-        padding-right: 10px;
+        padding-left: 10px;
 }
 
 
@@ -760,7 +786,7 @@ div.alterator-accordion h3.ui-state-active {
 #help-popup {
 	padding-left: 10px;
 	padding-right: -30px;
-	background-color: #@LIGHT_LABELS_HEX@;
+	background-color: #FFFFFF;
 
         border: 1px solid #c1c3cb;
         -moz-border-radius: 0.5em;
@@ -772,10 +798,10 @@ div.alterator-accordion h3.ui-state-active {
 .hresizeable {
 	width: 100%;
 	height: 7px;
-	background:#@DARK_COLOR_HEX@ url(/design/images/hgrabber.gif) no-repeat scroll 45%;
+	background:#001056 url(/design/images/hgrabber.gif) no-repeat scroll 45%;
 	cursor: s-resize;
 }
 
 .hresizeable:hover {
-	background-color: #@MIDDLE_COLOR_HEX@;
+	background-color: #306ac4;
 }