3 files changed, 213 insertions, 1 deletions

diff --git a/static/example/bbs1.html b/static/example/bbs1.html
index 67da2cf..f569fc6 100644
--- a/static/example/bbs1.html
+++ b/static/example/bbs1.html
@@ -20,7 +20,7 @@
 		<h1>Board 1@Bienvenido a Internet BBS</h1>
 		<div id="rules">Descripción del board.</div>
 	</div>
-	<div class="innerbox links"><a href="#"><b>Enlace 1</b></a> | <a href="#"><b>Enlace 2</b></a> | <a href="#"><b>Enlace 3</b></a></div>
+	<div class="innerbox" id="bailinks"><a href="#"><b>Enlace 1</b></a> | <a href="#"><b>Enlace 2</b></a> | <a href="#"><b>Enlace 3</b></a></div>
 </div>
 
 <div class="thread">
diff --git a/static/example/sky.jpg b/static/example/sky.jpg
new file mode 100644
index 0000000..a9baed3
--- /dev/null
+++ b/static/example/sky.jpg
diff --git a/static/example/style.css b/static/example/style.css
new file mode 100644
index 0000000..de0c621
--- /dev/null
+++ b/static/example/style.css
@@ -0,0 +1,212 @@
+* {
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  word-wrap: break-word;
+}
+
+body {
+  background: #1B3345 url('/static/example/sky.jpg');
+  color: #fff;
+  text-shadow: 1px 1px #000;
+  font-size: 16px;
+  font-family: serif;
+  line-height: 20px;
+  margin: 8px;
+}
+
+h1,
+h2 {
+  margin: 16px 0;
+  line-height: 1em;
+}
+
+hr {
+  border:0;
+  background-image: repeating-linear-gradient(
+    150deg,
+    #ff0 0px,
+    #ff0 10px,
+    #000 10px,
+    #000 20px
+  );
+  height: 4px;
+  margin: 16px 0;
+}
+
+a {
+  color:#EFD279;
+}
+a:hover {
+  color:#D00;
+}
+a:active {
+  color:#900;
+}
+
+.desc {
+  margin-left:40px;
+}
+
+.inputcont {
+  display: inline-block;
+  border-top: 3px solid #eee;
+  border-left: 3px solid #eee;
+  border-bottom: 3px solid #666;
+  border-right: 3px solid #666;
+  box-shadow: 1px 1px #000;
+}
+
+select {
+  background: #fff;
+  border-bottom: 3px solid #eee;
+  border-right: 3px solid #eee;
+  border-top: 3px solid #666;
+  border-left: 3px solid #666;
+  height: 2.5em;
+  padding-right: 1em;
+}
+
+input[type="button"] {
+  padding: 2px 1em;
+  background: #95CBE9;
+  color: #1c3700;
+  border-bottom: 3px solid #3B6B94;
+  border-right: 3px solid #3B6B94;
+  border-top: 3px solid #f5fbff;
+  border-left: 3px solid #f5fbff;
+}
+
+input[type="button"]:active {
+  background: #4993bc;
+  border-width: 2px;
+  color: #000;
+  border-bottom: 3px solid #f5fbff;
+  border-right: 3px solid #f5fbff;
+  border-top: 3px solid #3B6B94;
+  border-left: 3px solid #3B6B94;
+}
+
+#t-filters {
+  border-top: 2px solid #55802a;
+  border-left: 2px solid #55802a;
+  border-spacing: 6px;
+  text-align:center;
+}
+
+#t-filters input[type="text"] {
+  background: #fff;
+  border: 2px solid #B2C1CC;
+  border-radius: 4px;
+  height: 30px;
+}
+
+#t-filters input[type="text"]:focus,
+#t-filters input[type="text"]:active,
+#t-filters select.f-type:focus,
+#t-filters select.f-type:active {
+  border: 2px solid #6c63bb;
+  border-radius: 4px;
+  outline: 0;
+}
+
+#t-filters select.f-type {
+  background: #fff;
+  border: 2px solid #B2C1CC;
+  border-radius: 4px;
+  height: 30px;
+}
+
+#t-filters select.f-type:focus,
+#t-filters select.f-type:active {
+  background: #dff0fd;
+}
+
+#t-filters td,
+#t-filters th {
+  border: 0;
+  border-right: 1px solid #55802a;
+  border-bottom: 1px solid #55802a;
+  padding: 4px;
+}
+
+#t-filters tfoot td {
+  padding: 0;
+  border: 0;
+}
+
+#t-filters input[type="button"] {
+  width: 100%;
+}
+
+label {
+  display: block;
+  padding: 4px 0;
+}
+
+iframe {
+  background: rgb(0,0,0,0.4);
+  border: 1px dashed #73B233;
+  width: 750px;
+  height: 300px;
+  margin-top: 8px;
+  display: block;
+}
+
+@media (max-width: 600px) {
+  body {
+    text-align: center;
+    font-size: 15px;
+  }
+  
+  .desc {
+    margin-left: 0;
+  }
+  
+  iframe {
+    width: 100%;
+  }
+  
+  input[type="text"],
+  input[type="button"],
+  .inputcont {
+    margin: 8px 0;
+    width: 100%;
+    display: block;
+  }
+  
+  .inputcont,
+  select {
+    width: 100%;
+  }
+  
+  #t-filters {
+    width: 102%;
+    border-width: 1px;
+    border-spacing: 2px;
+    margin-left: -1%;
+  }
+  
+  #t-filters td,
+  #t-filters th {
+    padding: 2px;
+  }
+
+  #t-filters input[type="button"] {
+    padding: 2px;
+    margin: 0;
+  }
+
+  #t-filters input[type="text"] {
+    margin: 0;
+  }
+  
+  #t-filters th {
+    font-size: 12px;
+  }
+  
+  #t-filters tfoot td {
+    padding-top: 2px;
+    padding-left: 2px;
+  }
+}