css/themes/tramway.css
/* Newspaper style for the conversion view. Its name, "Tramway", reminds of the time spent reading a journal in the public transport. */

/* -------
	Fonts
   ------- */
#html-conversion {
	/* Typography */
	font-family: Arvo, serif;
	font-size: 1em;
	line-height: 1.35em;
}

/* ------------
	Paragraphs
   ------------ */
#html-conversion p,
#html-conversion ol, /* Organized and unorganized lists follow the same rule : a blank space at the bottom */
#html-conversion ul {
	/* Box-model */
	padding-bottom: 0.65em;
}

/* --------
	Titles
   -------- */
#html-conversion h1,
#html-conversion h2,
#html-conversion h3 {
	/* Typography */
	font-family: Arvo;
}

#html-conversion h1 {
	/* Box-model */
	padding: 0.35em 0;

	/* Typography */
	font-size: 3em;
}

#html-conversion h2 {
	/* Box-model */
	padding: 0.3em 0 0.65em;

	/* Typography */
	font-size: 2em;
}

#html-conversion h3 {
	/* Box-model */
	padding: 0.5em 0;

	/* Typography */
	font-size: 1.25em;
}

#html-conversion h4 {
	/* Box-model */
	padding: 0.65em 0;

	/* Typography */
	font-weight: bold;
}

#html-conversion h5 {
	/* Box-model */
	padding-bottom: 0.8em;

	/* Typography */
	font-size: 0.8em;
	font-weight: bold;
}

#html-conversion h6 {
	/* Typography */
	font-size: 0.75em;
	font-weight: bold;
}

/* -------
	Lists
   ------- */
/* UNORDERED LISTS */
#html-conversion ul > li { padding-left: 2em; }

#html-conversion ul > li:before { width: 2em; }

/* ORDERED LISTS */
#html-conversion ol > li { padding-left: 2em; }

#html-conversion ol > li:before {
	/* Box-model */
	width: 2em;

	/* Misc */
	content: counter(list)".";
}

/* SUB-LISTS */
#html-conversion ol ol,
#html-conversion ol ul,
#html-conversion ul ul,
#html-conversion ul ol {
	/* Box-model */
	padding-bottom: 0;
}

/* -------------
	Blockquotes
   ------------- */
#html-conversion blockquote {
	/* Box-model */
	padding: 0 1.35em;

	/* Typography */
	font-size: 1.05em;
	text-align: center;
}

/* --------
	Tables
   -------- */
#html-conversion td,
#html-conversion th { border: 1px solid #4a4942; }

/* ------------------
	Horizontal rules
   ------------------ */
#html-conversion hr {
	margin: 0.65em auto 1.35em; /* No matter the size of the rule, it will be centered */

	/* Box-model */
	width: calc(100% - 4em);

	/* Visual */
	background-color: #4a4942;
}