31 files changed, 1186 insertions, 50 deletions
diff --git a/static/bgb.png b/static/bgb.png
new file mode 100644
index 0000000..3a1c5d2
--- /dev/null
+++ b/static/bgb.png
diff --git a/static/bgpat.gif b/static/bgpat.gif
new file mode 100644
index 0000000..86edce9
--- /dev/null
+++ b/static/bgpat.gif
diff --git a/static/bubley.png b/static/bubley.png
new file mode 100644
index 0000000..fe6eb82
--- /dev/null
+++ b/static/bubley.png
diff --git a/static/cloudbg1.png b/static/cloudbg1.png
new file mode 100644
index 0000000..f397899
--- /dev/null
+++ b/static/cloudbg1.png
diff --git a/static/dddump.png b/static/dddump.png
new file mode 100644
index 0000000..593f9a2
--- /dev/null
+++ b/static/dddump.png
diff --git a/static/dddump2.png b/static/dddump2.png
new file mode 100644
index 0000000..df200c7
--- /dev/null
+++ b/static/dddump2.png
diff --git a/static/dumgradbub2.png b/static/dumgradbub2.png
new file mode 100644
index 0000000..1de255d
--- /dev/null
+++ b/static/dumgradbub2.png
diff --git a/static/dumpbub.png b/static/dumpbub.png
new file mode 100644
index 0000000..382a25c
--- /dev/null
+++ b/static/dumpbub.png
diff --git a/static/index.html b/static/index.html
index fe4b9b0..b309f74 100755
--- a/static/index.html
+++ b/static/index.html
@@ -1,9 +1,11 @@
 <html>
   <head>
-    <title>Pichat</title>
+    <title>dump.fm</title>
     <link rel="stylesheet" type="text/css" href="static/reset.css">
     <link rel="stylesheet" type="text/css" href="static/pichat.css">
     <link rel="stylesheet" type="text/css" href="static/style.css">
+    <link rel="shortcut icon" href="static/favicon.ico">
+
 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
     <script type="text/javascript" src="static/pichat.js"></script>
@@ -12,34 +14,58 @@
           init();
       });
     </script>
+    
+    <script type="text/javascript">
+function showPopup(url) {
+newwindow=window.open(url,'name','height=600,width=820,top=30,left=10,resizable');
+if (window.focus) {newwindow.focus()}
+}
+</script> 
   </head>
   <body>
+
     <div id="content">
-      <h1>dump.fm</h1>
+      <div id="logo"><img src="static/bubley.png" width="332" height="113"></div>
+
       <div id="chatbox">
         <div id="welcomebar" style="display: none">
           <span>Welcome, </span>
           <span id="nickspan"></span>
         </div>
+           <div id="messagetabs">
+             <div align="right"><a href="log.h"><img src="static/log4.png" width="97" height="39"></a></div>
+           </div>
+        <div id="rapper">
+        <div id="userListicon">
+
+          <div align="left">
+            <p>UsrLst</p>
+</div>
+        </div>
+        <div id="popout">
+          <div align="right"><a href="http://dump.fm"onClick='showPopup(this.href);return(false);'>popout room</a></div>
+        </div>
         <div id="userList"></div>
+        
         <div id="messagePane">
+
           <div id="messageList"></div>
           <div id="msgInputDiv">
             <input id="msgInput" type="input" disabled="disabled" />
-            <input id="msgSubmit" type="submit" value="Enter" 
+            <input id="msgSubmit" type="submit" value="Send Image URL" 
                    disabled="disabled" />
           </div>
         </div>
       </div>
     </div>
-
-    <div id="apDiv3"></div>
-    <div id="apDiv4"></div>
-    <div id="bottom">
-      <div align="center"></div>
+  </div>
+  <div id="lillogo" align="center">
+    <div align="center">
+      <div id="binfo">
+        <p>dump.fm lets you talk with pictures.  beta 0.0127! <img src="static/lillogo.png" width="16" height="16"></p>
+      </div>
     </div>
-    <div id="apDiv5"></div>
-    <div id="apDiv6"></div>
-    <br />
+               <div id="plane"></div>  
+  </div>
   </body>
 </html>
