check
Change-Id: Ic15935035fd530425976228077aad3c6f7c560af
diff --git a/gui/html/style.css b/gui/html/style.css
new file mode 100644
index 0000000..34a05e3
--- /dev/null
+++ b/gui/html/style.css
@@ -0,0 +1,311 @@
+body {
+ background-color: #ffffff;
+ color: #000000;
+ font-family: 'Rambla', sans-serif;
+}
+
+#all {
+ display: none;
+}
+
+#loader {
+ display: block;
+ margin: 0 auto;
+}
+
+#top, #top2, #top3, #top4 {
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ width: 100%;
+ height: 6px;
+}
+
+#top { background-color: #3090C7; }
+#top2 { background-color: #2D9A65; }
+#top3 { background-color: #E41B17; }
+#top4 { background-color: #FBB917; }
+
+#contentwrapper {
+ float: left;
+ width: 100%;
+ padding-bottom: 50px;
+}
+
+#header {
+ margin: 40px 20% 0 20%;
+ min-width: 587px;
+}
+
+/* Used for fluid layout */
+#leftcolumn {
+ float: left;
+ width: 20%;
+ margin-left: -100%;
+}
+
+/* Used for fluid layout */
+#rightcolumn {
+ float: left;
+ width: 20%;
+ margin-left: -20%;
+}
+
+h1 {
+ font-family: 'Rambla', sans-serif;
+}
+
+h3 {
+ font-family: 'Rambla', sans-serif;
+ text-align: center;
+}
+
+#speed {
+ margin-top: -70px;
+ float: right;
+}
+
+h5 {
+ font-family: 'Rambla', sans-serif;
+ color: #727272;
+}
+
+.titles {
+ width: 100%;
+ margin-bottom: 30px;
+ border-bottom: 1px solid #E8E8E8;
+}
+
+.titles2 {
+ width: 100%;
+ margin-bottom: -10px;
+ border-bottom: 1px solid #E8E8E8;
+}
+
+p {
+ font-family: 'Rambla', sans-serif;
+}
+
+.titles p, .titles2 p {
+ margin-bottom: 5px;
+ font-size: 1.1em;
+ font-weight: 700;
+ color: #000000;
+}
+
+#grey {
+ color: #727272;
+ font-weight: 200;
+}
+
+#green {
+ color: #2D9A65;
+ font-weight: 200;
+}
+
+#navbar, #navbar_blue, #navbar_red, #navbar_yellow {
+ margin: 40px 0;
+ min-width: 587px;
+ /*max-width: 960px;*/
+ width: 100%;
+ height: 40px;
+}
+
+#navbar {
+ background-color: #EAF4EF;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+ border: 1px solid #99CCB2;
+}
+
+#navbar_blue {
+ background-color: #EAF4EF;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+ border: 1px solid #AFDCEC;
+}
+
+#navbar_red {
+ background-color: #EAF4EF;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+ border: 1px solid #F88158;
+}
+
+#navbar_yellow {
+ background-color: #EAF4EF;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+ border: 1px solid #EDDA74;
+}
+
+#navbar ul, #navbar_blue ul, #navbar_red ul, #navbar_yellow ul {
+ margin: 9px 0 0 0;
+ padding: 0px;
+}
+
+#navbar li, #navbar_blue li, #navbar_red li, #navbar_yellow li {
+ list-style-type: none;
+ display: inline;
+ margin: 0px 30px;
+}
+
+#navbar li a, #navbar_blue li a, #navbar_red li a, #navbar_yellow li a{
+ color: #727272;
+ font-size: 14px;
+ font-family: 'Istok Web', sans-serif;
+ text-decoration: none;
+}
+
+#navbar li a.active, #navbar a:hover { color: #2D9A65; }
+#navbar_blue li a.active, #navbar_blue a:hover { color: #38ACEC; }
+#navbar_red li a.active, #navbar_red a:hover { color: #E41B17; }
+#navbar_yellow li a.active, #navbar_yellow a:hover { color: #FBB917; }
+
+#placeholder {
+ margin: -30px 0 30px 0;
+ /*max-width: 960px;*/
+ width: 100%;
+ height: 237px;
+ /*height: auto;*/
+ background-image: url(bg.png);
+ background-repeat: no-repeat;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+ border: 2px solid #AFDCEC;
+}
+
+#link1, #link2, #link3 {
+ margin-bottom: 20px;
+ width: 100%;
+ height: 46px;
+ background-color: #EAF4EF;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+ border: 1px solid #AFDCEC;
+ text-align: center;
+}
+
+a {
+ text-decoration: none;
+ color: #38ACEC;
+ font-family: 'Rambla', sans-serif;
+}
+
+.boxtext {
+ display: inline-block;
+ margin-top: 13px;
+}
+
+#wrap {
+ margin: 100px 20% 0 20%;
+ min-width: 587px;
+ /*max-width: 1000px;*/
+}
+
+#box-table-a
+{
+ margin-top: 50px;
+ margin-bottom: 50px;
+ margin-left: 1%;
+ /*float: left;*/
+ font-family: 'Istok Web', sans-serif;
+ font-size: 12px;
+ width: 55%;
+ text-align: left;
+ border-collapse: collapse;
+}
+
+tfoot {
+ border-bottom: 2px solid #99CCB2;
+ background: #EAF4EF;
+}
+
+#box-table-a th
+{
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+ font-size: 14px;
+ font-weight: normal;
+ padding: 8px;
+ background: #EAF4EF;
+ border-top: 1px solid #99CCB2;
+ border-bottom: 1px solid #fff;
+ color: #727272;
+ text-align: center;
+}
+
+#box-table-a td
+{
+ padding: 8px;
+ border-bottom: 1px solid #fff;
+ color: #000;
+ border-top: 1px solid transparent;
+ border-right: 1px solid #99CCB2;
+ border-left: 1px solid #99CCB2;
+}
+
+.odd {
+ background-color: #eeeeee;
+}
+
+#lime, #online {
+ background-color: #4AA02C;
+ border-left: none!important;
+}
+
+#notintopology {
+ background-color: #BDEDFF;
+ border-left: none!important;
+}
+
+#out-of-date {
+ background-color: #FBB917;
+ border-left: none!important;
+}
+
+#offline {
+ background-color: #E41B17;
+ border-left: none!important;
+}
+
+.border_left {
+ border-left: 1px solid #99CCB2;
+}
+
+.border_right {
+ border-right: 1px solid #99CCB2;
+}
+
+.right_border {
+ border-right: none!important;
+}
+
+#blue {
+ color: #3090C7;
+ font-weight: 200;
+}
+
+#red {
+ color: #E41B17;
+ font-weight: 200;
+}
+
+#yellow {
+ color: #FBB917;
+ font-weight: 200;
+}
+
+#footer {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 50px;
+}
+
+.bar {
+ width: 50px;
+ border-bottom: 2px solid #ffffff;
+}
+