drg_cms 0.6.0.3 → 0.6.0.6

data/app/assets/javascripts/drg_cms_cms.js

@@ -5,7 +5,7 @@
 // the compiled file.
 
 //= #require_self
-//= require jquery3
+//= require jquery2
 //= require drg_cms/jquery-migrate.js
 //= require jquery_ujs
 

data/app/assets/stylesheets/drg_cms/drg_cms.css

@@ -80,7 +80,7 @@ table {
 */
 
 body {
-font-family: helvetica;
+font-family: arial,sans-serif;
 font-size: 12px;
 margin: 0px;
 vertical-align: middle;
@@ -90,14 +90,29 @@ color: #222;
 textarea, input, select {
 color: #222;
 padding: 6px 4px;
-border: solid 2px #ddd;
+margin-left: 1px;
+border: solid 1px #ccc;;
 border-radius: 2px;
-font: 14px helvetica;
+font: 14px arial,sans-serif;
 max-width: 100%;
+vertical-align: middle;
 }
 
 textarea:focus, input:focus, select:focus {
-  border: 2px solid rgba(76,154,255, 1);
+  border: 1px solid rgba(76,154,255, 1);
+  outline: 1px solid rgba(76,154,255, 1);
+  border-radius: 1px;
+}
+
+input[type=submit]:focus {
+  outline: none;
+  border: none;
+  background-color: rgba(76,154,255, 1);
+  color: #fff;
+}
+
+textarea[readonly], input[readonly], select[readonly] {
+  background-color: #eee !important;
 }
 
 input.file {
@@ -105,12 +120,14 @@ border: none;
 }
 
 select {
-padding: 5px 0px;
-background: #fff;  
-border: solid 2px #ddd;
-border-radius: 2px;
+  background-color: #fff;  
 }
 
+select option { 
+  /* not working */
+  outline: none;
+}  
+
 hr {
 background-color: #ccc;
 border: none;
@@ -150,7 +167,7 @@ color: #666;
 font-weight: bold;
 text-decoration: none; 
 background: transparent;
-padding: 5px 0;
+padding: 7px;
 }
 
 .dc-link a:hover, .dc-animate a:hover, .dc-result a:hover  { 
@@ -166,9 +183,7 @@ a.dc-animate:hover { color: #000; background: transparent;}
 .dc-image-preview img { max-height: 2rem; padding-left: 0.5rem;}
 .dc-image-preview img:hover { cursor: zoom-in;}
 
-.text-with-select {
-width: 24px;
-}
+.text-with-select { width: 24px; }
 
 .no-borders {
   padding: 0px;
@@ -187,9 +202,6 @@ padding: 0px;
 border-spacing: 0px;
 border-radius: 1px;  
 background-color: #f9f9f9;
-/*border: 2px solid #ddd;
-border-left: 2px solid #ddd;
-border-bottom: none;*/
 }
 
 .dc-result i { 
@@ -197,17 +209,20 @@ padding: 2px;
 font-size: 0.9rem;
 }
 
+.dc-result .actions .dc-animate { 
+padding: 0;
+}
+
 .dc-result-header {
   display: flex;
-/*  background-color: #eee;*/
-  background: linear-gradient(to bottom, #eee 0%, #ddd 100%); 
+  background: linear-gradient(to bottom, #eee 0%, #e2e2e2 100%); 
 }
 .dc-result-data {
   display: flex;
 }
 
 .dc-result-data .actions i {
-  padding: 6px 1px;
+  padding: 2px 1px;
   font-size: 1rem;
 }
 
@@ -216,7 +231,7 @@ font-size: 0.9rem;
   white-space: nowrap;
   overflow: hidden;
   font-weight: bold;
-  color: #666;
+  color: #444;
 }
 
 .dc-result-header .spacer, .dc-result-data .spacer {
@@ -231,6 +246,11 @@ font-size: 0.9rem;
 .dc-result-header .spacer:hover {
   cursor:ew-resize;
 }
+
+.dc-result-header a:link {
+  padding-left: 0;
+}
+
 .dc-result-data .td {
   padding: 5px 2px;
   white-space: nowrap;
@@ -239,19 +259,33 @@ font-size: 0.9rem;
 }
 
 .dc-result-data .actions, .dc-result-header .actions {
-  padding-left: 4px;
-  vertical-align: middle;
+  padding-right: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;  
   white-space: nowrap;
 }
 
+.dc-result-data .dc-link, .dc-result-data .dc-link-ajax {
+  background: none;
+  border: 1px solid transparent;
+}
+
+.dc-result-data .dc-link:hover, .dc-result-data .dc-link-ajax:hover {
+  box-shadow: none;
+  border: 1px solid transparent;
+}
+.dc-result-data .dc-link a:hover, .dc-result-data .dc-link-ajax a:hover {
+  color: rgba(76,154,255, 1);
+}
+
 .dc-result-data:hover { 
-  background-color: rgba(255,127,0, 0.1); 
-  background-color: rgba(0,0,255, 0.1); 
+  background-color: #eee;
+  box-shadow: inset 0px 0px 0px 1px rgba(76,154,255, 1);
 }
 
 .dc-result-data.footer {
   border-top: 2px solid #222;
-/*  border-bottom: 2px solid #222; */
   color: #000;
   font-weight: bold;
   background-color: #ddd;
@@ -260,34 +294,32 @@ font-size: 0.9rem;
 .dc-result-data a:hover { 
   background-color: transparent;
 }
-  
 
 .dc-menu {
-padding: 0px;
-padding: 10px 0;
+padding: 4px 0;
 display: inline-table;
 }
 
 .dc-menu li {
-  display: initial;
+  display: inline-flex;
   margin-right: 3px;
 }
 
+
 #data-fields {margin: 5px;}
 
 .dc-link {
 font-weight: bold;
 color: #666;
 text-align: center;
-padding: 6px; 
 border-radius: 2px;
-background: transparent linear-gradient(to bottom, #FFF 0%, #F2F2F2 100%) repeat scroll 0% 0%;
-border: 1px solid #eee;
+background: transparent linear-gradient(to bottom, #fff 0%, #e2e2e2 100%);
+border: 1px solid #ddd;
 }
 
 .dc-link:hover {
-  background: #ddd;
-  border: 1px solid #ddd;
+  border: 1px solid rgba(76,154,255, 1);
+  box-shadow: inset 0px 0px 0px 1px rgba(76,154,255, 1);
   transition: 0.3s; 
   color: #000;
   cursor: pointer;
@@ -298,30 +330,46 @@ border: 1px solid #eee;
   transition: 0.3s;  
 }
 
+.dc-link div { 
+  padding: 7px; 
+}
+
 .dc-link-no {
   text-align: left;
   font-weight: bold;
-  padding: 6px;  
+  padding: 7px;
+  vertical-align: bottom;
+  border: 1px solid #ddd;
   border-radius: 2px;
-  color: #fff;
-  background: #ddd;
+  color: #888;
+  background: #eee !important;
 }
 
 .dc-link-ajax {
   text-align: left;
   font-weight: bold;
-  padding: 6px;  
+  padding: 7px;
   border-radius: 2px;
   color: #666;
-  background: transparent linear-gradient(to bottom, #FFF 0%, #F2F2F2 100%) repeat scroll 0% 0%;
-  border: 1px solid #eee;
+  background: transparent linear-gradient(to bottom, #fff 0%, #e2e2e2 100%) repeat scroll 0% 0%;
+  border: 1px solid #ddd;
+}
+
+.dc-link-ajax.with-link {padding: 7px}
+#cmsform .dc-link-ajax.with-link {padding: 0}
+
+.dc-link-ajax i, .dc-link-no i {
+  padding: 1px 3px 0 0;
 }
 
-.dc-link-ajax:hover {
+.dc-link-ajax:hover, .dc-action-submit:hover {
 cursor: pointer;
-background: #ddd;
-border: 1px solid #ddd;
+background: #eee;
+border: 1px solid #bbb;
+  border: 1px solid rgba(76,154,255, 1);
+  box-shadow: inset 0px 0px 0px 1px rgba(76,154,255, 1);
 transition: 0.3s; 
+color: #000;
 }
 
 .dc-link-ajax:hover a { 
@@ -345,8 +393,8 @@ transition: 0.3s;
 .dc-link-icon {
 padding: 3px;
 border-radius: 2px;
-background: transparent linear-gradient(to bottom, #FFF 0%, #F2F2F2 100%) repeat scroll 0% 0%;
-border: 1px solid #ddd;
+background: transparent linear-gradient(to bottom, #fff 0%, #e2e2e2 100%) repeat scroll 0% 0%;
+border: solid 1px #ccc;;
 }
 
 
@@ -365,15 +413,15 @@ border: 1px solid #ddd;
 .dc-inline-link {
   cursor: pointer;
   color: #222;
-  padding: 4px;
+  padding: 5px 4px 4px;
   background: #fff;
   border: 2px solid #222;
   border-radius: 5px;
 }
 
 .dc-inline-link:hover {
-  color: #c43;
-  border: 2px solid #c43;
+  color: rgba(76,154,255, 1);
+  border: 2px solid rgba(76,154,255, 1);
 }
 
 .skip-next {
@@ -391,18 +439,20 @@ border: 1px solid #ddd;
 .skip-next a:link, .skip-next a:active, .skip-next a:visited { color: #333; text-decoration: none; background: transparent;}
 .skip-next a:hover { text-decoration: none; color: #c43; }
 
-.dc-animate-button {
-  background: transparent linear-gradient(to bottom, #eee 0%, #eee 100%) repeat scroll 0% 0% !important; 
+.dc-window-open {
+  padding: 8px 7px 6px;
+}
+.dc-window-open i {
+  padding-right: 4px;
 }
-
 .dc-link-submit {
   text-align: left;
-  padding: 6px;  
+  padding: 8px 6px 6px;
 
   border-radius: 2px;
   background-color: #eee;
-  background: transparent linear-gradient(to bottom, #FFF 0%, #F2F2F2 100%) repeat scroll 0% 0%;
-  border: 1px solid #eee;
+  background: transparent linear-gradient(to bottom, #fff 0%, #e2e2e2 100%) repeat scroll 0% 0%;
+  border: 1px solid #ddd;
 }
 
 .dc-link-submit .fa {
@@ -414,62 +464,87 @@ border: 1px solid #ddd;
 }
 .dc-link-submit:hover {
   color: #000;
-  background: #ddd;
+  border: 1px solid rgba(76,154,255, 1);
+  box-shadow: inset 0px 0px 0px 1px rgba(76,154,255, 1);  
   transition: 0.3s;
 }
 .dc-link-submit:hover .dc-submit {
   color: #000;
   transition: 0.3s;
-   background: #ddd;
+
 
 }
 .dc-submit {
   text-decoration: none;
-  border: 0px;
+  border: none;
   color: #666;
   font-weight: bold;
-  box-shadow: none;
-/*  background: none;*/
   padding: 0px 2px;
   border-radius: 0px;
-  background: transparent linear-gradient(to bottom, #FFF 0%, #F2F2F2 100%) repeat scroll 0% 0%;
+  background: transparent;
 } 
 
 .dc-submit:hover { 
   cursor: pointer;
   text-decoration: none;
   color: #fff;
-  background-color: #000; 
 }
 
 /* Pagination */
-#result .pagination span {
-  border: 1px solid #ddd;
-  padding: 4px 4px 3px 6px;
+
+.dc-paginate .pagination {
+  display: flex;
+}
+.dc-paginate .pagination span {
+  border: solid 1px #ccc;  
   margin-left: 1px;
-  background: transparent linear-gradient(to bottom, #FFF 0%, #F2F2F2 100%) repeat scroll 0% 0%;  
+  background: transparent linear-gradient(to bottom, #fff 0%, #e2e2e2 100%) repeat scroll 0% 0%;  
   border-radius: 1px;
 }
-#result .pagination span a {
+.dc-paginate .pagination span.page.gap {
+padding: 1px 4px 4px 4px;
+color: #aaa;
+}
+
+.dc-paginate .pagination span.next a, .dc-paginate .pagination span.last a,
+.dc-paginate .pagination span.prev a, .dc-paginate .pagination span.first a {
+  padding: 3px 6px 4px 7px;  
+}
+.dc-paginate .pagination span a {
+  display: block;
   color: #888;
+  padding: 4px 6px 3px 7px;
   text-decoration: none;
 }
 
-#result .pagination span:hover > a {
+.dc-paginate .pagination span.page.current {
+  padding: 4px 6px 3px 7px;
+}
+
+.dc-paginate .pagination span:hover > a {
   color: #000;
 }
 
-#result .pagination .current {
+.dc-paginate .pagination span:hover {
+  border: 1px solid rgba(76,154,255, 1);
+  outline: 1px solid rgba(76,154,255, 1);
+}
+
+.dc-paginate .pagination .current {
   background: #888;
   color: #fff;
   border: 1px solid #888;
 }
 
+.dc-paginate .pagination .current:hover  {
+  border: solid 1px #888;
+  outline: none;
+}
 
 .dc-title {
   font-weight: bold;
   font-size: 1.4em;
-  color: #66a;
+  color: #338;
   padding: 5px 1px;
   border-spacing: 0px;
   margin: 0px;
@@ -492,7 +567,7 @@ border: 1px solid #ddd;
   width: 99.8%;
   padding: 0px;
   padding-top: 4px;
-  border: 1px solid #ddd;
+  border: 1px solid #eee;
   border-radius: 2px; 
   background-color: #fcfcfc;
 }
@@ -509,7 +584,7 @@ border: 1px solid #ddd;
   color: darkgreen;  
   border: 1px solid #b2dba1;  
   border-radius: 2px;
-  margin: 4px;
+  margin: 2px 0;
 }
 
 .dc-form-warning {
@@ -519,7 +594,7 @@ border: 1px solid #ddd;
   color: #c84;  
   border: 1px solid #f5e79e;  
   border-radius: 2px;
-  margin: 4px;
+  margin: 2px 0;
 }
 
 .dc-form-error {
@@ -530,7 +605,11 @@ border: 1px solid #ddd;
   color: #a94442;
   border: 1px solid #dca7a7;
   border-radius: 2px;
-  margin: 4px;
+  margin: 2px 0;
+}
+
+.dc-form-updates {
+  display: none;
 }
 
 .field_with_errors {
@@ -569,10 +648,10 @@ border: 1px solid #ddd;
   text-align: left;
   padding: 3px 2px;
   z-index: 10;
-/*  
-  background-color: #f4f4f4;
-  border-bottom: 1px solid #eee;
-*/
+}
+
+.dc-form-field .action li {
+  display: inline-flex;
 }
 
 .dc-number {
@@ -584,55 +663,66 @@ border: 1px solid #ddd;
   font-size: 14px;
   font-weight: normal;
   color: #222;
-  padding: 6px 3px;
-  border: 2px solid #ddd;
+  padding: 6px 4px;
+  border: solid 1px #ccc;;
   background-color: #eee;
   border-radius: 2px;
 }
 
+.tree-select.dc-readonly {
+ display: block;
+ background-color: #eee;
+}
+
 .dc-color-odd {
   background-color: #fcfcfc;  
-/*  border-bottom: solid 1px #eee; */
 }
 .dc-color-even {
   background-color: #fcfcfc;  
-/*  border-bottom: solid 1px #eee;  */
 }
-
 .dc-form-ul {
-padding: 2px;
+padding: 2px 0;
 margin-top: 6px;
-/*
-margin-bottom: 3px;
-border-bottom: 1px solid #eee;
-*/
-
+margin-bottom: -3px;
 }
 
+.dc-width-10 {width: 10%;}
+.dc-width-14 {width: 14%;}
+.dc-width-21 {width: 21%;}
+.dc-width-85 {width: 85%;}
+.dc-width-100 {width: 100%;}
+
 .dc-spinner {
   float:left;
   padding: 6px 0;
+  display: none;
 }
 
 .dc-form-li {
-  display:inline; 
+  display:inline-block; 
+  white-space: nowrap;
   list-style:none;
-  color: #888;
+  color: #666;
   text-decoration: none;
   text-align: center;
   font-weight: bold;
+  line-height: 1rem;
 
-  padding:3px 15px;
-  border-radius: 4px 4px 0px 0px;
-  background: #eee;
+  padding:4px 15px;
+  background: #e8e8e8;
   margin-right: 2px;
+  border-left: 1px solid #ddd;
+  border-right: 1px solid #ddd;
+  border-radius: 4px 4px 0px 0px;
 }
 
 .dc-form-li:hover, .dc-form-li-selected {
   cursor: pointer;
-  color: #fff;
-  background: #888;
-  padding:4px 15px 3px 15px;
+  color: #222;
+  background: #fff;
+  border-top: 3px solid rgba(76,154,255, 1);
+  border-left: 1px solid #eee;
+  border-right: 1px solid #eee;
 }
 
 .dc-odd {
@@ -643,15 +733,34 @@ border-bottom: 1px solid #eee;
 }
 
 .dc-separator {
-padding: 5px 0;
-border-top: 2px solid #ddd;
+margin: 5px 0;
+border-top: 1px solid #ddd;
+}
+
+/** Form head **/
+.dc-head  {
+ padding: 3px 6px; 
+ font-size: 1.2em;
+ line-height: 1.6em;
+ font-weight: bold;
+ background-color: #e5f2ff;
+ background-color: rgba(76,154,255, 0.2);
+ border: 1px dotted #ccc;
+}
+.dc-head .dc-row {
+display: flex;
+}
+.dc-head .dc-column {
+}
+.dc-head .text {
+  font-weight: normal;  
 }
 
 /*** CMS toggle button */
 .cms-toggle {
   z-index: 1000000;
   position: fixed;
-  top: 1px; left: 1px;
+  top: 4px; left: 4px;
   padding: 4px;
   color: #fff;
   background-color: #000;
@@ -693,7 +802,7 @@ background: transparent;
 #cmsedit-div a:hover { color: #000; }
 
 #cmsedit-div #record_select  {
-border: 2px solid #aaa;
+border: 1px solid #aaa;
 border-radius: 2px;
 font-size: 1.2em;
 }
@@ -706,7 +815,7 @@ font-size: 1.2em;
 }
 
 .cmsedit-top #menu {
-  padding: 4px 4px 8px 4px;
+  padding: 4px 4px 8px 4rem;
   color: #666;
   background-color: #fff;
   border-bottom: 3px solid #666;
@@ -799,12 +908,16 @@ display: none;
 .dc-journal {width: 99%; }
 .dc-journal div { padding: 4px;}
 
+.dc-comment {
+  font-size: 1.1em;
+  line-height: 1.4em;
+}
 /****** jquery ui-autocomplete widget ***************/
 .ui-autocomplete-input {
   font-style: italic;
   padding: 6px;
   border-radius: 2px;
-  border: solid 2px #9c9;
+  border: solid 1px #9c9;
 /*  background: linear-gradient(#8d8 0%, #ffe 15%, #fff 80%); */
 }
 
@@ -820,14 +933,14 @@ border: 1px solid #fff;
 .ui-autocomplete .ui-menu-item .ui-state-active {
 padding: 3px;  
 background-color: #eee;
-border: 1px solid #ddd;
+border: solid 1px #ccc;;
 color: #000;
 }
 
 .ui-autocomplete-border {
   display: inline-block;
   border-radius: 2px;
-  border: solid 2px #ddd;
+  border: solid 1px #ccc;;
   padding: 8px;
   background-color: #fff;
 }
@@ -867,7 +980,7 @@ display: none;
 padding:4px;
 position:absolute;
 background-color: #eee;
-border: 1px solid #ddd;
+border: solid 1px #ccc;;
 border-radius: 4px;
 z-index: 100;
 list-style-type: none;
@@ -879,7 +992,8 @@ border: 1px solid #eee;
 }
 .drgcms_popmenu_item:hover {
 background-color: white;
-border: 1px solid #ddd;
+border: 1px solid rgba(76,154,255, 1);
+box-shadow: inset 0px 0px 0px 1px rgba(76,154,255, 1);
 border-radius: 2px;
 }
 
@@ -895,7 +1009,7 @@ padding: 0px;
 padding: 4px;
 background-image: none;
 border-radius: 2px;
-border: 2px solid #669;
+border: 1px solid #669;
 background-color: #fff;
 }
 
@@ -912,50 +1026,43 @@ overflow-x:hidden;
 /******************* action-menu *********************/
 
 #dc-action-menu {
-padding: 2px 0px 2px 0px;
+padding: 2px 0px 6px 0px;
 font-weight: bold;
 color: #666;
-display: flex;
+display: inline-flex;
 }
 
 #dc-action-menu ul {
 list-style:none;
 padding: 0px;
-margin: 6px 2px 4px 2px; 
+/*margin: 8px 2px 4px 2px; */
+line-height: 2.2rem;
 }
 
 .dc-action-menu  {
-list-style:none;
+display: inline-table;
 }
 
 .dc-action-menu li {
 display:inline; 
 position:relative;
+white-space: nowrap;
 list-style:none;
-padding: 6px;
+padding: 7px;
 margin-right: 4px;
 border-radius:2px;
 z-index: 1;
 
-background: transparent linear-gradient(to bottom, #FFF 0%, #F2F2F2 100%) repeat scroll 0% 0%;
-border: 1px solid #eee;
-}
-
-
-.dc-action-menu li:hover {
-background: #ddd;
+background: transparent linear-gradient(to bottom, #fff 0%, #e2e2e2 100%) repeat scroll 0% 0%;
 border: 1px solid #ddd;
-color: #000;
-transition: 0.3s;  
 }
 
-
 .dc-action-menu ul {
-margin-top: 1px;
-/*background:#fff; */
-position:absolute;
-left:-9999px; 
-border-radius: 2px;
+  margin: -3px 0 0 2px;
+  position: absolute;
+  left: -9999px;
+  border-radius: 1px;
+  line-height: 1.2em !important;
 }
 
 .dc-action-menu ul li {
@@ -967,19 +1074,21 @@ white-space: nowrap;
 background: #fff;
 border: 0;
 color: #888;
-/*background: transparent linear-gradient(to bottom, #FFF 0%, #F2F2F2 100%) repeat scroll 0% 0%;*/
 }
 
 .dc-action-menu ul a {
 white-space:nowrap;
+padding: 7px;
 }
 
 .dc-action-menu li:hover ul { 
-left:-3px;
-margin-top:3px;
-background-color: #fff;
-border: 1px solid #ddd;
-/*box-shadow: 1px 1px 2px #ccc;*/
+  left:-3px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  z-index: 1000000;
+}
+
+.dc-action-menu ul ul {
 }
 
 .dc-action-menu li:hover ul li a { 
@@ -991,7 +1100,7 @@ color: #222;
 }
 .dc-action-menu li:hover ul li:hover {
 border: 0px;
-background: #ddd;
+background: #eee;
 border-radius: 2px;
 }
 
@@ -1000,17 +1109,55 @@ min-width: 200px;
 max-width: 400px;
 }
 
-.menu-filter a {
+.menu-filter li {
 color: #888 !important;
 }
-.menu-filter a:hover {
+.menu-filter li:hover {
 color: #000 !important;
 background-color: transparent;
 }
 
 .menu-filter hr {margin: 0px;}
-.filter_field {
 
+.dc-action-menu .no-background {
+  background: #fff;
+  border: none;
+  padding: 0;
+  white-space: nowrap;
+}
+.dc-action-menu .no-background .label {
+  padding-left: 4px;
+}
+
+.dc-action-menu .filter_field i {
+  padding-right: 8px;
+}
+
+.dc-action-menu .filter_field i:hover {
+  cursor: pointer;
+  color: #ccc;
+}
+.filter-popup {
+  background-color: #fff;
+  box-shadow: 2px 2px 5px #666;
+}
+
+.filter-popup div {
+  padding: 5px 10px;
+  text-align: center;
+  text-transform: uppercase; 
+  background-color: #222;
+  color: #fff;
+}
+
+.filter-popup li {
+  padding: 4px 8px;
+}
+
+.filter-popup li:hover {
+  background-color: #aaa;
+  color: #fff;
+  cursor: pointer;
 }
 
 /************************** info popup *************************/
@@ -1021,7 +1168,7 @@ font-size: 11px;
 }
 
 #dc-document-info:hover {
-color: darkred;
+color: rgba(76,154,255, 1);
 cursor: pointer;
 }
 
@@ -1030,7 +1177,7 @@ text-align: left;
 padding:4px;
 position:absolute;
 background-color: #f8f8f8;
-border: 1px solid #ddd;
+border: solid 1px #ccc;;
 border-radius: 2px;
 z-index: 100;
 }
@@ -1051,6 +1198,7 @@ background: #fff;
 display: none;
 padding: 10px;
 }
+
 #drgcms_filter h1 {
 font-size: 1.8em; 
 padding-top: 5px;
@@ -1072,7 +1220,28 @@ color: #669;
   max-width: 50%;
   background-color: #fff;
   padding: 10px;
-  border: 2px solid #ddd;
+  border: solid 1px #ccc;;
+}
+
+/**  Radio button input field **/
+
+.dc-radio {
+  background-color: #fff;
+  border: solid 1px #ccc;;
+  padding: 5px 0 7px 0;
+  display: inline-table;
+}
+.dc-radio div {
+  font-size: 1.1em;
+  padding: 0 8px 6px 0;
+  white-space: nowrap;
+}
+.dc-radio.dc-inline div {
+  display: inline;
+}
+
+.dc-radio input {
+  vertical-align: bottom;
 }
 
 /****** MOBILE DEVICE *****/
@@ -1080,13 +1249,16 @@ color: #669;
   .dc-form .row-div {
     display: block;
   }
-  .dc-form-field {
-    width: 100%;
-  }
+
   .dc-form-label {
     text-align: left;
     width: 100%;
     padding-bottom: 2px;
     white-space: nowrap;
   }
+  
+  .dc-form-li {margin-top: 3px;}
+  .dc-menu li {margin-top: 2px;}
+  
+  .dc-width-10, .dc-width-14, .dc-width-21, .dc-width-85, .dc-width-100 {width: 100%;}
 }