design adjustments for screens from 481 to 950px

plonetheme/pfbweb/static/css/pfbweb.css

@@ -3434,5 +3434,189 @@ body.largeText #content-core p {
         top: 0;
         width: auto;
     }
+}
 
+@media screen and (min-width: 481px) and (max-width:950px) {
+    body  {
+        background: transparent;
+    }
+
+    #global {
+        background: transparent;
+        margin: 5px;
+        width: 100%;
+        left: 0;
+    }
+
+    #header {
+        margin: 2px 5px;
+        width: 100%;
+        position: relative;
+        float: none;
+        height: auto;
+    }
+
+    #logo {
+        border: 0px;
+        float: left;
+    }
+
+    #menu {
+        float: left;
+        margin: 5px 2px;
+        clear: both;
+        width: 98%;
+    }
+
+    #menu li {
+        line-height: 1em;
+        padding: 1px 15px 1px 0px;
+    }
+
+    #content {
+        margin: 2px 5px;
+        float: left;
+        clear: none;
+        max-width: 745px !important;
+        width: auto;
+    }
+
+    #lcol {
+        float: left;
+	max-width: 170px;
+	margin: 2px 7px;
+        position: relative;
+    }
+
+    #arrow, #accolade, #rcol {
+        display: none;
+    }
+
+    .sectiontitle {
+        position: absolute;
+        left: 120px;
+        top: 0;
+        font-size: 30pt;
+        line-height: 40pt;
+    }
+
+    .nav {
+        display: none;
+    }
+
+    #agenda-legend {
+        margin-left: 240px;
+    }
+
+    #footer #portal-siteactions {
+        margin-top: 30px;
+    }
+
+    .ploneCalendar td, .ploneCalendar th {
+        font-size: 8pt;
+        height: 30px !important;
+        width: 30px !important;
+        padding: 0;
+    }
+
+    #agenda-legend {
+        display: none !important;
+    }
+
+    #content #events-ul-list li div.event-data {
+        padding-top: 0;
+    }
+
+    #content #events-ul-list li div.event-data p.details {
+        width: 80px;
+    }
+
+    #content #events-ul-list li p.date {
+        width: 100%;
+        border: 0 !important;
+        margin-top: 0;
+        padding-top: 0;
+    }
+
+    #content #events-ul-list h3 {
+        margin-left: 80px;
+    }
+
+    #viewlet-below-content {
+        display: none;
+    }
+
+    #tabellio-agenda {
+        position: relative;
+    }
+
+    .formControls {
+        width: 100%;
+    }
+
+    form label {
+        float: left;
+        width: 25% !important;
+    }
+
+    form input[type='text'], form input[type='submit'], form textarea, form select {
+        max-width: 100%;
+        margin-left: 27% !important;
+    }
+
+    .labelboxes input[type='text'], .date-field input[type='text'], .date-field select {
+        margin-left: 0 !important;
+    }
+
+    .labelboxes, .date-field {
+        margin-left: 22% !important;
+    }
+
+    .formHelp {
+        display: none;
+    }
+
+    form .captchaImage {
+        max-width: 100%;
+        margin-left: 105px;
+    }
+
+    #realcontent img {
+        max-width: 90%;
+    }
+
+    /* #lcol { */
+    /*     width: 100%; */
+    /* } */
+
+    #lcol dl.portlet ul.navTreeLevel0 > .navTreeItem {
+        float: left;
+        margin: 0 5px;
+    }
+
+    #lcolmenu {
+        background: url('/++theme++plonetheme.pfbweb/images/barrette.gif') repeat-x;
+        height: 5px
+    }
+
+    /* #lcol img { */
+    /*     visibility: hidden; */
+    /* } */
+
+    #lcol ul.navTree {
+        margin-top: 5px;
+    }
+
+    dl.portlet ul.navTreeLevel0 > .navTreeItem {
+        float: left;
+        margin: 0 5px;
+    }
+
+    /* #lcolmenu li.section-agenda-parlementaire, #lcolmenu li.section-agenda-des-activites { */
+    /*     position: relative; */
+    /*     left: 0; */
+    /*     text-transform: none; */
+    /*     top: 0; */
+    /*     width: auto; */
+    /* } */
 }