@font-face
{
	font-family: 'Cardo';
	font-style: normal;
	font-weight: normal;
	src: url(fonts/Cardo104s.woff) format('woff'); /* The normal version */

}

/* Note: The ligatures don't seem to work for the bold or italicized versions of Cardo */

@font-face
{
	font-family: 'Noto';
	font-style: normal;
	font-weight: normal;
	src: url(fonts/NotoSerif-Medium.ttf) format('ttf'); /* The normal version */
}

@font-face
{
	font-family: 'NotoThai';
	font-style: normal;
	font-weight: normal;
	src: url(fonts/NotoSansThai-Medium.ttf) format('ttf'); /* The normal version */
}

@font-face
{
	font-family: 'NotoArabic';
	font-style: normal;
	font-weight: normal;
	src: url(fonts/NotoNaskhArabic-Regular.ttf) format('ttf'); /* The normal version */
}

@font-face
{
	font-family: 'Cardo';
	font-style: oblique;
	font-weight: normal;
	src: url(fonts/Cardoi99.ttf) format('ttf'); /* The italicized version */
}


body
{
	font-family: Cardo, Georgia, serif, GS GeezMahtemUnicode, acadnusx, Noto, NotoArabic;
	font-feature-settings: "kern";
	font-kerning: normal;
	font-size:  1em;
	line-height: 1.4;
	background-color: hsl(25,0%,92%);
	background-color: rgb(235,235,235);
	color: hsl(0,0%,0%);
	color: rgb(0,0,0);
	-webkit-font-variant-ligatures: common-ligatures;
	-webkit-font-feature-settings: "kern", "onum";
	font-kerning: normal;
	-moz-font-feature-settings:"dlig=1,onum=1;
	-moz-font-feature-settings:"dlig", "onum";  /* EDIT: new syntax for FF 15+ */
	-ms-font-feature-settings:"dlig", "onum";
	-o-font-feature-settings:"dlig", "onum";
	-webkit-font-feature-settings:"dlig", "onum";
	font-feature-settings:"dlig", "onum";
}

i
{
	font-size:110%;
}

html
{
	height: 100%; overflow:auto;
}
body
{
	height: 100%;
}

p
{
	margin-bottom: 40px;
}

h1
{
	font-size: 125%;
	font-weight: normal;
}

sub, sup {
  /* Specified in % so that the sup/sup is the
     right size relative to the surrounding text */
  font-size: 70%;

  /* Zero out the line-height so that it doesn't
     interfere with the positioning that follows */
  line-height: 0;

  /* Where the magic happens: makes all browsers position
     the sup/sup properly, relative to the surrounding text */
  position: relative;

  vertical-align: baseline;
}

sup {
  /* Move the superscripted text up */
  top: -0.5em;
}

sub {
  /* Move the subscripted text down, but only
     half as far down as the superscript moved up */
  bottom: -0.25em;
}

.note-num
{
	font-family: sans-serif;
	/* The desire is to make footnote numbers
	distinguishable from exponents in the text */
}


a:link
{
	text-decoration: none;
}

a:visited
{
	text-decoration: none;
}

a:hover, a:active
{
	xtext-decoration: none;
}

nav, main
{
	position: relative;
	margin-bottom: 20px;
	padding: 15px;
	background-color: hsl(210,0%,98%);
	background-color: rgb(250,250,250);
	display: table;
	overflow-x: hidden;
	border: 4px double hsl(20,0%,56%);
	border: 4px double rgb(143,143,143);

}

nav /* The left vertical column. Morphs for responsive */
{
	width: 170px; /* Make this a constant */
	float: left;
	margin-right: 0;
	height: 1300px;
	overflow-y: scroll;
	display: block;

}

main
{
	float: right;
	max-width: 694px;
	max-height: 1300px;
	overflow-y: scroll;
	display: block;
}

section
{
	float: left;
	display: block;
	margin-top: 20px;
	clear: both;
}

#wrapper
{
	margin: 0px auto 30px auto;
	max-height: 100%;
	display: table;
	overflow-x: hidden;
}

.lt, .rt, .lb, .rb
{
	width: 13px; height: 17px;
	position: absolute;
}

