/*
	Main FreeToastHost CSS Style Sheet -- These are ***non-theme-dependent styles*** in this file.

	For theme-dependent Style Sheets, look for the appropriate FTH_theme.css in the associated theme folder.
*/

/*	REVISION HISTORY

5:36 PM 10/24/2013,  SEJ - Renamed this file from old tc.css and clean it up a bit.
5:32 PM 2/7/2014, SEJ - Fixed path bug.  /jquery/css => /css
2:12 AM 5/11/2014, SEJ - Created rules to allow "Edit This Page" links to be placed in accordion heading bar
10:18 PM 6/5/2014, SEJ - Created data, tips, intro, and notopmargin classes to allow for more control and consistency in dialogs.
2:27 AM 3/23/2015, SEJ - Tweaked noprint cliass with !important.
6:02 PM 4/16/2015, SEJ - Added textarea overflow auto
6:02 PM 4/16/2015, SEJ - Added File Manager button widths
*/

/* 

http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://www.maxdesign.com.au/articles/liquid/
http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design
https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en
http://stackoverflow.com/questions/10026751/recommended-widths-for-responsive-layouts
http://designinstruct.com/web-design/responsive-css-grid/
http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
http://alistapart.com/article/responsive-web-design

CSS Specificity References:  
~~~~~~~~~~~~~~~~~
	http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/	
	http://css-tricks.com/specifics-on-css-specificity/ 
	https://developers.google.com/speed/docs/best-practices/rendering

Online CSS Specificity Calculators: 
~~~~~~~~~~~~~~~~~~~~
	http://css-specificity.webapp-prototypes.appspot.com/
	http://specificity.keegan.st/
 */
 
 /* Print Styles */
@media print {
	body{ -webkit-print-color-adjust: exact; }
	.noprint, .noprint *, .no-print, .no-print * { display:none !important; }
}

/* Default Element Styles */
body { 	
	font: 10.5pt "Arial", "Helvetica", sans-serif;     /* 12pt is normal 100% */
	margin: 0; 
}

img { max-width: 100%; }				/* Force responsive layout */

input, 
select, 
textarea, 
fieldset {
	-moz-border-radius: 2px; 					/* This is the equivalent of the jQuery UI ui-corner-all class */
	-webkit-border-radius: 2px; 
	-khtml-border-radius: 2px; 
	border-radius: 2px; 
}

input { 
	display:block; 
}

