Styling and template fixes

main/forms.py

@@ -1,3 +1,4 @@
+from django import forms
 from django.contrib.auth.forms import SetPasswordForm, PasswordResetForm
 from django.core.validators import MinLengthValidator
 from validators import PasswordValidator

static/js/status.js

@@ -13,17 +13,17 @@ $(function() {
 
     $.getJSON("/userstatus/client/?format=json", function(data) {
         if(data.active) {
-            image = img_check + ' title="Account present.\nLast successful authentication: ' + data.last_successful_auth + '" />';
+            image = img_check + ' title="Du har en bruker til foreningsmaskinene. \nSiste vellykkede pålogging: ' + data.last_successful_auth + '" />';
         } else {
-            image = img_error + ' title="No client account (kerberos principal)." />';
+            image = img_error + ' title="Ingen konto (mangler Kerberos principal)." />';
         }
         $("#client_status").html(image);
     });
     $.getJSON('/userstatus/wireless/?format=json', function(data) {
         if(data.active) {
-            image = img_check + ' title="Account present.\nLast successful authentication: ' + data.last_successful_auth + '" />';
+            image = img_check + ' title="Du har tilgang til trådløst nettverk. \nSiste vellykkede pålogging: ' + data.last_successful_auth + '" />';
         } else {
-            image = img_error + ' title="No wireless account." />';
+            image = img_error + ' title="Ingen trådløskonto (i Radius)." />';
         }
         $("#wireless_status").html(image);
     });

static/style/sass/partials/_col.scss

@@ -41,7 +41,7 @@ body.three-col {
     #container {
         @include container;
     }
-    #header, #footer {
+    #footer {
         @include column($blueprint-grid-columns);
     }
     section.column {

static/style/sass/screen.scss

@@ -16,28 +16,70 @@
 body {
     background-color: $blueprint-background-color;
     #header {
-        padding-bottom:40px;
-    }
-    #container {
-        padding:10px;
-        background-color:$container-background-color;
-        @include box-shadow($container-shadow-color 2px 2px 6px);
-        @include border-radius(10px);
-
         nav {
+            @include box-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
+            position:fixed;
+            top:0px;
+            left:0px;
+            height:40px;
+            width:100%;
+
             ul {
                 @include inline-block-list;
-            }
-        }
+                @include background-image(linear-gradient(bottom, #dddddd, white));
+                background-color: #eeeeee;
+                font-size: 1.3em;
+                height:100%;
 
-        section {
-            background-color:$section-background-color;
-            border: solid 1px $section-border-color;
-            @include border-radius(6px);
-            min-height:170px;
-            &:hover {
-                background-color:$section-hover-color;
+                li {
+                    height:100%;
+                    margin-left:20px;
+                    padding:4px;
+
+                    a {
+                        text-decoration:none;
+                        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+                    }
+                    a.non_action {
+                        color: $font-color;
+                    }
+                }
+                li.active {
+                    background-color: white;
+                    @include box-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
+
+                }
             }
         }
     }
+    #container {
+        @include box-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
+        @include border-radius(10px);
+        position:relative;
+        top:60px;
+        padding:10px;
+        background-color:$container-background-color;
+        
+        section {
+            @include border-radius(6px);
+            //border: solid 1px $section-border-color;
+            ul {
+                min-height:100px;
+                padding-top: 4px;
+            }
+
+            h2 {
+                margin-bottom:4px;
+            }
+
+            &:hover {
+                background-color: $section-hover-color;
+            }
+        }
+    }
+    #footer {
+        position:fixed;
+        bottom: 0px;
+        left:20px;
+    }
 }

static/style/stylesheets/ie.css

@@ -1 +1,85 @@
-body.bp{text-align:center}* html body.bp legend{margin:0px -8px 16px 0;padding:0}html > body.bp p code{*white-space:normal}body.bp .container{text-align:left}body.bp sup{vertical-align:text-top}body.bp sub{vertical-align:text-bottom}body.bp hr{margin:-8px auto 11px}body.bp img{-ms-interpolation-mode:bicubic}body.bp fieldset{padding-top:0}body.bp legend{margin-top:-0.2em;margin-bottom:1em;margin-left:-0.5em}body.bp fieldset,body.bp #IE8#HACK{padding-top:1.4em}body.bp legend,body.bp #IE8#HACK{margin-top:0;margin-bottom:0}body.bp textarea{overflow:auto}body.bp label{position:relative;top:-0.25em}body.bp input.text{margin:0.5em 0;background-color:white;border:1px solid #bbbbbb}body.bp input.text:focus{border:1px solid #666666}body.bp input.title{margin:0.5em 0;background-color:white;border:1px solid #bbbbbb}body.bp input.title:focus{border:1px solid #666666}body.bp input.checkbox{position:relative;top:0.25em}body.bp input.radio{position:relative;top:0.25em}body.bp input.button{position:relative;top:0.25em}body.bp textarea{margin:0.5em 0}body.bp select{margin:0.5em 0}body.bp button{position:relative;top:0.25em}
+body.bp {
+  text-align: center;
+}
+* html body.bp legend {
+  margin: 0px -8px 16px 0;
+  padding: 0;
+}
+html > body.bp p code {
+  *white-space: normal;
+}
+body.bp .container {
+  text-align: left;
+}
+body.bp sup {
+  vertical-align: text-top;
+}
+body.bp sub {
+  vertical-align: text-bottom;
+}
+body.bp hr {
+  margin: -8px auto 11px;
+}
+body.bp img {
+  -ms-interpolation-mode: bicubic;
+}
+body.bp fieldset {
+  padding-top: 0;
+}
+body.bp legend {
+  margin-top: -0.2em;
+  margin-bottom: 1em;
+  margin-left: -0.5em;
+}
+body.bp fieldset, body.bp #IE8#HACK {
+  padding-top: 1.4em;
+}
+body.bp legend, body.bp #IE8#HACK {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+body.bp textarea {
+  overflow: auto;
+}
+body.bp label {
+  position: relative;
+  top: -0.25em;
+}
+body.bp input.text {
+  margin: 0.5em 0;
+  background-color: white;
+  border: 1px solid #bbbbbb;
+}
+body.bp input.text:focus {
+  border: 1px solid #666666;
+}
+body.bp input.title {
+  margin: 0.5em 0;
+  background-color: white;
+  border: 1px solid #bbbbbb;
+}
+body.bp input.title:focus {
+  border: 1px solid #666666;
+}
+body.bp input.checkbox {
+  position: relative;
+  top: 0.25em;
+}
+body.bp input.radio {
+  position: relative;
+  top: 0.25em;
+}
+body.bp input.button {
+  position: relative;
+  top: 0.25em;
+}
+body.bp textarea {
+  margin: 0.5em 0;
+}
+body.bp select {
+  margin: 0.5em 0;
+}
+body.bp button {
+  position: relative;
+  top: 0.25em;
+}

static/style/stylesheets/print.css