.lt, .rt
{
	top: 4px;
}

.lb, .rb
{
	bottom: 4px;
}

.lt, .lb
{
	left: 4px;
}

.rt, .rb
{
	right: 4px;
}

.lt /* left-top ornament */
{
	background-image: url(images/corner-colorless-lt.png);
}

.rt /* right-top ornament */
{
	background-image: url(images/corner-colorless-rt.png);
	right: 4px;
}

.lb /* left-bottom ornament */
{
	background-image: url(images/corner-colorless-lb.png);
	left: 4px;
}

.rb /* right-bottom ornament */
{
	background-image: url(images/corner-colorless-rb.png);
	right: 4px;
}

.bottom-credits
{
	margin: 15px auto 15px auto;
	position: relative;
	text-align: center;
	top: -16px;
	font-size: 70%;
	color: hsl(25,0%,65%);
	color: rgb(166,166,166);
}

blockquote
{
	margin: 0 30px 0 30px;
	text-align: left;
	font-size: 90%;
}

ul, li
{
	letter-spacing: .35px;
	list-style-type: none;
	text-decoration: none;
}

li
{
	font-size: 100%;
	padding-left: 10px;
}

li:before
{
	content: "•"; /* Insert content that looks like bullets */
	padding-right: 8px;
	color: rgb(0,126,194);
	color: hsl(201,100%,38%);
}

.divider
{
	border: 0;
	clear:both;
	display:block;
	margin: 0px auto 0px auto;
	width: 100%;
	background-color: rgb(0,0,0);
	background-color: hsl(0,0%,0%);
	height: 1px;
}

figcaption
{
	line-height:1.1;
}

.thumbnail
{
	width: 50px;
	margin-right: 6px;
	margin-bottom: 6px;
	float: left;
	position: relative;
	top: 4px;
}

.thumbnail-grayed-out
{
	width: 50px;
	margin-right: 6px;
	margin-bottom: 6px;
	float: left;
	position: relative;
	top: 4px;
	opacity: 0.3;
}

.grayed-out
{
	opacity: 0.3;
}

caption, small
{
	font-size: 75%;
	display:block;
}

.smaller
{
	font-size: 70%;
	display:block;
}

.notation
{
	font-size: 125%;
	font-weight: normal;
}

.caption-promos
{
	font-size: 95%;
	display: block;
	position: relative;
	margin: -20px 0px 0px 0px;
	height: 45px;
	overflow-y: auto;
}

.caption-links
{
	font-size: 90%;
	text-align: left;
}


.caption-links img
{
	top: 10px;
}

.graph-label
{
	font-size: 90%;
	font-family: monospace;
	line-height: 90%
}

td.graph-label
{
	min-width: 18px; /* This makes sure there is enough padding in the cells */
	text-align: left;
}

.graph-caption
{
	font-size: 105%;
	font-family: monospace;
	line-height: 100%;
	margin-top: 6px;
	position: relative;
	text-align: center;
}


.graph-value
{
	font-size: 80%;
	font-family: monospace;
	line-height: 100%;
	margin-top: 6px;
	position: relative;
	text-align: center;
}


.time1
{
	font-size: 85%;
	position: relative;
}

.time2
{
	font-size: 81%;
	position: relative;
}

p
{
	margin-top: 13px;
	margin-bottom: 13px;
}

figure
{
}

figcaption
{
}

.float-center, .float-center-top, .float-center-center, .float-center-bottom
{
	margin-left: auto;
	margin-right: auto;
}

.float-right, .float-right-top, .float-right-center, .float-right-bottom
{
	float:right;
	margin-left: 10px;
	margin-right: 0px;
}

.float-left, .float-left-top, .float-left-center, .float-left-bottom
{
	float:left;
	margin-left: 0px;
	margin-right: 10px;
}

/*----------------------------------------------------------*/

float-left-top, .float-right-top, .float-center-top
{
	margin-top: 0px;
	margin-bottom: 10px;
}

.float-left, .float-left-center, .float-center, .float-center-center, .float-right, .float-right-center
{
	margin-top: 5px;
	margin-bottom: 5px;
}

