#28 - most of elements are now flat

inc/js/jquery.webForms.js

@@ -246,7 +246,7 @@
                 if ('relative' != eWrapper.css('position') && 'absolute' != eWrapper.css('position'))
                     eWrapper.css('position', 'relative');
 
-                eWrapper.append('<div style="display:none;" class="bx-form-input-btn-cross"><i class="sys-icon remove"></i></div>');
+                eWrapper.append('<div style="display:none;" class="bx-form-input-btn-cross bx-def-font-grayed"><i class="sys-icon remove"></i></div>');
 
                 eInput.css('padding-right', parseInt(eInput.css('padding-right')) + 16 + 'px');
 

template/_header.html

@@ -35,7 +35,7 @@
             corners: 1, // Corner roundness (0..1)
             rotate: 0, // The rotation offset
             direction: 1, // 1: clockwise, -1: counterclockwise
-            color: '#165ea1', // #rgb or #rrggbb or array of colors
+            color: '#3a8686', // #rgb or #rrggbb or array of colors
             speed: 1, // Rounds per second
             trail: 60, // Afterglow percentage
             shadow: false, // Whether to render a shadow

template/_sub_header.html

@@ -44,7 +44,7 @@
 
 <div id="bx-menu-main-bar-wrapper">
 
-    <div id="bx-menu-main-bar">
+    <div id="bx-menu-main-bar" class="bx-def-color-bg-sec">
 
         <div class="bx-page-wrapper bx-def-padding-sec-left bx-def-padding-sec-right bx-def-page-width">
 

template/css/common.css

