added CSS for language icons and responsive forms

css/css.css

 html body .ui-input-text.invalid,
-html body label.invalid {
+html body .required.invalid ~ label {
   border: 1px solid red !important;
 }
 .bold {
@@ -213,18 +213,23 @@ tbody .large {
   box-shadow: none !important;
 }
 /* ====================== flags =================================== */
-/*http://flag-sprites.com/*/
-/* TODO: redo */
+/*
+builder: http://iconizr.com/
+svg flags: https://github.com/koppi/iso-country-flags-svg-collection
+*/
 html body .ui-btn.flag:after {
   background-repeat: no-repeat;
-  background-size: 50px 30px;
-  -webkit-background-size: 50px 30px;
+  background-size: 18px 36px;
+  -webkit-background-size: 18px 36px;
   background-image: url("../img/flags.png");
   content: "";
-  margin-top: 12px !important;
-  width: /* 25px */ 16px;
-  height: 15px;
+  margin-top: 11px !important;
+  width: 18px;
+  height: 18px;
   border-radius: .6em;
+  -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
+  -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
+  box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
 }
-html body .ui-btn.flag.ui-icon-flag-cn:after {background-position: /* -25px 0px; */ -25px 0px;}
-html body .ui-btn.flag.ui-icon-flag-gb:after {background-position: /* 0px -15px; */-5px -15px;}
+html body .ui-btn.flag.ui-icon-flag-cn:after {background-position: 0px 0px; }
+html body .ui-btn.flag.ui-icon-flag-gb:after {background-position: 0px -18px; }

css/themes.css

@@ -863,7 +863,7 @@ html .ui-header .ui-last-wrap .ui-controlgroup-controls .ui-btn {
     vertical-align: middle;
   }
   .ui-fieldcontain label:not(.ui-btn) {
-    width: 40%;
+    width: 46% /*40%*/;
   }
   .ui-fieldcontain div.ui-input-text,
   .ui-fieldcontain div.ui-input-search {
@@ -902,7 +902,7 @@ form p {
 /* ============================= content grid ============================= */
 .span_1, .span_2 {
   display: inline-block;
-  vertical-align: top;
+  vertical-align: middle;
   width: 45%;
   padding-left: 2%;
   padding-right: 2%;
@@ -1436,7 +1436,8 @@ html .ui-filterable {
 /* First breakpoint is 48em (768px). 3 column layout. Tiles 250x250 pixels incl. margin at the breakpoint. */
 @media ( min-width: 48em ) {
   /* limit controlbar width */
-  html .ui-page .ui-controlbar.responsive {
+  html .ui-page .ui-controlbar.responsive,
+  form.responsive {
     max-width: 40em; /* 640px */
     margin: 0 auto;
     clear: both;
@@ -1562,6 +1563,7 @@ html .ui-filterable {
   /* Set a max-width for the last breakpoint to prevent too much stretching on large screens.
   By setting the max-width equal to the breakpoint width minus padding we keep square tiles. */
   /* responsive content */
+  html form.responsive,
   html .ui-page .ui-content-element.responsive,
   html .ui-page .ui-listview.responsive,
   html .ui-page .ui-controlbar.responsive {
@@ -1623,6 +1625,7 @@ html .ui-panel-inner .ui-listview li a {
 }
 
 /* overwrite icon positioning for fontawesome */
+/*
 .ui-panel-inner .ui-btn-icon-right:after,
 .ui-panel-inner .ui-listview > li > .ui-btn[class*="ui-icon-"]:after {
   right: 0;
@@ -1631,7 +1634,9 @@ html .ui-panel-inner .ui-listview li a {
 .ui-listview > li > .ui-btn[class*="ui-icon-"]:after {
   right: 0.3625em;
 }
+*/
 /* reset */
+/*
 html.ui-nosvg .ui-btn-icon-right:after,
 html.ui-nosvg .ui-panel-inner .ui-listview > li > .ui-btn[class*="ui-icon-"]:after {
   right: 0.5625em;
@@ -1642,7 +1647,7 @@ html.ui-nosvg .ui-panel-inner .ui-listview > li > .ui-btn[class*="ui-icon-"]:aft
 html.ui-nosvg .ui-btn-icon-left:after {
   left: 0.5625em;
 }
-
+*/
 /* custom icons */
 .ui-listview li span.ui-li-icon-custom {
   bottom: 0;
@@ -1696,7 +1701,7 @@ html.ui-nosvg .ui-btn-icon-left:after {
 .ui-checkbox .ui-btn.ui-checkbox-off:after {
   background: 0 none;
   background-image: none;
-  margin: -9px 2px 0;
+  margin: -11px 2px 0;
 }
 /* overwrite JQM showing focus icon */
 .ui-icon-check:after,