/* $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_main_width:1200px;
  theme_topbar_width: $theme_main_width;
  theme_topbar_minimenu_width: auto;
  theme_topbar_logo_width: auto;
  theme_topbar_menu_width:100%;
  theme_footer_width: $theme_main_width;
  theme_content_width: $theme_main_width;
  theme_content_columns_left_width: 250px;
  theme_content_columns_right_width: 250px;
  theme_body_background_color:#e6ecf0;
  theme_color: $serenity_theme_color;

  /*
  HEADER AND FOOTER COLORS
  These values are only used to style the site-wide header and footer.
  */
  theme_topbar_background_color:$serenity_header_background_color;
  theme_topbar_menu_background_color:#FFFFFF;
  theme_topbar_menu_background_color_hover: transparent;
  theme_topbar_menu_link_color:#111111;
  theme_topbar_menu_link_decoration: none;
  theme_topbar_menu_link_hover_color:#FFFFFF;
  theme_topbar_menu_link_hover_decoration: none;
  theme_topbar_menu_link_size: 1em;
  theme_topbar_menu_link_background_color: transparent;
  theme_topbar_menu_link_background_color_hover:$serenity_mainmenu_links_hover_background_color;
	theme_topbar_menu_font_family:$serenity_mainmenu_fontfamily;
  theme_topbar_menu_border: none;
  theme_topbar_minimenu_border: none;
  theme_topbar_minimenu_link_size: 100%;
  theme_topbar_minimenu_link_color:#FFFFFF;
  theme_topbar_minimenu_link_hover_color: $serenity_minimenu_link_active_color;
  theme_topbar_minimenu_link_hover_decoration: none;
  theme_topbar_minimenu_link_hover_background_color: transparent;
  theme_topbar_border: 0px solid transparent;
  theme_menu_tip_color:#FFFFFF;
  theme_footer_background_color:#FFFFFF;
  theme_footer_font_color:#676767;
	theme_footer_copyright_color:#676767;
  theme_footer_link_color:#676767;
  theme_footer_border_color:#e4e4e4;

  /*
  TEXT & LINKS
  These values affect the size and colors of your text and links throughout your layout.
  */
  theme_font_family:$serenity_body_fontfamily;
  theme_font_size: 15px;
	theme_font_size_small: 13px;
  theme_font_color:#111111;
  theme_font_color_light:#444444;
  theme_text_align: left;
  theme_link_color:#111111;
  theme_link_color_hover: $serenity_links_hover_color;
  theme_link_decoration: none;
  theme_link_decoration_hover: none;
  theme_headline_color:#111111;
  theme_headline_size_large: 165%;
  theme_headline_size_medium: 120%;

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

  /*
  WIDGET BOX BORDER COLORS
  These colors are applied to borders around or within boxes that have a background color,
  like widgets.
  */
	theme_box_header_font_family:$serenity_heading_fontfamily;
  theme_foreground_border_color: transparent;
  theme_foreground_border_color_light: transparent;
  theme_foreground_background_color: #ffffff;
  theme_comments_background_color:#f5f5f5;
  /*
  INPUT FIELDS AND BUTTONS
  These values style input fields and buttons that appear throughout the layout.
  */
  theme_input_background_color:#ffffff;
  theme_input_font_color:#5f727f;
  theme_input_border_colors:#d7d8da;
  theme_button_background_color: $serenity_button_background_color;
  theme_button_background_color_hover: $serenity_button_background_color_hover;
  theme_button_background_color_active: $serenity_button_background_color_hover;
  theme_button_font_color: $serenity_button_font_color;
  theme_button_border_color: $serenity_button_border_color;

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

  /*
  FORMS
  These colors are applied to most forms throughout the layout.
  */
  theme_form_border_color: transparent;
  theme_form_background_color: transparent;
  theme_form_label_font_color:#455B6B;

  /*
  TABS (BUTTON-STYLE)
  These colors are applied to the button-style tab menus which are often shown
  on browse pages.
  */
	theme_buttontabs_font_family:$serenity_tab_fontfamily;
	theme_buttontabs_font_color: #111111;
	theme_buttontabs_font_color_hover: $serenity_button_font_color;
	theme_buttontabs_font_color_active: $serenity_button_font_color;
	theme_buttontabs_border_color: transparent;
	theme_buttontabs_border_color_hover: $serenity_theme_color;
	theme_buttontabs_border_color_active: $serenity_theme_color;
	theme_buttontabs_background_color: rgba(0, 0, 0, .1);
	theme_buttontabs_background_color_hover: $serenity_button_background_color;
	theme_buttontabs_background_color_active: $serenity_button_background_color;

  /*
  TABS
  These colors are applied to tab menus (as seen on several pages, including
  the member profile page).
  */
  theme_tabs_background_color: #ffffff;
  theme_tabs_border_color:#e2e4e6;
  theme_tabs_border_color_hover: #111111;
  theme_tabs_font_color:#444444;
  theme_tabs_font_color_active:$serenity_button_font_color;
  theme_tabs_background_color_active: $serenity_button_background_color;
  theme_tabs_background_color_hover: $serenity_theme_color;
  theme_tabs_font_family:$serenity_tab_fontfamily;
  /*
  LISTS
  These colors are applied to some lists, especially in pull-down menus.
  */
  theme_list_background_color:#ffffff;
  theme_list_background_color_alt: rgba(0, 0, 0, .1);
  theme_list_background_color_hover: rgba(186, 186, 186, 0.05);

  /*
  TAGS
  These colors are applied to tags, which appear on blogs, messages, etc.
  */
  theme_tag_background_color: rgba(0, 0, 0, .1);

  /*
  INLINE PULLDOWN MENUS
  These colors style the inline pulldown menus that appear throughout the layout.
  */
  theme_pulldown_background_color: #ffffff;
  theme_pulldown_background_color_hover: $serenity_theme_color;
  theme_pulldown_background_color_active:$serenity_theme_color;
  theme_pulldown_font_color_active: $serenity_button_font_color;
  theme_pulldown_border_color: $serenity_border_color;
  theme_pulldown_contents_background_color: #ffffff;
  theme_pulldown_contents_list_background_color_hover: rgba(0, 0, 0, .03);
  theme_pulldown_contents_list_background_color_active: rgba(0, 0, 0, .03);

  /*
  GRID VIEW LAYOUT
  These values set the width and height of grid layout.
  */
  theme_grid_width: 220px;
  theme_grid_height: 290px;

  /*
  SIGN IN BUTTON
  These colors style sign in button
  */
	
	/*
  WIDGET BORDER RADIUS
  */
  theme_widget_radius: $theme_widget_radius;
}

/* Global member photos and icons */
img.main
{
  max-width:500px;
  max-height:500px;
}
img.thumb_normal
{
  max-width: 140px;
  max-height: 160px;
}
img.thumb_profile
{
  max-width: 200px;
  max-height: 200px;
	object-fit: cover;
  object-position: top center;
}
img.thumb_icon,
.bg_thumb_icon
{
  width: 48px;
  height: 48px;
	border-radius:50px;
}
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: 0px solid $theme_foreground_border_color;
  border-radius: none;
}

/* 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 = 3px, $hidecorner1 = false, $hidecorner2 = false, $hidecorner3 = false, $hidecorner4 = false)
{
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  border-radius: $radius;

  @if($hidecorner1 == true)
  {
    -moz-border-radius-topleft: 0px;
    -webkit-border-top-left-radius: 0px;
    border-top-left-radius: 0px;
  }
  @if($hidecorner2 == true)
  {
    -moz-border-radius-topright: 0px;
    -webkit-border-top-right-radius: 0px;
    border-top-right-radius: 0px;
  }
  @if($hidecorner3 == true)
  {
    -moz-border-radius-bottomright: 0px;
    -webkit-border-bottom-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  @if($hidecorner4 == true)
  {
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-bottom-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
}

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