changed the css file for the networkdiscovery. now it looks a bit nicer

1 files changed, 25 insertions, 88 deletions

diff --git a/LogReceiver/html/networkdiscovery.css b/LogReceiver/html/networkdiscovery.css
index 1b144fa..fc1c514 100644
--- a/LogReceiver/html/networkdiscovery.css
+++ b/LogReceiver/html/networkdiscovery.css
@@ -11,95 +11,32 @@ body{
     */
     background-size:100%;
 }
-#top{
-    position:absolute;
-}
-#message{
-    position:absolute;
-    top:37%;
-    width:100%;
-    font-size:90%;
-}
+
+/* Tell the browser to render HTML 5 elements as block */  
+header, footer, aside {  
+    display: block;  
+} 
+
+#content {  
+  display: table;
+  width: 100%;
+}  
+      
+#mainContent {  
+  display: table-cell;  
+  width: 620px;  
+  padding-right: 22px;
+  padding-left: 22px;
+}  
+      
+aside {  
+  display: table-cell;  
+  width: 300px;  
+} 
+
+
 h1, p{
     color:#333;
     text-align:center;
 }
-#container{
-    min-height:100%;
-    margin-bottom:-50px;
-}
-* html #container{
-    height:100%;
-}
-#footer-spacer{
-    height:0px;
-}
-#footer{
-    height:30px;
-}
-/* animation */
-/* position the bars and balls correctly (rotate them and translate them outward)*/
-.bar1 {
-  -moz-transform:rotate(0deg) translate(0, -40px);
-  -webkit-transform:rotate(0deg) translate(0, -40px);opacity:0.12;
-}
-.bar2 {
-  -moz-transform:rotate(45deg) translate(0, -40px);
-  -webkit-transform:rotate(45deg) translate(0, -40px);opacity:0.25;
-}
-.bar3 {
-  -moz-transform:rotate(90deg) translate(0, -40px);
-  -webkit-transform:rotate(90deg) translate(0, -40px);opacity:0.37;
-}
-.bar4 {
-  -moz-transform:rotate(135deg) translate(0, -40px);
-  -webkit-transform:rotate(135deg) translate(0, -40px);opacity:0.50;
-}
-.bar5 {
-  -moz-transform:rotate(180deg) translate(0, -40px);
-  -webkit-transform:rotate(180deg) translate(0, -40px);opacity:0.62;
-}
-.bar6 {
-  -moz-transform:rotate(225deg) translate(0, -40px);
-  -webkit-transform:rotate(225deg) translate(0, -40px);opacity:0.75;
-}
-.bar7 {
-  -moz-transform:rotate(270deg) translate(0, -40px);
-  -webkit-transform:rotate(270deg) translate(0, -40px);opacity:0.87;
-}
-.bar8 {
-  -moz-transform:rotate(315deg) translate(0, -40px);
-  -webkit-transform:rotate(315deg) translate(0, -40px);opacity:1;
-}
-#div4 {
-  position:absolute;
-  left:50%;
-  top:50%;
-  margin-left:-50px;
-  margin-top:-50px;
-  width:100px;
-  height:100px;
-  -moz-border-radius:100px;
-  -webkit-border-radius:100px;
-  -moz-transform:scale(0.5);
-  -webkit-transform:scale(0.5);
-  -webkit-animation-name: rotateThis;
-  -webkit-animation-duration:2s;
-  -webkit-animation-iteration-count:infinite;
-  -webkit-animation-timing-function:linear;
-}
-#div4 div {
-  width:20px;
-  height:20px;
-  background:#fff;
-  -moz-border-radius:40px;
-  -webkit-border-radius:40px;
-  position:absolute;
-  left:40px;
-  top:40px;
-}
-/* add a shadow to the first */
-#div4 div {
-  -moz-box-shadow:black 0 0 4px;
-  -webkit-box-shadow:black 0 0 4px;
-}
+