New design

1 files changed, 506 insertions, 47 deletions

diff --git a/static/pichat.css b/static/pichat.css
index fa20a36..ed0d531 100755
--- a/static/pichat.css
+++ b/static/pichat.css
@@ -1,7 +1,9 @@
 /* pichat.css */
 
-#header {
-    z-index: 100;
+body {
+	
+	background-color:#e3e3e3;
+	
 }
 
 #content{
@@ -11,36 +13,42 @@
 
 #chatbox {
     position: fixed;
-    top:48px;
+    top:80px;
 }
 
 #rapper {
     top: 0px;
 }
 
-h1,h2 {
-    font: 100% 'helvetica neue',sans-serif;
-    letter-spacing:10px;
-    text-transform:uppercase;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 14px;
-    left:2px;
-    top:5px;
-    position: fixed;
+#footerc
+{
+	text-align:center;
+	position:absolute;
+	width:100%;
+	bottom:0px;
+	font-size:12px;
+	font-family:"Times New Roman", Times, serif;
+	background-image:url(/static/footer.png);
+	background-repeat:repeat-x;
+	background-position:top;
+	height:30px;
+	color: #CCC;
+	line-height: 2;
 }
 
 #messagePane {
-    border: 2px solid #15fff3;
-    height: 70%;
-    padding: 5px;
-    position: fixed;
-    width: 80%;
-    max-width:1500px;
-    background-color:#FFF;
-    left:35px;
-    top:80px;
-    float: left;
-    z-index:5;
+	border: 2px solid #15fff3;
+	height: 70%;
+	padding: 5px;
+	position: fixed;
+	width: 68%;
+	max-width:1500px;
+	background-color:#FFF;
+	left:10%;
+	top:105px;
+	float: left;
+	z-index:5;
+	right: 10%;
 }
 
 #messageList {
@@ -64,9 +72,10 @@ h1,h2 {
 }
 
 #msgInputDiv {
-    height: 15px;
-    position:relative;
-    min-width:500px;
+	height: 15px;
+	position:relative;
+	min-width:500px;
+	width: 700px;
 }
 
 #msgInput {
@@ -78,8 +87,26 @@ h1,h2 {
 }
 
 #msgSubmit {
