css/conversion-view-base.css
/* ==============
	MISCELLANOUS
   ============== */

/* -------
	Fonts
   ------- */
/* BARIOL (CLINIC) */
/* Bariol Regular */
@font-face {
	/* Typography */
	font-family: Bariol;
	src: url('../fonts/bariol_regular.ttf') format('truetype');
}

/* Bariol Bold */
@font-face {
	/* Typography */
	font-family: Bariol;
	font-weight: bold;
	src: url('../fonts/bariol_bold.ttf') format('truetype');
}

/* Bariol Light */
@font-face {
	/* Typography */
	font-family: BariolLight;
	src: url('../fonts/bariol_light.ttf') format('truetype');
}

/* Bariol Italic */
@font-face {
	/* Typography */
	font-family: Bariol;
	font-style: italic;
	src: url('../fonts/bariol_regular_italic.ttf') format('truetype');
}

/* Bariol Bold Italic */
@font-face {
	/* Typography */
	font-family: Bariol;
	font-style: italic;
	font-weight: bold;
	src: url('../fonts/bariol_bold_italic.ttf') format('truetype');
}

/* Bariol Light Italic */
@font-face {
	/* Typography */
	font-family: BariolLight;
	font-style: italic;
	src: url('../fonts/bariol_light_italic.ttf') format('truetype');
}

/* ARVO (TRAMWAY) */
/* Arvo Regular */
@font-face {
	/* Typography */
	font-family: Arvo;
	src: url('../fonts/arvo-regular.ttf') format('truetype');
}

/* Arvo Bold */
@font-face {
	/* Typography */
	font-family: Arvo;
	font-weight: bold;
	src: url('../fonts/arvo-bold.ttf') format('truetype');
}

/* Arvo Italic */
@font-face {
	/* Typography */
	font-family: Arvo;
	font-style: italic;
	src: url('../fonts/arvo-italic.ttf') format('truetype');
}

/* Arvo Bold Italic */
@font-face {
	/* Typography */
	font-family: Arvo;
	font-style: italic;
	font-weight: bold;
	src: url('../fonts/arvo-bold-italic.ttf') format('truetype');
}

#html-conversion {
	/* Typography */
	font-size: 1em;
	line-height: 1.35em;
}

/* ---------
	General
   --------- */
#html-conversion img { max-width: 100%; }

#html-conversion .nofile,
#html-conversion .nofile-link {
	/* Misc */
	cursor: pointer;
}

#html-conversion .nofile-visual {
	/* Typography */
	color: #1c75ea;
	text-decoration: none;
}

#html-conversion .nofile-visual { text-decoration: underline; }

#html-conversion .nofile-visual { color: #187af9; }

/* ------------
	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.7em;
}

/* --------
	Titles
   -------- */
#html-conversion h1,
#html-conversion h2,
#html-conversion h3 {
	/* Typography */
	font-family: "Segoe UI Light", "HelveticaNeue-Light", "Helvetica Neue Light", "Roboto Light", "Open Sans", sans-serif;
}

#html-conversion h1 {
	/* Box-model */
	padding-top: 0.4em;

	/* Typography */
	font-size: 3em;
	line-height: 1.35em;
}

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

	/* Typography */
	font-size: 2em;
	line-height: 1.35em;
}

#html-conversion h3 {
	/* Box-model */
	padding-top: 0.4em;

	/* Typography */
	font-size: 1.25em;
	line-height: 1.1em;
}

#html-conversion h4 {
	/* Box-model */
	padding-top: 0.7em;

	/* Typography */
	font-size: 1em;
	font-weight: bold;
	line-height: 1.35em;
}

#html-conversion h5 {
	/* Typography */
	font-size: 0.8em;
	font-weight: bold;
	line-height: 1.7em;
}

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

/* -------
	Lists
   ------- */
/* UNORDERED LISTS */
#html-conversion ul > li {
	/* Positioning */
	position: relative;

	/* Box-model */
	padding-left: 3em;
}

