245 lines
4.9 KiB
CSS
245 lines
4.9 KiB
CSS
@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); } |