/*
DEFAULT STYLES FOR THIS --theme
*/
:root {
  /*
  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:1128px;
	--theme-header-width: var(--theme-main-width);
  --theme-header-minimenu-width: auto;
  --theme-header-logo-width: auto;
  --theme-header-menu-width:100%;
  --theme-footer-width: var(--theme-main-width);
  --theme-content-width: var(--theme-main-width);
  --theme-content-columns-left-width: 300px;
  --theme-content-columns-right-width: 300px;
  --theme-body-background-color: var(--seslinkedin-body-background-color);
  --theme-color:var(--seslinkedin-theme-color);
  /*
  HEADER AND FOOTER COLORS
  These values are only used to style the site-wide header and footer.
  */
  --theme-header-background-color: var(--seslinkedin-header-background-color);
	--theme-header-border-color: var(--seslinkedin-header-border-color);
	--theme-tobar-search-background-color:var(--seslinkedin-header-search-background-color);
	--theme-tobar-search-border-color:var(--seslinkedin-header-search-border-color);
	--theme-header-search-button-background-color:var(--seslinkedin-header-search-button-background-color);
	--theme-header-search-button-font-color:var(--seslinkedin-header-search-button-font-color);
	--theme-header-font-color:var(--seslinkedin-header-font-color);

	/*
	LANDING PAGE COLORS
	*/
	--theme-lp-header-background-color:var(--seslinkedin-lp-header-background-color);
	--theme-lp-header-border-color:var(--seslinkedin-lp-header-border-color);
	--theme-lp-header-input-background-color:var(--seslinkedin-lp-header-input-background-color);
	--theme-lp-header-input-border-color:var(--seslinkedin-lp-header-input-border-color);
	--theme-lp-header-button-background-color:var(--seslinkedin-lp-header-button-background-color);
	--theme-lp-header-button-hover-color:var(--seslinkedin-lp-header-button-hover-color);
	--theme-lp-header-button-font-color:var(--seslinkedin-lp-header-button-font-color);
	--theme-lp-header-font-color:var(--seslinkedin-lp-header-font-color);
	--theme-lp-header-link-color:var(--seslinkedin-lp-header-link-color);

	--theme-lp-signup-button-color:var(--seslinkedin-lp-signup-button-color);
	--theme-lp-signup-button-border-color:var(--seslinkedin-lp-signup-button-border-color);
	--theme-lp-signup-button-font-color:var(--seslinkedin-lp-signup-button-font-color);
	--theme-lp-signup-button-hover-color:var(--seslinkedin-lp-signup-button-hover-color);
	--theme-lp-signup-button-hover-font-color:var(--seslinkedin-lp-signup-button-hover-font-color);

	/*
	MAIN MENU 
		*/
	--theme-header-menu-search-background-color:var(--seslinkedin-mainmenu-search-background-color);
	--theme-header-menu-search-font-color:var(--seslinkedin-font-color-light);
	--theme-header-menu-background-color: var(--seslinkedin-mainmenu-background-color);
  --theme-header-menu-background-color-hover: transparent;
  --theme-header-menu-link-color: var(--seslinkedin-mainmenu-links-color);
	--theme-header-menu-icon-color: var(--seslinkedin-mainmenu-icon-color);
  --theme-header-menu-link-decoration: none;
  --theme-header-menu-link-hover-color: var(--seslinkedin-mainmenu-links-hover-color);
  --theme-header-menu-link-active-color: var(--seslinkedin-mainmenu-links-hover-color);
  --theme-header-menu-link-hover-decoration: none;
  --theme-menu-link-size:var(--seslinkedin-mainmenu-fontsize);
  --theme-header-menu-link-background-color: transparent;
  --theme-header-menu-link-background-color-hover: transparent;
  --theme-header-menu-border: none;
	--theme-header-menu-footer-font-color:var(--seslinkedin-mainmenu-footer-font-color);
  --theme-header-menu-font-family:var(--seslinkedin-mainmenu-fontfamily);

	/*
	MINI MENU
	*/
	--theme-header-minimenu-background-color: transparent;
  --theme-header-minimenu-border: none;
  --theme-header-minimenu-link-size: 100%;
  --theme-header-minimenu-link-color:var(--seslinkedin-minimenu-links-color);
  --theme-header-minimenu-link-active-color: var(--seslinkedin-minimenu-link-active-color);
  --theme-header-minimenu-link-hover-decoration: none;
  --theme-header-minimenu-link-hover-background-color: transparent;
  --theme-header-border: 0px solid transparent;


	/*
  TEXT & LINKS
  These values affect the size and colors of your text and links throughout your layout.
  */
  --theme-font-family:var(--seslinkedin-body-fontfamily);
  --theme-font-size: var(--seslinkedin-body-fontsize);
	--theme-font-size-small: 11px;
  --theme-font-color: var(--seslinkedin-font-color);
  --theme-font-color-light:var(--seslinkedin-font-color-light);
  --theme-text-align: left;
  --theme-link-color: var(--seslinkedin-links-color);
  --theme-link-color-hover: var(--seslinkedin-links-hover-color);
  --theme-link-decoration: none;
  --theme-link-decoration-hover: none;
	--theme-headline-background-color: var(--seslinkedin-headline-background-color);
  --theme-headline-color: var(--seslinkedin-headline-color);
	--theme-heading-font-family:var(--seslinkedin-heading-fontfamily);
  --theme-headline-size-large: 165%;
  --theme-headline-size-medium: 115%;
  --theme-title-size:var(--theme-font-size);
  --theme-font-weight-bold:500;

  /*
  BORDER COLORS
  These colors are mostly applied to borders that separate items in lists of content.
  */
  --theme-border-color: var(--seslinkedin-border-color);
  --theme-border-medium-color: var(--seslinkedin-border-color);
  --theme-border-dark-color: var(--seslinkedin-border-color);
  /*
  WIDGET BOX BORDER COLORS
  These colors are applied to borders around or within boxes that have a background color,
  like widgets.
  */
	--theme-box-background-color:var(--seslinkedin-box-background-color);
	--theme-box-background-color-hover:var(--seslinkedin-box-background-color-hover);
	--theme-box-border-color:var(--seslinkedin-border-color);
  --theme-foreground-border-color: transparent;
  --theme-foreground-border-color-light: transparent;
  --theme-foreground-background-color: var(--seslinkedin-box-background-color);
	--theme-comments-background-color:var(--seslinkedin-comments-background-color);
  --theme-box-header-font-size:var(--seslinkedin-heading-fontsize);
	--theme-box-header-font-family:var(--seslinkedin-heading-fontfamily);
  /*
  INPUT FIELDS AND BUTTONS
  These values style input fields and buttons that appear throughout the layout.
  */
  --theme-input-background-color: var(--seslinkedin-input-background-color);
  --theme-input-font-color: var(--seslinkedin-input-font-color);
  --theme-input-border-colors: var(--seslinkedin-input-border-color);
  --theme-button-background-color: var(--seslinkedin-button-background-color);
  --theme-button-background-color-hover: var(--seslinkedin-button-background-color-hover);
  --theme-button-background-color-active: var(--seslinkedin-button-background-color-hover);
  --theme-button-font-color: var(--seslinkedin-button-font-color);
  --theme-button-font-color-hover: var(--seslinkedin-button-font-color-hover);
  --theme-button-border-color: var(--seslinkedin-button-border-color);
  --theme-button-border-color-hover: var(--seslinkedin-button-border-color-hover);

  --theme-secondary-button-background-color:var(--seslinkedin-secondary-button-background-color);
  --theme-secondary-button-background-color-hover:var(--seslinkedin-secondary-button-background-color-hover);
  --theme-secondary-button-font-color:var(--seslinkedin-secondary-button-font-color);
  --theme-secondary-button-font-color-hover:var(--seslinkedin-secondary-button-font-color-hover);
  --theme-secondary-button-border-color:var(--seslinkedin-secondary-button-border-color);
  --theme-secondary-button-border-color-hover:var(--seslinkedin-secondary-button-border-color-hover);

  /*
  PHOTO BORDERS
  These colors are applied to the borders drawn around most images and thumbnails.
  */
  --theme-photo-border-color: transprant;
  --theme-photo-border-color-hover: transprant;

  /*
  FORMS
  These colors are applied to most forms throughout the layout.
  */
  --theme-form-border-color: var(--seslinkedin-border-color);
  --theme-form-background-color: var(--seslinkedin-box-background-color);
  --theme-form-label-font-color: var(--seslinkedin-form-label-color);

  /*
  TABS (BUTTON-STYLE)
  These colors are applied to the button-style tab menus which are often shown
  on browse pages.
  */
	--theme-buttontabs-font-size:var(--seslinkedin-tab-fontsize);
	--theme-buttontabs-font-family:var(--seslinkedin-tab-fontfamily);
	--theme-buttontabs-font-color: var(--seslinkedin-font-color);
	--theme-buttontabs-font-color-hover: var(--seslinkedin-font-color);
	--theme-buttontabs-font-color-active: var(--seslinkedin-font-color);
	--theme-buttontabs-border-color: transparent;
	--theme-buttontabs-border-color-hover: var(--seslinkedin-theme-color);
	--theme-buttontabs-border-color-active: var(--seslinkedin-theme-color);
	--theme-buttontabs-background-color: transparent;
	--theme-buttontabs-background-color-hover: transparent;
	--theme-buttontabs-background-color-active: transparent;

  /*
  TABS
  These colors are applied to tab menus (as seen on several pages, including
  the member profile page).
  */
  --theme-tabs-background-color: var(--seslinkedin-box-background-color);
  --theme-tabs-border-color: var(--seslinkedin-border-color);
  --theme-tabs-border-color-active: var(--seslinkedin-theme-color);
  --theme-tabs-font-color: var(--seslinkedin-font-color-light);
  --theme-tabs-font-color-active: var(--seslinkedin-links-color);
  --theme-tabs-font-color-hover: var(--seslinkedin-links-color);
  --theme-tabs-background-color-active: var(--seslinkedin-theme-color);
  --theme-tabs-background-color-hover: var(--seslinkedin-theme-color);
  --theme-tabs-font-size:var(--seslinkedin-tab-fontsize);
	--theme-tabs-font-family:var(--seslinkedin-tab-fontfamily);
  /*
  LISTS
  These colors are applied to some lists, especially in pull-down menus.
  */
  --theme-list-background-color: var(--seslinkedin-box-background-color);
  --theme-list-background-color-alt: var(--seslinkedin-box-background-color-alt);
  --theme-list-background-color-hover: var(--seslinkedin-box-background-color-alt);

	 /*
  DASHBOARD
  */
	--theme-dashboard-list-background-color-hover: var(--seslinkedin-dashboard-list-background-color-hover);
	--theme-dashboard-list-border-color: var(--seslinkedin-dashboard-list-border-color);
	--theme-dashboard-font-color:var(--seslinkedin-dashboard-font-color);
	--theme-dashboard-link-color:var(--seslinkedin-dashboard-link-color);

  /*
  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: var(--seslinkedin-pulldown-background-color);
  --theme-pulldown-background-color-hover: var(--seslinkedin-theme-color);
  --theme-pulldown-background-color-active: var(--seslinkedin-pulldown-background-color-hover);
  --theme-pulldown-font-color-active: var(--seslinkedin-font-color);
  --theme-pulldown-border-color: var(--seslinkedin-border-color);
  --theme-pulldown-contents-background-color: var(--seslinkedin-box-background-color);
  --theme-pulldown-contents-list-background-color-hover: var(--seslinkedin-box-background-color-alt);
  --theme-pulldown-contents-list-background-color-active: var(--seslinkedin-box-background-color-alt);


  --theme-item-spacing:0.625rem;
  --theme-item-radius:0.625rem;
  --theme-item-transition:all .2s ease-in-out;
  --theme-item-shadow:0 0 5px rgba(0, 0, 0, .1);
  --theme-item-shadow-hover:0 0 5px rgba(0, 0, 0, .2);
  --theme-widget-spacing:1.25rem;
  --theme-widget-radius:10px;
}