@@ -1 +1,59 @@
-body.bp{line-height:1.5;font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;color:black;background:none;font-size:10pt}body.bp .container{background:none}body.bp hr{background:#cccccc;color:#cccccc;width:100%;height:2px;margin:2em 0;padding:0;border:none}body.bp hr.space{background:white;color:white}body.bp h1,body.bp h2,body.bp h3,body.bp h4,body.bp h5,body.bp h6{font-family:"Helvetica Neue",Arial,Helvetica,sans-serif}body.bp code{font-size:0.9em;font-family:"andale mono","lucida console",monospace}body.bp a img{border:none}body.bp a:link,body.bp a:visited{background:transparent;font-weight:700;text-decoration:underline}body.bp p img.top{margin-top:0}body.bp blockquote{margin:1.5em;padding:1em;font-style:italic;font-size:0.9em}body.bp .small{font-size:0.9em}body.bp .large{font-size:1.1em}body.bp .quiet{color:#999999}body.bp .hide{display:none}
+body.bp {
+  line-height: 1.5;
+  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+  color: black;
+  background: none;
+  font-size: 10pt;
+}
+body.bp .container {
+  background: none;
+}
+body.bp hr {
+  background: #cccccc;
+  color: #cccccc;
+  width: 100%;
+  height: 2px;
+  margin: 2em 0;
+  padding: 0;
+  border: none;
+}
+body.bp hr.space {
+  background: white;
+  color: white;
+}
+body.bp h1, body.bp h2, body.bp h3, body.bp h4, body.bp h5, body.bp h6 {
+  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+}
+body.bp code {
+  font-size: 0.9em;
+  font-family: "andale mono", "lucida console", monospace;
+}
+body.bp a img {
+  border: none;
+}
+body.bp a:link, body.bp a:visited {
+  background: transparent;
+  font-weight: 700;
+  text-decoration: underline;
+}
+body.bp p img.top {
+  margin-top: 0;
+}
+body.bp blockquote {
+  margin: 1.5em;
+  padding: 1em;
+  font-style: italic;
+  font-size: 0.9em;
+}
+body.bp .small {
+  font-size: 0.9em;
+}
+body.bp .large {
+  font-size: 1.1em;
+}
+body.bp .quiet {
+  color: #999999;
+}
+body.bp .hide {
+  display: none;
+}

static/style/stylesheets/screen.css

@@ -1 +1,561 @@
-html{margin:0;padding:0;border:0}.bp-reset-element,body,h1,h2,h3,h4,h5,h6,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,blockquote,q,th,td,caption,table,div,span,object,iframe,p,pre,a,abbr,acronym,address,code,del,dfn,em,img,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tbody,tfoot,thead,tr{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}blockquote,q{quotes:"" ""}blockquote:before,blockquote:after,q:before,q:after{content:""}th,td,caption{float:none !important;text-align:left;font-weight:normal;vertical-align:middle}table{border-collapse:separate;border-spacing:0;vertical-align:middle}a img{border:none}body.bp{line-height:1.5;font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;color:#333;font-size:100%}body.bp h1,body.bp h2,body.bp h3,body.bp h4,body.bp h5,body.bp h6{font-weight:normal;color:#222}body.bp h1 img,body.bp h2 img,body.bp h3 img,body.bp h4 img,body.bp h5 img,body.bp h6 img{margin:0}body.bp h1{font-size:3em;line-height:1;margin-bottom:0.50em}body.bp h2{font-size:2em;margin-bottom:0.75em}body.bp h3{font-size:1.5em;line-height:1;margin-bottom:1.00em}body.bp h4{font-size:1.2em;line-height:1.25;margin-bottom:1.25em}body.bp h5{font-size:1em;font-weight:bold;margin-bottom:1.50em}body.bp h6{font-size:1em;font-weight:bold}body.bp p{margin:0 0 1.5em}body.bp p .left{display:inline;float:left;margin:1.5em 1.5em 1.5em 0;padding:0}body.bp p .right{display:inline;float:right;margin:1.5em 0 1.5em 1.5em;padding:0}body.bp a{text-decoration:underline;color:#06c}body.bp a:visited{color:#004c99}body.bp a:focus{color:#09f}body.bp a:hover{color:#09f}body.bp a:active{color:#bf00ff}body.bp blockquote{margin:1.5em;color:#666;font-style:italic}body.bp strong,body.bp dfn{font-weight:bold}body.bp em,body.bp dfn{font-style:italic}body.bp sup,body.bp sub{line-height:0}body.bp abbr,body.bp acronym{border-bottom:1px dotted #666666}body.bp address{margin:0 0 1.5em;font-style:italic}body.bp del{color:#666}body.bp pre{margin:1.5em 0;white-space:pre}body.bp pre,body.bp code,body.bp tt{font:1em "andale mono","lucida console",monospace;line-height:1.5}body.bp li ul,body.bp li ol{margin:0}body.bp ul,body.bp ol{margin:0 1.5em 1.5em 0;padding-left:1.5em}body.bp ul{list-style-type:disc}body.bp ol{list-style-type:decimal}body.bp dl{margin:0 0 1.5em 0}body.bp dl dt{font-weight:bold}body.bp dd{margin-left:1.5em}body.bp table{margin-bottom:1.4em;width:100%}body.bp th{font-weight:bold}body.bp thead th{background:#c3d9ff}body.bp th,body.bp td,body.bp caption{padding:4px 10px 4px 5px}body.bp table.striped tr:nth-child(even) td,body.bp table tr.even td{background:#e5ecf9}body.bp tfoot{font-style:italic}body.bp caption{background:#dadadc}body.bp .quiet{color:#666}body.bp .loud{color:#111}body.bp .clear{clear:both}body.bp .nowrap{white-space:nowrap}body.bp .clearfix{overflow:hidden;*zoom:1}body.bp .small{font-size:0.8em;margin-bottom:1.875em;line-height:1.875em}body.bp .large{font-size:1.2em;line-height:2.5em;margin-bottom:1.25em}body.bp .first{margin-left:0;padding-left:0}body.bp .last{margin-right:0;padding-right:0}body.bp .top{margin-top:0;padding-top:0}body.bp .bottom{margin-bottom:0;padding-bottom:0}body.bp .showgrid{background-image:-webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(5%, rgba(0,0,0,0.5)), color-stop(5%, rgba(0,0,0,0))),-webkit-gradient(linear, 0% 50%, 960 50%, color-stop(0%, rgba(0,0,0,0)), color-stop(0%, rgba(100,100,225,0.25)), color-stop(3.125%, rgba(100,100,225,0.25)), color-stop(3.125%, rgba(0,0,0,0)), color-stop(4.167%, rgba(0,0,0,0)), color-stop(4.167%, rgba(100,100,225,0.25)), color-stop(7.292%, rgba(100,100,225,0.25)), color-stop(7.292%, rgba(0,0,0,0)), color-stop(8.333%, rgba(0,0,0,0)), color-stop(8.333%, rgba(100,100,225,0.25)), color-stop(11.458%, rgba(100,100,225,0.25)), color-stop(11.458%, rgba(0,0,0,0)), color-stop(12.5%, rgba(0,0,0,0)), color-stop(12.5%, rgba(100,100,225,0.25)), color-stop(15.625%, rgba(100,100,225,0.25)), color-stop(15.625%, rgba(0,0,0,0)), color-stop(16.667%, rgba(0,0,0,0)), color-stop(16.667%, rgba(100,100,225,0.25)), color-stop(19.792%, rgba(100,100,225,0.25)), color-stop(19.792%, rgba(0,0,0,0)), color-stop(20.833%, rgba(0,0,0,0)), color-stop(20.833%, rgba(100,100,225,0.25)), color-stop(23.958%, rgba(100,100,225,0.25)), color-stop(23.958%, rgba(0,0,0,0)), color-stop(25%, rgba(0,0,0,0)), color-stop(25%, rgba(100,100,225,0.25)), color-stop(28.125%, rgba(100,100,225,0.25)), color-stop(28.125%, rgba(0,0,0,0)), color-stop(29.167%, rgba(0,0,0,0)), color-stop(29.167%, rgba(100,100,225,0.25)), color-stop(32.292%, rgba(100,100,225,0.25)), color-stop(32.292%, rgba(0,0,0,0)), color-stop(33.333%, rgba(0,0,0,0)), color-stop(33.333%, rgba(100,100,225,0.25)), color-stop(36.458%, rgba(100,100,225,0.25)), color-stop(36.458%, rgba(0,0,0,0)), color-stop(37.5%, rgba(0,0,0,0)), colLine truncated
+html {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.bp-reset-element, body, h1, h2, h3, h4, h5, h6, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, blockquote, q, th, td, caption, table,
+div, span, object, iframe, p,
+pre, a, abbr, acronym, address,
+code, del, dfn, em, img,
+dl, dt, dd, ol, ul, li, fieldset,
+form, label, legend,
+caption, tbody, tfoot, thead, tr {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-weight: inherit;
+  font-style: inherit;
+  font-size: 100%;
+  font-family: inherit;
+  vertical-align: baseline;
+}
+
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
+  display: block;
+}
+
+blockquote, q {
+  quotes: "" "";
+}
+blockquote:before, blockquote:after, q:before, q:after {
+  content: "";
+}
+
+th, td, caption {
+  float: none !important;
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle;
+}
+
+table {
+  border-collapse: separate;
+  border-spacing: 0;
+  vertical-align: middle;
+}
+
+a img {
+  border: none;
+}
+
+body.bp {
+  line-height: 1.5;
+  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+  color: #333333;
+  font-size: 100%;
+}
+body.bp h1, body.bp h2, body.bp h3, body.bp h4, body.bp h5, body.bp h6 {
+  font-weight: normal;
+  color: #222222;
+}
+body.bp h1 img, body.bp h2 img, body.bp h3 img, body.bp h4 img, body.bp h5 img, body.bp h6 img {
+  margin: 0;
+}
+body.bp h1 {
+  font-size: 3em;
+  line-height: 1;
+  margin-bottom: 0.50em;
+}
+body.bp h2 {
+  font-size: 2em;
+  margin-bottom: 0.75em;
+}
+body.bp h3 {
+  font-size: 1.5em;
+  line-height: 1;
+  margin-bottom: 1.00em;
+}
+body.bp h4 {
+  font-size: 1.2em;
+  line-height: 1.25;
+  margin-bottom: 1.25em;
+}
+body.bp h5 {
+  font-size: 1em;
+  font-weight: bold;
+  margin-bottom: 1.50em;
+}
+body.bp h6 {
+  font-size: 1em;
+  font-weight: bold;
+}
+body.bp p {
+  margin: 0 0 1.5em;
+}
+body.bp p .left {
+  display: inline;
+  float: left;
+  margin: 1.5em 1.5em 1.5em 0;
+  padding: 0;
+}
+body.bp p .right {
+  display: inline;
+  float: right;
+  margin: 1.5em 0 1.5em 1.5em;
+  padding: 0;
+}
+body.bp a {
+  text-decoration: underline;
+  color: #0066cc;
+}
+body.bp a:visited {
+  color: #004c99;
+}
+body.bp a:focus {
+  color: #0099ff;
+}
+body.bp a:hover {
+  color: #0099ff;
+}
+body.bp a:active {
+  color: #bf00ff;
+}
+body.bp blockquote {
+  margin: 1.5em;
+  color: #666666;
+  font-style: italic;
+}
+body.bp strong, body.bp dfn {
+  font-weight: bold;
+}
+body.bp em, body.bp dfn {
+  font-style: italic;
+}
+body.bp sup, body.bp sub {
+  line-height: 0;
+}
+body.bp abbr, body.bp acronym {
+  border-bottom: 1px dotted #666666;
+}
+body.bp address {
+  margin: 0 0 1.5em;
+  font-style: italic;
+}
+body.bp del {
+  color: #666666;
+}
+body.bp pre {
+  margin: 1.5em 0;
+  white-space: pre;
+}
+body.bp pre, body.bp code, body.bp tt {
+  font: 1em "andale mono", "lucida console", monospace;
+  line-height: 1.5;
+}
+body.bp li ul, body.bp li ol {
+  margin: 0;
+}
+body.bp ul, body.bp ol {
+  margin: 0 1.5em 1.5em 0;
+  padding-left: 1.5em;
+}
+body.bp ul {
+  list-style-type: disc;
+}
+body.bp ol {
+  list-style-type: decimal;
+}
+body.bp dl {
+  margin: 0 0 1.5em 0;
+}
+body.bp dl dt {
+  font-weight: bold;
+}
+body.bp dd {
+  margin-left: 1.5em;
+}
+body.bp table {
+  margin-bottom: 1.4em;
+  width: 100%;
+}
+body.bp th {
+  font-weight: bold;
+}
+body.bp thead th {
+  background: #c3d9ff;
+}
+body.bp th, body.bp td, body.bp caption {
+  padding: 4px 10px 4px 5px;
+}
+body.bp table.striped tr:nth-child(even) td,
+body.bp table tr.even td {
+  background: #e5ecf9;
+}
+body.bp tfoot {
+  font-style: italic;
+}
+body.bp caption {
+  background: #dadadc;
+}
+body.bp .quiet {
+  color: #666666;
+}
+body.bp .loud {
+  color: #111111;
+}
+body.bp .clear {
+  clear: both;
+}
+body.bp .nowrap {
+  white-space: nowrap;
+}
+body.bp .clearfix {
+  overflow: hidden;
+  *zoom: 1;
+}
+body.bp .small {
+  font-size: 0.8em;
+  margin-bottom: 1.875em;
+  line-height: 1.875em;
+}
+body.bp .large {
+  font-size: 1.2em;
+  line-height: 2.5em;
+  margin-bottom: 1.25em;
+}
+body.bp .first {
+  margin-left: 0;
+  padding-left: 0;
+}
+body.bp .last {
+  margin-right: 0;
+  padding-right: 0;
+}
+body.bp .top {
+  margin-top: 0;
+  padding-top: 0;
+}
+body.bp .bottom {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+body.bp .showgrid {
+  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(5%, rgba(0, 0, 0, 0.5)), color-stop(5%, rgba(0, 0, 0, 0))), -webkit-gradient(linear, 0% 50%, 960 50%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(0%, rgba(100, 100, 225, 0.25)), color-stop(3.125%, rgba(100, 100, 225, 0.25)), color-stop(3.125%, rgba(0, 0, 0, 0)), color-stop(4.167%, rgba(0, 0, 0, 0)), color-stop(4.167%, rgba(100, 100, 225, 0.25)), color-stop(7.292%, rgba(100, 100, 225, 0.25)), color-stop(7.292%, rgba(0, 0, 0, 0)), color-stop(8.333%, rgba(0, 0, 0, 0)), color-stop(8.333%, rgba(100, 100, 225, 0.25)), color-stop(11.458%, rgba(100, 100, 225, 0.25)), color-stop(11.458%, rgba(0, 0, 0, 0)), color-stop(12.5%, rgba(0, 0, 0, 0)), color-stop(12.5%, rgba(100, 100, 225, 0.25)), color-stop(15.625%, rgba(100, 100, 225, 0.25)), color-stop(15.625%, rgba(0, 0, 0, 0)), color-stop(16.667%, rgba(0, 0, 0, 0)), color-stop(16.667%, rgba(100, 100, 225, 0.25)), color-stop(19.792%, rgba(100, 100, 225, 0.25)), color-stop(19.792%, rgba(0, 0, 0, 0)), color-stop(20.833%, rgba(0, 0, 0, 0)), color-stop(20.833%, rgba(100, 100, 225, 0.25)), color-stop(23.958%, rgba(100, 100, 225, 0.25)), color-stop(23.958%, rgba(0, 0, 0, 0)), color-stop(25%, rgba(0, 0, 0, 0)), color-stop(25%, rgba(100, 100, 225, 0.25)), color-stop(28.125%, rgba(100, 100, 225, 0.25)), color-stop(28.125%, rgba(0, 0, 0, 0)), color-stop(29.167%, rgba(0, 0, 0, 0)), color-stop(29.167%, rgba(100, 100, 225, 0.25)), color-stop(32.292%, rgba(100, 100, 225, 0.25)), color-stop(32.292%, rgba(0, 0, 0, 0)), color-stop(33.333%, rgba(0, 0, 0, 0)), color-stop(33.333%, rgba(100, 100, 225, 0.25)), color-stop(36.458%, rgba(100, 100, 225, 0.25)), color-stop(36.458%, rgba(0, 0, 0, 0)), color-stop(37.5%, rgba(0, 0, 0, 0)), color-stop(37.5%, rgba(100, 100, 225, 0.25)), color-stop(40.625%, rgba(100, 100, 225, 0.25)), color-stop(40.625%, rgba(0, 0, 0, 0)), color-stop(41.667%, rgba(0, 0, 0, 0)), color-stop(41.667%, rgba(100, 100, 225, 0.25)), color-stop(44.792%, rgba(100, 100, 225, 0.25)), color-stop(44.792%, rgba(0, 0, 0, 0)), color-stop(45.833%, rgba(0, 0, 0, 0)), color-stop(45.833%, rgba(100, 100, 225, 0.25)), color-stop(48.958%, rgba(100, 100, 225, 0.25)), color-stop(48.958%, rgba(0, 0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 0)), color-stop(50%, rgba(100, 100, 225, 0.25)), color-stop(53.125%, rgba(100, 100, 225, 0.25)), color-stop(53.125%, rgba(0, 0, 0, 0)), color-stop(54.167%, rgba(0, 0, 0, 0)), color-stop(54.167%, rgba(100, 100, 225, 0.25)), color-stop(57.292%, rgba(100, 100, 225, 0.25)), color-stop(57.292%, rgba(0, 0, 0, 0)), color-stop(58.333%, rgba(0, 0, 0, 0)), color-stop(58.333%, rgba(100, 100, 225, 0.25)), color-stop(61.458%, rgba(100, 100, 225, 0.25)), color-stop(61.458%, rgba(0, 0, 0, 0)), color-stop(62.5%, rgba(0, 0, 0, 0)), color-stop(62.5%, rgba(100, 100, 225, 0.25)), color-stop(65.625%, rgba(100, 100, 225, 0.25)), color-stop(65.625%, rgba(0, 0, 0, 0)), color-stop(66.667%, rgba(0, 0, 0, 0)), color-stop(66.667%, rgba(100, 100, 225, 0.25)), color-stop(69.792%, rgba(100, 100, 225, 0.25)), color-stop(69.792%, rgba(0, 0, 0, 0)), color-stop(70.833%, rgba(0, 0, 0, 0)), color-stop(70.833%, rgba(100, 100, 225, 0.25)), color-stop(73.958%, rgba(100, 100, 225, 0.25)), color-stop(73.958%, rgba(0, 0, 0, 0)), color-stop(75%, rgba(0, 0, 0, 0)), color-stop(75%, rgba(100, 100, 225, 0.25)), color-stop(78.125%, rgba(100, 100, 225, 0.25)), color-stop(78.125%, rgba(0, 0, 0, 0)), color-stop(79.167%, rgba(0, 0, 0, 0)), color-stop(79.167%, rgba(100, 100, 225, 0.25)), color-stop(82.292%, rgba(100, 100, 225, 0.25)), color-stop(82.292%, rgba(0, 0, 0, 0)), color-stop(83.333%, rgba(0, 0, 0, 0)), color-stop(83.333%, rgba(100, 100, 225, 0.25)), color-stop(86.458%, rgba(100, 100, 225, 0.25)), color-stop(86.458%, rgba(0, 0, 0, 0)), color-stop(87.5%, rgba(0, 0, 0, 0)), color-stop(87.5%, rgba(100, 100, 225, 0.25)), color-stop(90.625%, rgba(100, 100, 225, 0.25)), color-stop(90.625%, rgba(0, 0, 0, 0)), color-stop(91.667%, rgba(0, 0, 0, 0)), color-stop(91.667%, rgba(100, 100, 225, 0.25)), color-stop(94.792%, rgba(100, 100, 225, 0.25)), color-stop(94.792%, rgba(0, 0, 0, 0)), color-stop(95.833%, rgba(0, 0, 0, 0)), color-stop(95.833%, rgba(100, 100, 225, 0.25)), color-stop(98.958%, rgba(100, 100, 225, 0.25)), color-stop(98.958%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
+  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%), -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0px, rgba(100, 100, 225, 0.25) 0px, rgba(100, 100, 225, 0.25) 30px, rgba(0, 0, 0, 0) 30px, rgba(0, 0, 0, 0) 40px, rgba(100, 100, 225, 0.25) 40px, rgba(100, 100, 225, 0.25) 70px, rgba(0, 0, 0, 0) 70px, rgba(0, 0, 0, 0) 80px, rgba(100, 100, 225, 0.25) 80px, rgba(100, 100, 225, 0.25) 110px, rgba(0, 0, 0, 0) 110px, rgba(0, 0, 0, 0) 120px, rgba(100, 100, 225, 0.25) 120px, rgba(100, 100, 225, 0.25) 150px, rgba(0, 0, 0, 0) 150px, rgba(0, 0, 0, 0) 160px, rgba(100, 100, 225, 0.25) 160px, rgba(100, 100, 225, 0.25) 190px, rgba(0, 0, 0, 0) 190px, rgba(0, 0, 0, 0) 200px, rgba(100, 100, 225, 0.25) 200px, rgba(100, 100, 225, 0.25) 230px, rgba(0, 0, 0, 0) 230px, rgba(0, 0, 0, 0) 240px, rgba(100, 100, 225, 0.25) 240px, rgba(100, 100, 225, 0.25) 270px, rgba(0, 0, 0, 0) 270px, rgba(0, 0, 0, 0) 280px, rgba(100, 100, 225, 0.25) 280px, rgba(100, 100, 225, 0.25) 310px, rgba(0, 0, 0, 0) 310px, rgba(0, 0, 0, 0) 320px, rgba(100, 100, 225, 0.25) 320px, rgba(100, 100, 225, 0.25) 350px, rgba(0, 0, 0, 0) 350px, rgba(0, 0, 0, 0) 360px, rgba(100, 100, 225, 0.25) 360px, rgba(100, 100, 225, 0.25) 390px, rgba(0, 0, 0, 0) 390px, rgba(0, 0, 0, 0) 400px, rgba(100, 100, 225, 0.25) 400px, rgba(100, 100, 225, 0.25) 430px, rgba(0, 0, 0, 0) 430px, rgba(0, 0, 0, 0) 440px, rgba(100, 100, 225, 0.25) 440px, rgba(100, 100, 225, 0.25) 470px, rgba(0, 0, 0, 0) 470px, rgba(0, 0, 0, 0) 480px, rgba(100, 100, 225, 0.25) 480px, rgba(100, 100, 225, 0.25) 510px, rgba(0, 0, 0, 0) 510px, rgba(0, 0, 0, 0) 520px, rgba(100, 100, 225, 0.25) 520px, rgba(100, 100, 225, 0.25) 550px, rgba(0, 0, 0, 0) 550px, rgba(0, 0, 0, 0) 560px, rgba(100, 100, 225, 0.25) 560px, rgba(100, 100, 225, 0.25) 590px, rgba(0, 0, 0, 0) 590px, rgba(0, 0, 0, 0) 600px, rgba(100, 100, 225, 0.25) 600px, rgba(100, 100, 225, 0.25) 630px, rgba(0, 0, 0, 0) 630px, rgba(0, 0, 0, 0) 640px, rgba(100, 100, 225, 0.25) 640px, rgba(100, 100, 225, 0.25) 670px, rgba(0, 0, 0, 0) 670px, rgba(0, 0, 0, 0) 680px, rgba(100, 100, 225, 0.25) 680px, rgba(100, 100, 225, 0.25) 710px, rgba(0, 0, 0, 0) 710px, rgba(0, 0, 0, 0) 720px, rgba(100, 100, 225, 0.25) 720px, rgba(100, 100, 225, 0.25) 750px, rgba(0, 0, 0, 0) 750px, rgba(0, 0, 0, 0) 760px, rgba(100, 100, 225, 0.25) 760px, rgba(100, 100, 225, 0.25) 790px, rgba(0, 0, 0, 0) 790px, rgba(0, 0, 0, 0) 800px, rgba(100, 100, 225, 0.25) 800px, rgba(100, 100, 225, 0.25) 830px, rgba(0, 0, 0, 0) 830px, rgba(0, 0, 0, 0) 840px, rgba(100, 100, 225, 0.25) 840px, rgba(100, 100, 225, 0.25) 870px, rgba(0, 0, 0, 0) 870px, rgba(0, 0, 0, 0) 880px, rgba(100, 100, 225, 0.25) 880px, rgba(100, 100, 225, 0.25) 910px, rgba(0, 0, 0, 0) 910px, rgba(0, 0, 0, 0) 920px, rgba(100, 100, 225, 0.25) 920px, rgba(100, 100, 225, 0.25) 950px, rgba(0, 0, 0, 0) 950px, rgba(0, 0, 0, 0) 960px);
+  background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%), -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0px, rgba(100, 100, 225, 0.25) 0px, rgba(100, 100, 225, 0.25) 30px, rgba(0, 0, 0, 0) 30px, rgba(0, 0, 0, 0) 40px, rgba(100, 100, 225, 0.25) 40px, rgba(100, 100, 225, 0.25) 70px, rgba(0, 0, 0, 0) 70px, rgba(0, 0, 0, 0) 80px, rgba(100, 100, 225, 0.25) 80px, rgba(100, 100, 225, 0.25) 110px, rgba(0, 0, 0, 0) 110px, rgba(0, 0, 0, 0) 120px, rgba(100, 100, 225, 0.25) 120px, rgba(100, 100, 225, 0.25) 150px, rgba(0, 0, 0, 0) 150px, rgba(0, 0, 0, 0) 160px, rgba(100, 100, 225, 0.25) 160px, rgba(100, 100, 225, 0.25) 190px, rgba(0, 0, 0, 0) 190px, rgba(0, 0, 0, 0) 200px, rgba(100, 100, 225, 0.25) 200px, rgba(100, 100, 225, 0.25) 230px, rgba(0, 0, 0, 0) 230px, rgba(0, 0, 0, 0) 240px, rgba(100, 100, 225, 0.25) 240px, rgba(100, 100, 225, 0.25) 270px, rgba(0, 0, 0, 0) 270px, rgba(0, 0, 0, 0) 280px, rgba(100, 100, 225, 0.25) 280px, rgba(100, 100, 225, 0.25) 310px, rgba(0, 0, 0, 0) 310px, rgba(0, 0, 0, 0) 320px, rgba(100, 100, 225, 0.25) 320px, rgba(100, 100, 225, 0.25) 350px, rgba(0, 0, 0, 0) 350px, rgba(0, 0, 0, 0) 360px, rgba(100, 100, 225, 0.25) 360px, rgba(100, 100, 225, 0.25) 390px, rgba(0, 0, 0, 0) 390px, rgba(0, 0, 0, 0) 400px, rgba(100, 100, 225, 0.25) 400px, rgba(100, 100, 225, 0.25) 430px, rgba(0, 0, 0, 0) 430px, rgba(0, 0, 0, 0) 440px, rgba(100, 100, 225, 0.25) 440px, rgba(100, 100, 225, 0.25) 470px, rgba(0, 0, 0, 0) 470px, rgba(0, 0, 0, 0) 480px, rgba(100, 100, 225, 0.25) 480px, rgba(100, 100, 225, 0.25) 510px, rgba(0, 0, 0, 0) 510px, rgba(0, 0, 0, 0) 520px, rgba(100, 100, 225, 0.25) 520px, rgba(100, 100, 225, 0.25) 550px, rgba(0, 0, 0, 0) 550px, rgba(0, 0, 0, 0) 560px, rgba(100, 100, 225, 0.25) 560px, rgba(100, 100, 225, 0.25) 590px, rgba(0, 0, 0, 0) 590px, rgba(0, 0, 0, 0) 600px, rgba(100, 100, 225, 0.25) 600px, rgba(100, 100, 225, 0.25) 630px, rgba(0, 0, 0, 0) 630px, rgba(0, 0, 0, 0) 640px, rgba(100, 100, 225, 0.25) 640px, rgba(100, 100, 225, 0.25) 670px, rgba(0, 0, 0, 0) 670px, rgba(0, 0, 0, 0) 680px, rgba(100, 100, 225, 0.25) 680px, rgba(100, 100, 225, 0.25) 710px, rgba(0, 0, 0, 0) 710px, rgba(0, 0, 0, 0) 720px, rgba(100, 100, 225, 0.25) 720px, rgba(100, 100, 225, 0.25) 750px, rgba(0, 0, 0, 0) 750px, rgba(0, 0, 0, 0) 760px, rgba(100, 100, 225, 0.25) 760px, rgba(100, 100, 225, 0.25) 790px, rgba(0, 0, 0, 0) 790px, rgba(0, 0, 0, 0) 800px, rgba(100, 100, 225, 0.25) 800px, rgba(100, 100, 225, 0.25) 830px, rgba(0, 0, 0, 0) 830px, rgba(0, 0, 0, 0) 840px, rgba(100, 100, 225, 0.25) 840px, rgba(100, 100, 225, 0.25) 870px, rgba(0, 0, 0, 0) 870px, rgba(0, 0, 0, 0) 880px, rgba(100, 100, 225, 0.25) 880px, rgba(100, 100, 225, 0.25) 910px, rgba(0, 0, 0, 0) 910px, rgba(0, 0, 0, 0) 920px, rgba(100, 100, 225, 0.25) 920px, rgba(100, 100, 225, 0.25) 950px, rgba(0, 0, 0, 0) 950px, rgba(0, 0, 0, 0) 960px);
+  background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%), -o-linear-gradient(left, rgba(0, 0, 0, 0) 0px, rgba(100, 100, 225, 0.25) 0px, rgba(100, 100, 225, 0.25) 30px, rgba(0, 0, 0, 0) 30px, rgba(0, 0, 0, 0) 40px, rgba(100, 100, 225, 0.25) 40px, rgba(100, 100, 225, 0.25) 70px, rgba(0, 0, 0, 0) 70px, rgba(0, 0, 0, 0) 80px, rgba(100, 100, 225, 0.25) 80px, rgba(100, 100, 225, 0.25) 110px, rgba(0, 0, 0, 0) 110px, rgba(0, 0, 0, 0) 120px, rgba(100, 100, 225, 0.25) 120px, rgba(100, 100, 225, 0.25) 150px, rgba(0, 0, 0, 0) 150px, rgba(0, 0, 0, 0) 160px, rgba(100, 100, 225, 0.25) 160px, rgba(100, 100, 225, 0.25) 190px, rgba(0, 0, 0, 0) 190px, rgba(0, 0, 0, 0) 200px, rgba(100, 100, 225, 0.25) 200px, rgba(100, 100, 225, 0.25) 230px, rgba(0, 0, 0, 0) 230px, rgba(0, 0, 0, 0) 240px, rgba(100, 100, 225, 0.25) 240px, rgba(100, 100, 225, 0.25) 270px, rgba(0, 0, 0, 0) 270px, rgba(0, 0, 0, 0) 280px, rgba(100, 100, 225, 0.25) 280px, rgba(100, 100, 225, 0.25) 310px, rgba(0, 0, 0, 0) 310px, rgba(0, 0, 0, 0) 320px, rgba(100, 100, 225, 0.25) 320px, rgba(100, 100, 225, 0.25) 350px, rgba(0, 0, 0, 0) 350px, rgba(0, 0, 0, 0) 360px, rgba(100, 100, 225, 0.25) 360px, rgba(100, 100, 225, 0.25) 390px, rgba(0, 0, 0, 0) 390px, rgba(0, 0, 0, 0) 400px, rgba(100, 100, 225, 0.25) 400px, rgba(100, 100, 225, 0.25) 430px, rgba(0, 0, 0, 0) 430px, rgba(0, 0, 0, 0) 440px, rgba(100, 100, 225, 0.25) 440px, rgba(100, 100, 225, 0.25) 470px, rgba(0, 0, 0, 0) 470px, rgba(0, 0, 0, 0) 480px, rgba(100, 100, 225, 0.25) 480px, rgba(100, 100, 225, 0.25) 510px, rgba(0, 0, 0, 0) 510px, rgba(0, 0, 0, 0) 520px, rgba(100, 100, 225, 0.25) 520px, rgba(100, 100, 225, 0.25) 550px, rgba(0, 0, 0, 0) 550px, rgba(0, 0, 0, 0) 560px, rgba(100, 100, 225, 0.25) 560px, rgba(100, 100, 225, 0.25) 590px, rgba(0, 0, 0, 0) 590px, rgba(0, 0, 0, 0) 600px, rgba(100, 100, 225, 0.25) 600px, rgba(100, 100, 225, 0.25) 630px, rgba(0, 0, 0, 0) 630px, rgba(0, 0, 0, 0) 640px, rgba(100, 100, 225, 0.25) 640px, rgba(100, 100, 225, 0.25) 670px, rgba(0, 0, 0, 0) 670px, rgba(0, 0, 0, 0) 680px, rgba(100, 100, 225, 0.25) 680px, rgba(100, 100, 225, 0.25) 710px, rgba(0, 0, 0, 0) 710px, rgba(0, 0, 0, 0) 720px, rgba(100, 100, 225, 0.25) 720px, rgba(100, 100, 225, 0.25) 750px, rgba(0, 0, 0, 0) 750px, rgba(0, 0, 0, 0) 760px, rgba(100, 100, 225, 0.25) 760px, rgba(100, 100, 225, 0.25) 790px, rgba(0, 0, 0, 0) 790px, rgba(0, 0, 0, 0) 800px, rgba(100, 100, 225, 0.25) 800px, rgba(100, 100, 225, 0.25) 830px, rgba(0, 0, 0, 0) 830px, rgba(0, 0, 0, 0) 840px, rgba(100, 100, 225, 0.25) 840px, rgba(100, 100, 225, 0.25) 870px, rgba(0, 0, 0, 0) 870px, rgba(0, 0, 0, 0) 880px, rgba(100, 100, 225, 0.25) 880px, rgba(100, 100, 225, 0.25) 910px, rgba(0, 0, 0, 0) 910px, rgba(0, 0, 0, 0) 920px, rgba(100, 100, 225, 0.25) 920px, rgba(100, 100, 225, 0.25) 950px, rgba(0, 0, 0, 0) 950px, rgba(0, 0, 0, 0) 960px);
+  background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%), -ms-linear-gradient(left, rgba(0, 0, 0, 0) 0px, rgba(100, 100, 225, 0.25) 0px, rgba(100, 100, 225, 0.25) 30px, rgba(0, 0, 0, 0) 30px, rgba(0, 0, 0, 0) 40px, rgba(100, 100, 225, 0.25) 40px, rgba(100, 100, 225, 0.25) 70px, rgba(0, 0, 0, 0) 70px, rgba(0, 0, 0, 0) 80px, rgba(100, 100, 225, 0.25) 80px, rgba(100, 100, 225, 0.25) 110px, rgba(0, 0, 0, 0) 110px, rgba(0, 0, 0, 0) 120px, rgba(100, 100, 225, 0.25) 120px, rgba(100, 100, 225, 0.25) 150px, rgba(0, 0, 0, 0) 150px, rgba(0, 0, 0, 0) 160px, rgba(100, 100, 225, 0.25) 160px, rgba(100, 100, 225, 0.25) 190px, rgba(0, 0, 0, 0) 190px, rgba(0, 0, 0, 0) 200px, rgba(100, 100, 225, 0.25) 200px, rgba(100, 100, 225, 0.25) 230px, rgba(0, 0, 0, 0) 230px, rgba(0, 0, 0, 0) 240px, rgba(100, 100, 225, 0.25) 240px, rgba(100, 100, 225, 0.25) 270px, rgba(0, 0, 0, 0) 270px, rgba(0, 0, 0, 0) 280px, rgba(100, 100, 225, 0.25) 280px, rgba(100, 100, 225, 0.25) 310px, rgba(0, 0, 0, 0) 310px, rgba(0, 0, 0, 0) 320px, rgba(100, 100, 225, 0.25) 320px, rgba(100, 100, 225, 0.25) 350px, rgba(0, 0, 0, 0) 350px, rgba(0, 0, 0, 0) 360px, rgba(100, 100, 225, 0.25) 360px, rgba(100, 100, 225, 0.25) 390px, rgba(0, 0, 0, 0) 390px, rgba(0, 0, 0, 0) 400px, rgba(100, 100, 225, 0.25) 400px, rgba(100, 100, 225, 0.25) 430px, rgba(0, 0, 0, 0) 430px, rgba(0, 0, 0, 0) 440px, rgba(100, 100, 225, 0.25) 440px, rgba(100, 100, 225, 0.25) 470px, rgba(0, 0, 0, 0) 470px, rgba(0, 0, 0, 0) 480px, rgba(100, 100, 225, 0.25) 480px, rgba(100, 100, 225, 0.25) 510px, rgba(0, 0, 0, 0) 510px, rgba(0, 0, 0, 0) 520px, rgba(100, 100, 225, 0.25) 520px, rgba(100, 100, 225, 0.25) 550px, rgba(0, 0, 0, 0) 550px, rgba(0, 0, 0, 0) 560px, rgba(100, 100, 225, 0.25) 560px, rgba(100, 100, 225, 0.25) 590px, rgba(0, 0, 0, 0) 590px, rgba(0, 0, 0, 0) 600px, rgba(100, 100, 225, 0.25) 600px, rgba(100, 100, 225, 0.25) 630px, rgba(0, 0, 0, 0) 630px, rgba(0, 0, 0, 0) 640px, rgba(100, 100, 225, 0.25) 640px, rgba(100, 100, 225, 0.25) 670px, rgba(0, 0, 0, 0) 670px, rgba(0, 0, 0, 0) 680px, rgba(100, 100, 225, 0.25) 680px, rgba(100, 100, 225, 0.25) 710px, rgba(0, 0, 0, 0) 710px, rgba(0, 0, 0, 0) 720px, rgba(100, 100, 225, 0.25) 720px, rgba(100, 100, 225, 0.25) 750px, rgba(0, 0, 0, 0) 750px, rgba(0, 0, 0, 0) 760px, rgba(100, 100, 225, 0.25) 760px, rgba(100, 100, 225, 0.25) 790px, rgba(0, 0, 0, 0) 790px, rgba(0, 0, 0, 0) 800px, rgba(100, 100, 225, 0.25) 800px, rgba(100, 100, 225, 0.25) 830px, rgba(0, 0, 0, 0) 830px, rgba(0, 0, 0, 0) 840px, rgba(100, 100, 225, 0.25) 840px, rgba(100, 100, 225, 0.25) 870px, rgba(0, 0, 0, 0) 870px, rgba(0, 0, 0, 0) 880px, rgba(100, 100, 225, 0.25) 880px, rgba(100, 100, 225, 0.25) 910px, rgba(0, 0, 0, 0) 910px, rgba(0, 0, 0, 0) 920px, rgba(100, 100, 225, 0.25) 920px, rgba(100, 100, 225, 0.25) 950px, rgba(0, 0, 0, 0) 950px, rgba(0, 0, 0, 0) 960px);
+  background-image: linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%), linear-gradient(left, rgba(0, 0, 0, 0) 0px, rgba(100, 100, 225, 0.25) 0px, rgba(100, 100, 225, 0.25) 30px, rgba(0, 0, 0, 0) 30px, rgba(0, 0, 0, 0) 40px, rgba(100, 100, 225, 0.25) 40px, rgba(100, 100, 225, 0.25) 70px, rgba(0, 0, 0, 0) 70px, rgba(0, 0, 0, 0) 80px, rgba(100, 100, 225, 0.25) 80px, rgba(100, 100, 225, 0.25) 110px, rgba(0, 0, 0, 0) 110px, rgba(0, 0, 0, 0) 120px, rgba(100, 100, 225, 0.25) 120px, rgba(100, 100, 225, 0.25) 150px, rgba(0, 0, 0, 0) 150px, rgba(0, 0, 0, 0) 160px, rgba(100, 100, 225, 0.25) 160px, rgba(100, 100, 225, 0.25) 190px, rgba(0, 0, 0, 0) 190px, rgba(0, 0, 0, 0) 200px, rgba(100, 100, 225, 0.25) 200px, rgba(100, 100, 225, 0.25) 230px, rgba(0, 0, 0, 0) 230px, rgba(0, 0, 0, 0) 240px, rgba(100, 100, 225, 0.25) 240px, rgba(100, 100, 225, 0.25) 270px, rgba(0, 0, 0, 0) 270px, rgba(0, 0, 0, 0) 280px, rgba(100, 100, 225, 0.25) 280px, rgba(100, 100, 225, 0.25) 310px, rgba(0, 0, 0, 0) 310px, rgba(0, 0, 0, 0) 320px, rgba(100, 100, 225, 0.25) 320px, rgba(100, 100, 225, 0.25) 350px, rgba(0, 0, 0, 0) 350px, rgba(0, 0, 0, 0) 360px, rgba(100, 100, 225, 0.25) 360px, rgba(100, 100, 225, 0.25) 390px, rgba(0, 0, 0, 0) 390px, rgba(0, 0, 0, 0) 400px, rgba(100, 100, 225, 0.25) 400px, rgba(100, 100, 225, 0.25) 430px, rgba(0, 0, 0, 0) 430px, rgba(0, 0, 0, 0) 440px, rgba(100, 100, 225, 0.25) 440px, rgba(100, 100, 225, 0.25) 470px, rgba(0, 0, 0, 0) 470px, rgba(0, 0, 0, 0) 480px, rgba(100, 100, 225, 0.25) 480px, rgba(100, 100, 225, 0.25) 510px, rgba(0, 0, 0, 0) 510px, rgba(0, 0, 0, 0) 520px, rgba(100, 100, 225, 0.25) 520px, rgba(100, 100, 225, 0.25) 550px, rgba(0, 0, 0, 0) 550px, rgba(0, 0, 0, 0) 560px, rgba(100, 100, 225, 0.25) 560px, rgba(100, 100, 225, 0.25) 590px, rgba(0, 0, 0, 0) 590px, rgba(0, 0, 0, 0) 600px, rgba(100, 100, 225, 0.25) 600px, rgba(100, 100, 225, 0.25) 630px, rgba(0, 0, 0, 0) 630px, rgba(0, 0, 0, 0) 640px, rgba(100, 100, 225, 0.25) 640px, rgba(100, 100, 225, 0.25) 670px, rgba(0, 0, 0, 0) 670px, rgba(0, 0, 0, 0) 680px, rgba(100, 100, 225, 0.25) 680px, rgba(100, 100, 225, 0.25) 710px, rgba(0, 0, 0, 0) 710px, rgba(0, 0, 0, 0) 720px, rgba(100, 100, 225, 0.25) 720px, rgba(100, 100, 225, 0.25) 750px, rgba(0, 0, 0, 0) 750px, rgba(0, 0, 0, 0) 760px, rgba(100, 100, 225, 0.25) 760px, rgba(100, 100, 225, 0.25) 790px, rgba(0, 0, 0, 0) 790px, rgba(0, 0, 0, 0) 800px, rgba(100, 100, 225, 0.25) 800px, rgba(100, 100, 225, 0.25) 830px, rgba(0, 0, 0, 0) 830px, rgba(0, 0, 0, 0) 840px, rgba(100, 100, 225, 0.25) 840px, rgba(100, 100, 225, 0.25) 870px, rgba(0, 0, 0, 0) 870px, rgba(0, 0, 0, 0) 880px, rgba(100, 100, 225, 0.25) 880px, rgba(100, 100, 225, 0.25) 910px, rgba(0, 0, 0, 0) 910px, rgba(0, 0, 0, 0) 920px, rgba(100, 100, 225, 0.25) 920px, rgba(100, 100, 225, 0.25) 950px, rgba(0, 0, 0, 0) 950px, rgba(0, 0, 0, 0) 960px);
+  -moz-background-size: 100% 24px, auto;
+  -webkit-background-size: 100% 24px, auto;
+  -o-background-size: 100% 24px, auto;
+  background-size: 100% 24px, auto;
+  background-position: left top;
+}
+body.bp .feedback, body.bp .error, body.bp .alert, body.bp .notice, body.bp .success, body.bp .info {
+  padding: 0.8em;
+  margin-bottom: 1em;
+  border: 2px solid #dddddd;
+}
+body.bp .error, body.bp .alert {
+  background: #fbe3e4;
+  color: #8a1f11;
+  border-color: #fbc2c4;
+}
+body.bp .error a, body.bp .alert a {
+  color: #8a1f11;
+}
+body.bp .notice {
+  background: #fff6bf;
+  color: #514721;
+  border-color: #ffd324;
+}
+body.bp .notice a {
+  color: #514721;
+}
+body.bp .success {
+  background: #e6efc2;
+  color: #264409;
+  border-color: #c6d880;
+}
+body.bp .success a {
+  color: #264409;
+}
+body.bp .info {
+  background: #d5edf8;
+  color: #205791;
+  border-color: #92cae4;
+}
+body.bp .info a {
+  color: #205791;
+}
+body.bp .hide {
+  display: none;
+}
+body.bp .highlight {
+  background: yellow;
+}
+body.bp .added {
+  background: #006600;
+  color: white;
+}
+body.bp .removed {
+  background: #990000;
+  color: white;
+}
+body.bp .box {
+  padding: 1.5em;
+  margin-bottom: 1.5em;
+  background: #e5ecf9;
+}
+body.bp .border {
+  border-right: 1px solid #eeeeee;
+}
+body.bp .colborder {
+  padding-right: 2.084%;
+  margin-right: 2.084%;
+  border-right: 1px solid #eeeeee;
+}
+body.bp hr {
+  background: #dddddd;
+  color: #dddddd;
+  clear: both;
+  width: 100%;
+  height: 0.083em;
+  margin: 0;
+  margin-left: 2.084%;
+  margin-right: 2.084%;
+  border: none;
+}
+body.bp hr.space {
+  background: #dddddd;
+  color: #dddddd;
+  clear: both;
+  width: 100%;
+  height: 0.083em;
+  margin: 0;
+  margin-left: 2.084%;
+  margin-right: 2.084%;
+  border: none;
+  background: white;
+  color: white;
+}
+body.bp form.inline {
+  line-height: 3;
+}
+body.bp form.inline p {
+  margin-bottom: 0;
+}
+
+form.bp label {
+  font-weight: bold;
+}
+form.bp fieldset {
+  padding: 1.4em;
+  margin: 0 0 1.5em 0;
+}
+form.bp legend {
+  font-weight: bold;
+  font-size: 1.2em;
+}
+form.bp input.text, form.bp input.title, form.bp input[type=email], form.bp input[type=text], form.bp input[type=password] {
+  margin: 0.5em 0;
+  background-color: white;
+  padding: 5px;
+}
+form.bp input.title {
+  font-size: 1.5em;
+}
+form.bp textarea {
+  margin: 0.5em 0;
+  padding: 5px;
+}
+form.bp select {
+  margin: 0.5em 0;
+}
+form.bp fieldset {
+  border: 1px solid #cccccc;
+}
+form.bp input.text, form.bp input.title, form.bp input[type=email], form.bp input[type=text], form.bp input[type=password],
+form.bp textarea {
+  background-color: #fff;
+  border: 1px solid #bbbbbb;
+}
+form.bp input.text:focus, form.bp input.title:focus, form.bp input[type=email]:focus, form.bp input[type=text]:focus, form.bp input[type=password]:focus,
+form.bp textarea:focus {
+  border-color: #666666;
+}
+form.bp select {
+  background-color: #fff;
+  border-width: 1px;
+  border-style: solid;
+}
+form.bp input.text, form.bp input.title, form.bp input[type=email], form.bp input[type=text], form.bp input[type=password] {
+  width: 300px;
+}
+form.bp textarea {
+  width: 390px;
+  height: 250px;
+}
+
+body.two-col #container {
+  min-width: 950px;
+  width: 80%;
+  margin: 0 auto;
+  overflow: hidden;
+  *zoom: 1;
+}
+body.two-col #header, body.two-col #footer {
+  display: inline;
+  float: left;
+  overflow: hidden;
+  width: 99.974%;
+  margin-right: 1.042%;
+}
+body.two-col #sidebar {
+  display: inline;
+  float: left;
+  overflow: hidden;
+  width: 32.63%;
+  margin-right: 1.042%;
+}
+body.two-col #content {
+  display: inline;
+  float: left;
+  overflow: hidden;
+  width: 66.302%;
+  margin-right: 0;
+}
+
+body.three-col #container {
+  min-width: 950px;
+  width: 80%;
+  margin: 0 auto;
+  overflow: hidden;
+  *zoom: 1;
+}
+body.three-col #footer {
+  display: inline;
+  float: left;
+  overflow: hidden;
+  width: 99.974%;
+  margin-right: 1.042%;
+}
+body.three-col section.column {
+  display: inline;
+  float: left;
+  overflow: hidden;
+  width: 32.63%;
+  margin-right: 1.042%;
+}
+body.three-col section.column.last {
+  display: inline;
+  float: left;
+  overflow: hidden;
+  width: 28.421%;
+  margin-right: 0;
+}
+
+body {
+  background-color: #dadadc;
+}
+body #header nav {
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+  -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  height: 40px;
+  width: 100%;
+}
+body #header nav ul {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  *zoom: 1;
+  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #dddddd), color-stop(100%, #ffffff));
+  background-image: -webkit-linear-gradient(bottom, #dddddd, #ffffff);
+  background-image: -moz-linear-gradient(bottom, #dddddd, #ffffff);
+  background-image: -o-linear-gradient(bottom, #dddddd, #ffffff);
+  background-image: -ms-linear-gradient(bottom, #dddddd, #ffffff);
+  background-image: linear-gradient(bottom, #dddddd, #ffffff);
+  background-color: #eeeeee;
+  font-size: 1.3em;
+  height: 100%;
+}
+body #header nav ul li {
+  list-style-image: none;
+  list-style-type: none;
+  margin-left: 0px;
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
+  display: inline-block;
+  vertical-align: middle;
+  *vertical-align: auto;
+  white-space: nowrap;
+}
+body #header nav ul li {
+  *display: inline;
+}
+body #header nav ul li {
+  height: 100%;
+  margin-left: 20px;
+  padding: 4px;
+}
+body #header nav ul li a {
+  text-decoration: none;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+}
+body #header nav ul li a.non_action {
+  color: #333333;
+}
+body #header nav ul li.active {
+  background-color: white;
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+  -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+}
+body #container {
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+  -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  -o-border-radius: 10px;
+  -ms-border-radius: 10px;
+  -khtml-border-radius: 10px;
+  border-radius: 10px;
+  position: relative;
+  top: 60px;
+  padding: 10px;
+  background-color: white;
+}
+body #container section {
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  -o-border-radius: 6px;
+  -ms-border-radius: 6px;
+  -khtml-border-radius: 6px;
+  border-radius: 6px;
+}
+body #container section ul {
+  min-height: 100px;
+  padding-top: 4px;
+}
+body #container section h2 {
+  margin-bottom: 4px;
+}
+body #container section:hover {
+  background-color: #f7f7f7;
+}
+body #footer {
+  position: fixed;
+  bottom: 0px;
+  left: 20px;
+}

