adding more info to the page. This is only the first step

1 files changed, 89 insertions, 2 deletions

diff --git a/css/style.css b/css/style.css
index b2aaefc..5f7b29c 100644..100755
--- a/css/style.css
+++ b/css/style.css
@@ -1,5 +1,5 @@
 .barchart {
-	max-width: 700px;
+	max-width: 200px;
 	max-height: 350px;
 }
 
@@ -17,4 +17,91 @@
 #monitoring-endpoint-url {
 	width: 80%;
 	max-width: 415px;
-}
\ No newline at end of file
+}
+
+.info {
+	font-weight: bold;
+	text-color: #777777;
+}
+
+.smallinfo {
+	color: #888888;
+	font-size: 11px;
+}
+
+.infobox {
+	width: 400px;
+	border: 1px solid #DDDDDD;
+	margin: 10px 0px 20px 0px;
+	padding: 15px;
+	color: #555555;
+	background-color: #F9F9F9;
+	border-radius: 6px;
+	box-shadow: 1px 1px 9px 1px #EEEEEE;
+}
+
+.infobox h3 {
+	color: #555555;
+	font-size: 22px;
+	font-weight: bold;
+	padding: 5px 0px 10px 0px;
+	margin: 0px;
+}
+
+.infobox h2 {
+	color: #555555;
+	font-size: 18px;
+	font-weight: bold;
+	padding: 5px 5px 5px 5px;
+	margin: 0px;
+}
+
+.infoicon {
+	width: 28px;
+	float: left;
+	padding: 5px;
+}
+
+.chart-container {
+	height:300px;
+	width: 800px;
+	margin: 5px 10px 5px 5px;
+}
+
+.diskchart-container {
+	position: static;
+	display: inline-block;
+	height:130px;
+	width:130px;
+	float:left;
+	border: 1px black;
+	margin: 5px 10px 5px 5px;
+}
+
+.wrapper {
+  overflow:hidden;
+}
+
+.wrapper div {
+   min-height: 100px;
+   padding: 0px;
+}
+#one {
+  float:left;
+  width:440px;
+  margin-right: 10px;
+}
+
+#two {
+  overflow:hidden;
+  width:440px;
+  min-height:100px;
+}
+
+@media screen and (max-width: 1000px) {
+   #one {
+    float: none;
+    margin-right:0;
+    width:auto;
+  }
+}