diff --git a/static/index5.html b/static/index5.html
new file mode 100644
index 0000000..b30e42f
--- /dev/null
+++ b/static/index5.html
@@ -0,0 +1,138 @@
+<html>
+  <head>
+    <title>dump.fm</title>
+    <link rel="stylesheet" type="text/css" href="static/reset.css">
+    <link rel="stylesheet" type="text/css" href="static/pichat.css">
+    <link rel="stylesheet" type="text/css" href="static/style.css">
+
+
+
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
+    <script type="text/javascript" src="static/pichat.js"></script>
+        <link rel="shortcut icon" href="static/favicon.ico">
+
+<script type="text/javascript"><!--
+      $(document).ready(function() {
+
+        //  nav tab animation  
+        var navDuration = 150; //time in miliseconds
+        var navJumpHeight = "5px";
+
+        $('#nav1 li').hover(function() {
+            $(this).animate({ top : "-="+navJumpHeight }, navDuration);            
+        }, function() {
+            $(this).animate({ top : "15px" }, navDuration);
+        });
+        
+        
+        //  nav animation2  
+        $('#nav_move').css({ 
+          width: $('#nav2 li:first a').width()+20, 
+          height: $('#nav2 li:first a').height()+20 
+        });
+        $('#nav2 li:first a').addClass('cur');
+        
+        $('#nav2 a').click(function() {
+          var offset = $(this).offset();
+          var offsetBody = $('#center_wrapper').offset(); //find the offset of the wrapping div    
+          $('#nav_move').animate(
+            { 
+              width: $(this).width()+20, 
+              height: $(this).height()+20, 
+              left: (offset.left - offsetBody.left - 143) 
+            }, 
+            { duration: 350, easing: 'easeInOutCirc' }
+          );
+          $('.cur').removeClass('cur');
+          $(this).addClass('cur');
+          return false;
+        });           
+        
+        
+        //  list animation  
+        var fadeDuration = 150; //time in milliseconds
+        
+        $('#list1 li a').hover(function() {
+          $(this).animate({ paddingLeft: '30px' }, fadeDuration);
+          $(this).children('span').show().animate({ left: -5 }, fadeDuration);
+        }, function() {
+          $(this).animate({ paddingLeft: '15px' }, fadeDuration);
+          $(this).children('span').animate({ left: -35 }, fadeDuration).fadeOut(fadeDuration);          
+        });
+        
+        
+        $('.see_code').click(function() {
+          if($(this).parent().next().is(':visible')) {
+            $(this).html('+ Show Code');
+            $(this).parent().next().toggle();
+          } else {
+            $(this).html('- Hide Code');
+            $(this).parent().next().toggle();            
+          }
+          return false;
+        });
+        
+      });//doc ready
+// --></script>
+
+
+    
+    <script type="text/javascript">
+function showPopup(url) {
+newwindow=window.open(url,'name','height=600,width=820,top=30,left=10,resizable');
+if (window.focus) {newwindow.focus()}
+}
+</script> 
+  </head>
+  <body>
+    <div id="content">
+      <div id="logo">
+<img src="static/dumpbub.png" width="367" height="95">
+      </div>
+           
+      <div id="chatbox">
+        <div id="welcomebar" style="display: none">
+          <span>Welcome, </span>
+          <span id="nickspan"></span>
+        </div>
+           <div id="messagetabs">
+           <ul id="nav1">
+
+             <div align="right"><li style="top: 15px;"><a href="log.h"><img src="static/log4.png" width="97" height="39"></span></a></li>
+</div>
+             </ul>
+           </div>
+        <div id="rapper">
+        <div id="userListicon">
+
+          <div align="left">
+            <p>UsrLst</p>
+</div>
+        </div>
+        <div id="popout">
+          <div align="right"><a href="http://dump.fm"onClick='showPopup(this.href);return(false);'>popout room</a></div>
+        </div>
+        <div id="userList"></div>
+        
+        <div id="messagePane">
+
+          <div id="messageList"></div>
+          <div id="msgInputDiv">
+            <input id="msgInput" type="input" disabled="disabled" />
+            <input id="msgSubmit" type="submit" value="Send Image URL" 
+                   disabled="disabled" />
+          </div>
+        </div>
+      </div>
+
+  <div id="lillogo" align="center">
+    <div align="center">
+      <div id="binfo">
+        <p>dump.fm lets you talk with pictures.  beta 0.0127! <img src="static/lillogo.png" width="16" height="16"></p>
+      </div>
+    </div>
+  </div>
+
+    <div class="content"> </div>
+  </body>
+</html>
diff --git a/static/lillogo.png b/static/lillogo.png
new file mode 100644
index 0000000..fff9d17
--- /dev/null
+++ b/static/lillogo.png
diff --git a/static/log4.png b/static/log4.png
new file mode 100644
index 0000000..de76494
--- /dev/null
+++ b/static/log4.png
diff --git a/static/main.css b/static/main.css
new file mode 100644
index 0000000..bb7dd4c
--- /dev/null
+++ b/static/main.css
@@ -0,0 +1,185 @@
+@charset "UTF-8";
+/* CSS Document */
+
+#apDiv2 {
+	position:relative;
+	top:150px;
+	width:700px;
+	margin: 0px auto -1px auto;
+	height: 300px;
+	z-index: 3;
+}
+#info {
+	position:relative;
+	top:285px;
+	width:700px;
+	margin: 0px auto -1px auto;
+	height: 14px;
+	color: #999;
+	bottom:0px;
+	z-index: 3;
+	
+}
+#front {
+	position:fixed;
+	top:150px;
+}
+#infopage {
+	
+	
+	margin: 0px auto -1px auto;
+	height: 14px;
+	color: #999;
+	bottom:0px;
+	z-index: 3;
+	font-size: 10px;
+
+	font-size: 12px;
+	letter-spacing: 1px;
+	bottom: 0px;
+}
+#signin {
+	position:absolute;
+	left:0px;
+	width:410px;
+	height:281px;
+	
+	z-index:3;
+	
+}
+#signinbg {
+	position:absolute;
+	left:0px;
+	width:410px;
+	height:281px;
+	background-image: url(logbg.png);
+	z-index:1;
+	filter:alpha(opacity=70);
+	-moz-opacity:0.7;
+	-khtml-opacity: 0.7;
+	opacity: 0.7;
+	
+}
+#about {
+	position:absolute;
+	width:300px;
+	height: 281px;
+	left:410px;
+	line-height: 18px;
+	padding-left: 20px;
+	;
+	font-weight: bold;
+	color: #333;
+	z-index:2;
+}
+#input {
+	padding-right:15px;
+	line-height:22px;
+	font-size: 12px;
+}
+body,td,th {
+	font-family: Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	line-height: 40px;
+}
+#apDiv1 div #input #form1 label {
+	font-size: 12px;
+	color: #333;
+}
+.re {
+	font-size: 10px;
+}
+#apDiv2 #about div {
+	font-size: 10px;
+	color: #424143;
+}
+#top {
+	position:absolute;
+	left:0px;
+	top:0px;
+	width:100%;
+	height:32px;
+	z-index:2;
+	background-color: #CCC;
+}
+#apDiv3 {
+	position:fixed;
+	left:0px;
+	top:0px;
+	width:68px;
+	height:68px;
+	background-image: url(topl.png);
+}
+#apDiv4 {
+	position:fixed;
+	top:0px;
+	width:68px;
+	height:68px;
+	
+	right: 0px;
+	background-image: url(topr.png);
+}
+#bottom {
+	position:absolute;
+	left:0px;
+	bottom:0px;
+	width:100%;
+	height:10px;
+	z-index:1;
+	font-size: 10px;
+	line-height: 5px;
+}
+#apDiv5 {
+	position:fixed;
+	bottom:0px;
+	width:60px;
+	height:68px;
+	
+	left: 0px;
+	background-image: url(bottoml.png);
+}
+#apDiv6 {
+	position:fixed;
+	bottom:0px;
+	width:60px;
+	height:68px;
+	
+	right: 0px;
+	background-image: url(bottomr.png);
+}
+#bg {
+	position:absolute;
+	left:0px;
+	top:0px;
+	width:100%;
+	height:100%;
+	z-index:2;
+	background-image:url(grad2.jpg);
+}
+body {
+	background-image: url(bg4.png);
+	background-repeat: repeat-x;
+	background-attachment:fixed;
+}
+#plane {
+	position:fixed;
+	top:9px;
+	right:0px;
+	width:100%;
+	height:100%;
+	z-index:1;
+	background-image: url(cloudbg1.png);
+	background-repeat: no-repeat;
+	background-position:center;
+
+}
+.form {  font-size: 14px; color="#990000"; }
+.info {
+	font-size: 10px;
+}
+.info {
+	font-size: 12px;
+	letter-spacing: 1px;
+	bottom: 0px;
+	color: #999;
+}
diff --git a/static/mark1.png b/static/mark1.png
new file mode 100644
index 0000000..50566ba
--- /dev/null
+++ b/static/mark1.png
diff --git a/static/pichat.css b/static/pichat.css
index e2f382c..f33f7e0 100755
--- a/static/pichat.css
+++ b/static/pichat.css
@@ -4,73 +4,172 @@ html, body {
     padding: 1em;
 }
 
