css: add custom css for advantages element

css/css.css

@@ -746,22 +746,27 @@ html body .custom_footer .ui-listview {
 /* custom bar */
 .custom_bar {
   vertical-align: top;
+  padding-left: 0;
+  padding-right: 0;
 }
 .custom_bar_header {
   border-top-left-radius: 0.6em;
   border-top-right-radius: 0.6em;
+  -webkit-border-top-left-radius: .6em;
+  -webkit-border-top-right-radius: .6em;
   line-height: 1em;
   min-height: 1em;
   padding: 0.5em 0;
   vertical-align: bottom;
   width: 100%;
-  background-color: #fff;
   border: 1px solid #aaa;
   color: #fff;
   margin-bottom: -1.5em;
   position: relative;
   z-index: 1;
   background-color: #FF712B;
+  border-color: #FF712B;
+  text-align: center;
 }
 .custom_bar_header ~ img {
   border: 1px solid #aaa;
@@ -779,12 +784,97 @@ html body .custom_footer .ui-listview {
 html body .custom_bar a.ui-btn.custom_profit {
   margin-top: -3.5em;
   background-color: #FF712B;
+  border-color: transparent;
   color: #fff;
   text-shadow: none !important;
 }
 html body .custom_bar a.ui-btn.custom_profit:hover {
   color: #aaa;
 }
+.ui-listview.custom_reverse li.ui-li-has-thumb {
+  line-height: 1em;
+  padding: 0;
+}
+/* advantages listview */
+.ui-listview.custom_reverse .ui-li-divider {
+  text-align: center;
+  border-color: #FF712B;
+  background-color: #FF712B;
+  text-shadow: none !important;
+  border-top-left-radius: 0.6em;
+  border-top-right-radius: 0.6em;
+  -webkit-border-top-left-radius: .6em;
+  -webkit-border-top-right-radius: .6em;
+}
+.ui-listview.custom_reverse .ui-li-divider h3 {
+  color: #fff;
+  font-weight: bold;
+  line-height: 1.5em;
+  display: inline;
+  white-space: pre-wrap;
+}
+.ui-listview.custom_reverse li img:first-child {
+    display: inline-block;
+    max-width: none;
+    width: 25%;
+    position: static;
+    vertical-align: middle;
+}
+@media (max-width: 60em) {
+  .ui-listview.custom_reverse li img:first-child {
+      display: block;
+      max-width: none;
+      width: 100%;
+      max-height: none;
+      position: static;
+  }
+}
+.ui-listview.custom_reverse li:last-child {
+  border-bottom-left-radius: .6em;
+  border-bottom-right-radius: .6em;
+  -webkit-bottom-left-radius: .6em;
+  -webkit-bottom-right-radius: .6em;
+  border-bottom-width: 1px;
+}
+.ui-listview.custom_reverse li:not(:first-child) > * {
+  white-space: pre-wrap;
+  text-align: center;
+  line-height: 1.5em;
+  color: #a3a3a3;
+}
+.ui-listview.custom_reverse li:not(:first-child) p {
+  font-size: 90%;
+  text-align: left;
+  display: inline-block;
+  vertical-align: middle;
+}
+.ui-listview.custom_reverse li:not(:first-child) h3 {
+  display: inline-block;
+  padding-left: 5%;
+  padding-right: 5%;
+  vertical-align: middle;
+  min-width: 7%;
+}
+@media (max-width: 60em) {
+  .ui-listview.custom_reverse li:not(:first-child) > p,
+  .ui-listview.custom_reverse li:not(:first-child) > img,
+  .ui-listview.custom_reverse li:not(:first-child) > h3 {
+    display: block;
+    width: 100%;
+    padding-left: 0;
+    padding-top: 0;
+    text-align: center;
+  }
+  .ui-listview.custom_reverse .ui-li-divider {
+    border: 0 none;
+    width: 100%;
+    padding-left: 0;
+    padding-right: 0;
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+