style.css

@font-face {
	font-family: 'TYPO3-Icon-Font';
	src:url('fonts/TYPO3-Icon-Font.eot');
}
@font-face {
	font-family: 'TYPO3-Icon-Font';
	src: url(data:application/x-font-woff;charset=utf-8;base64,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) format('woff'),
		 url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
	font-family: 'TYPO3-Icon-Font';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
.icon-typo3, .icon-flow, .icon-neos, .icon-typo3-logo {
	font-family: 'TYPO3-Icon-Font';
	color: #000;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.icon-typo3:before {
	content: "\e002";
}
.icon-flow:before {
	content: "\e001";
}
.icon-neos:before {
	content: "\e000";
}
.icon-typo3-logo:before {
	content: "\e003";
}
	section, header, footer {display: block;}
	body {
		font-family: sans-serif;
		color: #444;
		line-height: 1.5;
		font-size: 12px;
	}
	* {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
	.glyph {
		font-size: 16px;
		float: left;
		text-align: center;
		background: #eee;
		padding: .75em;
		margin: .75em 1.5em .75em 0;
		width: 7.5em;
		border-radius: .25em;
		box-shadow: inset 0 0 0 1px #f8f8f8, 0 0 0 1px #CCC;
	}
	.glyph input {
		font-family: consolas, monospace;
		font-size: 13px;
		width: 100%;
		text-align: center;
		border: 0;
		box-shadow: 0 0 0 1px #ccc;
		padding: .125em;
	}
	.w-main {
		width: 80%;
	}
	.centered {
		margin-left: auto;
		margin-right: auto;
	}
	.fs2, .fs3, .fs4{
		padding: 0.1em 0.3em;
	}
	.fs1 {
		font-size: 2em;
	}
	.fs2 {
		font-size: 4em;
	}
	.fs3 {
		font-size: 8em;
	}
	.fs4 {
		font-size: 12em;
	}
	header {
		margin: 2em 0;
		padding-bottom: .5em;
		color: #666;
		box-shadow: 0 2px #eee;
	}
	header h1 {
		font-size: 2em;
		font-weight: normal;
	}
	.clearfix:before, .clearfix:after { content: ""; display: table; }
	.clearfix:after, .clear { clear: both; }
	footer {
		margin-top: 2em;
		padding: .5em 0;
		box-shadow: 0 -2px #eee;
	}
	a, a:visited {
		color: #B35047;
		text-decoration: none;
	}
	a:hover, a:focus {color: #000;}
	.box1 {
		font-size: 16px;
		display: inline-block;
		width: 15em;
		padding: .25em .5em;
		background: #eee;
		margin: .5em 1em .5em 0;
	}
	.row {
		width: 100%;
		margin: 75px 0px;
	}
	.orange {
		color:#ff7700;
	}
	.negative {
		background: #000;
		color: #fff;
	}