-#content {
-    position:absolute;
-    z-index:3;	
+#content{
+	position:fixed;
+	z-index:3;
+	overflow:auto;
+	
 }
 
 #chatbox {
     position: fixed;
-    top:48px;
+top:48px;
+
+	
+}
+#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: 9px;
-    top:35px;
+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;
 }
 #messagePane {
-    border: 1px solid green;
-    height: 80%;
-    padding: 5px;
+	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;
+}
+#logo {
+	position:fixed;
+	left:18px;
+	top:3px;
+	
+	z-index:7;
+}
+#welcomebar {
+	font: 100% 'helvetica neue',sans-serif;
+	letter-spacing:1px;
+	top:20px;
+	font-family: Arial, Helvetica, sans-serif;
+	font-size: 9px;
+left:350px;
+top:67px;
     position: fixed;
-    width: 80%;
 }
-
 #messageList {
     height: 100%;
     width: 100%;
-    position: inherit
+	position:inherit
     overflow-y: auto;
     overflow-x: hidden;
     border-bottom: 1px solid grey;
 }
-
+#messagetabs {
+	height: 40px;
+	padding: 5px;
+	position: fixed;
+	width: 80%;
+	max-width:1500px;
+	overflow-y: hidden;
+	overflow-x: hidden;
+	top:48px;
+	left:0px;
+	z-index:1;
+}
 #msgInputDiv {
     height: 15px;
