/* ================================================= */
/* Adaptations */
/* ================================================= */

@-webkit-viewport { width: device-width }
@-moz-viewport { width: device-width }
@-ms-viewport { width: device-width } /* Buggy on anything but Surface? */
@-o-viewport { width: device-width }
@viewport { width: device-width }

body
{
	-ms-overflow-style: scrollbar; /* undo @-ms-viewport */
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* Removes centering and adds margins to keep the red borders from going against the edge of the window */
@media (max-width: 990px)
{
	.header h3 { font-size: 100%; }
	.story h3 { font-size: 100%; }
	body.panels .site_title { margin-left: 5%; margin-right: 5%; }
	body.panels .site_content { margin-left: 5%; margin-right: 5%; }
	body.panels .site_footer { margin-left: 5%; margin-right: 5%; }
}

/* Adds margins to keep the text from going against the edge of the window (nopanels) */
@media (max-width: 960px)
{
	body.nopanels .site_content > .content { margin-left: 3em; margin-right: 3em; }
	body.nopanels .header div { margin-left: 3em; margin-right: 3em; }
	.sectioncontent { margin-left: 2em; margin-right: 2em; }
	.dataitem .circle { width: 42px; }
	.gamegrid { width: 100%; margin: 1em auto; }
	/* 100% size */
	.gamegrid .logo { width: 130px; padding: 3px; background-size: 130px 81px; }
	.gamegrid .logo img { width: 100px; height: 75px; }
	.gamegrid .logo h4 { width: 100px; }
	.gamegrid .logo div { width: 100px; }
}

/* On the home page, allows the grid of section images to wrap to two rows */
@media (max-width: 830px)
{
	.homecontent .sections .center { display: block; margin-top: 0.5em; text-align: center; background: none; padding: 0 4px; }
	.homecontent .sections .center span { display: inline; }
	.homecontent .sections .center a { display: inline; }
	.homecontent .sections .center img { border: 1px solid #B70000; }
	.homecontent .sections .center img:hover { opacity: 1; }
	.homecontent .sections .center a:hover { background: none !important; }
	.homecontent .sections .copyright { margin-top: 2em; }
	.homecontent .sections .center img { width: 50px; height: auto; }
}

/* Reduce grid to single column */
@media (max-width: 800px)
{
	.content li { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
	.dataitem .desc { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
	.gamegrid { display: block; width: auto; margin: 1em 0; }
	.gamegrid .game { width: auto; min-width: 60%; margin-left: auto; margin-right: auto; }
	.gamegrid .tr { display: block; }
	.gamegrid .td { display: block; width: auto; }
	/* 150% size */
	.gamegrid .logo { width: 195px; padding: 4.5px; background-size: 195px 121.5px; }
	.gamegrid .logo img { width: 150px; height: 112.5px; }
	.gamegrid .logo h4 { width: 150px; }
	.gamegrid .logo div { width: 150px; }
}

/* Remove any floating graphics */
@media (max-width: 760px)
{
	body { overflow-x: auto; }
	.splash_right { display: none; }
	.mmindex { margin-right: -1em; }
	.homecontent .sections .center img { width: 40px; }
	.gamelist th.aka span { display: inline; }
	.gamelist th.aka:before { display: none; }
	.desctable { display: block; width: 320px; max-width: 100%; height: auto;  width: -moz-min-content; width: -webkit-min-content; width: min-content; margin: 0 auto; }
	.teasertable { display: block; width: 320px; max-width: 100%; height: auto; margin: 0 auto; }
	.desctable > div { display: block; margin: 0 auto; }
	.teasertable > div { display: block; margin: 0 auto; }
	.desctable .page { width: auto; }
	.desctable .cover { width: auto; }
	.desctable .backcover { width: auto; }
	.teasertable .page { width: auto; }
	.teasertable .titlepage { width: auto; padding: 0; padding-bottom: 4em; border-top: 1px solid gray; }
	.desctable .backcover { padding-bottom: 0.2em; }
	.teasertable .titlelogo { margin: 0 auto; padding-top: 4em; }
	.desctable .pageedge { display: none; }
	.teasertable .pageedge { display: none; }
	.desctable .spine { display: none; }
}

/* Unfloats and centers screen shots */
@media (max-width: 700px)
{
	body.panels .site_title > div { min-width: 90%; }
	.screenshot { margin-left: auto; margin-right: auto; display: table; }
	.screenshot.right { float: none; margin: 1em auto; }
	.screenshot.left { float: none; margin: 1em auto; }
	.floatright { display: block; float: none; margin: 1em auto; max-width: 100%; }
	.stacked { float: none; margin: 1em auto; }
	ul.songarchive { margin: 2em 1em; padding-left: 1em; }
	.seriestable { display: block; width: auto !important; max-width: 18em; margin: 0 auto; }
	.seriestable .td { display: block; width: auto !important; padding: 0.5em; }
	.seriestable .tdicon { display: none; }
	.homecontent .sections .center img { width: 35px; }
}

/* Converts the home page table to stacked divs */
@media (max-width: 667px)
{
	.homecontent { display: block; }
	.homecontent > div { display: block; }
	.homecontent .sectionlinks { margin: 0 1em; }
	.homecontent .sectionlinks .mobile { display: block; }
	.homecontent h3 span { min-width: 0; }
	.homecontent .padding li:last-child { padding-bottom: 0.8em; }
	.homecontent .sectiontop { display: none; }
	.homecontent .sections .center { margin-top: 0.7em; }
	.homecontent .sections .center img { width: 12.5%; }
	.homecontent .sections .copyright { margin-top: 1em; }
}

/* Pushes left/right panel border graphics to edge of screen and displays site header fixed at the top of the screen */
@media (max-width: 667px)
{
	body, input.name, input.subject, textarea { font-size: 14pt; font-family: "Source Sans Pro", "Fira Sans", "Meiryo", "Trebuchet MS", sans-serif; }
	input[type=text] { font-size: 14pt; font-family: "Source Sans Pro", "Fira Sans", "Meiryo", "Trebuchet MS", sans-serif; }
	input[type=submit] { font-size: 14pt; font-family: "Source Sans Pro", "Fira Sans", "Meiryo", "Trebuchet MS", sans-serif; }
	tt { font-family: "Lucida Console", "Consolas", monospace; font-size: 1.1rem; }
	.ellipsis { letter-spacing: 0.08em; padding-left: 0.12em; }
	.site_header { font-size: 90%; }
	.site_header { position: fixed; z-index: 100; top: 0; box-shadow: 0px 2px 4px black; width: 100%; }
	.site_headerbg { height: 40px; margin-bottom: 0; background: transparent; } /* push content down */
	.site_header .table .title { width: 90%; text-align: left; padding-left: 2%; }
	.site_header .table .nolinks { width: 90%; text-align: left; padding-left: 2%; }
	body.panels .site_title { display: none; }
	body.panels .site_title.alt { display: block; position: absolute; margin: 0; height: auto; width: 100%; max-width: none; z-index: 1; }
	body.panels .site_title.alt > div { display: block; background: none; height: auto; min-width: 0; padding: 0; text-align: center; }
	body.panels .site_title.alt .logo { display: none; }
	body.panels .site_title.alt .borders { background: none; height: auto; padding: 0; }
	body.panels .site_title.alt .bg { background: none !important; }
	body.panels .site_title.alt h2 { background: none; height: 4rem; margin-top: 0.7em; padding: 0; line-height: 1; white-space: normal; }
	body.panels .site_title.alt h2:before { display: none; }
	body.panels .site_content .panel_bg.alt { padding-top: 4rem; } /* make room for site_title */
	body.panels .site_content { margin-left: 0; margin-right: 0; }
	body.panels .site_footer { margin-left: 0; margin-right: 0; }
	body.nopanels .site_content > .content { margin-left: 2em; margin-right: 2em; }
	body.nopanels .header div { margin-left: 2em; margin-right: 2em; }
	.content { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
	.site_content .panel_top { display: none; }
	.site_content .panel_bg:before { display: none; }
	.story h3 { margin-top: -3px; } /* vertical center doesn't work */
	.gamelogo { display: block; margin: 0 auto; height: auto; text-align: center; margin-top: -20px; } /* remove some blank space */
	.gamelogo > div { display: inline-block; margin: 0 auto; height: auto; }
	.gamelogo .toc { display: block; margin: 0 auto; text-align: left; }
	.gamelogo .armtr { display: none; }
	.dataitem .circle { width: 32px; }
	.gamegrid .game { min-width: 90%; }
	.homelogo { width: 316px; height: 163px; max-width: 100%; background-image: url("Logos/LMMHomePage.GIF"); background-repeat: no-repeat; background-position: center center; }
	.homelogo img { display: none; }
	.mmindex { margin-left: auto; margin-right: auto; }
	.mmindex .tr { display: table-cell; }
	.mmindex .col1 { display: block; }
	.mmindex .col2 { display: block; }
	.mmindex .col3 { display: block; }
	.mmindex .col4 { display: block; }
	div.songarchive .td { padding: 0; }
	.midisindex { display: block; width: 80%; }
	.midisindex .td { display: block; width: auto; padding-left: 0; padding-right: 0; }
	.emailform input[type=text] { width: 100%; min-width: 0; }
	.emailform .tablecol .td2 { width: 50%; }
	.emailform .tablecol .td3 { width: 40%; }
	.emailform .tablecol textarea.songs { width: 100%; }
	.emailform .hint { display: block; }
	.chardesc { display: block; }
	.chardesc .tr { display: block; }
	.chardesc .img { display: block; padding: 0 2em; padding-top: 1em; }
	.chardesc .text { display: block; padding: 0 2em; border-top: 0; }
}

/* Remove face from header due to lack of space */
@media (max-width: 560px)
{
	.site_header .table .face { display: none; }
	.site_header .table .tophome { width: 82px; }
	.site_header .table .toptitle { padding-right: 82px; }
	.site_header .table .up { display: none; }
	body.panels .panel_bg > .content { margin-left: 1em; margin-right: 1em; }
	body.panels .header { padding-left: 1em; padding-right: 12px; }
	.sectionmain { display: block; }
	.sectionmain .tr { display: block; }
	.sectionmain .sectionlinks { display: block; min-width: 0; }
	.sectionmain .sectiondivider { display: none; }
	.sectionlogo { margin-bottom: 2em; }
	.sectionlogo:before { content: url("Logos/LMMHomePage.GIF"); display: block; margin-left: -1em; margin-left: -1em; }
	.sectionlogo:after { content: attr(data-alt); display: block; text-align: center; font-family: "Tahoma", "Trebuchet MS", sans-serif; font-size: 150%; font-weight: bold; text-transform: uppercase; color: #1A1468; text-shadow: 1px 1px 2px #3A98A3; }
	.sectionlogo img { display: none; }
	.hometips #divQuote { padding: 0 0.5em; }
	.gamelist th { font-size: 50%; }
	.gamelist th:first-child { padding-left: 1em; }
	.gamelist th:first-child:before { display: none; }
	.gamelist th:last-child { padding-right: 1em; }
	.gamelist th:last-child:after { display: none; }
	.gamelist th.name span { display: none; }
	.gamelist td.name { padding-left: 1em; }
	.gamelist td.name:before { display: none; }
	.gamelist td.rating { padding-right: 1em; }
	.gamelist td.systems { font-size: 60%; vertical-align: middle; }
	.damagetable { margin-left: -1em; margin-right: -1em; }
	.damagetable table { font-size: 90%; }
	.chardesc .img { padding-left: 1em; padding-right: 1em; }
	.chardesc .text { padding-left: 1em; padding-right: 1em; }
	.homefooter .logo { margin: 0 1em; max-width: none; }
}

/* Removes left/right panel graphics altogether, and removes up/home buttons to save space on header */
@media (max-width: 500px)
{
	.site_header { font-size: 80%; }
	.site_header .table .home img { display: none; }
	.site_header .table .home a { width: 82px; height: 40px; }
	.site_header .table .home a:after { display: block; width: 82px; content: url("Graphics/HomeLogo.GIF"); }
	.site_header .table .home a:hover:after { content: url("Graphics/HomeLogo.GIF"); }
	.site_content .panel { padding: 0; background: transparent; }
	.site_content .panel_bottom { display: none; }
	.site_content .panel_bg:after { display: none; }
	.site_footer .panel { padding: 0; background: transparent; }
	.site_footer .panel_top { display: none; }
	.site_footer .panel_bg:before { display: none; }
	.site_footer .panel_bg:after { display: none; }
	.site_footer .panel_bottom { display: none; }
	body.panels .site_footer { border-top: 2px solid #B70000; }
	.content { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
	.content ul { padding-left: 1em; }
	.content ol { padding-left: 1em; }
	.content blockquote { margin-left: 1em; margin-right: 1em; }
	.sectioncontent { margin-left: 1em; margin-right: 1em; }
	.lifloat { display: none; }
	.content li { text-align: left; }
	.content dt { text-align: left; }
	.content dd { text-align: left; }
	.password { text-align: left; font-size: 90%; margin: 0; }
	.screenshot img { max-width: 89vw; height: auto; }
	ul .screenshot img { max-width: 80vw; }
	ol .screenshot img { max-width: 80vw; }
	dd .screenshot img { max-width: 80vw; }
	ul ul .screenshot img { max-width: 75vw; }
	.damagetable { font-size: 80%; }
	.dataitem .circle { display: none; }
	.dataitem .stats img { display: none; }
	.dataitem .stats .data { font-size: 60%; }
	.dataitem .stats .topbar { font-size: 70%; }
	.dataitem .desc { text-align: left; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
	.gamegrid .game { width: 100%; }
	.gamelist th.aka { display: none; }
	.gamelist td.aka { display: none; }
	.homenews .news { display: block; }
	.homenews .news .left { display: block; padding: 0; width: 100%; background: #B70000; background-image: url("Graphics/TopBarB.PNG"); background-repeat: repeat-x; }
	.homenews .updates { margin-bottom: 0; padding-bottom: 1em; padding-top: 18px; background-position: center 6px; }
	.homenews .news .content { display: block; background: url("Graphics/GameLogoB.PNG"), url("Wallpaper/AFStarsWP.GIF"); background-repeat: repeat-x, repeat; padding: 1em; }
	.homenews .news dl { margin: 0; }
	.homenews .news dd { margin: 0; padding: 0; }
	div.songarchive { display: block; margin: 2em 5%; }
	div.songarchive .td { display: block; }
	div.songarchive ul { padding-left: 2em; }
	ul.songarchive { margin: 2em 0.2em; }
	.midisindex { width: auto; }
	.emailform { display: block; }
	.emailform .tr { display: block; }
	.emailform .th { display: block; text-align: left; font-weight: bold; margin-top: 0.3em; }
	.emailform .th2 { display: block; text-align: left; font-weight: bold; margin-top: 0.3em; }
	.emailform .td { display: block; }
	.emailform .td2 { display: block; }
	.emailform .hint { display: block; }
	.emailform textarea.songs { width: 100%; }
	.submitform { max-width: none; text-align: left; }
	.submitform input[type=text] { width: 100%; }
	.submitform textarea { width: 100%; }
	.tablecol { display: block; width: auto !important; }
	.tablecol .tr { display: block; width: auto !important; }
	.tablecol .td { display: block; width: auto !important; }
	.emailform .tablecol .td2 { display: block; width: auto !important; }
	.emailform .tablecol .td3 { display: block; width: auto !important; }
	.tablecol .td ul { padding-left: 2em; }
	.tablecol .td ul:first-child { margin-top: 1em; }
	.tablecol .td ul:last-child { margin-bottom: 1em; }
	.tablecol .td ul li:first-child { margin-top: 0.5em; }
	.tablecol .td ul li:last-child { margin-bottom: 0.5em; }
	.tablerow { display: block; width: auto !important; }
	.tablerow .tr { display: block; width: auto !important; }
	.tablerow .th { display: block; width: auto !important; margin: 1em auto; }
	.tablerow .td { display: block; width: auto !important; margin: 1em auto; }
	.bookitem { display: block; }
	.bookitem .img { display: block; width: auto; min-width: 0; }
	.bookitem .desc { display: block; width: auto; }
	.bookitem .title { text-align: left; }
	.chardesc .text img { display: none; }
	.mmlinkslist { display: block; border-spacing: 0; }
	.mmlinkslist .tr { display: block; }
	.mmlinkslist .sprite { display: none; }
	.mmlinkslist .name { margin-top: 0.5em; }
	.mmlinkslist .td { display: block; vertical-align: baseline; }
	.covertable .title { font-size: 80%; }
}

/* Removes doubling of background graphics when there are no panels */
@media (max-width: 500px)
{
	body.LL, body.LD, body.LB { background-color: #5FE3F2; }
	body.DL, body.DD, body.DB { background-color: #006079; }
	body.BL, body.BD, body.BB { background-color: #0B3547; }
}

/* Turns header logo into an icon */
@media (max-width: 400px)
{
	.site_header .table .toptitle { padding-right: 0; }
	.site_header .table .home img { display: none; }
	.site_header .table .home a { width: 40px; height: 40px; }
	/* This allows the image to be higher quality but requires IE9+ */
	.site_header .table .home a:after { content: ""; width: 40px; background-image: url("Graphics/HomeLogoSm.GIF"); background-size: 40px 40px; background-repeat: no-repeat; }
	.site_header .table .home a:hover:after { content: ""; }
	.site_header .table .links li.mobile { display: none; }
	.covertable .title { display: none; }
}

/* Reduces grid size back down to fit on phones */
@media (max-width: 390px)
{
	.site_header .table .title { padding-left: 0; }
	.site_header .table .nolinks { padding-left: 0; }
	.content dd { margin-left: 1.5em; padding-left: 0; }
	body.nopanels .site_content > .content { margin-left: 1em; margin-right: 1em; }
	body.nopanels .header div { margin-left: 1em; margin-right: 1em; }
	.story { max-width: 100vw; }
	.header .help img { display: none; }
	.header .help { width: 22px; }
	.header .help:after { width: 22px; display: block; content: url("Graphics/HeaderHelp2.GIF"); }
	.header .help:hover:after { display: block; content: url("Graphics/HeaderHelp2-h.GIF"); }
	.password { display: block; margin-bottom: 1em; }
	.password > div  { display: block; }
	.password .th { display: block; text-align: center; }
	.password .td { display: block; text-align: justify; padding-left: 0; }
	div.songarchive { margin: 2em 1%; }
	dt.mmfaq img { display: none; }
	dt.mmfaq { margin-left: 0; padding-left: 0; }
	dd.mmfaq { margin-left: 0; padding-left: 0; }
	.gamelist th.systems { display: none; }
	.gamelist td.systems { display: none; }
	/* 100% size */
	.gamegrid .logo { width: 130px; padding: 3px; background-size: 130px 81px; }
	.gamegrid .logo img { width: 100px; height: 75px; }
	.gamegrid .logo h4 { width: 100px; }
	.gamegrid .logo div { width: 100px; }
}

/* Slightly reduce header size to fit on iPhone */
@media (max-width: 330px)
{
	.header h3 { font-size: 90%; }
	.story h3 { font-size: 90%; }
	.gamegrid { margin: 1em -1em; }
}

/* ------------------------------------------------- */
/* Screen shot gutter only if there are screen shots on the page */

/* Partial screen shot gutter */
@media (min-width: 1200px) and (max-width: 1450px)
{
	body.screens .site_title { max-width: 1100px; }
	body.screens .site_footer { max-width: 1100px; }
	body.screens .panel { max-width: 1100px; }
	body.screens .panel_top { max-width: 1100px; }
	body.screens .panel_bottom { max-width: 1100px; }
	body.screens .panel_bg > .content { max-width: 850px; }
	body.screens .screenshot.right { margin-right: -165px; }
	body.screens .header { padding: 0; }
	body.screens .header div { max-width: 850px; margin-left: 2em; margin-right: 2em; }
	body.screens .dataitem .stats { margin-right: -165px; margin-left: 1em; }
}

/* Screen shot gutter */
@media (min-width: 1451px)
{
	body.screens .site_title { max-width: 1340px; }
	body.screens .site_footer { max-width: 1340px; }
	body.screens .panel { max-width: 1340px; }
	body.screens .panel_top { max-width: 1340px; }
	body.screens .panel_bottom { max-width: 1340px; }
	body.screens .panel_bg > .content { max-width: 850px; }
	body.screens .screenshot.right { margin-right: -390px; }
	body.screens .screenshot.right img { max-width: 400px; height: auto; }
	body.screens .header { padding: 0; }
	body.screens .header div { max-width: 850px; margin-left: 2em; margin-right: 2em; }
	body.screens .dataitem .stats { width: 375px; margin-right: -390px; margin-left: 1em; }
}

/* ------------------------------------------------- */
/* Pages with data tables and grids allow to expand a bit wider on big screens to show more information */
@media (min-width: 1200px)
{
	body.grids .site_title { max-width: 1100px; }
	body.grids .site_footer { max-width: 1100px; }
	body.grids .panel { max-width: 1100px; }
	body.grids .panel_top { max-width: 1100px; }
	body.grids .panel_bottom { max-width: 1100px; }
	body.grids .panel_bg > .content { max-width: 1100px; }
	.gamegrid .game .logo { font-size: 120%; }
	.gamegrid ul { font-size: 90%; }
	/* 150% size */
	.gamegrid .logo { width: 195px; padding: 4.5px; background-size: 195px 121.5px; }
	.gamegrid .logo img { width: 150px; height: 112.5px; }
	.gamegrid .logo h4 { width: 150px; }
	.gamegrid .logo div { width: 150px; }
	.homecontent .sections { max-width: 600px; }
	.homenews .news .content { padding-right: 6px; background-repeat: repeat-x, repeat-y, repeat-y, repeat; background-position: left top, left top, right top, left top; background-clip: content-box, content-box, padding-box, content-box; background-image: url("Graphics/GameLogoB.PNG"), url("Graphics/GameLogoArmR.PNG"), url("Graphics/GameLogoArmR.PNG"), url("Wallpaper/AFStarsWP.GIF"); }
	.homenews .bottom { padding-right: 6px; background-repeat: no-repeat, repeat-x; background-position: right top, left top; background-clip: padding-box, content-box; background-image: url("Graphics/GameLogoArmBR.PNG"), url("Graphics/GameLogoB.PNG"); }
}