templates/base.html

@@ -12,10 +12,20 @@
     {%endblock%}
 </head>
 <body class="bp three-col">
+    <header id="header">
+    {%block header%}
+    {% include "nav.html" %}
+    {%endblock%}
+    </header>
     <div id="container">
         {%block content%}
         {%endblock%}
     </div>
+    <div id="footer">
+    {%block footer %}
+        <img src="/static/DNSlogo.png" />
+    {%endblock%}
+    </div>
 
     {%block tailinc %}
     {%endblock%}

templates/nav.html

@@ -0,0 +1,5 @@
+        <nav>
+            <ul>
+                <li><a href="/" class="non_action">Brukerinfo</a></li>{% if active %}<li class="{% if active = "profile" %}active{% endif %}"><a href="/accounts/profile">Din konto</a></li><li class="{% if active = "password_change" %}active{% endif %}"><a href="{% url django.contrib.auth.views.password_change %}">Endre passord</a></li><li class="{% if active = "logout" %}active{% endif %}"><a href="{% url main.views.logout %}">Logg ut</a></li>{% if request.user.is_superuser %}<li><a href="/admin">Administrasjon</a></li>{% endif %}{% endif %}
+            </ul>
+        </nav>

templates/private/profile.html

@@ -3,47 +3,40 @@
     <script type="text/javascript" src="/static/js/jquery-1.6.1.min.js"></script>
     <script type="text/javascript" src="/static/js/status.js"></script>
 {% endblock %}