-    position:relative;
+	position:relative;
+	min-width:500px;
 }
 
 #msgInput {
-    width: 85%;
+    width: 80%;
     margin-right: 5px;
     margin-top: 15px;
-    position:relative;
+	position:relative;
+	min-width:500px;
 }
 
 #msgSubmit {
-    width: 14%;
-    position:relative;
+    width: 107px;
+	position:relative;
+	
 }
 
-.msgDiv img {
-    max-width: 650px;
-    width: expression(this.width > 650 ? 650: true);
-    max-height:400px;
-    height: expression(this.width > 400 ? 400: true);
-    max-width:400px;
-}
+.msgDiv img{
+
+	max-width:650px;
+width: expression(this.width > 650 ? 650: true);max-height:400px;
+height: expression(this.width > 400 ? 400: true);max-width:400px;}
+
 
 #userList {
-    overflow: auto;
-    border: 1px solid blue;
-    height: 80%;
-    margin: 0px;
-    position: fixed;
-    padding: 5px;
-    width: 10%;
-    right: 3%;
+	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;
+}
+#userListicon {
+	overflow: auto;
+	height: 70%;
+	margin: 0px;
+	position: fixed;
+	padding: 5px;
+	top:48px;
+	width: 7%;
+	float:right;
+	right: 35px;
+	font-family: Arial, Helvetica, sans-serif;
+	font-size: 12px;
+	text-transform: uppercase;
+	min-width:72px;
+	line-height:13px;
+	z-index:1;
+	font-weight: bold;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #666;
+	text-transform:none;
+	
+}
+#lillogo {
+	bottom:0px;
+	position:absolute;
+	padding:1px;
+	right:7px;
+	line-height: 12px;	
+}
+#binfo {
+	font-family: Arial, Helvetica, sans-serif;
+	font-size: 11px;
+	bottom:2px;
+
+}
+#popout {
+	top:1px;
+	position:fixed;
+	padding:1px;
+	right:0px;
+	float:right;
+	line-height: 12px;
+	font-size:10px;
+	text-align:right;
 }
