/* $Id: constants.css 7306 2010-09-07 07:33:09Z john $ */



/*
DEFAULT STYLES FOR THIS THEME
*/
@constants
{
  /*
  NOTE TO SELVES ---------------------------------------------------------------
  Also add constants to application/settings/constants.xml
  END NOTE ---------------------------------------------------------------------
  */

  /*
  PAGE WIDTHS & BACKGROUND COLOR
  Specify the top bar wrapper width (which contains the mini menu, logo, and main menu
  by default), the footer width, and the width of left & right-side columns.
  */
  theme_topbar_width: 100%;
  theme_topbar_minimenu_width: 950px;
  theme_topbar_logo_width: 950px;
  theme_topbar_menu_width: 950px;
  theme_footer_width: 935px;
  theme_content_width: 950px;
  theme_content_columns_left_width: 190px;
  theme_content_columns_right_width: 190px;
  theme_body_background_color: #fff;

  /*
  HEADER AND FOOTER COLORS
  These values are only used to style the site-wide header and footer.
  */
  theme_topbar_background_color: #e9f4fa;
  theme_topbar_menu_background_color: #79b4d4;
  theme_topbar_menu_background_color_hover: transparent;
  theme_topbar_menu_link_color: #fff;
  theme_topbar_menu_link_decoration: none;
  theme_topbar_menu_link_hover_color: #fff;
  theme_topbar_menu_link_hover_decoration: underline;
  theme_topbar_menu_link_size: 11px;
  theme_topbar_menu_link_background_color: transparent;
  theme_topbar_menu_link_background_color_hover: transparent;
  theme_topbar_menu_border: 1px solid #89a4b3;
  theme_topbar_minimenu_background_color: #fff;
  theme_topbar_minimenu_border: 2px solid #d7e7f0;
  theme_topbar_minimenu_link_size: 10px;
  theme_topbar_minimenu_link_color: #999;
  theme_topbar_minimenu_link_hover_color: #333;
  theme_topbar_minimenu_link_hover_decoration: none;
  theme_topbar_minimenu_link_hover_background_color: rgb(216, 223, 234);
  theme_topbar_border: 0px solid transparent;

  /*
  TEXT & LINKS
  These values affect the size and colors of your text and links throughout your layout.
  */
  theme_font_family: tahoma, arial, verdana, sans-serif;
  theme_font_size: 11px;
  theme_font_color: #555;
  theme_font_color_light: #999;
  theme_text_align: left;
  theme_link_color: #555;
  theme_link_color_hover: #0066cb;
  theme_link_decoration: none;
  theme_link_decoration_hover: underline;
  theme_headline_color: #717171;
  theme_headline_size_large: 18px;
  theme_headline_size_medium: 12px;

  /*
  BORDER COLORS
  These colors are mostly applied to borders that separate items in lists of content.
  */
  theme_border_color: #eaeaea;
  theme_border_medium_color: #ddd;
  theme_border_dark_color: #bbb;

  /*
  WIDGET BOX BORDER COLORS
  These colors are applied to borders around or within boxes that have a background color,
  like widgets.
  */
  theme_foreground_border_color: transparent;
  theme_foreground_border_color_light: transparent;
  theme_foreground_background_color: transparent;

  /*
  INPUT FIELDS AND BUTTONS
  These values style input fields and buttons that appear throughout the layout.
  */
  theme_input_background_color: #fff;
  theme_input_font_color: #555;
  theme_input_border_colors: #BDC7D8;
  theme_button_background_color: #619dbe;
  theme_button_background_color_hover: #7eb6d5;
  theme_button_font_color: #fff;
  theme_button_border_color: #50809b;

  /*
  PHOTO BORDERS
  These colors are applied to the borders drawn around most images and thumbnails.
  */
  theme_photo_border_color: #ddd;
  theme_photo_border_color_hover: #aaa;

  /*
  FORMS
  These colors are applied to most forms throughout the layout.
  */
  theme_form_border_color: #ddecf3;
  theme_form_background_color: #f4f9fb;
  theme_form_label_font_color: #777;

  /*
  TABS (BUTTON-STYLE)
  These colors are applied to the button-style tab menus which are often shown
  on browse pages.
  */
  theme_buttontabs_font_color: #777;
  theme_buttontabs_font_color_hover: #555;
  theme_buttontabs_font_color_active: #fff;
  theme_buttontabs_background_color: transparent;
  theme_buttontabs_background_color_hover: rgb(216, 223, 234);
  theme_buttontabs_background_color_active: #0066cb;

  /*
  TABS
  These colors are applied to tab menus (as seen on several pages, including
  the member profile page).
  */
  theme_tabs_background_color: #e9f4fa;
  theme_tabs_border_color: #cad9e1;
  theme_tabs_border_color_hover: #cad9e1;
  theme_tabs_font_color: #838e9a;
  theme_tabs_font_color_active: #555;
  theme_tabs_background_color_active: #fff;
  theme_tabs_background_color_hover: #fff;

  /*
  LISTS
  These colors are applied to some lists, especially in pull-down menus.
  */
  theme_list_background_color: #fff;
  theme_list_background_color_alt: #f9f9f9;
  theme_list_background_color_hover: #eee;

  /*
  TAGS
  These colors are applied to tags, which appear on blogs, messages, etc.
  */
  theme_tag_background_color: #d3e6ef;

  /*
  INLINE PULLDOWN MENUS
  These colors style the inline pulldown menus that appear throughout the layout.
  */
  theme_pulldown_background_color: #EDEFF4;
  theme_pulldown_background_color_hover: #D8DFEA;
  theme_pulldown_background_color_active: #D8DFEA;
  theme_pulldown_font_color_active: #333;
  theme_pulldown_border_color: #D8DFEA;
  theme_pulldown_contents_background_color: #fff;
  theme_pulldown_contents_list_background_color_hover: #f2f2f2;
  theme_pulldown_contents_list_background_color_active: #eeeeee;

  /* Defaults */
  theme_rounded_size: 4px;
}