+{%block header%}
+    {% include "nav.html" with active="profile" %}
+{%endblock%}
 {% block content %}
-<div class="container">
-    <header id="header">
-        <nav>
-            <h2>Hva vil du gjøre?</h2>
-            <ul>
-                <li><a href="{% url django.contrib.auth.views.password_change %}">Endre passord</a></li>
-                {% if request.user.is_superuser %}
-                <li><a href="/admin">Administrasjon</a></li>
-                {% endif %}
-                <li><a href="{% url main.views.logout %}">Logg ut</a></li>
-            </ul>
-        </nav>
-    </header>
-    <section class="column">
-        <h2>Om deg</h2>
-        <ul>
-            <li>Brukernavn: {{ldap_user.username}}</li>
-            <li>Navn: {{ldap_user.full_name}}</li>
-            <li>Mail: {{ldap_user.email}}</li>
-        </ul>
-    </section>
-    <section class="column">
-        <h2>Dine grupper</h2>
-        <ul>
-        {% if groups %}
-            <li>{{ private_group }}</li>
-            {% for group in groups %}
-                <li>{{ group }}</li>
-            {% endfor %}
+<section class="column">
+    <h2>Om deg</h2>
+    <ul>
+        <li><strong>Brukernavn:</strong> {{ldap_user.username}}</li>
+        <li><strong>Navn:</strong> {{ldap_user.full_name}}</li>
+        <li><strong>Mail:</strong> {{ldap_user.email}}</li>
+    </ul>
+</section>
+<section class="column">
+    <h2>Dine grupper</h2>
+    <ul>
+    {% if groups %}
+        <li>{{ private_group }}</li>
+        {% for group in groups %}
+        {% if group = "dns-aktiv" %}
+            <li title="Du har tilgang til foreningsmaskinene.">{{ group }}</li>
         {% else %}
