diff --git a/app/views/chat.erb b/app/views/chat.erb
index bb72e3a..1ba6cbb 100644
--- a/app/views/chat.erb
+++ b/app/views/chat.erb
@@ -1,14 +1,9 @@
- chat
-
+ Chat
+
+
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
new file mode 100644
index 0000000..ebdf4fa
--- /dev/null
+++ b/public/stylesheets/style.css
@@ -0,0 +1,52 @@
+header h1{
+ text-align: center;
+ font-size: 50px;
+ color: #999;
+ }
+ #chat ol{
+ list-style: none;
+ }
+ #chat ol#messages{
+ height: 400px;
+ overflow: auto;
+ }
+ #chat li{
+ padding: 6px 10px;
+ }
+ #chat li.message{
+ border-top: 1px solid #CCC;
+ }
+ #chat {
+ margin: 0px auto;
+ height: 560px;
+ width: 700px;
+ overflow: hidden;
+ border: 1px solid #666;
+ }
+ #chat form {overflow: hidden;}
+ #chat form label{
+ display: block;
+ margin: 0 0 10px 0;
+ font: normal 18px/18px Verdana;
+ }
+ #chat form input[type=text], #chat form textarea{
+ margin: 3px 0;
+ font: normal 15px/16px Verdana;
+ }
+ #chat form li{
+
+ float: left;
+}
+#chat form #nick{
+ width: 200px;
+ }
+
+ #chat form textarea{
+ width: 454px;
+ }
+ #chat form #nick input{ width: 183px; }
+ #chat form #button{float: right;}
+p#status{
+color: black;
+padding: 0px 13px;
+ }
diff --git a/public/stylesheets/typogridphy.css b/public/stylesheets/typogridphy.css
new file mode 100755
index 0000000..92a5686
--- /dev/null
+++ b/public/stylesheets/typogridphy.css
@@ -0,0 +1,446 @@
+/*
+
++----------------------------------------------------------------------------------------------------+
+| |
+| TYPOGRIDPHY - TYPOGRAPHICAL AND GRID LAYOUT CSS FRAMEWORK FROM HARRY ROBERTS OF CSS WIZARDRY |
+| |
++-------------------------------------------------+--------------------------------------------------+
+| | |
+| TYPOGRIDPHY IS © COPYRIGHT OF HARRY ROBERTS | v 0.1.1 |
+| IT IS FREE TO BE USED AND MODIFIED PROVIDED | May 2008 |
+| THIS TEXT REMAINS INTACT -- CSSWIZARDRY.COM | http://csswizardry.com |
+| | |
++-------------------------------------------------+--------------------------------------------------+
+
+
+
+COLOUR REFERENCES
+BODY BG: #FFF
+TOP STRIP: #000
+BODY COLOUR: #666
+LINKS: #000
+-------------------------------------------------------- */
+
+
+/* RESET */
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
+ margin:0;
+ padding:0;
+}
+table {
+ border-collapse:collapse;
+ border-spacing:0;
+}
+fieldset,img {
+ border:0;
+}
+address,caption,cite,code,dfn,em,strong,th,var {
+ font-style:normal;
+ font-weight:normal;
+}
+ol,ul {
+ list-style:none;
+}
+caption,th {
+ text-align:left;
+}
+h1,h2,h3,h4,h5,h6 {
+ font-size:100%;
+ font-weight:normal;
+}
+q:before,q:after {
+ content:'';
+}
+abbr,acronym {
+ border:0;
+}
+/*---------- END RESET ----------*/
+
+
+/*-------------------------------------------+
+| |
+| MAIN STRUCTURE STYLES |
+| |
++-------------------------------------------*/
+html{
+ font-size:100%;
+ min-height:101%;
+}
+body{
+ font-size:62.5%;
+ font-family:Georgia, "Times New Roman", serif;
+ color:#666;
+ background:/*url(images/grid.gif) top center repeat-y*/ #fff; /* Uncomment to display the grid */
+ border-top:0.5em solid #666;
+ padding:0 1em;
+}
+#wrapper{
+ width:94em;
+ margin:0 auto;
+}
+#header{
+ width:94em;
+ padding-top:1.5em;
+ margin-bottom:2em;
+}
+/*NAVIGATION
+-------------------------------------------------------- */
+#nav{
+ font-size:2em;
+}
+#nav a{
+ font-variant:small-caps;
+ color:#000;
+}
+#nav a:hover{
+ text-decoration:none;
+}
+#nav span{
+ float:right;
+ margin-top:-1.2em;
+}
+/*FOOTER NAVIGATION
+-------------------------------------------------------- */
+#footer-nav{
+ word-spacing:0.2em;
+}
+#footer-nav a{
+ color:#000;
+ font-variant:small-caps;
+}
+/*GRIDS
+-------------------------------------------------------- */
+/* Set styles common among all grids - all grid divs must be assigned this class */
+.generic{
+ border-top:0.5em solid #666; /* The border at the top of each grid */
+ float:left;
+ padding-top:1em;
+ margin-bottom:2em;
+}
+/* Sets styles for any 'start' grids - this class MUST be given to a grid that is the first in a horizontal series */
+.clear{
+ clear:both;
+}
+/* Sets styles for any 'end' grids - this class MUST be given to a grid that is the last in a horizontal series */
+.end{
+ margin-left:0 !important;
+ margin-right:0 !important;
+}
+/* 220px */
+.twotwenty{
+ width:22em;
+ margin-right:2em;
+}
+/* 280px */
+.twoeighty{
+ width:28em;
+ margin-right:2em;
+}
+/* 340px */
+.threeforty{
+ width:34em;
+ margin-right:2em;
+}
+/* 400px */
+.fourhun{
+ width:40em;
+ margin-right:2em;
+}
+/* 460px */
+.foursixty{
+ width:46em;
+ margin-right:2em;
+}
+/* 520px */
+.fivetwenty{
+ width:52em;
+ margin-right:2em;
+}
+/* 580px */
+.fiveeighty{
+ width:58em;
+ margin-right:2em;
+}
+/* 640px */
+.sixforty{
+ width:64em;
+ margin-right:2em;
+}
+/* 700px */
+.sevenhun{
+ width:70em;
+ margin-right:2em;
+}
+/* 760px */
+.sevensixty{
+ width:76em;
+ margin-right:2em;
+}
+/* 820px */
+.eighttwenty{
+ width:82em;
+ margin-right:2em;
+}
+/* 880px */
+.eighteighty{
+ width:88em;
+ margin-right:2em;
+}
+/* 940px */
+.nineforty{
+ width:94em;
+}
+/*-------------------------------------------+
+| |
+| FONT STYLES |
+| |
++-------------------------------------------*/
+/*PARAGRAPHS
+-------------------------------------------------------- */
+.generic p{
+ font-size:1.2em;
+ line-height:1.5em;
+ margin-bottom:1.5em;
+}
+/* Styles an introductory paragraph, similar to newspapers. Assign this class to the first paragraph in an article */
+p.intro:first-line{
+ font-variant:small-caps;
+}
+/* Styles a drop cap on each paragraph with this class */
+p.drop:first-letter{
+ float:left;
+ font-size:3em;
+ margin-top:-0.05em;
+ margin-right:0.1em;
+ margin-bottom:-0.5em;
+}
+/*HEADINGS
+-------------------------------------------------------- */
+h1{
+ color:#000;
+ font-size:3em;
+ margin-bottom:0.6em;
+ font-style:italic;
+ line-height:1.2em;
+}
+h2{
+ color:#000;
+ font-size:2em;
+ margin-bottom:0.9em;
+ line-height:0.9em;
+}
+h3{
+ color:#000;
+ font-size:1.5em;
+ margin-bottom:1.2em;
+ line-height:1.2em;
+ font-variant:small-caps;
+}
+h4{
+ color:#000;
+ font-size:1.2em;
+ margin-bottom:1.5em;
+ line-height:1.5em;
+ font-variant:small-caps;
+}
+h5{
+ color:#000;
+ font-size:1em;
+ margin-bottom:1.8em;
+ line-height:1.8em;
+ font-variant:small-caps;
+}
+h6{
+ color:#000;
+ font-size:1em;
+ margin-bottom:1.8em;
+ line-height:1.8em;
+}
+/*LINKS
+-------------------------------------------------------- */
+p a{
+ color:#000;
+}
+p a:hover{
+ text-decoration:none;
+}
+h1 a{
+ color:#000;
+}
+h1 a:hover{
+ text-decoration:none;
+}
+li a{
+ color:#000;
+}
+li a:hover{
+ text-decoration:none;
+}
+/*ALL THE TRIMMINGS
+-------------------------------------------------------- */
+blockquote p{
+ font-size:1.2em!important;
+ line-height:1.5em!important;
+ margin-bottom:1.5em!important;
+ font-style:italic;
+ font-weight:bold;
+}
+blockquote p cite{
+ font-style:normal;
+}
+.generic strong{
+ font-variant:small-caps;
+}
+.generic em{
+ font-style:italic;
+ font-weight:inherit;
+}
+.amp{ /* Give those ampersands a right sexy look */
+ font-family:Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif;
+ font-style:italic;
+ font-weight:normal;
+ line-height:inherit;
+}
+abbr{
+ border-bottom:1px dotted #666;
+ border-color:inherit;
+ cursor:help;
+}
+.clear{
+ clear:both;
+}
+.right-float{ /* Float any item to the right */
+ float:right;
+ margin-left:2em;
+ margin-right:0;
+}
+.left-float{ /* Float any item to the left */
+ float:left;
+ margin-right:2em;
+ margin-left:0;
+}
+.code{ /* Styling for and code type items */
+ font-family:Courier, "Courier New", monospace;
+ background:#ddd;
+ font-size:1em;
+}
+/*-------------------------------------------+
+| |
+| IMAGE STYLES |
+| |
++-------------------------------------------*/
+img{
+ font-size:1em;
+}
+img.left-img{ /* Float any image to the LEFT and give it some margin */
+ font-size:1em;
+ float:left;
+ padding:4px;
+ border:1px solid #ccc;
+ margin-bottom:1.8em;
+ margin-right:2em;
+ margin-top:0.3em;
+}
+img.right-img{ /* Float any image to the RIGHT and give it some margin */
+ font-size:1em;
+ float:right;
+ padding:4px;
+ border:1px solid #ccc;
+ margin-bottom:1.8em;
+ margin-left:2em;
+ margin-top:0.3em;
+}
+/*CONTACT FORM STYLES
+-------------------------------------------------------- */
+#contact-form{
+}
+#contact-form label{
+ width:10em;
+ float:left;
+ margin-top:0.6em;
+}
+#name, #form-email, #url, #location{
+ width:42.7em;
+ height:20px;
+ padding:3px;
+ padding-top:5px;
+ border:2px solid #666;
+ margin-bottom:18px;
+ background:#fff !important;
+}
+#comments{
+ width:43.8em;
+ height:10em;
+ padding:3px;
+ border:2px solid #666;
+ margin-bottom:18px;
+ overflow:auto;
+ background:#fff !important;
+}
+#name:active, #form-email:active, #url:active, #location:active, #comments:active, #submit:active, #name:focus, #form-email:focus, #url:focus, #location:focus, #comments:focus, #submit:focus{
+ border:2px solid #000;
+}
+#submit{
+ clear:both;
+ padding:5px;
+ border:2px solid #666;
+ background:#fff !important;
+ cursor:pointer;
+ margin-left:9em;
+}
+#reset{
+ clear:both;
+ padding:3px;
+ border:none;
+ background:#f00 !important;
+ cursor:pointer;
+ float:right;
+ color:#fff;
+ margin-top:-28px;
+}
+/*-------------------------------------------+
+| |
+| LIST STYLES |
+| |
++-------------------------------------------*/
+ul{
+ margin-bottom:1.8em;
+ list-style:square inside;
+}
+ul li{
+ font-size:1.2em;
+ line-height:1.5em;
+}
+ul li.caption{ /* Apply this class to the first list item in a list to give it a caption */
+ font-variant:small-caps;
+ list-style:none;
+ color:#000;
+}
+li > ul, li > ol{
+ margin-bottom:0;
+ margin-left:5em;
+}
+li > ul li, li > ol li{
+ font-size:1em;
+}
+ol{
+ margin-bottom:1.8em;
+ list-style:decimal inside;
+}
+ol li{
+ font-size:1.2em;
+ line-height:1.5em;
+}
+/*-------------------------------------------+
+| |
+| MISC. STYLES |
+| |
++-------------------------------------------*/
+
+
+/*
+
+ "I could eat a knob at night"
+ - Karl Pilkington
+
+*/
\ No newline at end of file