diff --git a/static/reset.css b/static/reset.css
index a6a258f..1b1255d 100755
--- a/static/reset.css
+++ b/static/reset.css
@@ -51,4 +51,4 @@ del {
 table {
 	border-collapse: collapse;
 	border-spacing: 0;
-}
-\ No newline at end of file
+}
diff --git a/static/startpage1.html b/static/startpage1.html
new file mode 100644
index 0000000..dbf5edf
--- /dev/null
+++ b/static/startpage1.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>dump.fm</title>
+<link rel="stylesheet" type="text/css" href="static/main.css">
+<style type="text/css">
+<!--
+a:link {
+	text-decoration: none;
+	
+}
+a:visited {
+	text-decoration: none;
+	border: 0px;
+}
+a:hover {
+	text-decoration: none;
+	border: 0px;
+}
+a:active {
+	text-decoration: none;
+	border: 0px;
+}
+img{border: 0px;}
+-->
+</style>
+</head>
+<body>
+
+<div id="apDiv2">
+
+  <div id="about">
+    <p>&nbsp;</p>
+    <p>dump.fm lets you talk with pictures.<br />
+    </p>
+    <p><br />
+      share images from anywhere on the web or ones stored on your computer, in real time.<br />
+      <br />
+    </p>
+    <p align="center"><a href="index.html"><img src="static/getstarted.gif" width="262" height="94" /></a></p>
+    <div align="right"></div>
+  </div>
+  <div id="signinbg"></div>
+  <div id="signin">
+    <div align="right">
+      <p align="center"><img src="static/mark1.png" width="329" height="96" /></p>
+      <div id="input">
+        <form id="form1" name="form1" method="post" action="" >
+          <label>username
+            <input type="text" name="textfield" id="textfield" class="form"/>
+            <br />
+          </label>
+        </form>
+        <form id="form1" name="form1" method="post" action="">
+          <label>password
+            <input type="text" name="textfield" id="textfield"class="form" />
+          </label>
+          <br />
+          <label> <span class="re">remember me </span>
+            <input type="checkbox" name="remember" id="remember" />
+          </label>
+        </form>
+        <form id="form2" name="form2" method="post" action="">
+          <label>
+            <input type="submit" name="Signin" id="Signin" value="Sign In" />
+          </label>
+        </form>
+      </div>
+    </div>
+  </div>
+  <div class="info" id="info"> 
+    <div align="center" class="info">* © 2009 dump.fm
+      * About Us
+      * Contact
+      * Blog
+      * Goodies
+      
+      * Help
+      *  Terms
+      * Privacy</div>
+  </div>
+</div>
+
+</div>
+<div id="apDiv3"></div>
+<div id="apDiv4"></div>
+<div id="bottom">
+  <div align="center"></div>
+</div>
+<div id="apDiv5"></div>
+<div id="apDiv6"></div>
+<div id="plane"></div>
+<br />
+</body>
+</html>
diff --git a/static/starts/bg4.png b/static/starts/bg4.png
new file mode 100644
index 0000000..e20fda8
--- /dev/null
+++ b/static/starts/bg4.png
diff --git a/static/starts/bottoml.png b/static/starts/bottoml.png
new file mode 100644
index 0000000..0f52893
--- /dev/null
+++ b/static/starts/bottoml.png
diff --git a/static/starts/bottomr.png b/static/starts/bottomr.png
new file mode 100644
index 0000000..5904272
--- /dev/null
+++ b/static/starts/bottomr.png
diff --git a/static/starts/cloudbg.png b/static/starts/cloudbg.png
new file mode 100644
index 0000000..f397899
--- /dev/null
+++ b/static/starts/cloudbg.png
diff --git a/static/starts/cloudbg1.png b/static/starts/cloudbg1.png
new file mode 100644
index 0000000..f397899
--- /dev/null
+++ b/static/starts/cloudbg1.png
diff --git a/static/starts/getstarted.gif b/static/starts/getstarted.gif
new file mode 100644
index 0000000..b581589
--- /dev/null
+++ b/static/starts/getstarted.gif
diff --git a/static/starts/index.html b/static/starts/index.html
new file mode 100755
index 0000000..b309f74
--- /dev/null
+++ b/static/starts/index.html
@@ -0,0 +1,71 @@
+<html>
+  <head>
+    <title>dump.fm</title>
+    <link rel="stylesheet" type="text/css" href="static/reset.css">
+    <link rel="stylesheet" type="text/css" href="static/pichat.css">
+    <link rel="stylesheet" type="text/css" href="static/style.css">
+    <link rel="shortcut icon" href="static/favicon.ico">
+
+
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
+    <script type="text/javascript" src="static/pichat.js"></script>
+    <script>
+      $(document).ready(function() {
+          init();
+      });
+    </script>
+    
+    <script type="text/javascript">
+function showPopup(url) {
+newwindow=window.open(url,'name','height=600,width=820,top=30,left=10,resizable');
+if (window.focus) {newwindow.focus()}
+}
+</script> 
+  </head>
+  <body>
+
+    <div id="content">
+      <div id="logo"><img src="static/bubley.png" width="332" height="113"></div>
+
+      <div id="chatbox">
+        <div id="welcomebar" style="display: none">
+          <span>Welcome, </span>
+          <span id="nickspan"></span>
+        </div>
+           <div id="messagetabs">
+             <div align="right"><a href="log.h"><img src="static/log4.png" width="97" height="39"></a></div>
+           </div>
+        <div id="rapper">
+        <div id="userListicon">
+
+          <div align="left">
+            <p>UsrLst</p>
+</div>
+        </div>
+        <div id="popout">
+          <div align="right"><a href="http://dump.fm"onClick='showPopup(this.href);return(false);'>popout room</a></div>
+        </div>
+        <div id="userList"></div>
+        
+        <div id="messagePane">
+
+          <div id="messageList"></div>
+          <div id="msgInputDiv">
+            <input id="msgInput" type="input" disabled="disabled" />
+            <input id="msgSubmit" type="submit" value="Send Image URL" 
+                   disabled="disabled" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div id="lillogo" align="center">
+    <div align="center">
+      <div id="binfo">
+        <p>dump.fm lets you talk with pictures.  beta 0.0127! <img src="static/lillogo.png" width="16" height="16"></p>
+      </div>
+    </div>
+               <div id="plane"></div>  
+  </div>
+  </body>
+</html>
diff --git a/static/starts/logbg.png b/static/starts/logbg.png
new file mode 100644
index 0000000..0e41857
--- /dev/null
+++ b/static/starts/logbg.png
diff --git a/static/starts/main.css b/static/starts/main.css
new file mode 100644
index 0000000..8503c50
--- /dev/null
+++ b/static/starts/main.css
@@ -0,0 +1,182 @@
+@charset "UTF-8";
+/* CSS Document */
+
+#apDiv2 {
+	position:relative;
+	top:150px;
+	width:700px;
+	margin: 0px auto -1px auto;
+	height: 300px;
+	z-index: 3;
+}
+#info {
+	position:relative;
+	top:285px;
+	width:700px;
+	margin: 0px auto -1px auto;
+	height: 14px;
+	color: #999;
+	bottom:0px;
+	z-index: 3;
+	
+}
+#front {
+	position:fixed;
+	top:150px;
+}
+#infopage {
+	
+	
+	margin: 0px auto -1px auto;
+	height: 14px;
+	color: #999;
+	bottom:0px;
+	z-index: 3;
+	font-size: 10px;
+
+	font-size: 12px;
+	letter-spacing: 1px;
+	bottom: 0px;
+}
+#signin {
+	position:absolute;
+	left:0px;
+	width:410px;
+	height:281px;
+	
+	z-index:3;
+	
+}
+#signinbg {
+	position:absolute;
+	left:0px;
+	width:410px;
+	height:281px;
+	background-image: url(static/starts/logbg.png);
+	z-index:1;
+	
+	
+}
+#about {
+	position:absolute;
+	width:300px;
+	height: 281px;
+	left:410px;
+	line-height: 18px;
+	padding-left: 20px;
+	;
+	font-weight: bold;
+	color: #333;
+	z-index:2;
+}
+#input {
+	padding-right:15px;
+	line-height:22px;
+	font-size: 12px;
+}
+body,td,th {
+	font-family: Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	line-height: 40px;
+}
+#apDiv1 div #input #form1 label {
+	font-size: 12px;
+	color: #333;
+}
+.re {
+	font-size: 10px;
+}
+#apDiv2 #about div {
+	font-size: 10px;
+	color: #424143;
+}
+#top {
+	position:absolute;
+	left:0px;
+	top:0px;
+	width:100%;
+	height:32px;
+	z-index:2;
+	background-color: #CCC;
+}
+#apDiv3 {
+	position:fixed;
+	left:0px;
+	top:0px;
+	width:68px;
+	height:68px;
+	background-image: url(topl.png);
+}
+#apDiv4 {
+	position:fixed;
+	top:0px;
+	width:68px;
+	height:68px;
+	
+	right: 0px;
+	background-image: url(topr.png);
+}
+#bottom {
+	position:absolute;
+	left:0px;
+	bottom:0px;
+	width:100%;
+	height:10px;
+	z-index:1;
+	font-size: 10px;
+	line-height: 5px;
+}
+#apDiv5 {
+	position:fixed;
+	bottom:0px;
+	width:60px;
+	height:68px;
+	
+	left: 0px;
+	background-image: url(bottoml.png);
+}
+#apDiv6 {
+	position:fixed;
+	bottom:0px;
+	width:60px;
+	height:68px;
+	
+	right: 0px;
+	background-image: url(bottomr.png);
+}
+#bg {
+	position:absolute;
+	left:0px;
+	top:0px;
+	width:100%;
+	height:100%;
+	z-index:2;
+	background-image:url(grad2.jpg);
+}
+body {
+	background-image: url(bg4.png);
+	background-repeat: repeat-x;
+	background-attachment:fixed;
+}
+#plane {
+	position:fixed;
+	top:9px;
+	right:0px;
+	width:100%;
+	height:100%;
+	z-index:1;
+	background-image: url(cloudbg1.png);
+	background-repeat: no-repeat;
+	background-position:center;
+
+}
+.form {  font-size: 14px; color="#990000"; }
+.info {
+	font-size: 10px;
+}
+.info {
+	font-size: 12px;
+	letter-spacing: 1px;
+	bottom: 0px;
+	color: #999;
+}
diff --git a/static/starts/mark1.png b/static/starts/mark1.png
new file mode 100644
index 0000000..50566ba
--- /dev/null
+++ b/static/starts/mark1.png
diff --git a/static/starts/startpage1.html b/static/starts/startpage1.html
new file mode 100644
index 0000000..b938eb5
--- /dev/null
+++ b/static/starts/startpage1.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>dump.fm</title>
+<link rel="stylesheet" type="text/css" href="static/starts/main.css">
+<style type="text/css">
+<!--
+a:link {
+	text-decoration: none;
+	
+}
+a:visited {
+	text-decoration: none;
+	border: 0px;
+}
+a:hover {
+	text-decoration: none;
+	border: 0px;
+}
+a:active {
+	text-decoration: none;
+	border: 0px;
+}
+img{border: 0px;}
+-->
+</style>
+</head>
+<body>
+
+<div id="apDiv2">
+
+  <div id="about">
+    <p>&nbsp;</p>
+    <p>dump.fm lets you talk with pictures.<br />
+    </p>
+    <p><br />
+      share images from anywhere on the web or ones stored on your computer, in real time.<br />
+      <br />
+    </p>
+    <p align="center"><a href="index.html"><img src="static/starts/getstarted.gif" width="262" height="94" /></a></p>
+    <div align="right"></div>
+  </div>
+  <div id="signinbg"></div>
+  <div id="signin">
+    <div align="right">
+      <p align="center"><img src="static/starts/mark1.png" width="329" height="96" /></p>
+      <div id="input">
+        <form id="form1" name="form1" method="post" action="" >
+          <label>username
+            <input type="text" name="textfield" id="textfield" class="form"/>
+            <br />
+          </label>
+        </form>
+        <form id="form1" name="form1" method="post" action="">
+          <label>password
+            <input type="text" name="textfield" id="textfield"class="form" />
+          </label>
+          <br />
+          <label> <span class="re">remember me </span>
+            <input type="checkbox" name="remember" id="remember" />
+          </label>
+        </form>
+        <form id="form2" name="form2" method="post" action="">
+          <label>
+            <input type="submit" name="Signin" id="Signin" value="Sign In" />
+          </label>
+        </form>
+      </div>
+    </div>
+  </div>
+  <div class="info" id="info"> 
+    <div align="center" class="info">* © 2009 dump.fm
+      * About Us
+      * Contact
+      * Blog
+      * Goodies
+      
+      * Help
+      *  Terms
+      * Privacy</div>
+  </div>
+</div>
+
+</div>
+<div id="apDiv3"></div>
+<div id="apDiv4"></div>
+<div id="bottom">
+  <div align="center"></div>
+</div>
+<div id="apDiv5"></div>
+<div id="apDiv6"></div>
+<div id="plane"></div>
+<br />
+</body>
+</html>
diff --git a/static/starts/topl.png b/static/starts/topl.png
new file mode 100644
index 0000000..dcfe5b9
--- /dev/null
+++ b/static/starts/topl.png
diff --git a/static/starts/topr.png b/static/starts/topr.png
new file mode 100644
index 0000000..9cfab08
--- /dev/null
+++ b/static/starts/topr.png
diff --git a/static/style.css b/static/style.css
index 99ee868..8aae921 100755
--- a/static/style.css
+++ b/static/style.css
@@ -169,3 +169,246 @@ body {
 	bottom: 0px;
 	color: #999;
 }