-            <li>Ingen grupper.</li>
+            <li>{{ group }}</li>
         {% endif %}
-        </ul>
-    </section>
-    <section class="column last">
-        <h2>Dine tjenester</h2>
-        <ul>
-            <li>Klientmaskiner<span id="client_status"></span></li>
-            <li>Trådløst nettverk<span id="wireless_status"></span></li>
-        </ul>
-    </section>
-</div>
+        {% endfor %}
+    {% else %}
+        <li>Ingen grupper.</li>
+    {% endif %}
+    </ul>
+</section>
+<section class="column last">
+    <h2>Dine tjenester</h2>
+    <ul>
+        <li>Trådløst nettverk<span id="wireless_status"></span></li>
+        <li>Foreningsmaskiner<span id="client_status"></span></li>
+    </ul>
+</section>
 {%endblock%}

templates/public/index.html

@@ -1,24 +1,10 @@
 {% extends "base.html" %}
+{% block title %}Brukerinfo{% endblock %}
+
 {% block content %}
+    <p>
+        <strong>Brukerinfo</strong> lar deg kontrollere kontoen din på <a href="http://studentersamfundet.no">Det Norske Studentersamfund</a>.
 
-{% if form.errors %}
-<p>Your username and password didn't match. Please try again.</p>
-{% endif %}
-
-<form method="post" action="{% url django.contrib.auth.views.login %}">
-{% csrf_token %}
-<table>
-<tr>
-    <td>{{ form.username.label_tag }}</td>
-    <td>{{ form.username }}</td>
-</tr>
-<tr>
-    <td>{{ form.password.label_tag }}</td>
-    <td>{{ form.password }}</td>
-</tr>
-</table>
-
-<input type="submit" value="Login" />
-</form>
-<a href="{% url django.contrib.auth.views.password_reset %}">Forgot password?</a>
+        {% include "registration/login_form.html" %}
+    </p>
 {% endblock %}

