Start of GS5.

author: Stefan Wintermeyer <stefan.wintermeyer@amooma.de> 2012-12-17 12:01:45 +0100
committer: Stefan Wintermeyer <stefan.wintermeyer@amooma.de> 2012-12-17 12:01:45 +0100
commit: b80bd744ad873f6fc43018bc4bfb90677de167bd (patch)
tree: 072c4b0e33d442528555b82c415f5e7a1712b2b0 /app/assets/stylesheets
parent: 3e706c2025ecc5523e81ad649639ef2ff75e7bac (diff)
37 files changed, 3569 insertions, 0 deletions
diff --git a/app/assets/stylesheets/api/rows.css.scss b/app/assets/stylesheets/api/rows.css.scss
new file mode 100644
index 0000000..4fad3d5
--- /dev/null
+++ b/app/assets/stylesheets/api/rows.css.scss
@@ -0,0 +1,3 @@
+// Place all the styles related to the api/rows controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
diff --git a/app/assets/stylesheets/app/layouts/_app.scss b/app/assets/stylesheets/app/layouts/_app.scss
new file mode 100644
index 0000000..abbe8b1
--- /dev/null
+++ b/app/assets/stylesheets/app/layouts/_app.scss
@@ -0,0 +1,24 @@
+// Application Layout
+// ----------------------------------------
+// TODO: This generates huge selectors..
+.app {
+
+  #main {
+    @include center-container(1000px, 0, 0 8px);
+    @include clearfix;
+    @include debug(gray);
+  }
+
+  $sidebar: 215px;
+  $content: 758px;
+
+  .container {
+    & > aside {
+      @include float(left, $sidebar, green);
+    }
+
+    & > .content {
+      @include float(right, $content, blue);
+    }
+  }
+}
+\ No newline at end of file
diff --git a/app/assets/stylesheets/app/layouts/_conference.scss b/app/assets/stylesheets/app/layouts/_conference.scss
new file mode 100644
index 0000000..18fb232
--- /dev/null
+++ b/app/assets/stylesheets/app/layouts/_conference.scss
@@ -0,0 +1,136 @@
+// Conference
+// ----------------------------------------
+
+// The Usual Box with Mute, Cross
+.actor {
+  @include clearfix;
+  @include gradient(#FDFDFD, #EFEFEF);
+  @include size(auto, 50px,6px, 1px 0 1px 0);
+  border-bottom:1px solid #E3E3E8;
+  border-top:1px solid #FFF;
+  img {
+    @extend .ext-bradius-inner;
+    float:left;
+    margin-right:6px;
+  }
+  .info {
+    .name {
+      display:block;
+      font-size:size(15px);
+      width:188px;
+    }
+    .status {
+      color:#818181;
+    }
+    float:left;
+  }
+  .voice-actions {
+    float:right;
+  }
+}
+
+// Audio Controls.
+.voice-actions {
+  padding:10px 0;
+  text-align:right;
+  width:100px;
+  .make.speaker {
+    @include image-replace('icons/microphone-16x.png');
+    display:inline-block;
+  }
+  .make.listener {
+    @include image-replace('icons/headphones-16x.png');
+    display:inline-block;
+  }
+
+  .voice {
+    &.muted {
+      @include image-replace('icons/mute-16x.png');
+      display:inline-block;
+    }
+    &.unmuted {
+      @include image-replace('icons/unmute-16x.png');
+      display:inline-block;
+    }
+  }
+  .remove {
+    @include image-replace('icons/cross-16x.png');
+    display:inline-block;
+  }
+  a {
+    margin:0 5px;
+    opacity:0.6;
+    &:hover { opacity:1.0;}
+  }
+}
+
+
+.conference {
+  @include pie-clearfix();
+  .panel {
+    @include box-shadow(1px 1px 0px #FFF inset, 1px 1px 1px #EDEDED);
+    background:#F7F7F7;
+    border:1px solid #E3E3E8;
+    float:left;
+    margin: 0 10px;
+    width: 303px;
+    &.speakers {
+      header { @include gradient(#FFF, #F3F3DE); }
+      h3 { background:transparent image-url('icons/microphone-32x.png') left top no-repeat; }
+    }
+    &.listeners {
+      header { @include gradient(#FFF, #DCEAF2); }
+      h3 { background:transparent image-url('icons/headphones-32x.png') left top no-repeat; }
+    }
+    &.log {
+      header { @include gradient(#FFF, #E7E7E7); }
+      h3 { background:transparent image-url('icons/clock-32x.png') left top no-repeat; }
+    }
+  }
+  .first { margin-left:0;}
+  .last { margin-right:0;}
+  header {
+    @include box-shadow(1px 1px 0px #FFF inset, 0px 1px 0px #FFF);
+    border-bottom:1px solid #E3E3E8;
+    padding:10px;
+  }
+  h3 {
+    font-size:size(24px);
+    font-weight:normal;
+    margin:0;
+    opacity:0.8;
+    padding:2px 2px 2px 43px;
+  }
+  .message {
+    @include gradient( #EEEEEE, #fff);
+    border-bottom:1px solid #E3E3E8;
+    padding:10px;
+    input {
+      @include input-effects;
+      @include size(283px, auto, 5px, 1px solid #E3E3E8 );
+      color:#696969;
+    }
+  }
+  .actors, .messages {
+    height:290px; // This should be X times the amount of items
+    overflow:auto;
+  }
+}
+
+.log {
+  .messages {
+    color:#484848;
+    div {
+      background:#FFF;
+      border-bottom:1px solid #E3E3E8;
+      border-top:1px solid #FFF;
+      padding:5px 10px;
+    }
+    .status {
+      background:#F5F5F5;
+    }
+    .name {
+      font-weight:bold;
+    }
+  }
+}
+\ No newline at end of file
diff --git a/app/assets/stylesheets/app/layouts/_phone-book-entry.scss b/app/assets/stylesheets/app/layouts/_phone-book-entry.scss
new file mode 100644
index 0000000..f9e2345
--- /dev/null
+++ b/app/assets/stylesheets/app/layouts/_phone-book-entry.scss
@@ -0,0 +1,176 @@
+// Phone Book Entry Show
+// ----------------------------------------
+// Icons: http://www.iconfinder.com/search/?q=iconset%3Acc_mono_icon_set
+//http://www.iconfinder.com/search/?q=iconset%3AHelveticons_Social
+section.phone-book-entry {
+  @include clearfix;
+  a {
+    @include link-colors(#49494D, $link-color);
+  }
+  .sidebar {
+    @include size(220px, auto, none, 0 1px 0 0);
+    border-right:1px solid #E3E3E8;
+    float:left;
+  }
+  .content {
+    float:right;
+    width:716px;
+
+  }
+
+  .username {
+    font-size: 46px;
+    font-weight:normal;
+    margin: 0 0 10px 0;
+  }
+  .personal {
+    margin-top:5px;
+    span {
+      margin-right:10px;
+      padding-left:22px;
+    }
+    .nickname {
+      background:transparent image-url('icons/user-16x.png') left 1px no-repeat;
+    }
+    .birthday {
+      background:transparent image-url('icons/star-16x.png') left -1px no-repeat;;
+    }
+  }
+
+  .work {
+    font-size: 18px;
+  }
+
+  .tags {
+    background:transparent image-url('icons/tag-16x.png') left 0px no-repeat;
+    margin-top:10px;
+    padding-left:22px;
+  }
+
+
+  .activity {
+    & > h2 {
+      font-size: 27px;
+      font-weight: normal;
+    }
+    textarea {
+      border-color: #E3E3E8;
+      height: 15px;
+      padding: 12px;
+      width: 689px;
+    }
+    .entry {
+      @include clearfix;
+      background-position: 12px 9px;
+      border-bottom: 1px solid #E3E3E8;
+      font-size: 16px;
+
+      padding: 12px 0px 15px 55px;
+      .motive {
+
+        display: block;
+        float: left;
+        line-height: 25px;
+        width: 529px;
+
+      }
+      .timestamp {
+        color: #929298;
+        float: right;
+        font-size: 12px;
+        line-height: 26px;
+      }
+    }
+  }
+
+
+  // Icons
+  .home {
+    background:transparent image-url('icons/house-32x.png') left 2px no-repeat;
+  }
+  .office {
+    background:transparent image-url('icons/suitcase-32x.png') left 2px no-repeat;
+  }
+  .cellphone {
+    background:transparent image-url('icons/phone-mobile-32x.png') left 2px no-repeat;
+  }
+  .phone {
+    background:transparent image-url('icons/phone-up-32x.png') left 2px no-repeat;
+  }
+  .phone-down {
+    background:transparent image-url('icons/phone-down-32x.png') left 2px no-repeat;
+  }
+  .fax {
+    background:transparent image-url('icons/fax-32x.png') left 2px no-repeat;
+  }
+  .skype {
+    background:transparent image-url('icons/skype-32x.png') left 2px no-repeat;
+  }
+  .twitter {
+    background:transparent image-url('icons/twitter-32x.png') left 2px no-repeat;
+  }
+  .voice-message {
+    background:transparent image-url('icons/mic-32x.png') left 2px no-repeat;
+  }
+
+
+
+  .comment {
+    @include clearfix;
+    border-bottom:1px solid #E3E3E8;
+    padding: 11px;
+    .display {
+      float:left;
+      overflow:hidden;
+    }
+    .info {
+      margin-bottom:4px;
+    }
+    .info,.body {
+      padding-left:47px;
+    }
+    .commenter {
+      font-size: 17px;
+      font-weight: bold;
+    }
+    .time {
+      color:#929298;
+    }
+    .info {
+      display:block;
+    }
+  }
+
+
+  .display {
+    @include border-radius(10px 0 10px 0);
+  }
+  .description {
+    margin:10px 0;
+  }
+  .widget {
+    border-top:1px solid #E3E3E8;
+    padding:23px 0;
+    width:200px; // Width of the image
+    div {
+      margin:10px 0;
+      padding-left:51px;
+      a {
+        color:#4B4B4B;
+        display:block;
+        font-size:size(17px);
+        font-weight:bold;
+      }
+      span {
+        color:#E3E3E8;
+        font-size:size(12px);
+      }
+    }
+
+    &.adresses {
+      strong {
+        display:block;
+      }
+    }
+  }
+}
+\ No newline at end of file
diff --git a/app/assets/stylesheets/app/pages/_phone_book.scss b/app/assets/stylesheets/app/pages/_phone_book.scss
new file mode 100644
index 0000000..3670e8e
--- /dev/null
+++ b/app/assets/stylesheets/app/pages/_phone_book.scss
@@ -0,0 +1,25 @@
+header.tabular-nav { @extend .ext-bradius-t; }
+footer.tabular-nav { @extend .ext-bradius-b; }
+
+.tabular-nav {
+  @include clearfix;
+  line-height: 41px;
+  padding: 0 14px;
+  @include gradient(#69ABFB, #75AAEC);
+  .pagination {
+    float:right;
+  }
+  nav {
+    float:left;
+    margin-top: 1px;
+    @include size(395px, auto);
+    ol {
+      @include inline-list;
+      a {
+        font-weight:bold;
+        color:#fff;
+        font-size: 14px;
+      }
+    }
+  }
+}
+\ No newline at end of file
diff --git a/app/assets/stylesheets/app/shared/_contents.scss b/app/assets/stylesheets/app/shared/_contents.scss
new file mode 100644
index 0000000..8f88802
--- /dev/null
+++ b/app/assets/stylesheets/app/shared/_contents.scss
@@ -0,0 +1,374 @@
+// Contents
+// ----------------------------------------´
+
+// Wrap Everything
+#container {
+  margin:0 auto;
+  width:$site-total-width;
+}
+
+// Global Layout.
+#content {
+  @extend .ext-bradius;
+  @include gradient(#fff, #FAF9FA);
+  border:1px solid #C0C0CA;
+  .light {
+    @extend .ext-bradius;
+    border:1px solid #ECECEF;
+    padding:20px;
+  }
+}
+
+
+// Content Header Object
+// ----------------------------------------
+
+.breadcrumbs {
+  color:$border-dark-color;
+  font-size:size(12px);
+  margin-bottom: 5px;
+  a {
+    @include link-colors(#8A8A91, $link-hover-color, #8A8A91, #8A8A91);
+  }
+}
+
+header.main {
+  border-bottom:1px solid $border-dark-color;
+  margin-bottom:20px;
+  h1,h2 {
+    color:#49494D;
+    margin-top:0px;
+  }
+}
+
+
+// Flash Notice Object
+// ----------------------------------------
+.flash {
+  @extend .ext-bradius;
+  @include box-shadow(0px 1px 2px darken(#F0F0F3, 20%));
+  font-weight:bold;
+  margin-bottom:$vertical-margin;
+  position:relative;
+  .sign {
+    $sign-height: 26px;
+    @include pos-y-center($sign-height);
+    font-family:Georgia;
+    font-size:23px;
+    height:$sign-height;
+  }
+  .light {
+    @extend .ext-texture;
+    background-position:left bottom;
+    padding:15px 21px;
+  }
+  .message {
+    line-height:18px;
+    padding-left:26px;
+  }
+
+  &.notice, &.flash {
+    @include text-shadow(1px 1px 1px #EDF3FA);
+    background:#CCE4FF;
+    color:#37547B;
+  }
+
+  &.warning, &.alert {
+    $border-bottom: #EE9C00;
+    $border-light:#EDCC37;
+    @include text-shadow(1px 1px 1px #FEF6D7);
+    background:#FFE070;
+    border:{
+      bottom:1px solid $border-bottom;
+      top:1px solid lighten(saturate($border-light, 5%), 9%);
+    };
+    color:#7A2300;
+  }
+}
+
+
+// Scaffolding Tables
+// ----------------------------------------
+table {
+  th {
+    color: #6A747B;
+    font-size: 14px;
+    font-weight: bold;
+    padding: 10px 8px;
+  }
+  .odd {
+    background:#F4F6FB;
+    border-bottom:1px solid #EDEFF8;
+  }
+  td {
+    padding:8px;
+  }
+}
+
+
+// Pagination Object
+// ----------------------------------------
+.pagination {  @include pagination(); }
+
+
+// Entries Object.
+// ----------------------------------------
+header.entries-nav { @extend .ext-bradius-inner-t; }
+footer.entries-nav { @extend .ext-bradius-inner-b; }
+
+.entries-nav {
+  @include box-shadow(
+    inset 0px 1px 0px #aad2ff, // Light Top
+    0 -1px 0px #A3C9E7, // Shadow Top
+    inset 0 -1px 2px #518CBC // Shadow Bottom
+  );
+  @include clearfix;
+  @include gradient(#69ABFB, #75AAEC);
+  line-height: 41px;
+  padding: 0 14px;
+  nav {
+    color:#5490C3;
+    float:left;
+    margin-top: 1px;
+    width:540px;
+  }
+  // ABC
+  ol {
+    @include inline-list;
+    a {
+      @include link-colors(#fff, #FFFFC2);
+      @include text-shadow(0 2px 0px #5D96CC);
+      font-size: 14px;
+      font-weight:bold;
+      padding:0 3px;
+    }
+  }
+  .pagination {
+    float:right;
+  }
+}
+
+
+// Phone Book Entry
+// ----------------------------------------
+
+// Title Extension
+.ext-pbe-big { display:block; font-size:size(18px); font-weight:bold; }
+
+.phone-book-entries {
+  table { margin:0;}
+}
+// Listing Version
+tr.phone-book-entry {
+  @include clearfix;
+  color:#7F7F7F;
+  td {
+    vertical-align:middle;
+  }
+  &.odd {
+    background:#F4F6FB;
+    border-bottom:1px solid #EDEFF8;
+  }
+  img {
+    opacity:0.8;
+  }
+  // All Link colors
+  a {
+    @include link-colors(#577DA2, $link-color);
+  }
+  .name {
+    @extend .ext-pbe-big;
+  }
+  .company {
+    font-size:size(16px);
+  }
+  .user {
+    @include size(34%);
+  }
+  .phone {
+    @extend .ext-pbe-big;
+  }
+  .contact {
+    @include size(28%);
+  }
+  .extra {
+    @include size(38%);
+  }
+}
+
+// Call History Entry
+// ----------------------------------------
+
+.call-history-entries {
+  table { margin:0;}
+}
+
+// Listing Version
+tr.call-history-entry {
+  @include clearfix;
+  color:#7F7F7F;
+  td {
+    vertical-align:middle;
+  }
+  &.odd {
+    background:#F4F6FB;
+    border-bottom:1px solid #EDEFF8;
+  }
+  img {
+    opacity:0.8;
+  }
+  // All Link colors
+  a {
+    @include link-colors(#577DA2, $link-color);
+  }
+  .select_box {
+    @include size(2%);
+  }
+  .thumbnail {
+    @include size(5%);
+  }
+  .time {
+    @include size(15%);
+  }
+  .user {
+    @include size(45%);
+  }
+  .status {
+    @include size(15%);
+  }
+  .actions {
+    @include size(5%);
+  }
+  .name {
+    @extend .ext-pbe-big;
+  }
+  .phone {
+    @extend .ext-pbe-big;
+  }
+  .call-forwarded {
+    background:transparent image-url('icons/gs_forward_16x.png') no-repeat;
+    padding-left: 20px;
+  }
+  .call-placed {
+    background:transparent image-url('icons/gs_placed_16x.png') no-repeat;
+    padding-left: 20px;
+  }
+  .call-received {
+    background:transparent image-url('icons/gs_received_16x.png') no-repeat;
+    padding-left: 20px;
+  }
+  .call-missed {
+    background:transparent image-url('icons/gs_missed_16x.png') no-repeat;
+    padding-left: 20px;
+  }
+  .voicemail {
+    background:transparent image-url('icons/gs_envelope_16x.png') no-repeat;
+    padding-left: 20px;
+  }
+  .duration {
+    @extend .ext-pbe-big;
+  }
+}
+
+// Voicemail Messages Entry
+// ----------------------------------------
+
+.voicemail-messages-entries {
+  table { margin:0;}
+}
+
+// Listing Version
+tr.voicemail-messages-entry {
+  @include clearfix;
+  color:#7F7F7F;
+  td {
+    vertical-align:middle;
+  }
+  &.odd {
+    background:#F4F6FB;
+    border-bottom:1px solid #EDEFF8;
+  }
+  img {
+    opacity:0.8;
+  }
+  // All Link colors
+  a {
+    @include link-colors(#577DA2, $link-color);
+  }
+  .select_box {
+    @include size(2%);
+  }
+  .time {
+    @include size(15%);
+  }
+  .folder {
+    @include size(10%);
+  }
+  .user {
+    @include size(40%);
+  }
+  .status {
+    @include size(5%);
+  }
+  .actions {
+    @include size(5%);
+  }
+  .name {
+    @extend .ext-pbe-big;
+  }
+  .phone {
+    @extend .ext-pbe-big;
+  }
+  .voicemail-received {
+    background:transparent image-url('icons/gs_received_16x.png') no-repeat;
+    padding-left: 20px;
+  }
+  .voicemail-read {
+    background:transparent image-url('icons/gs_envelope_16x.png') no-repeat;
+    padding-left: 20px;
+  }
+  .duration {
+    @extend .ext-pbe-big;
+  }
+}
+
+
+//  users#show
+// ----------------------------------------
+#user-show {
+  @include clearfix;
+  .display  {
+    float:left;
+  }
+  aside {
+    float:left;
+    padding-top:5px;
+    width: 250px;
+    p {
+      margin-left:70+26px;
+    }
+  }
+  section {
+    float:right;
+    width:650px;
+    h2:first-child {
+      margin-top:0;
+    }
+  }
+}
+
+
+// Simple Form Error Messgaes
+// ----------------------------------------´
+p.error_notification {
+  @include gradient(mix(#EB6565, #994F5D, 60%), #994F5D);
+  border: 1px solid #7B404A;
+  border-radius: 4px;
+  box-shadow: inset 1px 1px 0px darken(#f3a0a0, 10%),inset -1px -1px 0px darken(#eb6565, 3%);
+  color:#FFF;
+  font-weight: bold;
+  margin: 0 0 0 158px;
+  padding: 10px 15px;
+  text-shadow: 2px 2px 1px #82434E;
+  width: 282px;
+}
+\ No newline at end of file
diff --git a/app/assets/stylesheets/app/shared/_footers.scss b/app/assets/stylesheets/app/shared/_footers.scss
new file mode 100644
index 0000000..be0f54f
--- /dev/null
+++ b/app/assets/stylesheets/app/shared/_footers.scss
@@ -0,0 +1,90 @@
+// Footers
+// ----------------------------------------
+
+//@include sticky-footer(54px, "#container", "#footer-spacing", "footer");
+
+footer#main {
+  @include clearfix;
+  position:relative;
+  margin:$vertical-margin 0;
+	@include gradient(#fff, #FAF9FA);
+	border:1px solid #C0C0CA;
+	@extend .ext-bradius;
+	.light {
+		padding:10px 20px;
+		border:1px solid #ECECEF;
+		@extend .ext-bradius;
+	}
+
+  ul {
+    @include clearfix;
+    list-style:none;
+    float:left;
+    margin:0;
+    li {
+      float:left;
+      margin-bottom: 0px;
+    }
+    a {
+      @include debug;
+      line-height:43px;
+      padding: 10px 20px;
+      border:{
+        left:1px solid $border-dark-color;
+      };
+    }
+    li:first-child a{
+      border-left:none;
+    }
+//    @include horizontal-navigation(
+//      /*$height            : */ 32px,
+//      /*$color             : */ red,
+//      /*$hover-color       : */ red,
+//      /*$active-color      : */ red,
+//      /*$text-shadow       : */ #530008,
+//      /*$bg                : */ none,
+//      /*$bg-hover          : */ none,
+//      /*$bg-active         : */ none,
+//      /*$box-shadow        : */ none,
+//      /*$box-shadow-hover  : */ none,
+//      /*$box-shadow-active : */ none,
+//      /*$border-light      : */ #E3E3E8,
+//      /*$border-shadow     : */ lighten(#E3E3E8,5%),
+//      /*$padding           : */ 0 10px,
+//      /*$margin            : */ none,
+//      /*\border-radius     : */ none,
+//      /*$font-weight       : */ none,
+//      /*$font-size         : */ 14px,
+//      /*$tab-space         : */ none
+//    );
+  }
+
+}
+
+.amooma-logo {
+  background:#FAF9FA;
+  @include debug;
+  float:right;
+  padding:7px 7px 7px 16px;
+  @include border-radius(0 $global-border-radius $global-border-radius 0);
+  border-left:1px solid $border-dark-color;
+  @include box-shadow(-1px -1px 1px #FFFFFF);
+  a {
+    @include image-replace('amooma-logo.png');
+    float:right;
+    opacity:0.6;
+    margin: 5px 5px 0 0;
+    &:hover {
+      opacity:1;
+    }
+  }
+  span {
+    @include debug;
+    font-size:11px;
+    color:#74748B;
+    float:left;
+    line-height:30px;
+    margin-right:10px;
+  }
+
+}
+\ No newline at end of file
diff --git a/app/assets/stylesheets/app/shared/_handheld.scss b/app/assets/stylesheets/app/shared/_handheld.scss
new file mode 100644
index 0000000..1efc5e9
--- /dev/null
+++ b/app/assets/stylesheets/app/shared/_handheld.scss
@@ -0,0 +1,25 @@
+// 
+// Media queries for responsive design.
+// 
+// These follow after primary styles so they will successfully override.
+// 
+
+@media all and (orientation:portrait) {
+  // Style adjustments for portrait mode goes here
+
+}
+
+@media all and (orientation:landscape) {
+  // Style adjustments for landscape mode goes here
+
+}
+
+// Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
+// consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
+@media screen and (max-device-width: 480px) {
+
+
+  // Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust
+  // html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
+}
+
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;
+  }
+}
+
diff --git a/app/assets/stylesheets/app/shared/_ie.scss b/app/assets/stylesheets/app/shared/_ie.scss
new file mode 100644
index 0000000..afbe7e4
--- /dev/null
+++ b/app/assets/stylesheets/app/shared/_ie.scss
@@ -0,0 +1,7 @@
+// Internet Explorer Hate File.
+// ----------------------------------------
+// Here you'll find all css which it's focused at a specific browser.
+@if in-compatibility-mode() {
+  .ie7 {}
+  .ie8 {}
+}
+\ No newline at end of file
diff --git a/app/assets/stylesheets/app/shared/_media.scss b/app/assets/stylesheets/app/shared/_media.scss
new file mode 100644
index 0000000..c528a1f
--- /dev/null
+++ b/app/assets/stylesheets/app/shared/_media.scss
@@ -0,0 +1,16 @@
+// Survival ✚ Kit
+// Normalize.css
+
+//PLACEHOLDER Media Queries for Responsive Design.
+//These override the primary ('mobile first') styles
+//Modify as content requires.
+
+@media only screen and (min-width: 480px) {
+  /* Style adjustments for viewports 480px and over go here */
+
+}
+
+@media only screen and (min-width: 768px) {
+  /* Style adjustments for viewports 768px and over go here */
+
+}
+\ No newline at end of file
diff --git a/app/assets/stylesheets/app/shared/_print.scss b/app/assets/stylesheets/app/shared/_print.scss
new file mode 100644
index 0000000..c8594e4
--- /dev/null
+++ b/app/assets/stylesheets/app/shared/_print.scss
@@ -0,0 +1,17 @@
+// Survival ✚ Kit
+// Normalize.css
+
+@media print {
+  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
+  a, a:visited { text-decoration: underline; }
+  a[href]:after { content: " (" attr(href) ")"; }
+  abbr[title]:after { content: " (" attr(title) ")"; }
+  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
+  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+  thead { display: table-header-group; } /* h5bp.com/t */
+  tr, img { page-break-inside: avoid; }
+  img { max-width: 100% !important; }
+  @page { margin: 0.5cm; }
+  p, h2, h3 { orphans: 3; widows: 3; }
+  h2, h3 { page-break-after: avoid; }
+}
+\ No newline at end of file
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
new file mode 100644
index 0000000..32e54f4
--- /dev/null
+++ b/app/assets/stylesheets/application.css.scss
@@ -0,0 +1,117 @@
+// Survival ✚ Kit [ Bootstrapper File ]
+
+// Dependencies
+// ----------------------------------------
+@import "vendor/survival-kit/secure";
+@import "compass";
+@import "vendor/boilerplate-1.0/reset";
+@import "vendor/survival-kit/loader";
+@import "vendor/fancy-buttons/fancy-buttons";
+
+
+// Project Variables
+// ----------------------------------------
+// Use @include debug; to show a color overlay on the element when this is set to true.
+$debug                     : false;
+// Typography
+$base-font-family          : "Helvetica Neue", Arial, Helvetica, sans-serif;
+$base-font-size            : 13px;
+$base-line-height          : 1.231;
+$font-color                : #222;
+$link-color                : #00e;
+$link-hover-color          : #06e;
+$link-visited-color        : #551a8b;
+// ETC
+$hr-color                  : #ccc;
+// Selection
+$selected-font-color       : #fff;
+$selected-background-color : #0084AC;
+// Lists
+$list-margin               : 1em 0;
+$list-padding              : 0 0 0 2em;
+// Container Width
+$container-width           : 1000px;
+// Use @if in-compatibility-mode() to add conditional CSS (useful for mixins).
+$compatibility-mode        : true, ie7 ie8 ie9 ff2 chrome9;
+
+// -- Project Variables Overrides ---------
+
+$site-total-width           : 1000px;
+$vertical-margin            : 15px;
+$global-border-radius       : 8px;
+$global-inner-border-radius : 6px;
+
+
+// -- Colors ------------------------------
+$link-color:#388DDA;
+$border-dark-color: #E3E3E8;
+
+// Hooks
+// ----------------------------------------
+// Mixins that are called from the Library files to add some extra styling.
+
+@mixin sk-html() { }
+
+@mixin sk-body() {
+	background:#F0F3F3 image-url('bg-body.png') left top repeat;
+}
+
+// h1, h2, h3, h4, h5, h6
+@mixin sk-header-tags() {
+  font-weight:bold;
+}
+
+
+// Global Styling
+// ----------------------------------------
+// Calculate all H# Tags.
+@include htags-sizes($base-font-size + 20);
+@include simple-forms(auto, block-hints no-stars );
+ul {
+  ul {
+    margin:0;
+  }
+}
+
+// Global Classes for extension.
+// ----------------------------------------
+// Here you place classes which are used as extensions across all the project.
+// Prefix them with .ext-
+
+
+// The default fancy button, used across the SK.
+// @TODO: Turn this into a mixin @include sk-button(small/medium/big);
+.sk-button, .button {
+  @include fancy-button(#1E81D5);
+}
+a.button { margin:10px 0;}
+
+// Border Radius
+// ----------------------------------------
+.ext-bradius { @include border-radius($global-border-radius); }
+.ext-bradius-inner-t {  @include border-radius($global-inner-border-radius $global-inner-border-radius 0 0); }
+.ext-bradius-inner-b {  @include border-radius(0 0 $global-inner-border-radius $global-inner-border-radius); }
+.ext-bradius-inner {  @include border-radius($global-inner-border-radius); }
+
+
+// The Partials
+// ----------------------------------------
+// Base styles thanks to html5boilerplate. This one uses the Hooks defined before.
+@import "vendor/boilerplate-1.0/styles";
+
+// -- Shared Partials
+  // Headers and related material go here.
+  @import "app/shared/headers";
+  // Footers and related material go here.
+  @import "app/shared/footers";
+  // Content and Related Material go here.
+  @import "app/shared/contents";
+
+// -- Layouts Partials
+  // The most general one goes first
+  @import "app/layouts/app";
+    @import "app/layouts/phone-book-entry";
+    @import "app/layouts/conference";
+
+  // Compatibility.. oh jeez.
+  @import "app/shared/ie";
+\ No newline at end of file
diff --git a/app/assets/stylesheets/scaffolds.css.scss b/app/assets/stylesheets/scaffolds.css.scss
new file mode 100644
index 0000000..05188f0
--- /dev/null
+++ b/app/assets/stylesheets/scaffolds.css.scss
@@ -0,0 +1,56 @@
+body {
+  background-color: #fff;
+  color: #333;
+  font-family: verdana, arial, helvetica, sans-serif;
+  font-size: 13px;
+  line-height: 18px; }
+
+p, ol, ul, td {
+  font-family: verdana, arial, helvetica, sans-serif;
+  font-size: 13px;
+  line-height: 18px; }
+
+pre {
+  background-color: #eee;
+  padding: 10px;
+  font-size: 11px; }
+
+a {
+  color: #000;
+  &:visited {
+    color: #666; }
+  &:hover {
+    color: #fff;
+    background-color: #000; } }
+
+div {
+  &.field, &.actions {
+    margin-bottom: 10px; } }
+
+#notice {
+  color: green; }
+
+.field_with_errors {
+  padding: 2px;
+  background-color: red;
+  display: table; }
+
+#error_explanation {
+  width: 450px;
+  border: 2px solid red;
+  padding: 7px;
+  padding-bottom: 0;
+  margin-bottom: 20px;
+  background-color: #f0f0f0;
+  h2 {
+    text-align: left;
+    font-weight: bold;
+    padding: 5px 5px 5px 15px;
+    font-size: 12px;
+    margin: -7px;
+    margin-bottom: 0px;
+    background-color: #c00;
+    color: #fff; }
+  ul li {
+    font-size: 12px;
+    list-style: square; } }
diff --git a/app/assets/stylesheets/vendor/README b/app/assets/stylesheets/vendor/README
new file mode 100644
index 0000000..016b5fa
--- /dev/null
+++ b/app/assets/stylesheets/vendor/README
@@ -0,0 +1 @@
+Here you should place the files that are not part of your project, but you use them at some point.
+\ No newline at end of file
diff --git a/app/assets/stylesheets/vendor/boilerplate-1.0/README b/app/assets/stylesheets/vendor/boilerplate-1.0/README
new file mode 100644
index 0000000..a5aa5b1
--- /dev/null
+++ b/app/assets/stylesheets/vendor/boilerplate-1.0/README
@@ -0,0 +1,15 @@
+HTML5 ✰ Boilerplate (ac92ae7a)
+
+style.css contains a reset, font normalization and some base styles.
+
+Credit is left where credit is due.
+Much inspiration was taken from these projects:
+- yui.yahooapis.com/2.8.1/build/base/base.css
+- camendesign.com/design/
+- praegnanz.de/weblog/htmlcssjs-kickstart
+
+Implementation to Compass as part of Survival Kit by Mario "Kuroir" Ricalde.
+
+Notes:
+
+  Not implementing Non-semantic helper classes. Use Compass builts-in.
+\ No newline at end of file
diff --git a/app/assets/stylesheets/vendor/boilerplate-1.0/_reset.scss b/app/assets/stylesheets/vendor/boilerplate-1.0/_reset.scss
new file mode 100644
index 0000000..efd1ac6
--- /dev/null
+++ b/app/assets/stylesheets/vendor/boilerplate-1.0/_reset.scss
@@ -0,0 +1,37 @@
+// html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
+// v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
+// html5doctor.com/html-5-reset-stylesheet/
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video{
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+blockquote, q { quotes: none; }
+
+blockquote:before, blockquote:after,
+q:before, q:after { content: ""; content: none; }
+
+del { text-decoration: line-through; }
+
+abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
+
+table { border-collapse: collapse; border-spacing: 0; }
+
+input, select { vertical-align: middle; }
diff --git a/app/assets/stylesheets/vendor/boilerplate-1.0/_styles.scss b/app/assets/stylesheets/vendor/boilerplate-1.0/_styles.scss
new file mode 100644
index 0000000..3852329
--- /dev/null
+++ b/app/assets/stylesheets/vendor/boilerplate-1.0/_styles.scss
@@ -0,0 +1,171 @@
+// HTML5 ✰ Boilerplate
+//
+// style.css contains a reset, font normalization and some base styles.
+//
+// Credit is left where credit is due.
+// Much inspiration was taken from these projects:
+// - yui.yahooapis.com/2.8.1/build/base/base.css
+// - camendesign.com/design/
+// - praegnanz.de/weblog/htmlcssjs-kickstart
+//
+// Modified to fit Survival ✚ Kit
+
+  html {
+    @include sk-html;
+    overflow-y: scroll;
+  }
+
+
+// Sections (body, section, nav, article, aside, h1..6, header, footer, address)
+// ----------------------------------------
+
+  body, select, input, textarea { color: $font-color; font-family: $base-font-family; }
+
+  body {  @include sk-body; font-size: $base-font-size; line-height: $base-line-height; }
+
+
+// Grouping Content (p, hr, pre, blockquote, ol, ul, li, dl, dt, dt, dd, figure, figcaption, div)
+// ----------------------------------------
+
+  p { margin: 0 0 1em 0;}
+  li { margin-bottom: (1em / 2);}
+
+  hr { border: 0; border-top: 1px solid $hr-color; display: block; height: 1px; margin: 1em 0; padding: 0; }
+
+  blockquote  { color: #666; font-style: italic; margin: 1.5em; }
+
+  // normalize monospace sizing
+  // meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/
+  // en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
+  pre {
+    // www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/
+    white-space: pre; white-space: pre-wrap; word-wrap: break-word;
+    padding: 15px;
+  }
+
+  pre, code, kbd, samp { font-family: monospace, sans-serif; }
+
+  // Lists
+  ul, ol { margin:$list-margin; padding:$list-padding;}
+
+  ol { list-style-type: decimal; }
+
+  // Remove margin from navigation lists.
+  nav ul,
+  nav li  { list-style:none; list-style-image: none; margin: 0; }
+
+  // Lists
+  dl      { margin: 0 0 1.5em 0; }
+
+  dl dt   { font-weight: bold; }
+
+  dd      { margin-left: 1.5em;}
+
+
+// Text Level Semantics (a, em, strong, small, s, cite, q, dfn, abbr, time, code, var, samp, kbd, sub, i, b, u, mark, ruby, rt, rp, bdi, bdo, span, br, wbr)
+// ----------------------------------------
+
+  // Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test
+  a {text-decoration:none;}
+
+  a:hover, a:active { outline: none; text-decoration:underline;}
+
+  a, a:active, a:visited { color: $link-color; }
+
+  a:hover { color: $link-hover-color; }
+
+  // Headers (h1, h2, etc) have no default font-size or margin; define those yourself
+  h1, h2, h3, h4, h5, h6 { @include sk-header-tags; }
+
+  // j.mp/webkit-tap-highlight-color
+  a:link { -webkit-tap-highlight-color: #FF5E99; }
+
+  small { font-size: 85%; }
+
+  strong, b, th, dfn { font-weight: bold; }
+
+  em, i { font-style:italic; }
+
+  mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
+
+  abbr,
+  acronym     { border-bottom: 1px dotted #666; }
+
+  address     { font-style: italic; margin: 0 0 1.5em; }
+
+  // Set sub, sup without affecting line-height: gist.github.com/413930
+  sub, sup { font-size: 75%; line-height: 0; position: relative; }
+
+  sup { top: -0.5em; }
+
+  sub { bottom: -0.25em; }
+
+
+// Embedded Content (img)
+// ----------------------------------------
+
+  // Bicubic resizing for non-native sized IMG:
+  // code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
+  .ie7 img { -ms-interpolation-mode: bicubic; }
+
+
+// Tabular Data (table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th)
+// ----------------------------------------
+
+  table       { margin-bottom: 1.4em; width:100%; }
+
+  th          { font-weight: bold; }
+
+  th,td,caption { padding: 4px 10px 4px 5px; text-align: left; }
+
+
+// Edits (ins, del)
+// ----------------------------------------
+
+  ins { background-color: #ff9; color: #000; text-decoration: none; }
+
+  del { color:#666; }
+
+
+// Forms
+// ----------------------------------------
+
+  select, input, textarea, button { font: 99% $base-font-family; outline:none;}
+
+  td { vertical-align: top; }
+
+  textarea { overflow: auto; }
+
+  // Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css
+  input[type="radio"] { vertical-align: text-bottom; }
+
+  input[type="checkbox"] { vertical-align: bottom; }
+
+  // Hand cursor on clickable input elements
+
+  label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
+
+  // Webkit browsers add a 2px margin outside the chrome of form elements
+  button, input, select, textarea { margin: 0; }
+
+
+  // required:valid and required:invalid moved to form.scss
+
+  // Make buttons play nice in IE:
+  // www.viget.com/inspire/styling-the-button-element-in-internet-explorer/
+  button { overflow: visible;  width: auto; }
+
+  @if in-compatibility-mode() {
+  .ie7 input[type="checkbox"] { vertical-align: baseline; }
+
+  .ie6 input { vertical-align: text-bottom; }
+
+  .ie6 legend, .ie7 legend { margin-left: -7px; }
+  }
+
+
+// Etc.
+// ----------------------------------------
+
+  ::-moz-selection{ background: $selected-background-color; color:$selected-font-color; text-shadow: none; }
+  ::selection { background:$selected-background-color; color:$selected-font-color; text-shadow: none; }
diff --git a/app/assets/stylesheets/vendor/boilerplate-2.0/README b/app/assets/stylesheets/vendor/boilerplate-2.0/README
new file mode 100644
index 0000000..c9cd066
--- /dev/null
+++ b/app/assets/stylesheets/vendor/boilerplate-2.0/README
@@ -0,0 +1,16 @@
+HTML5 ✰ Boilerplate 2.0 (7467f9c0417a0c1f9863e2d000aad73f34836ef2)
+
+style.css contains a reset, font normalization and some base styles.
+
+Credit is left where credit is due.
+Much inspiration was taken from these projects:
+- yui.yahooapis.com/2.8.1/build/base/base.css
+- camendesign.com/design/
+- praegnanz.de/weblog/htmlcssjs-kickstart
+
+Implementation to Compass as part of Survival Kit by Mario "Kuroir" Ricalde.
+
+Notes:
+
+  - Not implementing Non-semantic helper classes. Use Compass builts-in.
+  - 1.0 and 2.0 are very similar. With 2.0 you save a couple of bytes.. maybe not worth the change? 
+\ No newline at end of file
diff --git a/app/assets/stylesheets/vendor/boilerplate-2.0/_styles.scss b/app/assets/stylesheets/vendor/boilerplate-2.0/_styles.scss
new file mode 100644
index 0000000..6268a35
--- /dev/null
+++ b/app/assets/stylesheets/vendor/boilerplate-2.0/_styles.scss
@@ -0,0 +1,209 @@
+// 
+// HTML5 ✰ Boilerplate
+// 
+// What follows is the result of much research on cross-browser styling. 
+// Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+// Kroc Camen, and the H5BP dev community and team.
+// 
+// Detailed information about this CSS: h5bp.com/css
+// 
+// ==|== normalize ==========================================================
+// 
+
+
+// ==========================================================================
+// HTML5 display definitions
+// ==========================================================================
+
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
+audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
+audio:not([controls]) { display: none; }
+[hidden] { display: none; }
+
+// ==========================================================================
+// Base
+// ==========================================================================
+
+// 
+// 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
+// 2. Force vertical scrollbar in non-IE
+// 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
+// 
+
+html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+
+body { margin: 0; font-size: $base-font-size; line-height: $base-line-height; }
+
+body, button, input, select, textarea { font-family: $base-font-family; color: $font-color; }
+
+// 
+// Remove text-shadow in selection highlight: h5bp.com/i
+// These selection declarations have to be separate
+// Also: hot pink! (or customize the background color to match your design)
+// 
+
+::-moz-selection { background: $selected-background-color; color: $selected-font-color; text-shadow: none; }
+::selection { background: $selected-background-color; color: $selected-font-color; text-shadow: none; }
+
+
+// ==========================================================================
+// Links
+// ==========================================================================
+
+a { color: $link-color; }
+a:visited { color: $link-visited-color; }
+a:hover { color: $link-hover-color; }
+a:focus { outline: thin dotted; }
+
+/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
+a:hover, a:active { outline: 0; }
+
+
+// ==========================================================================
+// Typography
+// ==========================================================================
+
+abbr[title] { border-bottom: 1px dotted; }
+
+b, strong { font-weight: bold; }
+
+i, em { font-style:italic;}
+
+blockquote { margin: 1em 40px; }
+
+dfn { font-style: italic; }
+
+hr { display: block; height: 1px; border: 0; border-top: 1px solid $hr-color; margin: 1em 0; padding: 0; }
+
+ins { background: #ff9; color: #000; text-decoration: none; }
+
+mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
+
+// Redeclare monospace font family: h5bp.com/j
+pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
+
+// Improve readability of pre-formatted text in all browsers
+pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
+
+q { quotes: none; }
+q:before, q:after { content: ""; content: none; }
+
+small { font-size: 85%; }
+
+// Position subscript and superscript content without affecting line-height: h5bp.com/k
+sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+sup { top: -0.5em; }
+sub { bottom: -0.25em; }
+
+
+// ==========================================================================
+// Lists
+// ==========================================================================
+dl {margin:$list-margin;}
+ul, ol { margin: $list-margin; padding: $list-padding; }
+dd { margin: 0 0 0 40px; }
+nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
+
+
+// ==========================================================================
+// Embedded content
+// ==========================================================================
+
+// 
+// 1. Improve image quality when scaled in IE7: h5bp.com/d
+// 2. Remove the gap between images and borders on image containers: h5bp.com/e 
+// 
+
+img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
+
+// 
+// Correct overflow not hidden in IE9 
+// 
+
+svg:not(:root) { overflow: hidden; }
+
+
+// ==========================================================================
+// Figures
+// ==========================================================================
+
+figure { margin: 0; }
+
+
+// ==========================================================================
+// Forms
+// ==========================================================================
+
+form { margin: 0; }
+fieldset { border: 0; margin: 0; padding: 0; }
+
+// Indicate that 'label' will shift focus to the associated form element
+label { cursor: pointer; }
+
+// 
+// 1. Correct color not inheriting in IE6/7/8/9 
+// 2. Correct alignment displayed oddly in IE6/7 
+// 
+
+legend { border: 0; *margin-left: -7px; padding: 0; }
+
+// 
+// 1. Correct font-size not inheriting in all browsers
+// 2. Remove margins in FF3/4 S5 Chrome
+// 3. Define consistent vertical alignment display in all browsers
+// 
+
+button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
+
+// 
+// 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
+// 2. Correct inner spacing displayed oddly in IE6/7
+// 
+
+button, input { line-height: normal; *overflow: visible; }
+
+// 
+// Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
+// 
+
+table button, table input { *overflow: auto; }
+
+// 
+// 1. Display hand cursor for clickable form elements
+// 2. Allow styling of clickable form elements in iOS
+// 
+
+button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
+
+// 
+// Consistent box sizing and appearance
+// 
+
+input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
+input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
+input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
+
+// 
+// Remove inner padding and border in FF3/4: h5bp.com/l 
+// 
+
+button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
+
+// 
+// 1. Remove default vertical scrollbar in IE6/7/8/9 
+// 2. Allow only vertical resizing
+// 
+
+textarea { overflow: auto; vertical-align: top; resize: vertical; }
+
+// Colors for form validity
+input:valid, textarea:valid {  }
+input:invalid, textarea:invalid { background-color: #f0dddd; }
+
+
+// ==========================================================================
+// Tables
+// ==========================================================================
+
+table { border-collapse: collapse; border-spacing: 0; }
+td { vertical-align: top; }
+\ No newline at end of file
diff --git a/app/assets/stylesheets/vendor/easy-slider/_numeric.scss b/app/assets/stylesheets/vendor/easy-slider/_numeric.scss
new file mode 100644
index 0000000..db61e78
--- /dev/null
+++ b/app/assets/stylesheets/vendor/easy-slider/_numeric.scss
@@ -0,0 +1,44 @@
+// 
+// @TODO: Add docs to easy-slider-numeric!
+//
+@mixin easy-slider-numeric($width, $height, $selector:'#slider') {
+  #{$selector} {
+    & ul, & li {
+      margin:0;
+      padding:0;
+      list-style:none;
+      }
+    & li { 
+    	width:$width;
+    	height:$height;
+    	overflow:hidden; 
+    }
+  }
+  @include _numeric-controls();
+}
+
+// You can override this function to alter the appearance of the numeric controls.
+@mixin _numeric-controls() {
+  #controls{
+  	margin:10px 0;
+  	line-height:28px;
+  	list-style:none;
+  	text-align:right;
+  	li {
+  	  @include inline-block;
+    	margin:0 0 0 10px;
+    }
+    .current a {
+			background:#FFFFFF;
+			color:#C80111;
+			@include box-shadow(0px 0px 3px #B2B2B2);
+			padding:6px 11px; // Simulate "hover"
+    }
+    a {
+      padding:5px 10px;
+      background:#F5F5F5;
+  		border: 1px solid #AEAEAE;
+  		color: #7F7F7F;
+    }
+  }
+}
+\ No newline at end of file
diff --git a/app/assets/stylesheets/vendor/facebox/_facebox.scss b/app/assets/stylesheets/vendor/facebox/_facebox.scss
new file mode 100644
index 0000000..53e612d
--- /dev/null
+++ b/app/assets/stylesheets/vendor/facebox/_facebox.scss
@@ -0,0 +1,85 @@
+$facebox-overlay: #000 !default;
+#facebox {
+  left: 0;
+  position: fixed;
+  text-align: left;
+  top: 0;
+  z-index: 100;
+}
+
+
+#facebox .popup{
+  border:9px solid rgba(0, 157, 214, 0.8);
+  border-radius:5px;
+  -moz-border-radius:5px;
+  -webkit-border-radius:5px;
+  box-shadow:0 0 18px rgba(0,0,0,0.4);
+  -moz-box-shadow:0 0 18px rgba(0,0,0,0.4);
+  -webkit-box-shadow:0 0 18px rgba(0,0,0,0.4);
+  position:relative;
+}
+
+#facebox .content {
+  background: #fff;
+  border-radius:4px;
+  -moz-border-radius:4px;
+  -webkit-border-radius:4px;
+  display:table;
+  min-width: 370px;
+  padding: 10px;
+}
+
+#facebox .content > p:first-child{
+  margin-top:0;
+}
+#facebox .content > p:last-child{
+  margin-bottom:0;
+}
+
+#facebox .close{
+  padding:2px;
+  position:absolute;
+  right:5px;
+  top:5px;
+  z-index:101;
+}
+#facebox .close img{
+  opacity:0.3;
+}
+#facebox .close:hover img{
+  opacity:1.0;
+}
+
+#facebox .loading {
+  text-align: center;
+}
+
+#facebox .image {
+  text-align: center;
+}
+
+#facebox img {
+  border: 0;
+  margin: 0;
+}
+
+#facebox_overlay {
+  height:100%;
+  left: 0px;
+  position: fixed;
+  top: 0px;
+  width:100%;
+}
+
+.facebox_hide {
+  z-index:-100;
+}
+
+.facebox_overlayBG {
+  background-color: $facebox-overlay;
+  z-index: 99;
+}
+
+#facebox h1{
+  margin: 0 0 10px 0;
+}
diff --git a/app/assets/stylesheets/vendor/fancy-box/README b/app/assets/stylesheets/vendor/fancy-box/README
new file mode 100644
index 0000000..70212dd
--- /dev/null
+++ b/app/assets/stylesheets/vendor/fancy-box/README
@@ -0,0 +1,4 @@
+Fancybox 1.3.4 (2010/11/11)
+Licensed under both MIT and GPL licenses
+
+http://fancybox.net/
+\ No newline at end of file
diff --git a/app/assets/stylesheets/vendor/fancy-box/_fancy-box.scss b/app/assets/stylesheets/vendor/fancy-box/_fancy-box.scss
new file mode 100755
index 0000000..7ec2644
--- /dev/null
+++ b/app/assets/stylesheets/vendor/fancy-box/_fancy-box.scss
@@ -0,0 +1,336 @@
+// 
+// FancyBox - jQuery Plugin
+// Simple and fancy lightbox alternative
+// 
+// Examples and documentation at: http://fancybox.net
+// 
+// Copyright (c) 2008 - 2010 Janis Skarnelis
+// That said, it is hardly a one-person project. Many people have submitted bugs, code, and offered their advice freely. Their support is greatly appreciated.
+// 
+// Version: 1.3.4 (11/11/2010)
+// Requires: jQuery v1.3+
+// 
+// Dual licensed under the MIT and GPL licenses:
+//   http://www.opensource.org/licenses/mit-license.php
+//   http://www.gnu.org/licenses/gpl.html
+// 
+
+#fancybox-loading {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	width: 40px;
+	height: 40px;
+	margin-top: -20px;
+	margin-left: -20px;
+	cursor: pointer;
+	overflow: hidden;
+	z-index: 1104;
+	display: none;
+}
+
+#fancybox-loading div {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 40px;
+	height: 480px;
+	background-image: image-url('vendor/fancy-box/fancybox.png');
+}
+
+#fancybox-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	z-index: 1100;
+	display: none;
+}
+
+#fancybox-tmp {
+	padding: 0;
+	margin: 0;
+	border: 0;
+	overflow: auto;
+	display: none;
+}
+
+#fancybox-wrap {
+	position: absolute;
+	top: 0;
+	left: 0;
+	padding: 20px;
+	z-index: 1101;
+	outline: none;
+	display: none;
+}
+
+#fancybox-outer {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	background: #fff;
+}
+
+#fancybox-content {
+	width: 0;
+	height: 0;
+	padding: 0;
+	outline: none;
+	position: relative;
+	overflow: hidden;
+	z-index: 1102;
+	border: 0px solid #fff;
+}
+
+#fancybox-hide-sel-frame {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: transparent;
+	z-index: 1101;
+}
+
+#fancybox-close {
+	position: absolute;
+	top: -15px;
+	right: -15px;
+	width: 30px;
+	height: 30px;
+	background: transparent image-url('vendor/fancy-box/fancybox.png') -40px 0px;
+	cursor: pointer;
+	z-index: 1103;
+	display: none;
+}
+
+#fancybox-error {
+	color: #444;
+	font: normal 12px/20px Arial;
+	padding: 14px;
+	margin: 0;
+}
+
+#fancybox-img {
+	width: 100%;
+	height: 100%;
+	padding: 0;
+	margin: 0;
+	border: none;
+	outline: none;
+	line-height: 0;
+	vertical-align: top;
+}
+
+#fancybox-frame {
+	width: 100%;
+	height: 100%;
+	border: none;
+	display: block;
+}
+
+#fancybox-left, #fancybox-right {
+	position: absolute;
+	bottom: 0px;
+	height: 100%;
+	width: 35%;
+	cursor: pointer;
+	outline: none;
+	background: transparent image-url('vendor/fancy-box/blank.gif');
+	z-index: 1102;
+	display: none;
+}
+
+#fancybox-left {
+	left: 0px;
+}
+
+#fancybox-right {
+	right: 0px;
+}
+
+#fancybox-left-ico, #fancybox-right-ico {
+	position: absolute;
+	top: 50%;
+	left: -9999px;
+	width: 30px;
+	height: 30px;
+	margin-top: -15px;
+	cursor: pointer;
+	z-index: 1102;
+	display: block;
+}
+
+#fancybox-left-ico {
+	background-image: image-url('vendor/fancy-box/fancybox.png');
+	background-position: -40px -30px;
+}
+
+#fancybox-right-ico {
+	background-image: image-url('vendor/fancy-box/fancybox.png');
+	background-position: -40px -60px;
+}
+
+#fancybox-left:hover, #fancybox-right:hover {
+	visibility: visible; /* IE6 */
+}
+
+#fancybox-left:hover span {
+	left: 20px;
+}
+
+#fancybox-right:hover span {
+	left: auto;
+	right: 20px;
+}
+
+.fancybox-bg {
+	position: absolute;
+	padding: 0;
+	margin: 0;
+	border: 0;
+	width: 20px;
+	height: 20px;
+	z-index: 1001;
+}
+
+#fancybox-bg-n {
+	top: -20px;
+	left: 0;
+	width: 100%;
+	background-image: image-url('vendor/fancy-box/fancybox-x.png');
+}
+
+#fancybox-bg-ne {
+	top: -20px;
+	right: -20px;
+	background-image: image-url('vendor/fancy-box/fancybox.png');
+	background-position: -40px -162px;
+}
+
+#fancybox-bg-e {
+	top: 0;
+	right: -20px;
+	height: 100%;
+	background-image: image-url('vendor/fancy-box/fancybox-y.png');
+	background-position: -20px 0px;
+}
+
+#fancybox-bg-se {
+	bottom: -20px;
+	right: -20px;
+	background-image: image-url('vendor/fancy-box/fancybox.png');
+	background-position: -40px -182px; 
+}
+
+#fancybox-bg-s {
+	bottom: -20px;
+	left: 0;
+	width: 100%;
+	background-image: image-url('vendor/fancy-box/fancybox-x.png');
+	background-position: 0px -20px;
+}
+
+#fancybox-bg-sw {
+	bottom: -20px;
+	left: -20px;
+	background-image: image-url('vendor/fancy-box/fancybox.png');
+	background-position: -40px -142px;
+}
+
+#fancybox-bg-w {
+	top: 0;
+	left: -20px;
+	height: 100%;
+	background-image: image-url('vendor/fancy-box/fancybox-y.png');
+}
+
+#fancybox-bg-nw {
+	top: -20px;
+	left: -20px;
+	background-image: image-url('vendor/fancy-box/fancybox.png');
+	background-position: -40px -122px;
+}
+
+#fancybox-title {
+	font-family: Helvetica;
+	font-size: 12px;
+	z-index: 1102;
+}
+
+.fancybox-title-inside {
+	padding-bottom: 10px;
+	text-align: center;
+	color: #333;
+	background: #fff;
+	position: relative;
+}
+
+.fancybox-title-outside {
+	padding-top: 10px;
+	color: #fff;
+}
+
+.fancybox-title-over {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	color: #FFF;
+	text-align: left;
+}
+
+#fancybox-title-over {
+	padding: 10px;
+	background-image: image-url('vendor/fancy-box/fancy_title_over.png');
+	display: block;
+}
+
+.fancybox-title-float {
+	position: absolute;
+	left: 0;
+	bottom: -20px;
+	height: 32px;
+}
+
+#fancybox-title-float-wrap {
+	border: none;
+	border-collapse: collapse;
+	width: auto;
+}
+
+#fancybox-title-float-wrap td {
+	border: none;
+	white-space: nowrap;
+}
+
+#fancybox-title-float-left {
+	padding: 0 0 0 15px;
+	background: image-url('vendor/fancy-box/fancybox.png') -40px -90px no-repeat;
+}
+
+#fancybox-title-float-main {
+	color: #FFF;
+	line-height: 29px;
+	font-weight: bold;
+	padding: 0 0 3px 0;
+	background: image-url('vendor/fancy-box/fancybox-x.png') 0px -40px;
+}
+
+#fancybox-title-float-right {
+	padding: 0 0 0 15px;
+	background: image-url('vendor/fancy-box/fancybox.png') -55px -90px no-repeat;
+}
+
+/* IE6, IE7, IE8 */
+
+.fancybox-ie .fancybox-bg { background: transparent !important; }
+
+.fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_n.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_ne.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_e.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_se.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_s.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_sw.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_w.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_nw.png', sizingMethod='scale'); }
+\ No newline at end of file
diff --git a/app/assets/stylesheets/vendor/fancy-buttons/README b/app/assets/stylesheets/vendor/fancy-buttons/README
new file mode 100644
index 0000000..9ee6cc3
--- /dev/null
+++ b/app/assets/stylesheets/vendor/fancy-buttons/README
@@ -0,0 +1,3 @@
+ Fancy Buttons by imathis
+ https://github.com/imathis/fancy-buttons
+ License: MIT 
+\ No newline at end of file
diff --git a/app/assets/stylesheets/vendor/fancy-buttons/_fancy-buttons.scss b/app/assets/stylesheets/vendor/fancy-buttons/_fancy-buttons.scss
new file mode 100644
index 0000000..2e85caf
--- /dev/null
+++ b/app/assets/stylesheets/vendor/fancy-buttons/_fancy-buttons.scss
@@ -0,0 +1,195 @@
+@import "compass/css3/gradient";
+@import "compass/css3/border-radius";
+@import "compass/css3/opacity";
+@import "compass/css3/text-shadow";
+@import "compass/css3/box-shadow";
+@import "compass/css3/background-clip";
+@import "fancy-gradient";
+
+$fb-gradient-style: glossy !default;
+$fb-invert-on-click: 1 !default;
+$fb-font-size: 18px !default;
+$fb-color: #444444 !default;
+$fb-font-weight: bold !default;
+$fb-border-width: 1px !default;
+$fb-radius: 6px !default;
+$fb-light-text: white !default;
+$fb-dark-text: #222222 !default;
+$fb-gradient: 1 !default;
+$fb-image-path: image-url("vendor/fancy-buttons/button_bg.png") !default;
+$fb-allow-disabled: false !default;
+$fb-line-height: 1.2em !default;
+
+// Make a fancy button.
+@mixin fancy-button($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width) {
+  @include fancy-button-structure($font-size, $radius, $border-width);
+  @include fancy-button-colors($color);
+}
+
+// Style the button's colors, picking the most appropriate color set for the base color.
+@mixin fancy-button-colors($color: $fb-color, $hover: 0, $active: 0, $fb-allow-disabled: $fb-allow-disabled) {
+  @include fb-color($color, "default");
+  &:hover, &:focus {
+    @if $hover == 0 {
+      @include fb-color(darken($color, 3), "hover", $color); }
+    @else {
+      @include fb-color($hover, "hover"); } }
+  &:active {
+    @if $active == 0 {
+      @include fb-color(darken($color, 6), "active", $color);
+      @include box-shadow(darken($color, 15) 0 0.08em 0.2em 1px inset); }
+    @else {
+      @include fb-color($active, "active");
+      @include box-shadow(darken($active, 9) 0 0.08em 0.1em 1px inset); } }
+  @include box-shadow(rgba(white, lightness($color) / 100) 0 0 0.1em 1px inset);
+  @include background-clip(padding-box);
+  @if $fb-allow-disabled {
+    &.disabled, &[disabled] {
+      @include disable-fancy-button($color);
+    }
+  }
+}
+
+@mixin fancy-button-allow-disable($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width) {
+  $fb-disable-allowed: $fb-allow-disabled;
+  $fb-allow-disabled: true;
+  @include fancy-button-structure($font-size, $radius, $border-width);
+  @include fancy-button-colors-matte($color);
+  $fb-allow-disabled: $fb-disable-allowed;
+}
+
+@mixin fancy-button-matte($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width) {
+  @include fancy-button-structure($font-size, $radius, $border-width);
+  @include fancy-button-colors-matte($color); 
+}
+
+@mixin fancy-button-custom($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width) {
+  @include fancy-button-structure($font-size, $radius, $border-width);
+  @include fancy-button-colors-custom($color, $font-size, $radius, $border-width); 
+}
+
+@mixin fancy-button-colors-matte($color: $fb-color, $hover: 0, $active: 0) {
+  $fb-current-style: $fb-gradient-style;
+  $fb-gradient-style: matte;
+  @include fancy-button-colors($color, $hover, $active);
+  $fb-gradient-style: $fb-current-style; 
+}
+
+@mixin fancy-button-colors-custom($color: $fb-color, $hover: 0, $active: 0) {
+  $fb-current-style: $fb-gradient-style;
+  $fb-gradient-style: custom;
+  @include fancy-button-colors($color, $hover, $active);
+  $fb-gradient-style: $fb-current-style;
+}
+
+// Default state color settings
+@mixin fb-color($color, $state, $lumins: $color) {
+  $gradient-top: lighten($color, 15);
+  $gradient-bottom: darken($color, 6);
+  $border-color: darken($color, 8);
+  @if $fb-invert-on-click != 0 {
+    $border-color: darken($color, 15); }
+  @if saturation($color) > 0 {
+    $color: saturate($color, 40); }
+  @else if lightness($lumins) >= lightness(#aaaaaa) {
+    $color: lighten($color, 20); }
+  @include fb-state-colors($color, $gradient-top, $gradient-bottom, $border-color, $state, $lumins);
+}
+
+// Apply the button colors specified for the button state into which it is mixed.
+@mixin fb-state-colors($color, $gradient-top, $gradient-bottom, $border, $state, $lumins: $color) {
+  background-color: $color;
+  @if $fb-gradient != 0 {
+    @if $fb-gradient-style == "glossy" {
+      @if $state == "active" {
+        @include fancy-gradient-active($gradient-top, $gradient-bottom); }
+      @else {
+        @include fancy-gradient($gradient-top, $gradient-bottom); } }
+    @else if $fb-gradient-style == "matte" {
+      @if $state == "active" {
+        @include fancy-matte-gradient-active($gradient-top, $gradient-bottom); }
+      @else {
+        @include fancy-matte-gradient($gradient-top, $gradient-bottom); } }
+    @else if $fb-gradient-style == "custom" {
+      @if $state == "active" {
+        @include custom-fancy-gradient-active($gradient-top, $gradient-bottom); }
+      @else {
+        @include custom-fancy-gradient($gradient-top, $gradient-bottom); } } }
+  border: {
+    color: $border; };
+  $text-shadow-settings: unquote("0px 1px 1px");
+  @if $fb-invert-on-click != 0 and $state == "active" {
+    $text-shadow-settings: unquote("0px -1px -1px"); }
+  @if lightness($lumins) < lightness(#aaaaaa) {
+    text-shadow: darken($color, 25) $text-shadow-settings;
+    &, &:visited {
+      color: $fb-light-text; } }
+  @else {
+    text-shadow: lighten($color, 15) $text-shadow-settings;
+    &, &:visited {
+      color: $fb-dark-text; } }
+}
+
+@mixin fancy-button-text-colors($color, $hover: $color, $active: $color, $fb-allow-disabled: $fb-allow-disabled) {
+  &, &:visited {
+    color: $color; }
+  &:hover, &:focus {
+    color: $hover; }
+  &:active {
+    color: $active; }
+  @if $fb-allow-disabled {
+    &.disabled, &[disabled] {
+      color: $color; } }
+}
+
+// Layout the button's box
+@mixin fancy-button-structure($font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width, $line-height: $fb-line-height) {
+  @extend .fancy-button-reset-base-class;
+  @include fancy-button-size($font-size, $radius, $border-width, $line-height);
+}
+
+@mixin fancy-button-size($font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width, $line-height: $fb-line-height) {
+  // better padding for smaller buttons
+  $v-padding: 0.3em;
+  $h-padding: 1em;
+  @if $radius > 0 {
+    @include border-radius($radius); }
+  font-size: $font-size;
+  line-height: $line-height;
+  @include fancy-button-padding($v-padding, $h-padding, $border-width);
+}
+
+@mixin fancy-button-padding($v-padding, $h-padding, $border-width: $fb-border-width) {
+  padding: $v-padding $h-padding;
+  border-width: $border-width;
+}
+
+// Reset the button's important properties to make sure they behave correctly
+@mixin fb-reset($font-weight: $fb-font-weight) {
+  font-family: "Lucida Grande", Lucida, Arial, sans-serif;
+  background: #{$fb-image-path} repeat-x bottom left;
+  margin: 0;
+  width: auto;
+  overflow: visible;
+  display: inline-block;
+  cursor: pointer;
+  text-decoration: none;
+  border-style: solid;
+  font-weight: $font-weight;
+  &::-moz-focus-inner {
+    border: none;
+    padding: 0; }
+  &:focus {
+    outline: none; }
+}
+
+@mixin disable-fancy-button($color: $fb-color, $opacity: 0.7) {
+  @include fb-color($color, "default");
+  @include opacity($opacity);
+  @include box-shadow(none);
+  cursor: default !important;
+}
+
+.fancy-button-reset-base-class {
+  @include fb-reset;
+}
diff --git a/app/assets/stylesheets/vendor/fancy-buttons/_fancy-gradient.scss b/app/assets/stylesheets/vendor/fancy-buttons/_fancy-gradient.scss
new file mode 100644
index 0000000..da0baa9
--- /dev/null
+++ b/app/assets/stylesheets/vendor/fancy-buttons/_fancy-gradient.scss
@@ -0,0 +1,28 @@
+@mixin fancy-gradient($color1, $color2) {
+  $top_shine: lighten($color1, 18);
+  $bottom_glow: lighten($color2, 10);
+  $top_middle: $color1;
+  $middle: lighten($color2, 3);
+  $bottom_middle: $color2;
+  @include background-image(linear-gradient($top_shine, $top_middle 10%, $middle 50%, $bottom_middle 50%, $bottom_glow)); }
+
+@mixin fancy-gradient-active($color1, $color2) {
+  $top: lighten($color2, 6);
+  $bottom: lighten($color2, 14);
+  $top_middle: lighten($color2, 8);
+  $middle: lighten($color2, 4);
+  $bottom_middle: lighten($color2, 1);
+  @include background-image(linear-gradient($top, $top_middle 30%, $middle 50%, $bottom_middle 50%, $bottom)); }
+
+@mixin fancy-matte-gradient($color1, $color2) {
+  @include background-image(linear-gradient($color1, $color2)); }
+
+@mixin fancy-matte-gradient-active($color1, $color2) {
+  $top: lighten($color2, 5);
+  $bottom: lighten($color2, 15);
+  $middle: lighten($color2, 8);
+  @include background-image(linear-gradient($top, $middle 40%, $middle 85%, $bottom)); }
+
+/* incase an inverted custom gradient isn't specified */
+@mixin custom-fancy-gradient-active($color1, $color2) {
+  @include custom-fancy-gradient($color1, $color2); }
diff --git a/app/assets/stylesheets/vendor/survival-kit/_blog.scss b/app/assets/stylesheets/vendor/survival-kit/_blog.scss
new file mode 100644
index 0000000..5bec255
--- /dev/null
+++ b/app/assets/stylesheets/vendor/survival-kit/_blog.scss
@@ -0,0 +1,99 @@
+// Survival ✚ Kit
+
+// News Item
+// ----------------------------------------
+// <div class="blog-item">
+//	 <h6 class="date">14 de Julio 2010</h6>
+//	 <h3><a href="#">Lorem My Ipsum</a></h3>
+//	 <img src="image.jpg" width="194" height="146" alt="Blog Thumb"/>
+//	 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec ipsum magna. Duis porttitor, felis quis eleifend vehicula, mauris mi varius nibh, sit amet iaculis magna magna vitae justo...</p>
+//	 <p class="read-more"><a href="#">Nota Completa</a></p>
+// </div>
+@mixin news-item($date:#383838, $header:#1491EE) {
+		@include clearfix;
+		.date {
+			color:$date;
+			font:{
+				size:11px;
+				weight:normal;
+			};
+		}
+		img {
+			float:left;
+			padding: 4px 14px 50px 0;
+		}
+		p {
+			color:$link-color;
+		}
+		h3 {
+			margin-bottom:8px;
+			a{
+				color:$header;
+				font-size:15px;
+				font-weight:bold;
+				text-decoration:none;
+			}
+		}
+}
+
+
+// Pagination Styling
+// ----------------------------------------
+// <div class="pagination">
+//   <span class="previous_page disabled">← Previous</span>
+//   <em>1</em>
+//   <a rel="next" href="/?page=2">2</a>
+//   <a href="/?page=3">3</a>
+//   <a href="/?page=4">4</a>
+//   <a class="next_page" rel="next" href="/?page=2">Next →</a>
+// </div>
+
+// Notes for Later
+//$active-state: (border (1px solid red), height 300px, ..[infinite]);
+// Would Output:
+// border: 1px solid red; heigh: 300px;
+
+// Normal, hover, active, disabled
+//$pagination-font-weights: normal bold normal;
+//$pagination-font-colors: #7F7F7F yellow #FFFFFF #4C7DB5;
+//$pagination-borders:none (1px solid #4C7DB5) (none) (1px solid #D0D0D0);
+//$pagination-backgrounds: #F5F5F5 #FFFFFF none none;
+// color, background, border, weight
+//@include pagination(#7F7F7F yellow #FFFFFF #4C7DB5, #F5F5F5 #FFFFFF none none,  none (1px solid #4C7DB5) (none) (1px solid #D0D0D0), );
+
+@mixin pagination() {
+	text-align:center;
+	* {
+	  @include border-radius(4px);
+	}
+	.current {
+		font-weight:bold;
+		color:#0090BC;
+		font-size:14px;
+		padding: 3px 8px;
+		margin-right:2px;
+	}
+	.disabled {
+		color:#518CBC;
+		border:1px solid #518CBC;
+	}
+	a {
+		padding: 3px 8px;
+    @include gradient(#80DFFF, #3BBBE7);
+		@include box-shadow(0 2px 0px #EBEBEB);
+    text-decoration:none;
+		color: #FFF;
+		font-weight: bold;
+		border:1px solid #4DC6EF;
+    &:active {
+      @include box-shadow(0px 1px #96C5FA, inset 0px 1px #5D96CC);
+      background:#F6FAFC !important;
+    }
+		&:hover {
+			background:#D0F0FC;
+			border:1px solid #4DC6EF;
+			color:$link-hover-color;
+			@include box-shadow(none);
+		}
+	}
+}
+\ No newline at end of file
diff --git a/app/assets/stylesheets/vendor/survival-kit/_effects.scss b/app/assets/stylesheets/vendor/survival-kit/_effects.scss
new file mode 100644
index 0000000..488a83a
--- /dev/null
+++ b/app/assets/stylesheets/vendor/survival-kit/_effects.scss
@@ -0,0 +1,97 @@
+// Survival ✚ Kit
+
+// Add a Bendy shadow to a squar element.
+// @author Chris Eppstein
+@mixin bendy-shadow($width, $angle: 5deg, $color: rgba(#333, 0.5)) {
+  @include box-shadow(0 10px 5px -5px $color);
+  position: relative;
+  z-index: 1;
+  &:before, &:after {
+    @include box-shadow(0 10px 10px 1px $color);
+    bottom: 2px;
+    content: "";
+    height: 10px;
+    position: absolute;
+    width: $width / 2;
+    z-index: -1;
+  }
+  &:before {
+    @include rotate(-$angle);
+    left: 10px;
+  }
+  &:after {
+    @include rotate($angle);
+    right: 10px;
+  }
+}
+
+// Sexy button !
+@mixin shiny-button($light-color: #92CE2F, $dark-mix-color: #32D17C, $mix-percent: 40%) {
+  // Params
+  $bg-light:   $light-color;
+  $bg-dark: darken(mix($dark-mix-color, $bg-light, $mix-percent), 13%);
+
+  $border-inset-color: $bg-light;
+  $border-inside-light: lighten($border-inset-color, 13%);
+  $border-inside-dark: $border-inset-color;
+
+  $border-outside: darken($bg-dark, 9%);
+  $box-shadow:  rgba(35, 35, 35, 0.2);
+  $text-shadow: darken($bg-dark, 7%);
+
+  @extend .bradius-inner;
+  @include box-shadow(inset 1px 1px 0px $border-inside-light, inset -1px -1px 0px $border-inside-dark);
+  @include gradient($bg-light, $bg-dark);
+  @include text-shadow(2px 2px 1px $text-shadow);
+  border:1px solid $border-outside;
+  color:#FFF !important;
+
+  font-size:size(13px);
+  font-weight: bold;
+  padding: 9px 60px;
+  text-decoration: none;
+  text-decoration: none !important;
+  &:hover {
+    @include box-shadow(inset 0px 0px 1px $border-inside-light, 0px 2px 1px $box-shadow);
+    @include gradient(lighten($bg-light, 6%), lighten($bg-dark, 6%));
+  }
+  &:active {
+    @include box-shadow(inset 0px 2px 3px $bg-dark);
+    background: mix($bg-light, $bg-dark, 50%);
+  }
+  &.small {
+    font-size: 12px;
+    padding: 7px 22px;
+  }
+}
+
+//
+// @TODO: Add docs to shiny-button-colors!
+//
+@mixin shiny-button-colors($light-color: #92CE2F, $dark-mix-color: #32D17C, $mix-percent: 40%) {
+  // Params
+  $bg-light:   $light-color;
+  $bg-dark: darken(mix($dark-mix-color, $bg-light, $mix-percent), 13%);
+
+  $border-inset-color: $bg-light;
+  $border-inside-light: lighten($border-inset-color, 13%);
+  $border-inside-dark: $border-inset-color;
+
+  $border-outside: darken($bg-dark, 9%);
+  $box-shadow:  rgba(35, 35, 35, 0.2);
+  $text-shadow: darken($bg-dark, 7%);
+
+
+  @include box-shadow(inset 1px 1px 0px $border-inside-light, inset -1px -1px 0px $border-inside-dark);
+  @include gradient($bg-light, $bg-dark);
+  @include text-shadow(2px 2px 1px $text-shadow);
+  border:1px solid $border-outside;
+  &:hover {
+    @include box-shadow(inset 0px 0px 1px $border-inside-light, 0px 2px 1px $box-shadow);
+    @include gradient(lighten($bg-light, 6%), lighten($bg-dark, 6%));
+  }
+  &:active {
+    @include box-shadow(inset 0px 2px 3px $bg-dark);
+    background: mix($bg-light, $bg-dark, 50%);
+  }
+}
+\ No newline at end of file
diff --git a/app/assets/stylesheets/vendor/survival-kit/_forms.scss b/app/assets/stylesheets/vendor/survival-kit/_forms.scss
new file mode 100644
index 0000000..7e82b87
--- /dev/null
+++ b/app/assets/stylesheets/vendor/survival-kit/_forms.scss
@@ -0,0 +1,313 @@
+// Survival ✚ Kit
+
+// A simple search box, generic.
+// If $width contains a second argument, it won't output the width to the parent element, allowing you to use box-size.
+//
+// <form action="#" accept-charset="utf-8" class="search-box">
+//   <input type="text" class="text" value="Search..." name="q" />
+//   <input type="submit" class="button" value="" />
+// </form>
+@mixin search-box-simple {
+  // Preferences
+  $width: 210px;
+  $height: 27px;
+  $font-size: 12px;
+
+  background: #FFF;
+  overflow: hidden;
+  height: $height;
+  width: $width;
+
+  // Style
+  border:1px solid #4BC5ED;
+  margin-top: -3px;
+  @extend .bradius-inner;
+  @include gradient(#FFF, #F5F5F5);
+
+  &.active {
+    @include box-shadow(0px 1px 2px transparentize(#000, 0.8));
+    background:#FFF;
+  }
+
+  // Calculations
+  $button-width: 27px;
+  $input-width: $width - $button-width - 2px;
+
+  input, button {
+    background:transparent;
+    border: 0;
+    font-size: $font-size;
+    outline: none;
+  }
+  .text {
+    @include size($input-width, $height, 7px 10px);
+    color: #777;
+    float: left;
+    line-height: $height - (7px * 2);
+  }
+  button, .search {
+    cursor: pointer;
+    display: block;
+    float:right;
+    height: $height;
+    padding:0;
+    width: $button-width;
+  }
+  .search {
+    background:transparent image-url('redesign/vendor/survival-kit/search-13x16.png') center center no-repeat;
+  }
+}
+
+// Search Box Simple dimention override
+@mixin search-box-simple-size($width, $height, $button-width: 27px) {
+  $input-width: $width - $button-width - 2px;
+  height: $height;
+  width: $width;
+  .text {
+    @include size($input-width, $height, 7px 10px);
+    line-height: $height - (7px * 2);
+  }
+  button, .search {
+    height: $height;
+    width: $button-width;
+  }
+}
+
+
+// Inputs.
+$input-shadow           : inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.2) !default;
+$input-hover-color      : #7DBEF1 !default;
+$input-hover-shadow     : 0 0 6px #7DBEF1 !default;
+
+//
+// Adds the Input state effects
+//
+@mixin input-effects() {
+  @if $input-shadow { @include box-shadow($input-shadow); }
+  border:1px solid #CCCCCC;
+  outline: 0;
+  &:focus {
+    @if $input-hover-shadow {
+      @include box-shadow($input-hover-shadow);
+    }
+    border:1px solid $input-hover-color;
+  }
+}
+
+//
+// Forms Styles (Survival Kit)
+// This styles are meant to be used with Simple_Forms (Rails)
+// Usage:
+// simple-forms(default, option-1 option2)
+// Options:
+//    block-hints : display the hints right after the inut field.
+@mixin simple-forms($selector : "simple_form", $opts:false) {
+  // Setup
+  $size-modifier          : 0px;
+  $input-width            : 300px;
+  $input-font-size        : $base-font-size + $size-modifier;
+  $vertical-spacing       : 7px;
+  $horizontal-spacing     : 10px;
+  $label-width            :148px;
+
+  // 7px                  = base padding at 0 size modifier.
+  $vertical-field-padding : floor((7px + $size-modifier) + ($size-modifier / 4.4) * 2);
+  $horizontal-field-padding: 6px;
+
+  // Colors.
+  $hint-color             : #6E6E6E;
+
+  @if $selector == auto or $selector == default {
+    $selector: 'simple_form';
+  }
+
+  .hidden { display: none; }
+  // Force $opts into a list goddamnit.
+  $opts: join($opts, herp derp);
+
+  .#{$selector} {
+    @include debug;
+    .hint {
+      @include debug(green);
+      display:inline-block;
+      padding:$vertical-field-padding 0 $vertical-field-padding ($label-width + $horizontal-spacing);
+    }
+
+    // Fix a issue with the spacing.
+    input.date {
+      label {
+        width: 145px !important;
+      }
+    }
+
+
+    label {
+      @include debug(green);
+      vertical-align:middle;
+      width:$label-width; // double line labels.
+      display:inline-block;  // works with already inline displayed items.
+      margin:0 $horizontal-spacing 0 0;
+      padding: $vertical-field-padding 0;
+      line-height:$input-font-size + ($input-font-size * 0.26);
+      text-align: right;
+      abbr {
+        @include debug(yellow);
+        @if index($opts, no-stars) {
+          display:none;
+        } @else {
+          color:#E62500;
+          float: right;
+          margin-left: $horizontal-spacing;
+        }
+      }
+      &.boolean, &.collection_radio_buttons { padding:$horizontal-spacing/2; width: auto;}
+    }
+
+    .ext-sfr {
+      @include debug(yellow);
+      display: inline-block;
+      vertical-align: middle;
+      width: $label-width;
+    }
+
+    .input {
+      @include debug(blue);
+      padding:$vertical-spacing 0;
+      .hint {
+        @extend .ext-sfr;
+        color: #8A8A8A;
+        display: block;
+        font-size: size(11px);
+        padding: 2px 0 0 ($label-width + $horizontal-spacing);
+        width: $input-width + ($horizontal-field-padding * 2) + $horizontal-spacing;
+      }
+      &.boolean {
+        padding: 2px 0 0 ($label-width + $horizontal-spacing);
+      }
+    }
+
+    select {
+      border:1px solid #CCCCCC;
+      outline:none;
+      // floor(Font Size * Line Height) + (Vertical Input Padding * 2) + 1px)
+      $calc: floor(($input-font-size * $base-line-height ) + ($vertical-field-padding * 2)) + (1px);
+      height: $calc + 1px;
+      padding:(6px + $size-modifier) * $base-line-height ;
+      &:focus {
+        border:1px solid $input-hover-color;
+      }
+    }
+
+    // Needs to be nested so it doesn't collide with date selects.
+    .select select, .country select {
+      width:$input-width + ($horizontal-field-padding * 2);
+    }
+    textarea, input[type=text], input[type=password], input[type=email] {
+      font-size:$input-font-size;
+      padding: $vertical-field-padding $horizontal-field-padding;
+      vertical-align:top;
+      width:$input-width;
+      // Input Effects
+      @include input-effects;
+    }
+
+    textarea {
+      height:80px;
+      max-width:$input-width;
+    }
+
+    input {
+      &.check_boxes, &.radio, &.boolean {
+        vertical-align:middle;
+      }
+    }
+
+    .submit, .padded {
+      padding-left: $label-width + $horizontal-spacing;
+    }
+
+    .form-actions {
+      background: #F7F7F7;
+      border-top: 1px solid #DDD;
+      padding: 17px 0px 18px $label-width + $horizontal-spacing;
+    }
+
+    // Simple Form Button for the forms.
+    .button {
+      @extend .sk-button;
+    }
+
+
+    // Errors @todo: this should be in its own section.
+    span.error, .error {
+      @extend .ext-sfr;
+      color: #D65C5C;
+      font-size: 12px;
+      margin-left: 10px;
+    }
+
+    #error_explanation {
+      @include box-shadow(#D4D4D4 0 0 10px);
+      background: #FFEBD6;
+      border: 1px solid #FFB36C;
+      color:#895334;
+      margin:$vertical-spacing * 4 0;
+      padding: 10px 14px;
+      h2 {
+        @include header-size(18px);
+        color:#AE4910;
+        margin-top:0;
+      }
+    }
+
+
+      // Colors for form validity
+    input:valid, textarea:valid   {}
+
+    input:invalid, textarea:invalid {
+      $error-color: #FF6161;
+      box-shadow:$input-shadow, inset -7px 0px 0px lighten($error-color, 15%) !important;
+      &:focus {
+        @if $input-hover-shadow {
+          @include box-shadow($input-hover-shadow, inset -7px 0px 0px $error-color !important );
+        }
+      }
+    }
+  }
+
+  // Rails 3 wraps errors in Divs
+  .field_with_errors {
+    display:inline;
+  }
+
+  // Make this compatible when you have no javascript loaded!
+  @if not index($opts, no-browser-support) {
+    .ie7 {
+      select { margin-top:15px;}
+    }
+  }
+}
+
+// Allows you to have different widths for different layouts.
+@mixin simple-form-width($width:false, $label-width:false) {
+  $horizontal-field-padding : 6px;
+  $horizontal-spacing       : 3px;
+  $input-width              : $width;
+
+  @if $width {
+    textarea, input[type=text], input[type=password] {
+      max-width: $width;
+      width:$width;
+    }
+
+    .select select, .country select {
+      width:$input-width + ($horizontal-field-padding * 2);
+    }
+  }
+
+  @if $label-width {
+    .input .hint {
+      width:$label-width;
+    }
+  }
+}
+\ No newline at end of file
diff --git a/app/assets/stylesheets/vendor/survival-kit/_headers.scss b/app/assets/stylesheets/vendor/survival-kit/_headers.scss
new file mode 100644
index 0000000..8b99808
--- /dev/null
+++ b/app/assets/stylesheets/vendor/survival-kit/_headers.scss
@@ -0,0 +1,36 @@
+// Survival ✚ Kit
+
+// Sets the font size specified in pixels using percents so that the base
+// font size changes and 1em has the correct value. When nesting font size
+// declarations, within the DOM tree, the base_font_size must be the parent's
+// effective font-size in pixels.
+// Usage Examples:
+//   .big
+//     +font-size(16px)
+//   .bigger
+//     +font-size(18px)
+//   .big .bigger
+//     +font-size(18px, 16px)
+//
+// For more information see the table found at http://developer.yahoo.com/yui/3/cssfonts/#fontsize
+// From: compass-html5-boilerplate gem.
+
+@function size($size, $base-font-size: $base-font-size) {
+  @return ceil(percentage($size / $base-font-size));
+}
+
+
+// Calculate margin and line height according to the given size.
+@mixin header-size($size) {
+  font-size: size($size);
+}
+
+// Calculate the Header based on the H1 Max size.
+@mixin htags-sizes($max) {
+  $per: $max * 0.10;
+  @for $i from 1 through 6 {
+    h#{$i} {
+      @include header-size($max - ($per * $i) );
+    }
+  }
+}
+\ No newline at end of file
diff --git a/app/assets/stylesheets/vendor/survival-kit/_images.scss b/app/assets/stylesheets/vendor/survival-kit/_images.scss
new file mode 100644
index 0000000..36e67cd
--- /dev/null
+++ b/app/assets/stylesheets/vendor/survival-kit/_images.scss
@@ -0,0 +1,121 @@
+// Survival ✚ Kit
+
+@import "compass/typography/text/replacement";
+
+// Replace an A tag with an a background-image.
+// @var $image string path to the image
+// @var $inline boolean embed via data.
+@mixin image-link($image, $inline:false) {
+  @include image-background($image, $inline);
+  cursor:pointer;
+  @extend .ext-hide-text;
+}
+
+// Replace an A tag with an a background-image sprite. You need to provide it with
+// the dimentions of the image and the x-pos/y-pos
+//
+// @var $image string path to the image, inherit is useful.
+// @var $height width
+// @var $height pixels
+// @var $x-pos pixels
+// @var $y-pos pixels
+// @var $inline boolean embed via data.
+@mixin image-sprite-link($image, $width, $height, $x-pos, $y-pos, $inline: false) {
+  @include sk-background(transparent, $image, $x-pos, $y-pos, no-repeat, $inline);
+  width:$width;
+  height:$height;
+  @extend .ext-hide-text;
+}
+
+// Replace a Header>a tag with a background image. Made specifically for logos.
+// @var $image string path to the image
+// @var $inline boolean embed via data.
+@mixin logo($image, $inline:false) {
+  @include no-mp;
+  width: image-width($image);
+  height: image-height($image);
+  a {
+    @include image-link($image, $inline);
+    &:hover { opacity: 0.7;}
+  }
+}
+
+// Area for a header link, meant to be used when it inherits a background image.
+// This should be invoked on the H1-6 Tag and not in the link, the needed structure is:2
+//   <h1><a href=""></a></h1>
+@mixin logo-area($width, $height, $debugging: false) {
+  @include no-mp;
+  width:$width;
+  height:$height;
+  a {
+    @include link-area($width, $height, $debugging);
+  }
+}
+
+// An area which should be clickable. It's meant to be a low level mixin, you should
+// use the alternatuves.
+// - debugging enables a background color to know the position.
+@mixin link-area($width, $height, $debugging: false) {
+  width:$width;
+  height:$height;
+  @if $debugging {
+    @include debug($debugging);
+  }
+  @extend .ext-hide-text;
+}
+
+// Mixin for quickly replacing images for any given element.
+// @var $image string path to the image
+// @var $inline boolean embed via data.
+@mixin image-replace($image, $inline:false) {
+  @include image-background($image, $inline);
+  @extend .ext-hide-text;
+}
+@mixin image-replace-url($image, $width, $height) {
+  background:transparent url($image) left top no-repeat;
+  @include link-area($width, $height);
+}
+
+// Just adds the image as a background and sets the width/height accordingly.
+// @var $image string path to the image
+// @var $inline boolean embed via data.
+@mixin image-background($image, $inline:false) {
+  @include sk-background(transparent, $image, no-repeat, top, left, $inline);
+  width: image-width($image);
+  height: image-height($image);
+}
+
+// Add a background by passing the exact same parameters as a normal one. With
+// one more parameter $inline. Which will use inline-image and add backward
+// compatibility to IE7 via *background.
+//
+// @var $color
+// @var $image string can be a path to an image or inherit (will insert tags separately)
+// @var $horizontal
+// @var $vertical
+// @var $repeat
+// @var $inline
+@mixin sk-background($color, $image, $horizontal, $vertical, $repeat, $inline: false) {
+  @if $image == inherit {
+    background-color: $color;
+    background-repeat: $repeat;
+    background-position: $horizontal $vertical;
+  } @else {
+    @if $inline == true {
+      background  : $color inline-image($image) $horizontal $vertical $repeat;
+      *background : $color image-url($image) $horizontal $vertical $repeat;
+    } @else {
+      background: $color image-url($image) $horizontal $vertical $repeat;
+    }
+  }
+}
+
+
+// Common styles needed by our Image Mixins.
+// Depends on Compass.
+.ext-hide-text {
+  @include hide-text;
+  display:block;
+  direction: ltr;
+  outline:none;
+}
diff --git a/app/assets/stylesheets/vendor/survival-kit/_lists.scss b/app/assets/stylesheets/vendor/survival-kit/_lists.scss
new file mode 100644
index 0000000..ea9670e
--- /dev/null
+++ b/app/assets/stylesheets/vendor/survival-kit/_lists.scss
@@ -0,0 +1,37 @@
+// Survival ✚ Kit
+
+// Add docs to float-list!
+@mixin float-list($side:left) {
+  @include no-mp;
+  list-style-type: none;
+  li { float:$side; }
+}
+
+$tc-begin-color    : #000 !default;
+$tc-end-color      : lighten(#646464, 30) !default;
+$tc-base-font-size : 11px !default;
+$tc-max-font-size  : 20px !default;
+$tc-how-many       : 10 !default;
+@mixin tag-cloud($tc-begin-color, $tc-end-color, $tc-base-font-size, $tc-max-font-size, $tc-how-many) {
+  $font-calculations : $tc-base-font-size;
+  
+  li {
+    display:inline;
+    background:none;
+    padding:0 2px;
+  }
+  
+  a {
+    // Stops words from breaking.
+    display:inline-block;
+  }
+
+  @for $i from 1 through $tc-how-many {
+    // The last item gets the max-font size.
+    $font-calculations: round($font-calculations + (($tc-max-font-size - $tc-base-font-size) / $tc-how-many));
+    a.tag-#{$i} {
+      font-size:$font-calculations;
+      color: mix($tc-end-color, $tc-begin-color, ( $i * (100 / $tc-how-many) ));
+    }
+  }
+}
diff --git a/app/assets/stylesheets/vendor/survival-kit/_loader.scss b/app/assets/stylesheets/vendor/survival-kit/_loader.scss
new file mode 100644
index 0000000..c09a018
--- /dev/null
+++ b/app/assets/stylesheets/vendor/survival-kit/_loader.scss
@@ -0,0 +1,11 @@
+// Survival ✚ Kit
+
+// Load all the Libraries.
+@import "blog";
+@import "forms";
+@import "images";
+@import "lists";
+@import "navigation";
+@import "tools";
+@import "headers";
+@import "effects";
diff --git a/app/assets/stylesheets/vendor/survival-kit/_navigation.scss b/app/assets/stylesheets/vendor/survival-kit/_navigation.scss
new file mode 100644
index 0000000..5e6f13d
--- /dev/null
+++ b/app/assets/stylesheets/vendor/survival-kit/_navigation.scss
@@ -0,0 +1,230 @@
+// Survival ✚ Kit
+
+// Horizontal Navigation Low-level Method.
+//
+// It's meant to be called from other predifined mixins to avoid calling so many variables per call.
+// Used from ul/ol
+@mixin horizontal-navigation(
+    $height,
+    $color,
+    $hover-color,
+    $active-color,
+    $text-shadow,
+    $bg,
+    $bg-hover,
+    $bg-active,
+    $box-shadow,
+    $box-shadow-hover,
+    $box-shadow-active,
+    $border-left,
+    $border-right,
+    $padding,
+    $margin,
+    $border-radius,
+    $font-weight,
+    $font-size,
+    $tab-space // Sets a tabbing space.
+  ) {
+  // $bg none or transparent will remove the background.
+  @if $tab-space == none { $tab-space:0;}
+  @if $bg == none { $bg:transparent;}
+	@if $bg-active == auto { $bg-active:$bg-hover; }
+	@if $active-color == auto { $active-color:$hover-color; }
+
+  // Border Calculation
+  // ----------------------------------------
+  // Check if borders are set to anything but none / auto.
+  @if $border-left != none and $border-right != none and $border-left != auto and $border-right != auto {
+    // Borders where explicitly set.
+    @include _sk-nav-borders($border-left, $border-right);
+  } @else if $border-left == auto and $border-right == auto and $bg != transparent{
+    // Borders calculated magically.
+    @include _sk-nav-borders(lighten($bg, 10%), darken($bg, 10%));
+  }
+
+  height:$height; // instead of clearfix, to keep shadows alive.
+  margin: 0;
+  list-style:none;
+
+  // Links and input
+  li, a {
+    display:block;
+    float:left;  // this can make it inline or block level.
+    line-height:$height;
+  }
+
+
+  a {
+    @if $font-weight != none {
+      font-weight: $font-weight;
+    }
+    @if $padding != none {
+      padding:$padding;
+    }
+    @if $margin != none {
+      margin:$margin;
+    }
+    @if $font-size != none {
+      font-size:$font-size;
+    }
+
+    text-decoration:none;
+    color:$color;
+
+    @if $bg != transparent {
+      background:$bg;
+    }
+
+    @if $box-shadow != none {
+      @include box-shadow($box-shadow);
+    }
+
+    @if $text-shadow != none {
+      @include text-shadow($text-shadow, 1px, 1px, 1px);
+    }
+
+    @if $border-radius != none {
+      @include border-radius($border-radius);
+    }
+
+    // Feature for tabs.
+    @if $tab-space != 0 {
+      margin-top: -($tab-space);
+    }
+
+    // States
+    // ----------------------------------------
+
+    &:hover{
+      @include _sk-nav-effects($hover-color, $bg-hover, $text-shadow, $box-shadow-hover, $bg-hover);
+      text-decoration:none;
+    }
+
+    &:visited {
+      color:$active-color;
+    }
+    &.active {
+      @include _sk-nav-effects($active-color, $bg-active, $text-shadow, $box-shadow-active, $bg-hover);
+      // Add tab space.
+      @if $tab-space != 0 {
+        height:$height + $tab-space;
+      }
+    }
+  }
+}
+
+// Mixin used to generate Background effects by the horizontal-navigation mixin.
+@mixin _sk-nav-effects($color, $bg, $text-shadow, $box-shadow, $bg-hover) {
+	@if $color != auto {
+	  color:$color;
+	}
+  @if $bg != transparent {
+    @if $bg-hover == auto {
+       background:darken($bg,3%);
+    } @else {
+      background:$bg;
+    }
+    @if $box-shadow != none{
+      @include box-shadow($box-shadow);
+    }
+  }
+  // Remove the text shadow of hover.
+  @if $text-shadow != none {
+    @include text-shadow(none);
+  }
+}
+
+// Low level mixin.
+// Invoked by other mixins.
+//
+// @var $left the left border.
+// @var $right the right border
+@mixin _sk-nav-borders($left, $right) {
+  li:first-child, li.first {
+    border-left:1px solid $right;
+  }// li:first-child
+  li:last-child, li.last {
+    border-right:1px solid $left;
+  }
+  a {
+    border:{
+      left: 1px solid $left;
+      right: 1px solid $right;
+    };
+    &.active, &.active:hover {
+      border:{
+        left:1px solid transparent;
+        right:1px solid transparent;
+      };
+    }
+    &:hover {
+      border:{
+        left:1px solid transparent;
+        right:1px solid transparent;
+      };
+    }
+  }
+}
+
+//
+// @TODO: Add docs to tabs!
+//
+@mixin navigation-classes($opts: tabs) {
+  $opts: join($opts, force list);
+  .nav {
+    list-style: none;
+    margin-bottom: $base-line-height;
+    margin-left: 0;
+  }
+
+  // Make links block level
+  .nav > li > a {
+    display: block;
+  }
+  .nav > li > a:hover {
+    background-color: #EEEEEE;
+    text-decoration: none;
+  }
+
+  // Common styles
+  .nav-tabs {
+    @extend .nav;
+    @include pie-clearfix();
+  }
+  .nav-tabs > li, .nav-pills > li {
+    float: left;
+  }
+  .nav-tabs > li > a {
+    line-height: 14px;
+    margin-right: 2px;
+    padding-left: 12px;
+    padding-right: 12px; // keeps the overall height an even number
+  }
+
+  .nav-tabs {
+    border-bottom: 1px solid #ddd;
+  }
+
+  .nav-tabs > li {
+    margin-bottom: -1px;
+  }
+
+  .nav-tabs > li > a {
+    @include border-radius(4px 4px 0 0);
+    border: 1px solid transparent;
+    padding-bottom: 9px;
+    padding-top: 9px;
+    &:hover {
+      border-color: #EEEEEE #EEEEEE #ddd;
+    }
+  }
+  .nav-tabs > .active {
+    a, a:hover {
+      background-color: #FFF;
+      border: 1px solid #ddd;
+      border-bottom-color: transparent;
+      color: gray;
+      cursor: default;
+    }
+  }
+}
+\ No newline at end of file
diff --git a/app/assets/stylesheets/vendor/survival-kit/_secure.scss b/app/assets/stylesheets/vendor/survival-kit/_secure.scss
new file mode 100644
index 0000000..f08dd11
--- /dev/null
+++ b/app/assets/stylesheets/vendor/survival-kit/_secure.scss
@@ -0,0 +1,3 @@
+/*!
+  This is a compiled file.
+*/
+\ No newline at end of file
diff --git a/app/assets/stylesheets/vendor/survival-kit/_tools.scss b/app/assets/stylesheets/vendor/survival-kit/_tools.scss
new file mode 100644
index 0000000..e753dfe
--- /dev/null
+++ b/app/assets/stylesheets/vendor/survival-kit/_tools.scss
@@ -0,0 +1,267 @@
+// Survival ✚ Kit
+$container-width           : 1000px !default;
+$compatibility-mode        : true, ie ie7 ie8 ie9 ff2 chrome9 !default;
+
+// Function to know if we're in compatibility mode, if $version is set it'll return if there's  a match for that browser.
+@function in-compatibility-mode($version: false) {
+  @if $compatibility-mode {
+    @if $version {
+      @return index(nth($compatibility-mode, 2), $version);
+    } @else {
+      @return nth($compatibility-mode, 1);
+    }
+  } @else {
+    @return false;
+  }
+}
+
+// Shortcut to remove margin an padding.
+// Used on several @mixins.
+@mixin no-mp($extend:false) {
+  @if $extend {
+    @extend .no-mp;
+  } @else {
+    margin:0;
+    padding:0;
+  }
+}
+// Sometimes it's better to extend a class.
+.no-mp {
+  margin:0;
+  padding:0;
+}
+
+// Center an element.
+@mixin center-container($container-width, $vertical-margin:0, $padding:0) {
+  margin:$vertical-margin auto;
+  @if $padding == 0 {
+    width:$container-width;
+  } @else {
+    @include size($container-width, auto, $padding);
+  }
+}
+
+// Inline Block CrossBrowser.
+// Disregards FF2 and IE6
+@mixin inline-block {
+  display: inline-block;
+  @if in-compatibility-mode(ie7) {
+    zoom: 1;
+    *display:inline;
+  }
+}
+
+// Shortcut to set absolute positioning.
+@mixin pos($pos, $debug: false) {
+  @if length($pos) == 1 {
+    $pos: $pos 0 0 0;
+  }
+  @if length($pos) == 2 {
+    $pos: nth($pos,1) nth($pos,2) 0 0;
+  }
+  @if length($pos) == 3 {
+    $pos: nth($pos,1) nth($pos,2) nth($pos, 3) 0;
+  }
+  position:absolute;
+  @if "#{nth($pos, 1)}" != "0" { top: nth($pos, 1); }
+  @if "#{nth($pos, 2)}" != "0" { right: nth($pos, 2); }
+  @if "#{nth($pos, 3)}" != "0" { bottom: nth($pos, 3); }
+  @if "#{nth($pos, 4)}" != "0" { left: nth($pos, 4); }
+	@if $debug { @include debug($debug); }
+}
+
+// Center a absolute element horizontally; optional offset.
+@mixin pos-x-center($width, $offset:0) {
+  @include pos(0 50% 0 50%);
+  margin-left:$offset - ( $width / 2 );
+  width:$width;
+}
+
+// Center a absolute element vertically; optional offset.
+@mixin pos-y-center($height, $offset:0) {
+  @include pos(50% 0 50% 0);
+  height:$height;
+  margin-top:$offset - ( $height / 2 );
+}
+
+// Set a debug variable.
+@mixin debug($color:red) {
+  @if $debug != false {
+		@if $color == true { $color:red; }
+    background: rgba($color, 0.2); // incompatible with IE.
+  }
+}
+
+// Class available to center container to 1000px
+.w, .pagewidth {
+	@include center-container($container-width);
+}
+
+// Crossbrowser linear gradient.
+// Compatible Browsers: FF3.6+ Saf4+ Chrome IE6-IE9
+// @author SitePoint
+@mixin background-gradient($from, $to, $start: top, $end: bottom, $fallback:$from, $ie:false) {
+  @include gradient($from, $to, $start, $end, $fallback);
+}
+@mixin gradient($from, $to, $start: top, $end: bottom, $fallback:$from){
+  background-color: $fallback;
+
+  @if $end == bottom and $start == top {
+    @if $start == 0 {
+      background-image: -webkit-gradient(linear, left $start, left bottom, from($from), to($to));
+    } @else {
+      background-image: -webkit-gradient(linear, $start, left bottom, from($from), to($to));
+    }
+    background-image: -webkit-linear-gradient($start, $from, $to);
+    background-image: -moz-linear-gradient($start, $from, $to);
+    background-image: -ms-linear-gradient($start, $from, $to);
+    background-image: -o-linear-gradient($start, $from, $to);
+    @if in-compatibility-mode()  {
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{ie-hex-str($from)}', EndColorStr='#{ie-hex-str($to)}');
+    }
+  } @else if $end == bottom {
+    background-image: -webkit-gradient(linear, left $start,  0 $end, from($from), to($to));
+    background-image: -webkit-linear-gradient(top, $from $start+px, $to);
+    background-image: -moz-linear-gradient(top, $from $start+px, $to);
+    background-image: -ms-linear-gradient(top, $from $start+px, $to);
+    background-image: -o-linear-gradient(top, $from $start+px, $to);
+
+  } @else {
+    background-image: -webkit-gradient(linear, left $start,  0 $end, from($from), to($to));
+    background-image: -webkit-linear-gradient(top, $from $start+px, $to $end+px);
+    background-image: -moz-linear-gradient(top, $from $start+px, $to $end+px);
+    background-image: -ms-linear-gradient(top, $from $start+px, $to $end+px);
+    background-image: -o-linear-gradient(top, $from $start+px, $to $end+px);
+    // No IE support for positioned gradients
+  }
+}
+
+// Mixin that allows you to set the size of the box to a fixed width/height
+// taking into consideration the padding and borders for you.
+//
+// Examples:
+//     @include size(100px, 100px, 10px, 5px solid red);
+//     Will render a 100x100.
+//
+// $width: Pixel value for width
+// $height: Pixel value for height
+// $padding: Padding accepts: 1px or 1px 2px or 1px 2px 3px 4px
+// $border: Border, accepts 1px solid #000 or 1px or 1px 2px or 1px 2px 3px 4px
+// 					When passing a border declaration (1px solid #000) it'll add the CSS for you.
+@mixin size($width, $height:auto, $padding: none, $border:none) {
+	// Prepare the borders, accept the following:
+	//   1px solid #000 or 1px or 1px 2px or 1px 2px 3px 4px
+	@if true {
+		@if $border == none {
+			$border:0;
+		}
+
+		$border-len: length($border);
+	  // Standardize padding to a list with 4 items.
+		@if $border-len == 3 {
+			border:$border;
+			$bw: nth($border, 1);
+			$border: $bw $bw $bw $bw;
+		} @else if $border-len == 1 {
+			$border: $border $border $border $border;
+		} @else if $border-len == 2 {
+			$border: join($border, $border);
+		}
+	}
+
+	// Prepare padding, accept the following:
+	//   1px or 1px 2px or 1px 2px 3px 4px
+	@if true {
+		@if $padding == none {
+			$padding:0;
+		} @else {
+			padding:$padding;
+		}
+
+	  // Standardize padding to a list with 4 items.
+		$padding-len: length($padding);
+		@if $padding-len == 1 {
+			$padding: $padding $padding $padding $padding;
+		} @else if $padding-len == 2 {
+			$padding: join($padding, $padding);
+		}
+	}
+
+	@if $width != auto {
+		width: $width - (nth($padding, 2) + nth($padding, 4)) - (nth($border, 2) + nth($border, 4));
+	}
+	@if $height != auto {
+		height: $height - (nth($padding, 1) + nth($padding, 3)) - (nth($border, 1) + nth($border, 3));
+	}
+}
+
+// Float an element with a given width and a direction. Third parameter allows easy debugging.
+// Yes, we override Compass :(
+// @TODO: Make it use box-size and allow padding.
+@mixin float($side, $size:auto, $debug-color:false) {
+  @if $size != auto {
+    @if length($size) == 1 {
+      width:$size;
+    } @else {
+      height:nth($size, 2);
+      width:nth($size, 1);
+    }
+
+  }
+  @if in-compatibility-mode(ie6) {
+    display:inline;
+  }
+  float: $side;
+  @if $debug-color and $debug {
+    @include debug($debug-color);
+  }
+}
+
+@mixin transition($property: all, $time: 400ms, $easing: ease-out){
+  transition: $property $time $easing;
+  -moz-transition: $property $time $easing;
+  -ms-transition: $property $time $easing;
+  -o-transition: $property $time $easing;
+  -webkit-transition: $property $time $easing;
+}
+
+// Calculate the Golden Ratio of a given value.
+// ----------------------------------------
+@function golden-ratio($size, $type) {
+  $big   : round($size / 1.61803);
+  $small : $size - $big;
+  @return if($type == large, $big, $small);
+}
+
+
+//
+// @TODO: Add docs to link-colors!
+//
+@mixin link-colors($normal, $hover: false, $active: false, $visited: false, $focus: false) {
+  @if $normal == default {
+    $hover: $link-hover-color;
+    $normal: $link-color;
+    $visited: $link-visited-color;
+  }
+  color: $normal;
+  @if $visited {
+    &:visited {
+      color: $visited; } }
+  @if $focus {
+    &:focus {
+      color: $focus; } }
+  @if $hover {
+    &:hover {
+      color: $hover; } }
+  @if $active {
+    &:active {
+      color: $active; } }
+}
+
+// Substract the Body to the Container width to get the sidebar.
+@function sidebar($body-width, $container-width-over: false) {
+  @if $container-width-over == false {
+    $container-width-over : $container-width;
+  }
+  @return $container-width - $body-width;
+}
+\ No newline at end of file
author	Stefan Wintermeyer <stefan.wintermeyer@amooma.de>	2012-12-17 12:01:45 +0100
committer	Stefan Wintermeyer <stefan.wintermeyer@amooma.de>	2012-12-17 12:01:45 +0100
commit	b80bd744ad873f6fc43018bc4bfb90677de167bd (patch)
tree	072c4b0e33d442528555b82c415f5e7a1712b2b0 /app/assets/stylesheets
parent	3e706c2025ecc5523e81ad649639ef2ff75e7bac (diff)