fixed some layout issues on the infobar

web/index.py

@@ -86,7 +86,10 @@ output = """
       <div id="button"> > </div>
       <div class = info>
       <div> <img src='images/bclogo.png'></img></div>
-      <div id='info-text'> for some reason if the text is tooo<br /> wide/long nothing appears here..fucking black magicfor some reason if the text is tooofor some reason if the text is tooo
+      <div id='info-text'><p>Border Check (BC) is a browser extension that illustrates the physical and political realities of the internet's infrastructure using free software tools.</p>
+      <p>As one surfs the net, data packets are sent from the user's computer to the target server. These data packets go on a journey hopping from server to server, potentially crossing multiple countries, until the packets reach the desired website. In each of the countries that are passed different laws and practices can apply to the data, influencing whether or not authorities can inspect, store or modify that data.</p>
+      <p>In realtime BC lets you know which countries you surf through as you browse the web. Additionally BC will illustrate this process on a world map and (where available) provide you with contextualizing information on that country's laws and practices regarding your data.</p>
+      <p>Currently supporting the following browsers on OSX and Unix systems: <br /> Firefox, Chromium, Chrome, Safari</p>
       <div>
       </div>
       </div>

web/style.css

@@ -47,11 +47,12 @@ body{
 	height:100%;
 	position:absolute;
 	background-color: white;
-	-webkit-box-shadow:  12px 0px 8px -5px rgba(0, 0, 0, 0.5);
-    box-shadow:  12px 0px 8px -5px rgba(0, 0, 0, 0.5);
+	-webkit-box-shadow:  12px 0px 8px 4px rgba(0, 0, 0, 0.5);
+    box-shadow:  12px 0px 8px 4px rgba(0, 0, 0, 0.5);
+    overflow: auto;
 }
 #button{
-	z-index:3;
+	z-index:4;
 	float:right;
 	width: 10px;
 	height: 90%;
@@ -61,19 +62,28 @@ body{
 }
 
 .info{
+	z-index: 3;
+	width:250;
+	position: absolute;
+	top: 0px;
 	z-index: 4;
 	color:black;
 	padding: 15px;
 	float: left;
 	overflow: auto;
+	
 
 }
 .info img{
 	top :0px;
 }
+.info p {
+	overflow: auto;
+}
 .info #info-text{
-	text-align: center;
+	text-align: justify;
 	height:inherit;
+	overflow: auto;
 
 }