-    width: 107px;
-    position:relative;    
+			position:relative;
+		display:inline-block;
+		width:120px;
+	
+		text-align:center;
+		cursor:pointer;
+		border:2px solid #999;
+                background-color:#087cff;
+	
+	    -moz-border-radius:2px;
+	    -webkit-border-radius:2px;
+	    -opera-border-radius:2px;
+	    -khtml-border-radius:2px;
+	    border-radius:2px;
+		font-size:12px;
+		color:#fff;
+	
+		text-shadow:1px 1px 3px rgba(0,0,0,0.5);
+	
+
 }
 
 .msgDiv img{
@@ -88,7 +115,18 @@ h1,h2 {
     max-height:400px;
     height: expression(this.width > 400 ? 400: true);
     max-width:400px;
+
+  
+                  z-index: 1;
+
+
+
+
+
+
+
 }
+.msgDiv {padding:2px;   }
 
 .oldmsg {
     color: #666;
@@ -96,24 +134,45 @@ h1,h2 {
 
 
 #userList {
-    overflow: auto;
-    border: 1px solid gray;
-    height: 70%;
-    margin: 0px;
-    position: fixed;
-    padding: 5px;
-    top:80px;
-    width: 7%;
-    float:right;
-    right: 35px;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 12px;
-    text-transform: uppercase;
-    min-width:72px;
-    line-height:13px;
-    background-color:#FFF;	
-    z-index:4;
+	overflow-x: hidden;
+	border: 1px solid #000;
+	height: 70%;
+	margin: 0px;
+	position: fixed;
+	padding: 5px;
+	top:105px;
+	width: 9%;
+	float:right;
+	right: 10%;
+	font-family: Arial, Helvetica, sans-serif;
+	font-size: 14px;
+	text-transform: uppercase;
+	border-top-left-radius:5px;
+	border-top-right-radius:5px;
+	-webkit-border-top-left-radius:5px;
+	-webkit-border-top-right-radius:5px;
+	-moz-border-radius-topleft:5px;
+	-moz-border-radius-topright:5px;
+	border-bottom-left-radius:5px;
+	border-bottom-right-radius:5px;
+	-webkit-border-bottom-left-radius:5px;
+	-webkit-border-bottom-right-radius:5px;
+	-moz-border-radius-bottomleft:5px;
+	-moz-border-radius-bottomright:5px;
+	min-width:72px;
+	line-height:15px;
+	background-color:#FFF;
+	z-index:18;
+	text-align: left;
 }
+.userList
+img{
+    max-width:50px;
+    width: expression(this.width > 50 ? 50: true);
+    max-height:50px;
+    height: expression(this.width > 50 ? 50: true);
+    max-width:50px;}
+
 #userListicon {
     overflow: auto;
     height: 70%;
@@ -146,5 +205,405 @@ h1,h2 {
 #binfo {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 11px;
-    bottom:2px;
-}
\ No newline at end of file
+    bottom
+	#chatrap{
+	top: 105px;
+	left:0px;
+	position:absolute;
+	width: 100%;
+	padding-bottom:20px;
+}
+#chatrap{
+	top: 105px;
+	left:0px;
+	position:absolute;
+	width: 100%;
+	padding-bottom:20px;
+}
+
+#input {
+	padding-right:15px;
+	line-height:22px;
+	font-size: 12px;
+}
+    #loghead {
+	border-bottom:0px;
+	padding-left: -50px;
+	margin-right:60%;
+	width:70%;
+	letter-spacing:-3px;
+	color:#504F61;
+	height:28px;
+	font-size:33px;
+	font-family:Arial, Helvetica, sans-serif;
+	font-weight:bold;
+	text-transform:capitalize;
+	text-shadow: -6px 4px 4px #ccc;
+	padding-bottom:12px;
+	left: -40px;
+	background-color: #FFF;
+	top: 80px;
+	position: fixed;
+      }
+
+#logc
+{
+	margin-right:10%;
+	margin-left:10%;
+	background-color:#FFF;
+	padding-left: 40px;
+	padding-bottom: 30px;
+	padding-top: 15px;
+}
+
+
+  #profile {
+	float: right;
+	border:1px solid #000;
+	padding: 20px;
+	width: 180px;
+	margin-right:15%;
+	background-color:#FFF;
+	background-image:url(/static/cloudbg2.png);
+	background-position:center;
+	z-index:10;
+	border-top-right-radius:5px;
+	-webkit-border-top-right-radius:5px;
+	-moz-border-radius-topright:5px;
+	min-height:600px;
+      }
+#chatrap{
+	top: 105px;
+	left:0px;
+	position:absolute;
+	width: 100%;
+	margin: 0;
+	padding-bottom:105px;
+}
+#footer
+{
+	text-align:center;
+	position:absolute;
+	width:100%;
+	bottom:0px;
+	font-size:12px;
+	font-family:"Times New Roman", Times, serif;
+	background-image:url(/static/footer.png);
+	background-repeat:repeat-x;
+	background-position:top;
+	height:30px;
+	color: #333;
+	line-height: 2;
+}
+#log
+{
+	border: 2px #F1F1F1;
+	margin-right:15%;
+	margin-left:15%;
+	background-color:#FFF;
+	padding-left: 40px;
+	padding-bottom: 80px;
+	padding-top: 15px;
+	min-height: 800px;
+	border-top-left-radius:5px;
+	border-top-right-radius:5px;
+	-webkit-border-top-left-radius:5px;
+	-webkit-border-top-right-radius:5px;
+	-moz-border-radius-topleft:5px;
+	-moz-border-radius-topright:5px;
+	border-bottom-left-radius:5px;
+	border-bottom-right-radius:5px;
+	-webkit-border-bottom-left-radius:5px;
+	-webkit-border-bottom-right-radius:5px;
+	-moz-border-radius-bottomleft:5px;
+	-moz-border-radius-bottomright:5px;
+}
+#posts {
+	
+	
+	
+}
+.logged-dump img{
+    max-width:650px;
+    width: expression(this.width > 500 ? 500: true);
+    max-height:400px;
+    height: expression(this.width > 500 ? 500: true);
+	border:0px;
+	z-index:4;
+	
+   
+  
+}
+.logged-dump{ 
+
+
+
+
+	padding: 15px;
+	font-family: Arial, Helvetica, sans-serif;
+	margin-left:15%;
+	width:60%;
+	
+	font-size: 12px;
+	text-transform: uppercase;
+	border-top-left-radius:5px;border-top-right-radius:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;
+	border-bottom-left-radius:5px;border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;
+	min-width:72px;
+	line-height:15px;
+	background-color:#F2F2F2;
+	background-image:/static/footer.png;
+	background-position:bottom;
+	border:solid 1px #0f1e31;
+	z-index:4;
+	text-align: left;
+	margin:15px;
+	line-height:5px;
+	
+	
+}
+      .editable {
+         color: #0AA;
+      }
+      .editing {
+         color: #F0F;
+      }
+      div#avatar {
+          overflow: hidden;
+          text-overflow: ellipsis;
+      }
+
+      img#avatarPic {
+         max-height:250px;
+      }
+
+      #logged-dump {
+          border: 1px solid dotted;
+          padding: 5px;
+      }
+	        #loghead {
+	border-bottom:0px;
+	padding-left: -50px;
+	margin-right:60%;
+	width:auto;
+	letter-spacing:-3px;
+	color:#087cff;
+	height:28px;
+	font-size:33px;
+	font-family:Arial, Helvetica, sans-serif;
+	font-weight:bold;
+	text-transform:capitalize;
+	text-shadow: -6px 4px 4px #ccc;
+	padding-bottom:12px;
+	left: -40px;
+      }
+.white a:link {
+	text-decoration: none;
+	text-shadow: -1px 1px 1px #ccc;
+	color: #504F61;
+}
+.white a:visited {
+	text-decoration: none;
+	text-shadow: -1px 1px 1px #ccc;
+	color: #504F61;
+}
+.white a:hover {
+	text-decoration: none;
+	text-shadow: -1px 1px 1px #ccc;
+	
+	
+	color: #fff;
+}
+.white a:active {
+	text-decoration: none;
+	text-shadow: -1px 1px 1px #ccc;
+	color: #504F61;
+}
+#header7{
+	background-color:#fff;
+	background-image:url(/static/dblue2.png);
+	background-attachment:inherit;
+	margin: 0px auto -1px auto;
+	top: 0px;
+	width:100%;
+	left: 0px;
+	height: 69px;
+}
+#bar7{
+	top:31px;
+	position:absolute;
+	font-family: Arial, Helvetica, sans-serif;
+	font-weight: bold;
+	width: 500px;
+	font-size: 20px;
+	left: 170px;
+	margin-left: 11%;
+	margin-right: 8%;
+	letter-spacing: -1px;
+	z-index: 999;
+}
+
+#logo7{
+	top:20px;
+	margin-left: 10%;
+	margin-right: 10%;
+	z-index:1000;
+	float:left;
+}
+#rapper7{
+	top: 0px;
+	left:0px;
+	position:absolute;
+	width: 100%;
+	height: 78px;
+	z-index: 1000;
+}
+p {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; }
+td {
+	font-family: Arial, Helvetica, sans-serif;
+	letter-spacing:-1px;
+	font-size: 12px;
+	color: #000000;
+}
+.btnav {  border: 0px #000000 solid;} 
+/* Copyright(c)2006 TikiRobot. Software license GPL version 2.
+
+ChatBubble is based on "Even more rounded corners with CSS":
+http://www.schillmania.com/content/projects/even-more-rounded-corners/
+*/
+
+div.CBmsg {
+                  display: table; 
+            margin-bottom: 0.5em;
+}
+
+
+div.CBmsgR {
+                    float: right;
+               text-align: right;
+           }
+           
+div.CBmsgL .CBcontent {
+  padding-left: 12px;
+}
+           
+
+          
+div.CBtxt {
+                  display: table-cell;  
+                 position: relative;
+                   margin: 0px auto;
+                min-width: 8em;
+                max-width: 760px;
+                  z-index: 1;
+              margin-left: 12px;
+           }
+
+div.CBiconL { 
+                  display: table-cell; 
+           vertical-align: bottom;
+            padding-right: 22px; /* 10+12 */
+            
+            }
+
+div.CBiconR {
+                  display: table-cell; 
+           vertical-align: bottom;
+             padding-left: 10px;
+            }
+
+div.CBiconR > img {
+		  padding: 0px;
+		    width: 32px;
+		   height: 32px;
+		}
+
+div.CBiconL > img {
+		  padding: 0px;
+		    width: 32px;
+		   height: 32px;
+		}
+
+.CBblueL .CBcontent,
+.CBblueL .CBt,
+.CBblueL .CBb,
+.CBblueL .CBb div {
+ background:transparent url(http://www.dump.fm/static/BubbleBlueL800x1600.png) no-repeat top right;
+}
+
+.CBblueR .CBcontent,
+.CBblueR .CBt,
+.CBblueR .CBb,
+.CBblueR .CBb div {
+ background:transparent url(http://www.dump.fm/static/BubbleBlueR800x1600.png) no-repeat top right;
+}
+
+.CBpinkL .CBcontent,
+.CBpinkL .CBt,
+.CBpinkL .CBb,
+.CBpinkL .CBb div {
+ background:transparent url(http://www.dump.fm/static/BubblePinkL800x1600.png) no-repeat top right;
+}
+
+.CBpinkR .CBcontent,
+.CBpinkR .CBt,
+.CBpinkR .CBb,
+.CBpinkR .CBb div {
+ background:transparent url(http://www.dump.fm/static/BubblePinkR800x1600.png) no-repeat top right;
+}
+
+.CBltgreyL .CBcontent,
+.CBltgreyL .CBt,
+.CBltgreyL .CBb,
+.CBltgreyL .CBb div {
+ background:transparent url(http://www.dump.fm/static/BubbleLtGreyL800x1600.png) no-repeat top right;
+}
+
+.CBltgreyR .CBcontent,
+.CBltgreyR .CBt,
+.CBltgreyR .CBb,
+.CBltgreyR .CBb div {
+ background:transparent url(http://www.dump.fm/static/BubbleLtGreyR800x1600.png) no-repeat top right;
+}
+
+.CBtxt .CBcontent {
+ position:relative;
+ zoom:1;
+ _overflow-y:hidden;
+ padding:5px 12px 0px 0px;
+}
+
+
+.CBtxt .CBt {
+ /* top+left vertical slice */
+ position:absolute;
+ left:0px;
+ top:0px;
+ width:12px; /* top slice width */
+ margin-left:-12px;
+ height:100%;
+ _height:1600px; /* arbitrary long height, IE 6 */
+ background-position:top left;
+}
+
+.CBtxt .CBb {
+ /* bottom */
+ position:relative;
+ width:100%;
+}
+
+.CBtxt .CBb,
+.CBtxt .CBb div {
+ height:10px; /* height of bottom cap/shade */
+ font-size:1px;
+}
+
+.CBtxt .CBb {
+ background-position:bottom right;
+}
+
+.CBtxt .CBb div {
+ position:relative;
+ width:12px; /* bottom corner width */
+ margin-left:-12px;
+ background-position:bottom left;
+}