textarea { 
	overflow: auto; 
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Website Backgrounds and "Wallpaper" (transparent images) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* Reference:  */
	
	/* https://css-tricks.com/snippets/css/transparent-background-images/ */
	/* https://www.brunildo.org/test/BackgroundBorder2.html */
	/* https://www.formget.com/css-background-opacity/ */
	/* https://stackoverflow.com/questions/41052846/how-can-i-add-background-color-behind-a-transparent-background-image */
	/* https://www.sitepoint.com/community/t/how-can-i-make-a-bg-transparent-but-text-not/29980 */
	/* https://css-tricks.com/css-transparency-settings-for-all-broswers/  */
	
	/* NOTE: Website Background Color, Background Image URL, and Background Image Opacity are set via overrides in index1.html head style block. */

@media (min-width: 751px) { 				/* Larger than tablet; wallpaper images not shown on small screens. */
	.wallpaper::after {									/* Used to produce transparent background images */
		content: "";
		background: transparent;				/* This has been tested with bogus urls--falls back to background color only. */
		opacity: 0;												/* Overridden by index1.html head style block */
		position: fixed;
		z-index: -1;											/* Needed to force background images to show behind main content. */
		top: 0;														/* Needed to force HasLayout to produce the background images */
		left: 0;														/* Needed to force HasLayout to produce the background images */
		bottom: 0;												/* Needed to force HasLayout to produce the background images */
		right: 0;													/* Needed to force HasLayout to produce the background images */
	}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Show blue box shadow around focussed inputs ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
input, 
select,
textarea {
    -webkit-transition: box-shadow .3s;
    -moz-transition: box-shadow .3s;
    -o-transition: box-shadow .3s;
    transition: box-shadow .3s;
}

input:focus, 
select:focus,
textarea:focus {
    box-shadow: 0 0 7px blue;
}

label {
	display:block;
	font-size: 10pt; 
	font-weight: bold; 
	font-family: "Arial", "Helvetica", sans-serif;
	margin-bottom: .3em;  /*only works for display:block */
}

label>input, 
label>select, 
label>textarea {
	font-weight: normal;								/* This allows for nesting inputs inside label elements without impacting their font weight. */
}

label, 
input { display: inline;}								/* Here from Dues Tool style block -- needs to be re-worked */

/*********************************** CHECKBOXES AND RADIO BUTTONS *************************************/
input[type=checkbox], 
input[type=radio] {
    vertical-align: middle;
    position: relative;
    bottom: 1px;
}

input[type=checkbox] {
	margin: 3px 3px 3px 4px;										/* Overrides normalize.css default of 0px */
}

input[type=radio] {
    bottom: 2px;
}

/******************************************************* HR'S ********************************************************/
hr {
   border: none;
	border-bottom: 2px dotted #AAAAAA;
	margin-top: .5em;
	margin-bottom: .5em;
}

/**************************************** FIELDSETS *******************************************/
fieldset { 
	padding:0; 
	border:0; 
	margin-top:25px; 
}
/* Boxed fieldsets */
fieldset.boxed,
fieldset.fth-boxed
{
	border:1px solid;
	padding:.6em 1em;
}
fieldset.boxed>legend,
fieldset.fth-boxed>legend
{
	border: none;																			/* Normalize.css override */
	padding: 0 2px;																		/* Normalize.css override */
	background-color: white;													/* Fixes Chrome bug with fieldset border line going through legend text */
}

/*  Styles for Specific Element Types with a Specific Class Name */

input.text, textarea.text,
input.text2, textarea.text2,
input.text3, textarea.text3,
input.text4, textarea.text4 { 
	padding: .4em; 
	margin-bottom: 1em; 
}
input.text2, textarea.text2,
input.text3, textarea.text3,
input.text4, textarea.text4 { 
	display: inline;
}
textarea.text,
textarea.text2,
textarea.text3,
textarea.text4 { 
	height: 4em;
}
input.text, textarea.text { 
	width: 97%; 
}
input.text2, textarea.text2 { 
	width: 48%; 
}
input.text3, textarea.text3 { 
	width: 32%; 
}
input.text4, textarea.text4 { 
	width: 24%; 
}

input.fth-role {
	/* width: 100%; */
	flex-grow:1;
	font-weight: bold;
	
	border:none;
	background:none;
	box-shadow:none;
	outline:none;
	
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}

input.fth-role:focus {
   box-shadow: none;
}

/**************************************** TABLES *******************************************/
th, td { padding: 2px }													/* Override default padding of 0px in normalize.css */
tr.alt th,
tr.alt td {
   background-color:#EEEEEE;
}
tr.over th,
tr.over td {
   background-color:#DDDDDD;
}

.altback tr:not(.ui-state-highlight):nth-child(even) { background-color: #ffffff }
.altback tr:not(.ui-state-highlight):nth-child(odd)  { background-color: #eeeeee }

.fth-spacedborders { 									/* Override normalize.css defaults of no collapse and 0 spacing */
	border-collapse: separate; 
	border-spacing: 2px;
}
.agendaTable {
	border: 0;
	border-collapse: separate;
	border-spacing: 2px;
	width: 100%;
}
.agendaTable th, 
.agendaTable td { 
	border: 0; 
	padding: 2px; 
}
table.layout-grid a.disabled, 
table.layout-grid a.disabled:hover {
	color: #004165;
	cursor: default;
	text-decoration: line-through;
}

/********************* Classes used for positioning the AJAX spinners *****************************************/
.CenterPoint {
  text-align:center;
  position:absolute;
  top:50%;
  left:50%;
  width:16px;
  height:16px; 
  margin-top:-8px; /* half the height */
  margin-left:-8px; /* half the width */
  z-index: 2000000000;  /*old value: auto*/
}
 .positionFixed { position: fixed }
 
/* ~~~~~~~~~~~~ The following are used for information paragraphs preceded by bullet icons. The icons are theme-able and are defined in the appropriate FTH_theme.css ~~~~~~~~~~~~~~ */ 
[class^="info-text"],
[class^="alert-text"],
[class^="check-text"],
[class^="tip-text"],
[class^="more-text"],
[class^="note-text"]
{
	font-size: 0.94em; 
	padding: 0;
	text-indent: -1.2em;
	margin: -0.5em 0.5em 0.25em 1.25em;
}
[class^="more-text"],
[class^="note-text"]																											/* These just place information text in without any icon bullet. */
{
	text-indent: 0; 																										
}
[class$="-down"] { margin-top: 0.25em;	}																/* Used to place the information text block further down the page than normal. */									

[class^="info-text"]:before,
[class^="alert-text"]:before,
[class^="check-text"]:before,
[class^="tip-text"]:before
{
	height: .875em;
	width: .875em;
	display: inline-block;																								/* Important for this to work inside table cells! */
 	position: relative;																										/* Important for this to work inside table cells! */
	left: 0;
	top: 0;
	text-align: right;
	margin-right: 1px;																										/* This just spaces the icon from the actual text. */
	font-family: FontAwesome;
	background-image: none !important;																/* Prevent background images from FTH custom theme CSS files from being used. */
}

[class^="info-text"]:before { 
	content: '\f05a'; 																											/* Font Awesome unicode reference */
}
[class^="alert-text"]:before { 
	content: '\f071'; 																											/* Font Awesome unicode reference */
}
[class^="check-text"]:before {  
	content: '\f00c'; 																											/* Font Awesome unicode reference */
}
[class^="tip-text"]:before {  
	content: "\f0eb"; 																											/* Font Awesome unicode reference */
}

/* ~~~~~~~~~~~~ BUTTONS: The following allows for links & buttons to be styled as themeable buttons. ~~~~~~~~~~~~~~ */ 

/* REFERENCES:  http://webdesign.about.com/od/css/a/aa041904.htm */
/* http://stackoverflow.com/questions/3966027/make-link-in-table-cell-fill-the-entire-row-height */
/* There are theme dependent colorings for this in the various theme specific CSS files */
 .cssButton { 
	text-decoration: none;
	display: inline-block;
	padding: .3em .6em;
	text-align: center;
	line-height:150%;
	font-size: .9em;											/* Rougly 11pt text based on 16 px default body font text.  http://pxtoem.com/ */
	border-radius: 4px;
	cursor: pointer;
} 

.cssButton:focus { outline: none; }

.cssButton:disabled {									/* jQuery UI class ui-state-disabled can be used instead for themeable disabled styling. */
	background-color: lightgray;
	color: grey;
}

.cssButton>span.ui-icon { 
	float:left; 
	margin-right: .3em; 
}

.leftAlign { text-align: left }
.rightAlign { text-align: right }
.iconWidth { width: 32px }
.fullWidth { width: 100% }
.autoWidth { width: auto }

.asText {																																	/* Used for icon buttons with transparent backgrounds */
	background:none;
	border:none;
	margin:0;
	padding:0;
	cursor: pointer;
}

a.moreless-link,
a.fthMoreLessLink{ font-style:italic; }
a.info-link,
a.moreless-link,
a.fthMoreLessLink{ text-decoration:underline;}
a.info-link:link,
a.moreless-link:link,
a.moreless-link:visited,
a.fthMoreLessLink:link,
a.fthMoreLessLink:visited { color:#004165 }
a.info-link:hover,
a.info-link:visited,
a.moreless-link:hover,
a.fthMoreLessLink:hover { color:#772432 }
a.info-link:active,
a.moreless-link:active,
a.fthMoreLessLink:active { color:#babfb7 } 

.ui-accordion>.ui-accordion-header>button.editpagelink											/* This must be this specific to override default jQuery CSS for accordions. */
{					
	font-size: 9.5pt;
	width: 1.9em;
	padding: 0;
	position: absolute; 
	top: .5em;
	right: .5em;
}

.ui-multiselect-menu label { font-weight: normal }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Skip to Main Content for Screen Readers ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

a.fth-SkipNav { 									/* To increase accessibility for screen readers. */
	position:absolute; 
	left:-10000px; 
	top:auto; 
	width:1px; 
	height:1px; 
	overflow:hidden;
} 
a.fth-SkipNav:focus { 						/* To increase accessibility for screen readers. */
	position:fixed;
	left:auto;
	width:auto;
	height:auto; 
	z-index:2;
	padding: .5em 1em;
	cursor: pointer;
	color: black;
	background:white;
	border:white;
	font-size: 10pt;
	font-weight: bold;
} 		  

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ jQuery UI Tabs as used in FreeToastHost ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
ul.tab-list {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* Styling of tabs with class="tab-list" */
ul.tab-list li {
	/* border-radius: 10px 10px 0 0; */
	font-size: 11pt;
	outline: none;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Simulated Windows "Combo-boxes" ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.fth-combobox {
	position: relative;
}
.fth-combobox>div {																									/*  Inner div handles sizing the input to show the select button and overlaying the input over the select  */
	position: absolute;
	top: 0;																															/*  Slides the input up over the select */
	left: 0;
	right: 26px;																												/* Accounts for the width of the select button  */
	z-index: 1;																													/* Causes the input to be overlayed over the select  */
}
.fth-combobox>select,
.fth-combobox>div>input {																							
	width:100%;																												/*  100% of width parent div */
	padding: 3px;
}
.fth-combobox>select { 
	padding: 2px; 
	border: 1px solid #004165;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ NEW MENU and LAYOUT CLASSES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#banner + div { display: table }																	/* This is the div containing both the Nav Column and Content Column. */

.NavColumn { 																										/* This is the left side column containing the menus, login area, social media links, podcast, and TI convention ad */
	display:table-cell; 
	vertical-align:top; 
	width:255px; 																									/* This sets the width ratio implicitly w/ the Content Column.  Combined width is fixed. */  
	max-width:255px;
	z-index: 0; 																											/* Since the entire NavColumn is overlayed on small screens w/ a high z-index, we need a default z-index. */ 
	position:static; 
}
.ContentColumn { 																								/* This column contains the user content, system generated pages, and selected other content. */
	display:table-cell;
	max-width: 730px;
	vertical-align:top; 																							/* Table-cells just used for layout here.  No middle alignment needed. */ 
}
.NavColumn>div,
.ContentColumn>div { 
	display:none;																									/* We only want to see the content after the respective jQuery UI widgets have initialized.  They will show the content when ready. */
	width:100%; 																										/* Forcing a layout without any separation between columns and widgets. */
	margin:0; 																											/* Forcing a layout without any separation between columns and widgets. */
	padding: 0; 																										/* Forcing a layout without any separation between columns and widgets. */
	box-sizing: border-box; 																				/* NOTE: UI-Tabs do not use box-sizing border-box by default. Forcing it here.  */
}
.NavColumn .ui-accordion-header,
.NavColumn .ui-widget-content,
.ContentColumn .ui-accordion-header, 
.ContentColumn .ui-widget-content { 
	margin: 0;																											/* Forcing a layout without any separation between columns and widgets. */
	border-radius: 0; 																							/* Forcing a layout without any separation between columns and widgets. */
}
.NavColumn .ui-widget-content { font-size: 10pt }
.ContentColumn .ui-accordion-header a { font-size: 11.5pt }             /* Overrides the jQuery-UI style. */
.ContentColumn .MainContent { background: white; } 						/* Color overridden by user setting via Perl insert in index1.html <head> <style> block. */

#MenuTabs { 																										/* Override the default jQuery-UI styling for UI-Tabs in the menu. */
	margin-top:0; 
	padding-top:4px; 
	border-width:0 0 1px 0; 
	border-radius:0; 
}
#MenuTabs a { 
	font-size:11pt; 
	line-height: 100%; 
	padding: .5em .7em;
}

#PublicMenuLinks,
#MembersMenuLinks { padding: 1em 2.2em }  							/* Force tabs default content padding to be consistent w/ accordions */

#PublicMenuLinks>ul,																				/* Menu Container */
#MembersMenuLinks>ul, 																		/* Menu Container */
#MembersMenuLinks>textarea { 															/* Access Log */
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 10pt; 
}
#PublicMenuLinks li, 
#MembersMenuLinks li {
	display:block;
	padding:2px 3px 2px 8px;
	margin:2px 0;
	font-size: 100%;																						/* Font-size overridden by user setting via Perl insert in index1.html <head> <style> block. */
}
@media (max-width: 550px) {																	/* Increase top/bottom padding for menu entries on small screens. */
	#PublicMenuLinks li, 
	#MembersMenuLinks li { 
		padding:.5em 3px .5em 8px;
	}
}

#PublicMenuLinks li { border-bottom:1px dotted black }			/* Color overridden by user setting via Perl insert in index1.html <head> <style> block. */ 
#PublicMenuLinks a { 
	text-decoration:none;
	color: black;																									/* Color overridden by user setting via Perl insert in index1.html <head> <style> block. */
}
#MembersMenuLinks li { border-bottom:1px dotted black }		/* Color overridden by user setting via Perl insert in index1.html <head> <style> block. */
#MembersMenuLinks a, 
#accesslog {
	text-decoration:none;
	color: black;																											/* Color overridden by user setting via Perl insert in index1.html <head> <style> block. */
}
.OfficerLinks { color: black }																		/* Color overridden by user setting via Perl insert in index1.html <head> <style> block. */
.MenuExtras{ color: black }  																		/* Color overridden by user setting via Perl insert in index1.html <head> <style> block. */
			
/* ~~~~~~ Pop-up / Mobile Menu CSS ~~~~~~ */
#NavMenuIcon {			/* fa-bars */
	display:none;
	font-size:1.5em;
	position:absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	padding: .2em .5em;
	z-index:10;
	cursor:pointer;
}

/* #maindiv .NavColumn.slideNavMenu { */
	/* display: block; */
	/* position: absolute; */
	/* z-index: 111111; */
/* } */

/**************************************** Old Grid Classes (should be phased out) **************************************************/
.layout-grid {
	width: 100%;
}
.layout-grid td {
	vertical-align: top;
	padding: 0;
	border-collapse: collapse;
   border-spacing: 0;
}
.layout-grid td.left-nav {
	/* width: 185px; */
	width: 100%;
}
.demos-nav, 
.left-nav .demos-nav ul, 
.left-nav .demos-nav li, 
.demos-nav2, 
.left-nav2 .demos-nav2 ul, 
.left-nav2 .demos-nav2 li {
	margin: 0;
	padding: 0
}
.left-nav .demos-nav,
.left-nav2 .demos-nav2 {
	float: left;
	/* width: 185px; */
	width: 100%;
	font-size: 10pt;
}
ul.public-nav li, 
ul.members-nav li, 
.left-nav .demos-nav li, 
.left-nav2 .demos-nav2 li  {
	border-bottom: 1px dotted #004165;
	display:block;
	padding: 2px 3px 2px 8px;
	font-size: 90%;
	text-decoration: none;
	color: #555 ;
	margin:2px 0;
	height: auto;
}

/* Home Page Accordion Panels Styling  */
.homepagepanels { font-size:88%; background: white  }			
.homepagepanels>div { display:block; margin:0 auto }
.homepagepanels.photoTable>div { display: table-row; margin: .5em 0 }
.homepagepanels.photoTable>div>div { display: table-cell; vertical-align:top }
.homepagepanels.photoTable>div>div:first-of-type { width:10%; overflow:hidden }
.homepagepanels.photoTable>div>div:first-of-type>div { width:200%; min-width:125px }			

/* ~~~~~~~~~~~~~~~~~~~~~~~~~ Responsive Iframes that Dynamically Adjust Width ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* <!-- Reference: https://avexdesigns.com/responsive-youtube-embed/ --> */
/* <!-- https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout --> */
.video-container {
	position: relative;
	padding-top: 56.25%;					/* Iframe aspect ratio.... allocates a height as a percentage of width. */
	padding-bottom: 30px; 
	height: 0; 
	overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* Cookie Notice */
.club #privacyNotice { background-color: #772432 }
.district #privacyNotice { background-color: #004165 }

/* Banner Colors */
.club #banner>div { background-color: #004165}
.club #banner>div, 
.club #banner>div>a { color: #004165}
.district #banner>div { background-color: #772432}
.district #banner>div,
.district #banner>div>a { color: #772432}

/* Styling Classes */
.u, .underline {	text-decoration: underline }
.b, .bold {	font-weight: bold }
.i, .italic, .italics {	font-style: italic }
.strikeout, .strikethrough { text-decoration: line-through }
.center, .centered {	text-align: center }
.table { display: table }
.tablerow, .tableRow { display: table-row }
.tablecell, .tableCell { display: table-cell }
.space-right { margin-right: .7em }
.space-left { margin-left: .7em }

/* Image rotation */
.rotate90, 
.rotateright {
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
.rotate180 {
	-ms-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}
.rotate270, 
.rotateleft {
	-ms-transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	transform: rotate(270deg);
}

/* Flip images */
.flipx {
	-ms-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}
.flipy {
	-ms-transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
	transform: scaleY(-1);
}

.hideEmpty:empty { display: none; }

/* General Class Name Definitions and Descendant Elements */
.ui-dialog .ui-state-error { padding: .3em; }

.fth-nobold { font-weight: lighter }

.intro { margin: .5em 0 .6em 0 }
.tips {
	margin: .2em 0 .6em 0;
	padding: .5em;
	font-size: 11pt;
}

.breakwords {													/* Used in table cells; e.g. agenda table */
	-ms-word-break: break-all;
	word-break: break-all;
	word-break: break-word;					/* Non standard for webkit */
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

.notopmargin{ margin-top: 0; }

li span.menuitem{ color: #bbbbbb; }

.data,
.hidden,
.fth-data,
.fth-hidden { display: none; }

.fthTable {												/* Consistent table defaults */ 
	padding: 1px; 
	border-collapse: separate; 
	border-spacing: 1px; 
}

.fth-take-role{ width: 100%; }		/* This is used for the Agenda Sign-up buttons. */

/* Agenda Editor Button Styling */
.agendaEditorBtn { margin-right: .1em	}
.agendaEditorBtn > .fa { font-size: 9.5pt	}

.rolelookup {										/* This ensures that the jQuery Autocomplete drop-down can be seen and is sized appropriately */
	font-size: 1em;
	max-height: 12em;
	overflow-y: auto;
	overflow-x: hidden;
	z-index:1000 !important;			
}

/* The following are updated from the jquery-fileupload.css file */
.fileinput-button {
  position: relative;
  overflow: hidden;
  /* display: inline-block; */
  padding: 0;
}

/* The following are updated from the jquery-fileupload.css file */
.fileinput-button input {
  /* top: -.4em;		 */								/* Updated; 0 is original value */
  top: 0;
  height: 100%;
  left: 0;												/* Added */
  width: 100%;	 							/* Added */
  font-size: 2.1em;						/* Updated; 200px is original value */
  position: absolute;
  right: 0;
  margin: 0;
  opacity: 0;
  -ms-filter: 'alpha(opacity=0)';
  direction: ltr;
  cursor: pointer;
}

.no-close .ui-dialog-titlebar-close {
  display: none;
}

td.butts div.pu,
td.butts div.mo,
td.butts div.del { width: 30%; }   /* Used by the File Manger file table */

/* The following is here to simplify the template merging of the access log information */
#accesslog{ 
	height:12em;
	width:98%;
	font-size:9pt;
	background-color:transparent;
	margin: 0 auto;
	padding:.2em;
	border: 1px solid black;
	overflow-y: scroll;
}

#menuTextSlider.ui-slider .ui-slider-handle,
#menuMarginSlider.ui-slider .ui-slider-handle,
#mainMarginSlider.ui-slider .ui-slider-handle,
#spamThresholdSlider.ui-slider .ui-slider-handle,
.fthPctSlider.ui-slider .ui-slider-handle { 
	width:2.8em; 
	margin-left: -1.4em;		/* This should be negative of half of the width above to have it centered on the value */
	text-align: center;  
	font-weight: bold;
	color: white;
	text-decoration: none;
}

/* ************************************** Styles for the Membership Table ********************************************** */

/* Reference:    http://stackoverflow.com/questions/4035966/create-a-html-table-where-each-tr-is-a-form/15600151#15600151 */
/* http://competa.com/blog/2014/01/speeding-up-rendering-of-large-html-tables/  */
/* http://stackoverflow.com/questions/3480060/css-displaytable-row-does-not-expand-when-width-is-set-to-100 */
/* http://stackoverflow.com/questions/2371105/html-input-textbox-with-a-width-of-100-overflows-table-cells */

#MemberTable { 
	table-layout: fixed;			
	vertical-align: middle;
	font-size: 9pt;
	color: #000;
	width: 100%;
}
#MemberTable, 
#MemberTable th,
#MemberTable td {
	border-width: 1px;
	border-style: solid;
	border-color: black;
	border-collapse: collapse;
	color: #000;
	margin: 0; 
	padding: 0;
}
#MemberTable th {font-size: 10pt }
#MemberTable th.minfo-profile,
#MemberTable th.minfo-selected { font-size: 9pt }
.minfo-selected { width: 4.5%; text-align: center } 
.minfo-name { width: 25% } 
.minfo-email { width: 28% }						
.minfo-phone { width: 14% }						
.minfo-roles { width: 22.5%; }						
.minfo-profile { width: 6%; text-align: center } 
.minfo-followup, .minfo-notes { width: 28.5%; } 
.minfo-followup { text-align: center } 
.minfo-selected input { background: transparent }
.minfo-name input, .minfo-email input, .minfo-phone input, .minfo-notes input { width: 99%; margin:0 auto; border:0 transparent; background: transparent; box-shadow: none;}
.minfo-roles button.ui-multiselect.ui-state-default, .minfo-profile > div span.ui-button-text.ui-state-default  { color: #f0f0f0 } 
.minfo-roles button.ui-multiselect:hover,.minfo-profile > div span.ui-button-text:hover  { color: #004165 } 	
.minfo-followup > .linkButton { width: 98% }
#MemberTable th,
/* #MemberTable tr:nth-child(even) { background-color: #fffffff } */
/* #MemberTable tr:nth-child(odd), */
#MemberTable tr.altback { background-color: #eeeeee }
tr#mtr-titles, tr#nmtr-titles, tr#ftr-titles { border-bottom: 3px solid #000000 }
#MemberTable tr{ width: 100%}
/*
#MemberTable tr#ftr-titles,#MemberTable tr#ftr-new,#MemberTable tr.friendRow{ width: 300px}
*/
/* Deactivated Members */
.deactivated input:not([type=checkbox]) { text-decoration: line-through }

/* *********************************************** Styles for the Follow Up Table ************************************************* */

#followupTable { 
	table-layout: fixed;			
	vertical-align: middle;
	font-size: 10pt;
	width: 280px;
}
#followupTable, 
#followupTable td, 
#followupTable th {
	border-width: 1px;
	border-style: solid;
	border-color: black;
	border-collapse: collapse;
	margin: 0; 
	padding: 0;
}
#followupTable th.followupnum,
#followupTable td.followupnum { width:10%; text-align:center; }
#followupTable th.followupdate,
#followupTable td.followupdate { width:40%; text-align:center; }
#followupTable th.followuphow,
#followupTable td.followuphow { width:50% }

#followupTable th { text-align:center; }
#followupTable td input,#followupTable td select { width: 97%; margin:0; border:0 transparent; background: transparent }
#followupTable td select { width: 100%; }
#deleteNonMember span.ui-button-text { padding: 2px 5px}

/* Styles for Dues Tool */
#duesinfo>div {display: table-row; table-layout: fixed; width:100%;}																	/* One div down are the table rows. */
#duesinfo>div>div {display: table-cell; border-bottom: .5em solid transparent; vertical-align:top;}	/* Two divs down are the table cells. */
#duesinfo>div>div span {font-weight:bold; color:red; font-size:.8em;}																/* Red tag names are in the spans. */
#duesmembers {width:100%; white-space:nowrap;}
#duesmembers table {width: 100%;}
#duesmembers td { padding: 0 1em 0 1em;}
#duesmembers td.duesnotes { padding: 0;}
td.duesnotes input { background: transparent; border: transparent; width: 99%; margin: 0; }

/* Styles for message_box element */

#message_box { 
    position: absolute;
	 top: 0; 
    left: 0;
    z-index: 10; 
    background:#EBE8B1; 
    padding:5px;
    border:1px solid #7B2927;
    text-align:center;
    font-weight:bold;
    font-size:12pt;
    color: #004165; 
    width:99%;
}

#message_box a {
	font-size:12pt; 
	font-weight:bold;
	text-decoration:none;
}

#message_box a:link { color: #7B2927; }
#message_box a:visited { color: #004165; }
#message_box a:hover { color: #C6262E; }
#message_box a:active { color: #C6262E; }
	
/* References to sprite containing social icons and podcast images... */	
/* Generated by http://css.spritegen.com CSS Sprite Generator */
 
.fth-sprite-podcastlogo-full3, .fth-sprite-website-podcast, .fth-sprite-tmpodcast, .fth-sprite-facebook, .fth-sprite-flickr, 
.fth-sprite-flickr2, .fth-sprite-googleplus, .fth-sprite-linkedin, .fth-sprite-meetup, .fth-sprite-socialicon, 
.fth-sprite-twitter, .fth-sprite-youtube, .fth-sprite-spacer
{ display: inline-block; background: url('/images/social-podcast-sprite.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }
 
.fth-sprite-website-podcast { background-position: 0 -200px; width: 178px; height: 200px; }
.fth-sprite-tmpodcast { background-position: 0 -400px; width: 176px; height: 39px; }
.fth-sprite-podcastlogo-full3 { background-position: 0 0; width: 200px; height: 200px; }
.fth-sprite-facebook { background-position: 0 -439px; width: 40px; height: 50px; }
.fth-sprite-flickr { background-position: -40px -439px; width: 40px; height: 50px; }
.fth-sprite-flickr2 { background-position: -80px -439px; width: 40px; height: 50px; }
.fth-sprite-googleplus { background-position: -120px -439px; width: 40px; height: 50px; }
.fth-sprite-linkedin { background-position: -160px -439px; width: 40px; height: 50px; }
.fth-sprite-meetup { background-position: 0 -489px; width: 40px; height: 50px; }
.fth-sprite-socialicon { background-position: -40px -489px; width: 40px; height: 50px; }
.fth-sprite-twitter { background-position: -80px -489px; width: 40px; height: 50px; }
.fth-sprite-youtube { background-position: -120px -489px; width: 40px; height: 50px; }
.fth-sprite-spacer { background-position: -178px -200px; width: 1px; height: 1px; }

/* References to sprite containing TM photos and miscellaneous images... */	
/* Generated by http://css.spritegen.com CSS Sprite Generator */
 
.fth-sprite-tm-logo2, .fth-sprite-tm-photo4, .fth-sprite-tm-photo5, .fth-sprite-tm-photo3, .fth-sprite-tm-photo2,
.fth-sprite-tm-logo, .fth-sprite-tm-photo1, .fth-sprite-tm-logo-small, .fth-sprite-facebook-logo, .fth-sprite-flickr-logo,
.fth-sprite-linkedin-logo, .fth-sprite-twitter-logo, .fth-sprite-youtube-logo, .fth-sprite-default, .fth-sprite-tm-logo-xsmall
{ display: inline-block; background: url('/images/misc-sprite.jpg') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }
 
.fth-sprite-tm-logo2 { background-position: -1px 0; width: 500px; height: 100px; }
.fth-sprite-tm-photo2 { background-position: -1px -113px; width: 451px; height: 300px; }
.fth-sprite-tm-photo3 { background-position: -1px -418px; width: 452px; height: 300px; }
.fth-sprite-tm-photo4 { background-position: -1px -723px; width: 463px; height: 300px; }
.fth-sprite-tm-photo5 { background-position: -1px -1028px; width: 455px; height: 300px; }
.fth-sprite-tm-logo { background-position: -1px -1333px; width: 300px; height: 262px; }
.fth-sprite-tm-photo1 { background-position: -1px -1606px; width: 200px; height: 300px; }
.fth-sprite-tm-logo-small { background-position: -320px -1344px; width: 150px; height: 131px; }
.fth-sprite-facebook-logo { background-position: -320px -1504px; width: 125px; height: 47px; }
.fth-sprite-flickr-logo { background-position: -320px -1568px; width: 125px; height: 94px; }
.fth-sprite-linkedin-logo { background-position: -224px -1680px; width: 125px; height: 35px; }
.fth-sprite-twitter-logo { background-position: -368px -1680px; width: 125px; height: 50px; }
.fth-sprite-youtube-logo { background-position: -224px -1744px; width: 125px; height: 58px; }
.fth-sprite-default { background-position: -368px -1760px; width: 100px; height: 100px; }
.fth-sprite-tm-logo-xsmall { background-position: -224px -1824px; width: 75px; height: 66px; }

/* Positions for these can be found in the CKEditor editor.css file: /var/www/html/js/ckeditor/skins/moonocolor/editor.css and are just included here for use in FTH admin console */
.cke-icon-image, .cke-icon-link, .cke-icon-maximize 
{ display: inline-block; background: url('/js/ckeditor_icons/icons.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; vertical-align: text-top; width: 16px; height: 24px;}
.cke-icon-image { background-position: 0 -936px; }
.cke-icon-link { background-position: 0 -1248px; }
.cke-icon-maximize { background-position: 0 -1392px; }

/* Generated by http://www.lorenzomarcon.com/responsive-sprites/ */
/* Also reference http://css.spritegen.com CSS Sprite Generator */

.TMPanelSprite-andrew-clumpus-1x::after, .TMPanelSprite-come-visit-us-1x::after, .TMPanelSprite-how-will-you-benefit-1x::after, 
.TMPanelSprite-jing-humphreys-1x::after, .TMPanelSprite-roger-caesar-1x::after, .TMPanelSprite-sara-safari-1x::after, 
.TMPanelSprite-transform-yourself-1x::after, .TMPanelSprite-why-it-works-1x::after, .TMPanelSprite-why-our-club-is-right-for-you-1x::after 
{ 
	content: ' '; 
	display: inline-block; 
	max-width: 100%;
	background-size: 100%; 
	background-image: url('/images/TMPanelSpriteResp.jpg'); 
}

.TMPanelSprite-andrew-clumpus-1x {max-width: 170px; max-height: 118px;}
.TMPanelSprite-andrew-clumpus-1x::after {width: 382.35294117647%; height: 0; padding-bottom: 69.411764705882%;
	background-position: 0 0%; background-size: 382.35294117647% auto; }

.TMPanelSprite-come-visit-us-1x {max-width: 650px; max-height: 180px;}
.TMPanelSprite-come-visit-us-1x::after {width: 100%; height: 0; padding-bottom: 27.692307692308%;
	background-position: 0 9.8993288590604%; background-size: 100% auto; }

.TMPanelSprite-how-will-you-benefit-1x {max-width: 650px; max-height: 180px;}
.TMPanelSprite-how-will-you-benefit-1x::after {width: 100%; height: 0; padding-bottom: 27.692307692308%;
	background-position: 0 25%; background-size: 100% auto; }

.TMPanelSprite-jing-humphreys-1x {max-width: 170px; max-height: 118px;}
.TMPanelSprite-jing-humphreys-1x::after {width: 382.35294117647%; height: 0; padding-bottom: 69.411764705882%;
	background-position: 0 38.118022328549%; background-size: 382.35294117647% auto; }

.TMPanelSprite-roger-caesar-1x {max-width: 170px; max-height: 118px;}
.TMPanelSprite-roger-caesar-1x::after {width: 382.35294117647%; height: 0; padding-bottom: 69.411764705882%;
	background-position: 0 47.527910685805%; background-size: 382.35294117647% auto; }

.TMPanelSprite-sara-safari-1x {max-width: 170px; max-height: 118px;}
.TMPanelSprite-sara-safari-1x::after {width: 382.35294117647%; height: 0; padding-bottom: 69.411764705882%;
	background-position: 0 56.937799043062%; background-size: 382.35294117647% auto; }

.TMPanelSprite-transform-yourself-1x {max-width: 650px; max-height: 180px;}
.TMPanelSprite-transform-yourself-1x::after {width: 100%; height: 0; padding-bottom: 27.692307692308%;
	background-position: 0 69.798657718121%; background-size: 100% auto; }

.TMPanelSprite-why-it-works-1x {max-width: 650px; max-height: 180px;}
.TMPanelSprite-why-it-works-1x::after {width: 100%; height: 0; padding-bottom: 27.692307692308%;
	background-position: 0 84.89932885906%; background-size: 100% auto; }

.TMPanelSprite-why-our-club-is-right-for-you-1x {max-width: 650px; max-height: 180px;}
.TMPanelSprite-why-our-club-is-right-for-you-1x::after {width: 100%; height: 0; padding-bottom: 27.692307692308%;
	background-position: 0 100%; background-size: 100% auto; }