/*
	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: 88% "Arial", sans-serif;  */
	font: 10.5pt "Arial", "Helvetica", sans-serif;     /* 12pt is normal 100% */
	margin: 0; 
}

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

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

input { 
	display:block; 
}

label>input, 
label>select, 
label>textarea {
		font-weight: lighter;
}

textarea { 
	overflow: auto; 
}

input, textarea, select {
    -webkit-transition: box-shadow .3s;
    -moz-transition: box-shadow .3s;
    -o-transition: box-shadow .3s;
    transition: box-shadow .3s;
}

input:focus, textarea:focus, select: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 */
}

/**************************************** FIELDSETS *******************************************/
fieldset { 
	padding:0; 
	border:0; 
	margin-top:25px; 
}
/* 
fieldset > legend {
	float: left;
	margin-top: -20px;
}
fieldset > legend  + * {
        clear: both;
} 
*/
/* 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 */
}

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

input[type=checkbox], input[type=radio] {
    vertical-align: middle;
    position: relative;
    bottom: 1px;
}
input[type=radio] {
    bottom: 2px;
}
input[type=checkbox] {
	margin: 3px 3px 3px 4px;										/* Overrides normalize.css default of 0px */
}

/*h1 { font-size: 1.2em; margin: .6em 0; }*/

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

/* input:focus { 
	border: 2px solid #D90000;  
	background-color: #FFFFBF;
}
 */
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%; 
}

