style.scss

@import "base";
@import 'compass/css3';

body {
  background-repeat: no-repeat;
  background-color: #9797a1;
  @include linear-gradient(color-stops(#9797a1 7%, #dddce1 75%), bottom, image-url('gradient.jpg')); }

a {
  &:hover {
    text-decoration: underline; }
  color: $dark;
  text-decoration: none; }

.node a, .comment a {
  color: $link_color;
  text-decoration: none; }

.node a:focus, .comment a:focus, .node a:hover, .comment a:hover {
  color: $link_color;
  text-decoration: underline; }

.node .content {
  clear: both; }

.box {
  margin-bottom: 1.5em;
  h4 {
    margin-bottom: 0.5em;
    color: $grey60; } 
  .tips {
    display: none; } 
  #comment-form p {
    display: none }
  fieldset {
    background: none; } }

fieldset {
  background-color: $grey95;
  margin-bottom: 1em;
  padding: 10px; }

#main {
  min-height: 297px; }

#page {
  margin-top: 60px; }

#site-header, #site-subheader, #footer-region, .column, .node, .comment, .block {
    margin-bottom: 1.5em; }

#content-container {
  position: relative;
  background: white;
  float: left;
  border-top: 1px solid $dark;
  @include box-shadow(#888, 7px, 7px, 14px); }

#feature-tabs {
  margin-top: -1em;
  position: relative;
  z-index: 1;
  ul {
    float: left;
    margin: 2em 0 -1px -5px;
    &.admin-links {
      margin-left: 30px; }
    li {
      padding: 0;
      a {
        background: $dark;
        padding: 1px 5px 0;
        float: left;
        text-align: center;
        margin-bottom: 0;
        margin-left: 5px;
        min-width: 65px;
        text-decoration: none;
        color: white;
        @include border-top-radius(5px);
        @include border-bottom-radius(0); }
      &.active a {
        background: $grey95;
        color: $dark;
        border-top: 1px solid $dark;
        border-right: 1px solid $dark;
        border-left: 1px solid $dark; }
      a:hover {
        background: $dark_hover;
        color: white; }
      &.active a:hover {
        background: $grey95;
        color: $dark; } } } }

#breadcrumb {
  margin: -1em 0 1em 0;
  a {
    text-decoration: underline; } }

.user-links {
  float: right;
  margin-right: 50px;
  a {
    margin-left: 10px; } }

.block h2 {
  font-size: 1.5em;
  line-height: 1;
  margin-bottom: 0.5em; }

.view-recent-discussion-comments ul, .view-recent-poll-comments ul {
  padding: 0; 
  .username {
    font-size: 81.25%; }
  .views-field-timestamp {
    font-size: 75%; } }

#footer-message {
  text-align: center;
  padding: 5px;
  border-top: 1px solid $dark; }

/** Pagers **/

.item-list .pager li, .pager li a {
  background: $dark;
  color: white; }

.item-list .pager li.pager-current {
  background: white;
  color: $dark;
  border: 1px solid $dark; }

#space-title h2 {
  font-family: helvatica, arial, sans-serif;
  font-weight: bolder;
  font-size: 300%;
  margin: 0px 0 15px 0;
  line-height: 30px;
  a {
    color: black;
    text-decoration: none; } }

#ayour-groups-dropdown {
  background: white;
  position: absolute;
  left: 24px;
  top: 23px;
  display: none;
  z-index: 101;
  padding: 15px;
  border: 5px solid $dark;
  p {
    margin: 7px 0 0 0; }
  h2 {
    margin-bottom: 0; }
  hr {
    margin-top: 0; }
  a {
    color: $light2;
    text-decoration: none;
    display: block;
    padding: 3px;
    &:hover {
      background: $dark;
      color: white; } } }

.create-new-group {
  font-size: 110%; }

/* Node Styles */

.node {
  border-bottom: 1px solid $grey90;
  padding-bottom: 1em; }

.meta {
  margin-bottom: 1em; }

.not-page .full-content {
  display:none }

#page-title {
  margin-bottom: 0.2em;
  line-height: 1.25em; }

h4.node-title, h3.node-title, h2.node-title {
  margin-bottom: 0;
  a {
    text-decoration: none;
    color: $dark;
    &:hover {
      text-decoration: underline; } } }

.node-submitted {
  display: table-cell;
  vertical-align: middle;
  color: $grey60;
  font-size: 12px;
  float: left;
  a {
    color: $light2;
    text-decoration: none;
    &:hover {
      text-decoration: underline; } } }

.conversation-bubble-container {
  margin-top: -70px;
  a {
    text-decoration: none;
    color: $light2; } }

