@charset "UTF-8";

// Colors file. All colors are included here
// ---------------------------------------------------------------------------------------------------------------------
@import "compass/css3";
@import "compass/typography";

@import "mixin";

// DRUPAL BASE COLORS

// NOTE: some colors can be altered by using sass functions within colors.scss 
// (lighten, darken, etc.) - these colors, indicated below, will be adjusted
// accordingly by color module when the theme is configured.
$color_link: #1d50c3;
$color_text: #343434;
$color_base: #858585;

// OTHER CONFIGURABLE COLORS
$color_bg: #fcfcfc;
$color_block_border: #c7c7c7;
$color_secondary: #dcd9b7;

$color_text_highlight: #e5e5e5;

$color_title: #736254;


// NON-CONFIGURABLE COLORS
$color_white: #fff;
$color_black: #333;
$color_grey: #666;
$color_lightgrey: #777;


// CALCULATED COLORS
$color_base_dark: darken($color_base, 10%);
$color_base_light: lighten($color_base, 10%);

$color_link_dark: saturate(darken($color_link, 12%), 10%);

$color_text_light: lighten($color_text, 50%);

@mixin invertcolor {
  background-color: $color_base;
  border-color: $color_base_light $color_base_light $color_base_dark $color_base_dark;
  color: $color_text_highlight;
}

@mixin invert-menu {
  background-color: $color_base;
  border-color: $color_base $color_base_dark $color_base $color_base_light !important;
  padding-left: 0;
  padding-right: 0;
  &>li {
    background-color: $color_base;
    border-color: $color_base_light $color_base_light $color_base_dark $color_base_dark;
    color: $color_text_highlight;
    &.active-trail, &.active, &:hover, &:active {
      background-color: $color_base_dark;
    }
    &>a {
      &:link, &:visited, &:hover, &:active {
        color: $color_text_highlight;
      }
      &.active, &.active-trail, &:hover, &:active {
        background-color: $color_base_dark;
      }
    }
  }
}

// Color mixins
@mixin link-highlight {
  color: $color_text_highlight;
  background-color: $color_base;
  border-color: $color_base_light $color_base_dark $color_base_dark $color_base_light;
  &:link {
    color: $color_text_highlight;
    background-color: $color_base;
  }
  &:visited {
    color: $color_text_highlight;
    background-color: $color_base;
  }
  &.active,
  &:hover,
  &:active {
    background-color: $color_base_dark;
    border-color: $color_base_dark;
    color: $color_text_highlight;
  }
}

// Main colors
// ---------------------------------------------------------------------------------------------------------------------
* {
  border-color: $color_block_border;
}

body {
  color: $color_text;
  background: $color_bg;
}

h1, h2, h3, h4, h5, h6 {
  color: $color_title;
}

// links
body a {
  &:link, &:visited {
    color: $color_link;
  }
  &:hover, &:active {
    color: $color_link_dark;
  }
}

// Placeholders styling
::-webkit-input-placeholder {
  color: $color_grey;
}
:-moz-placeholder {
  color: $color_grey;
}
::-moz-placeholder {
  color: $color_grey;
}
:-ms-input-placeholder {
  color: $color_grey;
}

.form-item {
  label {
    color: $color_grey;
  }
}
.description {
  color: $color_lightgrey;
}


// USER MENU
// ---------------------------------------------------------------------------------------------------------------------

.user-menu-style-bar {
  .zone-user-wrapper {
    @include invertcolor;
    @include shadow-standard;
    .block-user-menu ul {
      @include invert-menu;
    }
  }
}
.user-menu-style-tabs {
  .block-user-menu ul li a {
    @include link-highlight;
  }
}


// HEADER
// ---------------------------------------------------------------------------------------------------------------------

.site-name-slogan {
  h1, h2, h6, a:link, a:visited, a:hover, a:active {
    color: $color_title;
  }
}

.page-options-header-gradient #page {
  @include background-image(linear-gradient($color_base, $color_bg 200px)); 
}


