1 files changed, 109 insertions, 4 deletions

diff --git a/chimere_example_static/chimere/css/extra-styles.css b/chimere_example_static/chimere/css/extra-styles.css
index 29a1c30..f5d4c3c 100644
--- a/chimere_example_static/chimere/css/extra-styles.css
+++ b/chimere_example_static/chimere/css/extra-styles.css
@@ -38,6 +38,7 @@ a:hover, a:focus {
 
 .container{
     max-width:none;
+    padding-right: 0;
 }
 
 #utils-div{
@@ -76,12 +77,15 @@ a:hover, a:focus {
     background-image:url('../img/logo.jpg');
     background-position:bottom center;
     background-repeat:no-repeat;
+    z-index:12;
 }
 
 #detail {
     right:auto;
     left:0;
     bottom:0;
+    top:0;
+    padding-top:100px;
     border:0 transparent;
     border-right:1px solid #E7E7E7;
     border-top:1px solid #E7E7E7;
@@ -116,7 +120,7 @@ a:hover, a:focus {
 
 #footer .map-footer {
     bottom: 0;
-    right: 400px;
+    right: 420px;
     margin:0;
     background-color:#fff;
     opacity:0.8;
@@ -127,11 +131,11 @@ a:hover, a:focus {
 }
 
 .olControlPanPanel {
-    top: 30px;
+    top: 60px;
 }
 
 .olControlZoomPanel {
-    top: 95px;
+    top: 125px;
 }
 
 span#permalink, .navbar-nav .lbl, #areas-div label, #permalink, #simple_button,
@@ -165,6 +169,10 @@ span#permalink, .navbar-nav .lbl, #areas-div label, #permalink, #simple_button,
     padding: 10px 15px;
 }
 
+#areas-div{
+    line-height:42px;
+}
+
 .nav-pills > li#simple_button-lnk > a > .fa{
     color:#777;
 }
@@ -178,7 +186,7 @@ span#permalink, .navbar-nav .lbl, #areas-div label, #permalink, #simple_button,
 }
 
 .navbar-default .navbar-brand{
-    color:#327E04;
+    color:#54C200;
     font-size:1em;
 }
 
@@ -206,3 +214,100 @@ span#permalink, .navbar-nav .lbl, #areas-div label, #permalink, #simple_button,
     content:"\f14e";
 }
 
+#maps-lnk label, #contact-lnk .lbl, #simple_button-lnk .lbl, #rss-lnk .lbl{
+    display:none;
+}
+
+#permalink,
+#simple_button-lnk lbl{
+    padding: 0 0.8em;
+}
+
+@media (min-width: 1552px) {
+    #maps-lnk label,
+    #contact-lnk .lbl,
+    #rss-lnk .lbl{
+        display:inline;
+    }
+}
+
+@media (min-width: 1200px) {
+    #simple_button-lnk .lbl{
+        display:inline;
+    }
+}
+
+@media (min-width: 1100px) {
+    #panel{
+        padding-top:16px;
+    }
+    #detail{
+        padding-top:50px;
+    }
+}
+
+@media (max-width: 767px) {
+    #simple_button-lnk .lbl, #maps-lnk label, #contact-lnk .lbl, #rss-lnk .lbl{
+        display:inline-block;
+    }
+    .selection-sep{
+        width: 80%;
+        border-bottom: 1px solid #CCC;
+        margin: 0 0 0.5em 0;
+    }
+
+    #permalink-lnk,
+    #simple_button{
+        line-height: 50px;
+    }
+    #panel{
+        padding-top:16px;
+    }
+    #detail{
+        padding-top:50px;
+    }
+}
+
+.show-hide-panel{
+    position:absolute;
+    right: 400px;
+    top: 0;
+    bottom: 0;
+    background-color:#eee;
+    width:20px;
+    z-index:10;
+    color:#666;
+}
+
+.show-hide-panel:hover{
+    cursor:pointer;
+}
+
+.show-hide-panel span {
+    position:absolute;
+    left:2px;
+    top:200px;
+}
+
+#show-panel{
+    right:0;
+    display:none;
+}
+
+@media (max-width: 767px) {
+    #show-panel{
+        display:block;
+    }
+    #panel, #hide-panel{
+        display:none;
+    }
+    #footer .map-footer {
+        right:20px;
+    }
+}
+
+@media (min-height: 400px) {
+    .show-hide-panel span {
+        top:300px;
+    }
+}