coyote 0.5.2 → 0.6.1

data/test/assets/stylesheets/app/confio/_screen.scss

@@ -0,0 +1,624 @@
+/* =Initial Page Structure
+---------------------------------------------------------------------------- */
+
+@include global-reset;
+@include imulus-reset;
+
+html { @include html; }
+body { @include body; background: #eee url('/images/layout/content/body-background.gif') left bottom repeat-x; }
+
+.container {
+  @include container(960px);
+}
+
+
+/* =Headings
+---------------------------------------------------------------------------- */
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: bold;
+  color: $grey-dark;
+  small {
+    color: $grey-dark;
+  }
+}
+
+h1 {
+  margin-bottom: $baseline;
+  font-size: 30px;
+  line-height: $baseline * 2;
+  small {
+    font-size: 18px;
+  }
+}
+
+h2 {
+  font-size: 24px;
+  line-height: $baseline * 2;
+  small {
+    font-size: 14px;
+  }
+}
+
+h3, h4, h5, h6 {
+  line-height: $baseline * 2;
+}
+
+h3 {
+  font-size: 18px;
+  small {
+    font-size: 14px;
+  }
+}
+
+h4 {
+  font-size: 16px;
+  small {
+    font-size: 12px;
+  }
+}
+
+h5 {
+  font-size: 14px;
+}
+
+h6 {
+  font-size: 12px;
+  color: $grey-dark;
+  text-transform: uppercase;
+}
+
+
+/* =Body Text
+---------------------------------------------------------------------------- */
+
+p {
+  margin-bottom: $baseline;
+}
+
+blockquote {
+  margin-bottom: $baseline;
+  border-left: 5px solid #eee;
+  padding-left: 15px;
+
+  p {
+    margin-bottom: 0;
+  }
+
+  small, cite {
+    display: block;
+    color: $grey-light;
+
+    &:before {
+      content: '\2014 \00A0';
+    }
+  }
+}
+
+address {
+  display: block;
+  line-height: $baseline;
+  margin-bottom: $baseline;
+}
+
+pre, code {
+  font-family: $monospace;
+  font-size: 12px;
+}
+
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  margin-bottom: $baseline;
+}
+
+sub, sup { // Position subscript and superscript content without affecting line-height: gist.github.com/413930
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+}
+
+sup { top: -0.5em; }
+sub { bottom: -0.25em; }
+
+img,
+a img {
+  border: 0;
+  vertical-align: middle;
+}
+
+a {
+  @include link-colors($link-color, $link-hover);
+  @include link-underlines(none, none);
+}
+
+
+/* =Lists
+---------------------------------------------------------------------------- */
+
+ul,
+ol { margin: 0 0 $baseline 25px; }
+
+ul ul,
+ul ol,
+ol ul,
+ol ol { margin-bottom: 0; }
+ul    { list-style: disc; }
+ul ul { list-style: circle; }
+ol    { list-style: decimal; }
+ol ol { list-style: lower-alpha; }
+li    { line-height: $baseline; }
+
+dl {
+  margin-bottom: $baseline;
+  dt, dd { line-height: $baseline; }
+  dt     { font-weight: bold; }
+  dd     { margin-left: $baseline / 2; }
+}
+
+
+/* =Tables
+---------------------------------------------------------------------------- */
+
+table {
+  width: 100%;
+  margin-bottom: 15px;
+
+  th {
+    font-weight: bold;
+    text-align: left;
+    background: #bfe3f8;
+  }
+
+  th,
+  td {
+    padding: 5px 10px 5px 5px;
+    border: 1px solid #999999;
+  }
+
+  td {
+    background: #fff;
+  }
+
+  tbody tr:nth-child(even) td,
+  tbody tr.even td {
+    background: #efefef;
+  }
+
+  tfoot {
+    font-style: italic;
+  }
+}
+
+
+/* =Forms
+---------------------------------------------------------------------------- */
+
+fieldset {
+  input[type=text],
+  input[type=password],
+  input.text,
+  textarea,
+  select {
+    border: 1px solid #999;
+    border-right-color: #ddd;
+    border-bottom-color: #ddd;
+    width: 292px;
+    padding: 3px;
+    background-color: #fff;
+  }
+
+  input.small {
+    width: 120px;
+  }
+
+  input[type=text]:focus,
+  input[type=password]:focus,
+  input.text:focus,
+  textarea:focus,
+  select:focus {
+    border-color: #666;
+  }
+
+  textarea {
+    height: 175px;
+  }
+
+  span.radcheck {
+    display: block;
+
+    input {
+      margin: 0 2px 0 0;
+    }
+  }
+
+  select { // Dropdown width and padding is inconsistent with regular inputs
+    width: 300px;
+    padding: 2px;
+  }
+
+  input.submit { // Text based input button
+    padding: 5px 10px;
+    border: 1px solid #a2adb4;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    background: #d9e3e9;
+    color: #3e6d95;
+  }
+
+
+  input.submit-button,
+  input[type="image"] { // Image based input button
+    float: left;
+  }
+
+  legend {
+    font-size: 14px;
+    font-weight: bold;
+    padding-bottom: 18px;
+  }
+
+  &.pulled {
+    p {
+      padding: 0 0 15px 150px;
+      position: relative;
+      clear: left;
+      zoom: 1; // Fixes and IE bug that causes text to jump that has a negative margin
+
+      label {
+        line-height: normal; // Used to normalize the height between labels and inputs in Firefox
+
+        &.inner { // Be sure to mirror the padding and borders of inputs to have a consistent height
+          display: inline-block;
+          position: relative;
+          padding: 4px 0;
+        }
+
+        &.outer {
+          float: left;
+          text-align: right;
+          width: 140px;
+          padding: 4px 0;
+          margin-left: -150px;
+        }
+
+        sup { // Used to indicate a required field
+          color: #f00;
+        }
+      }
+
+      em.info {
+        padding-left: 10px;
+      }
+    }
+
+    span.error {
+      position: absolute;
+      left: 460px; // Width of label (150) + input (300) + 10 pixels of space
+      top: 0;
+      display: block;
+      color: #f00;
+      padding: 4px 0;
+      line-height: normal;
+    }
+  }
+}
+
+
+/* =Utility
+---------------------------------------------------------------------------- */
+
+.spacer { margin-bottom: $baseline; }
+.left   { float: left; position: relative; margin: 0 10px 5px 0; }
+.right  { float: right; position: relative; margin: 0 0 5px 10px; }
+
+
+/* =Header
+---------------------------------------------------------------------------- */
+
+#header {
+  position: relative;
+  z-index: 200;
+  @include autoclear;
+
+  strong.logo {
+    position: relative;
+    float: left;
+
+    a {
+      display: block;
+      position: absolute;
+      @include image-replacement('/images/layout/header/logo.png', 260px, 90px);
+      left: -40px;
+
+      &:hover {
+        background-position: -260px 0;
+      }
+    }
+  }
+}
+
+
+/* =Intro
+---------------------------------------------------------------------------- */
+
+#intro {
+  @include autoclear;
+  z-index: 100;
+  background: #fff;
+}
+
+
+/* =Search
+---------------------------------------------------------------------------- */
+
+#search {
+  position: relative;
+  float: right;
+  background: url('/images/layout/header/search-bg.png') left top no-repeat;
+
+  input {
+    vertical-align: middle;
+
+    &#search-text {
+      width: 165px;
+      margin: 0 3px 0 0;
+      padding: 0 5px;
+
+      &:focus {
+        outline: 0;
+      }
+    }
+  }
+}
+
+
+/* =Navigation
+---------------------------------------------------------------------------- */
+
+#nav {
+  float: right;
+
+  ul {
+    @include inline-list;
+    margin-bottom: 0;
+
+    li {
+      margin-right: 10px;
+
+      &.last {
+        margin-right: 0;
+      }
+
+      a {
+        display: block;
+        padding: 20px;
+        color: #888;
+        text-decoration: none;
+
+        &:hover,
+        &.active {
+          color: #3da1c9;
+        }
+      }
+    }
+  }
+}
+
+
+/* =Content
+---------------------------------------------------------------------------- */
+
+.home {
+  #content {
+    background: url('/images/layout/content/home-content-bg.png') left top repeat-x;
+
+    .container {
+      width: 970px;
+    }
+
+    .toggle {
+      @include autoclear;
+      width: 700px;
+      margin: 0 auto;
+
+      a {
+        float: left;
+        width: 350px;
+        text-align: center;
+        font-family: "Trebuchet MS";
+        color: #fff;
+        font-size: 24px;
+        text-decoration: none;
+        background: url('/images/buttons/toggle-button-inactive.png') center bottom no-repeat;
+        padding: 40px 0 60px 0;
+        @include opacity(75);
+
+        &:hover,
+        &.active {
+          @include opacity(100);
+          background: url('/images/buttons/toggle-button.png') center bottom no-repeat;
+        }
+
+        em {
+          font-style: normal;
+
+          &.db {
+            color: #f4db8d;
+          }
+
+          &.vm {
+            color: #6db5c9;
+          }
+        }
+      }
+
+    }
+
+    #callout {
+      background: url('/images/layout/content/callout-bottom.png') left bottom no-repeat;
+      padding-bottom: 20px;
+      margin-bottom: 10px;
+      margin-top: -1px;
+
+      .inner {
+        @include autoclear;
+        background: url('/images/layout/content/callout-top.png') left top no-repeat;
+        padding: 30px 40px 0 40px;
+      }
+      
+      h2 {
+        font-size: 18px;
+        font-weight: normal;
+        line-height: 1.5;
+        margin-bottom: 10px;
+      }
+
+      .button {
+        float: left;
+        width: 152px;
+        margin-right: 5px;
+        margin-bottom: 20px;
+        background: #53b4db url('/images/buttons/callout-buttons.gif') left top repeat-x;
+        text-align: center;
+        color: #fff;
+        text-decoration: none;
+        padding: 5px 10px;
+        border: 1px solid #53b4db;
+        @include border-radius(5px);
+        @include box-shadow(0 1px 1px #CECECE);
+        font-size: 14px;
+        font-weight: bold;
+
+        &.pill {
+          @include border-radius(20px);
+          font-size: 12px;
+          width: auto;
+          padding: 5px 15px;
+          font-weight: normal;
+        }
+
+        &.last {
+          margin-right: 0;
+        }
+
+        &:hover {
+          background: #53b4db;
+        }
+        
+        &:active {
+
+        }
+
+        span {
+          background: url('/images/icons/carrot-yellow-right.gif') left center no-repeat;
+          padding-left: 10px;
+        }
+      }
+    }
+
+    #grid {
+      background: url('/images/layout/content/grid-bottom-bg.png') left bottom no-repeat;
+      padding-bottom: 20px;
+      margin-bottom: 50px;
+
+      .inner {
+        @include autoclear;
+        background: url('/images/layout/content/grid-bg.png') left top no-repeat;
+      }
+
+      .module {
+        float: left;
+        width: 250px;
+        padding: 20px 30px;
+        margin: 0 10px 0 5px;
+
+        h3 {
+          margin-bottom: $baseline;
+          line-height: 1;
+        }
+
+        h4 {
+          font-size: 14px;
+          line-height: 1.25;
+          margin-bottom: $baseline;
+          font-weight: normal;
+        }
+
+        ul.social {
+          @include no-bullets;
+
+          li {
+            float: left;
+            margin-right: 5px;
+
+            &.facebook a { @include image-replacement('/images/icons/social/facebook.png', 32px, 32px); }
+            &.twitter a  { @include image-replacement('/images/icons/social/twitter.png', 32px, 32px); }
+            &.linkedin a { @include image-replacement('/images/icons/social/linkedin.png', 32px, 32px); }
+            &.rss a      { @include image-replacement('/images/icons/social/rss.png', 32px, 32px); }
+
+            a {
+              display: block;
+              @include opacity(80);
+              @include transition(all 0.2s linear);
+
+              &:hover {
+                @include opacity(100);
+              }
+            }
+          }
+        }
+        
+        &.testimonial {
+          img {
+            margin-left: -15px;
+          }
+        }
+
+        &.news {
+          ul {
+            @include no-bullets;
+            margin-bottom: 0;
+
+            li {
+              margin-top: $baseline;
+
+              a {
+                display: block;
+              }
+            }
+          }
+        }
+
+        &.last {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}
+
+#content {
+  position: relative;
+  @include autoclear;
+
+  #main {
+
+  }
+
+  #sidebar {
+
+  }
+}
+
+
+/* =Footer
+---------------------------------------------------------------------------- */
+
+#footer {
+  @include autoclear;
+  position: relative;
+  clear: both;
+}