templates/registration/login.html

@@ -1,26 +1,8 @@
 {% extends "base.html" %}
 
+{% block title %}Endre passord{% endblock %}
+
 {% block content %}
-
-{% if form.errors %}
-<p>Your username and password didn't match. Please try again.</p>
-{% endif %}
-
-<form method="post" action="{% url django.contrib.auth.views.login %}">
-{% csrf_token %}
-<table>
-<tr>
-    <td>{{ form.username.label_tag }}</td>
-    <td>{{ form.username }}</td>
-</tr>
-<tr>
-    <td>{{ form.password.label_tag }}</td>
-    <td>{{ form.password }}</td>
-</tr>
-</table>
-
-<input type="submit" value="login" />
-<input type="hidden" name="next" value="{{ next }}" />
-</form>
+{% include "registration/login_form.html" %}
 
 {% endblock %}

templates/registration/login_form.html

@@ -0,0 +1,21 @@
+{% if form.errors %}
+<p>Brukernavn og passord stemmer ikke overens. Prøv igjen.</p>
+{% endif %}
+
+<form method="post" action="{% url django.contrib.auth.views.login %}" class="bp">
+{% csrf_token %}
+<table>
+<tr>
+    <th><label for="id_username">Brukernavn:</label></th>
+    <td>{{ form.username }}</td>
+</tr>
+<tr>
+    <th><label for="id_password">Passord: </label></th>
+    <td>{{ form.password }}</td>
+</tr>
+<tr><td></td><td><a href="{% url django.contrib.auth.views.password_reset %}">Glemt passord?</a></td></tr>
+</table>
+
+<input type="submit" value="Logg inn" />
+<input type="hidden" name="next" value="{{ next }}" />
+</form>