/* Global member photos and icons */
img.main
{
  max-width: 720px;
  max-height: 720px;
}
img.thumb_normal
{
  max-width: 140px;
  max-height: 160px;
}
img.thumb_profile
{
  max-width: 200px;
  max-height: 400px;
}
img.thumb_icon
{
  width: 48px;
  height: 48px;
}
img.main,
img.thumb_normal,
img.thumb_profile,
img.thumb_icon
{
  border: 1px solid $theme_photo_border_color;
}

















/*
GLOBAL MIXINS
These groups of styles called "mixins" are included in other
classes throughout the stylesheet.
*/

/* Gives an element a background and/or border */
=foreground
{
  background-color: $theme_foreground_background_color;
  border: 1px solid $theme_foreground_border_color;
  background-image: url(~/application/modules/Core/externals/images/foreground_bg.png);
  background-repeat: repeat-x;
}

/* Gives an element a drop shadow */
=shadow($offset_x = 0, $offset_y = 0, $blur_radius = 0, $spread_radius = 0, $shadow_color = "#aaa")
{
  -moz-box-shadow: $offset_x $offset_y $blur_radius $spread_radius $shadow_color;
  -webkit-box-shadow: $offset_x $offset_y $blur_radius $spread_radius $shadow_color;
  box-shadow: $offset_x $offset_y $blur_radius $spread_radius $shadow_color;
}

/* Gives an element rounded corners. */
=rounded($radius = $theme_rounded_size, $hidecorner1 = false, $hidecorner2 = false, $hidecorner3 = false, $hidecorner4 = false)
{
  +border-radius($radius);

  @if($hidecorner1 == true)
  {
    +border-top-left-radius(0px);
  }
  @if($hidecorner2 == true)
  {
    +border-top-right-radius(0px);
  }
  @if($hidecorner3 == true)
  {
    +border-bottom-left-radius(0px);
  }
  @if($hidecorner4 == true)
  {
    +border-bottom-right-radius(0px);
  }
}

/* Prevents users from selecting contents */
=noselect
{
  -moz-user-select: none;
  -webkit-user-select: none;
}

=announcement_bg {
  color: #404040;
  background-color: #EEDC94;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
  background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
  background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
  background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
  background-image: -o-linear-gradient(top, #fceec1, #eedc94);
  background-image: linear-gradient(top, #fceec1, #eedc94);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #EEDC94 #EEDC94 #E4C652;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  border-width: 1px;
  border-style: solid;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

=create_gradient($from, $to) {
  background: $from;
  background: -moz-linear-gradient(top, $from 0%, $to 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$from), color-stop(100%,$to));
  background: -webkit-linear-gradient(top, $from 0%,$to 100%);
  background: -o-linear-gradient(top, $from 0%,$to 100%);
  background: -ms-linear-gradient(top, $from 0%,$to 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from', endColorstr='$to',GradientType=0 );
  background: linear-gradient(top, $from 0%,$to 100%);
}

=create_emboss($light_inset, $emboss, $shadow) {
  -webkit-box-shadow: inset $light_inset 0px 0px 2px, 0 1px 0 $emboss, 0 2px 0 $emboss, 0 3px 0 $shadow;
  -moz-box-shadow: inset $light_inset 0px 0px 2px, 0 1px 0 $emboss, 0 2px 0 $emboss, 0 3px 0 $shadow;
  -ms-box-shadow: inset $light_inset 0px 0px 2px, 0 1px 0 $emboss, 0 2px 0 $emboss, 0 3px 0 $shadow;
  -o-box-shadow: inset $light_inset 0px 0px 2px, 0 1px 0 $emboss, 0 2px 0 $emboss, 0 3px 0 $shadow;
  box-shadow: inset $light_inset 0px 0px 2px, 0px 1px 0 $emboss, 0px 2px 0 $emboss, 0px 3px 0 $emboss, 0px 4px 0 $emboss, 0px 5px 0 $emboss;
}

=create_menu_icon($icon_path) {
  display:block;
  content: ' ';
  height: 32px;
  width: 100%;
  min-width: 32px;
  background: url('$icon_path') no-repeat center bottom;
  margin-top: -31px;
}

=gray_gradient_color {
  +create_gradient(#ffffff, #c4cde0);
}

=blue_gradient_color {
  +create_gradient(#0066cb, #074380);
}

=blue_emboss {
  +create_emboss(rgba(255,255,255,0.2), #073768, #073768);
}

=widget_emboss {
  +create_emboss(rgba(255,255,255,1), #cacdd6, rgba(0,0,0,0.2));
}
