diff --git a/public/index.html b/public/index.html
index 43dc1b6..3f9f5b7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,6 +5,7 @@
+
diff --git a/public/javascripts/beathaven/pages.js b/public/javascripts/beathaven/pages.js
index be47db9..4f81e1b 100644
--- a/public/javascripts/beathaven/pages.js
+++ b/public/javascripts/beathaven/pages.js
@@ -87,6 +87,7 @@ var Pages = {
},
renderSettings: function(data) {
+ $('#data-container').css('background', 'url(/images/concrete_wall_2.png) 0 -30px repeat');
$('#data-container .inner').html(data);
yaCounter7596904.hit(Ajax.getAnchor(), 'Settings', Ajax.referer);
Ajax.setTitle('Settings');
diff --git a/public/javascripts/beathaven/settings.js b/public/javascripts/beathaven/settings.js
index d41b826..68d78ad 100644
--- a/public/javascripts/beathaven/settings.js
+++ b/public/javascripts/beathaven/settings.js
@@ -4,4 +4,10 @@ var Settings = {
$('.settings').live('click', function() {
Ajax.loadSettingsPage();
+})
+$('.settings-container .tabs .tab').live('click', function(){
+ if (!$(this).hasClass('active')) {
+ $('.settings-container .tabs .tab').removeClass('active');
+ $(this).addClass('active');
+ }
})
\ No newline at end of file
diff --git a/public/settings.html b/public/settings.html
index b6fc4c6..f445a6b 100644
--- a/public/settings.html
+++ b/public/settings.html
@@ -1 +1,20 @@
-hello
\ No newline at end of file
+
\ No newline at end of file
diff --git a/public/stylesheets/settings.css b/public/stylesheets/settings.css
new file mode 100644
index 0000000..f07734a
--- /dev/null
+++ b/public/stylesheets/settings.css
@@ -0,0 +1,84 @@
+.settings-container {
+ margin: 25px;
+}
+ .settings-container .tabs {
+ height: 26px;
+ }
+ .settings-container .tabs > div {
+ float: left;
+ height: 25px;
+ }
+ .settings-container .tabs .left-space {
+ width: 15px;
+ }
+ .settings-container .tabs .tab {
+ position: relative;
+ border-left: #DDD 2px solid;
+ border-top: #DDD 2px solid;
+ border-right: #DDD 2px solid;
+ padding: 0 8px;
+ line-height: 24px;
+ margin-top: 2px;
+ border-radius: 5px;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ background-color: #FAFAFA;
+ cursor: pointer;
+ }
+ .settings-container .tabs .tab.active {
+ position: relative;
+ z-index: 200;
+ background-color: #EAEAEA;
+ border-left: #CCC 2px solid;
+ border-top: #CCC 2px solid;
+ border-right: #CCC 2px solid;
+ border-bottom: #EAEAEA 6px solid;
+ margin-top: -2px;
+ line-height: 29px;
+ font-weight: bold;
+ cursor: default;
+ }
+ .settings-container .tabs .middle-space {
+ width: 8px;
+ }
+ .settings-container .form-container {
+ position: relative;
+ z-index: 100;
+ height: 500px;
+ background-color: #EAEAEA;
+ border-left: #CCC 2px solid;
+ border-top: #CCC 2px solid;
+ border-right: #CCC 2px solid;
+ border-bottom: #CCC 2px solid;
+ border-radius: 5px;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ }
+ .settings-container .form-container .form {
+ margin: 25px;
+ }
+ .settings-container .form-container .form .field {
+ height: 40px;
+ margin-bottom: 10px;
+ clear: both;
+ }
+ .settings-container .form-container .form .field .label{
+ float: left;
+ font-size: 24px;
+ line-height: 32px;
+ width: 140px;
+ padding: 3px 6px;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ background-color: #CCC;
+ margin-right: -10px;
+ }
+ .settings-container .form-container .form .field input[type="text"]{
+ font-size: 24px;
+ padding: 4px;
+ border: #CCC 1px solid;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ }
\ No newline at end of file