From 6cdd705e81e87992245f517274c7895e5a4864a2 Mon Sep 17 00:00:00 2001
From: rscmbbng <roel@roelroscamabbing.nl>
Date: Wed, 25 Sep 2013 16:01:54 +0200
Subject: [PATCH] fixed some layout issues on the infobar

---
 web/index.py  |  5 ++++-
 web/style.css | 18 ++++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/web/index.py b/web/index.py
index 759af8e..e60ca55 100755
--- a/web/index.py
+++ b/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>
diff --git a/web/style.css b/web/style.css
index 1c80ffd..944298a 100644
--- a/web/style.css
+++ b/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;
 
 }