// MAIN MENU
// ---------------------------------------------------------------------------------------------------------------------
.zone-menu-wrapper {
  border-color: $color_base;
}

// Main menu
// =============================================================================
.navigation ul.links {
  border-color: $color_base $color_base_dark $color_base $color_base_light;
  li {
    a {
      color: $color_base;
      &:hover,
      &.active,
      &.active-trail {
        background: $color_base;
        color: $color_text_highlight;
      }
    }
    &:after,
    &:before {
      color: $color_base;
    }
  }
  ul {
    border-color: $color_base;
    background-color: $color_bg;
    ul li {
      border-color: $color_bg;
    }
  }
}

.main-menu-block {
    .navigation {
    border-color: $color_block_border;
    background-color: $color_block_border;
    ul.links ul {
      border-color: $color_block_border !important;
      background-color: $color_block_border;
      li {
        border-color: $color_block_border !important;
      }
    }  
  }
}

.main-menu-no-tabs .navigation {
  ul.links.main-menu {
    background-color: transparent;
    li {
      background-color: transparent;
      a {
        background-color: transparent;
        &:hover,
        &.active,
        &.active-trail {
          color: $color_base;
          opacity: .5;
        }
      }
    }
  }
}

.main-menu-no-tabs {
  .navigation ul.links.main-menu ul {
    background-color: $color_bg;
    border-color: $color_base;
    li {
      border-left-color: $color_bg !important;
      a {
        color: $color_base;
      }
    } 
  }
  &.main-menu-linkcolor .navigation ul.links.main-menu ul {
    border-color: $color_link;
    li a {
      color: $color_link;
    }
  }
  &.main-menu-block {
    .navigation ul.links.main-menu ul {
      background-color: $color_block_border;
      border-color: $color_block_border !important;
      li {
        border-left-color: $color_block_border;
      }
    }
    &.block-bg-pagebg .navigation ul.links.main-menu ul {
      background-color: $color_bg;
      li {
        border-left-color: $color_bg !important;
      }
    }
    &.block-bg-white .navigation ul.links.main-menu ul {
      background-color: white;
      li {
        border-left-color: $color_white !important;
      }
    }
  }
}

.main-menu-linkcolor {
  .zone-menu-wrapper {
    border-color: $color_link;
  }
  .navigation ul.links {
    border-color: $color_link;
    ul.main-menu {
      border-color: $color_link;
    }
    li {
      a {
        color: $color_link;
        &:hover,
        &.active,
        &.active-trail {
          background: $color_link;
          color: $color_text_highlight;
        }
      }
      &:after,
      &:before {
        color: $color_link;
      }
    }
    ul {
      border-color: $color_link;
    }
  }
  &.main-menu-no-tabs .navigation {
    ul.links.main-menu li {
      a {
        background: transparent;
        color: $color_link;
        &:hover,
        &.active,
        &.active-trail {
          color: $color_text;
        }
      }
    } 
  }
}

.main-menu-titlecolor {
  .zone-menu-wrapper {
    border-color: $color_title;
  }
  .navigation ul.links {
    border-color: $color_title;
    ul.main-menu {
      border-color: $color_title;
    }
    li {
      a {
        color: $color_title;
        &:hover,
        &.active,
        &.active-trail {
          background: $color_title;
          color: $color_text_highlight;
        }
      }
      &:after,
      &:before {
        color: $color_title;
      }
    }
  }
  &.main-menu-no-tabs .navigation {
    ul.links.main-menu li {
      a {
        background: transparent;
        color: $color_title;
        &:hover,
        &.active,
        &.active-trail {
          color: $color_text;
        }
      }
    } 
  }
}

