yodel_admin 0.0.1

data/lib/public/admin/css/admin.css

@@ -0,0 +1,1086 @@
+body, html {
+  background-color: #f0f0f0;
+  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, sans-serif;
+  text-rendering: optimizelegibility;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+}
+
+
+
+/* ---------------------------------------------------- */
+/* header bar and navigation                            */
+/* ---------------------------------------------------- */
+header {
+  height: 60px;        
+  background-color: #2a2a2a;
+  position: absolute;
+  top: 55px;
+  left: 50px;
+  right: 50px;
+  border-top-right-radius: 5px;
+  -moz-border-radius-topright: 5px;
+}
+
+  header #lip {
+    position: absolute;
+    top: 33px;
+    left: -16px;
+    width: 0px;
+    height: 0px;
+    border: 8px solid transparent;
+    border-top-color: #E5A700;
+    border-right-color: #E5A700;
+    padding: 0px;
+    margin: 0px;
+  }
+
+  header h1 {
+    position: absolute;
+    background-color: #FFC900;
+    height: 53px;
+    width: 170px;
+    left: -16px;
+    top: -20px;
+    color: transparent;
+    background-repeat: no-repeat;
+    background-position: center 10px;
+    background-image: url(/admin/images/yodel.png);
+  }
+  
+  header #site_menu {
+    position: absolute;
+    height: 60px;
+    line-height: 60px;
+    top: 0px;
+    right: 0px;
+  }
+  
+    header #site_menu p {
+      display: inline-block;
+      color: white;
+      font-size: 14px;
+    }
+    
+      header #site_menu p img {
+        margin-left: 10px;
+        margin-right: 10px;
+        position: relative;
+        top: 3px;
+      }
+  
+    header h2 {
+      display: inline-block;
+      color: white;
+      font-size: 14px;
+      padding: 0px 30px;
+      border-top-right-radius: 5px;
+      -moz-border-radius-topright: 5px;
+      border-left: 1px solid transparent;
+    }
+  
+      header h2 nav {
+        display: none;
+        position: absolute;
+        width: 200px;
+        z-index: 1;
+        right: 0px;
+        top: 60px;
+      }
+    
+      header h2:hover {
+        background-color: #202020;
+        border-left: 1px solid #181818;
+      }
+    
+      header h2:hover nav {
+        display: block;
+        border-top: 1px solid #202020;
+      }
+    
+        header h2 nav a {
+          height: 45px;
+          line-height: 45px;
+          font-size: 12px;
+          padding-right: 30px;
+          display: block;
+          border-bottom: 1px solid #777;
+          text-align: right;
+          color: white;
+          background-color: #202020;
+        }
+      
+        header h2 nav a:hover {
+          background-color: #2a2a2a;
+        }
+      
+        header h2 nav a:last-child {
+          border-bottom: none;
+          border-bottom-left-radius: 5px;
+          -moz-border-radius-bottomleft: 5px;
+          border-bottom-right-radius: 5px;
+          -moz-border-radius-bottomright: 5px;
+        }
+
+  header > nav {
+    height: 60px;
+    line-height: 60px;
+    display: block;
+    padding-left: 180px;
+    overflow: hidden;
+  }
+  
+    header > nav a {
+      display: inline-block;
+      padding: 0px 15px;
+      color: #888;
+      font-size: 14px;
+      border-left: 1px solid transparent;
+      border-right: 1px solid transparent;
+      
+      /* a little bit of tomfoolery so the 6px inset shadow only shows on the left and right sides of the element */
+      height: 72px;
+      line-height: 72px;
+      position: relative;
+      top: -6px;
+    }
+    
+    header > nav a:hover {
+      text-decoration: none;
+      background-color: #202020;
+      color: #ccc;
+    }
+  
+    header > nav a.selected {
+      color: white;
+      background-color: #202020;
+      border-left-color: black;
+      border-right-color: black;
+      -webkit-box-shadow: 0px 0px 6px black inset;
+      -moz-box-shadow: 0px 0px 6px black inset;
+      box-shadow: 0px 0px 6px black inset;
+    }
+    
+    header > nav a.selected:hover {
+      text-decoration: none;
+    }
+
+
+
+/* ---------------------------------------------------- */
+/* main content containers                              */
+/* ---------------------------------------------------- */
+article {
+  display: block;
+  background-color: white;
+  border-bottom: 1px solid #e0e0e0;
+  position: absolute;
+  top: 115px;
+  left: 50px;
+  right: 50px;
+  bottom: 50px;
+  border-bottom-left-radius: 5px;
+  -moz-border-radius-bottomleft: 5px;
+  border-bottom-right-radius: 5px;
+  -moz-border-radius-bottomright: 5px;
+}
+
+.tree #record {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+  right: 30px;
+  bottom: 30px;
+  overflow: auto;
+}
+
+.tree #record {
+  left: 402px;
+}
+
+.settings #record {
+  padding: 40px;
+}
+
+#navigation_panels {
+  background-color: #fefefe;
+  border-right: 1px solid #e0e0e0;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 370px;
+  bottom: 0px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  border-bottom-left-radius: 5px;
+  -moz-border-radius-bottomleft: 5px;
+}
+
+.navigation_panel {
+  border-right: 1px solid #e0e0e0;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 370px;
+  bottom: 0px;
+}
+
+
+
+
+/* ---------------------------------------------------- */
+/* record form                                          */
+/* ---------------------------------------------------- */
+#save_status {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  color: white;
+  height: 22px;
+  line-height: 22px;
+  font-size: 12px;
+  font-weight: bold;
+  background: #D6362E;
+}
+
+.tree #save_status {
+  left: 370px;
+  text-align: center;
+}
+
+.list #save_status {
+  width: 500px;
+  left: auto;
+}
+
+#record > h1 {
+  font-size: 18px;
+  color: #3F3F3F;
+  padding-left: 0px;
+}
+
+  #record h1 .type {
+    color: #bbb;
+    padding-right: 10px;
+  }
+  
+#record section {
+  margin-top: 40px;
+  font-size: 13px;
+}
+
+/*.list #record section:first-child {
+  margin-top: 0px;
+}*/
+
+  #record section h1 {
+    margin-bottom: 15px;
+  }
+  
+    #record section h1 a {
+      font-weight: normal;
+      color: #777;
+      padding-left: 10px;
+      font-size: 12px;
+    }
+
+#record label {
+  font-weight: normal;
+  color: #777;
+  font-size: 13px;
+  width: 90px;
+  display: block;
+  vertical-align: top;
+  padding-top: 3px;
+  float: left;
+}
+
+#record form > section > div > div > div {
+  padding-left: 110px;
+  padding-right: 30px;
+  padding-bottom: 15px;
+  vertical-align: top;
+}
+
+/* FIXME: html isn't added as a class to the div */
+#record form div.html {
+  padding-right: 20px;
+}
+
+#record input[type=text], #record input[type=password], #record input[type=email], #record textarea {
+  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08) inset;
+  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08) inset;
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08) inset;
+  border-radius: 3px;
+  -moz-border-radius: 3px;
+  border: 1px solid #bbb;
+  height: 20px;
+  width: 100%;
+  outline: none;
+  font-size: 11px;
+  vertical-align: middle;
+  padding: 3px 5px;    
+}
+
+#record input[type=text]:focus, #record input[type=password]:focus, #record input[type=email]:focus, #record textarea:focus {
+  border: 1px solid #009DDD;
+}
+
+#record textarea {
+  height: 100px;
+}
+
+#record input[type=radio] {
+  margin-right: 10px;
+  margin-left: 4px;
+}
+
+/* files and images */
+#record .field-type-attachment p, #record .field-type-image p {
+  color: #777;
+}
+
+#record .field-type-attachment p {
+  padding-top: 4px;
+}
+
+  #record .field-type-attachment p span, #record .field-type-image p span {
+    color: black;
+  }
+  
+  #record .field-type-attachment p a, #record .field-type-image p a {
+    margin-left: 10px;
+  }
+  
+  #record .field-type-attachment p a:hover, #record .field-type-image p a:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+#record .field-type-attachment > span, #record .field-type-image > span {
+  display: none;
+}
+
+#record .field-type-attachment input[type=checkbox], #record .field-type-image input[type=checkbox] {
+  display: none;
+}
+
+.contains-field-type-image {
+  clear: both;
+}
+
+.contains-field-type-image + .contains-field-type-image {
+  margin-top: 35px;
+}
+
+#record .image_preview {
+  width: 80px;
+  height: 80px;
+  float: left;
+  margin-right: 10px;
+  background: white url(/admin/images/missing_image.png) 22px 27px no-repeat;
+  border: 1px solid #bbb;
+  border-radius: 3px;
+  -moz-border-radius: 3px;
+  overflow: hidden;
+}
+
+  #record .image_preview img {
+    width: 80px;
+    height: 80px;
+  }
+
+#record input[type=file] {
+  display: block;
+  margin-top: 5px;
+}
+
+#record .field-type-image input[type=file] {
+  margin-left: 90px;
+}
+
+/* has many associations */
+#record .chzn-container input {
+  border: none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+
+/* single and multiple selects */
+#record select {
+  width: 100%;
+}
+
+#record .chzn-choices {
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  background: none;
+  border: 1px solid #bbb;
+  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08) inset;
+  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08) inset;
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08) inset;
+}
+
+/* date and time */
+#record .contains-field-type-date select, #record .contains-field-type-time select {
+  width: auto;
+}
+
+/* validations */
+.yodel-field-status {
+  display: block;
+  margin-top: 6px;
+}
+
+.yodel-field-status .invalid {
+  color: #DE4343;
+}
+
+/* save button and spinner */
+#save {
+  float: right;
+  height: 24px;
+  line-height: 24px;
+}
+
+  #save input {
+    height: 16px;
+  }
+
+  #save div {
+    height: 24px;
+    width: 24px;
+    overflow: hidden;
+    float: left;
+    margin-top: 3px;
+    margin-right: 7px;
+    position: relative;
+  }
+  
+    #save div img {
+      position: absolute;
+    }
+    
+    #save_success, #save_failure {
+      top: 3px;
+      left: 4px;
+    }
+
+#new_domain_row {
+  margin-top: 10px;
+  font-size: 12px;
+}
+
+  #new_domain_row input {
+    display: inline-block;
+  }
+
+  #new_domain_row input[type=text] {
+    width: 200px;
+    margin-left: 7px;
+    margin-right: 7px;
+  }
+
+#domains_list li {
+  padding: 3px 0px;
+}
+
+  #domains_list .remove_domain {
+    color: #ccc;
+  }
+  
+  #domains_list .remove_domain:hover {
+    color: #777;
+  }
+
+
+
+/* ---------------------------------------------------- */
+/* records tree                                         */
+/* ---------------------------------------------------- */
+nav.previous_folder {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  height: 40px;
+  width: 370px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+  nav.previous_folder a {
+    color: #555;
+    font-size: 14px;
+    display: block;
+    line-height: 40px;
+    padding-left: 42px;
+    background: transparent url(/admin/images/left_arrow.png) 28px 16px no-repeat;
+  }
+  
+  nav.previous_folder a.root {
+    opacity: 0.3;
+    background-image: none;
+  }
+
+nav.records {
+  position: absolute;
+  left: 10px;
+  top: 48px;
+  bottom: 0px;
+  width: 350px;
+  padding-left: 0px;
+}
+
+  nav.records ul {
+    margin-top: 4px;
+  }
+
+    nav.records > ul > li > h1 {
+      padding-left: 15px;
+    }
+    
+      nav.records > ul > li > h1 > p {
+        width: 196px;
+      }
+
+    nav.records > ul > li > ul > li > h1 {
+      padding-left: 20px;
+    }
+    
+      nav.records > ul > li > ul > li > h1 > p {
+        width: 191px;
+      }
+
+    nav.records > ul > li > ul > li > ul > li > h1 {
+      padding-left: 40px;
+    }
+    
+      nav.records > ul > li > ul > li > ul > li > h1 > p {
+        width: 181px;
+      }
+
+    nav.records > ul > li > ul > li > ul > li > ul > li > h1 {
+      padding-left: 60px;
+    }
+    
+      nav.records > ul > li > ul > li > ul > li > ul > li > h1 > p {
+        width: 151px;
+      }
+
+    nav.records > ul > li > ul > li > ul > li > ul > li > ul > li > h1 {
+      padding-left: 80px;
+    }
+      
+      nav.records > ul > li > ul > li > ul > li > ul > li > ul > li > h1 > p {
+        width: 131px;
+      }
+
+    nav.records ul li {
+      padding-bottom: 4px;
+    }
+
+      nav.records ul li h1 {
+        font-size: 12px;
+        color: #555;
+        line-height: 26px;
+        height: 26px;
+        cursor: pointer;
+        text-shadow: none;
+        display: block;
+        padding-right: 0px;
+      }
+
+      nav.records ul li h1 p {
+        display: inline-block;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        height: 26px;
+        line-height: 26px;
+      }
+
+      nav.records h1:hover, nav.records li.dragging h1 {
+        background-color: #E8ECEF;
+        color: #000;
+      }
+      
+      nav.records h1.selected {
+        background-color: #E0E4E7;
+        color: #000;
+      }
+
+        nav.records ul li h1 div.icon {
+          width: 17px;
+          height: 17px;
+          display: inline-block;
+          margin-right: 10px;
+          vertical-align: middle;
+          overflow: hidden;
+          position: relative;
+          top: -2px;
+        }
+        
+          nav.records ul li h1 div.icon .spinner {
+            width: 16px;
+            height: 16px;
+            background-image: url(/admin/images/load_spinner.gif);
+            display: none;
+          }
+          
+          nav.records ul li h1.selected div.icon .spinner, nav.records ul li h1:hover div.icon .spinner {
+            background-image: url(/admin/images/load_spinner_selected.gif);
+          }
+
+        nav.records ul li h1 div.folder_state {
+          width: 9px;
+          height: 9px;
+          display: inline-block;
+          margin-right: 10px;
+          visibility: hidden;
+        }
+
+        nav.records ul li h1:hover div.folder_state {
+          visibility: visible;
+        }
+
+          nav.records ul li h1 div.folder_state.open {
+            background-image: url(/admin/images/open.png);
+            visibility: visible;
+          }
+
+          nav.records ul li h1 div.folder_state.close {
+            background-image: url(/admin/images/close.png);
+            visibility: visible;
+          }
+
+        nav.records ul li h1 div.slide {
+          width: 4px;
+          height: 7px;
+          margin: 9px 10px 3px 0px;
+          display: inline-block;
+          float: right;
+          background-image: url(/admin/images/right_arrow.png);
+        }
+
+        nav.records ul li h1 div.drag {
+          width: 11px;
+          height: 12px;
+          display: inline-block;
+          float: right;
+          background-image: url(/admin/images/drag.png);
+          margin: 7px 10px 0px 0px;
+          visibility: hidden;
+        }
+
+        nav.records ul li h1:hover div.drag, nav.records ul li.dragging h1 div.drag {
+          visibility: visible;
+          cursor: ns-resize;
+        }
+
+        nav.records ul li h1 div.delete {
+          width: 12px;
+          height: 12px;
+          display: inline-block;
+          float: right;
+          background-image: url(/admin/images/delete.png);
+          margin: 7px 10px 0px 0px;
+          visibility: hidden;
+        }
+        
+        nav.records ul li h1:hover div.delete, nav.records ul li.dragging h1 div.delete {
+          visibility: visible;
+        }
+        
+        nav.records ul li h1 div.add_child {
+          width: 12px;
+          height: 12px;
+          display: inline-block;
+          float: right;
+          background-image: url(/admin/images/add.png);
+          margin: 7px 10px 0px 0px;
+          visibility: hidden;
+        }
+
+        nav.records ul li h1:hover div.add_child, nav.records ul li.dragging h1 div.add_child {
+          visibility: visible;
+        }
+        
+        nav.records ul li h1 div.add_child.hidden {
+          visibility: hidden;
+        }
+
+    nav.records ul li h1.new {
+      opacity: 0.4;
+    }
+
+    nav.records ul li h1.new:hover, nav.records ul li h1.new.selected {
+      opacity: 1.0;
+    }
+
+
+
+/* ---------------------------------------------------- */
+/* new record type panel                                */
+/* ---------------------------------------------------- */
+#new_model_panel {
+  position: absolute;
+  background-color: white;
+  top: 30px;
+  left: 382px;
+  right: 30px;
+  bottom: 30px;
+  padding: 0px 30px;
+}
+
+  #new_model_panel h1 {
+    font-size: 18px;
+    color: #bbb;
+    margin-left: 5px;
+    margin-bottom: 10px;
+  }
+
+  #new_model_panel ul a {
+    text-decoration: none;
+    display: block;
+  }
+
+  #new_model_panel ul a:hover {
+    text-decoration: none;
+  }
+
+  #new_model_panel ul li {
+    width: 120px;
+    float: left;
+    text-align: center;
+    background-color: white;
+    border: 1px solid #f5f5f5;
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+    margin: 5px;
+    padding: 26px 10px 10px 10px;
+    position: relative;
+  }
+
+  #new_model_panel ul li:hover {
+    background: #f5f5f5;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5');
+    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f5f5f5));
+    background: -moz-linear-gradient(top,  #fff,  #f5f5f5);
+    border: 1px solid #ddd;
+  }
+  
+    #new_model_panel ul li .spinner, #new_model_panel ul li .icon {
+      position: absolute;
+      top: 10px;
+      left: 62px;
+    }
+    
+    #new_model_panel ul li .spinner {
+      display: none;
+    }
+
+    #new_model_panel ul li p {
+      font-size: 13px;
+      line-height: 15px;
+      color: #555;
+      margin-top: 7px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    #new_model_panel ul li:hover p {
+      color: #333;
+    }
+
+#cancel_new_record {
+  color: #555;
+  font-size: 13px;
+  text-decoration: none;
+  margin-left: 5px;
+  margin-top: 20px;
+  display: block;
+}
+
+
+
+
+
+/* ---------------------------------------------------- */
+/* records list                                         */
+/* ---------------------------------------------------- */
+.list menu {
+  position: absolute;
+  left: 0px;
+  bottom: 0px;
+  height: 40px;
+  right: 500px;
+  border-top: 1px solid #e0e0e0;
+  border-right: 1px solid #e0e0e0;
+  background-color: #fafafa;
+  border-bottom-left-radius: 5px;
+  -moz-border-radius-bottomleft: 5px;
+}
+
+  .list menu p {
+    font-size: 13px;
+    position: absolute;
+    top: 8px;
+    left: 15px;
+    color: #333;
+  }
+
+#list_items {
+  position: absolute;
+  top: 37px;
+  bottom: 41px;
+  left: 0px;
+  right: 500px;
+  overflow: auto;
+  border-right: 1px solid #e0e0e0;
+}
+
+#list_items table {
+  width: 100%;
+}
+
+  #list_items th, #list_items td {
+    padding: 10px 10px 9px;
+    line-height: 18px;
+    font-size: 13px;
+    line-height: 17px;
+    cursor: pointer;
+    background-color: white;
+  }
+  
+  #list_items th {
+    font-weight: bold;
+    text-align: left;
+    line-height: 18px;
+    height: 18px;
+    color: #333;
+    position: relative;
+    border-bottom: 1px solid #e0e0e0;
+    background-color: #fafafa;
+  }
+  
+  #list_items th:last-child {
+    border-right: 1px solid #e0e0e0;
+  }
+  
+  .headerSortDown:after {
+    content: "";
+    position: absolute;
+    top: 16px;
+    right: 10px;
+    border-width: 0 4px 4px;
+    border-style: solid;
+    border-color: #000 transparent;
+  }
+  
+  .headerSortUp:after {
+    content: "";
+    position: absolute;
+    top: 16px;
+    right: 10px;
+    border-width: 4px 4px 0px 4px;
+    border-style: solid;
+    border-color: #000 transparent;
+  }
+  
+  #list_items td {
+    border-top: 1px solid #eaeaea;
+  }
+  
+  #list_items tbody tr:hover td {
+    background-color: #E8ECEF;
+  }
+  
+  #list_items tbody tr.selected td {
+    background-color: #E0E4E7;
+  }
+    
+    #list_items td span {
+      color: white;
+      padding: 3px 8px;
+      font-size: 11px;
+      border-radius: 5px;
+      -moz-border-radius: 5px;
+      font-weight: bold;
+    }
+
+.list #record {
+  position: absolute;
+  top: 25px;
+  right: 25px;
+  width: 450px;
+  bottom: 25px;
+  overflow: auto;
+}
+
+.list a.delete {
+  font-size: 12px;
+  color: #333;
+  text-decoration: none;
+  line-height: 24px;
+  display: block;
+}
+
+.list a.delete:hover {
+  text-decoration: underline;
+}
+
+#delete_spinner {
+  float: right;
+}
+
+div.delete {
+  height: 24px;
+  width: 80px;
+}
+
+#activity_spinner {
+  float: right;
+  position: relative;
+  top: 11px;
+  right: 11px;
+}
+
+#new_record {
+  float: right;
+  height: 40px;
+  line-height: 40px;
+  display: block;
+  padding-left: 15px;
+  padding-right: 15px;
+  border-left: 1px solid #e0e0e0;
+  font-size: 12px;
+  color: #333;
+}
+
+.list #record hr {
+  border: none;
+  height: 1px;
+  border-top: 1px solid #e0e0e0;
+  margin: 25px 0px;
+}
+
+.list #record h2 {
+  color: #333;
+  font-size: 14px;
+  margin-bottom: 12px;
+}
+
+#partial table {
+  width: 100%;
+  font-size: 13px;
+  color: #777;
+}
+
+  #partial table td {
+    padding: 7px 0px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  
+  #partial table tr:last-child td {
+    border-bottom: none;
+  }
+  
+  #partial table a {
+    color: #777;
+  }
+  
+  #partial table a:hover {
+    text-decoration: underline;
+  }
+
+#partial p {
+  font-size: 13px;
+  color: #777;
+  line-height: 17px;
+}
+
+
+
+
+
+ul#admin_items {
+  padding: 0px 30px 20px 30px;
+  width: 525px;
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  overflow: auto;
+}
+
+ul#admin_items.no_grouping {
+  margin-top: 30px;
+  height: 700px;
+}
+
+  ul#admin_items h1 {
+    color: #778F9F;
+    text-transform: uppercase;
+    font-size: 14px;
+    text-shadow: 0px 1px 1px white;
+    margin-bottom: 10px;
+    margin-top: 30px;
+  }
+  
+  ul#admin_items ul li {
+    border-bottom: 1px solid white;
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+    background-color: white;
+    clear: both;
+    height: 45px;
+    line-height: 45px;
+    margin-bottom: 10px;
+    overflow: hidden;
+    cursor: pointer;
+  }
+  
+  ul#admin_items ul li.selected {
+    background: #29ABE2;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#29ABE2', endColorstr='#0071BC');
+    background: -webkit-gradient(linear, left top, left bottom, from(#29ABE2), to(#0071BC));
+    background: -moz-linear-gradient(top,  #29ABE2,  #0071BC);
+  }
+  
+    ul#admin_items ul li article {
+      border: 1px solid #CEDEE8;
+      border-radius: 5px;
+      -moz-border-radius: 5px;
+      padding: 0px 12px;
+      display: block;
+      height: 43px;
+    }
+    
+    ul#admin_items ul li.selected article {
+      border: 1px solid #005BA8;
+    }
+  
+    ul#admin_items ul li p {
+      display: inline-block;
+      font-size: 14px;
+      color: #4C6C80;
+    }
+    
+    ul#admin_items ul li p.id {
+      color: #AAB5BD;
+      margin-right: 15px;
+    }
+    
+    ul#admin_items ul li p.secondary {
+      color: #AAB5BD;
+      float: right;
+    }
+    
+    ul#admin_items ul li.selected p {
+      color: white;
+    }