@font-face {
	font-family: 'PTSansNarrowRegular';
	src: url('../font/ptsans/ptn57f.eot');
	src: url('../font/ptsans/ptn57f.eot?#iefix') format('embedded-opentype'),
		 url('../font/ptsans/ptn57f.woff') format('woff'),
		 url('../font/ptsans/ptn57f.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'PTSansNarrowBold';
	src: url('../font/ptsans/ptn77f.eot');
	src: url('../font/ptsans/ptn77f.eot?#iefix') format('embedded-opentype'),
		 url('../font/ptsans/ptn77f.woff') format('woff'),
		 url('../font/ptsans/ptn77f.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'PTSansItalic';
	src: url('../font/ptsans/pts56f.eot');
	src: url('../font/ptsans/pts56f.eot?#iefix') format('embedded-opentype'),
		 url('../font/ptsans/pts56f.woff') format('woff'),
		 url('../font/ptsans/pts56f.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'PTSansRegular';
	src: url('../font/ptsans/pts55f.eot');
	src: url('../font/ptsans/pts55f.eot?#iefix') format('embedded-opentype'),
		 url('../font/ptsans/pts55f.woff') format('woff'),
		 url('../font/ptsans/pts55f.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* headlines ^
------------------------------------------------ */

.headline {
	position: relative;
	margin: 0 0 24px;
	padding: 0;
	
	line-height: 1.1em;
	font-family: 'PTSansNarrowRegular';
	font-weight: normal;
}

.headline, .headline a {
	-webkit-transition: color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out;
}

.headline a {
	display: block;

	text-decoration: none;
	color: inherit;
}

.headline:hover a {
	color: #555;
}

.headline.m-orange { color: #F26F52; }
.headline.m-pastel-blue { color: #5D9B9B; }
.headline.m-green { color: #8FB25B; }
.headline.m-reddish { color: #D84C3A; }

h1 { font-size: 38px; }
h2 { font-size: 34px; }
h3 { font-size: 30px; }
h4 { font-size: 26px; }
h5 { font-size: 22px;}
h6 { font-size: 18px; }

h4 {
	margin-top: 60px !important;
}

h4:first-of-type {
	margin-top: 40px !important;
}

p {
	margin: 20px 0;
	color: #444;
}

p:last-child {
	margin-bottom: 0;
}

/*																			   		 LAYOUT ^
--------------------------------------------------------------------------------------------*/

body {
	margin: 0;
	
	background-color: #fff;

	font: 17px/1.5em 'PTSansRegular';
	color: #676767;
}

.main {
	position: relative;
	background-color: #fff;
}

.layout {
	max-width: 960px;
	min-width: 420px;

	position: relative;
	margin: auto;
	padding: 0 20px;
}

.m-left {
	float: left;
}

.m-center {
	margin-left: auto;
	margin-right: auto;
}

.m-right {
	float: right;
}

/*																			   		 HEADER ^
--------------------------------------------------------------------------------------------*/

.header {
	height: 50px;

	background: #444;

	line-height: 50px;
	color: #fff;
}

.header h1 {
	margin: 0;

	font: 26px/50px 'PTSansNarrowBold';
	font-weight: normal;
	color: #fff;
}

/*																			   		CONTENT ^
--------------------------------------------------------------------------------------------*/

.content {
	padding-top: 40px;
	padding-bottom: 40px;
}

.section {
	padding: 60px 0;
	background-color: #fff;
}

.section:first-child {
	padding-top: 0;
}

.b-contents {
	margin: 0;
	padding: 0;

	list-style: none;
}

.b-contents li {
	border-bottom: 1px dashed #ccc;
}

.b-contents li:first-child {
	border-top: 1px dashed #ccc;
}

.b-contents a {
	display: block;
	padding: 14px 4px;

	text-decoration: none;
	color: inherit;
}

.b-code {
	overflow: auto;
	margin-bottom: 30px;
	padding: 15px;

	background-color: #fbfbfb;
	border: 1px solid #e5e5e5;

	font-size: 13px;
}

.bg-preview {
	display: inline-block;
	margin: 0 4px 8px 0;
	
	background-color: #fbfbfb;
	border: 1px solid #e5e5e5;
}

.bg-preview div {
	display: inline-block;
	vertical-align: middle;
	height: 50px;

	line-height: 50px;
}

.bg-preview .bg-title {
	padding: 0 15px;
}

.bg-preview .bg {
	width: 50px;
	border: 1px solid #fff;
}

.bg-wood_pattern { background: #ddd url(../img/bg/wood_pattern.png); }
.bg-shattered { background: #ddd url(../img/bg/shattered.png); }

.bg-vichy { background: #ddd url(../img/bg/vichy.png); }
.bg-random-grey-variations { background: #ddd url(../img/bg/random_grey_variations.png); }
.bg-irongrip { background: #ddd url(../img/bg/irongrip.png); }
.bg-gplaypattern { background: #ddd url(../img/bg/gplaypattern.png); }

.bg-diamond_upholstery { background: #ddd url(../img/bg/diamond_upholstery.png); }
.bg-denim { background: #ddd url(../img/bg/denim.png); }
.bg-crissXcross { background: #ddd url(../img/bg/crissXcross.png); }
.bg-climpek { background: #ddd url(../img/bg/climpek.png); }