/**************************************** TABLES *******************************************/
table.altback tr:nth-child(even) { background-color: #fffffff }
table.altback tr:nth-child(odd)  { background-color: #eeeeee }
table.fth-spacedborders { border-collapse: separate; border-spacing: 2px; }	/* Override normalize.css defaults of no collapse and 0 spacing */
table.layout-grid a.disabled, table.layout-grid a.disabled:hover {
	color: #004F6D;
	cursor: default;
	text-decoration: line-through;
}
tr.alt td, tr.alt th{
   background-color:#EEEEEE;
}
tr.over td, tr.over th{
   background-color:#DDDDDD;
}
th, td { padding: 2px }													/* Override default padding of 0px in normalize.css */


.CenterPoint {
  text-align:center;
  position:absolute;							/* Position should stay as fixed so that the wait spinner is always visible regardless of the scroll position of a dialog. */
  top:50%;
  left:50%;
  width:16px;
  height:16px; 
  margin-top:-8px; /* half the height */
  margin-left:-8px; /* half the width */
  z-index: #7FFFFFFF;  /*old value: auto*/
}
 
/* ~~~~~~~~~~~~ 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 ~~~~~~~~~~~~~~ */ 
ul[class^="info-text"],
ol[class^="info-text"]
{
	font-size:.94em; 
}
p[class^="more-text"],
p[class^="note-text"],
p[class^="info-text"],
p[class^="alert-text"],
p[class^="check-text"]
{
	font-size:.94em; 
	padding: 0;
	text-indent: -19px;
	margin: -8px 10px 4px 18px;
	/* border: 1px solid black; */
}
p[class^="more-text"],
p[class^="note-text"]																									/* These just place information text in without any icon bullet. */
{
	text-indent: 0; 																										
}
p[class$="-down"] { margin-top: 4px;	}															/* Used to place the information text block further down the page than normal. */									

/* Place a link on right side of accordion header. */
.ui-accordion>.ui-accordion-header>a.editpagelink											/* This must be this specific to override default jQuery CSS for accordions. */
{					
	font-size: 9.5pt;
	width: auto;
	padding-left: 2px;
	padding-right: 5px;
	float: right;																												/* This float requires a clear setting on the div immediately following the heading line in an accordion */
}

p[class^="info-text"]:before,
p[class^="alert-text"]:before,
p[class^="check-text"]:before,
.ui-accordion>.ui-accordion-header>a.editpagelink:before {
/* 	background-image: url(images/ui-icons_004f6d_256x240.png); */        	/* Background-image icon files with theme colors are defined in the appropriate FTH_theme.css */
/*  	background-position: -16px -144px; */																	/* Location of each icon in the sprite file is defined below. */
	height: 14px;
	width: 14px;
	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. */
}

/* jQuery UI icon Version: */
/* p.info-text:before, p.info-text-down:before { background-position:-16px -144px; } */
/* p.alert-text:before, p.alert-text-down:before { background-position: 0 -144px; } */
/* p.check-text:before, p.check-text-down:before {  background-position: -64px -144px; } */
/* .ui-accordion .ui-accordion-header a.editpagelink:before { background-position: -64px -112px; } */   		/* This must be this specific to override default jQuery CSS for accordions. */

/* FontAwesome Iconic Font Unicode Version: */
p[class^="info-text"]:before { 
	content: '\f05a'; 
}
p[class^="alert-text"]:before { 
	content: '\f071'; 
}
p[class^="check-text"]:before {  
	content: '\f00c'; 
}
.ui-accordion>.ui-accordion-header>a.editpagelink:before { 																					/* This must be this specific to override default jQuery CSS for accordions. */
	content: '\f040'; 
	font-size: 10pt; 
	top: 0; 
}	

/* ~~~~~~~~~~~~ The following allows for links 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 */
/* .linkButton:link, 
.linkButton:visited {  */
.linkButton { 
	text-decoration : none; 
	display: inline-block;
	width:95%;
	line-height:150%;
	margin: 1px;
} 

.linkButton:focus { outline: none; }

.linkButton>span.ui-icon { 
	float:left; 
	margin-right: .3em; 
}
 
 .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;
	/* border: none; */
} 

.leftAlign { text-align: left }

.cssButton:focus { outline: none; }

.cssButton>span.ui-icon { 
	float:left; 
	margin-right: .3em; 
}
 
p.OrText {	font-weight:bold; text-align:center; margin-top:1.5em;	}

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:#004f6d;  }
a.info-link:visited{	color:#7c2128; }
a.info-link:hover,a.moreless-link:hover,a.fthMoreLessLink:hover{	color:#7c2128; }
a.info-link:active,a.moreless-link:active,a.fthMoreLessLink:active{	color:#babfb7; } 
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: yellow;
	background-color: darkblue;
	font-size: 10pt;
	font-weight: bold;
} 		  

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ jQuery 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>div {																									/*  Inner div handles sizing the input to show the select button and overlaying the input over the select  */
	margin-right: 26px;																								/* Accounts for the width of the select button  */
	position: relative;										
	z-index: 1;																													/* Causes the input to be overlayed over the select  */
	top: -1.75em;																												/*  Slides the input up over the select */
}
.fth-combobox>select,
.fth-combobox>div>input {																							
	width:100%;																												/*  100% of width parent div */
	padding: 3px;
}
.fth-combobox>select { padding: 2px; }

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

/* Styling Classes */
.u, .underline {	text-decoration: underline }
.b, .bold {	font-weight: bold }
.i, .italic, .italics {	font-style: italic }
.center {	text-align: center }
.tablerow { display: table-row }
.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);
}

/* General Class Name Definitions and Descendant Elements */
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { 
	border: 1px solid transparent; 
	padding: 0.3em; 
}
.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 #004F6D;
	display:block;
	padding: 2px 3px 2px 8px;
	font-size: 90%;
	text-decoration: none;
	color: #555 ;
	margin:2px 0;
	height: auto;
}
.oldxls a{
  font-size:.8em; 
  text-decoration: none;
} 

.fth-nobold { font-weight: lighter }

div.intro,p.intro{
	margin: .5em 0 .6em 0;
}

div.tips,p.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{ display: none; }

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

/* 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;
}

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 users-contain div */
div#users-contain { 
	width: 350px; 
	margin: 20px 0; 
}
div#users-contain table { 
	margin: 1em 0; 
	border-collapse: collapse; 
	width: 100%; 
}
div#users-contain table td, div#users-contain table th { 
	border: 1px solid #eee; 
	padding: .6em 10px; 
	text-align: left; 
}

/* Styles for pre-loader elements */

img#perfectCentre {
  /* position:fixed; */
  position: relative;
  top:50%;
  left:50%;
  width:16px;
  height:16px;
  margin-top:-8px; /* half the height */
  margin-left:-8px; /* half the width */
/*   z-index: #7FFFFFFF;	 */	/* Always on top */
}
#jquery-loader-background{
	background: #000000 url(/css/custom-theme1/images/ui-bg_diagonals-thick_10_000000_40x40.png) 50% 50% repeat; 
	opacity: .50;
	filter:Alpha(Opacity=50);
}
#jquery-loader.ajax{
	border:none;
	padding-top:35px;
	background-color: transparent;
	text-align: center;
	background-position: center center;
	background-repeat: no-repeat;
}

/* ************************************** 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: #004f6d } 	
.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}
*/

/* *********************************************** 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 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; }