.main-menu-secondarycolor {
  .zone-menu-wrapper {
    border-color: $color_secondary;
  }
  .navigation ul.links {
    border-color: $color_secondary;
    ul.main-menu {
      border-color: $color_secondary;
    }
    li {
      a {
        color: $color_secondary;
        &:hover,
        &.active,
        &.active-trail {
          background: $color_secondary;
          color: $color_text_highlight;
        }
      }
      &:after,
      &:before {
        color: $color_secondary;
      }
    }
  }
  &.main-menu-no-tabs .navigation {
    ul.links.main-menu li {
      a {
        background: transparent;
        color: $color_secondary;
        &:hover,
        &.active,
        &.active-trail {
          color: $color_text;
        }
      }
    } 
  }
}

// SECTION FOOTER
// ---------------------------------------------------------------------------------------------------------------------
footer.section-footer {
  background-color: $color_block_border;
  border-top: 1px solid $color_block_border;
  color: lighten(desaturate($color_text, 10%), 10%);
  a {
    &:link,
    &:visited {
      color: lighten(desaturate($color_link, 10%), 10%);
    }
    &:hover,
    &.active,
    &.active-trail {
      color: $color_link;
    }
  }
}

// SECTION CONTENT
// ---------------------------------------------------------------------------------------------------------------------
.zone-content-wrapper,
.page-options-inset-header .page .zone-content-wrapper,
.page-options-inset-header .page .zone-menu-wrapper {
  background-color: $color_bg;
}

.page-options-shadowed-page .zone-content {
  background-color: $color_bg;
}

// Block styles (only for section content. For header we don't need this styles
.section-content .block {
  border-color: $color_block_border;
  background-color: $color_block_border;
  .block-title {
    z-index: 2;
    &:after {
      border-right: 5px solid $color_base_light !important;
    }
    &:before {
      border-left: 5px solid $color_base_light !important;
    }
  }
}

.headers-banner, 
.headers-banner-right {
  &.block,
  .section-content .block {
    .block-title {
      color: $color_text_highlight;
      background: $color_base;
    }
  }
}

.headers-colored .section-content .block,
.block.headers-colored {
  .block-title {
    @include invertcolor;
  }
}

.headers-link-text {
  &.block,
  .section-content .block {
    .block-title {
      color: $color_link;
    }
  }
}

.headers-link-bg {
  &.block,
  .section-content .block {
    .block-title {
      background: $color_link;
      color: $color_text_highlight;
      &:after {
        border-right: 5px solid $color_link !important;
      }
      &:before {
        border-left: 5px solid $color_link !important;
      }
    }
  }
}

.headers-secondary-text {
  &.block,
  .section-content .block {
    .block-title {
      color: $color_secondary;
    }
  }
}

.headers-secondary-bg {
  &.block,
  .section-content .block {
    .block-title {
      background: $color_secondary;
      &:after {
        border-right: 5px solid $color_secondary !important;
      }
      &:before {
        border-left: 5px solid $color_secondary !important;
      }
    }
  }
}

// Restyle views
.view {
  .view-content {
    &>h3 {
      color: $color_text;
    }
    .views-row {
      border-color: $color_block_border;
    }
  }
}

// More link
a.more-link,
.more-link a {
  @include link-highlight;
}

.views_slideshow_cycle_main {
  // Titles
  .views-field-title,
  .views-field-name {
    a {
      color: $color_link !important;
      &:hover {
        color: $color_link_dark !important;
      }
    }
  }
}

.node {
  .field-type-taxonomy-term-reference {
    @include overflow;
    a {
      @include link-highlight;
    }
  }
}

// Tabs
ul.primary {
  border-color: $color_block_border;
  li {
    a {
      border-color: $color_block_border;
      background-color: $color_block_border;
      color: $color_text_highlight;
    }
    &.active a,
    a:hover {
      border-color: $color_block_border;
      border-bottom-color: transparent;
      background-color: $color_block_border;
      color: $color_text;
    }
  }
}


.node-links ul li a,
.comment-links ul li a {
  @include link-highlight;
}


