/*
Page: fillerama
*/

html, body { overflow: hidden; }

.bar { padding: 20px; border: 0; background: #222; }
.bar h1 { font-size: 24px; line-height: 20px; margin: 0; text-transform: none; color: #FFF; }
#fillerama article { padding: 0; }
#fillerama .container { max-width: none; width: 100%; }
article header, article footer li, article header h1, article header p, article footer p { font: 12px/24px "Helvetica Neue", Calibri, sans-serif; margin: 0; height: 24px; }
.options { background: none; padding: 0; margin: 0; width: auto; float: right; }
.options li { display: inline; font-size: 13px; line-height: inherit; margin-left: 20px; float: left; position: relative; }
.options li.right { margin-right: 0; }
.options label { display: inline; line-height: inherit; }
input[type="text"]#count { width: 20px; display: inline; border: 0; border-radius: 4px; padding: 4px 5px; margin-right: 13px; font-size: 12px; }
.count-btns { position: absolute; top: 1px; right: 0; width: 11px; height: 22px; }
#count-up, #count-down { position: absolute; width: 11px; height: 11px; line-height: 11px; padding: 0; margin: 0; }
#count-up { top: 0; }
#count-down { bottom: 0; }
article header, article footer { background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255,255,255,0.15)), color-stop(1, rgba(0,0,0,0.15))); background-image: -moz-linear-gradient(top, rgba(255,255,255,0.15), rgba(0,0,0,0.15)); padding: 8px 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,0,0,0.4); line-height: 24px; }
article header h1 { font-size: 16px; font-weight: bold; float: left; margin-right: 10px; }
article footer { position: fixed; bottom: 0; width: 100%; padding: 8px 0; height: 24px; }
.footer-content { padding: 0 10px; }
.footer-content li { display: inline; font-size: 14px; line-height: inherit; margin: 0 10px 0 0; float: left; margin-top: 2px; }
.footer-content li.right { margin: 0 0 0 10px; float: right; }
.footer-content li.creators p { font-weight: bold; }
#showlist { width: auto; margin: 0; }
#filler { width: 100%; margin: 0; white-space: pre-wrap; font: 12px/1.5 monospace; }
#filler, #preview { background: #FFF; position: fixed; width: auto; top: 100px; height: auto; bottom: 40px; left: 0; right: 50%; overflow-y: auto; padding: 20px; }
#preview { right: 0;left: 50%; border-left: 1px solid #CCC; }
#preview h1, #preview h2, #preview h3, #preview h4, #preview h5, #preview h6 { padding: 0; margin: 0; } 
#preview h1 { font-size: 36px; line-height: 48px; }
#preview h2 { font-size: 28px; line-height: 48px; }
#preview h3 { font-size: 24px; line-height: 48px; }
#preview h4 { font-size: 20px; line-height: 24px; }
#preview h5 { font-size: 16px; line-height: 24px; }
#preview h6 { font-size: 14px; line-height: 24px; text-transform: none;  }
#preview p:last-child { margin-bottom: 0; }
.btn { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.2)), to(rgba(0,0,0,0.2))); background-image: -moz-linear-gradient(top, rgba(255,255,255,0.2), rgba(0,0,0,0.2)); background-color: #444; color: #FFF; line-height: inherit; padding: 2px 15px; margin: -2px 0; box-shadow: 0 1px 0 rgba(0,0,0,0.1), inset 0 0 0 1px rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.1), inset 0 0 0 1px rgba(0,0,0,0.2); -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.1), inset 0 0 0 1px rgba(0,0,0,0.2); border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; font-size: 14px; }
.btn:hover { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.2)), to(rgba(0,0,0,0.2))); background-image: -moz-linear-gradient(top, rgba(255,255,255,0.2), rgba(0,0,0,0.2)); background-color: #222; }
.btn:active { background-color: #111; text-shadow: none; color: #FFF; box-shadow: inset 0 1px 5px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(0,0,0,0.5); -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(0,0,0,0.5);  -moz-box-shadow: inset 0 1px 5px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(0,0,0,0.5); background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,0.2)), to(rgba(0,0,0,0.2))); background-image: -moz-linear-gradient(top, rgba(255,255,255,0.2), rgba(0,0,0,0.2)); }

@media screen and (max-width: 800px)
{
	#top-bar { padding: 10px; }
	#preview { display: none; }
	#filler { right: 0; top: 80px; }
	#showlist { width: 80px; }
	#fillerama .options li { margin-left: 10px; }
	.container { padding: 0; }
}

/* Futurama */

.futurama .bar { background: #010005 url(i/fillerama/bar-futurama.jpg) no-repeat right center; }
.futurama .bar h1 { color: #FFF; }
.futurama #bottom-bar { background-image: none; border: 0; }
.futurama .bar a { color: #DDD; }
.futurama .bar a:hover, .futurama .bar h1 a { color: #FFF; }
.futurama article a { color: #FFF; }
#fillerama.futurama article header, #fillerama.futurama article footer { background-color: #75c7a1; color: #FFF; text-shadow: 0 1px 0 rgba(0,0,0,0.5); }
.futurama .btn { background-color: #E71919; }
.futurama .btn:hover { background-color: #ff1818; }

/* Dexter */

.dexter .bar { background: #f0f4e7 url(i/fillerama/bar-dexter.jpg) no-repeat right center; }
.dexter .bar h1 { color: #870000; font-style: italic; text-transform: uppercase; }
.dexter article a { color: #FFF; }
#fillerama.dexter article header, #fillerama.dexter article footer { background-color: #870000; color: #FFF; text-shadow: 0 1px 0 rgba(0,0,0,0.5); }
.dexter .btn { background-color: #222; }
.dexter .btn:hover { background-color: #333; }

/* Doctor Who */

.doctorwho .bar { background: #010101 url(i/fillerama/bar-doctorwho.jpg) no-repeat right center; }
.doctorwho .bar h1 { color: #FFF; text-transform: uppercase; font-weight: 200; letter-spacing: 1px; font-family: sans-serif; }
.doctorwho article a { color: #FFF; }
#fillerama.doctorwho article header, #fillerama.doctorwho article footer { background: #0E4170; color: #FFF; text-shadow: 0 1px 0 rgba(0,0,0,0.5); box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; }
.doctorwho .btn { background-color: #FFF; color: #222; text-shadow: none; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; }
.doctorwho .btn:hover { background: #FFF; }

/* Monty Python and the Holy Grail */

.holygrail .bar { background: #247DD9 url(i/fillerama/bar-holygrail.jpg) no-repeat right center; }
.holygrail .bar h1 { color: #FFF; text-transform: uppercase; font-weight: 200; letter-spacing: 1px; font-family: sans-serif; }
.holygrail article a { color: #312320; }
#fillerama.holygrail article header, #fillerama.holygrail article footer { background: #E3AE52; color: #211310; }
.holygrail .btn { background-color: #85190C; color: #FFF; }
.holygrail .btn:hover { background-color: #B93C28; }

/* The Simpsons */

.simpsons .bar { background: #FFF url(i/fillerama/bar-simpsons.png) no-repeat right center; }
.simpsons .bar h1 { color: #222; }
.simpsons article a { color: #222; }
#fillerama.simpsons article header, #fillerama.simpsons article footer { background: #FFE215; color: #333; }
.simpsons .btn { background-color: #EE5BA1; color: #FFF; }
.simpsons .btn:hover { background-color: #C54284; }

/* Star Wars */

.starwars .bar { background: #000 url(i/fillerama/bar-starwars.jpg) no-repeat right center; }