<!DOCTYPE HTML>
<!--
Copyright 2014 The Chromium Authors
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="theme-color" id="theme-color">
<!-- Placeholder for CSP. -->
$1
<title>$i18n{title}</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!-- Placeholder for CSS. -->
$2
</head>
<body class="$3">
<div id="content-wrap">
<div id="main-content">
<div id="settings-container" class="desktop-only">
<button id="settings-toggle" type="button"
aria-label="$i18n{customizeAppearance}" tabindex=0>
<i class="material-icons"></i>
</button>
<div id="dialog-backdrop"></div>
<dialog id="settings-dialog">
<div id="settings-header">
<h1>$i18n{customizeAppearance}</h1>
</div>
<div id="settings-fields">
<div class="setting font-family-container">
<label id="font-family-label" class="screen-reader-only">
$i18n{fontStyle}
</label>
<select id="font-family-selection" aria-labelledby="font-family-label" name="font-family">
<option value="sans-serif" selected>$i18n{sansSerifFont}</option>
<option value="serif">$i18n{serifFont}</option>
<option value="monospace">$i18n{monospaceFont}</option>
</select>
<i class="material-icons" id="arrow-drop-down"></i>
</div>
<div class="setting">
<fieldset id="theme-selection">
<legend class="screen-reader-only">
$i18n{pageColor}
</legend>
<ul>
<li class="theme-option">
<input type="radio" name="theme" value="light"
aria-label="$i18n{light}" id="theme-option-light" class="light" checked>
<div class="checkmark"><i class="material-icons" aria-hidden="true"></i></div>
</li>
<li class="theme-option">
<input type="radio" name="theme" value="sepia"
aria-label="$i18n{sepia}" id="theme-option-sepia" class="sepia">
<div class="checkmark"><i class="material-icons" aria-hidden="true"></i></div>
</li>
<li class="theme-option">
<input type="radio" name="theme" value="dark"
aria-label="$i18n{dark}" id="theme-option-dark" class="dark">
<div class="checkmark"><i class="material-icons" aria-hidden="true"></i></div>
</li>
</ul>
</fieldset>
</div>
<div class="setting" id="font-size-wrapper">
<label id="font-size-label" class="screen-reader-only">
$i18n{fontSize}
</label>
<input aria-labelledby="font-size-label"
id="font-size-selection"
type="range"
name="font-size"
list="tickmarks"
min="0"
max="9"
value="2">
<div class="label-container">
<span id="slider-label-min">$i18n{small}</span>
<span id="slider-label-max">$i18n{large}</span>
</div>
</div>
</div>
<button id="close-settings-button" type="button"
aria-label="$i18n{close}" tabindex=0>
<i class="material-icons">close</i>
</button>
</dialog>
</div>
<article>
<header id="article-header">
<div id="title-collapse">
<div class="vertical-center-outer">
<div class="vertical-center-inner">
<h1 id="title-holder"><noscript>$i18n{title}</noscript></h1>
</div>
</div>
</div>
</header>
<div id="content"><noscript>$4</noscript></div>
</article>
<div id="loading-indicator" class="visible">
<!-- SVG material loading spinner. -->
$5
</div>
</div>
</div>
</body>
</html>