Upgraded scicms-default theme in the ccm-sci-bundle

git-svn-id: https://svn.libreccm.org/ccm/trunk@3934 8810af33-2d31-482b-a856-94f89814c4df

ccm-sci-bundle/bundles/devel/cfg/project.xml

@@ -9,7 +9,7 @@
                     name="ScientificCMS" 
               prettyName="Scientific CMS" 
                  version="2.3.0" 
-                 release="devel-SNAPSHOT-r3436" 
+                 release="devel-SNAPSHOT-r3893" 
                   webxml="sci-web.xml" 
               portletxml="sci-portlet.xml" 
                   webapp="ROOT" 

ccm-sci-bundle/web/themes/scicms-default/conf/css-files.xml

@@ -54,7 +54,7 @@
         <css-file>fancybox/helpers/jquery.fancybox-buttons.css?v=1.0.5</css-file>
         <css-file>fancybox/helpers/jquery.fancybox-thumbs.css?v=1.0.7</css-file>
         <css-file>font-awesome/css/font-awesome.min.css</css-file>
-        <css-file less="true">libre-blue-flex</css-file>
+        <css-file less="true">scicms</css-file>
     </application>
     <application name="navigation" class="portalGridPage">
         <!-- 
@@ -66,7 +66,7 @@
         <css-file>fancybox/helpers/jquery.fancybox-thumbs.css?v=1.0.7</css-file>
         <css-file>font-awesome/css/font-awesome.min.css</css-file>
         <css-file media="screen">portal.css</css-file>
-        <css-file less="true">libre-blue-flex</css-file>
+        <css-file less="true">scicms</css-file>
     </application>
     <application name="none" class="cms-admin">
         <!-- Other admin applications -->
@@ -79,7 +79,7 @@
         <css-file>fancybox/helpers/jquery.fancybox-thumbs.css?v=1.0.7</css-file>
         <css-file>font-awesome/css/font-awesome.min.css</css-file>
         <css-file origin="internal">portal.css</css-file>
-        <css-file less="true">libre-blue-flex</css-file>
+        <css-file less="true">scicms</css-file>
     </application>
     <default>
         <!-- 
@@ -90,6 +90,6 @@
         <css-file>fancybox/helpers/jquery.fancybox-buttons.css?v=1.0.5</css-file>
         <css-file>fancybox/helpers/jquery.fancybox-thumbs.css?v=1.0.7</css-file>
         <css-file>font-awesome/css/font-awesome.min.css</css-file>
-        <css-file less="true">libre-blue-flex</css-file>
+        <css-file less="true">scicms</css-file>
     </default>
 </css-files>

ccm-sci-bundle/web/themes/scicms-default/styles/aplaws.css

@@ -3,6 +3,8 @@
     allows you to define commonly used values in a single location. The LESS
     compiler will replace each use of a variable with the value defined here.
 */