.float-left-bottom, .float-right-bottom, .float-center-bottom
{
	margin-top: 10px;
	margin-bottom: 0px;
}

/*----------------------------------------------------------*/

.center
{
	display: block;
	margin: 8px auto 8px auto;
}

.chart
{
	padding: 5px;
	text-align: center;
	display: inline-block;
	min-width: 250px;
}

.chart-caption
{


}

.chart table
{
	margin:auto;
}

.chart td
{
	padding: 0px;
	margin: 0px;
}

.chart.chart-t-left
{
	margin: 0px 4px 4px 0px;
	float: left;
	display: inline-block;
}

.chart.chart-t-right
{
	margin: 0px 0px 4px 4px;
	float: right;
	display: inline-block;
}

.chart.chart-c-left
{
	margin: 4px 4px 4px 0px;
	float: left;
	display: inline-block;
}

.chart.chart-c-right
{
	margin: 4px 0px 4px 4px;
	float: right;
	display: inline-block;
}

.chart.chart-b-left
{
	margin: 4px 4px 0px 0px;
	float: left;
	display: inline-block;
}

.chart.chart-b-right
{
	margin: 4px 0px 0px 2px;
	float: right;
	display: inline-block;
}

.vertical-text
{
	transform: rotate(-90deg);
	transform-origin: 18% 45%;
}


.birthday-caption /* Used in birthday machine */
{
	width: 74px;
	font-size: 77%;
	text-align: left;
	position: relative;
	margin-right: -11px;
	float: right;
	top: -117px;
}

.birthday-set-enclosure
{
	height: 150px;
	display: block;
}

.birthdaySlideshowContainer
{
	width: 160px;
	height: 150px;
	margin: 0 auto;
}

.divider, hr
{
	clear: both;
	margin: 25px 0px 25px 0px;
}

.narrow-hr
{
	clear: both;
	margin: 10px 0px 10px 0px;
}

hr
{
	border-top: 1px solid hsl(20,0%,56%);
	opacity: 0.3;
}

.footnote-or-credit
{
	font-size: 77%;
}

.genericSlideshowContainer
{
	position:relative;
}


.special
{
	color: hsl(330,0%,35%);
}

/* ---------------------------------------- email items ------------- */

#email-wrapper, #mailer-main, #shader, #mailer-sent-message, #mailer-error
{
	display: none;  /* change to block to make it visible */
}

#shader
{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 100;
	background-image: url(images/mailer-section/hatched-bg-darker4.png);
	opacity: 0.60;
	background-repeat: repeat;
}

#email-wrapper
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 110;
	opacity: 0.75;
	margin: 0;
}

#mailer-main, #mailer-sent-message, #mailer-error
{
	color: rgb(50,50,50);
	font-size: 100%;
	text-align: left;
	width: 40%;
	min-width: 220px;
	max-width: 400px;
	position: fixed;
	top: 20%;
	-webkit-transform: translateY(-40%);
  	-ms-transform: translateY(-40%);
	transform: translateY(-40%);
	left: 50%;
	-webkit-transform: translateX(-50%);
  	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 200;
	background-color: hsl(36.4,0%,92.5%);
	margin-left: auto; /* double-coding, just in case */
	margin-right: auto;
	border: 1px solid white;
	padding: 17px;

}

.kill-button
{
	width: 20px;
	height: 20px;
	position: relative;
	z-index: 300;
	float:right;
}

#mailer-main input
{
	font-family: sans-serif;
	font-size: 100%;
	width: 200px;
}

#mailer-main textarea
{
	font-family: sans-serif;
	font-size: 100%;
	width: 100%;
	max-width: 100%; /* confines resizing to <= 100% */
	margin-top: 5px;
}


#mailer-main input.security
{
	width: 25px;

}

.security-question
{
	position:relative;
	top:3px;
}

.submit-button
{
	font-size: 100%;
	border-radius: 3px;
	padding-top: 3px;
	padding-bottom: 2px;
	background-color: hsl(150, 100%, 90%);
	background-color: rgb(204, 255, 230);
	color: hsl(150, 100%, 25%);
	color: rgb(0, 128, 64);
	border-color: hsl(150, 70%, 60%);
	border-color: rgb(82, 224, 153);
	border-width: 1px;
}


