/* ================================================= */

body
{
	margin: 0;
	padding: 0;
	font-family: "Trebuchet MS", "Source Sans Pro", "Fira Sans", "Meiryo", "Lucida Sans", sans-serif;
}

*, *:before, *:after
{
	box-sizing: border-box;
}

img
{
	box-sizing: content-box;
}

select
{
	box-sizing: content-box; /* bug fix for certain browsers */
}

button
{
	cursor: pointer;
}

input[type=submit]
{
	cursor: pointer;
}

/* ------------------------------------------------- */
/* Variants */

body.L, body.LL, body.DL, body.BL { background-color: #5FE3F2; }
body.D, body.LD, body.DD, body.BD { background-color: #006079; }
body.B, body.LB, body.DB, body.BB { background-color: #0B3547; }

body.L, body.LL, body.LD, body.LB { color: #1A1468; }
.L a:link, .LL a:link, .LD a:link, .LB a:link { color: #B70000; }
.L a:visited, .LL a:visited, .LD a:visited, .LB a:visited { color: #780036; }
.L a:hover, .LL a:hover, .LD a:hover, .LB a:hover { color: #FF0000; }
.L a:active, .LL a:active, .LD a:active, .LB a:active { color: #FF0000; }
.L b, .LL b, .LD b, .LB b { }
.L b.bold, .LL b.bold, .LD b.bold, .LB b.bold { color: #880000; }
.L label:hover, .LL label:hover, .LD label:hover, .LB label:hover { color: #880000; }

body.D, .DL, .DD, .DB { color: #DDEEFF; }
.D a:link, .DL a:link, .DD a:link, .DB a:link { color: #57EDFF; }
.D a:link b, .DL a:link b, .DD a:link b, .DB a:link b { color: #57EDFF; }
.D a:visited, .DL a:visited, .DD a:visited, .DB a:visited { color: #E5A6FC; }
.D a:visited b, .DL a:visited b, .DD a:visited b, .DB a:visited b { color: #E5A6FC; }
.D a:hover, .DL a:hover, .DD a:hover, .DB a:hover { color: #FFD801; }
.D a:hover b, .DL a:hover b, .DD a:hover b, .DB a:hover b { color: #FFD801; }
.D a:active, .DL a:active, .DD a:active, .DB a:active { color: #FFD801; }
.D a:active b, .DL a:active b, .DD a:active b, .DB a:active b { color: #FFD801; }
.D b, .DL b, .DD b, .DB b { color: #E5F2FF; }
.D b.bold, .DL b.bold, .DD b.bold, .DB b.bold { color: #81F0FD; }
.D b.bright, .DL b.bright, .DD b.bright, .DB b.bright { color: #FFFFFF; }
.D label:hover, .DL label:hover, .DD label:hover, .DB label:hover { color: #FFD801; }

body.B, body.BL, body.BD, body.BB { color: #E0F0FF; }
.B a:link, .BL a:link, .BD a:link, .BB a:link { color: #3DE3F7; }
.B a:link b, .BL a:link b, .BD a:link b, .BB a:link b { color: #3DE3F7; }
.B a:visited, .BL a:visited, .BD a:visited, .BB a:visited { color: #E5A6FC; }
.B a:visited b, .BL a:visited b, .BD a:visited b, .BB a:visited b { color: #E5A6FC; }
.B a:hover, .BL a:hover, .BD a:hover, .BB a:hover { color: #FFD801; }
.B a:hover b, .BL a:hover b, .BD a:hover b, .BB a:hover b { color: #FFD801; }
.B a:active, .BL a:active, .BD a:active, .BB a:active { color: #FFFFFF; }
.B a:active b, .BL a:active b, .BD a:active b, .BB a:active b { color: #FFFFFF; }
.B b, .BL b, .BD b, .BB b { color: #E5F2FF; }
.B b.bold, .BL b.bold, .BD b.bold, .BB b.bold { color: #81F0FD; }
.B b.bright, .BL b.bright, .BD b.bright, .BB b.bright { color: #FFFFFF; }
.B label:hover, .BL label:hover, .BD label:hover, .BB label:hover { color: #FFD801; }

/* ================================================= */
/* Page content */
/* ================================================= */

.content
{
	text-align: justify;
	line-height: 1.1;
}

.content:after
{
	content: "";
	display: block;
	clear: both;
}

.content .center
{
	text-align: center;
}

.content ul
{
	list-style: url("Icons/RedBullet.GIF");
}

.content ul ul
{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.content li
{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.hr
{
	font-size: 0;
	line-height: 0;
	height: 2px;
	border-top: 2px solid #B70000;
}

body.panels .hr
{
	/* Can't use em because font size is 0 */
	margin: -8px auto;
}

body.nopanels .hr
{
	/* Can't use em because font size is 0 */
	margin: 8px auto;
}

.content dt
{
	margin-top: 0.2em;
	margin-bottom: 0.2em;
}

.content dd
{
	margin-top: 0.2em;
	margin-bottom: 0.2em;
}

.content ul p
{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.content dl p
{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.ellipsis
{
	white-space: nowrap;
}

.font_sm1
{
	font-size: 80%;
}

.font_sm2
{
	font-size: 70%;
}

.font_lg1
{
	font-size: 125%;
}

.font_lg2
{
	font-size: 150%;
}

.redline
{
	border-bottom: 2px solid #B70000;
	margin-bottom: 2px;
}

a.external
{
	white-space: nowrap;
}

a.external:before
{
	content: url("Icons/External.GIF");
	vertical-align: bottom;
}

/* ================================================= */
/* Red header bar along the top of every page */
/* ================================================= */

.site_header
{
	background-color: #A40000;
	background-image: url("Graphics/TopBarBG.PNG"); /* Fallback for older browsers */
	background-position: center bottom;
	background-repeat: repeat-x;
	background-size: auto 100%; /* Slightly newer browsers */
	background-image: linear-gradient(to bottom, #A40000 0%, #CC0000 100%); /* Newer browsers */
}

.site_header .table
{
	display: table;
	border-collapse: collapse;
	width: 100%;
	height: 40px;
}

.site_header .table > div
{
	display: table-cell;
	vertical-align: bottom;
}

.site_headerbg
{
	width: 100%;
	height: 6px;
	margin-bottom: -6px;
	background-image: url("Graphics/TopBarB.PNG");
	background-repeat: repeat-x;
}

.site_header .table .home,
.site_header .table .up
{
	width: 1%; /* Force collapse */
}

.site_header .table .home a,
.site_header .table .tophome span,
.site_header .table .up a
{
	display: block;
	position: relative;
	cursor: pointer;
	font-size: 8pt;
	line-height: 1;
	text-transform: uppercase;
	font-family: "Tahoma", "Trebuchet MS", sans-serif;
	font-weight: bold;
	color: #E6F6FE;
}

.site_header .table .home img,
.site_header .table .tophome img,
.site_header .table .up img
{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}

.site_header .table .home a:after,
.site_header .table .up a:after
{
	position: absolute;
	left: 0;
	top: 0;
	display: none;
}

.site_header .table .home a:hover,
.site_header .table .up a:hover
{
	color: #FFD801;
}

.site_header .table .home a:hover:after, /* Targets the :after but when hovering over the parent link */
.site_header .table .up a:hover:after /* Might not be supported by older browsers but should fail gracefully? */
{
	display: block;
}

.site_header .table .home a,
.site_header .table .home a:after
{
	width: 132px;
	height: 40px;
}

.site_header .table .up a,
.site_header .table .up a:after
{
	width: 47px;
	height: 18px;
}

.site_header .table .home a:after
{
	content: url("Graphics/TopBarLogo-h.GIF?v=2");
}

.site_header .table .up a:after
{
	content: url("Graphics/TopBarUp-h.GIF");
}

.site_header .table .title,
.site_header .table .nolinks,
.site_header .table .toptitle
{
	text-transform: uppercase;
	font-family: "Tahoma", "Trebuchet MS", sans-serif;
	font-weight: bold;
	white-space: nowrap;
	text-align: left;
}

.site_header .table .title,
.site_header .table .nolinks
{
	padding-left: 5%;
}

.site_header .table .nolinks
{
	vertical-align: middle;
}

.site_header .table .toptitle
{
	text-align: center;
	vertical-align: middle;
	font-size: 150%;
}

.site_header .table .title .block
{
	max-width: 850px;
	margin: 0 auto;
}

.site_header h1
{
	display: block;
	font-size: 100%;
	margin: 0;
	padding: 0;
	line-height: 1;
	color: #E6F6FE;
	text-shadow: 0px 0px 1px #6DC0CF, 0px 2px 0px #6B6B6B;
}

.site_header .table .links
{
	list-style: none;
	padding: 0;
	margin: 0;
	line-height: 0.75;
	min-height: 0.5em;
	z-index: 1;
}

.site_header .table .links li
{
	display: inline-block;
	font-size: 70%;
	margin-right: 4px;
	padding-left: 18px;
	min-height: 15px;
	color: #E6F6FE;
	background-image: url("Graphics/TopBullet.GIF");
	background-position: left bottom;
	background-repeat: no-repeat;
}

.site_header .table .links li:last-child
{
	margin-right: 0;
}

.site_header .table .links a
{
	text-decoration: none;
	color: #FFD801;
}

.site_header .table .links a:hover
{
	text-decoration: underline;
	color: #FFFFFF;
}

.site_header .table .firstline
{
	margin-bottom: 0;
}

.site_header .table .firstline li
{
	min-height: 0;
	background-image: url("Graphics/TopBullet2.GIF");
	background-position: left center;
}

.site_header .table .tophome
{
	width: 190px; /* Match arbitrary number below to center */
}

.site_header .table .face
{
	width: 190px; /* Arbitrary number; determines how "centered" the title is on the page */
	vertical-align: top;
	position: relative;
	pointer-events: none;
}

.site_header .table .face div
{
	position: absolute;
	top: 0;
	right: 0;
	width: 83px;
	height: 46px;
	max-width: 100%;
	margin-left: auto;
	background-repeat: no-repeat;
}

/* ------------------------------------------------- */
/* Variants */

.site_header .face div { background-image: url("Graphics/Face.GIF?v=2"); }
.Orig .site_header .face div { background-image: url("Graphics/O-Face.GIF?v=2"); }
.X .site_header .face div { background-image: url("Graphics/X-Face.GIF?v=2"); }
.Leg .site_header .face div { background-image: url("Graphics/L-Face.GIF?v=2"); }
.EXE .site_header .face div { background-image: url("Graphics/E-Face.GIF?v=2"); }
.Z .site_header .face div { background-image: url("Graphics/Z-Face.GIF?v=2"); }
.ZX .site_header .face div { background-image: url("Graphics/ZX-Face.GIF?v=2"); }
.Star .site_header .face div { background-image: url("Graphics/S-Face.GIF?v=2"); }

/* ================================================= */
/* The site logo / header at the top of the content (panels version) */
/* ================================================= */

body.panels .site_title
{
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1.5em;
}

body.panels .site_title > div
{
	position: relative;
	display: inline-block;
	min-width: 600px;
	white-space: nowrap;
	height: 101px;
	padding-left: 112px;
	padding-right: 24px;
	background-image: url("Graphics/TitleLogoBG.PNG"); /* For older browsers */
	background-repeat: no-repeat; /* For older browsers */
	background-image: url("Graphics/TitleLogoBG.PNG"), url("Graphics/TitleR.PNG");
	background-repeat: no-repeat, no-repeat;
	background-position: left top, right top;
}

body.panels .site_title .logo
{
	position: absolute;
	left: 0;
	top: 18px;
	width: 112px;
	height: 49px;
	background-repeat: no-repeat;
}

body.panels .site_title .borders
{
	height: 77px;
	padding-top: 7px;
	background-image: url("Graphics/TitleOuter.PNG");
	background-repeat: repeat-x;
}

body.panels .site_title h2
{
	margin: 0;
	padding: 0;
	height: 56px;
	padding-left: 12px;
	padding-right: 14px;
	padding-top: 5px;
	vertical-align: middle; /* valign=center */
	font-family: "Tahoma", "Trebuchet MS", sans-serif;
	font-size: 160%;
	font-weight: bold;
	color: #E6F6FE;
	text-transform: uppercase;
	background-image: url("Graphics/TitleInner.PNG"); /* For older browsers */
	background-repeat: repeat-x; /* For older browsers */
	background-image: url("Graphics/TitleL.PNG"), url("Graphics/TitleInner.PNG");
	background-repeat: no-repeat, repeat-x;
	text-shadow: 1px 1px 2px #021216;
}

body.panels .site_title h2:before
{
	/* HACK: for valign=center */
	content: "";
	display: inline-block;
	width: 0;
	height: 100%;
	vertical-align: middle;
}

/* ------------------------------------------------- */
/* Variants */

body.panels.L .site_title h2,
body.panels.LL .site_title h2,
body.panels.LD .site_title h2,
body.panels.LB .site_title h2 { color: #1A1468; text-shadow: 1px 1px 2px #3A98A3; }

.site_title .logo { background-image: url("Graphics/TitleLogo.GIF"); }
.Orig .site_title .logo { background-image: url("Graphics/O-TitleLogo.GIF"); }
.X .site_title .logo { background-image: url("Graphics/X-TitleLogo.GIF"); }
.Leg .site_title .logo { background-image: url("Graphics/L-TitleLogo.GIF"); }
.EXE .site_title .logo { background-image: url("Graphics/E-TitleLogo.GIF"); }
.Z .site_title .logo { background-image: url("Graphics/Z-TitleLogo.GIF"); }
.ZX .site_title .logo { background-image: url("Graphics/ZX-TitleLogo.GIF"); }
.Star .site_title .logo { background-image: url("Graphics/S-TitleLogo.GIF"); }

.LL .site_title .bg, .LD .site_title .bg, .LB .site_title .bg { background-color: #5FE3F2; }
.DL .site_title .bg, .DD .site_title .bg, .DB .site_title .bg { background-color: #006079; }
.BL .site_title .bg, .BD .site_title .bg, .BB .site_title .bg { background-color: #0B3547; }

/* ================================================= */
/* The site logo / header at the top of the content (nopanels version) */
/* ================================================= */

body.nopanels .site_title
{
	margin: 1.5em auto 1em auto;
	text-align: center;
}

body.nopanels .site_title:before
{
	display: block;
	margin: 0 auto;
}

body.nopanels h2
{
	margin: 0.2em auto 1em auto;
	padding: 0;
	font-family: "Tahoma", "Trebuchet MS", sans-serif;
	font-size: 160%;
	font-weight: bold;
	color: #E6F6FE;
	text-transform: uppercase;
}

/* ------------------------------------------------- */
/* Variants */

.L .site_title:before { content: url("Logos/LMMHomePage.GIF"); }
.D .site_title:before { content: url("Logos/DMMHomePage.GIF"); }
.B .site_title:before { content: url("Logos/DMMHomePage.GIF"); }

body.L.nopanels h2 { text-shadow: 0px 0px 1px black, 0px 2px 0px #878787; }
body.D.nopanels h2 { text-shadow: 0px 0px 1px black, 0px 2px 0px #9F9F9F; }
body.B.nopanels h2 { text-shadow: 0px 0px 1px black, 0px 2px 0px #9F9F9F; }

/* ================================================= */
/* The global content wrappers that manage how wide the page can be */
/* ================================================= */

body.panels .panel_bg > .content
{
	margin: 1.5em 2em;
}

body.nopanels .site_content
{
	max-width: 1050px;
	margin: 0 auto;
}

body.nopanels .site_content > .content
{
	max-width: 900px;
	margin: 1.5em auto;
}

/* ================================================= */
/* Panels */
/* ================================================= */

body.panels .panel_top,
body.panels .panel,
body.panels .panel_bottom
{
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

body.panels .site_content.alt
{
	margin-top: 1.5em;
}

.panel_top
{
	min-height: 12px;
	padding-left: 11px;
	padding-right: 11px;
	background-image: url("Graphics/MainTL.GIF"), url("Graphics/MainTR.GIF");
	background-repeat: no-repeat, no-repeat;
	background-position: left top, right top;
}

.panel_top div
{
	height: 12px;
	background-image: url("Graphics/MainB.PNG");
	background-repeat: repeat-x;
	background-position: right top; /* Just for graphical variety */
}

.panel_top.leftbar
{
	padding-left: 189px;
	padding-right: 11px;
	background-image: url("Graphics/MainTTL.GIF"); /* For older browsers */
	background-repeat: no-repeat; /* For older browsers */
	background-position: 11px top; /* For older browsers */
	background-image: url("Graphics/MainTTL.GIF"), url("Graphics/MainTL.GIF"), url("Graphics/MainTR.GIF");
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: 11px top, left 15px, right top;
}

.panel_top.leftbar div
{
	height: 25px;
	background-image: url("Graphics/MainT.GIF");
	background-repeat: repeat-x;
}

.panel
{
	padding-left: 12px;
	padding-right: 12px;
	background-image: url("Graphics/MainL.PNG"), url("Graphics/MainR.PNG");
	background-repeat: repeat-y, repeat-y;
	background-position: left top, right top;
}

.panel_bg
{
	position: relative;
	padding: 0.5em 0; /* Required to prevent margin collapsing at top and bottom, which produces a blank gap */
}

.site_content .panel_bg:before
{
	content: "";
	display: block;
	position: absolute;
	top: -2px;
	width: 100%;
	height: 32px;
	background-image: url("Graphics/MainITL.PNG"), url("Graphics/MainITR.PNG");
	background-repeat: no-repeat, no-repeat;
	background-position: left top, right top;
}

.site_content .panel_bg:after
{
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 32px;
	background-image: url("Graphics/MainIBL.PNG"), url("Graphics/MainIBR.PNG");
	background-repeat: no-repeat, no-repeat;
	background-position: left bottom, right bottom;
}

.panel_bottom
{
	min-height: 17px;
	padding-left: 11px;
	padding-right: 11px;
	background-image: url("Graphics/MainBL.PNG"), url("Graphics/MainBR.PNG");
	background-repeat: no-repeat, no-repeat;
	background-position: left bottom, right bottom;
}

.panel_bottom div
{
	content: "";
	display: block;
	height: 17px;
	background-image: url("Graphics/MainB.PNG");
	background-repeat: repeat-x;
}

/* ------------------------------------------------- */
/* Variants */

.LL .panel_bg, .LD .panel_bg, .LB .panel_bg { background-color: #5FE3F2; }
.DL .panel_bg, .DD .panel_bg, .DB .panel_bg { background-color: #006079; }
.BL .panel_bg, .BD .panel_bg, .BB .panel_bg { background-color: #0B3547; }

/* ================================================= */
/* Site footer */
/* ================================================= */

body.panels .site_footer
{
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
	margin-bottom: 0.5em;
	text-align: center;
}

body.nopanels .site_footer
{
	margin-top: 2em;
	margin-bottom: 1em;
	padding-top: 0.5em;
	border-top: 2px solid #B70000;
	text-align: center;
}

body.nopanels .site_footer > div
{
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.site_footer .panel_bg
{
	padding-top: 0.6em;
	padding-bottom: 0.75em;
	line-height: 1.2;
}

.site_footer .links
{
	margin: 0;
	padding: 0;
	font-weight: bold;
	list-style: none;
}

.site_footer .links li
{
	display: inline; /* For older browsers */
	display: inline-block;
	vertical-align: middle;
	white-space: nowrap;
}

.site_footer .links li:before
{
	content: "";
	padding-left: 16px;
	background-image: url("Icons/RedDot.GIF");
	background-repeat: no-repeat;
	background-position: center center;
	vertical-align: middle;
}

.site_footer .links li:first-child:before
{
	background-image: url("Graphics/BracketL.GIF");
}

.site_footer .links li:last-child:after
{
	content: "";
	padding-left: 16px;
	background-image: url("Graphics/BracketR.GIF");
	background-repeat: no-repeat;
	background-position: center center;
	vertical-align: middle;
}

.site_footer .copyright
{
	font-size: 80%;
}

/* ================================================= */
/* Page H1 header bar */
/* ================================================= */

.header
{
	clear: both;
	position: relative;
	background-color: #B70000;
	background-image: url("Graphics/HeaderBG.GIF");
	background-repeat: repeat-x;
	padding-top: 1px;
}

body.panels .header
{
	padding-left: 2em;
	padding-right: 2em;
}

.header div
{
	position: relative;
	padding-top: 1px;
	padding-bottom: 1px;
}

body.nopanels .header div
{
	max-width: 900px;
	margin: 0 auto;
}

.headerbg
{
	height: 7px;
	margin-bottom: -7px; /* Pull in to make the margin look consistent */
	background-image: url("Graphics/HeaderB.PNG");
	background-repeat: repeat-x;
}

.header:before
{
	content: "";
	display: block;
	position: absolute;
	top: 1px;
	left: 0;
	width: 8px;
	height: 100%;
	background-repeat: no-repeat;
	background-position: left center;
	background-image: url("Graphics/HeaderL.GIF");
}

.header:after
{
	content: "";
	display: block;
	position: absolute;
	top: 1px;
	right: 0;
	width: 8px;
	height: 100%;
	background-repeat: no-repeat;
	background-position: left center;
	background-image: url("Graphics/HeaderR.GIF");
}

.header:nth-child(3n):before,
.header:nth-child(4n):before
{
	background-image: url("Graphics/HeaderL2.GIF");
}

.header:nth-child(2n):after,
.header:nth-child(5n):after
{
	background-image: url("Graphics/HeaderR2.GIF");
}

.header h3,
.story h3
{
	margin: 0;
	padding: 0;
	font-size: 110%;
	line-height: normal;
	font-weight: bold;
	font-family: "Tahoma", "Trebuchet MS", sans-serif;
	text-transform: uppercase;
	color: #E6F6FE;
	text-shadow: -1px -1px 1px #770000, 1px 1px 1px #F43030;
}

.header .top,
.header .help
{
	display: block;
	position: absolute;
	cursor: pointer;
	height: 18px;
	font-size: 12px;
	line-height: 18px;
	text-transform: uppercase;
	font-family: "Tahoma", "Trebuchet MS", sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	color: #280000;
	bottom: 0;
}

.header .top:link,
.header .top:visited,
.header .help:link,
.header .help:visited
{
	color: #280000;
}

.header .top:hover,
.header .help:hover
{
	color: #FFD801;
}

.header .top img,
.header .help img
{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}

.header .top:after,
.header .help:after
{
	position: absolute;
	left: 0;
	top: 0;
	display: none;
}

.header .top:hover:after,
.header .help:hover:after
{
	display: block;
}

.header .top,
.header .top:after
{
	width: 49px;
	height: 18px;
}

.header .help,
.header .help:after
{
	width: 60px;
	height: 18px;
}

.header .top
{
	right: 0;
}

.header .help
{
	right: 54px;
}

.header .top:after
{
	content: url("Graphics/HeaderTop-h.GIF");
}

.header .help:after
{
	content: url("Graphics/HeaderHelp-h.GIF");
}

/* ================================================= */
/* Page "STORY" header bar */
/* ================================================= */

.story
{
	clear: both;
	background-image: url("Graphics/StoryBG.PNG");
	background-repeat: no-repeat;
	background-position: left center;
	width: 350px;
	height: 32px;
	padding: 0 2em;
	padding-bottom: 6px;
	margin-bottom: -8px;
}

.story h3
{
	display: inline-block;
	vertical-align: middle; /* valign=center */
}

.story:before
{
	/* HACK: for valign=center */
	content: "";
	display: inline-block;
	width: 0;
	height: 100%;
	vertical-align: middle;
}

/* ================================================= */
/* Game logo at top of Game Hints pages */
/* ================================================= */

.gamelogow
{
	max-width: 850px;
	max-width: calc(850px + 4em);
}

.gamelogo
{
	display: table;
	border-collapse: collapse;
	margin: 1.5em auto;
	height: 9em; /* HACK: Needed to make table cells be 100% height but breaks horribly in browsers that don't understand display: table */
}

.gamelogo > div
{
	display: table-cell;
	vertical-align: top;
	height: 100%;
}

.gamelogo .body
{
	background-image: url("Graphics/GameLogoL.GIF"), url("Graphics/GameLogoR.GIF");
	background-position: top left, top right;
	background-repeat: repeat-y, repeat-y;
	padding: 0 8px;
}

.gamelogo .bottom
{
	background-image: url("Graphics/GameLogoBL.PNG"), url("Graphics/GameLogoBR.PNG"), url("Graphics/GameLogoB.PNG");
	background-position: left top, right top, center top;
	background-repeat: no-repeat, no-repeat, repeat-x;
	padding: 0 8px;
	height: 14px;
}

.gamelogo .buttons
{
	display: table;
	border-collapse: collapse;
	width: 100%;
	font-size: 0; /* Prevent gap */
}

.gamelogo .buttons:before
{
	content: url("Graphics/GameLogoTL.GIF");
	display: table-cell;
	width: 8px;
}

.gamelogo .buttons:after
{
	content: url("Graphics/GameLogoTR.GIF");
	display: table-cell;
	width: 8px;
}

.gamelogo .buttons .gh,
.gamelogo .buttons .db
{
	display: table-cell;
	position: relative;
	vertical-align: middle;
	width: 50%;
	height: 28px;
	text-align: center; /* align=center */
	background-image: url("Graphics/GameLogoT.GIF");
	background-repeat: repeat-x;
}

.gamelogo .buttons .db
{
	background-position: 32px 0px;
}

.gamelogo .buttons a,
.gamelogo .buttons span
{
	display: inline-block;
	width: 120px;
	height: 28px;
	padding-top: 1px;
	vertical-align: middle; /* valign=center */
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	font-family: "Tahoma", "Trebuchet MS", sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	text-shadow: -1px -1px 1px #930000, 1px 1px 1px #FE6464;
	background-repeat: no-repeat;
}

.gamelogo .buttons a:before,
.gamelogo .buttons span:before
{
	/* HACK: for valign=center */
	content: "";
	display: inline-block;
	width: 0;
	height: 100%;
	vertical-align: middle;
}

.gamelogo .buttons a:link,
.gamelogo .buttons a:visited
{
	color: #FFFFFF;
}

.gamelogo .buttons a:hover
{
	color: #FFFF00;
}

.gamelogo .buttons .gh a,
.gamelogo .buttons .gh span
{
	padding-left: 12px;
}

.gamelogo .buttons .gh a
{
	background-image: url("Graphics/GameLogoGH.GIF");
}

.gamelogo .buttons .gh a:hover
{
	background-image: url("Graphics/GameLogoGH-h.GIF");
}

.gamelogo .buttons .gh span
{
	background-image: url("Graphics/GameLogoGHD.GIF");
}

.gamelogo .buttons .db a,
.gamelogo .buttons .db span
{
	padding-right: 12px;
	background-position: right top;
}

.gamelogo .buttons .db a
{
	background-image: url("Graphics/GameLogoDB.GIF");
}

.gamelogo .buttons .db a:hover
{
	background-image: url("Graphics/GameLogoDB-h.GIF");
}

.gamelogo .buttons .db span
{
	background-image: url("Graphics/GameLogoDBD.GIF");
}

.gamelogo .logo
{
	min-width: 280px;
	min-height: 9em;
	text-align: center;
	background-color: #330000;
	background-image: url("Graphics/GameLogoImgBG.GIF");
}

.gamelogo .logo img
{
	display: block;
	margin: 0 auto;
	max-width: 100%;
}

.gamelogo .logo div
{
	width: 318px;
	color: #FFFFFF;
	font-size: 150%;
	font-weight: bold;
	font-family: "Tahoma", "Trebuchet MS", sans-serif;
	text-align: center;
	text-transform: uppercase;
	/* HACK: Pull the text up to put it closer to logo image */
	margin-top: -8px;
	padding-bottom: 8px;
}

.gamelogo .stats
{
	display: table;
	border-collapse: collapse;
	width: 100%;
	background-color: #E6F6FE;
}

.gamelogo .stats > div
{
	display: table-cell;
	border: 1px solid #970000;
	text-align: center; /* align=center */
	font-size: 70%;
}

.gamelogo .stats.full > div
{
	width: 25%;
}

.gamelogo .stats.half > div
{
	width: 50%;
}

.gamelogo .stats > div > b
{
	display: block;
	padding: 2px 0;
	background-color: #B70000;
	background-image: url("Graphics/GameLogoBG.GIF");
	color: #E6F6FE;
	font-weight: bold;
	text-transform: uppercase;
}

.gamelogo .stats > div > div
{
	padding: 2px;
	background-color: #E6F6FE;
	color: #970000;
}

.gamelogo .stats a:link,
.gamelogo .stats a:visited
{
	color: #970000;
}

.gamelogo .toc .arm
{
	height: 28px;
	background-image: url("Graphics/GameLogoArm.GIF");
	background-repeat: repeat-x;
}

.gamelogo .armtr
{
	width: 12px;
	background-image: url("Graphics/GameLogoArmTR.PNG"), url("Graphics/GameLogoArmBR.PNG");
	background-repeat: no-repeat, no-repeat;
	background-position: left top, left bottom;
}

.gamelogo .armtr > div
{
	width: 12px;
	margin-top: 28px;
	height: calc(100% - 42px); /* 28px - 14px */
	background-image: url("Graphics/GameLogoArmR.PNG");
	background-repeat: repeat-y;
}

.gamelogo .toc .shadow
{
	background-image: url("Graphics/GameLogoB.PNG");
	background-position: left top;
	background-repeat: repeat-x;
	height: 14px;
	padding: 0;
}

.gamelogo .toc ul
{
	display: block;
	height: calc(100% - 42px); /* 28px - 14px */
	margin: 0;
	padding: 8px 0;
	padding-right: 1em;
}

.gamelogo .toc ul
{
	list-style: none;
}

.gamelogo .toc li
{
	margin: 0.2em 0;
	font-size: 90%;
	color: #DDEEFF;
	padding-left: 25px;
	white-space: nowrap;
	background-image: url("Graphics/GameLogoBullet.GIF");
	background-repeat: no-repeat;
	background-position: left center;
}

.gamelogo .toc a,
.gamelogo .toc a:link,
.gamelogo .toc a:visited
{
	color: #DDEEFF;
	text-decoration: none;
}

.gamelogo .toc a:hover
{
	color: #FFD801;
	text-decoration: underline;
}

/* ------------------------------------------------- */
/* Variants */

.LL .gamelogo .toc ul, .LD .gamelogo .toc ul, .LB .gamelogo .toc ul { background-color: #006079; }
.DL .gamelogo .toc ul, .DD .gamelogo .toc ul, .DB .gamelogo .toc ul { background-color: #0B3547; }
.BL .gamelogo .toc ul, .BD .gamelogo .toc ul, .BB .gamelogo .toc ul { background-color: #0B3547; }

/* ================================================= */
/* Screen shots */
/* ================================================= */

.screenshot
{
	display: table;
	border-collapse: collapse;
	position: relative;
	margin: 0.5em 1em;
	box-shadow: 2px 2px 6px rgba(0,0,0,0.9);
	font-size: 75%;
}

.screenshot.right
{
	float: right;
	clear: right;
	margin-right: 0;
}

.screenshot.left
{
	float: left;
	clear: left;
	margin-left: 0;
}

.screenshot > div
{
	display: table-row;
}

.screenshot .img,
.screenshot .caption
{
	display: table-cell;
	text-align: center;
	background-color: #006079;
}

.screenshot img
{
	display: block;
	margin: 0 auto;
	border: 1px solid #990000;
}

.screenshot .caption
{
	margin: 0;
	padding: 4px;
	width: 128px; /* HACK: Forces text to wrap to size of image */
}

/* ------------------------------------------------- */
/* Variants */

.L .screenshot .caption, .LL .screenshot .caption, .LD .screenshot .caption, .LB .screenshot .caption { color: #DDEEFF; }
.DL .screenshot .img, .DD .screenshot .img, .DB .screenshot .img { background-color: #0B3547; }
.DL .screenshot .caption, .DD .screenshot .caption, .DB .screenshot .caption { background-color: #0B3547; }
.DL.Orig .screenshot .img, .DD.Orig .screenshot .img, .DB.Orig .screenshot .img { background-color: #0B3547; }
.DL.Orig .screenshot .caption, .DD.Orig .screenshot .caption, .DB.Orig .screenshot .caption { background-color: #0B3547; }
.DL.X .screenshot .img, .DD.X .screenshot .img, .DB.X .screenshot .img { background-color: #0B3547; }
.DL.X .screenshot .caption, .DD.X .screenshot .caption, .DB.X .screenshot .caption { background-color: #0B3547; }
.DL.Leg .screenshot .img, .DD.Leg .screenshot .img, .DB.Leg .screenshot .img { background-color: #0B3547; }
.DL.Leg .screenshot .caption, .DD.Leg .screenshot .caption, .DB.Leg .screenshot .caption { background-color: #0B3547; }
.DL.EXE .screenshot .img, .DD.EXE .screenshot .img, .DB.EXE .screenshot .img { background-color: #0B3547; }
.DL.EXE .screenshot .caption, .DD.EXE .screenshot .caption, .DB.EXE .screenshot .caption { background-color: #0B3547; }
.DL.Z .screenshot .img, .DD.Z .screenshot .img, .DB.Z .screenshot .img { background-color: #0B3547; }
.DL.Z .screenshot .caption, .DD.Z .screenshot .caption, .DB.Z .screenshot .caption { background-color: #0B3547; }
.DL.ZX .screenshot .img, .DD.ZX .screenshot .img, .DB.ZX .screenshot .img { background-color: #0B3547; }
.DL.ZX .screenshot .caption, .DD.ZX .screenshot .caption, .DB.ZX .screenshot .caption { background-color: #0B3547; }
.DL.Star .screenshot .img, .DD.Star .screenshot .img, .DB.Star .screenshot .img { background-color: #0B3547; }
.DL.Star .screenshot .caption, .DD.Star .screenshot .caption, .DB.Star .screenshot .caption { background-color: #0B3547; }

/* ================================================= */
/* A floated non-screenshot handled like a screen shot. */
/* ================================================= */

.floatright
{
	float: right;
	clear: right;
	margin-right: 0;
	margin-left: 0.5em;
}

/* ================================================= */
/* Stacked screen shots (assumes fancy) */
/* ================================================= */

.stacked
{
	float: right;
	clear: right;
	margin-right: 0;
}

/* ================================================= */
/* Icons such as smilie faces */
/* ================================================= */

img.icon,
img.emoticon
{
	vertical-align: baseline;
	/* Try to prevent icon from widening line height */
	line-height: 0;
}

a.icon,
span.icon
{
	line-height: 0;
	text-decoration: none;
}

a.icon img
{
	/* Wiggle-fit the button icons */
	margin-top: -1px;
	margin-bottom: -3px;
}

.icon.A img,
.icon.B img,
.icon.X img,
.icon.Y img,
.icon.Circle img,
.icon.Square img,
.icon.Triangle img
{
	margin-top: -1px;
	margin-bottom: -4px;
}

.icon.Up img,
.icon.Down img,
.icon.Left img,
.icon.Right img,
.icon.DownForward img
{
	margin-top: -1px;
	margin-bottom: -2px;
}

.icon.Play img
{
	margin-top: -1px;
	margin-bottom: 1px;
}

.icon.P img,
.icon.K img,
.icon.P2 img,
.icon.P3 img,
.icon.K2 img,
.icon.K3 img,
.icon.HP img,
.icon.HK img,
.icon.MP img,
.icon.MK img,
.icon.LP img,
.icon.LK img,
.icon.MvC-D img,
.icon.MvC-F img,
.icon.MvC-B img,
.icon.D-DF-F img,
.icon.D-DB-B img,
.icon.F-D-DF img
{
	margin-bottom: -1px;
}

/* ================================================= */
/* Splash image on the right side of the content area */
/* ================================================= */

.splash_right
{
	position: relative;
	float: right;
}

/* ================================================= */
/* Data items, displayed on Data Base pages */
/* ================================================= */

.datatable
{
	display: table;
	border-spacing: 0 0.8em;
	margin-top: -0.4em;
	margin-bottom: -0.2em;
	width: 100%;
	clear: both;
}

.datatable:first-child
{
	margin-top: -1em;
}

.dataitem
{
	display: table-row;
}

.dataitem > div
{
	display: table-cell;
	vertical-align: top;
}

.dataitem .circle
{
	width: 64px;
	text-align: right;
	position: relative;
	-webkit-direction: rtl;
	-ms-direction: rtl;
	direction: rtl;
}

.dataitem .circle:before
{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 32px;
	height: 32px;
	border: 2px solid #B70000;
	-moz-border-radius: 32px;
	-webkit-border-radius: 32px;
	border-radius: 32px;
}

.dataitem .circle > div
{
	display: inline-block;
	position: relative;
	width: 32px;
	height: 30px;
	overflow: visible;
	text-align: center;
	white-space: nowrap;
}

.dataitem .circle > div img
{
	vertical-align: middle; /* valign=center */
}

.dataitem .circle > div:before
{
	/* HACK: for valign=center */
	content: "";
	display: inline-block;
	width: 0;
	height: 100%;
	vertical-align: middle;
}

.dataitem .name
{
	font-weight: bold;
	text-transform: uppercase;
	text-align: left;
	padding-left: 4px;
	border-bottom: 2px solid #B70000;
}

.dataitem .desc
{
	padding-left: 4px;
	padding-top: 2px;
}

.dataitem .desc p
{
	margin: 0;
	margin-top: 0.5em;
}

.dataitem .stats
{
	width: 35%;
	float: right;
	margin-left: 0.75em;
	border: 2px solid #B70000;
}

.dataitem .stats .topbar
{
	display: table;
	border-collapse: collapse;
	width: 100%;
	font-family: "Tahoma", "Trebuchet MS", sans-serif;
	font-size: 80%;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #B70000;
	background-image: url("Graphics/DataItemBG.GIF");
}

.dataitem .stats .topbar .cell
{
	display: table-cell;
	width: 50%;
	text-align: center;
	padding: 2px;
}

.dataitem .stats .data
{
	text-align: left;
	font-size: 75%;
	line-height: 1.2;
	padding: 4px;
}

.dataitem .stats img
{
	float: right;
	margin-left: 2px;
}

/* ------------------------------------------------- */
/* Variants */

.LL .dataitem .name, .LD .dataitem .name, .LB .dataitem .name { color: #D70000; } /* TODO */
.DL .dataitem .name, .DD .dataitem .name, .DB .dataitem .name { color: #FFFFFF; }
.BL .dataitem .name, .BD .dataitem .name, .BB .dataitem .name { color: #FFFFFF; } /* TODO */

.LL .dataitem .stats, .LD .dataitem .stats, .LB .dataitem .stats { background-color: #006079; }
.DL .dataitem .stats, .DD .dataitem .stats, .DB .dataitem .stats { background-color: #0B3547; }
.BL .dataitem .stats, .BD .dataitem .stats, .BB .dataitem .stats { background-color: #0B3547; }

.LL .dataitem b, .LD .dataitem b, .LB .dataitem b { color: #D70000; } /* TODO */
.DL .dataitem b, .DD .dataitem b, .DB .dataitem b { color: #FFFFFF; }
.BL .dataitem b, .BD .dataitem b, .BB .dataitem b { color: #FFFFFF; } /* TODO */

/* ================================================= */
/* Description (character) items which are basically variants of data items
/* ================================================= */

.descitem
{
	margin-top: 0;
	margin-bottom: 0;
}

/* ================================================= */
/* The Master Game List table */
/* ================================================= */

.gamelist
{
	width: 100%;
	border-collapse: collapse;
	margin: 1em 0;
}

.gamelist tr.divider td
{
	padding: 0.5em;
}

.gamelist tr.row
{
	background-color: #B70000;
	background-image: url("Graphics/GameListBG.GIF"); /* Not supported in all browesrs */
	background-repeat: repeat-x;
	box-shadow: 0px 1px 1px rgba(0,0,0,0.5);
}

.gamelist th
{
	text-transform: uppercase;
	font-family: "Tahoma", "Trebuchet MS", sans-serif;
	line-height: normal;
	font-size: 65%;
	text-align: left;
	padding: 2px 4px;
	padding-top: 0;
	color: #E6F6FE;
	text-shadow: -1px -1px 1px #770000, 1px 1px 1px #F43030;
}

.gamelist th:first-child
{
	position: relative;
	padding-left: 3em;
	font-size: 80%;
}

.gamelist th:first-child:before
{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 7px;
	height: 100%;
	background-repeat: no-repeat;
	background-position: left center;
	background-image: url("Graphics/GameListL.GIF");
}

.gamelist td
{
	padding: 4px;
	vertical-align: baseline;
	font-size: 80%;
	line-height: 1.1;
}

.gamelist th:last-child
{
	position: relative;
	padding-right: 18px;
}

.gamelist th:last-child:after
{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 7px;
	height: 100%;
	background-repeat: no-repeat;
	background-position: right center;
	background-image: url("Graphics/GameListR.GIF");
}

.gamelist td.name
{
	padding-left: 2em;
	font-size: 100%;
	font-weight: bold;
}

.gamelist td.name:before
{
	content: " ";
	padding-left: 1em;
	margin-left: -1em;
	background-image: url("Icons/RedBullet.GIF");
	background-position: left center;
	background-repeat: no-repeat;
	background-size: auto 0.5em;
}

.gamelist .icon
{
	width: 1%;
	text-align: center;
}

.gamelist td.rating
{
	width: 1%;
	text-align: center;
	padding-right: 18px;
}

.gamelist .year
{
	text-align: center;
}

.gamelist td img
{
	padding-top: 2px;
	margin-bottom: -2px;
}

.gamelist td.rating img
{
	padding-top: 1px;
	margin-bottom: -1px;
}

.gamelist .row1
{
	background-image: url("Wallpaper/RowColorWP.GIF"); /* For older browsers */
	background-image: linear-gradient(to bottom, rgba(0,47,60,0.3) 0%, rgba(0,47,60,0.3) 100%); /* maintains wallpaper pattern */
}

.gamelist th.aka span
{
	display: none;
}

.gamelist th.aka:before
{
	content: "Also Known As";
}

/* ================================================= */
/* Per-section game lists that use title screens */
/* ================================================= */

.gamegrid
{
	display: table;
	border-collapse: collapse;
	width: 98%;
	margin: 1em;
	margin-right: 0;
}

.gamegrid .tr
{
	display: table-row;
}

.gamegrid .td
{
	display: table-cell;
	vertical-align: top;
	width: 50%;
}

.gamegrid .game
{
	display: table;
	border-collapse: collapse;
	width: 100%; /* For older browsers */
	width: calc(100% - 1em);
	margin: 0.5em;
}

.gamegrid .game .logo,
.gamegrid .game .gamehints,
.gamegrid .game .database
{
	display: table-cell;
	vertical-align: top;
}

.gamegrid .logo
{
	background-image: url("Graphics/GameBG.PNG");
	background-repeat: no-repeat;
	font-size: 100%; /* Base size for children to adjust to */
	/* 125% size */
	width: 162.5px;
	padding: 3.75px;
	background-size: 162.5px 101.25px;
}

.gamegrid .logo img
{
	vertical-align: bottom;
	margin-bottom: 0.5em;
	border: 0;
	/* 125% size */
	width: 125px;
	height: 93.75px;
}

.gamegrid h5
{
	margin: 0;
	padding: 2px 4px;
	font-weight: bold;
	font-size: 75%;
	white-space: nowrap;
	text-transform: uppercase;
	text-shadow: -1px -1px 0px #770000, 1px 1px 0px #F43030;
	color: #E6F6FE;
	background-color: #B70000;
	background-image: url("Graphics/GameT.GIF");
}

.gamegrid h4,
.gamegrid .logo div
{
	text-align: center;
	/* 125% size */
	width: 125px;
}

.gamegrid h4
{
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-weight: bold;
	text-transform: uppercase;
	/* Should gracefully degrade in browsers that don't support flex-box? */
	display: flex;
	justify-content: center;
}

.gamegrid .aka
{
	font-size: 80%;
	font-style: italic;
	line-height: 1;
	margin-top: 0.4em;
	margin-bottom: 0.4em;
	text-transform: uppercase;
	/* Should gracefully degrade in browsers that don't support flex-box? */
	display: flex;
	justify-content: center;
}

.gamegrid .systems
{
	font-size: 60%;
	margin-top: 0.5em;
}

.gamegrid .rating
{
	font-size: 60%;
}

.gamegrid .soon
{
	font-size: 80%;
	font-style: italic;
	margin: 0.5em;
}

.gamegrid ul
{
	font-size: 80%;
	list-style: none;
	margin: 0;
	padding-left: 1.5em;
	padding-right: 4px;
	text-transform: uppercase;
	text-align: left;
}

.gamegrid li
{
	margin: 0.1em 0;
}

.gamegrid li:before
{
	content: " ";
	padding-left: 1.3em;
	margin-left: -1.5em;
	background-image: url("Icons/BlueBullet.GIF");
	background-position: left center;
	background-repeat: no-repeat;
	background-size: auto 0.61em;
}

.gamegrid ul a
{
	white-space: nowrap;
	text-decoration: none;
}

.gamegrid ul a:hover
{
	text-decoration: underline;
}

/* ================================================= */
/* Review section on Game Hints pages */
/* ================================================= */

.review dt
{
	margin-top: 0.5em;
}

.review .overall .value
{
	font-size: 110%;
}

.review .plus
{
	margin-top: 1em;
}

/* Variants */

.L .review dt b, .LL .review dt b, .LD .review dt b, .LB .review dt b { color: #D70000; } /* TODO */
.D .review dt b, .DL .review dt b, .DD .review dt b, .DB .review dt b { color: #81F0FD; }
.B .review dt b, .BL .review dt b, .BD .review dt b, .BB .review dt b { color: #81F0FD; }

/* ================================================= */
/* Password images on Game Hints pages */
/* ================================================= */

.password
{
	display: table;
	margin: 0 2em;
}

.password > div
{
	display: table-row;
}

.password .th,
.password .td
{
	display: table-cell;
	vertical-align: middle;
}

.password .th
{
	white-space: nowrap;
}

.password .td
{
	padding-left: 0.5em;
}

.passwordbr
{
	display: none;
}

/* ================================================= */
/* Damage Data */
/* ================================================= */

.damagetable
{
}

.damagetable table
{
	margin: 1em auto;
}

.damagetable .heading th
{
	color: #FFFFFF;
	background-color: #B70000;
	background-image: url("Graphics/DataItemBG.GIF");
	min-width: 2em;
}

.damagetable .heading th:empty
{
	background: none;
}

.damagetable th,
.damagetable td
{
	text-align: center;
}

.damagetable td
{
	color: #DDEEFF;
	background-color: #2B93AF;
	background-image: url("Graphics/DamageBG.GIF");
}

.damagetable th.caption
{
	padding: 0 0.5em;
	white-space: nowrap;
}

.damagetable th.name
{
	text-align: right;
	padding-right: 0.3em;
}

.damagetable .divider td
{
	background: none;
	height: 1em;
}

div.notes
{
	display: table;
	border-collapse: collapse;
	margin: 0 auto;
}

div.notes > div
{
	display: table-cell;
}

div.notes p
{
	margin: 0;
	font-size: 80%;
	font-weight: bold;
}

div.notes ul
{
	margin: 0;
	padding-left: 2.2em;
	font-size: 80%;
}

dl.notes
{
	font-size: 80%;
	text-align: center;
}

/* ------------------------------------------------- */
/* Variants */

.D .damagetable th.name { color: #EBF5FF; }
.B .damagetable th.name { color: #EBF5FF; }

/* ================================================= */
/* Home Page */
/* ================================================= */

.homelogo
{
	text-align: center;
	overflow: hidden;
	margin: 1em auto;
}

.homecontent
{
	display: table;
	border-collapse: collapse;
	margin: 1em auto;
}

.homecontent > div
{
	display: table-cell;
	vertical-align: top;
}

.homecontent .sections
{
	max-width: 460px;
	margin: 0 auto;
}

.homecontent .sectiontop
{
	height: 28px;
	background-repeat: repeat-x;
	background-image: url("Graphics/SectionTop.GIF");
}

.homecontent .sections .center
{
	margin: 1em auto;
	display: table;
	border-collapse: collapse;
	background-image: url("Graphics/SectionSelectBG.GIF");
	background-repeat: no-repeat;
}

.homecontent .sections .center span
{
	display: table-cell;
	vertical-align: top;
	padding-top: 5px;
	padding-bottom: 8px;
	padding-left: 1px;
}

.homecontent .sections .center .original
{
	padding-left: 2px;
}

.homecontent .sections .center .star
{
	padding-right: 2px;
}

.homecontent .sections .center a
{
	display: block;
	background-repeat: no-repeat;
	background-position: left top;
	width: 59px;
	height: 236px;
	overflow: hidden; /* for ALT text */
}

.homecontent .sections .center img
{
	width: 59px;
	height: 236px;
	-moz-force-broken-image-icon: 1;
}

.homecontent .sections .center .original a:hover
{
	background-image: url("Logos/SectionSelect/OriginalLit.PNG");
}

.homecontent .sections .center .x a:hover
{
	background-image: url("Logos/SectionSelect/XLit.PNG");
}

.homecontent .sections .center .legends a:hover
{
	background-image: url("Logos/SectionSelect/LegendsLit.PNG");
}

.homecontent .sections .center .zero a:hover
{
	background-image: url("Logos/SectionSelect/ZeroLit.PNG");
}

.homecontent .sections .center .zx a:hover
{
	background-image: url("Logos/SectionSelect/ZXLit.PNG");
}

.homecontent .sections .center .exe a:hover
{
	background-image: url("Logos/SectionSelect/EXELit.PNG");
}

.homecontent .sections .center .star a:hover
{
	background-image: url("Logos/SectionSelect/StarLit.PNG");
}

.homecontent .sections .footer
{
	font-size: 80%;
	text-align: center;
}

.homecontent .sections .footer p
{
	margin: 0 0.3em;
}

.homecontent .sections .footer span
{
	white-space: nowrap;
}

.homecontent .sections .copyright
{
	font-size: 60%;
	text-align: center;
	margin-top: 10em;
	margin-bottom: 1em;
}

.homecontent .sections .copyright p
{
	margin: 0 1em;
}

.homenews
{
	max-width: 1200px;
	margin: 0 auto;
}

.homenews .header:before
{
	background-image: url("Graphics/HeaderL2.GIF");
}

.homenews .header:after
{
	background-image: url("Graphics/HeaderR2.GIF");
}

.homenews h3
{
	text-align: center;
}

.homenews .news
{
	display: table;
	border-collapse: collapse;
	width: 100%;
}

.homenews .news .left
{
	display: table-cell;
	vertical-align: top;
	text-align: center;
	padding: 0px 6px;
	width: 15%;
	background: #B70000;
	background-image: url("Graphics/UpdatesBG.GIF");
}

.homenews .news .content
{
	display: table-cell;
	vertical-align: top;
	background-image: url("Wallpaper/AFStarsWP.GIF"); /* For older browsers */
	background-repeat: repeat-x, repeat-y, repeat;
	background-image: url("Graphics/GameLogoB.PNG"), url("Graphics/GameLogoArmR.PNG"), url("Wallpaper/AFStarsWP.GIF");
}

.homenews .updates
{
	display: inline-block;
	text-align: left;
	color: white;
	margin: 1em auto;
	margin-top: 0;
	padding: 0 6px;
	padding-top: 12px;
	background-repeat: no-repeat;
	background-position: center top;
	background-image: url("Graphics/UpdatesT.GIF");
}

.homenews .updates h4
{
	margin: 0;
	padding: 0;
	font-size: 90%;
	white-space: nowrap;
	text-align: center;
	text-transform: uppercase;
	font-weight: normal;
	border-bottom: 1px solid #FFD801;
	padding-bottom: 0.3em;
	margin-bottom: 0.3em;
}

.homenews .update
{
	font-size: 90%;
	margin-top: 1em;
	white-space: nowrap;
}

.homenews .updates a:link,
.homenews .updates a:visited,
.homenews .updates a:hover,
.homenews .updates a:active
{
	color: white;
	text-decoration: none;
}

.homenews .updates .new,
.homenews .updates .new a
{
	color: #FFFF00;
}

.homenews .content dl
{
	margin: 2em;
	margin-left: 5%;
	margin-right: 6%;
}

.homenews .content dt
{
	font-weight: bold;
	color: #B70000;
	margin-top: 1em;
}

.homenews .content dd
{
	text-align: justify;
}

.homenews .bottom
{
	height: 14px;
	background-image: url("Graphics/GameLogoB.PNG");
	background-position: left top;
	background-repeat: repeat-x;
}

.hometips
{
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
	line-height: 1.1;
	padding-top: 1em;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	border-top: 2px solid #B70000;
}

.hometips .headline
{
	color: #B70000;
	font-weight: bold;
	margin-bottom: 0.5em;
}

.hometips .arrow
{
	text-decoration: none;
}

.hometips #divQuote
{
	padding: 0 10%;
}

.homefooter
{
	max-width: 1190px;
	margin: 1em auto;
	text-align: center;
}

.homefooter div
{
	margin: 0 2em;
}

.homefooter .logo
{
	margin: 0 auto;
	max-width: 500px;
}

.homefooter b
{
	color: #1A1468;
}

.homefooter .small
{
	font-size: 80%;
}

.homefooter .copyright
{
	margin: 1em 0;
	font-size: 80%;
	font-style: italic;
	padding-top: 0.2em;
	border-top: 2px solid #B70000;
}

/* ================================================= */
/* Section panels used on home page and section home pages */
/* ================================================= */

.sectionlinks h3
{
	display: table;
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 28px;
	line-height: 0; /* for very large font sizes */
	font-size: 100%;
	font-weight: bold;
	text-transform: uppercase;
	color: #E6F6FE;
	text-shadow: -1px -1px 1px #770000, 1px 1px 1px #F43030;
}

.sectionlinks h3 span
{
	display: table-cell;
	padding-left: 0.4em;
	min-width: 8em;
	vertical-align: middle;
	background-image: url("Graphics/SectionT.GIF"); /* For older browsers */
	background-position: 0px center, left top;
	background-repeat: repeat-x, repeat;
	background-image: url("Graphics/SectionT.GIF"), url("Wallpaper/AFStarsWP.GIF");
}

.sectionlinks h3:first-child span
{
	background-position: 0px center;
	background-repeat: repeat-x;
	background-image: url("Graphics/SectionT.GIF");
}

.sectionlinks h3:before
{
	content: "";
	display: table-cell;
	width: 28px;
}

.sectionlinks h3.general:before
{
	content: url("Graphics/SectionGeneral.GIF");
}

.sectionlinks h3.games:before
{
	content: url("Graphics/SectionGames.GIF");
}

.sectionlinks h3.games2:before
{
	content: url("Graphics/SectionGames2.GIF");
}

.sectionlinks h3.site:before
{
	content: url("Graphics/SectionSite.GIF");
}

.sectionlinks h3.marketing:before
{
	content: url("Graphics/SectionMarket.GIF");
}

.sectionlinks h3.marketing2:before
{
	content: url("Graphics/SectionMarket2.GIF");
}

.sectionlinks h3.series2:before
{
	content: url("Graphics/SectionSeries2.GIF");
}

.sectionlinks h3:after
{
	content: "";
	display: table-cell;
	width: 6px;
	background-position: right center;
	background-repeat: no-repeat;
	background-image: url("Graphics/SectionR2.PNG");
}

.sectionlinks h3:first-child:after
{
	width: 8px;
	background-image: url("Graphics/SectionR.GIF");
}

.sectionlinks ul
{
	margin: 0;
	padding: 0;
	list-style: none;
	/* Older browsers */
	background-image: url("Wallpaper/AFStarsWP.GIF");
	/* Totally evil three-part background that surely will break horribly in many browsers... */
	border-left: 10px solid transparent;
	padding-right: 6px;
	background-repeat: repeat-y, repeat-y, repeat;
	background-position: -10px top, right top, left top;
	background-clip: border-box, padding-box, content-box;
	background-image: url("Graphics/SectionL.GIF"), url("Graphics/GameLogoArmR.PNG"), url("Wallpaper/AFStarsWP.GIF");
}

.sectionlinks .mobile
{
	display: none;
}

.sectionbottom
{
	height: 14px;
	/* Older browsers */
	background-image: url("Graphics/GameLogoB.PNG");
	background-position: left top;
	background-repeat: repeat-x;
	/* Totally evil three-part background that surely will break horribly in many browsers... */
	border-left: 8px solid transparent;
	padding-right: 6px;
	background-repeat: no-repeat, no-repeat, repeat-x;
	background-position: -8px top, right top, left top;
	background-clip: border-box, padding-box, content-box;
	background-image: url("Graphics/GameLogoBL.PNG"), url("Graphics/GameLogoArmBR.PNG"), url("Graphics/GameLogoB.PNG");
}

.sectionlinks li
{
	padding: 1px 1.3em;
	white-space: nowrap;
}

.sectionlinks li:last-child
{
	padding-bottom: 0.8em;
}

.sectionlinks .padding li:last-child
{
	padding-bottom: 5em;
}

.sectionlinks li:before
{
	content: "";
	padding-left: 1.3em;
	margin-left: -1em;
	background-image: url("Icons/GameHints.GIF");
	background-position: left center;
	background-repeat: no-repeat;
	background-size: auto 0.95em;
}

.sectionlinks li.logo
{
	padding: 1em;
	text-align: center;
}

.sectionlinks li.logo:before
{
	display: none;
}

/* ================================================= */
/* Section Home Page */
/* ================================================= */

.sectionlogo
{
	text-align: center;
	margin: 0 auto;
	margin-top: 2em;
}

.sectioncontent
{
	max-width: 900px;
	margin: 0 auto;
}

.sectionmain
{
	display: table;
	border-collapse: collapse;
	margin: 2em auto;
}

.sectionmain .tr
{
	display: table-row;
}

.sectionmain .sectionlinks
{
	display: table-cell;
	min-width: 25%;
}

.sectionmain .sectiondivider
{
	display: table-cell;
	min-width: 2%;
}

.sectionmain .sectionbottom
{
	margin-bottom: 0.5em;
}

.sectionmain .padding
{
	position: relative;
}

.sectionmain .padding li:last-child
{
	padding-bottom: 2em;
}

.sdicon
{
	position: absolute;
	right: 1em;
	bottom: 1em;
}

/* ================================================= */
/* The Series home page */
/* ================================================= */

.seriesimg
{
	max-width: 100%;
}

.seriestable
{
	display: table;
	border-collapse: collapse;
	margin: 1em auto;
}

.seriestable .td,
.seriestable .tdicon
{
	display: table-cell;
	padding: 1em;
	text-align: left;
	white-space: nowrap;
}

.seriestable .tdicon
{
	text-align: center;
	vertical-align: middle;
	font-size: 80%;
}

.seriestable ul
{
	list-style: url("Icons/BlueBullet.GIF");
	margin: 0;
	padding: 0;
	padding-left: 1.2em;
}

.seriestable li
{
	margin: 0;
	padding: 0;
}

.seriesheader
{
	font-weight: bold;
	font-style: italic;
	text-transform: uppercase;
	border-bottom: 2px solid;
	font-size: 120%;
	margin-bottom: 0.2em;
}

/* ================================================= */
/* The Series teasers and book covers */
/* ================================================= */

.desctable,
.teasertable
{
	display: table;
	border-collapse: collapse;
	border-spacing: 0;
	max-width: 800px;
	height: 480px; /* min-height */
	margin: 1em auto;
	color: black;
	background: white;
	font-family: "Tahoma", "Trebuchet MS", sans-serif;
	text-align: justify;
}

.desctable > div,
.teasertable > div
{
	display: table-cell;
	vertical-align: top;
}

.desctable .pageedge,
.teasertable .pageedge
{
	width: 8px;
	min-width: 8px;
	background-image: url("TheSeries/Covers/PageEdge.GIF");
}

.desctable .nextsrc,
.teasertable .nextsrc
{
	position: absolute;
	display: block;
	top: 0;
	right: 0;
}

.desctable .nextsrc img,
.teasertable .nextsrc img
{
	display: block;
}

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

.desctable .page,
.desctable .cover,
.desctable .backcover
{
	width: 49%;
	position: relative;
}

.desctable .backcover
{
	padding: 0 1em;
	padding-top: 0.5em;
}

.desctable .cover img
{
	display: block;
	margin: 0 auto;
}

.desctable .cover .image
{
	width: 100%;
}

.desctable .titleimg
{
	margin-top: 0;
	margin-bottom: 2em;
	text-align: center;
}

.desctable .header1
{
	font-size: 150%;
}

.desctable .header2
{
	font-size: 125%;
}

.desctable .spine
{
	width: 14px;
	min-width: 14px;
	position: relative;
	vertical-align: middle;
}

.desctable .spine .top,
.desctable .spine .bottom
{
	position: absolute;
	display: block;
	left: 0;
}

.desctable .spine .top
{
	top: 0;
}

.desctable .spine .bottom
{
	bottom: 0;
}

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

.teasertable
{
	height: 599px; /* min-height */
}

.teasertable .page,
.teasertable .titlepage
{
	width: 49%;
	position: relative;
	padding: 0 1em;
	padding-bottom: 1em;
}

.teasertable .page
{
	vertical-align: top;
}

.teasertable .titlepage
{
	vertical-align: middle;
}

.teasertable h1
{
	font-size: 150%;
	color: black;
	margin: 0;
	margin-top: 1em;
	margin-bottom: 2em;
	text-align: center;
	text-transform: uppercase;
}

.teasertable .titlelogo
{
	text-align: center;
	margin-top: -3em;
}

.teasertable .title
{
	text-align: center;
	font-size: 150%;
	font-weight: bold;
	margin: 0.5em;
}

.teasertable .subtitle
{
	text-align: center;
	font-size: 125%;
	font-weight: bold;
	margin: 0.5em;
}

.teasertable .author
{
	text-align: center;
	margin: 0.5em;
}

.teasertable .pagemiddle
{
	width: 9px;
	min-width: 9px;
	background-image: url("TheSeries/Covers/PageMiddle.GIF");
}

/* ================================================= */
/* The Series covers page */
/* ================================================= */

.covertable
{
	border-collapse: separate;
	border-spacing: 0.2em;
	margin: 1em auto;
}

.covertable td
{
	text-align: left;
	padding-left: 0.2em;
}

.covertable td:first-child
{
	text-align: right;
	padding-left: 0;
	padding-right: 0.2em;
}

.covertable img.outline
{
	border-top: 1px solid #000044;
	border-bottom: 1px solid #000044;
}

.covertable img.outline:hover
{
	border: 1px solid #FFD801;
}

/* ================================================= */
/* MM FAQs */
/* ================================================= */

dt.mmfaq
{
	clear: left;
	margin-top: 1em;
}

dd.mmfaq > b:first-child
{
	display: block;
}

body.panels .mmfaq .hr
{
	/* Can't use em because font size is 0 */
	margin-top: 1px;
	margin-bottom: 5px;
}

/* ------------------------------------------------- */
/* Variants */

.L dd.mmfaq b, .LL dd.mmfaq b, .LD dd.mmfaq b, .LB dd.mmfaq b { color: #B70000; }
.D dd.mmfaq b, .DL dd.mmfaq b, .DD dd.mmfaq b, .DB dd.mmfaq b { color: #FFFFFF; }
.B dd.mmfaq b, .BL dd.mmfaq b, .BD dd.mmfaq b, .BB dd.mmfaq b { color: #FFFFFF; }

/* ================================================= */
/* Floating sprites next to LI items */
/* ================================================= */

.lianchor
{
	position: relative;
}

.lifloat
{
	position: absolute;
	left: -2.7em;
}

/* ================================================= */
/* Glossary stuff */
/* ================================================= */

dl.glossary
{
	clear: left;
	margin-top: 1em;
}

dl.glossary dt
{
	border-bottom: 1px solid #B70000;
}

table.glossary th
{
	vertical-align: baseline;
	text-align: center;
}

table.glossary td
{
	vertical-align: baseline;
	padding: 2px;
}

/* ================================================= */
/* MM Index */
/* ================================================= */

.mmindexes,
.content ul.mmindexes
{
	list-style: none;
	padding: 0;
	margin: 0 auto;
	text-align: center;
}

.mmindexes li
{
	display: inline;
	vertical-align: middle;
	white-space: nowrap;
}

.mmindexes li:before
{
	content: "";
	padding-left: 1.5em;
	background-image: url("Icons/RedBullet.GIF");
	background-repeat: no-repeat;
	background-position: center center;
	vertical-align: middle;
}

.mmindexes li:first-child:before
{
	background: none;
	padding-left: 0;
}

.mmindex
{
	display: table;
	border-collapse: collapse;
	margin: 0 auto;
}

.mmindex .tr
{
	display: table-row;
}

.mmindex .col1,
.mmindex .col2,
.mmindex .col3,
.mmindex .col4
{
	display: table-cell;
	margin: 0;
	padding: 0;
	text-align: left;
}

.mmindex dt
{
	font-weight: bold;
	font-size: 80%;
	margin: 0;
	margin-top: 0.5em;
	padding: 0 0.2em;
}

.mmindex dd
{
	font-size: 80%;
	line-height: normal;
	margin: 0;
	margin-left: 0.7em;
	padding: 0 0.2em;
}

/* ================================================= */
/* MM Links Default page */
/* ================================================= */

.mmlinkslist
{
	display: table;
	border-collapse: separate;
	border-spacing: 0.5em;
	margin: 1em auto;
}

.mmlinkslist .tr
{
	display: table-row;
}

.mmlinkslist .sprite
{
	display: table-cell;
	vertical-align: top;
	text-align: center;
}

.mmlinkslist .td
{
	display: table-cell;
	vertical-align: top;
}

.mmlinkslist div
{
	margin-top: 1px;
}

/* ================================================= */
/* MM Links */
/* ================================================= */

.mmlinks .site
{
	font-weight: bold;
}

.mmlinks .categories
{
}

.mmlinks .change
{
	font-size: 85%;
}

.mmlinksall div
{
	margin-top: 1px;
	margin-bottom: 1px;
}

/* ------------------------------------------------- */
/* Variants */

.mmlinks .categories
{
	color: #99AABB; /* Fallback for older browsers */
	color: rgba(224, 240, 255, 0.5);
}

.mmlinks .categories a,
.mmlinks .categories a:link,
.mmlinks .categories a:visited
{
	color: #99AABB; /* Fallback for older browsers */
	color: rgba(224, 240, 255, 0.5);
}

.mmlinks .categories a:hover,
.mmlinks .categories a:active
{
	color: #FFD801;
}

.mmlinksall .categories a { color: #BBCCDD; }
.mmlinksall .categories a:link { color: #BBCCDD; }
.mmlinksall .categories a:visited { color: #99AABB; }
.mmlinksall .categories a:hover { color: #FFD801; }
.mmlinksall .categories a:active { color: #FFD801; }

/* ================================================= */
/* MIDIs and MODs index page */
/* ================================================= */

.midisindex
{
	display: table;
	border-collapse: collapse;
	margin: 1em auto;
	margin-bottom: 3em;
}

.midisindex .td
{
	display: table-cell;
	padding: 0 1em;
}

.midisheader
{
	font-size: 110%;
	border-bottom: 2px solid;
	text-align: left;
	margin-top: 1em;
}

.midis
{
	text-align: center;
	margin-top: 0.2em;
	margin-bottom: 0.2em;
}

.midis a,
.midis span
{
	vertical-align: middle;
}

.midis a
{
	font-weight: bold;
}

.midis span
{
	padding: 0 12px;
	min-height: 16px;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url("Icons/B-EighthNote.GIF");
}

.midis:nth-child(3n) .icon1,
.midis:nth-child(6n) .icon1,
.midis:nth-child(7n) .icon1
{
	background-image: url("Icons/B-EighthNotes.GIF");
}

.midis:nth-child(2n) .icon2,
.midis:nth-child(4n) .icon2,
.midis:nth-child(5n) .icon2
{
	background-image: url("Icons/B-EighthNotes.GIF");
}

.midis.new .icon1,
.midis.new .icon2
{
	padding: 0 20px;
	background-image: url("Icons/NEW.GIF");
}

/* ================================================= */
/* Individual MIDI/MOD game listing */
/* ================================================= */

.miditable
{
	border-collapse: separate;
	border-spacing: 0.2em;
	margin: 0 auto;
}

.miditable th,
.miditable td,
.miditable a,
.miditable img
{
	vertical-align: middle;
}

.miditable .song
{
	text-align: right;
}

.miditable .author
{
	text-align: left;
}

.miditable .divider td
{
	padding: 0.5em 0;
}

.miditable .divider div
{
	font-size: 0;
	line-height: 0;
	height: 1px;
	border-top: 1px solid #B70000;
}

.miditable td.song a
{
	font-weight: bold;
}

.miditable td.song img
{
	font-size: 75%;
}

.miditable .foot td
{
	text-align: center;
}

.miditable .foot a
{
	display: block;
	font-weight: bold;
}

.miditable .foot div
{
	font-size: 85%;
	margin-top: 0.3em;
}

/* ------------------------------------------------- */
/* Variants */

.midiheader
{
	text-shadow: 1px 1px 2px #3A98A3;
}

/* ================================================= */
/* Alternate page titles */
/* ================================================= */

.pagetitle h2
{
	font-size: 150%;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	margin: 0 auto;
	padding: 0;
}

.pagetitle h3
{
	font-size: 125%;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	margin: 0 auto;
	padding: 0;
}

/* ================================================= */
/* Song of the Whenever stuff */
/* ================================================= */

.songscreen
{
	float: right;
	margin-left: 1em;
}

.songweek
{
	text-align: center;
}

.songweek .table
{
	display: inline-block;
	margin: 0 auto;
	text-align: left;
}

.songweek .song a
{
	font-weight: bold;
}

.songweek .format
{
	font-size: 80%;
	margin-top: 0.4em;
	padding-left: 21px;
}

/* ================================================= */
/* Song of the Whenever Archive */
/* ================================================= */

ul.songarchive
{
	margin: 2em;
}

div.songarchive
{
	display: table;
	border-collapse: collapse;
	margin: 2em auto;
	text-align: left;
}

div.songarchive .td
{
	display: table-cell;
	padding: 0 1em;
}

.songarchive a
{
	font-weight: bold;
}

.songarchive .size
{
	font-size: 80%;
}

.songarchive .desc
{
	font-size: 80%;
}

/* ------------------------------------------------- */
/* Variants */

.songarchive b
{
	color: #1A1468;
}

.songarchive li b
{
	color: #880000;
}

/* ================================================= */
/* The Series Book List */
/* ================================================= */

.bookitem
{
	display: table;
	border-collapse: collapse;
	clear: both;
}

.bookitem .img
{
	display: table-cell;
	box-sizing: content-box;
	width: 79px;
	min-width: 79px;
	vertical-align: top;
	padding-right: 0.75em;
	padding-top: 2px;
}

.bookitem .desc
{
	display: table-cell;
	vertical-align: top;
	width: 95%;
}

.bookitem .links
{
	font-size: 80%;
	margin-top: 0.1em;
}

.bookitem .desc p
{
	margin: 0;
	margin-top: 1em;
	font-size: 90%;
	text-align: justify;
}

/* ================================================= */
/* The Series character (desc) page */
/* ================================================= */

.chardesc
{
	display: table;
	border-collapse: collapse;
	margin: 1em 0;
	line-height: 1.1;
}

.chardesc .tr
{
	display: table-row;
}

.chardesc .img,
.chardesc .text
{
	display: table-cell;
	vertical-align: top;
	border-top: 2px solid #B70000;
	padding-top: 1em;
}

.chardesc .img
{
	text-align: center;
	padding-left: 1.5em;
	padding-right: 0.5em;
}

.chardesc .text
{
	padding-right: 2em;
	text-align: justify;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

.chardesc .text img
{
	float: right;
	margin-left: 0.5em;
}

/* ================================================= */
/* Various email forms */
/* ================================================= */

.emailform
{
	display: table;
	border-collapse: separate;
	border-spacing: 0.2em;
	margin: 0 auto;
	margin-top: 1em;
	width: 45em;
	max-width: 100%;
}

.emailform .tr
{
	display: table-row;
}

.emailform .th,
.emailform .th2
{
	display: table-cell;
	text-align: right;
	vertical-align: baseline;
	width: 1%;
	white-space: nowrap;
}

.emailform .td,
.emailform .td2
{
	display: table-cell;
	text-align: left;
	vertical-align: baseline;
}

.emailform .th2
{
	vertical-align: top;
	padding-top: 2px;
}

.emailform .td2
{
	vertical-align: top;
}

.emailform input.name,
.emailform input.subject,
.emailform input.length1,
.emailform input.length2,
.emailform textarea
{
	font-family: "Trebuchet MS", "Source Sans Pro", "Fira Sans", "Meiryo", "Lucida Sans", sans-serif;
	font-size: 100%;
}

.emailform input[type=text]
{
	font-family: "Trebuchet MS", "Source Sans Pro", "Fira Sans", "Meiryo", "Lucida Sans", sans-serif;
	font-size: 100%;
}

.emailform input[type=submit]
{
	font-family: "Trebuchet MS", "Source Sans Pro", "Fira Sans", "Meiryo", "Lucida Sans", sans-serif;
	font-size: 100%;
}

.emailform input.name,
.emailform input.length1
{
	min-width: 15em;
}

.emailform input.subject,
.emailform input.length2
{
	width: 100%;
	max-width: 35em;
}

.emailform textarea
{
	width: 100%;
	height: 15em;
}

.emailform textarea.songs
{
	width: auto;
	max-width: 100%;
}

.emailform .hint,
.emailform .hint2
{
	font-size: 80%;
}

.emailform .hint
{
	padding-left: 0.3em;
	font-style: italic;
}

.emailform .hint2
{
	text-align: right;
}

.emailform .tablecol
{
	margin: 0;
}

.emailform .tablecol .td2
{
	display: table-cell;
	text-align: left;
	vertical-align: top;
}

.emailform .tablecol .td3
{
	display: table-cell;
	text-align: left;
	vertical-align: top;
	padding-left: 0.5em;
}

.formsubmit
{
	text-align: center;
	margin-top: 0.3em;
	margin-bottom: 1em;
}

.formsubmit input
{
	font-family: "Trebuchet MS", "Source Sans Pro", "Fira Sans", "Meiryo", "Lucida Sans", sans-serif;
	font-size: 100%;
}

/* ------------------------------------------------- */
/* Variants */

.D .emailform .th, .D .emailform .th2,
.DL .emailform .th, .DL .emailform .th2,
.DD .emailform .th, .DD .emailform .th2,
.DB .emailform .th, .DB .emailform .th2 { color: #FFFFFF; }

/* ================================================= */
/* Link submit form */
/* ================================================= */

.submitform
{
	display: table;
	border-collapse: collapse;
	margin: 0 auto;
	max-width: 50%;
}

.submitform .th
{
	margin-top: 0.7em;
	margin-bottom: 2px;
}

.submitform .dd
{
	margin-left: 2em;
}

.submitform p
{
	margin: 0.5em 0;
}

/* ================================================= */
/* Replacement for acknowledgements pattern reused a lot in original code */
/* ================================================= */

.credits
{
	font-size: 80%;
	text-align: center;
	margin: 1.5em auto;
	margin-top: 2em;
}

/* ================================================= */
/* A generic table that turns into a single column at smaller sizes */
/* ================================================= */

.tablecol
{
	display: table;
	border-collapse: collapse;
	margin: 1em auto;
}

.tablecol .tr
{
	display: table-row;
}

.tablecol .td
{
	display: table-cell;
	vertical-align: top;
}

.tablecol .td ul:first-child
{
	margin-top: 0;
}

.tablecol .td ul:last-child
{
	margin-bottom: 0;
}

.tablecol .td ul li:first-child
{
	margin-top: 0;
}

.tablecol .td ul li:last-child
{
	margin-bottom: 0;
}

.tablecol .td li
{
	text-align: left;
}

/* ================================================= */
/* A generic table that assumes items are in a horizontal row */
/* ================================================= */

.tablerow
{
	display: table;
	border-collapse: separate;
	border-spacing: 1em;
	margin: 0 auto;
}

.tablerow .tr
{
	display: table-row;
}

.tablerow .th
{
	display: table-cell;
	/* HACK: align=center */
	text-align: center;
}

.tablerow .th > *
{
	/* HACK: align=center */
	margin-left: auto;
	margin-right: auto;
}

.tablerow .td
{
	display: table-cell;
}