@@ -4,7 +4,7 @@
 a {
     text-decoration:none;
     outline:none;
-    color:#006699;
+    color:#387877;
 }
 
 a:hover {
@@ -167,7 +167,7 @@ blockquote {
     text-align:center;
     color:#fff;
     font-weight:bold;
-    font-size:14px;
+    font-size:1rem;
     padding:10px;
     text-transform:uppercase;
 }
@@ -182,8 +182,8 @@ blockquote {
     margin-left:auto;
     margin-right:auto;
 
-    background-color:rgb(148, 189, 233);
-    background-color:rgba(128, 169, 213, 0.5);
+    background-color:#b9ddcc;
+    background-color:rgba(121, 189, 154, 0.5);
 
 	border-radius:5px;
 	-moz-border-radius:5px;
@@ -208,50 +208,54 @@ blockquote {
 /* --------------- button */
 
 .bx-btn {
+    position:relative;
 	display:block;	
     float:left;
 
-    height:38px; 
-    margin:0;
-    padding:0px 12px 0px 12px;
-
-    box-sizing: border-box;
     -moz-box-sizing: border-box;
     -ms-box-sizing: border-box;
+    box-sizing: border-box;
 
-    line-height:36px;
-    font-size:14px;
-	color:#333;
-    font-weight:bold;
-	text-decoration:none;	
-    text-shadow:0px 1px 0px rgba(255, 255, 255, 1);
+    height:36px;
+    height:2.2rem;
+    margin:0;
+    padding:0px 12px 0px 12px;
 
+    line-height:34px;
+    line-height:2.1rem;
+    font-size:1rem;
+	color:#fff;
+	text-decoration:none;
     cursor: pointer;
 
-	border-color:#c8c8c8 #b8b8b8 #a8a8a8 #b8b8b8;
-	border-style:solid;
-	border-width:1px;
+    background-color: #6caa8a;
 
+    border:none;
 	border-radius:3px;
 	-moz-border-radius:3px;
 	-webkit-border-radius:3px;	
 
-	box-shadow:0px 1px 0px rgba(128, 128, 128, 0.1);
-	-moz-box-shadow:0px 1px 0px rgba(128, 128, 128, 0.1);
-	-webkit-box-shadow:0px 1px 0px rgba(128, 128, 128, 0.1);
-
-    background-color: #ececec;
-    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#e3e3e3));
-    background-image: -webkit-linear-gradient(top, #fff, #e3e3e3); 
-    background-image: -moz-linear-gradient(top, #fff, #e3e3e3); 
-    background-image: -ms-linear-gradient(top, #fff, #e3e3e3); 
-    background-image: -o-linear-gradient(top, #fff, #e3e3e3); 
-    background-image: linear-gradient(top, #fff, #e3e3e3);
-	filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#ffffff', endColorstr='#e3e3e3', gradientType='0');
+    -webkit-transition: background-color 0.2s ease-in-out;
+    -moz-transition: background-color 0.2s ease-in-out;
+    -o-transition: background-color 0.2s ease-in-out;
+    transition: background-color 0.2s ease-in-out;
+}
+.bx-btn:active,
+.bx-btn:hover {	
+    background-color: #79bd9a;
+    text-decoration:none;
 }
 .bx-btn:first-child {
     margin-left:0;
 }
+button.bx-btn,
+input.bx-btn {    
+	padding-top:0px;
+	padding-bottom:0px;
+    font-size:1rem;
+    color:#fff;
+}
+
 .bx-btn img {
     width:16px;
     height:16px;
@@ -261,105 +265,46 @@ blockquote {
     text-decoration:none;
 }
 .bx-btn .sys-icon {
-    font-size:16px;
+    font-size:1.2em;
 }
 .bx-btn .sys-icon-bigger {
-    font-size:20px;
-}
-
-
-button.bx-btn,
-input.bx-btn {    
-	padding-top:0px;
-	padding-bottom:0px;
-    font-size:14px;
+    font-size:1.4em;
 }
-.bx-btn:hover {	
-    color:#000;
-    text-decoration:none;
-
-    border-color:#aaa #999 #888 #999;
-
-	box-shadow:0px 1px 2px rgba(128, 128, 128, 0.4);
-	-moz-box-shadow:0px 1px 2px rgba(128, 128, 128, 0.4);
-	-webkit-box-shadow:0px 1px 2px rgba(128, 128, 128, 0.4);
 
-    -webkit-transition: all 0.2s linear;
-    -moz-transition: all 0.2s linear;
-    -o-transition: all 0.2s linear;
-}
-.bx-btn:active {
-    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e0e0e0), to(#fafafa));
-    background-image: -webkit-linear-gradient(top, #e0e0e0, #fafafa); 
-    background-image: -moz-linear-gradient(top, #e0e0e0, #fafafa); 
-    background-image: -ms-linear-gradient(top, #e0e0e0, #fafafa); 
-    background-image: -o-linear-gradient(top, #e0e0e0, #fafafa); 
-    background-image: linear-gradient(top, #e0e0e0, #fafafa);
-	filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#e0e0e0', endColorstr='#fafafa', gradientType='0');
-}
-
-.bx-btn-small {
-
-    height:22px; 
+.bx-btn.bx-btn-small {
+    height:24px; 
+    height:1.6rem; 
     padding-left:0px 8px 0px 8px;
 
-    line-height:20px;
-    font-size:11px;
+    line-height:24px;
+    line-height:1.5rem;
+    font-size:0.9rem;
 }
 
-.bx-btn-primary {
-    background-color: #ddf;
-    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f5f5ff), to(#c8d8f8));
-    background-image: -webkit-linear-gradient(top, #f5f5ff, #c8d8f8); 
-    background-image: -moz-linear-gradient(top, #f5f5ff, #c8d8f8); 
-    background-image: -ms-linear-gradient(top, #f5f5ff, #c8d8f8); 
-    background-image: -o-linear-gradient(top, #f5f5ff, #c8d8f8); 
-    background-image: linear-gradient(top, #f5f5ff, #c8d8f8);
-	filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#f5f5ff', endColorstr='#c8d8f8', gradientType='0');
+.bx-btn.bx-btn-primary {
+    background-color: #357877;
 }
-.bx-btn-primary:active { 
-
-    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c8d8f8), to(#f0f0f9));
-    background-image: -webkit-linear-gradient(top, #c8d8f8, #f0f0f9); 
-    background-image: -moz-linear-gradient(top, #c8d8f8, #f0f0f9); 
-    background-image: -ms-linear-gradient(top, #c8d8f8, #f0f0f9); 
-    background-image: -o-linear-gradient(top, #c8d8f8, #f0f0f9); 
-    background-image: linear-gradient(top, #c8d8f8, #f0f0f9);
-	filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#c8d8f8', endColorstr='#f0f0f9', gradientType='0');
+.bx-btn.bx-btn-primary:hover,
+.bx-btn.bx-btn-primary:active { 
+    background-color: #3a8686;
 }
 
-.bx-btn-disabled {
-    color:#999;
-}
-.bx-btn-disabled i {
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; 
-    filter: alpha(opacity=40); 
-    -moz-opacity: 0.4;
-    -khtml-opacity: 0.4;
-    opacity: 0.4;
+.bx-btn.bx-btn-disabled:active,
+.bx-btn.bx-btn-disabled:hover,
+.bx-btn.bx-btn-disabled {
+    background-color: #ddd;
 }
-.bx-btn-disabled:hover {
-    color:#999;
 
-	border-color:#c8c8c8 #b8b8b8 #a8a8a8 #b8b8b8;
-
-	box-shadow:0px 1px 0px rgba(128, 128, 128, 0.1);
-	-moz-box-shadow:0px 1px 0px rgba(128, 128, 128, 0.1);
-	-webkit-box-shadow:0px 1px 0px rgba(128, 128, 128, 0.1);
-}
-
-.bx-btn-symbol {
+.bx-btn.bx-btn-symbol {
     font-family: "Times New Roman", Georgia, Serif;
-    font-size:24px; 
+    font-size:1.3rem;
     line-height:32px;
 }
-
-.bx-btn-symbol:hover {
+.bx-btn.bx-btn-symbol:hover {
     text-decoration:none;
 }
-
-.bx-btn-symbol-small {
-    font-size:18px; 
+.bx-btn.bx-btn-symbol-small {
+    font-size:1rem;
     line-height:16px; 
 }
 
@@ -367,17 +312,21 @@ input.bx-btn {
     margin-left:0px;
     margin-right:0px;
 }
-
-.bx-btn-group .bx-btn + .bx-btn {
-    border-left:none;
+.bx-btn-group .bx-btn:not(:first-child):after {
+    content:"";
+    position:absolute;
+    display:block;
+    top:0px;
+    left:-0.05em;
+    width:0.1em;
+    height:100%;
+    background-color:rgba(255,255,255,0.1);
 }
-
 .bx-btn-group .bx-btn + .bx-btn:not(:last-child) {
 	border-radius:0px;
 	-moz-border-radius:0px;
-	-webkit-border-radius:0px;
+	-webkit-border-radius:0px;    
 }
-
 .bx-btn-group .bx-btn:first-child {
     -webkit-border-top-right-radius: 0px;
     -webkit-border-bottom-right-radius: 0px;
@@ -386,7 +335,6 @@ input.bx-btn {
     border-top-right-radius: 0px;
     border-bottom-right-radius: 0px;
 }
-
 .bx-btn-group .bx-btn:last-child {
     -webkit-border-top-left-radius: 0px;
     -webkit-border-bottom-left-radius: 0px;

template/css/default.css

@@ -201,8 +201,7 @@
 
 /* colors */
 .bx-def-color-bg-page {
-    background-color:#f3f4fa;
-    background-image:url(../images/bg-page.png);
+    background-color:#fff;
 }
 .bx-def-color-bg-block {
     background-color:#fff;
@@ -216,12 +215,13 @@
 
 .bx-def-color-bg-hl,
 .bx-def-color-bg-hl-hover:hover {
-    background-color: rgb(220, 220, 255);
-    background-color: rgba(200, 200, 255, 0.2);
+    background-color: #f3fdec;
+    background-color: rgba(196, 248, 156, 0.2);
 }
 
 .bx-def-color-bg-active {
-    background-color: rgba(255, 234, 193, 0.5);
+    background-color: #e6fad7;
+    background-color: rgba(196, 248, 156, 0.4);
 }
 
 /* hr */
@@ -301,31 +301,23 @@
 	-webkit-border-radius:3px;	
 }
 
-/* round corders with border to use in INPUT areas */
-.bx-def-round-corners-with-border {
-    border-width: 1px;
-    border-style: solid;
-    border-color: #B2B2B2 #D9D9D9 #D9D9D9 #B2B2B2;
-
-	border-radius:3px;
-	-moz-border-radius:3px;
-	-webkit-border-radius:3px;	
-}
-
 /* fonts */
 
 /* NOTE: bx-def-font, h1, h2, h3 styles were copied to editor.css */
 
 .bx-def-font {
-    font-family: Helvetica Neue, Helvetica, Arial, Verdana, sans-serif;
+    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
+    font-weight: 300;
     font-size:14px;
-    font-size:0.875rem;
+    font-size:1rem;
     color:#333;
 }
 
 .bx-def-font-inputs {
-    font-family: Helvetica Neue, Helvetica, Arial, Verdana, sans-serif;
-    font-size:0.875;
+    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
+    font-weight: 300;
+    font-size:14px;
+    font-size:1rem;
     color:#333;
 }
 
@@ -335,38 +327,38 @@
 
 .bx-def-font-small {
     font-size:12px;
-    font-size:0.75rem;
+    font-size:0.8rem;
 }
 
 .bx-def-font-middle {
     font-size:13px;
-    font-size:0.85rem;
+    font-size:0.9rem;
 }
 
 .bx-def-font-large {
     font-size:16px;
-    font-size:1.125rem;
+    font-size:1.2rem;
 }
 
 h1,
 .bx-def-font-h1 {
     font-size:24px;
     font-size:2.4rem;
-    font-weight:bold;
+    font-weight:normal;
 }
 
 h2,
 .bx-def-font-h2 {
     font-size:18px;
     font-size:1.6rem;
-    font-weight:bold;
+    font-weight:normal;
 }
 
 h3,
 .bx-def-font-h3 {
     font-size:16px;
-    font-size:1.1rem;
-    font-weight:bold;
+    font-size:1.2rem;
+    font-weight:normal;
 }
 
 /* image/thumbnail default styles */

template/css/forms.css

@@ -31,6 +31,7 @@
 .bx-form-section {
     margin:0;
     border-width:2px;
+    border-width:0.15rem;
     border-bottom:none;
     border-left:none;
     border-right:none;
@@ -103,8 +104,8 @@
 
 .bx-form-section-toggler .sys-icon {
     margin:5px 0 0 5px;
-    font-size:18px;
-    line-height:16px;
+    font-size:1.2rem;
+    line-height:1.2rem;
 }
 
 /* form inputs */
@@ -121,27 +122,27 @@
 .bx-form-input-textarea,
 .bx-form-input-password,
 .bx-form-input-text {
-    height:38px;
-    width:100%;    
-    padding:9px 8px 9px 8px;
 
+    height:36px;
+    height:2.2rem;
+    width:100%;
     
     -moz-box-sizing: border-box;
     -ms-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
 
-    line-height:20px; 
-    vertical-align:middle;
-    font-size:14px;
+    padding:7px 3px 7px 3px;
+    padding:0.2rem 0.4rem;
 
-	border-color:#c8c8c8;
-	border-style:solid;
-	border-width:1px;    
+    vertical-align:middle;
 
-	border-radius:3px;
-	-moz-border-radius:3px;
-	-webkit-border-radius:3px;	    
+    border:2px solid #79bd9a;
+    border:0.15rem solid #79bd9a;
+	
+    -webkit-border-radius:0.3rem;
+	-moz-border-radius:0.3rem;	
+    border-radius:0.3rem;
 
     outline:none;
 
@@ -151,11 +152,7 @@
     filter: alpha(opacity=90); 
     -moz-opacity: 0.9;
     -khtml-opacity: 0.9;
-    opacity: 0.9;
-    
-	-moz-box-shadow:inset 0px 1px 1px 0px rgba(128, 128, 128, 0.3), 0px 1px 0px 0px rgba(255, 255, 255, 0.8);
-	-webkit-box-shadow:inset 0px 1px 1px 0px rgba(128, 128, 128, 0.3), 0px 1px 0px 0px rgba(255, 255, 255, 0.8);
-    box-shadow:inset 0px 1px 1px 0px rgba(128, 128, 128, 0.3), 0px 1px 0px 0px rgba(255, 255, 255, 0.8);
+    opacity: 0.9;    
 }
 
 .bx-form-input-slider:focus,
@@ -166,7 +163,7 @@
 .bx-form-input-textarea:focus,
 .bx-form-input-password:focus,
 .bx-form-input-text:focus {
-	border-color:#a8a8b0;
+	border-color:#6caa8a;
 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
     filter: alpha(opacity=100); 
@@ -174,10 +171,6 @@
     -khtml-opacity: 1.0;
     opacity: 1.0;
 
-	-moz-box-shadow:inset 0px 1px 1px 0px rgba(128, 128, 128, 0.3), 0px 0px 1px 2px rgba(255, 255, 255, 0.8), 0px 0px 10px rgba(128, 128, 192, 0.5);
-	-webkit-box-shadow:inset 0px 1px 1px 0px rgba(128, 128, 128, 0.3), 0px 0px 1px 2px rgba(255, 255, 255, 0.8), 0px 0px 10px rgba(128, 128, 192, 0.5);
-    box-shadow:inset 0px 1px 1px 0px rgba(128, 128, 128, 0.3), 0px 0px 1px 2px rgba(255, 255, 255, 0.8), 0px 0px 10px rgba(128, 128, 192, 0.5);
-
     -webkit-transition: all 0.2s linear;
     -moz-transition: all 0.2s linear;
     -o-transition: all 0.2s linear;
@@ -191,22 +184,23 @@
 }
 
 .bx-form-input-textarea {
-    padding:8px;
-    height:135px;
+    padding:0.5rem;
+    height:150px;
+    height:10rem;
 
     line-height:normal;
 }
 
 .bx-form-input-datepicker {
-    width:120px;
+    width:7.5rem;
 }
 
 .bx-form-input-datetime {
-    width:180px;
+    width:10.2rem;
 }
 
 .bx-form-input-number {
-    width:120px;
+    width:6rem;
 }
 
 .bx-form-input-wrapper-slider,
@@ -374,15 +368,15 @@
     position:absolute;
     top:0px;
     left:0px;
-    width:16px;
-    height:16px;
+    width:1.2rem;
+    height:1.2rem;
     
     cursor:pointer;
 }
 
 .bx-form-input-btn-cross .sys-icon {
-    line-height:16px;
-    font-size:18px;
+    line-height:1.2rem;
+    font-size:1.2rem;
     text-decoration:none;
 }
 

template/css/general.css

@@ -9,14 +9,9 @@
     position:fixed;
     width:100%;
     height:50px;
-    min-height:50px;
     z-index:900;
 
-    border-bottom: 1px solid #383d66;
-
-    background-image: url(../images/bg-toolbar.png);
-    background-repeat: repeat-x;
-    background-color:#0764a7;
+    background-color:#3B8686;
 
     opacity:0;
 
@@ -46,32 +41,33 @@
 }
 
 #bx-logo-container {
-    min-height: 44px;
-    padding-top: 8px; 
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    box-sizing: border-box;
+
+    padding-top: 5px; 
+    margin:0 50px 0 50px;
+
     vertical-align: middle;
     text-align: center; 
+    color: #fff;
+
+    overflow:hidden;
+    text-overflow:ellipsis;
 }
 
 #bx-logo-container a {  
     color: #fff;
     text-decoration:none;
     font-size:2em;
-    font-weight:bold;
 }  
 
 /* --------------- menu bar */
 
 #bx-menu-main-bar-wrapper {
     padding-top:50px;
-    border-bottom:1px solid rgba(255, 255, 255, 0.8);
-}
-
-#bx-menu-main-bar {
-    background-color:#ffffff;
-    border-bottom:1px solid #d0d0d0;
 }
 
-
 /* --------------- content */
 
 

template/css/icons.css

@@ -55,7 +55,7 @@
 }
 .sys-icon.remove:before,
 .sys-icon.times:before {
-  content: "\f00d"; color:#d00;
+  content: "\f00d";
 }
 .sys-icon.search-plus:before {
   content: "\f00e";

template/css/menu.css

@@ -120,6 +120,7 @@ ul.bx-menu-verlit {
 
 #bx-menu-main-container {
     height:36px;
+    height:2.2rem;
     white-space: nowrap;
     overflow:hidden;    
 }
@@ -127,12 +128,14 @@ ul.bx-menu-verlit {
 #bx-menu-main-container-scroller {
     overflow:auto;
     height:60px;
+    height:4rem;
 }
 
 #bx-menu-main-submenu,
 #bx-menu-main {
     display:inline-block;
     line-height:36px;
+    line-height:2.2rem;
     vertical-align:top;
 }
 
@@ -142,8 +145,7 @@ ul.bx-menu-verlit {
 
 .bx-menu-main-submenu-div .sys-icon {
     font-size:32px;
-    color:#bbb;
-    vertical-align:middle;
+    font-size:2rem;
 }
 
 ul.bx-menu-main-submenu,
@@ -166,10 +168,13 @@ ul.bx-menu-main {
 .bx-menu-main li .sys-icon,
 .bx-menu-main-submenu li a {
     text-decoration:none;
-    vertical-align:middle;
+    font-weight:300;
+    font-size:16px;
+    font-size:1.2rem;
 }
 .bx-menu-main li .sys-icon {
     font-size:32px;
+    font-size:2rem;
 }
 
 .bx-menu-main-submenu li.bx-menu-tab-active a,
@@ -211,7 +216,6 @@ ul.bx-menu-toolbar li a {
 
     line-height:32px;
     font-size: 16px;
-    font-weight: bold;
     text-align: center;
     vertical-align:middle;
     color: #fff;

template/menu_main.html

@@ -1,3 +1,3 @@
-<ul id="bx-menu-main" class="bx-menu-main bx-menu-object-__object__ bx-def-font-h3 bx-clearfix">
+<ul id="bx-menu-main" class="bx-menu-main bx-menu-object-__object__ bx-clearfix">
     <li class="bx-def-padding-sec-right bx-def-padding-sec-left bx-def-color-bg-hl-hover"><!-- TODO: maybe will be used later <i class="sys-icon __icon__ bx-def-margin-sec-right"></i> --><a href="__link__">__title__</a></li>
 </ul>

template/menu_main_submenu.html

@@ -1,5 +1,5 @@
-<ul id="bx-menu-main-submenu" class="bx-menu-main-submenu bx-menu-object-__object__ bx-def-font-h3 bx-clearfix">
-    <li class="bx-menu-main-submenu-div bx-def-padding-sec-left bx-def-padding-sec-right"><i class="sys-icon angle-right"></i></li>
+<ul id="bx-menu-main-submenu" class="bx-menu-main-submenu bx-menu-object-__object__ bx-clearfix">
+    <li class="bx-menu-main-submenu-div bx-def-padding-sec-left bx-def-padding-sec-right"><i class="sys-icon angle-right bx-def-font-grayed"></i></li>
     <bx_repeat:menu_items>
         <li class="bx-def-padding-sec-right bx-def-padding-sec-left bx-def-color-bg-hl-hover __class_add__"><a href="__link__" target="__target__" onclick="__onclick__">__title__</a></li>
     </bx_repeat:menu_items>

template/scripts/BxBaseFormView.php

@@ -768,7 +768,7 @@ BLAH;
         if (isset($aInput['label']))
             $aAttrs['id'] = $this->getInputId($aInput);
 
-        $sAttrs = bx_convert_array2attrs($aAttrs, "bx-form-input-{$aInput['type']}" . ((isset($aInput['html']) and $aInput['html'] and $this->addHtmlEditor($aInput['html'], $aInput)) ? ' bx-form-input-html' : ''));
+        $sAttrs = bx_convert_array2attrs($aAttrs, "bx-def-font-inputs bx-form-input-{$aInput['type']}" . ((isset($aInput['html']) and $aInput['html'] and $this->addHtmlEditor($aInput['html'], $aInput)) ? ' bx-form-input-html' : ''));
 
         $sValue = isset($aInput['value']) ? bx_process_output($aInput['value']) : '';
 
@@ -945,7 +945,7 @@ BLAH;
         if (isset($aInput['label']))
             $aAttrs['id'] = $this->getInputId($aInput);
 
-        $sAttrs = bx_convert_array2attrs($aAttrs, "bx-form-input-{$aInput['type']}");
+        $sAttrs = bx_convert_array2attrs($aAttrs, "bx-def-font-inputs bx-form-input-{$aInput['type']}");
 
         // generate options
         $sOptions = '';