/* ---------------------------------------- email items ------------- */

/* Bar colors automatic with certain items */

.IR { background-color: rgb(207,110,110); }
.RH { background-color: rgb(201,175,94); }
.RE { background-color: rgb(148,218,78); }
.OS { background-color: rgb(38,217,83); }
.PD { background-color: rgb(75,195,195); }
.AU { background-color: rgb(90,125,231); }
.PT { background-color: rgb(168,108,229); }
.AG { background-color: rgb(163,67,139); }
.RU { background-color: rgb(0,0,0); }
.CU { background-color: rgb(255,128,64); }
.U  { background-color: rgb(247,255,84); }
.ZN { background-color: rgb(160,160,160); }

.IR { background-color: hsl(0, 50%, 62%); }
.RH { background-color: hsl(45, 50%, 58%); }
.RE { background-color: hsl(90, 65%, 58%); }
.OS { background-color: hsl(135, 70%, 50%); }
.PD { background-color: hsl(180, 50%, 53%); }
.AU { background-color: hsl(225, 75%, 63%); }
.PT { background-color: hsl(270, 70%, 66%); }
.AG { background-color: hsl(315, 42%, 45%); }
.RU { background-color: hsl(0, 0%, 0%); }
.CU { background-color: hsl(20.1, 100%, 62.5%); }
.U  { background-color: hsl(62.8, 100%, 66.5%); }
.ZN { background-color: hsl(0, 0%, 62.7%); }

/* Generic bar colors when specified directly within arguments */


.R  { background-color: rgb(255,91,132); }
.R  { background-color: hsl(345, 100%, 67.8%); }

.O  { background-color: rgb(255,132,91); }
.O  { background-color: hsl(15, 100%, 67.8%); }

.S  { background-color: rgb(204,170,0); }
.S  { background-color: hsl(50, 100%, 40%); }

.Y  { background-color: rgb(240,255,91); }
.Y  { background-color: hsl(65.3, 100%, 67.8%); }

.G  { background-color: rgb(97,222,140); }
.G  { background-color: hsl(140.7, 65%, 62.5%); }

.C  { background-color: rgb(92,226,211); }
.C  { background-color: hsl(173, 70%, 62.5%); }

.B  { background-color: rgb(87,161,225); }
.B  { background-color: hsl(190, 70%, 61.2%); }

.M  { background-color: rgb(239,107,173); }
.M  { background-color: hsl(330, 80%, 67.8%); }

#empty-ad-space1, #empty-ad-space2, #empty-ad-space3
{
	display: none;
}

.mascotSlideshowContainer, .promosSlideshowContainer, .birthdaySlideshowContainer, .genericSlideshowContainer
{
	visibility: hidden;
	/*visibility: visible;*/
}

.cc
/*artwork for Creative Commons symbol*/
{
	position: relative;
	top: 5px;
	margin: 0px 4px 0px 0px;
	opacity: 0.4;
}

.flourish
{
	background-repeat: no-repeat;
	background-position: left top, right top, left bottom, right bottom;
}

.top-return
{
	display:table;
	width:100%;
	margin: -5px 0px -10px 0px;
}
.top-return-itemL
{
	display:table-cell;
	text-align:left;
}
.top-return-itemR
{
	display:table-cell;
	text-align:right;
}

.CC-logo /* The bitmapped CC logo  */
{
	position:relative;
	top:4px;
}

h6 /* used for the outgoing link icon */
{
	display:inline;
	position:relative;
	top:2px;
	opacity: 0.7;
}

.cycle-slideshow a:hover, .cycle-slideshow a:active
{
	zoom: 1;  /* gives the object layout, which many IEs need */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 8 */
	filter: alpha(opacity=80); /* IE 5-7 (Always put this under the -ms-filter version.)*/
	-moz-opacity: 0.80; /* Older stuff */
	-khtml-opacity: 0.80; /* Safari 1.x */
	opacity: 0.80; /* "Good" browsers */
}

.c
{
	font-size:120%;
	position:relative;
	top:2px;
}