// Calendar styling
.fullcalendar {
  .fc-header-title {
    color: $color_base;
    h2 {
      color: $color_title;
    }
  }
  .fc-content {
    // Calendar as it is
    table {
      background-color: $color_block_border;
      tr {
        td, th {
          background: $color_bg;
        }
        // Style as buttons
        th {
          color: $color_text-highlight;
          background: $color_base;
          border-bottom-color: $color_base_dark;
        }
        td {
          border-color: $color_block_border;
          &.fc-other-month {
            color: $color_text_light;
          }
          .fc-day-number {
            color: $color_text;
          }
        }
      }
    }
  }
  // BUTTONS
  .fc-button {
    @include link-highlight;
    background-image: none;
    &.ui-state-active {
      background: $color_base_dark;
    }
  }
  .ui-icon {
    &.ui-icon-circle-triangle-e {
      border-left: 6px solid $color_white;
    }
    &.ui-icon-circle-triangle-w {
      border-right: 6px solid $color_white;
    }
  }
  // EVENTS
  a.fc-event {
    @include link-highlight;
    .fc-event-time,
    .fc-event-skin {
      background-color: $color_base;
    }
  }
  div.fc-event.bahaical {
    color: $color_text_light;
  }
}

body {
  // Inputs
  textarea,
  select,
  input[type="file"],
  input[type="date"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="email"],
  input[type="month"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="text"],
  input[type="time"],
  input[type="url"],
  input[type="week"] {
    border-color: $color_block_border;
    background-color: $color_bg;
    color: $color_text;
    &:focus {
      border-color: $color_base;
    }
  }
}

body {
  button,
  input[type="reset"],
  input[type="submit"],
  input[type="button"] {
    @include link-highlight;
  }
}

// COMMERCE
// ---------------------------------------------------------------------------------------------------------------------

.checkout-buttons .checkout-cancel,
.checkout-buttons .checkout-back,
.checkout-buttons .checkout-cancel:focus,
.checkout-buttons .checkout-back:focus,
.checkout-buttons .checkout-cancel:hover,
.checkout-buttons .checkout-back:hover
{
  color: $color_link;
}

// SKINR OPTION COLORS
// ---------------------------------------------------------------------------------------------------------------------

.block-bg-pagebg {
  &.main-menu-block nav.navigation,
  &.main-menu-block nav.navigation ul ul,
  ul.primary li a,
  ul.primary li.active a,
  ul.primary li a:hover,
  .section-content article.node-teaser,
  .section-content .block,
  .section-footer {
    background-color: $color_bg;
  }
}
.section-content .block.block-bg-pagebg {
  background-color: $color_bg;
}

.block-bg-white ul.primary li,
.block-bg-pagebg ul.primary li {
  a {
    color: $color_link;
  }
  &.active a,
  a:hover {
    color: $color_text;
  }
}

.block-styles-no-background.main-menu-block .navigation ul ul {
  background-color: $color_bg !important;
}

.block-separators-main .view .view-content .views-row {
  border-color: $color_base;
}

.block-separators-secondary .view .view-content .views-row {
  border-color: $color_secondary;
}

.sitename-glow .site-name-slogan {
  @include text-shadow(0 2px 0 $color_bg, 0 -2px 0 $color_bg, 2px 0 0 $color_bg, -2px 0 0 $color_bg, 0 2px 4px rgba(white,0.7), 0 -2px 4px rgba(white,0.7));
}

.sitename-glowsecondary .site-name-slogan {
  @include text-shadow(0 2px 0 $color_bg, 0 -2px 0 $color_bg, 2px 0 0 $color_bg, -2px 0 0 $color_bg, 0 0 8px $color_secondary);
}

.sitename-main {
  .site-name-slogan {
    h1, h2, h6, a:link, a:visited, a:hover, a:active {
      color: $color_base;
    }
  }
}

.sitename-secondary {
  .site-name-slogan {
    h1, h2, h6, a:link, a:visited, a:hover, a:active {
      color: $color_secondary;
    }
  }
}

.sitename-bg {
  .site-name-slogan {
    h1, h2, h6, a:link, a:visited, a:hover, a:active {
      color: $color_bg;
    }
  }
}