1 files changed, 145 insertions, 0 deletions
diff --git a/app/assets/stylesheets/app/shared/_headers.scss b/app/assets/stylesheets/app/shared/_headers.scss
new file mode 100644
index 0000000..6f8f0fe
--- /dev/null
+++ b/app/assets/stylesheets/app/shared/_headers.scss
@@ -0,0 +1,145 @@
+// Headers
+// ----------------------------------------
+
+// -- File Variables ----------------------
+
+$border-light:#74B8EA;
+$background: #F0F0F3;
+$user-context-width:227px;
+
+
+// ----------------------------------------
+
+.ext-texture {
+  background:transparent image-url('gradients/white-texture-x63.png') left top repeat-x;
+}
+
+.ext-header {
+  max-width:$site-total-width - 2px; // Minus the borders
+  height:63px;
+  @extend .ext-bradius;
+}
+
+
+//  Header Object
+// ----------------------------------------
+
+header#main {
+  @extend .ext-header;
+  background:$background image-url('gradients/light-to-dark-blue-x63.png') left top repeat-x;
+  margin:$vertical-margin 0;
+  border:1px solid $border-light;
+  border-bottom:1px solid #518CBC;
+  border-top:1px solid lighten(saturate($border-light, 5%), 9%);
+  @include box-shadow(0px 1px 2px darken(#F0F0F3, 20%));
+  position:relative;
+  overflow:hidden;
+  .light {
+    @extend .ext-header;
+    @extend .ext-texture;
+    height:62px;
+    border-bottom:1px solid $border-light;
+    
+    // Used as a spacer for the width
+    padding:0 $user-context-width 0 0;
+  }
+
+  // Resizable Navigation Items.
+  span {
+    @include debug;
+    float:left;
+    margin-left:15px;
+    font-size:size(17px);
+    line-height:62px;
+    display:inline;
+    float:left;
+    margin-right:7px;
+  }
+  
+  .message {
+    margin-left:206px;
+  }
+  
+  a {
+    @include text-shadow(1px 1px 0px darken(#518CBC, 12%));
+    color:#fff;
+    &:active, &:hover {
+      color:#FFFF70;
+      text-decoration:none;
+    }
+  }
+}
+
+// User Context Object
+// ----------------------------------------
+
+.user-context {
+  @include pos(0 10px);
+  @include size(200px);
+  padding-left:12px;
+  text-align:center;
+  font-size:size(17px);
+  line-height:62px;
+  color:#DDDDDD;
+  border-left:1px solid $border-light;
+  @include box-shadow(-1px -1px 0px #3A91DE);
+  // Logged out version of this little guy.
+  .display {
+    @extend .ext-bradius-inner;
+    @include box-shadow(0 -1px 0px #518CBC, 0 1px 0 #74B8EA);
+    vertical-align: middle;
+    margin: -2px 7px 0 0;
+  } 
+  .logged-out {
+    @include box-shadow(none);
+  }
+  .user {
+    width: 170px;
+    display: block;
+    text-align:left;
+  }
+  .logout {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}
+
+
+// Logo Object
+// ----------------------------------------
+
+.gemeinschaft-logo {
+  @include logo('logo.png');
+  @include pos(2px 0 0 10px);
+  @include debug;
+}
+
+
+// Search Box Object
+// ----------------------------------------
+
+.search-box {
+  @extend .ext-bradius-inner;
+  float: left;
+  margin-left: 200px;
+  margin-top: 18px;
+  border-bottom: 1px solid #74B7EB;
+  position: relative;
+  input.text {
+    z-index: 0;
+    @extend .ext-bradius-inner;
+    background: #fff image-url('gradients/white-gray-x29-reverse.png') left top repeat-x;
+    line-height: 25px;
+    height: 25px;
+    border: 1px solid #3472B2;
+    @include size(160px, 25px, 0 23px 0 12px);
+  }
+  input[type="submit"] {
+    @include pos(5px 6px 0 0);
+    @include image-replace('icons/search-13x16.png');
+    border:0;
+  }
+}
+