Gradient tests

diff --git a/css/app.css b/css/app.css
index 5c610cc..24c38bf 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -5602,7 +5602,25 @@ h2 {
 
 .top-bar-container {
   float: right;
-  background: #0568b3;
+  /*    background: $primary-color;*/
+  background: #003e7c;
+  /* Old browsers */
+  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
+  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxNSUiIHN0b3AtY29sb3I9IiMwMDNlN2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMwNTY4YjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI4NSUiIHN0b3AtY29sb3I9IiMwMDRhN2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+  background: -moz-linear-gradient(top, #003e7c 15%, #0568b3 50%, #004a7c 85%);
+  /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(15%, #003e7c), color-stop(50%, #0568b3), color-stop(85%, #004a7c));
+  /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top, #003e7c 15%, #0568b3 50%, #004a7c 85%);
+  /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top, #003e7c 15%, #0568b3 50%, #004a7c 85%);
+  /* Opera 11.10+ */
+  background: -ms-linear-gradient(top, #003e7c 15%, #0568b3 50%, #004a7c 85%);
+  /* IE10+ */
+  background: linear-gradient(to bottom, #003e7c 15%, #0568b3 50%, #004a7c 85%);
+  /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003e7c', endColorstr='#004a7c',GradientType=0 );
+  /* IE6-8 */
   position: relative;
   margin-bottom: 0 !important;
   width: 578px;
@@ -5875,13 +5893,16 @@ article h2 {
  * ----------------------------------------------------------------------------
  */
 .top-bar {
-  background: #0568b3; }
+  background: transparent; }
 
 .top-bar-section li.active:not(.has-form) a:not(.button) {
-  background: #0568b3; }
+  background: transparent; }
 
 .top-bar-section li.active:not(.has-form) a:hover:not(.button) {
-  background: #0568b3; }
+  background: transparent; }
+
+.top-bar-section > li, .top-bar-section > ul > li, .top-bar-section > ul > li > a, .top-bar-section li:not(.has-form) a:not(.button) {
+  background: transparent; }
 
 @media only screen and (min-width:40.063em) {
   footer.row {
@@ -6106,13 +6127,45 @@ article h2 {
   border: 1px solid black;
   border-radius: 4px;
   color: white;
-  background-color: #0568b3;
+  background: #003e7c;
+  /* Old browsers */
+  background: -moz-linear-gradient(45deg, #003e7c 15%, #0568b3 50%, #004a7c 85%);
+  /* FF3.6+ */
+  background: -webkit-gradient(linear, left bottom, right top, color-stop(15%, #003e7c), color-stop(50%, #0568b3), color-stop(85%, #004a7c));
+  /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(45deg, #003e7c 15%, #0568b3 50%, #004a7c 85%);
+  /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(45deg, #003e7c 15%, #0568b3 50%, #004a7c 85%);
+  /* Opera 11.10+ */
+  background: -ms-linear-gradient(45deg, #003e7c 15%, #0568b3 50%, #004a7c 85%);
+  /* IE10+ */
+  background: linear-gradient(45deg, #003e7c 15%, #0568b3 50%, #004a7c 85%);
+  /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003e7c', endColorstr='#004a7c',GradientType=1 );
+  /* IE6-9 fallback on horizontal gradient */
+  /*        background-color: #0568b3;*/
   font-family: times;
   font-size: 18px;
   font-style: italic; }
 
 #fancybox-title-inside {
-  background-color: #0568b3;
+  background: #003e7c;
+  /* Old browsers */
+  background: -moz-linear-gradient(45deg, #003e7c 15%, #0568b3 50%, #004a7c 85%);
+  /* FF3.6+ */
+  background: -webkit-gradient(linear, left bottom, right top, color-stop(15%, #003e7c), color-stop(50%, #0568b3), color-stop(85%, #004a7c));
+  /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(45deg, #003e7c 15%, #0568b3 50%, #004a7c 85%);
+  /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(45deg, #003e7c 15%, #0568b3 50%, #004a7c 85%);
+  /* Opera 11.10+ */
+  background: -ms-linear-gradient(45deg, #003e7c 15%, #0568b3 50%, #004a7c 85%);
+  /* IE10+ */
+  background: linear-gradient(45deg, #003e7c 15%, #0568b3 50%, #004a7c 85%);
+  /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003e7c', endColorstr='#004a7c',GradientType=1 );
+  /* IE6-9 fallback on horizontal gradient */
+  /*        background-color: #0568b3;*/
   border-radius: 4px;
   color: white;
   font-family: times;

diff --git a/scss/site/_structure.scss b/scss/site/_structure.scss
index 2b6e690..50606e1 100644 (file)
--- a/scss/site/_structure.scss
+++ b/scss/site/_structure.scss
@@ -54,13 +54,25 @@ h2 {
 }
 .top-bar-container {
     float: right;
-    background: $primary-color;
+/*    background: $primary-color;*/
+background: rgb(0,62,124); /* Old browsers */
+/* IE9 SVG, needs conditional override of 'filter' to 'none' */
+background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxNSUiIHN0b3AtY29sb3I9IiMwMDNlN2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMwNTY4YjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI4NSUiIHN0b3AtY29sb3I9IiMwMDRhN2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+background: -moz-linear-gradient(top,  rgba(0,62,124,1) 15%, rgba(5,104,179,1) 50%, rgba(0,74,124,1) 85%); /* FF3.6+ */
+background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,rgba(0,62,124,1)), color-stop(50%,rgba(5,104,179,1)), color-stop(85%,rgba(0,74,124,1))); /* Chrome,Safari4+ */
+background: -webkit-linear-gradient(top,  rgba(0,62,124,1) 15%,rgba(5,104,179,1) 50%,rgba(0,74,124,1) 85%); /* Chrome10+,Safari5.1+ */
+background: -o-linear-gradient(top,  rgba(0,62,124,1) 15%,rgba(5,104,179,1) 50%,rgba(0,74,124,1) 85%); /* Opera 11.10+ */
+background: -ms-linear-gradient(top,  rgba(0,62,124,1) 15%,rgba(5,104,179,1) 50%,rgba(0,74,124,1) 85%); /* IE10+ */
+background: linear-gradient(to bottom,  rgba(0,62,124,1) 15%,rgba(5,104,179,1) 50%,rgba(0,74,124,1) 85%); /* W3C */
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003e7c', endColorstr='#004a7c',GradientType=0 ); /* IE6-8 */
+
     position: relative;
     margin-bottom: 0 !important;
     width: 578px;
     height: 65px;
     border-radius: $glm-border-radius 0 0 0;
     z-index: 9;
+    
 }
 nav.top-bar {
     height: 60px;
@@ -343,16 +355,22 @@ article h2 {
  * ----------------------------------------------------------------------------
  */
 .top-bar {
-    background: #0568B3;
+    background: transparent;
 }
 // A more subtle background color for the active menu item
 .top-bar-section li.active:not(.has-form) a:not(.button)  {
-    background: #0568B3;
+    background: transparent;
 }
 .top-bar-section li.active:not(.has-form) a:hover:not(.button) {
-    background: #0568B3;
+    background: transparent;
 }
 
+.top-bar-section > li,
+.top-bar-section > ul > li,
+.top-bar-section > ul > li > a,
+.top-bar-section li:not(.has-form) a:not(.button) {
+    background:transparent;
+}
 // Add some whitespace above the footer for medium-up screens
 @media #{$medium-up} {
     footer.row {
@@ -606,13 +624,30 @@ article h2 {
         border: 1px solid black;
         border-radius: 4px;
         color: white;
-        background-color: #0568b3;
+        background: rgb(0,62,124); /* Old browsers */
+background: -moz-linear-gradient(45deg,  rgba(0,62,124,1) 15%, rgba(5,104,179,1) 50%, rgba(0,74,124,1) 85%); /* FF3.6+ */
+background: -webkit-gradient(linear, left bottom, right top, color-stop(15%,rgba(0,62,124,1)), color-stop(50%,rgba(5,104,179,1)), color-stop(85%,rgba(0,74,124,1))); /* Chrome,Safari4+ */
+background: -webkit-linear-gradient(45deg,  rgba(0,62,124,1) 15%,rgba(5,104,179,1) 50%,rgba(0,74,124,1) 85%); /* Chrome10+,Safari5.1+ */
+background: -o-linear-gradient(45deg,  rgba(0,62,124,1) 15%,rgba(5,104,179,1) 50%,rgba(0,74,124,1) 85%); /* Opera 11.10+ */
+background: -ms-linear-gradient(45deg,  rgba(0,62,124,1) 15%,rgba(5,104,179,1) 50%,rgba(0,74,124,1) 85%); /* IE10+ */
+background: linear-gradient(45deg,  rgba(0,62,124,1) 15%,rgba(5,104,179,1) 50%,rgba(0,74,124,1) 85%); /* W3C */
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003e7c', endColorstr='#004a7c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+/*        background-color: #0568b3;*/
         font-family: times;
         font-size: 18px;
         font-style: italic;
     }
     #fancybox-title-inside {
-        background-color: #0568b3;
+        background: rgb(0,62,124); /* Old browsers */
+    background: -moz-linear-gradient(45deg,  rgba(0,62,124,1) 15%, rgba(5,104,179,1) 50%, rgba(0,74,124,1) 85%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left bottom, right top, color-stop(15%,rgba(0,62,124,1)), color-stop(50%,rgba(5,104,179,1)), color-stop(85%,rgba(0,74,124,1))); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(45deg,  rgba(0,62,124,1) 15%,rgba(5,104,179,1) 50%,rgba(0,74,124,1) 85%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(45deg,  rgba(0,62,124,1) 15%,rgba(5,104,179,1) 50%,rgba(0,74,124,1) 85%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(45deg,  rgba(0,62,124,1) 15%,rgba(5,104,179,1) 50%,rgba(0,74,124,1) 85%); /* IE10+ */
+    background: linear-gradient(45deg,  rgba(0,62,124,1) 15%,rgba(5,104,179,1) 50%,rgba(0,74,124,1) 85%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003e7c', endColorstr='#004a7c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+
+/*        background-color: #0568b3;*/
         border-radius: 4px;
         color: white;
         font-family: times;