#html-conversion ul > li:before {
	/* Positioning */
	position: absolute;
	top: 0;
	left: 0;

	/* Box-model */
	display: block;
	width: 3em;

	/* Typography */
	font-family: 'Mado-Little-Icons-Normal';
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	speak: none;

	/* Misc */
	content: "\e020"; /* Default bullet (disc), primarily for levels 3n + 1 */
}

/* Sub-unordered lists (levels 3n + 2) */
#html-conversion > * > li > ul > li:before, /* Second level list item */
#html-conversion > * > li > * > li > * > li > * > li > ul > li:before, /* Fifth level list item */
#html-conversion > * > li > * > li > * > li > * > li > * > li > * > li > * > li > ul > li:before, /* Eighth level list item */
#html-conversion > * > li > * > li > * > li > * > li > * > li > * > li > * > li > * > li > * > li > * > li > ul > li:before, /* Eleventh level list item */
#html-conversion > * > li > * > li > * > li > * > li > * > li > * > li > * > li > * > li > * > li > * > li > * > li > * > li > * > li > ul > li:before /* Fourteenth level list item */
{ content: "\e021"; } /* Second level bullet */

/* Sub-unordered lists (levels 3n) */
#html-conversion > * > li > * > li > ul > li:before, /* Third level list item */
#html-conversion > * > li > * > li > * > li > * > li > * > li > ul > li:before, /* Sixth level list item */
#html-conversion > * > li > * > li > * > li > * > li > * > li > * > li > * > li > * > li > ul > li:before, /* Ninth level list item */
#html-conversion > * > li > * > li > * > li > * > li > * > li > * > li > * > li > * > li > * > li > * > li > * > li > ul > li:before, /* Twelfth level list item */
#html-conversion > * > li > * > li > * > li > * > li > * > li > * > li > * > li > * > li > * > li > * > li > * > li > * > li > * > li > * > li > ul > li:before /* Fifteenth level list item */
{ content: "\e022"; } /* Third level bullet (square) */

/* ORDERED LISTS */
#html-conversion ol { counter-reset: list; }

#html-conversion ol > li {
	/* Positioning */
	position: relative;

	/* Box-model */
	padding-left: 3em;

	/* Misc */
	counter-increment: list;
}

#html-conversion ol > li:before {
	/* Positioning */
	position: absolute;
	top: 0;
	left: 0;

	/* Box-model */
	display: block;
	width: 3em;

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

/* Prevent empty list items to be displayed without a height */
#html-conversion li:empty { height: 1.3em; }

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

/* -------------
	
   ------------- */
#html-conversion blockquote {
	/* Positioning */
	margin-bottom: 0.7em;

	/* Box-model */
	padding: 0.7em 0 0 0.7em;

	/* Typography */
	font-style: italic;
}

/* --------
	Tables
   -------- */
#html-conversion table { margin-bottom: 0.7em; }

#html-conversion td,
#html-conversion th {
	/* Box-model */
	padding: 0.5em;

	/* Visual */
	border: 1px solid #dadada;
}

/* Zebra stripes for the table's body */
#html-conversion tbody tr:nth-child(2n+1) { background-color: #f0f0f0; }

/* ------------------
	Horizontal rules
   ------------------ */
#html-conversion hr {
	/* Positioning */
	clear: both;
	margin: 0.7em auto 1.4em; /* No matter the size of the rule, it will be centered */

	/* Box-model */
	height: 1px;

	/* Visual */
	background-color: rgba(0,0,0,.1);
	border: none;
}

/* ------
	Code
   ------ */
/* Rules that preformatted text and code have in common */
pre, code {
	/* Typography */
	font-family: SourceCodePro;
	font-size: 0.95em;
	color: #000;

	/* Visual */
	background-color: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 3px;
}

/* Only for inline code */
code {
	/* Box-model */
	padding: 0 0.35em;
}

/* Preformatted text is a block */
pre {
	/* Positioning */
	margin-bottom: 0.7em;

	/* Box-model */
	width: 100%;
	padding: 0.65em;
	overflow-x: auto;
}

/* Cancel some rules for code inside a preformatted text tag to avoid nested code blocks */
pre > code {
	/* Box-model */
	padding: 0;

	/* Visual */
	background: transparent;
	border: none;
	border-radius: 0;
}