css: add custom css

css/css.css

@@ -435,18 +435,6 @@ html body div.ui-panel a.unenhanced:active {
   width: 100%;
 }
 /* ============================= content grid ============================= */
-.span_1 {
-  width: 96%; /* 2% padding-left/right */
-  display: block;
-}
-.span_2 {
-  width: 45%;
-  display: inline-block;
-}
-.span_3 {
-  width: 29%;
-  display: inline-block;
-}
 .span_1, .span_2, .span_3 {
   vertical-align: middle;
   padding-left: 2%;
@@ -474,8 +462,8 @@ form .span_3 {
   width: 33%;
 }
 @media (max-width: 40em) {
-  .span_1, .span_2, .span_3, form .span_1, form .span_2, form .span_3 {
-    width: 100%;
+  .span_1, .span_2, .span_3, form .span_1, form .span_2, form .span_3  {
+    width: 100% !important;
     padding: .25em 0;
   }
   .span_1 textarea {
@@ -491,22 +479,18 @@ form .span_3 {
   border-width: 0;
   border-bottom-width: 1px;
 }
-/* this should always be set on the parent whatever widget (controlbar...)
-.span_1 .ui-input-search,
-.span_2 .ui-input-search {
-  width: 50%;
+.span_1, html body .ui-content .ui-controlbar.span_1{
+  width: 96%; /* 2% padding-left/right */
+  display: block;
 }
-@media (max-width: 45em) {
-  .span_1 .ui-input-search,
-  .span_2 .ui-input-search {
-    width: 100%;
-  }
+.span_2, html body .ui-content .ui-controlbar.span_2 {
+  width: 45%;
+  display: inline-block;
 }
-@media (min-width: 45em) {
-  .span_1 .ui-input-search,
-  .span_2 .ui-input-search {
-    width: 60%;
-  }
+.span_3, html body .ui-content .ui-controlbar.span_3 {
+  width: 30%; /* no idea why this is needed, fix asap */
+  display: inline-block;
+  padding: 1.5%;
 }
 */
 /* ======================== status (red...) ========================= */
@@ -571,7 +555,7 @@ tbody .large {
   background-color: #A3ED24;
 }
 .rose.background {
-  background: url("../img/bg-offre02.png") no-repeat scroll right 203px #B01B99;
+  background: url("../img/bg-offre02.png") no-repeat scroll center 90px / 60% auto #B01B99;
 }
 .rose {
   background-color: #B01B99;
@@ -580,7 +564,7 @@ tbody .large {
  background-color: #E156CC;
 }
 .bleu.background {
-  background: url("../img/bg-offre03.png") no-repeat scroll center 197px #2296C9;
+  background: url("../img/bg-offre03.png") no-repeat scroll center 90px / 60% auto #2296C9;
 }
 .bleu {
   background-color: #2296C9;
@@ -589,7 +573,7 @@ tbody .large {
   background-color: #5FC2EF;
 }
 .violet.background {
-  background: url("../img/bg-offre01.png") no-repeat scroll center 150px #7B40B8;
+  background: url("../img/bg-offre01.png") no-repeat scroll center 90px / 60% auto #7B40B8;
 }
 .violet {
   background-color: #7B40B8;
@@ -599,7 +583,7 @@ tbody .large {
   background-color: #B184E0;
 }
 .rouge.background {
-  background: url("../img/website-bg-libert-vacances.png") no-repeat scroll 410px 31px #EB5757;
+  background: url("../img/website-bg-libert-vacances.png") no-repeat scroll center 90px / 200px auto #EB5757;
 }
 .rouge {
   background-color: #EB5757;
@@ -607,13 +591,38 @@ tbody .large {
 .rouge .light {
   background-color: #FC8484;
 }
-/* all offers */
+html body .ui-content .ui-controlbar.span_3 .offer {
+  min-height: 300px;
+  max-height: 300px;
+}
+.offer {
+  width: 100%;
+}
 .offer > img{
   padding: .25em;
 }
-h3.offer_tag {
-  font-size: 200%;
+.offer_tag {
+  font-size: 150%;
+  margin: 0.75em 0;
   font-weight: bold;
+  color: #FFFFFF;
+  line-height: 1em;
+}
+.offer_tag_small {
+  font-size: 1em;
+}
+span.offer_tag {
+  margin: 1em 0;
+}
+/* offer */
+.offer .ui-link, .offer .ui-link:hover, .offer .ui-link:active {
+  color: #FFFFFF;
+  text-decoration: none;
+}
+.offer .ui-link > span {
+  display: block;
+  padding: .5em;
+  line-height: .5em;
 }
 .ui-header .ui-first-wrap ~ .ui-title-logo {
   margin-left: 5em;
@@ -674,4 +683,17 @@ html body .ui-controlbar .ui-carousel-controls .ui-btn[class*="ui-icon-"]:after
   margin-top: -8px;
   margin-left: -2px;
 }
+/* lonely button */
+.ui-controlbar > .pad {
+  padding: auto;
+}
+/* reverse list item */
+.ui-listview.reverse {
+  margin: 0;
+  
+}
+
+
+
+