+#plane {
+	position:fixed;
+	top:9px;
+	right:0px;
+	width:100%;
+	height:100%;
+	z-index:1;
+	background-image: url(static/cloudbg1.png);
+	background-repeat: no-repeat;
+	background-position:center;
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.extruder{
+  position:fixed;
+  cursor:default;
+  background:url("../elements/extruder_blank.png");
+}
+
+.extruder .header{
+  height:27px;
+}
+
+.extruder .content{
+  display:none;
+  background:url("../elements/extruder_bgnd.png") repeat-y bottom left;
+}
+
+.extruder.open .content{
+  -moz-box-shadow:#999 2px -2px 2px;
+  -webkit-box-shadow:#999 2px -2px 2px;
+}
+
+
+
+.extruder .footer{
+  display:block;
+  spadding:5px;
+  height:10px;
+  background:#000;
+  -moz-border-radius: 0 0 8px 8px;
+  -webkit-border-bottom-right-radius: 5px;
+  -webkit-border-bottom-left-radius: 5px;
+}
+.extruder.top .flap{
+  color:white;
+  text-shadow: #000 2px 2px 2px;
+  font:18px/18px Arial, Helvetica, sans-serif;
+  text-align:center;
+  display:block;
+  padding:0 5px 5px 5px;
+  height:30px;
+  background:url("../elements/extruder_flap.png") no-repeat top center;
+  cursor:pointer;
+}
+
+.extruder.left{
+  /*position:absolute;*/
+  height:100%;
+  background:url("../elements/extruder_blank.png");
+}
+
+.extruder.left .content{
+  display:block;
+  border-right:3px solid #000;
+}
+
+
+.extruder.left .ext_wrapper{
+  height:100%;
+}
+
+.extruder.left .footer{
+  display:none;
+}
+
+.extruder.left .flap{
+  font-size:18px;
+  color:white;
+  top:0;
+  padding:10px 0px 10px 10px;
+  background:#000;
+  width:30px;
+  /*height:150px;*/
+  position:absolute;
+  /*overflow:hidden;*/
+  right:-2px;
+  -moz-border-radius:0 10px 10px 0;
+  -webkit-border-top-right-radius:10px;
+  -webkit-border-bottom-right-radius:10px;
+  -moz-box-shadow:#666 2px 0px 3px;
+  -webkit-box-shadow:#666 2px 0px 3px;
+}
+
+
+/*Extruder Content*/
+
+  .extruder .voice{
+    font:18px/18px Arial, Helvetica, sans-serif;
+    color:white;
+    padding:5px;
+    padding-left:10px;
+    height:27px;
+    border-bottom:1px solid #333;
+    background:url("../elements/extruder_blank.png") no-repeat bottom left;
+    text-shadow:#333 2px 2px 2px;
+  }
+ .extruder .voice.disabled{
+   cursor:default;
+  }
+.extruder .text{
+    background:#222;
+    font:14px/16px Arial, Helvetica, sans-serif;
+    color:gray;
+    padding:10px;
+    border-bottom:1px solid #333;
+  /*text-shadow:#000 2px 2px 2px;*/
+  }
+
+  .extruder .voice.hover{
+    background:url("../elements/extruder_voiceHover.png") no-repeat top;
+  }
+
+  .extruder .voice.sel{
+    background:url("../elements/extruder_voiceHover.png") no-repeat top;
+  }
+
+  .extruder .voice img{
+    float:left;
+    margin-right:15px;
+  }
+
+  .extruder .voice a.label{
+    display:block;
+    height:30px;
+    color:white;
+    padding-top:0px;
+    text-decoration:none;
+  }
+
+  .extruder .voice span.label{
+    display:block;
+    height:30px;
+    color: #d0cfcf;
+    padding-top:0px;
+    text-decoration:none;
+  }
+
+  .extruder .voice{
+    position:relative;
+  }
+
+  .extruder .settingsBtn{
+    display:block;
+    position:absolute;
+    width:36px;
+    height:36px;
+    background: url("../elements/settingsBtn.png") no-repeat bottom;
+    cursor:pointer;
+    right:-3px;
+    top:-4px;
+    /*z-index:1000;*/
+  }
+
+  .extruder .optionsPanel{
+    /*background: url("../elements/optionsPanel.png") no-repeat bottom;*/
+    background: url("../elements/fuzz.gif");
+    display:none;
+    border-bottom:1px solid #333;
+  }
+
+  .extruder .voice.sel{
+    background: url("../elements/extruder_voiceHover.png") no-repeat top;
+  }
+
+
+  /*Extruder Panel*/
+
+  .optionsPanel .panelVoice a{
+    text-decoration:none;
+    display:block;
+    color:#cccccc;
+    padding:8px;
+    padding-left:20px;
+    font-size:16px;
+    text-shadow:#333 1px 1px 1px;
+    border-bottom:1px solid #444;
+    cursor:pointer;
+  }
+  .optionsPanel .panelVoice a:hover{
+    color:#fff;
+    /*background: #666666;*/
+    background: url("../elements/red_op_50.png");
+  }
+
+:focus {
+	outline: 0;
+}
+
+
+      #content #nav1 li, #content #nav1 li a {
+        position: relative;
+        float: right;
+      }      
+      #content #nav1 li { top: 15px; margin: 0; background: none; padding: 0; }
+      #content #nav1 li a {
+        display: block;
+
+
+        height: 50px;
+      }
+      #content #nav1 li a span {
+        display: block;
+        position: absolute;
+        height: 60px;
+        width: 10px;
+
+        right: 0;
+
+      }
+      #content #nav1 li a:hover, #content #nav1 li a:hover span { background-position: 0 -194px; color: #3f5f5a; }
+      #content #nav1 li a:active, #content #nav1 li a:active span {
+	background-position: 0 -300px;
+}
+\ No newline at end of file