templates/registration/logout.html

@@ -1,6 +1,11 @@
 {% extends "base.html" %}
 
-{% block content %}
-You have been logged out, do you want do <a href="{% url main.views.index %}">login</a> again?
+{% block title %}Logget ut{% endblock %}
 
+{%block header%}
+    {% include "nav.html" with active="logout" %}
+{%endblock%}
+
+{% block content %}
+    Du har blitt logget ut, vil du <a href="{% url main.views.index %}">logge inn</a> igjen?
 {% endblock %}

templates/registration/password_change_done.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
-{% block title %}Change password done{% endblock %}
+{% block title %}Passord endret{% endblock %}
 {% block content %}
 <p>
-The page shown after a user has changed their password.
+Passordet ditt er endret og kan med en gang brukes på våre tjenester.
 </p>
 {% endblock %}

templates/registration/password_change_form.html

@@ -1,15 +1,22 @@
 {% extends "base.html" %}
-{% block title %}Change password{% endblock %}
+{% block title %}Endre passordet ditt{% endblock %}
+{%block header%}
+    {% include "nav.html" with active="password_change" %}
+{%endblock%}
 {% block content %}
 <p>
-Allows a user to change their password.
+Lar deg endre passordet til kontoen din. Passordet må være på minimum 8 tegn.
+</p>
+<p>
 </p>
 <form method="post" class="bp">
