Work on new design

2 files changed, 116 insertions, 39 deletions

diff --git a/ishtar_common/static/media/images/crumbs.gif b/ishtar_common/static/media/images/crumbs.gif
new file mode 100644
index 000000000..669dd15c5
--- /dev/null
+++ b/ishtar_common/static/media/images/crumbs.gif
diff --git a/ishtar_common/static/media/style.css b/ishtar_common/static/media/style.css
index 60687e5dd..67446e301 100644
--- a/ishtar_common/static/media/style.css
+++ b/ishtar_common/static/media/style.css
@@ -9,7 +9,7 @@ a.add-button, a.remove,
 }
 
 div.form {
-    background-color: #EEE;
+    background-color: #f1f2f6;
 }
 
 #window h1{
@@ -32,7 +32,7 @@ a.add-button{
 a.add-button, a.remove,
 #progress-content,
 div.form {
-    border:2px solid #CCC;
+    border:0 solid #CCC;
 }
 
 /* shadows */
@@ -48,9 +48,9 @@ a.add-button, a.remove,
 .sheet,
 #progress-content,
 div.form {
-    -moz-border-radius:8px;
-    -webkit-border-radius:8px;
-    border-radius:8px;
+    -moz-border-radius:4px;
+    -webkit-border-radius:4px;
+    border-radius:4px;
 }
 
 body{
@@ -107,20 +107,40 @@ td{
 }
 
 button{
-    background-color:#EEE;
+    background-color:#f1f2f6;
     border:1px solid #AAA;
     color:#444;
 }
 
-input[type=submit], button.submit{
+button, input[type=submit], button.submit{
     background-color:#FFF;
-    border:1px solid #AAA;
-    color:#922;
+    border:1px solid #FFF;
     margin:6px;
+    font-size:0.9em;
+    padding:4px 3px;
+    border-radius:4px;
+    -moz-border-radius:4px;
+    -webkit-border-radius:4px;
 }
 
 button:hover, input[type=submit]:hover{
     cursor:pointer;
+    color:#922;
+    border:1px solid #922;
+}
+
+input[type=text],
+input[role=textbox]{
+    background-color:#FFF;
+    border:1px solid #FFF;
+    border-radius:4px;
+    -moz-border-radius:4px;
+    -webkit-border-radius:4px;
+}
+
+input[type=text]:focus,
+input[role=textbox]:focus{
+    border:1px solid #922;
 }
 
 .hidden{
@@ -152,7 +172,7 @@ div#header{
     width:100%;
     text-align:left;
     font-size: 0.9em;
-    background-color: #EEE;
+    background-color: #f1f2f6;
     border-bottom:1px solid #CCC;
     margin-bottom:10px;
     line-height:30px;
@@ -209,11 +229,11 @@ div#context_menu{
 }
 
 div#context_menu fieldset{
-    background-color:#EEE;
-    border:2px solid #CCC;
-    -moz-border-radius:8px;
-    -webkit-border-radius:8px;
-    border-radius:8px;
+    background-color:#f1f2f6;
+    border:0 solid #CCC;
+    -moz-border-radius:4px;
+    -webkit-border-radius:4px;
+    border-radius:4px;
 }
 
 div#context_menu ul{
@@ -254,40 +274,93 @@ div#main_menu > ul{
     color:#922;
 }
 
+div#main_menu > ul > li{
+    padding:0.5em;
+    margin:0 0.5em;
+    border-radius:4px;
+    -moz-border-radius:4px;
+    -webkit-border-radius:4px;
+}
+
+#section-1, #theme-1 div.form{
+    background-color:#ccccff;
+}
+
+#section-2, #theme-2 div.form{
+    background-color:#ccffcc;
+}
+
+#section-3, #theme-3 div.form{
+    background-color:#ffffcc;
+}
+
+#section-4, #theme-4 div.form{
+    background-color:#ffcccc;
+}
+
+#section-5, #theme-5 div.form{
+    background-color:#decfad;
+}
+
+#section-6, #theme-6 div.form{
+    background-color:#ffcc99;
+}
+
+#section-7, #theme-7 div.form{
+    background-color:#ccc;
+}
+
 div#content{
     clear:both;
     margin:0 200px;
     text-align:center;
 }
 
+ul#form_path, ul#form_path li{
+    list-style-type:none;
+    padding:0;
+    margin:0;
+}
+
 ul#form_path{
+    border:1px solid #dedede;
+    /*height:2.3em;*/
+    background-color:#fff;
+    margin-bottom:10px;
     text-align:left;
-    margin:4px 0;
-    font-size:0.9em;
 }
 
-ul#form_path li{
-    display: inline;
-    text-align: center;
-    padding-left: 10px ;
-    margin: 0;
-    white-space:nowrap;
+
+ul#form_path li {
+    display:inline-block;
+    line-height:2.3em;
+    padding-left:.75em;
+    color:#777;
 }
 
-ul#form_path li.current a{
-    color:#922;
+ul#form_path li a, ul#form_path li button{
+    display:inline-block;
+    padding:0 15px 0 0;
+    background:url(images/crumbs.gif) no-repeat right center;
 }
 
-ul#form_path button {
-    text-decoration:none;
-    color:#D14;
-    border:none;
-    background-color:white;
-    font-size: 1em;
-    cursor:pointer;
+ul#form_path li button{
+    height:33px;
     padding:0;
     margin:0;
-    font-family:Arial, Helvetica, sans-serif;
+    padding-right:10px;
+    border:0 solid #fff;
+}
+
+ul#form_path li button:hover{
+    color:#D14;
+    border:0 solid #fff;
+}
+
+
+ul#form_path li a:link, ul#form_path li a:visited {
+    text-decoration:none;
+    color:#922;
 }
 
 #reminder{
@@ -336,6 +409,10 @@ div.form {
     font-weight:normal;
 }
 
+.form td ul{
+    list-style:none;
+}
+
 .form .errorlist{
     color:#922;
 }
@@ -345,7 +422,7 @@ div.form {
 }
 
 .form input[readonly=True]{
-    background-color:#EEE;
+    background-color:#f1f2f6;
     border:0;
 }
 
@@ -522,7 +599,7 @@ table.confirm tr.spacer td:last-child{
 
 #window table th, .dashboard table th{
     background-color:#922;
-    border:1px solid #EEE;
+    border:1px solid #f1f2f6;
     color:#FFF;
 }
 
@@ -543,7 +620,7 @@ table.confirm tr.spacer td:last-child{
 
 #window table th.sub, .dashboard table th.sub, .dashboard table td.sub{
     background-color:#994242;
-    border:1px solid #EEE;
+    border:1px solid #f1f2f6;
     color:#FFF;
     padding:0 1em;
 }
@@ -555,7 +632,7 @@ table.confirm tr.spacer td:last-child{
 #window table td, .dashboard table td{
     text-align:right;
     padding:0 1em;
-    border:1px solid #EEE;
+    border:1px solid #f1f2f6;
 }
 
 #window table td.string, .dashboard table td.string{
@@ -576,7 +653,7 @@ table.confirm tr.spacer td:last-child{
 
 #window .head{
     text-align:center;
-    background-color:#EEE;
+    background-color:#f1f2f6;
     -webkit-border-top-left-radius: 8px;
     -webkit-border-top-right-radius: 8px;
     -moz-border-radius-topleft: 8px;
@@ -640,7 +717,7 @@ table.confirm tr.spacer td:last-child{
     width:670px;
     padding:1em;
     padding-left:2em;
-    background-color:#EEE;
+    background-color:#f1f2f6;
     -moz-border-radius:8px;
     -webkit-border-radius:8px;
     border-radius:8px;