Improved tutorials
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
new file mode 100644
index 0000000..60a3bf4
--- /dev/null
+++ b/dev/scss/header/header.scss
@@ -0,0 +1,141 @@
+@charset "utf-8";
+@import "../util";
+@import "hint"; // Hint specific menu list
+@import "menu"; // Menu list
+@import "searchbar"; // The search bar
+@import "vc"; // Virtual collection builder
+
+header {
+ position: relative;
+ background-color: $light-green;
+// @include light-noise;
+ @include box-sizing-box();
+ padding: 8px;
+ padding-bottom: 0;
+ font-size: 10pt;
+ color: $nearly-white;
+ // text-shadow: none;
+ button {
+ color: $light-green;
+ background-color: transparent;
+ border-width: 0;
+ font-weight: normal;
+ margin: 0;
+ padding: 0;
+ outline: none;
+ }
+ span.select, #vc-choose { /* Formally vc.location */
+ cursor: pointer;
+ line-height: 1.8em;
+ border: {
+ width: 0;
+ bottom-width: 3px;
+ style: solid;
+ color: transparent;
+ }
+ display: inline-block;
+ &:hover {
+ color: $dark-green;
+ border-color: $dark-green;
+ }
+ &::after {
+ pointer-events: none;
+ font-family: FontAwesome;
+ text-align: center;
+ background-color: $light-green;
+ }
+ }
+ span.select::after {
+ content: $fa-down;
+ }
+
+ form {
+ padding-left: $logo-left-distance;
+ min-height: 2.7em;
+ display: block;
+ margin: 0px;
+ position: relative;
+ }
+
+ .button {
+ &.right {
+ float: right;
+ display: inline-block;
+ }
+ &.top {
+ position: absolute;
+ display: block;
+ top: 0;
+ right: 0;
+ margin-right: 0;
+ width: 22px;
+ background-color: $dark-green;
+ text-align: center;
+ height: 100%;
+ }
+ color: $nearly-white;
+ line-height: 2em;
+ margin-right: $right-distance;
+ > a {
+ color: $nearly-white;
+ cursor:pointer;
+ position: relative;
+ font-size: 120%;
+ > span {
+ @include blind;
+ }
+ }
+ > a::after {
+ font-family: 'FontAwesome';
+ }
+ > a.tutorial::after {
+ content: $fa-tutorial;
+ }
+ > a.align.left::after {
+ content: $fa-left-align;
+ }
+ > a.align.right::after {
+ content: $fa-right-align;
+ }
+ > a.question::after {
+ content: $fa-question;
+ }
+ > a.login::after {
+ content: $fa-login;
+ }
+ }
+}
+
+
+/**
+ * Temporary hack for language chooser
+ * http://cssdeck.com/labs/styling-select-box-with-css3
+ */
+#ql-field {
+ cursor: pointer;
+ margin: 0;
+ outline: none;
+ border: none;
+ display: inline-block;
+ position: relative;
+ color: white;
+ background-color: $light-green;
+ border-width: 0;
+ border-radius: 0;
+ @include no-appearance;
+ &:checked {
+ outline: none;
+ }
+ > option {
+ padding: 0pt 2pt;
+ outline: none;
+ }
+}
+
+/**
+ * funny hack for firefox
+ */
+#ql-field:-moz-focusring {
+ color: transparent;
+ text-shadow: 0 0 0 white;
+}