+    {{ form.non_field_errors }}
     {% csrf_token %}
     <table>
-    {{ form.as_table }}
+        <tr><th>{{ form.new_password1.errors }}<label for="id_new_password1">Nytt passord: </label></th><td>{{ form.new_password1 }}</td></tr>
+        <tr><th>{{ form.new_password2.errors }}<label for="id_new_password2">Nytt passord (gjenta): </label></th><td>{{ form.new_password2 }}</td></tr>
     </table>
-    <input type="submit" />
+    <input type="submit" value="Endre passord" />
 </form>
 {% endblock %}
 

templates/registration/password_reset_complete.html

@@ -1,5 +1,8 @@
 {% extends "base.html" %}
-{% block title %}Password reset complete{% endblock %}
+{% block title %}Passordendring vellykket{% endblock %}
 {% block content %}
-The page shown after a user has been emailed a link to reset their password.
+<!--Presents a view which informs the user that the password has been successfully changed. -->
+<p>
+Strålende, passordet ditt har blitt endret! Du kan nå forsøke å <a href="/">logge inn</a> med ditt nye passord.
+</p>
 {% endblock %}

templates/registration/password_reset_confirm.html

@@ -1,16 +1,22 @@
 {% extends "base.html" %}
-{% block title %}Password reset confirmation{% endblock %}
+{% block title %}Bekreft nytt passord{% endblock %}
 {% block content %}
 <p>
-Presents a form for entering a new password.
+<!--Presents a form for entering a new password.-->
+Vennligst velg et nytt passord. Ditt nye passord må være på miminum 8 tegn.
 </p>
 {% if validlink %}
     <form method="post">
+        {{ form.non_field_errors }}
         {% csrf_token %}
-        {{form}}
+        <table>
+            <tr><th>{{ form.new_password1.errors }}<label for="id_new_password1">Nytt passord: </label></th><td>{{ form.new_password1 }}</td></tr>
+            <tr><th>{{ form.new_password2.errors }}<label for="id_new_password2">Nytt passord (gjenta): </label></th><td>{{ form.new_password2 }}</td></tr>
+        </table>
         <input type="submit" />
     </form>
 {% else %}
-    The password reset link is not valid or allready used.
+    Nytt-passord-lenken er ikke gyldig eller har allerede blitt brukt.
+    <!--The password reset link is not valid or allready used.-->
 {% endif %}
 {% endblock %}

templates/registration/password_reset_done.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
-{% block title %}Password reset done{% endblock %}
+{% block title %}Passordmail er sent{% endblock %}
 {% block content %}
 <p>
-The page shown after a user has been emailed a link to reset their password.
+Vi har nå sendt deg en epost med informasjon om hvordan du kan velge et nytt passord.
 </p>
 {% endblock %}

templates/registration/password_reset_email.html

@@ -1,2 +1,2 @@
-Someone asked for password reset for email {{ email }}. Follow the link below:
+Noen har bedt om at passordet for brukeren med epostadresse {{ email }} skal endres. Vennligst følg lenken nedenfor:
 {{ protocol }}://{{ site_name }}{% url main.views.password_reset_confirm uidb36=uid token=token %}

templates/registration/password_reset_form.html

@@ -1,13 +1,18 @@
 {% extends "base.html" %}
-{% block title %}Reset password{% endblock %}
+{% block title %}Få nytt passord{% endblock %}
 {% block content %}
 <p>
-Allows a user to reset their password by generating a one-time use link that can be used to reset the password, and sending that link to the user's registered email address.
-<form method="post" class="bp">
-    {% csrf_token %}
-    {{ form.as_table }}
-    <input type="submit" />
-</form>
+    For å endre passordet ditt, fyll ut epostadressen knyttet til kontoen din:
+    <!--Allows a user to reset their password by generating a one-time use link that can be used to reset the password, and sending that link to the user's registered email address.-->
+    <form method="post" class="bp">
+         {{ form.non_field_errors }}
+        {% csrf_token %}
+        <table>
+            <tr><th>{{ form.email.errors }}<label for="id_email">Epostadresse: </label></th><td>{{ form.email }}</td></tr>
+        </table>
+
+        <input type="submit" value="Send epost" />
+    </form>
 </p>
 {% endblock %}