.conversation-teaser a:hover {
  text-decoration: underline; }

.conversation-bubble {
  border: 1px solid black;
  padding: 1em;
  line-height: 1.2em;
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
  img {
    position: absolute;
    left: 86px;
    bottom: -25px;
    &.imagecache {
      position: relative;
      bottom: 0;
      left: 0;
      margin-right: 2px; } } }

.conversation-teaser {
  float: right; }

.node-links {
  float: right;
  ul {
    border-top: 1px solid $grey90;
    padding-left: 160px;
    clear: both; }
  li {
    margin-left: 20px; } }

ul.links {
  font-size: 1em;
  float: right;
  li {
    padding: 0; }
  a {
    text-decoration: none;
    color: $light2;
    &:hover {
      color: $light2; } } }

/* User Pictures + submitted stuff in comments */

#comments {
  padding: 10px; }

#comments .comment.author {
  background-color: $author_highlight;
  @include linear-gradient(color-stops($author_highlight, lighten($author_highlight, 2%)), bottom);
  border-bottom: 1px solid darken($author_highlight, 20%); }
  
#edit-comment-wrapper {
  width: 640px; }

body.cke_show_borders {
  width: auto; }

#comment-number {
  border-bottom: 1px $grey90 solid;
  padding: 0.5em;
  margin-top: -1.25em; }

.comment {
  border-bottom: 1px solid $grey90;
  position: relative;
  div.links {
    position: absolute;
    bottom: 5px;
    right: 0; } }

.comment.odd {
  background-color: $grey98;
  @include linear-gradient(color-stops($grey95, $grey98), bottom); }

.new-comment-count {
  color: $new;
  font-weight: bold; }

.new {
  color: $new;
  font-size: 125%;
  position: absolute;
  right: 10px;
  top: 30px; }
    
div.comment-submitted {
  line-height: 30px;
  background: $grey90;
  @include linear-gradient(color-stops($grey90 25%, $grey95), bottom);
  height: 30px;
  padding: 0 5px 0 0; }

#comments {
  a.user-picture {
    text-indent: 100px;
    overflow: hidden;
    display: block;
    background-repeat: no-repeat;
    height: 30px; }
  div.picture {
    float: left;
    margin: 0 10px 0 0;
    height: 30px;
    width: 30px; } }
    
.views-field-picture .user-picture {
  display: block;
  width: 30px;
  height: 30px;
  text-indent: -900px; }

#comments a.username {
  font-size: 13px;
  font-weight: bold;
  line-height: 30px;
  vertical-align: baseline;
  text-decoration: none;
  color: $dark;
  &:hover {
    text-decoration: underline; } }

.comment .date {
  float: right;
  @include border-radius(10px);
  background: white;
  line-height: 20px;
  padding: 0 10px;
  margin: 5px 0;
  text-align: center;
  a {
    &:hover, &:focus {
      text-decoration: underline; }
    color: $dark;
    text-decoration: none; } }

div {
  &.comment div.meta {
    margin-bottom: 0.75em; }
  &.comment-content {
    width: 100%; }
  &.button ul {
    margin: 0; } }

a.button, div.button a {
  @include buttonize(); }

#block-eduglu_core-thread_tools {
  text-align: center; }

.flag-button .unflag-action {
  @include buttonize($grey90, 1.6125em);
  color: $grey50; }

.flag-button .flag-action {
  @include buttonize($attention_color, 2em); }
  
#block-eduglu_core-thread_stats {
  font-size: 90%;
  strong {
    font-size: 110%; } 
  .block-content {
    color: $grey50; }
  a {
    color: $grey40; }
  img {
    padding: 0 3px 3px 0;
    float: left; }}
  
.help {
  float: left; }

.messages {
  margin-bottom: 1.5em;
  padding: 0.68em;
  font-weight: bold;
  background: window;
  margin-left: 10px;
  width: 640px;
  clear: both;
  &.success {
    border: 1px solid #7AC142;
    color: #55872E;
    background: #F1F8EB; }
  ul {
    margin-bottom: 0; } }


/** Recent activity **/

.activity-item {
  border-bottom: 1px solid $grey50;
  margin-bottom: 15px; }

.view-eduglu-recent-activity {
  .item-list li {
    list-style: none;
    margin: 0; }
  h2 {
    margin-bottom: 0; } }

.activity-teaser a {
  text-decoration: underline; }

.activity-meta {
  font-style: italic;
  font-size: 90%;
  color: $grey50;
  a {
    font-style: italic;
    font-size: 90%;
    color: $grey50; } }

.activity-item-group-name {
  color: $light2;
  a {
    color: $light2; } }

.activity-body {
  display: none; }

.activity-node-title {
  text-decoration: underline; }

#user-login {
  margin-left: 210px; }