+/*@color-gradient1: #8191c5;*/
+/*@color-nav-background1: @color-brand + #502b1d;*/
 /*@color-subnav-link-hover: #ff7600;*/
 /*@color-subnav-link-hover-background: #7f7f7f;*/
 /*
@@ -119,6 +121,16 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     height: 1px;
     overflow: hidden;
   }
+  /*
+     * Mixin class for the gradient.
+     */
+  .mixin-gradient {
+    background-image: -ie-linear-gradient(top, #59699d 5%, #213175 95%);
+    background-image: -moz-linear-gradient(top, #59699d 5%, #213175 95%);
+    background-image: -o-linear-gradient(top, #59699d 5%, #213175 95%);
+    background-image: -webkit-linear-gradient(top, #59699d 5%, #213175 95%);
+    background-image: linear-gradient(top, #59699d 5%, #213175 95%);
+  }
   html {
     margin: 0;
     position: relative;
@@ -178,16 +190,17 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
         */
   }
   header #service-panel {
-    background-image: -ie-linear-gradient(top, #715c92 5%, #213175 95%);
+    background-image: -ie-linear-gradient(top, #59699d 5%, #213175 95%);
-    background-image: -moz-linear-gradient(top, #715c92 5%, #213175 95%);
+    background-image: -moz-linear-gradient(top, #59699d 5%, #213175 95%);
-    background-image: -o-linear-gradient(top, #715c92 5%, #213175 95%);
+    background-image: -o-linear-gradient(top, #59699d 5%, #213175 95%);
-    background-image: -webkit-linear-gradient(top, #715c92 5%, #213175 95%);
+    background-image: -webkit-linear-gradient(top, #59699d 5%, #213175 95%);
-    background-image: linear-gradient(top, #715c92 5%, #213175 95%);
+    background-image: linear-gradient(top, #59699d 5%, #213175 95%);
+    border-top: 0.5em solid #ffffff;
     box-shadow: 0 0 20px 0 #4a4a4a;
     color: #ffffff;
-    font-family: "Special", serif;
+    font-family: "TextCond", serif;
     font-variant: small-caps;
-    height: 3.5em;
+    height: 4em;
     margin: 0;
     padding: 0;
   }
@@ -257,18 +270,18 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     text-align: center;
   }
   nav#main-navigation {
+    background-image: -ie-linear-gradient(top, #59699d 5%, #213175 95%);
+    background-image: -moz-linear-gradient(top, #59699d 5%, #213175 95%);
+    background-image: -o-linear-gradient(top, #59699d 5%, #213175 95%);
+    background-image: -webkit-linear-gradient(top, #59699d 5%, #213175 95%);
+    background-image: linear-gradient(top, #59699d 5%, #213175 95%);
     background-color: transparent;
     border: none;
     margin-bottom: 0;
-    padding-top: 0.25em;
+    padding-top: 0;
     padding-bottom: 0;
     width: 100%;
-    background-image: -ie-linear-gradient(top, #715c92 5%, #213175 95%);
+    height: 2.8em;
-    background-image: -moz-linear-gradient(top, #715c92 5%, #213175 95%);
-    background-image: -o-linear-gradient(top, #715c92 5%, #213175 95%);
-    background-image: -webkit-linear-gradient(top, #715c92 5%, #213175 95%);
-    background-image: linear-gradient(top, #715c92 5%, #213175 95%);
-    border-bottom: 2px solid #e7e6ee;
   }
   nav#main-navigation div#nav-wrapper {
     margin-left: auto;
@@ -381,11 +394,15 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
     padding: 1em;
   }
-  main div.address {
+  main article {
     background-color: #f2f2f2;
     border-radius: 0 0 0.5em 0.5em;
     box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
     padding: 1em;
+    border-radius: 0.5em;
+  }
+  main div.address {
+    /*.mixin-main();*/
     font-family: 'Text', sans-serif;
     margin-bottom: 2em;
   }
@@ -399,10 +416,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main div.minutes dl,
   main div.person dl,
   main div.service dl {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     font-family: 'text', sans-serif;
   }
   main div.agenda dl dt,
@@ -474,10 +488,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     color: #084590;
   }
   main div.bookmark-url {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     font-family: 'Text', sans-serif;
     margin-bottom: 2em;
   }
@@ -491,16 +502,10 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     color: #084590;
   }
   main div.contact div.person {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
   }
   main div.contact div.address {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-bottom: 2em;
   }
   main div.contact div.address pre.addresstext {
@@ -533,10 +538,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-right: 1em;
   }
   main div.formitem {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-bottom: 2em;
   }
   main div.formitem span.label {
@@ -548,10 +550,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     font-weight: bold;
   }
   main div.fsi-desc {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
   }
   main div.fsi-links {
     /*.mixin-main();*/
@@ -560,10 +559,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     text-align: center;
   }
   main div.fsi-links a {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-left: 4em;
     margin-right: 4em;
     padding-left: 2em;
@@ -590,17 +586,11 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     content: "\f019";
   }
   main div.government-uid {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-bottom: 1em;
   }
   main div.image div.image-data {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     display: -webkit-flex;
     display: flex;
     margin-bottom: 2em;
@@ -628,10 +618,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     padding-left: 0.5em;
   }
   main div.lead {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     font-weight: bold;
     margin-bottom: 1em;
   }
@@ -640,12 +627,18 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     font-family: 'Text', sans-serif;
   }
   main div.main {
-    background-color: #f2f2f2;
+    /*background-color: @color-main-background;*/
-    border-radius: 0.5em;
+    /*border-radius: 0.5em;*/
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
+    /*box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);*/
-    margin-bottom: 3em;
+    margin-bottom: 0;
     padding: 1em;
   }
+  main div.main :first-child {
+    margin-top: 0;
+  }
+  main div.main ul {
+    overflow: hidden;
+  }
   main div.nav-quicklinks {
     background-color: #f2f2f2;
     border-radius: 0 0 0.5em 0.5em;
@@ -653,6 +646,25 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     padding: 1em;
     margin-bottom: 2em;
   }
+  main div.nav-quicklinks dl dt a {
+    font-size: 1.2em;
+    font-weight: bold;
+    text-decoration: none;
+  }
+  main div.nav-quicklinks dl dt a:link,
+  main div.nav-quicklinks dl dt a:visited {
+    color: #213175;
+  }
+  main div.nav-quicklinks dl dt a:active,
+  main div.nav-quicklinks dl dt a:focus,
+  main div.nav-quicklinks dl dt a:hover {
+    color: #084590;
+  }
+  main div.nav-quicklinks dl dd {
+    margin-top: 0.5em;
+    margin-left: 0;
+    padding-left: 0;
+  }
   main div.news-date {
     background-color: #f2f2f2;
     border: 1px solid #213175;
@@ -673,10 +685,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     width: 18em;
   }
   main div.person div.address {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-bottom: 2em;
   }
   main div.person div.address p {
@@ -687,17 +696,11 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-top: 0;
   }
   main div.pressrelease div.contactinfo {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
   }
   main div.pressrelease div.referencecode {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-top: 1em;
     margin-bottom: 2em;
   }
@@ -714,10 +717,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   main div.scipublication dl,
   main div.journal dl {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
   }
   main div.scipublication dl dt,
   main div.journal dl dt {
@@ -768,10 +768,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   main div.scipublication div.export-links ul,
   main div.journal div.export-links ul {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     list-style: none;
@@ -801,26 +798,17 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   main div.scipublication div.journal-abstract,
   main div.journal div.journal-abstract {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
   }
   main div.scipublication div.textinfo,
   main div.journal div.textinfo {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
   main div.scipublication ul.articles,
   main div.journal ul.articles {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     list-style: none;
@@ -853,10 +841,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   main div.scipublication table.library-signatures,
   main div.journal table.library-signatures {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     width: 100%;
@@ -880,10 +865,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     color: #084590;
   }
   main div.sciorga div.tab {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
     margin-bottom: 2em;
   }
@@ -1013,10 +995,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     color: #084590;
   }
   main div.series div.abstract {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-bottom: 1em;
   }
   main div.series ul.articles {
@@ -1037,10 +1016,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-bottom: 2em;
   }
   main dl.event-details {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
   }
   main dl.event-details dt {
     font-weight: bold;
@@ -1052,41 +1028,65 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   main h1 {
     color: #1e3175;
-    font-family: "Caption", sans-serif;
+    font-family: "TextCond", sans-serif;
     font-size: 2em;
+    font-variant: small-caps;
     font-weight: normal;
     margin-top: 1em;
   }
   main h2 {
     font-size: 1.8em;
+    font-variant: small-caps;
   }
   main h2.subheading {
+    background-image: -ie-linear-gradient(top, #59699d 5%, #213175 95%);
+    background-image: -moz-linear-gradient(top, #59699d 5%, #213175 95%);
+    background-image: -o-linear-gradient(top, #59699d 5%, #213175 95%);
+    background-image: -webkit-linear-gradient(top, #59699d 5%, #213175 95%);
+    background-image: linear-gradient(top, #59699d 5%, #213175 95%);
     background-color: #213175;
-    border-top-left-radius: 1em;
+    border-top-left-radius: 0.5em;
-    border-top-right-radius: 1em;
+    border-top-right-radius: 0.5em;
     box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
+    clear: both;
     color: #ffffff;
+    font-family: 'TextCond';
     font-size: 1.2em;
     font-weight: bold;
+    font-variant: small-caps;
     margin-bottom: 0;
     padding-top: 0.4em;
     padding-bottom: 0.4em;
     text-align: center;
   }
+  main article h2.subheading {
+    border-radius: 0.5em;
+    box-shadow: none;
+    margin-top: 0;
+    margin-bottom: 0.5em;
+  }
   main h2.subheading + ul {
     margin-top: 0;
   }
   main h3 {
+    font-family: 'TextCond';
     font-size: 1.6em;
+    font-variant: small-caps;
   }
   main h4 {
+    font-family: 'TextCond';
     font-size: 1.4em;
+    font-variant: small-caps;
   }
   main h5 {
+    font-family: 'TextCond';
     font-size: 1.2em;
+    font-variant: small-caps;
   }
   main h6 {
+    font-family: 'TextCond';
     font-size: 1.0em;
+    font-variant: small-caps;
     font-weight: bold;
   }
   main figure {
@@ -1120,20 +1120,26 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     content: "\f002";
   }
   main ul.item-list,
-  main ul.news-list,
+  main ul.new-list {
-  main ul.related-links,
-  main ul.file-attachments {
-    /*background-color: @color-main-background;*/
     background-color: #f2f2f2;
     border-radius: 0 0 0.5em 0.5em;
     box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
     padding: 1em;
-    border-bottom-left-radius: 0.5em;
+  }
-    border-bottom-right-radius: 0.5em;
+  main ul.item-list,
-    /*box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);*/
+  main ul.news-list,
+  main ul.related-links,
+  main ul.file-attachments {
+    /*background-color: @color-main-background;*/
+    /*.mixin-main();
+ 
+             border-bottom-left-radius: 0.5em;
+             border-bottom-right-radius: 0.5em;*/
+    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
     list-style: none;
     margin-top: 0;
     margin-bottom: 3em;
+    padding-left: 0;
     /*padding: 1em;*/
   }
   main ul.item-list li,
@@ -1141,7 +1147,8 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main ul.related-links li,
   main ul.file-attachments li {
     /*position: relative;*/
-    padding-top: 0.5em;
+    background-color: #f2f2f2;
+    padding: 0.5em;
   }
   main ul.item-list li a,
   main ul.news-list li a,
@@ -1316,10 +1323,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-bottom: 3em;
   }
   main ul.mpa-paginator li {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     display: inline;
     margin-left: 1em;
     margin-right: 1em;
@@ -1351,10 +1355,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-left: 0.2em;
   }
   main ul.mpa-toc {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     /*background-color: @color-nav-background2;*/
     border-top-left-radius: 0.5em;
     border-top-right-radius: 0.5em;
@@ -1363,6 +1364,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     -webkit-column-count: 2;
     column-count: 2;
     list-style: none;
+    min-height: 11em;
     /*padding: 1em;*/
   }
   main ul.mpa-toc li {
@@ -1580,10 +1582,23 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
 }
 @media screen and (min-width: 60em) {
   nav#main-navigation div#nav-wrapper {
+    display: table;
+    height: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-bottom: 0;
     text-align: center;
+    vertical-align: middle;
   }
   nav#main-navigation div#nav-wrapper ul {
-    display: inline;
+    display: table-cell;
+    height: 100%;
+    vertical-align: middle;
+  }
+  nav#main-navigation div#nav-wrapper ul li {
+    display: table-cell;
+    height: 100%;
+    vertical-align: middle;
   }
   nav#main-navigation div#nav-wrapper ul li.active {
     border: none;
@@ -1597,7 +1612,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
 }
 @media screen and (min-width: 64em) {
   header #service-panel {
-    height: 2.8em;
+    height: 3.3em;
   }
   header #service-panel #service-panel-wrapper {
     display: flex;
@@ -1665,6 +1680,9 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   div#main-wrapper main {
     -webkit-flex: 3;
     flex: 3;
+    /*max-width: 60em;*/
+    /*margin-left: auto;*/
+    /*margin-right: auto;*/
   }
   div#main-wrapper main div.related-links-file-attachments {
     display: -webkit-flex;

ccm-sci-bundle/web/themes/scicms-default/styles/aplaws.less

@@ -19,6 +19,9 @@
 @color-footer: #fff;
 @color-footer-link: @color-footer;
 @color-footer-link-hover: #ff9840;
+/*@color-gradient1: #8191c5;*/
+@color-gradient1: #59699d;
+@color-gradient2: @color-brand;
 @color-main-background: #f2f2f2;
 @color-main-link: @color-nav-background2;
 @color-main-link-hover: #084590;
@@ -28,7 +31,8 @@
 @color-item-list-border: #ddd;
 @color-nav: #fff;
 @color-nav-active: #ff9840;
-@color-nav-background1: @color-brand + #502b1d;
+/*@color-nav-background1: @color-brand + #502b1d;*/
+@color-nav-background1: #8191c5;
 @color-nav-background2: @color-brand;
 @color-nav-shadow: #4a4a4a;
 @color-navbar-link: #77767e;
@@ -44,4 +48,7 @@
 /*@color-subnav-link-hover-background: #7f7f7f;*/
 @color-subnav-link-hover-background: @color-nav-background2;
 
+@dim-gradient-light: 5%;
+@dim-gradient-dark: 100% - @dim-gradient-light;
+
 @import "styles.less";

ccm-sci-bundle/web/themes/scicms-default/styles/libre-blue-flex.css

@@ -119,6 +119,16 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     height: 1px;
     overflow: hidden;
   }
+  /*
+     * Mixin class for the gradient.
+     */
+  .mixin-gradient {
+    background-image: -ie-linear-gradient(top, #59a1bd 5%, #0976a0 95%);
+    background-image: -moz-linear-gradient(top, #59a1bd 5%, #0976a0 95%);
+    background-image: -o-linear-gradient(top, #59a1bd 5%, #0976a0 95%);
+    background-image: -webkit-linear-gradient(top, #59a1bd 5%, #0976a0 95%);
+    background-image: linear-gradient(top, #59a1bd 5%, #0976a0 95%);
+  }
   html {
     margin: 0;
     position: relative;
@@ -183,11 +193,12 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     background-image: -o-linear-gradient(top, #59a1bd 5%, #0976a0 95%);
     background-image: -webkit-linear-gradient(top, #59a1bd 5%, #0976a0 95%);
     background-image: linear-gradient(top, #59a1bd 5%, #0976a0 95%);
+    border-top: 0.5em solid #ffffff;
     box-shadow: 0 0 20px 0 #4a4a4a;
     color: #ffffff;
-    font-family: "Special", serif;
+    font-family: "TextCond", serif;
     font-variant: small-caps;
-    height: 3.5em;
+    height: 4em;
     margin: 0;
     padding: 0;
   }
@@ -257,18 +268,18 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     text-align: center;
   }
   nav#main-navigation {
-    background-color: transparent;
-    border: none;
-    margin-bottom: 0;
-    padding-top: 0.25em;
-    padding-bottom: 0;
-    width: 100%;
     background-image: -ie-linear-gradient(top, #59a1bd 5%, #0976a0 95%);
     background-image: -moz-linear-gradient(top, #59a1bd 5%, #0976a0 95%);
     background-image: -o-linear-gradient(top, #59a1bd 5%, #0976a0 95%);
     background-image: -webkit-linear-gradient(top, #59a1bd 5%, #0976a0 95%);
     background-image: linear-gradient(top, #59a1bd 5%, #0976a0 95%);
-    border-bottom: 2px solid #e7e6ee;
+    background-color: transparent;
+    border: none;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    width: 100%;
+    height: 2.8em;
   }
   nav#main-navigation div#nav-wrapper {
     margin-left: auto;
@@ -381,11 +392,15 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
     padding: 1em;
   }
-  main div.address {
+  main article {
     background-color: #f2f2f2;
     border-radius: 0 0 0.5em 0.5em;
     box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
     padding: 1em;
+    border-radius: 0.5em;
+  }
+  main div.address {
+    /*.mixin-main();*/
     font-family: 'Text', sans-serif;
     margin-bottom: 2em;
   }
@@ -399,10 +414,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main div.minutes dl,
   main div.person dl,
   main div.service dl {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     font-family: 'text', sans-serif;
   }
   main div.agenda dl dt,
@@ -474,10 +486,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     color: #084590;
   }
   main div.bookmark-url {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     font-family: 'Text', sans-serif;
     margin-bottom: 2em;
   }
@@ -491,16 +500,10 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     color: #084590;
   }
   main div.contact div.person {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
   }
   main div.contact div.address {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-bottom: 2em;
   }
   main div.contact div.address pre.addresstext {
@@ -533,10 +536,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-right: 1em;
   }
   main div.formitem {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-bottom: 2em;
   }
   main div.formitem span.label {
@@ -548,10 +548,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     font-weight: bold;
   }
   main div.fsi-desc {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
   }
   main div.fsi-links {
     /*.mixin-main();*/
@@ -560,10 +557,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     text-align: center;
   }
   main div.fsi-links a {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-left: 4em;
     margin-right: 4em;
     padding-left: 2em;
@@ -590,17 +584,11 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     content: "\f019";
   }
   main div.government-uid {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-bottom: 1em;
   }
   main div.image div.image-data {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     display: -webkit-flex;
     display: flex;
     margin-bottom: 2em;
@@ -628,10 +616,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     padding-left: 0.5em;
   }
   main div.lead {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     font-weight: bold;
     margin-bottom: 1em;
   }
@@ -640,12 +625,18 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     font-family: 'Text', sans-serif;
   }
   main div.main {
-    background-color: #f2f2f2;
+    /*background-color: @color-main-background;*/
-    border-radius: 0.5em;
+    /*border-radius: 0.5em;*/
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
+    /*box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);*/
-    margin-bottom: 3em;
+    margin-bottom: 0;
     padding: 1em;
   }
+  main div.main :first-child {
+    margin-top: 0;
+  }
+  main div.main ul {
+    overflow: hidden;
+  }
   main div.nav-quicklinks {
     background-color: #f2f2f2;
     border-radius: 0 0 0.5em 0.5em;
@@ -653,6 +644,25 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     padding: 1em;
     margin-bottom: 2em;
   }
+  main div.nav-quicklinks dl dt a {
+    font-size: 1.2em;
+    font-weight: bold;
+    text-decoration: none;
+  }
+  main div.nav-quicklinks dl dt a:link,
+  main div.nav-quicklinks dl dt a:visited {
+    color: #0976a0;
+  }
+  main div.nav-quicklinks dl dt a:active,
+  main div.nav-quicklinks dl dt a:focus,
+  main div.nav-quicklinks dl dt a:hover {
+    color: #084590;
+  }
+  main div.nav-quicklinks dl dd {
+    margin-top: 0.5em;
+    margin-left: 0;
+    padding-left: 0;
+  }
   main div.news-date {
     background-color: #f2f2f2;
     border: 1px solid #0976a0;
@@ -673,10 +683,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     width: 18em;
   }
   main div.person div.address {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-bottom: 2em;
   }
   main div.person div.address p {
@@ -687,17 +694,11 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-top: 0;
   }
   main div.pressrelease div.contactinfo {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
   }
   main div.pressrelease div.referencecode {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-top: 1em;
     margin-bottom: 2em;
   }
@@ -714,10 +715,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   main div.scipublication dl,
   main div.journal dl {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
   }
   main div.scipublication dl dt,
   main div.journal dl dt {
@@ -768,10 +766,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   main div.scipublication div.export-links ul,
   main div.journal div.export-links ul {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     list-style: none;
@@ -801,26 +796,17 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   main div.scipublication div.journal-abstract,
   main div.journal div.journal-abstract {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
   }
   main div.scipublication div.textinfo,
   main div.journal div.textinfo {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
   main div.scipublication ul.articles,
   main div.journal ul.articles {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     list-style: none;
@@ -853,10 +839,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   main div.scipublication table.library-signatures,
   main div.journal table.library-signatures {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     width: 100%;
@@ -880,10 +863,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     color: #084590;
   }
   main div.sciorga div.tab {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
     margin-bottom: 2em;
   }
@@ -1013,10 +993,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     color: #084590;
   }
   main div.series div.abstract {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-bottom: 1em;
   }
   main div.series ul.articles {
@@ -1037,10 +1014,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-bottom: 2em;
   }
   main dl.event-details {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
   }
   main dl.event-details dt {
     font-weight: bold;
@@ -1052,41 +1026,65 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   main h1 {
     color: #0776a0;
-    font-family: "Caption", sans-serif;
+    font-family: "TextCond", sans-serif;
     font-size: 2em;
+    font-variant: small-caps;
     font-weight: normal;
     margin-top: 1em;
   }
   main h2 {
     font-size: 1.8em;
+    font-variant: small-caps;
   }
   main h2.subheading {
+    background-image: -ie-linear-gradient(top, #59a1bd 5%, #0976a0 95%);
+    background-image: -moz-linear-gradient(top, #59a1bd 5%, #0976a0 95%);
+    background-image: -o-linear-gradient(top, #59a1bd 5%, #0976a0 95%);
+    background-image: -webkit-linear-gradient(top, #59a1bd 5%, #0976a0 95%);
+    background-image: linear-gradient(top, #59a1bd 5%, #0976a0 95%);
     background-color: #0976a0;
-    border-top-left-radius: 1em;
+    border-top-left-radius: 0.5em;
-    border-top-right-radius: 1em;
+    border-top-right-radius: 0.5em;
     box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
+    clear: both;
     color: #ffffff;
+    font-family: 'TextCond';
     font-size: 1.2em;
     font-weight: bold;
+    font-variant: small-caps;
     margin-bottom: 0;
     padding-top: 0.4em;
     padding-bottom: 0.4em;
     text-align: center;
   }
+  main article h2.subheading {
+    border-radius: 0.5em;
+    box-shadow: none;
+    margin-top: 0;
+    margin-bottom: 0.5em;
+  }
   main h2.subheading + ul {
     margin-top: 0;
   }
   main h3 {
+    font-family: 'TextCond';
     font-size: 1.6em;
+    font-variant: small-caps;
   }
   main h4 {
+    font-family: 'TextCond';
     font-size: 1.4em;
+    font-variant: small-caps;
   }
   main h5 {
+    font-family: 'TextCond';
     font-size: 1.2em;
+    font-variant: small-caps;
   }
   main h6 {
+    font-family: 'TextCond';
     font-size: 1.0em;
+    font-variant: small-caps;
     font-weight: bold;
   }
   main figure {
@@ -1120,20 +1118,26 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     content: "\f002";
   }
   main ul.item-list,
-  main ul.news-list,
+  main ul.new-list {
-  main ul.related-links,
-  main ul.file-attachments {
-    /*background-color: @color-main-background;*/
     background-color: #f2f2f2;
     border-radius: 0 0 0.5em 0.5em;
     box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
     padding: 1em;
-    border-bottom-left-radius: 0.5em;
+  }
-    border-bottom-right-radius: 0.5em;
+  main ul.item-list,
-    /*box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);*/
+  main ul.news-list,
+  main ul.related-links,
+  main ul.file-attachments {
+    /*background-color: @color-main-background;*/
+    /*.mixin-main();
+ 
+             border-bottom-left-radius: 0.5em;
+             border-bottom-right-radius: 0.5em;*/
+    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
     list-style: none;
     margin-top: 0;
     margin-bottom: 3em;
+    padding-left: 0;
     /*padding: 1em;*/
   }
   main ul.item-list li,
@@ -1141,7 +1145,8 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main ul.related-links li,
   main ul.file-attachments li {
     /*position: relative;*/
-    padding-top: 0.5em;
+    background-color: #f2f2f2;
+    padding: 0.5em;
   }
   main ul.item-list li a,
   main ul.news-list li a,
@@ -1316,10 +1321,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-bottom: 3em;
   }
   main ul.mpa-paginator li {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     display: inline;
     margin-left: 1em;
     margin-right: 1em;
@@ -1351,10 +1353,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-left: 0.2em;
   }
   main ul.mpa-toc {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     /*background-color: @color-nav-background2;*/
     border-top-left-radius: 0.5em;
     border-top-right-radius: 0.5em;
@@ -1363,6 +1362,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     -webkit-column-count: 2;
     column-count: 2;
     list-style: none;
+    min-height: 11em;
     /*padding: 1em;*/
   }
   main ul.mpa-toc li {
@@ -1580,10 +1580,23 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
 }
 @media screen and (min-width: 60em) {
   nav#main-navigation div#nav-wrapper {
+    display: table;
+    height: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-bottom: 0;
     text-align: center;
+    vertical-align: middle;
   }
   nav#main-navigation div#nav-wrapper ul {
-    display: inline;
+    display: table-cell;
+    height: 100%;
+    vertical-align: middle;
+  }
+  nav#main-navigation div#nav-wrapper ul li {
+    display: table-cell;
+    height: 100%;
+    vertical-align: middle;
   }
   nav#main-navigation div#nav-wrapper ul li.active {
     border: none;
@@ -1597,7 +1610,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
 }
 @media screen and (min-width: 64em) {
   header #service-panel {
-    height: 2.8em;
+    height: 3.3em;
   }
   header #service-panel #service-panel-wrapper {
     display: flex;
@@ -1665,6 +1678,9 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   div#main-wrapper main {
     -webkit-flex: 3;
     flex: 3;
+    /*max-width: 60em;*/
+    /*margin-left: auto;*/
+    /*margin-right: auto;*/
   }
   div#main-wrapper main div.related-links-file-attachments {
     display: -webkit-flex;

ccm-sci-bundle/web/themes/scicms-default/styles/libre-blue-flex.less

@@ -19,6 +19,8 @@
 @color-footer: #fff;
 @color-footer-link: @color-footer;
 @color-footer-link-hover: #ff9840;
+@color-gradient1: @color-brand + #502b1d;
+@color-gradient2: @color-brand;
 @color-main-background: #f2f2f2;
 @color-main-link: @color-nav-background2;
 @color-main-link-hover: #084590;
@@ -44,4 +46,7 @@
 /*@color-subnav-link-hover-background: #7f7f7f;*/
 @color-subnav-link-hover-background: @color-nav-background2;
 
+@dim-gradient-light: 5%;
+@dim-gradient-dark: 95%;
+
 @import "styles.less";

ccm-sci-bundle/web/themes/scicms-default/styles/libreccm.css

@@ -3,6 +3,10 @@
     allows you to define commonly used values in a single location. The LESS
     compiler will replace each use of a variable with the value defined here.
 */
+/*@color-brand: #828a58;*/
+/*@color-brand-text: #808a58;*/
+/*@color-gradient1: @color-brand + #222222;*/
+/*@color-gradient1: @color-brand;*/
 /*@color-subnav-link-hover: #ff7600;*/
 /*@color-subnav-link-hover-background: #7f7f7f;*/
 /*
@@ -119,6 +123,16 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     height: 1px;
     overflow: hidden;
   }
+  /*
+     * Mixin class for the gradient.
+     */
+  .mixin-gradient {
+    background-image: -ie-linear-gradient(top, #788f00 5%, #89a000 95%);
+    background-image: -moz-linear-gradient(top, #788f00 5%, #89a000 95%);
+    background-image: -o-linear-gradient(top, #788f00 5%, #89a000 95%);
+    background-image: -webkit-linear-gradient(top, #788f00 5%, #89a000 95%);
+    background-image: linear-gradient(top, #788f00 5%, #89a000 95%);
+  }
   html {
     margin: 0;
     position: relative;
@@ -138,7 +152,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   body.cookie-notice div#cookie-notice {
     background-color: #fff;
     /*background-color: rgba(255,255,255,0.9);*/
-    border: 2px solid #828a58;
+    border: 2px solid #89a000;
     display: block;
     position: absolute;
     left: 0;
@@ -154,7 +168,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   body.cookie-notice div#cookie-notice a:link,
   body.cookie-notice div#cookie-notice a:visited {
-    color: #828a58;
+    color: #89a000;
   }
   body.cookie-notice div#cookie-notice a:active,
   body.cookie-notice div#cookie-notice a:focus,
@@ -163,9 +177,9 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   body.cookie-notice div#cookie-notice button {
     background-color: #f2f2f2;
-    border: 1px solid #828a58;
+    border: 1px solid #89a000;
     border-radius: 0.25em;
-    color: #828a58;
+    color: #89a000;
     font-weight: bold;
     margin-left: 0.5em;
   }
@@ -178,16 +192,17 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
         */
   }
   header #service-panel {
-    background-image: -ie-linear-gradient(top, #d2b575 5%, #828a58 95%);
+    background-image: -ie-linear-gradient(top, #788f00 5%, #89a000 95%);
-    background-image: -moz-linear-gradient(top, #d2b575 5%, #828a58 95%);
+    background-image: -moz-linear-gradient(top, #788f00 5%, #89a000 95%);
-    background-image: -o-linear-gradient(top, #d2b575 5%, #828a58 95%);
+    background-image: -o-linear-gradient(top, #788f00 5%, #89a000 95%);
-    background-image: -webkit-linear-gradient(top, #d2b575 5%, #828a58 95%);
+    background-image: -webkit-linear-gradient(top, #788f00 5%, #89a000 95%);
-    background-image: linear-gradient(top, #d2b575 5%, #828a58 95%);
+    background-image: linear-gradient(top, #788f00 5%, #89a000 95%);
+    border-top: 0.5em solid #ffffff;
     box-shadow: 0 0 20px 0 #4a4a4a;
     color: #ffffff;
-    font-family: "Special", serif;
+    font-family: "TextCond", serif;
     font-variant: small-caps;
-    height: 3.5em;
+    height: 4em;
     margin: 0;
     padding: 0;
   }
@@ -213,7 +228,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   header #service-panel #service-panel-wrapper div#language-switcher ul {
     display: none;
-    background-color: #828a58;
+    background-color: #89a000;
     z-index: 999;
   }
   header #service-panel #service-panel-wrapper div#shortcuts ul {
@@ -249,7 +264,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-top: 1em;
   }
   header .header-logo p {
-    color: #0776a0;
+    color: #89a000;
     font-family: "Title", serif;
     font-size: 2.5em;
     font-variant: small-caps;
@@ -257,18 +272,18 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     text-align: center;
   }
   nav#main-navigation {
+    background-image: -ie-linear-gradient(top, #788f00 5%, #89a000 95%);
+    background-image: -moz-linear-gradient(top, #788f00 5%, #89a000 95%);
+    background-image: -o-linear-gradient(top, #788f00 5%, #89a000 95%);
+    background-image: -webkit-linear-gradient(top, #788f00 5%, #89a000 95%);
+    background-image: linear-gradient(top, #788f00 5%, #89a000 95%);
     background-color: transparent;
     border: none;
     margin-bottom: 0;
-    padding-top: 0.25em;
+    padding-top: 0;
     padding-bottom: 0;
     width: 100%;
-    background-image: -ie-linear-gradient(top, #d2b575 5%, #828a58 95%);
+    height: 2.8em;
-    background-image: -moz-linear-gradient(top, #d2b575 5%, #828a58 95%);
-    background-image: -o-linear-gradient(top, #d2b575 5%, #828a58 95%);
-    background-image: -webkit-linear-gradient(top, #d2b575 5%, #828a58 95%);
-    background-image: linear-gradient(top, #d2b575 5%, #828a58 95%);
-    border-bottom: 2px solid #e7e6ee;
   }
   nav#main-navigation div#nav-wrapper {
     margin-left: auto;
@@ -381,11 +396,15 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
     padding: 1em;
   }
-  main div.address {
+  main article {
     background-color: #f2f2f2;
     border-radius: 0 0 0.5em 0.5em;
     box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
     padding: 1em;
+    border-radius: 0.5em;
+  }
+  main div.address {
+    /*.mixin-main();*/
     font-family: 'Text', sans-serif;
     margin-bottom: 2em;
   }
@@ -399,10 +418,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main div.minutes dl,
   main div.person dl,
   main div.service dl {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     font-family: 'text', sans-serif;
   }
   main div.agenda dl dt,
@@ -451,7 +467,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main div.minutes dl dd a:visited,
   main div.person dl dd a:visited,
   main div.service dl dd a:visited {
-    color: #828a58;
+    color: #89a000;
   }
   main div.agenda dl dd a:active,
   main div.contact dl dd a:active,
@@ -474,16 +490,13 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     color: #084590;
   }
   main div.bookmark-url {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     font-family: 'Text', sans-serif;
     margin-bottom: 2em;
   }
   main div.bookmark-url a:link,
   main div.bookmark-url a:visited {
-    color: #828a58;
+    color: #89a000;
   }
   main div.bookmark-url a:active,
   main div.bookmark-url a:focus,
@@ -491,16 +504,10 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     color: #084590;
   }
   main div.contact div.person {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
   }
   main div.contact div.address {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-bottom: 2em;
   }
   main div.contact div.address pre.addresstext {
@@ -518,9 +525,9 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   main div.decisiontree form div.submit-cancel-section input[type="submit"] {
     background-color: #f2f2f2;
-    border: 1px solid #828a58;
+    border: 1px solid #89a000;
     border-radius: 0.3em;
-    color: #828a58;
+    color: #89a000;
     font-weight: bold;
     padding: 0.2em 0.4em;
   }
@@ -533,10 +540,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-right: 1em;
   }
   main div.formitem {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-bottom: 2em;
   }
   main div.formitem span.label {
@@ -548,10 +552,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     font-weight: bold;
   }
   main div.fsi-desc {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
   }
   main div.fsi-links {
     /*.mixin-main();*/
@@ -560,10 +561,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     text-align: center;
   }
   main div.fsi-links a {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-left: 4em;
     margin-right: 4em;
     padding-left: 2em;
@@ -572,7 +570,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   main div.fsi-links a:link,
   main div.fsi-links a:visited {
-    color: #828a58;
+    color: #89a000;
   }
   main div.fsi-links a:active,
   main div.fsi-links a:focus,
@@ -590,17 +588,11 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     content: "\f019";
   }
   main div.government-uid {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-bottom: 1em;
   }
   main div.image div.image-data {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     display: -webkit-flex;
     display: flex;
     margin-bottom: 2em;
@@ -628,10 +620,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     padding-left: 0.5em;
   }
   main div.lead {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     font-weight: bold;
     margin-bottom: 1em;
   }
@@ -640,12 +629,18 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     font-family: 'Text', sans-serif;
   }
   main div.main {
-    background-color: #f2f2f2;
+    /*background-color: @color-main-background;*/
-    border-radius: 0.5em;
+    /*border-radius: 0.5em;*/
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
+    /*box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);*/
-    margin-bottom: 3em;
+    margin-bottom: 0;
     padding: 1em;
   }
+  main div.main :first-child {
+    margin-top: 0;
+  }
+  main div.main ul {
+    overflow: hidden;
+  }
   main div.nav-quicklinks {
     background-color: #f2f2f2;
     border-radius: 0 0 0.5em 0.5em;
@@ -653,11 +648,30 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     padding: 1em;
     margin-bottom: 2em;
   }
+  main div.nav-quicklinks dl dt a {
+    font-size: 1.2em;
+    font-weight: bold;
+    text-decoration: none;
+  }
+  main div.nav-quicklinks dl dt a:link,
+  main div.nav-quicklinks dl dt a:visited {
+    color: #89a000;
+  }
+  main div.nav-quicklinks dl dt a:active,
+  main div.nav-quicklinks dl dt a:focus,
+  main div.nav-quicklinks dl dt a:hover {
+    color: #084590;
+  }
+  main div.nav-quicklinks dl dd {
+    margin-top: 0.5em;
+    margin-left: 0;
+    padding-left: 0;
+  }
   main div.news-date {
     background-color: #f2f2f2;
-    border: 1px solid #828a58;
+    border: 1px solid #89a000;
     border-radius: 0.4em;
-    color: #828a58;
+    color: #89a000;
     float: right;
     font-weight: bold;
     margin: 0.3em;
@@ -673,10 +687,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     width: 18em;
   }
   main div.person div.address {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-bottom: 2em;
   }
   main div.person div.address p {
@@ -687,17 +698,11 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-top: 0;
   }
   main div.pressrelease div.contactinfo {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
   }
   main div.pressrelease div.referencecode {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-top: 1em;
     margin-bottom: 2em;
   }
@@ -714,10 +719,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   main div.scipublication dl,
   main div.journal dl {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
   }
   main div.scipublication dl dt,
   main div.journal dl dt {
@@ -737,7 +739,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main div.journal dl dd a:link,
   main div.scipublication dl dd a:visited,
   main div.journal dl dd a:visited {
-    color: #828a58;
+    color: #89a000;
   }
   main div.scipublication dl dd a:active,
   main div.journal dl dd a:active,
@@ -768,10 +770,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   main div.scipublication div.export-links ul,
   main div.journal div.export-links ul {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     list-style: none;
@@ -789,7 +788,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main div.journal div.export-links ul li a:link,
   main div.scipublication div.export-links ul li a:visited,
   main div.journal div.export-links ul li a:visited {
-    color: #828a58;
+    color: #89a000;
   }
   main div.scipublication div.export-links ul li a:active,
   main div.journal div.export-links ul li a:active,
@@ -801,26 +800,17 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   main div.scipublication div.journal-abstract,
   main div.journal div.journal-abstract {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
   }
   main div.scipublication div.textinfo,
   main div.journal div.textinfo {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
   main div.scipublication ul.articles,
   main div.journal ul.articles {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     list-style: none;
@@ -837,7 +827,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main div.journal ul.articles li a:link,
   main div.scipublication ul.articles li a:visited,
   main div.journal ul.articles li a:visited {
-    color: #828a58;
+    color: #89a000;
   }
   main div.scipublication ul.articles li a:active,
   main div.journal ul.articles li a:active,
@@ -853,10 +843,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   main div.scipublication table.library-signatures,
   main div.journal table.library-signatures {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     width: 100%;
@@ -869,7 +856,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main div.journal table.library-signatures tr td a:link,
   main div.scipublication table.library-signatures tr td a:visited,
   main div.journal table.library-signatures tr td a:visited {
-    color: #828a58;
+    color: #89a000;
   }
   main div.scipublication table.library-signatures tr td a:active,
   main div.journal table.library-signatures tr td a:active,
@@ -880,10 +867,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     color: #084590;
   }
   main div.sciorga div.tab {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
     margin-bottom: 2em;
   }
@@ -903,7 +887,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main div.sciorga div.tab div.members a:visited,
   main div.sciorga div.tab div.scicontact a:visited,
   main div.sciorga div.tab div.funding a:visited {
-    color: #828a58;
+    color: #89a000;
   }
   main div.sciorga div.tab div.members a:active,
   main div.sciorga div.tab div.scicontact a:active,
@@ -950,7 +934,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main div.sciorga div.tab div.members ul li a:visited,
   main div.sciorga div.tab div.scicontact ul li a:visited,
   main div.sciorga div.tab div.funding ul li a:visited {
-    color: #828a58;
+    color: #89a000;
   }
   main div.sciorga div.tab div.members ul li a:active,
   main div.sciorga div.tab div.scicontact ul li a:active,
@@ -976,7 +960,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     padding: 0;
   }
   main div.sciorga ul.nav.nav-tabs li {
-    background-color: #828a58;
+    background-color: #89a000;
     border-top-left-radius: 0.5em;
     border-top-right-radius: 0.5em;
     box-shadow: 0.2em 0 0 0 rgba(0, 0, 0, 0.35);
@@ -1013,10 +997,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     color: #084590;
   }
   main div.series div.abstract {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-bottom: 1em;
   }
   main div.series ul.articles {
@@ -1037,10 +1018,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-bottom: 2em;
   }
   main dl.event-details {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
   }
   main dl.event-details dt {
     font-weight: bold;
@@ -1051,42 +1029,66 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     padding-left: 0;
   }
   main h1 {
-    color: #0776a0;
+    color: #89a000;
-    font-family: "Caption", sans-serif;
+    font-family: "TextCond", sans-serif;
     font-size: 2em;
+    font-variant: small-caps;
     font-weight: normal;
     margin-top: 1em;
   }
   main h2 {
     font-size: 1.8em;
+    font-variant: small-caps;
   }
   main h2.subheading {
-    background-color: #828a58;
+    background-image: -ie-linear-gradient(top, #788f00 5%, #89a000 95%);
-    border-top-left-radius: 1em;
+    background-image: -moz-linear-gradient(top, #788f00 5%, #89a000 95%);
-    border-top-right-radius: 1em;
+    background-image: -o-linear-gradient(top, #788f00 5%, #89a000 95%);
+    background-image: -webkit-linear-gradient(top, #788f00 5%, #89a000 95%);
+    background-image: linear-gradient(top, #788f00 5%, #89a000 95%);
+    background-color: #89a000;
+    border-top-left-radius: 0.5em;
+    border-top-right-radius: 0.5em;
     box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
+    clear: both;
     color: #ffffff;
+    font-family: 'TextCond';
     font-size: 1.2em;
     font-weight: bold;
+    font-variant: small-caps;
     margin-bottom: 0;
     padding-top: 0.4em;
     padding-bottom: 0.4em;
     text-align: center;
   }
+  main article h2.subheading {
+    border-radius: 0.5em;
+    box-shadow: none;
+    margin-top: 0;
+    margin-bottom: 0.5em;
+  }
   main h2.subheading + ul {
     margin-top: 0;
   }
   main h3 {
+    font-family: 'TextCond';
     font-size: 1.6em;
+    font-variant: small-caps;
   }
   main h4 {
+    font-family: 'TextCond';
     font-size: 1.4em;
+    font-variant: small-caps;
   }
   main h5 {
+    font-family: 'TextCond';
     font-size: 1.2em;
+    font-variant: small-caps;
   }
   main h6 {
+    font-family: 'TextCond';
     font-size: 1.0em;
+    font-variant: small-caps;
     font-weight: bold;
   }
   main figure {
@@ -1120,20 +1122,26 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     content: "\f002";
   }
   main ul.item-list,
-  main ul.news-list,
+  main ul.new-list {
-  main ul.related-links,
-  main ul.file-attachments {
-    /*background-color: @color-main-background;*/
     background-color: #f2f2f2;
     border-radius: 0 0 0.5em 0.5em;
     box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
     padding: 1em;
-    border-bottom-left-radius: 0.5em;
+  }
-    border-bottom-right-radius: 0.5em;
+  main ul.item-list,
-    /*box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);*/
+  main ul.news-list,
+  main ul.related-links,
+  main ul.file-attachments {
+    /*background-color: @color-main-background;*/
+    /*.mixin-main();
+ 
+             border-bottom-left-radius: 0.5em;
+             border-bottom-right-radius: 0.5em;*/
+    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
     list-style: none;
     margin-top: 0;
     margin-bottom: 3em;
+    padding-left: 0;
     /*padding: 1em;*/
   }
   main ul.item-list li,
@@ -1141,7 +1149,8 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main ul.related-links li,
   main ul.file-attachments li {
     /*position: relative;*/
-    padding-top: 0.5em;
+    background-color: #f2f2f2;
+    padding: 0.5em;
   }
   main ul.item-list li a,
   main ul.news-list li a,
@@ -1159,7 +1168,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main ul.news-list li a:visited,
   main ul.related-links li a:visited,
   main ul.file-attachments li a:visited {
-    color: #828a58;
+    color: #89a000;
   }
   main ul.item-list li a:active,
   main ul.news-list li a:active,
@@ -1179,7 +1188,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main ul.news-list li .event-date,
   main ul.related-links li .event-date,
   main ul.file-attachments li .event-date {
-    border: thin solid #0776a0;
+    border: thin solid #89a000;
     float: left;
     font-weight: bold;
     margin-right: 0.75em;
@@ -1195,7 +1204,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main ul.news-list li .event-date .day,
   main ul.related-links li .event-date .day,
   main ul.file-attachments li .event-date .day {
-    background-color: #0776a0;
+    background-color: #89a000;
     color: #fff;
     padding: 0.3em 0.75em 0.1em 0.75em;
   }
@@ -1204,7 +1213,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main ul.related-links li .event-date .month,
   main ul.file-attachments li .event-date .month {
     background-color: #fff;
-    color: #0776a0;
+    color: #89a000;
     padding: 0.1em 0.75em 0.3em 0.75em;
   }
   main ul.item-list li .lead,
@@ -1221,9 +1230,9 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main ul.news-list li .news-date,
   main ul.related-links li .news-date,
   main ul.file-attachments li .news-date {
-    border: thin solid #0776a0;
+    border: thin solid #89a000;
     border-radius: 0.75em;
-    color: #0776a0;
+    color: #89a000;
     float: right;
     font-weight: bold;
     height: 1.5em;
@@ -1316,10 +1325,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-bottom: 3em;
   }
   main ul.mpa-paginator li {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     display: inline;
     margin-left: 1em;
     margin-right: 1em;
@@ -1331,7 +1337,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   main ul.mpa-paginator li a:link,
   main ul.mpa-paginator li a:visited {
-    color: #828a58;
+    color: #89a000;
   }
   main ul.mpa-paginator li a:active,
   main ul.mpa-paginator li a:focus,
@@ -1351,10 +1357,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-left: 0.2em;
   }
   main ul.mpa-toc {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     /*background-color: @color-nav-background2;*/
     border-top-left-radius: 0.5em;
     border-top-right-radius: 0.5em;
@@ -1363,6 +1366,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     -webkit-column-count: 2;
     column-count: 2;
     list-style: none;
+    min-height: 11em;
     /*padding: 1em;*/
   }
   main ul.mpa-toc li {
@@ -1375,7 +1379,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main ul.mpa-toc li a:link,
   main ul.mpa-toc li a:visited {
     /*color: @color-nav;*/
-    color: #828a58;
+    color: #89a000;
   }
   main ul.mpa-toc li a:active,
   main ul.mpa-toc li a:focus,
@@ -1398,7 +1402,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     list-style: none;
   }
   main ul.sitemap li a:link {
-    color: #828a58;
+    color: #89a000;
   }
   main ul.sitemap li a:visited {
     color: #2865a0;
@@ -1446,11 +1450,11 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   nav.subnav ul li a:active,
   nav.subnav ul li a:focus,
   nav.subnav ul li a:hover {
-    background-color: #828a58;
+    background-color: #89a000;
     color: #ffffff;
   }
   nav.subnav ul li.active > a {
-    background-color: #828a58;
+    background-color: #89a000;
     color: #ffffff;
   }
   nav.subnav ul li.active ul {
@@ -1580,10 +1584,23 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
 }
 @media screen and (min-width: 60em) {
   nav#main-navigation div#nav-wrapper {
+    display: table;
+    height: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-bottom: 0;
     text-align: center;
+    vertical-align: middle;
   }
   nav#main-navigation div#nav-wrapper ul {
-    display: inline;
+    display: table-cell;
+    height: 100%;
+    vertical-align: middle;
+  }
+  nav#main-navigation div#nav-wrapper ul li {
+    display: table-cell;
+    height: 100%;
+    vertical-align: middle;
   }
   nav#main-navigation div#nav-wrapper ul li.active {
     border: none;
@@ -1597,7 +1614,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
 }
 @media screen and (min-width: 64em) {
   header #service-panel {
-    height: 2.8em;
+    height: 3.3em;
   }
   header #service-panel #service-panel-wrapper {
     display: flex;
@@ -1665,6 +1682,9 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   div#main-wrapper main {
     -webkit-flex: 3;
     flex: 3;
+    /*max-width: 60em;*/
+    /*margin-left: auto;*/
+    /*margin-right: auto;*/
   }
   div#main-wrapper main div.related-links-file-attachments {
     display: -webkit-flex;
@@ -1741,7 +1761,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     text-align: center;
   }
   div.header-logo p {
-    color: #0776a0;
+    color: #89a000;
     font-family: "Title", serif;
     font-size: 2.5em;
     font-variant: small-caps;

ccm-sci-bundle/web/themes/scicms-default/styles/libreccm.less

@@ -4,9 +4,11 @@
     allows you to define commonly used values in a single location. The LESS
     compiler will replace each use of a variable with the value defined here.
 */
-@color-brand: #828a58;
+/*@color-brand: #828a58;*/
+@color-brand: #89a000;
 
-@color-brand-text: #0776a0;
+/*@color-brand-text: #808a58;*/
+@color-brand-text: @color-brand;
 @color-breadcrumb-link: #337ab7;
 @color-breadcrumb-link-hover: #23527c;
 @color-breadcrumb-separator: #555;
@@ -19,6 +21,10 @@
 @color-footer: #fff;
 @color-footer-link: @color-footer;
 @color-footer-link-hover: #ff9840;
+@color-gradient1: @color-brand - #111;
+/*@color-gradient1: @color-brand + #222222;*/
+/*@color-gradient1: @color-brand;*/
+@color-gradient2: @color-brand;
 @color-main-background: #f2f2f2;
 @color-main-link: @color-nav-background2;
 @color-main-link-hover: #084590;
@@ -44,4 +50,7 @@
 /*@color-subnav-link-hover-background: #7f7f7f;*/
 @color-subnav-link-hover-background: @color-nav-background2;
 
+@dim-gradient-light: 5%;
+@dim-gradient-dark: 100% - @dim-gradient-light;
+
 @import "styles.less";

ccm-sci-bundle/web/themes/scicms-default/styles/librecms.css

@@ -119,6 +119,16 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     height: 1px;
     overflow: hidden;
   }
+  /*
+     * Mixin class for the gradient.
+     */
+  .mixin-gradient {
+    background-image: -ie-linear-gradient(top, #5ac2b0 5%, #0a9793 95%);
+    background-image: -moz-linear-gradient(top, #5ac2b0 5%, #0a9793 95%);
+    background-image: -o-linear-gradient(top, #5ac2b0 5%, #0a9793 95%);
+    background-image: -webkit-linear-gradient(top, #5ac2b0 5%, #0a9793 95%);
+    background-image: linear-gradient(top, #5ac2b0 5%, #0a9793 95%);
+  }
   html {
     margin: 0;
     position: relative;
@@ -183,11 +193,12 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     background-image: -o-linear-gradient(top, #5ac2b0 5%, #0a9793 95%);
     background-image: -webkit-linear-gradient(top, #5ac2b0 5%, #0a9793 95%);
     background-image: linear-gradient(top, #5ac2b0 5%, #0a9793 95%);
+    border-top: 0.5em solid #ffffff;
     box-shadow: 0 0 20px 0 #4a4a4a;
     color: #ffffff;
-    font-family: "Special", serif;
+    font-family: "TextCond", serif;
     font-variant: small-caps;
-    height: 3.5em;
+    height: 4em;
     margin: 0;
     padding: 0;
   }
@@ -249,7 +260,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-top: 1em;
   }
   header .header-logo p {
-    color: #0776a0;
+    color: #099793;
     font-family: "Title", serif;
     font-size: 2.5em;
     font-variant: small-caps;
@@ -257,18 +268,18 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     text-align: center;
   }
   nav#main-navigation {
-    background-color: transparent;
-    border: none;
-    margin-bottom: 0;
-    padding-top: 0.25em;
-    padding-bottom: 0;
-    width: 100%;
     background-image: -ie-linear-gradient(top, #5ac2b0 5%, #0a9793 95%);
     background-image: -moz-linear-gradient(top, #5ac2b0 5%, #0a9793 95%);
     background-image: -o-linear-gradient(top, #5ac2b0 5%, #0a9793 95%);
     background-image: -webkit-linear-gradient(top, #5ac2b0 5%, #0a9793 95%);
     background-image: linear-gradient(top, #5ac2b0 5%, #0a9793 95%);
-    border-bottom: 2px solid #e7e6ee;
+    background-color: transparent;
+    border: none;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    width: 100%;
+    height: 2.8em;
   }
   nav#main-navigation div#nav-wrapper {
     margin-left: auto;
@@ -381,11 +392,15 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
     padding: 1em;
   }
-  main div.address {
+  main article {
     background-color: #f2f2f2;
     border-radius: 0 0 0.5em 0.5em;
     box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
     padding: 1em;
+    border-radius: 0.5em;
+  }
+  main div.address {
+    /*.mixin-main();*/
     font-family: 'Text', sans-serif;
     margin-bottom: 2em;
   }
@@ -399,10 +414,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main div.minutes dl,
   main div.person dl,
   main div.service dl {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     font-family: 'text', sans-serif;
   }
   main div.agenda dl dt,
@@ -474,10 +486,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     color: #084590;
   }
   main div.bookmark-url {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     font-family: 'Text', sans-serif;
     margin-bottom: 2em;
   }
@@ -491,16 +500,10 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     color: #084590;
   }
   main div.contact div.person {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
   }
   main div.contact div.address {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-bottom: 2em;
   }
   main div.contact div.address pre.addresstext {
@@ -533,10 +536,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-right: 1em;
   }
   main div.formitem {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-bottom: 2em;
   }
   main div.formitem span.label {
@@ -548,10 +548,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     font-weight: bold;
   }
   main div.fsi-desc {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
   }
   main div.fsi-links {
     /*.mixin-main();*/
@@ -560,10 +557,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     text-align: center;
   }
   main div.fsi-links a {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-left: 4em;
     margin-right: 4em;
     padding-left: 2em;
@@ -590,17 +584,11 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     content: "\f019";
   }
   main div.government-uid {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-bottom: 1em;
   }
   main div.image div.image-data {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     display: -webkit-flex;
     display: flex;
     margin-bottom: 2em;
@@ -628,10 +616,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     padding-left: 0.5em;
   }
   main div.lead {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     font-weight: bold;
     margin-bottom: 1em;
   }
@@ -640,12 +625,18 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     font-family: 'Text', sans-serif;
   }
   main div.main {
-    background-color: #f2f2f2;
+    /*background-color: @color-main-background;*/
-    border-radius: 0.5em;
+    /*border-radius: 0.5em;*/
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
+    /*box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);*/
-    margin-bottom: 3em;
+    margin-bottom: 0;
     padding: 1em;
   }
+  main div.main :first-child {
+    margin-top: 0;
+  }
+  main div.main ul {
+    overflow: hidden;
+  }
   main div.nav-quicklinks {
     background-color: #f2f2f2;
     border-radius: 0 0 0.5em 0.5em;
@@ -653,6 +644,25 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     padding: 1em;
     margin-bottom: 2em;
   }
+  main div.nav-quicklinks dl dt a {
+    font-size: 1.2em;
+    font-weight: bold;
+    text-decoration: none;
+  }
+  main div.nav-quicklinks dl dt a:link,
+  main div.nav-quicklinks dl dt a:visited {
+    color: #0a9793;
+  }
+  main div.nav-quicklinks dl dt a:active,
+  main div.nav-quicklinks dl dt a:focus,
+  main div.nav-quicklinks dl dt a:hover {
+    color: #084590;
+  }
+  main div.nav-quicklinks dl dd {
+    margin-top: 0.5em;
+    margin-left: 0;
+    padding-left: 0;
+  }
   main div.news-date {
     background-color: #f2f2f2;
     border: 1px solid #0a9793;
@@ -673,10 +683,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     width: 18em;
   }
   main div.person div.address {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-bottom: 2em;
   }
   main div.person div.address p {
@@ -687,17 +694,11 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-top: 0;
   }
   main div.pressrelease div.contactinfo {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
   }
   main div.pressrelease div.referencecode {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-top: 1em;
     margin-bottom: 2em;
   }
@@ -714,10 +715,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   main div.scipublication dl,
   main div.journal dl {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
   }
   main div.scipublication dl dt,
   main div.journal dl dt {
@@ -768,10 +766,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   main div.scipublication div.export-links ul,
   main div.journal div.export-links ul {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     list-style: none;
@@ -801,26 +796,17 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   main div.scipublication div.journal-abstract,
   main div.journal div.journal-abstract {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
   }
   main div.scipublication div.textinfo,
   main div.journal div.textinfo {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
   main div.scipublication ul.articles,
   main div.journal ul.articles {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     list-style: none;
@@ -853,10 +839,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   main div.scipublication table.library-signatures,
   main div.journal table.library-signatures {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     width: 100%;
@@ -880,10 +863,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     color: #084590;
   }
   main div.sciorga div.tab {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
     margin-bottom: 2em;
   }
@@ -1013,10 +993,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     color: #084590;
   }
   main div.series div.abstract {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-bottom: 1em;
   }
   main div.series ul.articles {
@@ -1037,10 +1014,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-bottom: 2em;
   }
   main dl.event-details {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
   }
   main dl.event-details dt {
     font-weight: bold;
@@ -1051,42 +1025,66 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     padding-left: 0;
   }
   main h1 {
-    color: #0776a0;
+    color: #099793;
-    font-family: "Caption", sans-serif;
+    font-family: "TextCond", sans-serif;
     font-size: 2em;
+    font-variant: small-caps;
     font-weight: normal;
     margin-top: 1em;
   }
   main h2 {
     font-size: 1.8em;
+    font-variant: small-caps;
   }
   main h2.subheading {
+    background-image: -ie-linear-gradient(top, #5ac2b0 5%, #0a9793 95%);
+    background-image: -moz-linear-gradient(top, #5ac2b0 5%, #0a9793 95%);
+    background-image: -o-linear-gradient(top, #5ac2b0 5%, #0a9793 95%);
+    background-image: -webkit-linear-gradient(top, #5ac2b0 5%, #0a9793 95%);
+    background-image: linear-gradient(top, #5ac2b0 5%, #0a9793 95%);
     background-color: #0a9793;
-    border-top-left-radius: 1em;
+    border-top-left-radius: 0.5em;
-    border-top-right-radius: 1em;
+    border-top-right-radius: 0.5em;
     box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
+    clear: both;
     color: #ffffff;
+    font-family: 'TextCond';
     font-size: 1.2em;
     font-weight: bold;
+    font-variant: small-caps;
     margin-bottom: 0;
     padding-top: 0.4em;
     padding-bottom: 0.4em;
     text-align: center;
   }
+  main article h2.subheading {
+    border-radius: 0.5em;
+    box-shadow: none;
+    margin-top: 0;
+    margin-bottom: 0.5em;
+  }
   main h2.subheading + ul {
     margin-top: 0;
   }
   main h3 {
+    font-family: 'TextCond';
     font-size: 1.6em;
+    font-variant: small-caps;
   }
   main h4 {
+    font-family: 'TextCond';
     font-size: 1.4em;
+    font-variant: small-caps;
   }
   main h5 {
+    font-family: 'TextCond';
     font-size: 1.2em;
+    font-variant: small-caps;
   }
   main h6 {
+    font-family: 'TextCond';
     font-size: 1.0em;
+    font-variant: small-caps;
     font-weight: bold;
   }
   main figure {
@@ -1120,20 +1118,26 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     content: "\f002";
   }
   main ul.item-list,
-  main ul.news-list,
+  main ul.new-list {
-  main ul.related-links,
-  main ul.file-attachments {
-    /*background-color: @color-main-background;*/
     background-color: #f2f2f2;
     border-radius: 0 0 0.5em 0.5em;
     box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
     padding: 1em;
-    border-bottom-left-radius: 0.5em;
+  }
-    border-bottom-right-radius: 0.5em;
+  main ul.item-list,
-    /*box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);*/
+  main ul.news-list,
+  main ul.related-links,
+  main ul.file-attachments {
+    /*background-color: @color-main-background;*/
+    /*.mixin-main();
+ 
+             border-bottom-left-radius: 0.5em;
+             border-bottom-right-radius: 0.5em;*/
+    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
     list-style: none;
     margin-top: 0;
     margin-bottom: 3em;
+    padding-left: 0;
     /*padding: 1em;*/
   }
   main ul.item-list li,
@@ -1141,7 +1145,8 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main ul.related-links li,
   main ul.file-attachments li {
     /*position: relative;*/
-    padding-top: 0.5em;
+    background-color: #f2f2f2;
+    padding: 0.5em;
   }
   main ul.item-list li a,
   main ul.news-list li a,
@@ -1179,7 +1184,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main ul.news-list li .event-date,
   main ul.related-links li .event-date,
   main ul.file-attachments li .event-date {
-    border: thin solid #0776a0;
+    border: thin solid #099793;
     float: left;
     font-weight: bold;
     margin-right: 0.75em;
@@ -1195,7 +1200,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main ul.news-list li .event-date .day,
   main ul.related-links li .event-date .day,
   main ul.file-attachments li .event-date .day {
-    background-color: #0776a0;
+    background-color: #099793;
     color: #fff;
     padding: 0.3em 0.75em 0.1em 0.75em;
   }
@@ -1204,7 +1209,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main ul.related-links li .event-date .month,
   main ul.file-attachments li .event-date .month {
     background-color: #fff;
-    color: #0776a0;
+    color: #099793;
     padding: 0.1em 0.75em 0.3em 0.75em;
   }
   main ul.item-list li .lead,
@@ -1221,9 +1226,9 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main ul.news-list li .news-date,
   main ul.related-links li .news-date,
   main ul.file-attachments li .news-date {
-    border: thin solid #0776a0;
+    border: thin solid #099793;
     border-radius: 0.75em;
-    color: #0776a0;
+    color: #099793;
     float: right;
     font-weight: bold;
     height: 1.5em;
@@ -1316,10 +1321,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-bottom: 3em;
   }
   main ul.mpa-paginator li {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     display: inline;
     margin-left: 1em;
     margin-right: 1em;
@@ -1351,10 +1353,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-left: 0.2em;
   }
   main ul.mpa-toc {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     /*background-color: @color-nav-background2;*/
     border-top-left-radius: 0.5em;
     border-top-right-radius: 0.5em;
@@ -1363,6 +1362,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     -webkit-column-count: 2;
     column-count: 2;
     list-style: none;
+    min-height: 11em;
     /*padding: 1em;*/
   }
   main ul.mpa-toc li {
@@ -1580,10 +1580,23 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
 }
 @media screen and (min-width: 60em) {
   nav#main-navigation div#nav-wrapper {
+    display: table;
+    height: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-bottom: 0;
     text-align: center;
+    vertical-align: middle;
   }
   nav#main-navigation div#nav-wrapper ul {
-    display: inline;
+    display: table-cell;
+    height: 100%;
+    vertical-align: middle;
+  }
+  nav#main-navigation div#nav-wrapper ul li {
+    display: table-cell;
+    height: 100%;
+    vertical-align: middle;
   }
   nav#main-navigation div#nav-wrapper ul li.active {
     border: none;
@@ -1597,7 +1610,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
 }
 @media screen and (min-width: 64em) {
   header #service-panel {
-    height: 2.8em;
+    height: 3.3em;
   }
   header #service-panel #service-panel-wrapper {
     display: flex;
@@ -1665,6 +1678,9 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   div#main-wrapper main {
     -webkit-flex: 3;
     flex: 3;
+    /*max-width: 60em;*/
+    /*margin-left: auto;*/
+    /*margin-right: auto;*/
   }
   div#main-wrapper main div.related-links-file-attachments {
     display: -webkit-flex;
@@ -1741,7 +1757,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     text-align: center;
   }
   div.header-logo p {
-    color: #0776a0;
+    color: #099793;
     font-family: "Title", serif;
     font-size: 2.5em;
     font-variant: small-caps;

ccm-sci-bundle/web/themes/scicms-default/styles/librecms.less

@@ -6,7 +6,7 @@
 */
 @color-brand: #0a9793;
 
-@color-brand-text: #0776a0;
+@color-brand-text: #099793;
 @color-breadcrumb-link: #337ab7;
 @color-breadcrumb-link-hover: #23527c;
 @color-breadcrumb-separator: #555;
@@ -19,6 +19,8 @@
 @color-footer: #fff;
 @color-footer-link: @color-footer;
 @color-footer-link-hover: #ff9840;
+@color-gradient1: @color-brand + #502b1d;
+@color-gradient2: @color-brand;
 @color-main-background: #f2f2f2;
 @color-main-link: @color-nav-background2;
 @color-main-link-hover: #084590;
@@ -44,4 +46,7 @@
 /*@color-subnav-link-hover-background: #7f7f7f;*/
 @color-subnav-link-hover-background: @color-nav-background2;
 
+@dim-gradient-light: 5%;
+@dim-gradient-dark: 95%;
+
 @import "styles.less";

ccm-sci-bundle/web/themes/scicms-default/styles/scicms.css

@@ -119,6 +119,16 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     height: 1px;
     overflow: hidden;
   }
+  /*
+     * Mixin class for the gradient.
+     */
+  .mixin-gradient {
+    background-image: -ie-linear-gradient(top, #509dd8 5%, #0072bb 95%);
+    background-image: -moz-linear-gradient(top, #509dd8 5%, #0072bb 95%);
+    background-image: -o-linear-gradient(top, #509dd8 5%, #0072bb 95%);
+    background-image: -webkit-linear-gradient(top, #509dd8 5%, #0072bb 95%);
+    background-image: linear-gradient(top, #509dd8 5%, #0072bb 95%);
+  }
   html {
     margin: 0;
     position: relative;
@@ -183,11 +193,12 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     background-image: -o-linear-gradient(top, #509dd8 5%, #0072bb 95%);
     background-image: -webkit-linear-gradient(top, #509dd8 5%, #0072bb 95%);
     background-image: linear-gradient(top, #509dd8 5%, #0072bb 95%);
+    border-top: 0.5em solid #ffffff;
     box-shadow: 0 0 20px 0 #4a4a4a;
     color: #ffffff;
-    font-family: "Special", serif;
+    font-family: "TextCond", serif;
     font-variant: small-caps;
-    height: 3.5em;
+    height: 4em;
     margin: 0;
     padding: 0;
   }
@@ -249,7 +260,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-top: 1em;
   }
   header .header-logo p {
-    color: #0776a0;
+    color: #0072bb;
     font-family: "Title", serif;
     font-size: 2.5em;
     font-variant: small-caps;
@@ -257,18 +268,18 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     text-align: center;
   }
   nav#main-navigation {
-    background-color: transparent;
-    border: none;
-    margin-bottom: 0;
-    padding-top: 0.25em;
-    padding-bottom: 0;
-    width: 100%;
     background-image: -ie-linear-gradient(top, #509dd8 5%, #0072bb 95%);
     background-image: -moz-linear-gradient(top, #509dd8 5%, #0072bb 95%);
     background-image: -o-linear-gradient(top, #509dd8 5%, #0072bb 95%);
     background-image: -webkit-linear-gradient(top, #509dd8 5%, #0072bb 95%);
     background-image: linear-gradient(top, #509dd8 5%, #0072bb 95%);
-    border-bottom: 2px solid #e7e6ee;
+    background-color: transparent;
+    border: none;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    width: 100%;
+    height: 2.8em;
   }
   nav#main-navigation div#nav-wrapper {
     margin-left: auto;
@@ -381,11 +392,15 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
     padding: 1em;
   }
-  main div.address {
+  main article {
     background-color: #f2f2f2;
     border-radius: 0 0 0.5em 0.5em;
     box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
     padding: 1em;
+    border-radius: 0.5em;
+  }
+  main div.address {
+    /*.mixin-main();*/
     font-family: 'Text', sans-serif;
     margin-bottom: 2em;
   }
@@ -399,10 +414,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main div.minutes dl,
   main div.person dl,
   main div.service dl {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     font-family: 'text', sans-serif;
   }
   main div.agenda dl dt,
@@ -474,10 +486,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     color: #084590;
   }
   main div.bookmark-url {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     font-family: 'Text', sans-serif;
     margin-bottom: 2em;
   }
@@ -491,16 +500,10 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     color: #084590;
   }
   main div.contact div.person {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
   }
   main div.contact div.address {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-bottom: 2em;
   }
   main div.contact div.address pre.addresstext {
@@ -533,10 +536,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-right: 1em;
   }
   main div.formitem {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-bottom: 2em;
   }
   main div.formitem span.label {
@@ -548,10 +548,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     font-weight: bold;
   }
   main div.fsi-desc {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
   }
   main div.fsi-links {
     /*.mixin-main();*/
@@ -560,10 +557,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     text-align: center;
   }
   main div.fsi-links a {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-left: 4em;
     margin-right: 4em;
     padding-left: 2em;
@@ -590,17 +584,11 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     content: "\f019";
   }
   main div.government-uid {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-bottom: 1em;
   }
   main div.image div.image-data {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     display: -webkit-flex;
     display: flex;
     margin-bottom: 2em;
@@ -628,10 +616,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     padding-left: 0.5em;
   }
   main div.lead {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     font-weight: bold;
     margin-bottom: 1em;
   }
@@ -640,12 +625,18 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     font-family: 'Text', sans-serif;
   }
   main div.main {
-    background-color: #f2f2f2;
+    /*background-color: @color-main-background;*/
-    border-radius: 0.5em;
+    /*border-radius: 0.5em;*/
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
+    /*box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);*/
-    margin-bottom: 3em;
+    margin-bottom: 0;
     padding: 1em;
   }
+  main div.main :first-child {
+    margin-top: 0;
+  }
+  main div.main ul {
+    overflow: hidden;
+  }
   main div.nav-quicklinks {
     background-color: #f2f2f2;
     border-radius: 0 0 0.5em 0.5em;
@@ -653,6 +644,25 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     padding: 1em;
     margin-bottom: 2em;
   }
+  main div.nav-quicklinks dl dt a {
+    font-size: 1.2em;
+    font-weight: bold;
+    text-decoration: none;
+  }
+  main div.nav-quicklinks dl dt a:link,
+  main div.nav-quicklinks dl dt a:visited {
+    color: #0072bb;
+  }
+  main div.nav-quicklinks dl dt a:active,
+  main div.nav-quicklinks dl dt a:focus,
+  main div.nav-quicklinks dl dt a:hover {
+    color: #084590;
+  }
+  main div.nav-quicklinks dl dd {
+    margin-top: 0.5em;
+    margin-left: 0;
+    padding-left: 0;
+  }
   main div.news-date {
     background-color: #f2f2f2;
     border: 1px solid #0072bb;
@@ -673,10 +683,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     width: 18em;
   }
   main div.person div.address {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-bottom: 2em;
   }
   main div.person div.address p {
@@ -687,17 +694,11 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-top: 0;
   }
   main div.pressrelease div.contactinfo {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
   }
   main div.pressrelease div.referencecode {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-top: 1em;
     margin-bottom: 2em;
   }
@@ -714,10 +715,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   main div.scipublication dl,
   main div.journal dl {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
   }
   main div.scipublication dl dt,
   main div.journal dl dt {
@@ -768,10 +766,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   main div.scipublication div.export-links ul,
   main div.journal div.export-links ul {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     list-style: none;
@@ -801,26 +796,17 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   main div.scipublication div.journal-abstract,
   main div.journal div.journal-abstract {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
   }
   main div.scipublication div.textinfo,
   main div.journal div.textinfo {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
   main div.scipublication ul.articles,
   main div.journal ul.articles {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     list-style: none;
@@ -853,10 +839,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   }
   main div.scipublication table.library-signatures,
   main div.journal table.library-signatures {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     width: 100%;
@@ -880,10 +863,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     color: #084590;
   }
   main div.sciorga div.tab {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     border-top-left-radius: 0;
     margin-bottom: 2em;
   }
@@ -1013,10 +993,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     color: #084590;
   }
   main div.series div.abstract {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     margin-bottom: 1em;
   }
   main div.series ul.articles {
@@ -1037,10 +1014,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-bottom: 2em;
   }
   main dl.event-details {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
   }
   main dl.event-details dt {
     font-weight: bold;
@@ -1051,42 +1025,66 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     padding-left: 0;
   }
   main h1 {
-    color: #0776a0;
+    color: #0072bb;
-    font-family: "Caption", sans-serif;
+    font-family: "TextCond", sans-serif;
     font-size: 2em;
+    font-variant: small-caps;
     font-weight: normal;
     margin-top: 1em;
   }
   main h2 {
     font-size: 1.8em;
+    font-variant: small-caps;
   }
   main h2.subheading {
+    background-image: -ie-linear-gradient(top, #509dd8 5%, #0072bb 95%);
+    background-image: -moz-linear-gradient(top, #509dd8 5%, #0072bb 95%);
+    background-image: -o-linear-gradient(top, #509dd8 5%, #0072bb 95%);
+    background-image: -webkit-linear-gradient(top, #509dd8 5%, #0072bb 95%);
+    background-image: linear-gradient(top, #509dd8 5%, #0072bb 95%);
     background-color: #0072bb;
-    border-top-left-radius: 1em;
+    border-top-left-radius: 0.5em;
-    border-top-right-radius: 1em;
+    border-top-right-radius: 0.5em;
     box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
+    clear: both;
     color: #ffffff;
+    font-family: 'TextCond';
     font-size: 1.2em;
     font-weight: bold;
+    font-variant: small-caps;
     margin-bottom: 0;
     padding-top: 0.4em;
     padding-bottom: 0.4em;
     text-align: center;
   }
+  main article h2.subheading {
+    border-radius: 0.5em;
+    box-shadow: none;
+    margin-top: 0;
+    margin-bottom: 0.5em;
+  }
   main h2.subheading + ul {
     margin-top: 0;
   }
   main h3 {
+    font-family: 'TextCond';
     font-size: 1.6em;
+    font-variant: small-caps;
   }
   main h4 {
+    font-family: 'TextCond';
     font-size: 1.4em;
+    font-variant: small-caps;
   }
   main h5 {
+    font-family: 'TextCond';
     font-size: 1.2em;
+    font-variant: small-caps;
   }
   main h6 {
+    font-family: 'TextCond';
     font-size: 1.0em;
+    font-variant: small-caps;
     font-weight: bold;
   }
   main figure {
@@ -1120,20 +1118,26 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     content: "\f002";
   }
   main ul.item-list,
-  main ul.news-list,
+  main ul.new-list {
-  main ul.related-links,
-  main ul.file-attachments {
-    /*background-color: @color-main-background;*/
     background-color: #f2f2f2;
     border-radius: 0 0 0.5em 0.5em;
     box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
     padding: 1em;
-    border-bottom-left-radius: 0.5em;
+  }
-    border-bottom-right-radius: 0.5em;
+  main ul.item-list,
-    /*box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);*/
+  main ul.news-list,
+  main ul.related-links,
+  main ul.file-attachments {
+    /*background-color: @color-main-background;*/
+    /*.mixin-main();
+ 
+             border-bottom-left-radius: 0.5em;
+             border-bottom-right-radius: 0.5em;*/
+    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
     list-style: none;
     margin-top: 0;
     margin-bottom: 3em;
+    padding-left: 0;
     /*padding: 1em;*/
   }
   main ul.item-list li,
@@ -1141,7 +1145,8 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main ul.related-links li,
   main ul.file-attachments li {
     /*position: relative;*/
-    padding-top: 0.5em;
+    background-color: #f2f2f2;
+    padding: 0.5em;
   }
   main ul.item-list li a,
   main ul.news-list li a,
@@ -1179,7 +1184,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main ul.news-list li .event-date,
   main ul.related-links li .event-date,
   main ul.file-attachments li .event-date {
-    border: thin solid #0776a0;
+    border: thin solid #0072bb;
     float: left;
     font-weight: bold;
     margin-right: 0.75em;
@@ -1195,7 +1200,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main ul.news-list li .event-date .day,
   main ul.related-links li .event-date .day,
   main ul.file-attachments li .event-date .day {
-    background-color: #0776a0;
+    background-color: #0072bb;
     color: #fff;
     padding: 0.3em 0.75em 0.1em 0.75em;
   }
@@ -1204,7 +1209,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main ul.related-links li .event-date .month,
   main ul.file-attachments li .event-date .month {
     background-color: #fff;
-    color: #0776a0;
+    color: #0072bb;
     padding: 0.1em 0.75em 0.3em 0.75em;
   }
   main ul.item-list li .lead,
@@ -1221,9 +1226,9 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   main ul.news-list li .news-date,
   main ul.related-links li .news-date,
   main ul.file-attachments li .news-date {
-    border: thin solid #0776a0;
+    border: thin solid #0072bb;
     border-radius: 0.75em;
-    color: #0776a0;
+    color: #0072bb;
     float: right;
     font-weight: bold;
     height: 1.5em;
@@ -1316,10 +1321,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-bottom: 3em;
   }
   main ul.mpa-paginator li {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     display: inline;
     margin-left: 1em;
     margin-right: 1em;
@@ -1351,10 +1353,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     margin-left: 0.2em;
   }
   main ul.mpa-toc {
-    background-color: #f2f2f2;
+    /*.mixin-main();*/
-    border-radius: 0 0 0.5em 0.5em;
-    box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
-    padding: 1em;
     /*background-color: @color-nav-background2;*/
     border-top-left-radius: 0.5em;
     border-top-right-radius: 0.5em;
@@ -1363,6 +1362,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     -webkit-column-count: 2;
     column-count: 2;
     list-style: none;
+    min-height: 11em;
     /*padding: 1em;*/
   }
   main ul.mpa-toc li {
@@ -1580,10 +1580,23 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
 }
 @media screen and (min-width: 60em) {
   nav#main-navigation div#nav-wrapper {
+    display: table;
+    height: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-bottom: 0;
     text-align: center;
+    vertical-align: middle;
   }
   nav#main-navigation div#nav-wrapper ul {
-    display: inline;
+    display: table-cell;
+    height: 100%;
+    vertical-align: middle;
+  }
+  nav#main-navigation div#nav-wrapper ul li {
+    display: table-cell;
+    height: 100%;
+    vertical-align: middle;
   }
   nav#main-navigation div#nav-wrapper ul li.active {
     border: none;
@@ -1597,7 +1610,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
 }
 @media screen and (min-width: 64em) {
   header #service-panel {
-    height: 2.8em;
+    height: 3.3em;
   }
   header #service-panel #service-panel-wrapper {
     display: flex;
@@ -1665,6 +1678,9 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
   div#main-wrapper main {
     -webkit-flex: 3;
     flex: 3;
+    /*max-width: 60em;*/
+    /*margin-left: auto;*/
+    /*margin-right: auto;*/
   }
   div#main-wrapper main div.related-links-file-attachments {
     display: -webkit-flex;
@@ -1741,7 +1757,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     text-align: center;
   }
   div.header-logo p {
-    color: #0776a0;
+    color: #0072bb;
     font-family: "Title", serif;
     font-size: 2.5em;
     font-variant: small-caps;

ccm-sci-bundle/web/themes/scicms-default/styles/scicms.less

@@ -6,7 +6,7 @@
 */
 @color-brand: #0072bb;
 
-@color-brand-text: #0776a0;
+@color-brand-text: #0072bb;
 @color-breadcrumb-link: #337ab7;
 @color-breadcrumb-link-hover: #23527c;
 @color-breadcrumb-separator: #555;
@@ -19,6 +19,8 @@
 @color-footer: #fff;
 @color-footer-link: @color-footer;
 @color-footer-link-hover: #ff9840;
+@color-gradient1: @color-brand + #502b1d;
+@color-gradient2: @color-brand;
 @color-main-background: #f2f2f2;
 @color-main-link: @color-nav-background2;
 @color-main-link-hover: #084590;
@@ -44,4 +46,7 @@
 /*@color-subnav-link-hover-background: #7f7f7f;*/
 @color-subnav-link-hover-background: @color-nav-background2;
 
+@dim-gradient-light: 5%;
+@dim-gradient-dark: 95%;
+
 @import "styles.less";

ccm-sci-bundle/web/themes/scicms-default/styles/styles.less

@@ -129,6 +129,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     font-style: normal;
 }
 
+@dim-header-border-top: 0.5em;
 @dim-header-logo-base-width: 350px;
 @dim-footer-height: 12em;
 @dim-main-nav-breakpoint: 68em;
@@ -167,6 +168,32 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
         overflow: hidden;
     }
 
+    /*
+     * Mixin class for the gradient.
+     */
+    .mixin-gradient {
+        background-image: -ie-linear-gradient(
+            top, 
+            @color-gradient1 @dim-gradient-light, 
+            @color-gradient2 @dim-gradient-dark);
+        background-image: -moz-linear-gradient(
+            top, 
+            @color-gradient1@dim-gradient-light, 
+            @color-gradient2 @dim-gradient-dark);
+        background-image: -o-linear-gradient(
+            top, 
+            @color-gradient1@dim-gradient-light, 
+            @color-gradient2 @dim-gradient-dark);
+        background-image: -webkit-linear-gradient(
+            top, 
+            @color-gradient1@dim-gradient-light, 
+            @color-gradient2 @dim-gradient-dark);
+        background-image: linear-gradient(
+            top,
+            @color-gradient1@dim-gradient-light,
+            @color-gradient2 @dim-gradient-dark);
+    }
+
     html {
         margin: 0;
 
@@ -248,35 +275,19 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
         and the service menu.
         */
         #service-panel {
-            background-image: -ie-linear-gradient(
+
-                top, 
+            .mixin-gradient();
-                @color-service-panel-background1 5%, 
+
-                @color-service-panel-background2 95%);
+            border-top: @dim-header-border-top solid #fff;
-            background-image: -moz-linear-gradient(
-                top, 
-                @color-service-panel-background1 5%, 
-                @color-service-panel-background2 95%);
-            background-image: -o-linear-gradient(
-                top, 
-                @color-service-panel-background1 5%, 
-                @color-service-panel-background2 95%);
-            background-image: -webkit-linear-gradient(
-                top, 
-                @color-service-panel-background1 5%, 
-                @color-service-panel-background2 95%);
-            background-image: linear-gradient(
-                top,
-                @color-service-panel-background1 5%,
-                @color-service-panel-background2 95%);
 
             box-shadow: 0 0 20px 0 @color-service-panel-shadow;
 
             color: @color-service-panel;
 
-            font-family: "Special", serif;
+            font-family: "TextCond", serif;
             font-variant: small-caps;
 
-            height: 3.5em;
+            height: 3.5em + @dim-header-border-top;
 
             margin: 0;
             padding: 0;
@@ -383,38 +394,19 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     }
 
     nav#main-navigation {
+        .mixin-gradient();
+
         background-color: transparent;
 
         border: none;
 
         margin-bottom: 0;
 
-        padding-top: 0.25em;
+        padding-top: 0;
         padding-bottom: 0;
 
         width: 100%;
-        background-image: -ie-linear-gradient(
+        height: 2.8em;
-            top,
-            @color-nav-background1 5%,
-            @color-nav-background2 95%);
-        background-image: -moz-linear-gradient(
-            top,
-            @color-nav-background1 5%,
-            @color-nav-background2 95%);
-        background-image: -o-linear-gradient(
-            top,
-            @color-nav-background1 5%,
-            @color-nav-background2 95%);
-        background-image: -webkit-linear-gradient(
-            top,
-            @color-nav-background1 5%,
-            @color-nav-background2 95%);
-        background-image: linear-gradient(
-            top,
-            @color-nav-background1 5%,
-            @color-nav-background2 95%);
-
-        border-bottom: 2px solid @color-header-border;
 
         div#nav-wrapper {
             margin-left: auto;
@@ -579,9 +571,15 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
 
     main {
 
+        article {
+            .mixin-main();
+
+            border-radius: 0.5em;
+        }
+
         div.address {
 
-            .mixin-main();
+            /*.mixin-main();*/
 
             font-family: 'Text', sans-serif;
 
@@ -601,7 +599,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
         div.person,
         div.service {
             dl {
-                .mixin-main();
+                /*.mixin-main();*/
 
                 font-family: 'text', sans-serif;
 
@@ -637,7 +635,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
         }
 
         div.bookmark-url {
-            .mixin-main();
+            /*.mixin-main();*/
 
             font-family: 'Text', sans-serif;
 
@@ -656,11 +654,11 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
 
         div.contact {
             div.person {
-                .mixin-main();
+                /*.mixin-main();*/
             }
 
             div.address {
-                .mixin-main();
+                /*.mixin-main();*/
 
                 margin-bottom: 2em;
 
@@ -716,7 +714,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
         }
 
         div.formitem {
-            .mixin-main();
+            /*.mixin-main();*/
 
             margin-bottom: 2em;
 
@@ -734,7 +732,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
         }
 
         div.fsi-desc {
-            .mixin-main();
+            /*.mixin-main();*/
         }
 
         div.fsi-links {
@@ -746,7 +744,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
             text-align: center;
 
             a {
-                .mixin-main();
+                /*.mixin-main();*/
 
                 margin-left: 4em;
                 margin-right: 4em;
@@ -780,7 +778,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
         }
 
         div.government-uid {
-            .mixin-main();
+            /*.mixin-main();*/
 
             margin-bottom: 1em;
         }
@@ -788,7 +786,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
         div.image {
             div.image-data {
 
-                .mixin-main();
+                /*.mixin-main();*/
 
                 display: -webkit-flex;
                 display: flex;
@@ -825,10 +823,11 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
         }
 
         div.lead {
-            .mixin-main();
+            /*.mixin-main();*/
 
             font-weight: bold;
             margin-bottom: 1em;
+
         }
 
         div.lead, div.main {
@@ -836,20 +835,57 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
         }
 
         div.main {
-            background-color: @color-main-background;
+            /*background-color: @color-main-background;*/
 
-            border-radius: 0.5em;
+            /*border-radius: 0.5em;*/
 
-            box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
+            /*box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);*/
+
+            margin-bottom: 0;
 
-            margin-bottom: 3em;
             padding: 1em;
+
+            :first-child {
+                margin-top: 0;
+            }
+
+            ul {
+                overflow: hidden;
+            }
         }
 
         div.nav-quicklinks {
             .mixin-main();
 
             margin-bottom: 2em;
+
+            dl {
+                dt {
+                    a {
+
+
+                        font-size: 1.2em;
+                        font-weight: bold;
+
+                        text-decoration: none;
+
+                        &:link, &:visited {
+                            color: @color-main-link;
+                        }
+
+                        &:active, &:focus, &:hover {
+                            color: @color-main-link-hover;
+                        }
+                    }
+                }
+
+                dd {
+                    margin-top: 0.5em;
+                    margin-left: 0;
+
+                    padding-left: 0;
+                }
+            }
         }
 
         div.news-date {
@@ -886,7 +922,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
 
         div.person {
             div.address {
-                .mixin-main();
+                /*.mixin-main();*/
 
                 margin-bottom: 2em;
 
@@ -903,14 +939,14 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
 
         div.pressrelease {
             div.contactinfo {
-                .mixin-main();
+                /*.mixin-main();*/
 
                 border-top-left-radius: 0;
                 border-top-left-radius: 0;
             }
 
             div.referencecode {
-                .mixin-main();
+                /*.mixin-main();*/
 
                 margin-top: 1em;
                 margin-bottom: 2em;
@@ -939,7 +975,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
             }
 
             dl {
-                .mixin-main();
+                /*.mixin-main();*/
 
                 dt {
                     font-weight: bold;
@@ -983,7 +1019,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
                 }
 
                 ul {
-                    .mixin-main();
+                    /*.mixin-main();*/
 
                     border-top-left-radius: 0;
                     border-top-right-radius: 0;
@@ -1011,18 +1047,18 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
             }
 
             div.journal-abstract {
-                .mixin-main();
+                /*.mixin-main();*/
             }
 
             div.textinfo {
-                .mixin-main();
+                /*.mixin-main();*/
 
                 border-top-left-radius: 0;
                 border-top-right-radius: 0;
             }
 
             ul.articles {
-                .mixin-main();
+                /*.mixin-main();*/
 
                 border-top-left-radius: 0;
                 border-top-right-radius: 0;
@@ -1052,7 +1088,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
             }
 
             table.library-signatures {
-                .mixin-main();
+                /*.mixin-main();*/
 
                 border-top-left-radius: 0;
                 border-top-right-radius: 0;
@@ -1083,7 +1119,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
 
         div.sciorga {
             div.tab {
-                .mixin-main();
+                /*.mixin-main();*/
 
                 border-top-left-radius: 0;
 
@@ -1219,7 +1255,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
 
         div.series {
             div.abstract {
-                .mixin-main();
+                /*.mixin-main();*/
 
                 margin-bottom: 1em;
             }
@@ -1255,7 +1291,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
 
         dl.event-details {
 
-            .mixin-main();
+            /*.mixin-main();*/
 
             dt {
                 font-weight: bold;
@@ -1272,8 +1308,9 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
         h1 {
             color: @color-brand-text;
 
-            font-family: "Caption", sans-serif;
+            font-family: "TextCond", sans-serif;
             font-size: 2em;
+            font-variant: small-caps;
             font-weight: normal;
 
             margin-top: 1em;
@@ -1281,20 +1318,27 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
 
         h2 {
             font-size: 1.8em; 
+            font-variant: small-caps;
         }
 
         h2.subheading {
+            .mixin-gradient();
+
             background-color: @color-nav-background2;
 
-            border-top-left-radius: 1em;
+            border-top-left-radius: 0.5em;
-            border-top-right-radius: 1em;
+            border-top-right-radius: 0.5em;
 
             box-shadow: 0.1em 0.2em 0.35em 0 rgba(0,0,0,0.35);
 
+            clear: both;
+
             color: @color-nav;
 
+            font-family: 'TextCond';
             font-size: 1.2em;
             font-weight: bold;
+            font-variant: small-caps;
 
             margin-bottom: 0;
 
@@ -1304,24 +1348,43 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
             text-align: center;
         }
 
+        article h2.subheading {
+
+            border-radius: 0.5em;
+
+            box-shadow: none;
+
+            margin-top: 0;    
+            margin-bottom: 0.5em;
+        }
+
         h2.subheading + ul {
             margin-top: 0;
         }
 
         h3 {
+            font-family: 'TextCond';
             font-size: 1.6em;
+            font-variant: small-caps;
         }
 
         h4 {
+            font-family: 'TextCond';
             font-size: 1.4em;
+            font-variant: small-caps;
+
         }
 
         h5 {
+            font-family: 'TextCond';
             font-size: 1.2em;
+            font-variant: small-caps;
         }
 
         h6 {
+            font-family: 'TextCond';
             font-size: 1.0em;
+            font-variant: small-caps;
             font-weight: bold;
         }
 
@@ -1378,30 +1441,39 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
             }
         }
 
+        ul.item-list,
+        ul.new-list {
+            .mixin-main();
+        }
+
         ul.item-list,
         ul.news-list,
         ul.related-links,
         ul.file-attachments {
             /*background-color: @color-main-background;*/
 
-            .mixin-main();
+            /*.mixin-main();
  
-            border-bottom-left-radius: 0.5em;
+             border-bottom-left-radius: 0.5em;
-            border-bottom-right-radius: 0.5em;
+             border-bottom-right-radius: 0.5em;*/
 
-            /*box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);*/
+            box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);
 
             list-style: none;
 
             margin-top: 0;
             margin-bottom: 3em;
 
+            padding-left: 0;
+
             /*padding: 1em;*/
 
             li {
                 /*position: relative;*/
 
-                padding-top: 0.5em;
+                background-color: @color-main-background;
+
+                padding: 0.5em;
 
                 a {
                     font-size: 1.2em;
@@ -1554,7 +1626,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
             margin-bottom: 3em;
 
             li {
-                .mixin-main();
+                /*.mixin-main();*/
 
                 display: inline;
 
@@ -1596,7 +1668,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
         }
 
         ul.mpa-toc {
-            .mixin-main();
+            /*.mixin-main();*/
 
             /*background-color: @color-nav-background2;*/
 
@@ -1611,6 +1683,8 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
 
             list-style: none;
 
+            min-height: 11em;
+
             /*padding: 1em;*/
 
             li {
@@ -1923,13 +1997,35 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
 
     @media(min-width: 60em) {
         nav#main-navigation {
+
             div#nav-wrapper {
+                display: table;
+
+                height: 100%;
+                
+                margin-left: auto;
+                margin-right: auto;
+
+                padding-bottom: 0;
+                
                 text-align: center;
 
+                vertical-align: middle;
+                
                 ul {
-                    display: inline;
+                    display: table-cell;
+                    
+                    height: 100%;
+                    
+                    vertical-align: middle;
 
                     li {
+                        display: table-cell;
+                        
+                        height: 100%;
+                        
+                        vertical-align: middle;
+                        
                         &.active {
                             border: none;
                         }
@@ -1951,7 +2047,7 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
     @media(min-width: 64em) {
         header {
             #service-panel {
-                height: 2.8em;
+                height: 2.8em + @dim-header-border-top;
 
                 #service-panel-wrapper {
                     display: flex;
@@ -2053,6 +2149,10 @@ We are using some Webfonts. The fonts are from the Fontsquirrel
                 -webkit-flex: 3;
                 flex: 3;
 
+                /*max-width: 60em;*/
+                /*margin-left: auto;*/
+                /*margin-right: auto;*/
+
                 div.related-links-file-attachments {
                     display: -webkit-flex;
                     display: flex;

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/address-detail.xml

@@ -2,7 +2,7 @@
 <!DOCTYPE stylesheet [<!ENTITY nbsp '&#160;'>]>
 <content-item-layout>
         
-    <div class="address">
+    <article class="address">
         <include file="fragments/edit-link.xml"/>
     
         <pre class="addresstext">
@@ -29,5 +29,5 @@
     
         <include file="fragments/assets/related-links-and-file-attachments.xml" />
 
-    </div>
+    </article>
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/agenda-detail.xml

@@ -5,7 +5,7 @@
                       <!ENTITY times '&#xD7;'>]>
 <content-item-layout>
 
-    <div class="agenda">
+    <article class="agenda">
         <include file="fragments/edit-link.xml"/>
     
         <div class="lead">
@@ -61,5 +61,5 @@
     
         <include file="fragments/assets/related-links-and-file-attachments.xml" />
     
-    </div>
+    </article>
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/article-detail.xml

@@ -4,7 +4,7 @@
                       <!ENTITY times '&#xD7;'>]>
 <content-item-layout>
 
-    <div>
+    <article class="article">
         <include file="fragments/edit-link.xml"/>
            
         <div class="lead">
@@ -15,12 +15,13 @@
 
         <include file="fragments/assets/notes.xml"/>
         
+
         <div class="main">
             <main-text/>
         </div>
     
+
         <include file="fragments/assets/related-links-and-file-attachments.xml" />
         
-        
+    </article>
-    </div>
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/bookmark-detail.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <content-item-layout>
     
-    <div>
+    <article class="bookmark">
     
         <include file="fragments/edit-link.xml"/>
     
@@ -21,6 +21,6 @@
             </bookmark-link>
         </div>
     
-    </div>
+    </article>
     
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/contact-detail.xml

@@ -4,7 +4,7 @@
                       <!ENTITY times '&#xD7;'>]>
 <content-item-layout>
 
-    <div class="contact">
+    <article class="contact">
         <include file="fragments/edit-link.xml"/>
 
         <div class="person">
@@ -130,5 +130,5 @@
         
         <include file="fragments/assets/related-links-and-file-attachments.xml" />
     
-    </div>
+    </article>
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/decisiontree-detail.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <content-item-layout>
 
-    <div class="decisiontree">
+    <article class="decisiontree">
         <include file="fragments/edit-link.xml"/>
     
         <div class="lead">
@@ -37,6 +37,6 @@
 
         <include file="fragments/assets/related-links-and-file-attachments.xml" />
         
-    </div>
+    </article>
 
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/detail-default.xml

@@ -4,9 +4,13 @@
         <content-item-title/>
     </h2>-->
 
-    <include file="fragments/edit-link.xml"/>
+    <article>
+        <include file="fragments/edit-link.xml"/>
+    
+        <div>
+            <show-property name="pageDescription"/>
+        </div>
+
+    </article>
 
-    <div>
-        <show-property name="pageDescription"/>
-    </div>
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/event-detail.xml

@@ -3,7 +3,7 @@
                       <!ENTITY thinsp '&#8201;'>]>
 <content-item-layout>
 
-    <div>
+    <article class="event">
         <include file="fragments/edit-link.xml"/>
     
         <div class="lead">
@@ -109,6 +109,6 @@
         
         <include file="fragments/assets/related-links-and-file-attachments.xml" />
         
-    </div>
+    </article>
     
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/formitem-detail.xml

@@ -1,20 +1,23 @@
 <?xml version="1.0" encoding="utf-8"?>
 <content-item-layout>
     
-    <div class="form-description lead">
+    <article class="form-item">
+        <div class="form-description lead">
             <form-description/>
         </div>
     
-    <div class="formitem">
+        <div class="formitem">
-        <include file="fragments/edit-link.xml"/>
+            <include file="fragments/edit-link.xml"/>
         
-        <include file="fragments/assets/image-attachments.xml"/>
+            <include file="fragments/assets/image-attachments.xml"/>
 
-        <include file="fragments/assets/notes.xml"/>
+            <include file="fragments/assets/notes.xml"/>
     
-        <form-components/>
+            <form-components/>
         
-        <include file="fragments/assets/related-links-and-file-attachments.xml" />
+            <include file="fragments/assets/related-links-and-file-attachments.xml" />
 
-    </div>
+        </div>
+
+    </article>
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/fsi-detail.xml

@@ -3,7 +3,7 @@
                       <!ENTITY thinsp '&#8201;'>]>
 <content-item-layout>
 
-    <div>
+    <article class="filestorageitem">
         <include file="fragments/edit-link.xml"/>
         
         <div class="fsi-desc">
@@ -30,6 +30,6 @@
         
         <include file="fragments/assets/related-links-and-file-attachments.xml" />
     
-    </div>
+    </article>
     
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/image-detail.xml

@@ -5,7 +5,7 @@
                       <!ENTITY times '&#xD7;'>]>
 <content-item-layout>
 
-    <div class="image">
+    <article class="image">
         <include file="fragments/edit-link.xml"/>
         
         <div class="lead">
@@ -127,5 +127,5 @@
         
         <include file="fragments/assets/related-links-and-file-attachments.xml" />
 
-    </div>
+    </article>
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/job-detail.xml

@@ -5,7 +5,7 @@
                       <!ENTITY times '&#xD7;'>]>
 <content-item-layout>
 
-    <div class="job">
+    <article class="job">
         <include file="fragments/edit-link.xml"/>
     
         <div class="lead">
@@ -98,5 +98,5 @@
     
         <include file="fragments/assets/related-links-and-file-attachments.xml" />
     
-    </div>
+    </article>
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/journal-detail.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <content-item-layout>
    
-    <div class="journal">
+    <article class="journal">
     
         <include file="fragments/edit-link.xml"/>
     
@@ -53,5 +53,5 @@
             </articles>
         </scipublications>
     
-    </div>
+    </article>
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/legalnotice-detail.xml

@@ -4,7 +4,7 @@
                       <!ENTITY times '&#xD7;'>]>
 <content-item-layout>
 
-    <div class="legalnotice">
+    <article class="legalnotice">
         <include file="fragments/edit-link.xml"/>
     
         <if-property name="governmentUID">
@@ -24,5 +24,5 @@
     
         <include file="fragments/assets/related-links-and-file-attachments.xml" />
     
-    </div>
+    </article>
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/minutes-detail.xml

@@ -5,7 +5,7 @@
                       <!ENTITY times '&#xD7;'>]>
 <content-item-layout>
 
-    <div class="minutes">
+    <article class="minutes">
         <include file="fragments/edit-link.xml"/>
     
         <div class="lead">
@@ -59,5 +59,5 @@
     
         <include file="fragments/assets/related-links-and-file-attachments.xml" />
     
-    </div>
+    </article>
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/mpa-detail.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <content-item-layout>
 
-    <div>
+    <article class="multi-part-article">
         <include file="fragments/edit-link.xml"/>
     
         <div class="lead">
@@ -61,6 +61,6 @@
     
         <include file="fragments/assets/related-links-and-file-attachments.xml" />
         
-    </div>
+    </article>
     
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/news-detail.xml

@@ -3,7 +3,7 @@
                       <!ENTITY thinsp '&#8201;'>]>
 <content-item-layout>
 
-    <div>
+    <article class="news">
         <div class="news-date">
             <news-date>
                 <date-format default="true">
@@ -36,6 +36,6 @@
         
         <include file="fragments/assets/related-links-and-file-attachments.xml" />
     
-    </div>
+    </article>
     
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/person-detail.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <content-item-layout>
     
-    <div class="person">
+    <article class="person">
     
         <include file="fragments/edit-link.xml"/>
    
@@ -110,5 +110,5 @@
         
         <include file="fragments/assets/related-links-and-file-attachments.xml" />
         
-    </div>
+    </article>
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/pressrelease-detail.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <content-item-layout>
 
-    <div class="pressrelease">
+    <article class="pressrelease">
         <include file="fragments/edit-link.xml"/>
     
         <div class="lead">
@@ -32,6 +32,6 @@
         
         <include file="fragments/assets/related-links-and-file-attachments.xml" />
     
-    </div>
+    </article>
     
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/scidepartment-detail.xml

@@ -3,7 +3,7 @@
                       <!ENTITY thinsp '&#8201;'>]>
 <content-item-layout>
     
-    <div class="scidepartment sciorga">
+    <article class="scidepartment sciorga">
         
         <include file="fragments/edit-link.xml"/>
         
@@ -126,5 +126,5 @@
 
         <include file="fragments/assets/related-links-and-file-attachments.xml" />
 
-    </div>
+    </article>
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/sciinstitute-detail.xml

@@ -3,7 +3,7 @@
                       <!ENTITY thinsp '&#8201;'>]>
 <content-item-layout>
     
-    <div class="sciinstitute sciorga">
+    <article class="sciinstitute sciorga">
         
         <include file="fragments/edit-link.xml"/>
         
@@ -154,5 +154,5 @@
 
         <include file="fragments/assets/related-links-and-file-attachments.xml" />
         
-    </div>
+    </article>
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/sciproject-detail.xml

@@ -3,7 +3,7 @@
                       <!ENTITY thinsp '&#8201;'>]>
 <content-item-layout>
     
-    <div class="sciproject sciorga">
+    <article class="sciproject sciorga">
         
         <include file="fragments/edit-link.xml"/>
                 
@@ -219,6 +219,6 @@
         
         <include file="fragments/assets/related-links-and-file-attachments.xml" />
         
-    </div>
+    </article>
     
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/sciproject-list.xml

@@ -46,12 +46,12 @@
             </div>
             <div class="members">
                 <members>
-                    <member separator="; ">
+                    <project-member separator="; ">
                         <span class="member">
                             <surname after=", "/>
-                            <givenname/>
+                            <givenName/>
                         </span>
-                    </member>
+                    </project.member>
                 </members>
             </div>
             <div class="lead">

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/scipublications-detail.xml

@@ -1,10 +1,10 @@
-<?xml version="1.0" encoding="utf-8"?>
+<xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE stylesheet [<!ENTITY nbsp '&#160;'>
                       <!ENTITY thinsp '&#8201;'>]>
 <content-item-layout>
     
     <scipublications>
-        <div class="scipublication">
+        <article class="scipublication">
         
             <include file="fragments/edit-link.xml"/>
         
@@ -379,6 +379,6 @@
         
             <include file="fragments/assets/related-links-and-file-attachments.xml" />
         
-        </div>
+        </article>
     </scipublications>
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/series-detail.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <content-item-layout>
-    <div class="scipublication series">
+    <article class="scipublication series">
         <include file="fragments/edit-link.xml"/>
     
         <div class="abstract">
@@ -35,5 +35,5 @@
                 </series-volumes>
             </div>
         </scipublications>
-    </div>
+    </article>
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/service-detail.xml

@@ -4,7 +4,7 @@
                       <!ENTITY times '&#xD7;'>]>
 <content-item-layout>
 
-    <div class="service">
+    <article class="service">
         <include file="fragments/edit-link.xml"/>
     
         <if-property name="summary">
@@ -54,5 +54,5 @@
     
         <include file="fragments/assets/related-links-and-file-attachments.xml" />
     
-    </div>
+    </article>
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/simpleaddress-detail.xml

@@ -2,7 +2,7 @@
 <!DOCTYPE stylesheet [<!ENTITY nbsp '&#160;'>]>
 <content-item-layout>
         
-    <div class="address simpleaddress">
+    <article class="address simpleaddress">
         <include file="fragments/edit-link.xml"/>
     
         <pre class="addresstext">
@@ -68,5 +68,5 @@
     
         <include file="fragments/assets/related-links-and-file-attachments.xml" />
         
-    </div>
+    </article>
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/content-items/siteproxy-detail.xml

@@ -1,9 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
 <content-item-layout>
 
-    <include file="fragments/edit-link.xml"/>
+    <article class="siteproxy">
+        <include file="fragments/edit-link.xml"/>
     
-    <div>
+        <div>
-        <siteproxy-content/>
+            <siteproxy-content/>
-    </div>
+        </div>
+    </article>
 </content-item-layout>

ccm-sci-bundle/web/themes/scicms-default/templates/navigation.xml

@@ -58,8 +58,8 @@
         </main>
         
         <navigation min-level="2" max-level="99">
-            <nav class="subnav">
                 <navigation-links>
+            <nav class="subnav">
                     <ul>
                         <navigation-link>
                             <li role="presentation">
@@ -70,8 +70,8 @@
                             </li>
                         </navigation-link>
                     </ul>
-                </navigation-links>
             </nav>
+                </navigation-links>
         </navigation>