Added facet container.

Facet container has been added to hold facet header (i.e. title,
search fields, buttons, links) and facet content. Each facet now
occupies separate container, so it can be shown/hidden without
having to redraw the content.

install/ui/ipa.css

@@ -22,8 +22,9 @@ body{
     margin: 0;
 }
 
-.network-activity-indicator{
-    display:none;
+.network-activity-indicator {
+    visibility: hidden;
+    padding: 5px;
 }
 
 .center-container {
@@ -453,8 +454,7 @@ span.ui-icon-search {
 
 
 [title=">>"] {
-        display: block;
-                margin-top: 1em !important;
+    margin-top: 1em !important;
 }
 
 
@@ -573,13 +573,17 @@ span.main-separator{
 /* Entity */
 
 
-.entity-container h1{
+.entity h1{
+    margin: 0 0 10px;
+/*
     margin-left: 0.5em;
     margin-right: 0.5em;
+
     -moz-border-radius: 0.5em 0.5em 0 0;
         -webkit-border-radius: 0.5em 0.5em 0 0;
     background: -moz-linear-gradient(center top , #EEEEEE, #DFDFDF) repeat scroll 0 0 transparent;
     background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#DFDFDF));
+*/
 }
 
 
@@ -595,13 +599,6 @@ a.action-button-disabled {
     cursor: default;
 }
 
-.content {
-    font-size: 10px;
-    margin-top: 1.4em;
-    float: left;
-    min-width: 70em;
-}
-
 
 /* Search */
 
@@ -728,17 +725,17 @@ dl.modal dd {
     padding-bottom: 0;
     margin-left: 0.8em;
 }
-
+/*
 #dns-record-resource-filter {
-        padding: 0em 1em;
+        padding: 0 1em;
         margin: 0 1em;
 }
 
 #dns-record-type-filter {
         margin: 0 1em 0 0.5em;
 }
-
-.ui-widget-content {
+*/
+.ui-widget-content, #content {
         border:0;
 }
 
@@ -786,8 +783,8 @@ table.scrollable tbody {
 .adder-dialog-buttons {
     position: absolute;
     top: 7.5em;
-    left: 24.4em;
-    right: 25;
+    left: 23em;
+    right: 23em;
     bottom: 0;
     text-align: center;
 }
@@ -818,18 +815,17 @@ table.scrollable tbody {
     padding-right: 1.5em;
 }
 
-div.entity-header {
-    padding: 0px 20px 10px;
+.entity-header {
+    padding: 0 20px 10px;
 }
 
-
-.entity-header h3{
+.entity-header .entity-title {
     text-transform: uppercase;
     color:gray;
     padding-right:5em;
 }
 
-.entity-header h3 span{
+.entity-header .entity-title .entity-pkey {
     color:black;
 }
 
@@ -838,15 +834,24 @@ div.entity-header {
 }
 
 .entity-tabs {
-    list-style-type: none;
-    #margin: 30px 0 0 0;
-    padding: 1em 0 0.3em 0;
-    height:  3em;
 }
-.entity-tabs li {
+
+.back-link {
+    cursor: pointer;
+}
+
+.facet-tab {
+    list-style-type: none;
+    margin: 0;
+    padding: 1em 0 0.3em 0;
+    cursor: pointer;
+}
+
+.facet-tab li {
     display: inline;
 }
-.entity-tabs li a {
+
+.facet-tab li a {
     color: #42454a;
     background-color: #dedbde;
     border: 1px solid #c9c3ba;
@@ -855,40 +860,55 @@ div.entity-header {
     text-decoration: none;
 }
 
-.entity-tabs li a:hover {
+.facet-tab li a:hover {
     background-color: #f1f0ee;
 }
-.entity-tabs li a.selected {
+.facet-tab li a.selected {
     color: #000;
     background-color: #f1f0ee;
     font-weight: bold;
     padding: 0.7em 0.3em 0.38em 0.3em;
 }
 
-.entity-tabs-section {
+.facet-tab-group {
     float: left;
-    height: 3em;
+/*    height: 3em; */
     display:inline;
     margin-right:1em;
 }
 
 
-ul.entity-tabs li.settings {
+.facet-tab li.settings {
     margin-left:1em;  margin-right:1em;
 }
 
-div.content {
-    padding-top: 1em;
-    margin-top: 1em;
-    width: 100%;
+.entity-content {
+    clear: both;
+    font-size: 10px;
+    padding: 0 20px 10px;
 }
 
-div.content div.content-buttons {
+.entity-content div.content-buttons {
     float: right;
     margin-right: 1.5em;
 
 }
 
-div.content div.content-buttons img {
+.entity-content div.content-buttons img {
     border: 0;
 }
+
+.facet-header {
+    padding: 10px 10px 10px;
+
+    border-color: #C9C3BA;
+    border-style: solid;
+    border-width: 1px;
+
+    background: -moz-linear-gradient(top,  #eeeeee,  #dfdfdf);
+    background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dfdfdf));
+}
+
+.facet-content {
+    margin: 10px 0 0;
+}