<html>
	<head>
		<title></title>
		<style>
			body {
				margin: 0px;
				font: 12px arial,sans-serif;
			}
			a, a:visited {
				color: #555;
				-webkit-transition: color 0.5s;
			}
			a:hover {
				color: #999;
			}
			#header {
				height: 100%;
				width: 250px;
				position: fixed;
				top: 0px;
				padding: 15px;
				border-right: 1px dashed #AAA;
			}
			#header {
				-webkit-box-shadow: 0px 0px 50px -18px black;
			}
			#installed {
				position: relative;
				margin-left: 280px;
			}
			[style-id] {
				margin: 10px;
				padding: 0px 15px;
			}
			[style-id] {
				border-top: 2px solid gray;
			}
			#installed::after {
				content: "";
				position: absolute;
				top: 0;
				width: 100%; height: 2px;
				background-color: #fff;
			}
			.applies-to, .actions {
				padding-left: 15px;
			}
			.actions > * {
				margin-right: 5px;
			}
			.applies-to-extra {
				font-weight: bold;
			}
			.disabled h2::after {
				content: " (Disabled)";
			}
			.disabled {
				opacity: 0.5;
			}
			.disabled .disable {
				display: none;
			}
			.enabled .enable {
				display: none;
			}

			/* Default, no update buttons */
			.update, .check-update {
				display: none;
			}
			/* Check update button for things that can*/
			*[style-update-url] .check-update {
				display: inline;
			}
			/* Update check in progress */
			.checking-update .check-update {
				display: none;
			}
			/* Updates available */
			.can-update .update {
				display: inline;
			}
			.can-update .check-update {
				display: none;
			}
			/* Updates not available */
			.no-update .check-update {
				display: none;
			}
			/* Updates done */
			.update-done .check-update {
				display: none;
			}
			.hidden {display: none}

			@media(max-width:675px) {
				#header {
					height: auto;
					position: inherit;
					width: auto;
					border-right: none;
				}

				#installed {
					margin-left: 0px;
				}

				[style-id] {
					margin: 0px;
				}
			}

			fieldset {
				border-width:  1px;
				border-radius: 6px;
				margin: 1em 0;
			}
			legend {
				color: gray;
			}
			.enabled-only > .disabled, .edited-only > [style-update-url] {
				display: none;
			}
		</style>
		<script src="localization.js"></script>
		<script src="health.js"></script>
		<script src="storage.js"></script>
		<script src="messaging.js"></script>
		<script src="apply.js"></script>
	</head>
	<body id="stylish-manage">

		<div id="header">
			<img src="128.png">
			<h1 id="manage-heading"></h1>
			<p id="manage-text"></p>
			<fieldset>
				<legend id="filters"></legend>
				<div><input id="manage.onlyEnabled" type="checkbox"><label id="manage.onlyEnabled-label" for="manage.onlyEnabled"></label></div>
				<div><input id="manage.onlyEdited" type="checkbox"><label id="manage.onlyEdited-label" for="manage.onlyEdited"></label></div>
			</fieldset>
			<p><button id="check-all-updates"></button></p>
			<p>
				<button id="apply-all-updates" class="hidden"></button>
				<span id="update-all-no-updates" class="hidden"></span>
			</p>
			<p><a href="edit.html"><button id="add-style-label"></button></a></p>
			<div id="options">
				<h2 id="options-heading"></h2>
				<input id="show-badge" type="checkbox"><label id="show-badge-label" for="show-badge"></label>
				<div><input id="popup.stylesFirst" type="checkbox"><label id="stylesFirst-label" for="popup.stylesFirst"></label></div>
			</div>
		</div>
		<div id="installed"></div>

		<script src="manage.js"></script>
	</body>
</html>