/* Messages */
.messages {
  background-color: white;
  border: 1px solid #b8d3e5; }

div {
  &.status {
    color: #33a333;
    border-color: $blank_slate; }
  &.error {
    color: #a30000;
    background-color: #FFCCCC; } }

tr.error {
  color: #a30000;
  background-color: #FFCCCC; }

.form-item {
  input.error, textarea.error {
    border: 1px solid #c52020;
    color: #363636; } }

/* Vertical Tabs are too wide */

div.vertical-tabs {
  width: 716px; }

/* Override system.css css for tabs */

#context-links {
  border: none;
  border-bottom: 2px solid $grey90;
  padding: 5px 10px;
  margin-bottom: 2em;
  height: 22px;
  background: #f2f2f2;
  @include linear-gradient(color-stops($grey90, $grey95 70%), bottom);
  .title {
    margin-top: 5px; } }

.tabs {
  ul {
    &.primary {
      margin: 0; }
    margin: 0;
    padding: 0;
    border: 0; }
  margin-top: 8px; }

ul.tabs li a {
  border: none;
  background-color: inherit;
  padding: 5px 10px; }

.tabs {
  .tabs li a:hover {
    @include border-radius(10px);
    color: $grey20;
    background: $grey87;
    padding: 4px 9px;
    border: 1px solid $grey80;
    border-color: $grey80 $grey87 white; }
  ul.primary li.active a {
    @include border-top-radius(10px);
    @include border-bottom-radius(0);
    background-color: white;
    padding: 5px 10px;
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-left: 1px solid black;
    border-bottom: 2px solid white;
    color: black; }}

h.tabs ul.primary li.active a:hover {
  @include border-top-radius(10px);
  @include border-bottom-radius(0);
  background-color: white;
  padding: 5px 10px;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-left: 1px solid black;
  border-bottom: 2px solid white;
  color: black; }

.tabs ul.secondary {
  margin-top: 7px;
  padding: 5px;
  background: white;
  @include border-radius(10px);
  a.active {
    color: white;
    background-color: $light2;
    border: none;
    padding: 4px 9px;
    @include border-radius(10px);
    &:hover {
      color: white;
      background-color: $light2;
      border: none;
      padding: 4px 9px;
      @include border-radius(10px); } } }

/**
 * Module: DIFF =======================================================
 */

div {
  &.diff-inline-controls {
    span.diff-inline-legend {
      float: left; }
    float: right;
    background-color: inherit; }
  &.block-diff {
    div.block-content {
      max-height: 200px;
      overflow: auto; }
    table.diff-inline-revisions tr {
      color: $grey60;
      background: transparent;
      border-top: 1px solid $grey93;
      &:hover {
        color: $grey60;
        background: transparent;
        border-top: 1px solid $grey93; }
      &.active {
        color: $grey20; } } } }

span {
  &.diff-deleted {
    color: $grey80; }
  &.diff-added, &.diff-changed {
    padding-top: 5px;
    padding-bottom: 5px;
    background: #ffc;
    border-bottom: 1px solid #fe9;
    @include border-radius(3px); }
  &.diff-added {
    background: #cfc;
    border-color: #9c9; } }

.blank-slate {
  border: 1px solid $blank_slate;
  color: #33A333;
  margin-top: 1em;
  padding: 10px;
  display: block;
  text-align: center;
  background-color: window; }

/* Table overrides */

tr {
  &.odd .form-item, &.even .form-item {
    max-width: 100%; } }

.ahah-progress {
  height: 26px;
  float: none; }

img {
  &.float-left {
    float: left;
    margin: 10px 10px 10px 0; }
  &.float-right {
    float: right;
    margin: 10px 0 10px 10px; } }

.field-field-attachment {
  clear: both; }

/* Node Edit Form */

#edit-body-wrapper {
  width: 580px;
  /* So body form looks the same as what it'll look published */ }

#sidebar-right {
    background: url(images/vline.png) no-repeat scroll 0 0 transparent;
    margin-left: 0;
    padding-left: 10px;
   .block-apachesolr h2 {
      font-size: 1em;
      font-weight: bold;
      color: inherit;
      background: none; } }

.view-groups-listing .views-field {
  p {
    margin: 0;
    font-size: 87.5%; }
  a {
    font-size: 112.5% } }

.admin-menu {
  #top-stuff {
    position: relative; }
  #page {
    margin-top: 21px; } }