Fix stylesheet

media/design/stylesheet.css

@@ -0,0 +1,436 @@
+body {
+  margin: 0px;
+  /* background-color: #336699; Mattcast Blue*/
+  background-color: #29456a;
+  /* background-image: linear-gradient(to bottom, #29456a 0%, #29456a 66%, #5e81a6 90%, #5b7ba2 100%); */
+  /* purple: 7b688a, green: 508d79 */
+  background-image: linear-gradient(to bottom, #29456a 0%, #29456a 50%, #5e81a6 85%, #5b7ba2 100%);
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+}
+
+body, td, th {
+  font-family: "RedHatText";
+  font-size: 12pt;
+  color: #000000;
+}
+
+
+a:link, a:visited {
+  color: #bebfc1;
+  text-decoration: underline dotted;
+  text-decoration-thickness: 1px;
+}
+
+a:active, a:focus {
+  text-decoration: underline;
+  color: #c78b94;
+}
+
+a:hover {
+  text-decoration: underline;
+  color: #98aec6;
+}
+
+hr {
+  width: 50%;
+  border: none;
+  margin-top: 24px;
+  margin-bottom: 24px;
+  border-bottom: 1px solid #98aec6;
+  border-image: linear-gradient(to right, #98aec600 0%, #98aec6 50%, #98aec600 100%) 1;
+}
+
+.alignleft {
+  float: left;
+  text-align: left;
+  margin-right: 10px;
+}
+
+.alignright {
+  float: right;
+  text-align: right;
+  margin-left: 10px;
+}
+
+.aligncenter {
+  display:block;
+  margin-left:auto;
+  margin-right:auto;
+}
+
+h1, h2, h3 {
+  font-family: "RedHatDisplay";
+  line-height: 100%;
+  padding-bottom: 4px;
+  margin: 0.5em auto;
+}
+
+h1 {
+  font-size: 26pt;
+}
+
+h2 {
+  border-bottom: 1px solid #98aec6;
+  border-image: linear-gradient(to right, #98aec6 0%, #98aec6 75%,#98aec600 100%) 1;
+}
+
+h2:first-of-type {
+  margin-top: 10px;
+}
+
+ul {
+  padding-left: 16px;
+  list-style-type: disc;
+}
+
+#binoc-header {
+  background-image: linear-gradient(180deg,
+                                    rgba(0,0,0,0) 1px,
+                                    rgba(255,255,255,0.4) 1px,
+                                    rgba(255,255,255,0.1) 5px,
+                                    rgba(255,255,255,0.0) 6px,
+                                    rgba(255,255,255,0.0) 100%),
+                    linear-gradient(to bottom, rgba(64, 64, 64, 0.75) 0%, rgba(32, 32, 32, 0.75) 100%);
+  width: 100%;
+  min-width: 1200px;
+  height: 54px;
+  box-shadow: 0px 0px 8px rgba(0,0,0,0.66);
+  z-index: 999;
+  color: #fff;
+  font-family: "RedHatDisplay";
+}
+
+#binoc-header-logo {
+  width: 180px;
+  height: 32px;
+  float: left;
+  margin-top: 12px;
+  margin-left: 16px;
+}
+
+#binoc-header-logo > a > img:hover {
+  animation: flash 0.66s;
+  animation-delay: 0.4s;
+}
+
+#binoc-header-menu {
+  float: right;
+  margin: 0px;
+  padding-top: 0px;
+  font-size: 12pt;
+  color: #fff;
+}
+
+#binoc-header-menu > ul {
+  display: table;
+  margin: 0px;
+  padding: 0px;
+}
+
+#binoc-header-menu > ul > li {
+  float: left;
+  list-style: none;
+  margin-top: 15px;
+  margin-bottom: 0px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-bottom: 2px;
+}
+
+#binoc-header-menu > ul:last-child {
+  padding-right: 16px;
+}
+
+#binoc-header-menu > ul > li > a,
+#binoc-header-menu > ul > li > a:active,
+#binoc-header-menu > ul > li > a:visited{
+  text-decoration: none;
+  color: #fff;
+}
+
+#binoc-header-menu > ul > li > a:hover {
+  color: #bebfc1;
+}
+
+
+@media all and (min-width: 1220px)  {
+  #binoc-window {
+    width: 1200px;
+  }
+}
+
+@media all and (min-width: 1540px) {
+  #binoc-window {
+    width: 1520px;
+  }
+}
+
+/*
+@media all and (min-width: 1860px) {
+  #binoc-window {
+    width: 1840px;
+  }
+}
+*/
+
+#binoc-window {
+  min-width: 1200px;
+  max-width: 1840px;
+  margin: 0 auto;
+  padding: 0px;
+  transition: fade 0.4s;
+}
+
+
+#binoc-caption {
+  line-height: inital;
+  text-align: left;
+  color: #fff;
+  overflow-x: hidden;
+  margin: 0px;
+}
+
+#binoc-caption h1 {
+  border: none;
+  margin-bottom: -20px;
+}
+
+#binoc-caption p {
+  font-family: "RedHatText";
+  font-size: 14pt;
+  font-weight: normal;
+}
+
+
+#binoc-client { margin-top: -6px; }
+.binoc-box { margin-top: 24px; }
+
+#binoc-client,
+.binoc-box {
+  overflow-x: hidden;
+  border: 1px solid #98aec6;
+  border-image: linear-gradient(to right, #98aec6 0%, #5e81a6 50%, #98aec6 100%) 1;
+  box-shadow: 0px 0px 8px rgba(0,0,0,0.2);
+  background-image: radial-gradient(circle at 50% 85% , rgba(222, 230, 232, 0.05) 0%, rgba(198, 206, 209, 0.05) 80%, rgba(184, 202, 204, 0.05) 100%),
+                    radial-gradient(ellipse at 50% 100% , rgba(236, 242, 240, 0.05) 0%, rgba(236, 242, 240, 0.05) 50%, transparent 100%),
+                    linear-gradient(to bottom, rgba(41, 69, 106, 0.75) 0%, rgba(41, 69, 106, 0.75) 100%);
+  background-repeat: no-repeat;
+  background-position-x: center;
+
+}
+
+#binoc-client p,
+.binoc-box p {
+  line-height: 125%;
+}
+
+#binoc-commandbar {
+  height: 30px;
+  max-height: 30px;
+  background-color: #98aec6;
+  border-bottom: 1px solid #98aec6;
+  border-image: linear-gradient(to right, #98aec6 0%, #5e81a6 50%, #98aec6 100%) 1;
+  margin: 0px;
+  padding-top: 0px;
+  font-size: 10pt;
+  font-weight: bold;
+  color: #202020;
+  font-family: "RedHatDisplay";
+}
+
+#binoc-commandbar > ul {
+  display: table;
+  margin: 0px;
+  padding: 0px;
+}
+
+#binoc-commandbar > ul > li {
+  float: left;
+  list-style: none;
+  margin-top: 6px;
+  margin-left: 8px;
+  margin-bottom: 0px;
+}
+
+#binoc-commandbar ul > li > a,
+#binoc-commandbar ul > li > a:active,
+#binoc-commandbar ul > li > a:visited{
+  text-decoration: none;
+  text-shadow: 0px 1px 1px rgba(255,255,255,0.75);
+  color: #202020;
+}
+
+#binoc-commandbar ul > li > a {
+  padding-top: 2px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-bottom: 1px;
+}
+
+#binoc-commandbar ul > li > a:hover {
+  color: #fff;
+  box-shadow: 0px 0px 1px rgba(0,0,0,1);
+  text-shadow: 0px 1px 1px rgba(0,0,0,0.75);
+  background-color: rgba(0,0,0,0.25);
+}
+
+#binoc-commandbar ul > li > a:active {
+  color: #fff;
+  box-shadow: 0px 0px 1px rgba(0,0,0,1);
+  text-shadow: 0px 1px 1px rgba(0,0,0,0.75);
+  background-color: rgba(0,0,0,0.50);        
+}
+
+#binoc-commandbar > ul > li > ul {
+  background-color: #98aec6;
+  color: #202020;
+  box-shadow: 0px 0px 1px rgba(0,0,0,1);
+  position: absolute;
+  padding: 0px;
+  margin-top: 1px;
+  display: none;
+  z-index: 1000;
+}
+
+#binoc-commandbar > ul > li:hover > ul {
+  display: block;
+}
+
+#binoc-commandbar > ul > li > ul > li,
+#binoc-commandbar > ul > li > ul > li > a,
+#binoc-commandbar > ul > li > ul > li > a:hover,
+#binoc-commandbar > ul > li > ul > li > a:active,
+#binoc-commandbar > ul > li > ul > li > a:visited {
+  margin: 0px;
+  padding: 0px;
+  border: none;
+  box-shadow: none;
+  background: none;
+}
+
+#binoc-commandbar > ul > li > ul > li {
+  list-style: none;
+  padding-top: 6px;
+  padding-left: 8px;
+  padding-right: 16px;
+  padding-bottom: 6px;
+}
+
+#binoc-commandbar > ul > li > ul > li:hover {
+  background-color: rgba(0,0,0,0.25);
+}
+
+#binoc-commandbar > ul > li > ul > li:not([noactivecolor="true"]):active {
+  background-color: rgba(0,0,0,0.50);
+}
+
+#binoc-commandbar > ul > li > ul > li:hover > a,
+#binoc-commandbar > ul > li > ul > li:active > a {
+  color: #fff;
+  text-shadow: 0px 1px 1px rgba(0,0,0,0.75);
+}
+
+.binoc-body {
+  margin: 0px;
+  display: table;
+  width: 100%;
+  min-height: 256px;
+  height: 256px;
+}
+
+.binoc-content {
+  display: table-cell;
+  vertical-align: top;
+  overflow-wrap: break-word;
+  padding: 0px;
+  padding-left: 8px;
+  padding-right: 8px;
+  color: #fff;
+  
+}
+
+.binoc-sidebar {
+  display: table-cell;
+  vertical-align: top;
+  overflow-wrap: break-word;
+  border-left: 1px solid #98aec6;
+  border-image: linear-gradient(to bottom, #98aec6 0px, #98aec600 330px) 1;
+  min-height: 400px;
+  min-width: 220px;
+  max-width: 220px;
+  width: 220px;
+  color: fff;
+
+  padding-top: 4px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-bottom: 8px;
+}
+
+.binoc-sidebar > h3 {
+  text-align: center;
+}
+
+.binoc-sidebar > ul {
+  list-style: none;
+  padding-left: 0px;
+}
+
+.binoc-sidebar > ul > li {
+  margin-bottom: 2px;
+}
+
+.binoc-sidebar > hr {
+  width: 100%;
+}
+
+#binoc-copyright {
+  margin: 0 auto;
+  font-size: 8pt;
+  line-height: inital;
+  margin-top: 24px;
+  margin-bottom: 24px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  width: 768px;
+  text-align: center;
+  font-family: "RedHatDisplay";
+  color: #fff;
+  border: 1px solid #98aec6;
+  border-image: linear-gradient(to right, #98aec6 0%, #5e81a6 50%, #98aec6 100%) 1;
+  background-color: rgba(0,0,0,0.10);
+  box-shadow: 0px 0px 8px rgba(0,0,0,0.2);
+}
+
+
+.binoc-shadow-text {
+  text-shadow: 0px 1px 1px rgba(0,0,32,1), 0px 1px 0px rgb(0,0,0);
+}
+
+.fadeIn {
+  animation: fade 0.4s;
+}
+
+@keyframes fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes technicolorHell {
+  to { filter: hue-rotate(-360deg); }
+}
+
+@keyframes flash {
+  0% { filter: saturate(100%) contrast(100%) brightness(100%); }
+  50% { filter: saturate(150%) contrast(50%) brightness(200%); }
+  100% { filter: saturate(100%) contrast(100%) brightness(100%); }
+}
+
+.clearfix:after {
+    content: ".";
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
+    }