<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="template">
<div class="ftl-width-medium-1">
<ul class="ftl-tab ftl-tab-grid ftl-tab-bottom" data-ftl-tab>
<li class="ftl-width-1-6 ftl-active"><a href="#">HTML5</a></li>
<li class="ftl-width-1-6"><a href="#">CSS3</a></li>
<li class="ftl-width-1-6"><a href="#">JavaScript</a></li>
<li class="ftl-width-1-6"><a href="#">jQuery</a></li>
<li class="ftl-width-1-6"><a href="#">Bootstrap</a></li>
<li class="ftl-width-1-6"><a href="#">AngularJS</a></li>
</ul>
</div> .template {
width: 780px;
margin: 50px auto 50px !important;
position: relative;
}
html {
font: 400 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
background: #fff;
color: #444
}
body {
margin: 0
}
a {
background: 0 0
}
a:active,
a:hover {
outline: 0
}
.ftl-link,
a {
color: #07D;
text-decoration: none;
cursor: pointer
}
.ftl-link:hover,
a:hover {
color: #059;
text-decoration: underline
}
abbr[title] {
border-bottom: 1px dotted
}
b,strong {
font-weight: 700
}
:not(pre)>code,
:not(pre)>kbd,
:not(pre)>samp {
font-size: 12px;
font-family: Consolas, monospace, serif;
color: #D05;
white-space: nowrap
}
em {
color: #D05
}
ins {
background: #ffa;
color: #444;
text-decoration: none
}
mark {
background: #ffa;
color: #444
}
q {
font-style: italic
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sup {
top: -.5em
}
sub {
bottom: -.25em
}
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle
}
audio,
canvas,
img,
svg,
video {
max-width: 100%;
height: auto;
box-sizing: border-box
}
.ftl-img-preserve,
.ftl-img-preserve audio,
.ftl-img-preserve canvas,
.ftl-img-preserve img,
.ftl-img-preserve svg,
.ftl-img-preserve video {
max-width: none
}
img {
border: 0
}
svg:not(:root) {
overflow: hidden
}
blockquote,
figure {
margin: 0
}
address,
blockquote,
dl,
fieldset,
figure,
ol,
p,
pre,
ul {
margin: 0 0 15px 0
}
*+address,
*+blockquote,
*+dl,
*+fieldset,
*+figure,
*+ol,
*+p,
*+pre,
*+ul {
margin-top: 15px
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 15px 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
color: #444;
text-transform: none
}
*+h1,
*+h2,
*+h3,
*+h4,
*+h5,
*+h6 {
margin-top: 25px
}
.ftl-h1,
h1 {
font-size: 36px;
line-height: 42px
}
.ftl-h2,
h2 {
font-size: 24px;
line-height: 30px
}
.ftl-h3,
h3 {
font-size: 18px;
line-height: 24px
}
.ftl-h4,
h4 {
font-size: 16px;
line-height: 22px
}
.ftl-h5,
h5 {
font-size: 14px;
line-height: 20px
}
.ftl-h6,
h6 {
font-size: 12px;
line-height: 18px
}
ol,
ul {
padding-left: 30px
}
ol>li>ol,
ol>li>ul,
ul>li>ol,
ul>li>ul {
margin: 0
}
dt {
font-weight: 700
}
dd {
margin-left: 0
}
hr {
box-sizing: content-box;
height: 0;
margin: 15px 0;
border: 0;
border-top: 1px solid #ddd
}
address {
font-style: normal
}
blockquote {
padding-left: 15px;
border-left: 5px solid #ddd;
font-size: 16px;
line-height: 22px;
font-style: italic
}
pre {
padding: 10px;
background: #f5f5f5;
font: 12px/18px Consolas, monospace, serif;
color: #444;
-moz-tab-size: 4;
tab-size: 4;
overflow: auto
}
::-moz-selection {
background: #39f;
color: #fff;
text-shadow: none
}
::selection {
background: #39f;
color: #fff;
text-shadow: none
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
display: block
}
progress {
vertical-align: baseline
}
audio:not([controls]) {
display: none
}
[hidden],
template {
display: none
}
iframe {
border: 0
}
@media screen and (max-width:400px) {
@-ms-viewport {
width: device-width
}
}
.ftl-grid {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none
}
.ftl-grid:after,
.ftl-grid:before {
content: "";
display: block;
overflow: hidden
}
.ftl-grid:after {
clear: both
}
.ftl-grid>* {
-ms-flex: none;
-webkit-flex: none;
flex: none;
margin: 0;
float: left
}
.ftl-grid>*>:last-child {
margin-bottom: 0
}
.ftl-grid {
margin-left: -25px
}
.ftl-grid>* {
padding-left: 25px
}
.ftl-grid+.ftl-grid,
.ftl-grid-margin,
.ftl-grid>*>.ftl-panel+.ftl-panel {
margin-top: 25px
}
@media (min-width:1220px) {
.ftl-grid {
margin-left: -35px
}
.ftl-grid>* {
padding-left: 35px
}
.ftl-grid+.ftl-grid,
.ftl-grid-margin,
.ftl-grid>*>.ftl-panel+.ftl-panel {
margin-top: 35px
}
}
.ftl-grid-collapse {
margin-left: 0
}
.ftl-grid-collapse>* {
padding-left: 0
}
.ftl-grid-collapse+.ftl-grid-collapse,
.ftl-grid-collapse>*>.ftl-panel+.ftl-panel,
.ftl-grid-collapse>.ftl-grid-margin {
margin-top: 0
}
.ftl-grid-small {
margin-left: -10px
}
.ftl-grid-small>* {
padding-left: 10px
}
.ftl-grid-small+.ftl-grid-small,
.ftl-grid-small>*>.ftl-panel+.ftl-panel,
.ftl-grid-small>.ftl-grid-margin {
margin-top: 10px
}
.ftl-grid-medium {
margin-left: -25px
}
.ftl-grid-medium>* {
padding-left: 25px
}
.ftl-grid-medium+.ftl-grid-medium,
.ftl-grid-medium>*>.ftl-panel+.ftl-panel,
.ftl-grid-medium>.ftl-grid-margin {
margin-top: 25px
}
@media (min-width:960px) {
.ftl-grid-large {
margin-left: -35px
}
.ftl-grid-large>* {
padding-left: 35px
}
.ftl-grid-large+.ftl-grid-large,
.ftl-grid-large-margin,
.ftl-grid-large>*>.ftl-panel+.ftl-panel {
margin-top: 35px
}
}
@media (min-width:1220px) {
.ftl-grid-large {
margin-left: -50px
}
.ftl-grid-large>* {
padding-left: 50px
}
.ftl-grid-large+.ftl-grid-large,
.ftl-grid-large-margin,
.ftl-grid-large>*>.ftl-panel+.ftl-panel {
margin-top: 50px
}
}
.ftl-grid-divider:not(:empty) {
margin-left: -25px;
margin-right: -25px
}
.ftl-grid-divider>* {
padding-left: 25px;
padding-right: 25px
}
.ftl-grid-divider>[class*=ftl-width-9-]:nth-child(n+2),
.ftl-grid-divider>[class*=ftl-width-1-]:not(.ftl-width-1-1):nth-child(n+2),
.ftl-grid-divider>[class*=ftl-width-2-]:nth-child(n+2),
.ftl-grid-divider>[class*=ftl-width-3-]:nth-child(n+2),
.ftl-grid-divider>[class*=ftl-width-4-]:nth-child(n+2),
.ftl-grid-divider>[class*=ftl-width-5-]:nth-child(n+2),
.ftl-grid-divider>[class*=ftl-width-6-]:nth-child(n+2),
.ftl-grid-divider>[class*=ftl-width-7-]:nth-child(n+2),
.ftl-grid-divider>[class*=ftl-width-8-]:nth-child(n+2) {
border-left: 1px solid #ddd
}
@media (min-width:768px) {
.ftl-grid-divider>[class*=ftl-width-medium-]:not(.ftl-width-medium-1-1):nth-child(n+2) {
border-left: 1px solid #ddd
}
}
@media (min-width:960px) {
.ftl-grid-divider>[class*=ftl-width-large-]:not(.ftl-width-large-1-1):nth-child(n+2) {
border-left: 1px solid #ddd
}
}
@media (min-width:1220px) {
.ftl-grid-divider:not(: empty) {
margin-left: -35px;
margin-right: -35px
}
.ftl-grid-divider>* {
padding-left: 35px;
padding-right: 35px
}
.ftl-grid-divider:empty {
margin-top: 35px;
margin-bottom: 35px
}
}
.ftl-grid-divider:empty {
margin-top: 25px;
margin-bottom: 25px;
border-top: 1px solid #ddd
}
.ftl-grid-match>* {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap
}
.ftl-grid-match>*>* {
-ms-flex: none;
-webkit-flex: none;
flex: none;
box-sizing: border-box;
width: 100%
}
[class*=ftl-grid-width]>* {
box-sizing: border-box;
width: 100%
}
.ftl-grid-width-1-2>* {
width: 50%
}
.ftl-grid-width-1-3>* {
width: 33.333%
}
.ftl-grid-width-1-4>* {
width: 25%
}
.ftl-grid-width-1-5>* {
width: 20%
}
.ftl-grid-width-1-6>* {
width: 16.666%
}
.ftl-grid-width-1-10>* {
width: 10%
}
.ftl-grid-width-auto>* {
width: auto
}
@media (min-width:480px) {
.ftl-grid-width-small-1-1>* {
width: 100%
}
.ftl-grid-width-small-1-2>* {
width: 50%
}
.ftl-grid-width-small-1-3>* {
width: 33.333%
}
.ftl-grid-width-small-1-4>* {
width: 25%
}
.ftl-grid-width-small-1-5>* {
width: 20%
}
.ftl-grid-width-small-1-6>* {
width: 16.666%
}
.ftl-grid-width-small-1-10>* {
width: 10%
}
}
@media (min-width:768px) {
.ftl-grid-width-medium-1-1>* {
width: 100%
}
.ftl-grid-width-medium-1-2>* {
width: 50%
}
.ftl-grid-width-medium-1-3>* {
width: 33.333%
}
.ftl-grid-width-medium-1-4>* {
width: 25%
}
.ftl-grid-width-medium-1-5>* {
width: 20%
}
.ftl-grid-width-medium-1-6>* {
width: 16.666%
}
.ftl-grid-width-medium-1-10>* {
width: 10%
}
}
@media (min-width:960px) {
.ftl-grid-width-large-1-1>* {
width: 100%
}
.ftl-grid-width-large-1-2>* {
width: 50%
}
.ftl-grid-width-large-1-3>* {
width: 33.333%
}
.ftl-grid-width-large-1-4>* {
width: 25%
}
.ftl-grid-width-large-1-5>* {
width: 20%
}
.ftl-grid-width-large-1-6>* {
width: 16.666%
}
.ftl-grid-width-large-1-10>* {
width: 10%
}
}
@media (min-width:1220px) {
.ftl-grid-width-xlarge-1-1>* {
width: 100%
}
.ftl-grid-width-xlarge-1-2>* {
width: 50%
}
.ftl-grid-width-xlarge-1-3>* {
width: 33.333%
}
.ftl-grid-width-xlarge-1-4>* {
width: 25%
}
.ftl-grid-width-xlarge-1-5>* {
width: 20%
}
.ftl-grid-width-xlarge-1-6>* {
width: 16.666%
}
.ftl-grid-width-xlarge-1-10>* {
width: 10%
}
}
[class*=ftl-width] {
box-sizing: border-box;
width: 100%
}
.ftl-width-1-1 {
width: 100%
}
.ftl-width-1-2,
.ftl-width-2-4,
.ftl-width-3-6,
.ftl-width-5-10 {
width: 50%
}
.ftl-width-1-3,
.ftl-width-2-6 {
width: 33.333%
}
.ftl-width-2-3,
.ftl-width-4-6 {
width: 66.666%
}
.ftl-width-1-4 {
width: 25%
}
.ftl-width-3-4 {
width: 75%
}
.ftl-width-1-5,
.ftl-width-2-10 {
width: 20%
}
.ftl-width-2-5,
.ftl-width-4-10 {
width: 40%
}
.ftl-width-3-5,
.ftl-width-6-10 {
width: 60%
}
.ftl-width-4-5,
.ftl-width-8-10 {
width: 80%
}
.ftl-width-1-6 {
width: 16.666%
}
.ftl-width-5-6 {
width: 83.333%
}
.ftl-width-1-10 {
width: 10%
}
.ftl-width-3-10 {
width: 30%
}
.ftl-width-7-10 {
width: 70%
}
.ftl-width-9-10 {
width: 90%
}
@media (min-width:480px) {
.ftl-width-small-1-1 {
width: 100%
}
.ftl-width-small-1-2,
.ftl-width-small-2-4,
.ftl-width-small-3-6,
.ftl-width-small-5-10 {
width: 50%
}
.ftl-width-small-1-3,
.ftl-width-small-2-6 {
width: 33.333%
}
.ftl-width-small-2-3,
.ftl-width-small-4-6 {
width: 66.666%
}
.ftl-width-small-1-4 {
width: 25%
}
.ftl-width-small-3-4 {
width: 75%
}
.ftl-width-small-1-5,
.ftl-width-small-2-10 {
width: 20%
}
.ftl-width-small-2-5,
.ftl-width-small-4-10 {
width: 40%
}
.ftl-width-small-3-5,
.ftl-width-small-6-10 {
width: 60%
}
.ftl-width-small-4-5,
.ftl-width-small-8-10 {
width: 80%
}
.ftl-width-small-1-6 {
width: 16.666%
}
.ftl-width-small-5-6 {
width: 83.333%
}
.ftl-width-small-1-10 {
width: 10%
}
.ftl-width-small-3-10 {
width: 30%
}
.ftl-width-small-7-10 {
width: 70%
}
.ftl-width-small-9-10 {
width: 90%
}
}
@media (min-width:768px) {
.ftl-width-medium-1-1 {
width: 100%
}
.ftl-width-medium-1-2,
.ftl-width-medium-2-4,
.ftl-width-medium-3-6,
.ftl-width-medium-5-10 {
width: 50%
}
.ftl-width-medium-1-3,
.ftl-width-medium-2-6 {
width: 33.333%
}
.ftl-width-medium-2-3,
.ftl-width-medium-4-6 {
width: 66.666%
}
.ftl-width-medium-1-4 {
width: 25%
}
.ftl-width-medium-3-4 {
width: 75%
}
.ftl-width-medium-1-5,
.ftl-width-medium-2-10 {
width: 20%
}
.ftl-width-medium-2-5,
.ftl-width-medium-4-10 {
width: 40%
}
.ftl-width-medium-3-5,
.ftl-width-medium-6-10 {
width: 60%
}
.ftl-width-medium-4-5,
.ftl-width-medium-8-10 {
width: 80%
}
.ftl-width-medium-1-6 {
width: 16.666%
}
.ftl-width-medium-5-6 {
width: 83.333%
}
.ftl-width-medium-1-10 {
width: 10%
}
.ftl-width-medium-3-10 {
width: 30%
}
.ftl-width-medium-7-10 {
width: 70%
}
.ftl-width-medium-9-10 {
width: 90%
}
}
@media (min-width:960px) {
.ftl-width-large-1-1 {
width: 100%
}
.ftl-width-large-1-2,
.ftl-width-large-2-4,
.ftl-width-large-3-6,
.ftl-width-large-5-10 {
width: 50%
}
.ftl-width-large-1-3,
.ftl-width-large-2-6 {
width: 33.333%
}
.ftl-width-large-2-3,
.ftl-width-large-4-6 {
width: 66.666%
}
.ftl-width-large-1-4 {
width: 25%
}
.ftl-width-large-3-4 {
width: 75%
}
.ftl-width-large-1-5,
.ftl-width-large-2-10 {
width: 20%
}
.ftl-width-large-2-5,
.ftl-width-large-4-10 {
width: 40%
}
.ftl-width-large-3-5,
.ftl-width-large-6-10 {
width: 60%
}
.ftl-width-large-4-5,
.ftl-width-large-8-10 {
width: 80%
}
.ftl-width-large-1-6 {
width: 16.666%
}
.ftl-width-large-5-6 {
width: 83.333%
}
.ftl-width-large-1-10 {
width: 10%
}
.ftl-width-large-3-10 {
width: 30%
}
.ftl-width-large-7-10 {
width: 70%
}
.ftl-width-large-9-10 {
width: 90%
}
}
@media (min-width:1220px) {
.ftl-width-xlarge-1-1 {
width: 100%
}
.ftl-width-xlarge-1-2,
.ftl-width-xlarge-2-4,
.ftl-width-xlarge-3-6,
.ftl-width-xlarge-5-10 {
width: 50%
}
.ftl-width-xlarge-1-3,
.ftl-width-xlarge-2-6 {
width: 33.333%
}
.ftl-width-xlarge-2-3,
.ftl-width-xlarge-4-6 {
width: 66.666%
}
.ftl-width-xlarge-1-4 {
width: 25%
}
.ftl-width-xlarge-3-4 {
width: 75%
}
.ftl-width-xlarge-1-5,
.ftl-width-xlarge-2-10 {
width: 20%
}
.ftl-width-xlarge-2-5,
.ftl-width-xlarge-4-10 {
width: 40%
}
.ftl-width-xlarge-3-5,
.ftl-width-xlarge-6-10 {
width: 60%
}
.ftl-width-xlarge-4-5,
.ftl-width-xlarge-8-10 {
width: 80%
}
.ftl-width-xlarge-1-6 {
width: 16.666%
}
.ftl-width-xlarge-5-6 {
width: 83.333%
}
.ftl-width-xlarge-1-10 {
width: 10%
}
.ftl-width-xlarge-3-10 {
width: 30%
}
.ftl-width-xlarge-7-10 {
width: 70%
}
.ftl-width-xlarge-9-10 {
width: 90%
}
}
@media (min-width:768px) {
[class*=ftl-push-],
[class*=ftl-pull-] {
position: relative
}
.ftl-push-1-2,
.ftl-push-2-4,
.ftl-push-3-6,
.ftl-push-5-10 {
left: 50%
}
.ftl-push-1-3,
.ftl-push-2-6 {
left: 33.333%
}
.ftl-push-2-3,
.ftl-push-4-6 {
left: 66.666%
}
.ftl-push-1-4 {
left: 25%
}
.ftl-push-3-4 {
left: 75%
}
.ftl-push-1-5,
.ftl-push-2-10 {
left: 20%
}
.ftl-push-2-5,
.ftl-push-4-10 {
left: 40%
}
.ftl-push-3-5,
.ftl-push-6-10 {
left: 60%
}
.ftl-push-4-5,
.ftl-push-8-10 {
left: 80%
}
.ftl-push-1-6 {
left: 16.666%
}
.ftl-push-5-6 {
left: 83.333%
}
.ftl-push-1-10 {
left: 10%
}
.ftl-push-3-10 {
left: 30%
}
.ftl-push-7-10 {
left: 70%
}
.ftl-push-9-10 {
left: 90%
}
.ftl-pull-1-2,
.ftl-pull-2-4,
.ftl-pull-3-6,
.ftl-pull-5-10 {
left: -50%
}
.ftl-pull-1-3,
.ftl-pull-2-6 {
left: -33.333%
}
.ftl-pull-2-3,
.ftl-pull-4-6 {
left: -66.666%
}
.ftl-pull-1-4 {
left: -25%
}
.ftl-pull-3-4 {
left: -75%
}
.ftl-pull-1-5,
.ftl-pull-2-10 {
left: -20%
}
.ftl-pull-2-5,
.ftl-pull-4-10 {
left: -40%
}
.ftl-pull-3-5,
.ftl-pull-6-10 {
left: -60%
}
.ftl-pull-4-5,
.ftl-pull-8-10 {
left: -80%
}
.ftl-pull-1-6 {
left: -16.666%
}
.ftl-pull-5-6 {
left: -83.333%
}
.ftl-pull-1-10 {
left: -10%
}
.ftl-pull-3-10 {
left: -30%
}
.ftl-pull-7-10 {
left: -70%
}
.ftl-pull-9-10 {
left: -90%
}
}
.ftl-panel {
display: block;
position: relative
}
.ftl-panel,
.ftl-panel:hover {
text-decoration: none
}
.ftl-panel:after,
.ftl-panel:before {
content: "";
display: table
}
.ftl-panel:after {
clear: both
}
.ftl-panel>:not(.ftl-panel-title):last-child {
margin-bottom: 0
}
.ftl-panel-title {
margin-top: 0;
margin-bottom: 15px;
font-size: 18px;
line-height: 24px;
font-weight: 400;
text-transform: none;
color: #444
}
.ftl-panel-badge {
position: absolute;
top: 0;
right: 0;
z-index: 1
}
.ftl-panel-teaser {
margin-bottom: 15px
}
.ftl-panel-body {
padding: 15px
}
.ftl-panel-box {
padding: 15px;
background: #f5f5f5;
color: #444
}
.ftl-panel-box-hover:hover {
color: #444
}
.ftl-panel-box .ftl-panel-title {
color: #444
}
.ftl-panel-box .ftl-panel-badge {
top: 10px;
right: 10px
}
.ftl-panel-box>.ftl-panel-teaser {
margin-top: -15px;
margin-left: -15px;
margin-right: -15px
}
.ftl-panel-box>.ftl-nav-side {
margin: 0 -15px
}
.ftl-panel-box-primary {
background-color: #ebf7fd;
color: #2d7091
}
.ftl-panel-box-primary-hover:hover {
color: #2d7091
}
.ftl-panel-box-primary .ftl-panel-title {
color: #2d7091
}
.ftl-panel-box-secondary {
background-color: #eee;
color: #444
}
.ftl-panel-box-secondary-hover:hover {
color: #444
}
.ftl-panel-box-secondary .ftl-panel-title {
color: #444
}
.ftl-panel-hover {
padding: 15px;
color: #444
}
.ftl-panel-hover:hover {
background: #f5f5f5;
color: #444
}
.ftl-panel-hover .ftl-panel-badge {
top: 10px;
right: 10px
}
.ftl-panel-hover>.ftl-panel-teaser {
margin-top: -15px;
margin-left: -15px;
margin-right: -15px
}
.ftl-panel-header .ftl-panel-title {
padding-bottom: 10px;
border-bottom: 1px solid #ddd;
color: #444
}
.ftl-panel-space {
padding: 30px
}
.ftl-panel-space .ftl-panel-badge {
top: 30px;
right: 30px
}
.ftl-panel+.ftl-panel-divider {
margin-top: 50px!important
}
.ftl-panel+.ftl-panel-divider:before {
content: "";
display: block;
position: absolute;
top: -25px;
left: 0;
right: 0;
border-top: 1px solid #ddd
}
@media (min-width:1220px) {
.ftl-panel+.ftl-panel-divider {
margin-top: 70px!important
}
.ftl-panel+.ftl-panel-divider:before {
top: -35px
}
}
.ftl-block {
position: relative;
box-sizing: border-box;
padding-top: 20px;
padding-bottom: 20px
}
@media (min-width:768px) {
.ftl-block {
padding-top: 50px;
padding-bottom: 50px
}
}
.ftl-block:after,
.ftl-block:before {
content: "";
display: table
}
.ftl-block:after {
clear: both
}
.ftl-block>:last-child {
margin-bottom: 0
}
.ftl-block-large {
padding-top: 20px;
padding-bottom: 20px
}
@media (min-width:768px) {
.ftl-block-large {
padding-top: 50px;
padding-bottom: 50px
}
}
@media (min-width:960px) {
.ftl-block-large {
padding-top: 100px;
padding-bottom: 100px
}
}
.ftl-block-default {
background: #fff
}
.ftl-block-muted {
background: #f9f9f9
}
.ftl-block-primary {
background: #00a8e6
}
.ftl-block-secondary {
background: #222
}
.ftl-block-default+.ftl-block-default,
.ftl-block-muted+.ftl-block-muted,
.ftl-block-primary+.ftl-block-primary,
.ftl-block-secondary+.ftl-block-secondary {
padding-top: 0
}
.ftl-article:after,
.ftl-article:before {
content: "";
display: table
}
.ftl-article:after {
clear: both
}
.ftl-article>:last-child {
margin-bottom: 0
}
.ftl-article+.ftl-article {
margin-top: 25px
}
.ftl-article-title {
font-size: 36px;
line-height: 42px;
font-weight: 400;
text-transform: none
}
.ftl-article-title a {
color: inherit;
text-decoration: none
}
.ftl-article-meta {
font-size: 12px;
line-height: 18px;
color: #999
}
.ftl-article-lead {
color: #444;
font-size: 18px;
line-height: 24px;
font-weight: 400
}
.ftl-article-divider {
margin-bottom: 25px;
border-color: #ddd
}
*+.ftl-article-divider {
margin-top: 25px
}
.ftl-comment-header {
margin-bottom: 15px
}
.ftl-comment-header:after,
.ftl-comment-header:before {
content: "";
display: table
}
.ftl-comment-header:after {
clear: both
}
.ftl-comment-avatar {
margin-right: 15px;
float: left
}
.ftl-comment-title {
margin: 5px 0 0 0;
font-size: 16px;
line-height: 22px
}
.ftl-comment-meta {
margin: 2px 0 0 0;
font-size: 11px;
line-height: 16px;
color: #999
}
.ftl-comment-body>:last-child {
margin-bottom: 0
}
.ftl-comment-list {
padding: 0;
list-style: none
}
.ftl-comment-list .ftl-comment+ul {
margin: 15px 0 0 0;
list-style: none
}
.ftl-comment-list .ftl-comment+ul>li:nth-child(n+2),
.ftl-comment-list>li:nth-child(n+2) {
margin-top: 15px
}
@media (min-width:768px) {
.ftl-comment-list .ftl-comment+ul {
padding-left: 100px
}
}
.ftl-cover-background {
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat
}
.ftl-cover {
overflow: hidden
}
.ftl-cover-object {
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
max-width: none;
position: relative;
left: 50%;
top: 50%;
-webkit-transform: trans
! function(t) {
var i;
if (!window.jQuery) throw new Error("UIkit 2.x requires jQuery");
i = t(window.jQuery), "function" == typeof define && define.amd && define("uikit", function() {
return i.load = function(t, e, n, o) {
var s, a = t.split(","),
r = [],
l = (o.config && o.config.uikit && o.config.uikit.base ? o.config.uikit.base : "").replace(/\/+$/g, "");
if (!l) throw new Error("Please define base path to UIkit in the requirejs config.");
for (s = 0; s < a.length; s += 1) {
var c = a[s].replace(/\./g, "/");
r.push(l + "/components/" + c)
}
e(r, function() {
n(i)
})
}, i
})
}(function(t) {
"use strict";
if (window.UIkit2) return window.UIkit2;
var i = {},
e = window.UIkit || void 0;
if (i.version = "2.27.4", i.noConflict = function() {
return e && (window.UIkit = e, t.UIkit = e, t.fn.ftl = e.fn), i
}, window.UIkit2 = i, e || (window.UIkit = i), i.$ = t, i.$doc = i.$(document), i.$win = i.$(window), i.$html = i.$("html"), i.support = {}, i.support.transition = function() {
var t = function() {
var t, i = document.body || document.documentElement,
e = {
WebkitTransition: "webkitTransitionEnd",
MozTransition: "transitionend",
OTransition: "oTransitionEnd otransitionend",
transition: "transitionend"
};
for (t in e)
if (void 0 !== i.style[t]) return e[t]
}();
return t && {
end: t
}
}(), i.support.animation = function() {
var t = function() {
var t, i = document.body || document.documentElement,
e = {
WebkitAnimation: "webkitAnimationEnd",
MozAnimation: "animationend",
OAnimation: "oAnimationEnd oanimationend",
animation: "animationend"
};
for (t in e)
if (void 0 !== i.style[t]) return e[t]
}();
return t && {
end: t
}
}(), function() {
Date.now = Date.now || function() {
return (new Date).getTime()
};
for (var t = ["webkit", "moz"], i = 0; i < t.length && !window.requestAnimationFrame; ++i) {
var e = t[i];
window.requestAnimationFrame = window[e + "RequestAnimationFrame"], window.cancelAnimationFrame = window[e + "CancelAnimationFrame"] || window[e + "CancelRequestAnimationFrame"]
}
if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
var n = 0;
window.requestAnimationFrame = function(t) {
var i = Date.now(),
e = Math.max(n + 16, i);
return setTimeout(function() {
t(n = e)
}, e - i)
}, window.cancelAnimationFrame = clearTimeout
}
}(), i.support.touch = "ontouchstart" in document || window.DocumentTouch && document instanceof window.DocumentTouch || window.navigator.msPointerEnabled && window.navigator.msMaxTouchPoints > 0 || window.navigator.pointerEnabled && window.navigator.maxTouchPoints > 0 || !1, i.support.mutationobserver = window.MutationObserver || window.WebKitMutationObserver || null, i.Utils = {}, i.Utils.isFullscreen = function() {
return document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || document.fullscreenElement || !1
}, i.Utils.str2json = function(t, i) {
try {
return i ? JSON.parse(t.replace(/([\$\w]+)\s*:/g, function(t, i) {
return '"' + i + '":'
}).replace(/'([^']+)'/g, function(t, i) {
return '"' + i + '"'
})) : new Function("", "var json = " + t + "; return JSON.parse(JSON.stringify(json));")()
} catch (e) {
return !1
}
}, i.Utils.debounce = function(t, i, e) {
var n;
return function() {
var o = this,
s = arguments,
a = function() {
n = null, e || t.apply(o, s)
},
r = e && !n;
clearTimeout(n), n = setTimeout(a, i), r && t.apply(o, s)
}
}, i.Utils.throttle = function(t, i) {
var e = !1;
return function() {
e || (t.call(), e = !0, setTimeout(function() {
e = !1
}, i))
}
}, i.Utils.removeCssRules = function(t) {
var i, e, n, o, s, a, r, l, c, u;
t && setTimeout(function() {
try {
for (u = document.styleSheets, o = 0, r = u.length; r > o; o++) {
for (n = u[o], e = [], n.cssRules = n.cssRules, i = s = 0, l = n.cssRules.length; l > s; i = ++s) n.cssRules[i].type === CSSRule.STYLE_RULE && t.test(n.cssRules[i].selectorText) && e.unshift(i);
for (a = 0, c = e.length; c > a; a++) n.deleteRule(e[a])
}
} catch (d) {}
}, 0)
}, i.Utils.isInView = function(e, n) {
var o = t(e);
if (!o.is(":visible")) return !1;
var s = i.$win.scrollLeft(),
a = i.$win.scrollTop(),
r = o.offset(),
l = r.left,
c = r.top;
return n = t.extend({
topoffset: 0,
leftoffset: 0
}, n), c + o.height() >= a && c - n.topoffset <= a + i.$win.height() && l + o.width() >= s && l - n.leftoffset <= s + i.$win.width() ? !0 : !1
}, i.Utils.checkDisplay = function(e, n) {
var o = i.$("[data-ftl-margin], [data-ftl-grid-match], [data-ftl-grid-margin], [data-ftl-check-display]", e || document);
return e && !o.length && (o = t(e)), o.trigger("display.ftl.check"), n && ("string" != typeof n && (n = '[class*="ftl-animation-"]'), o.find(n).each(function() {
var t = i.$(this),
e = t.attr("class"),
n = e.match(/ftl-animation-(.+)/);
t.removeClass(n[0]).width(), t.addClass(n[0])
})), o
}, i.Utils.options = function(e) {
if ("string" != t.type(e)) return e; - 1 != e.indexOf(":") && "}" != e.trim().substr(-1) && (e = "{" + e + "}");
var n = e ? e.indexOf("{") : -1,
o = {};
if (-1 != n) try {
o = i.Utils.str2json(e.substr(n))
} catch (s) {}
return o
}, i.Utils.animate = function(e, n) {
var o = t.Deferred();
return e = i.$(e), e.css("display", "none").addClass(n).one(i.support.animation.end, function() {
e.removeClass(n), o.resolve()
}), e.css("display", ""), o.promise()
}, i.Utils.uid = function(t) {
return (t || "id") + (new Date).getTime() + "RAND" + Math.ceil(1e5 * Math.random())
}, i.Utils.template = function(t, i) {
for (var e, n, o, s, a = t.replace(/\n/g, "\\n").replace(/\{\{\{\s*(.+?)\s*\}\}\}/g, "{{!$1}}").split(/(\{\{\s*(.+?)\s*\}\})/g), r = 0, l = [], c = 0; r < a.length;) {
if (e = a[r], e.match(/\{\{\s*(.+?)\s*\}\}/)) switch (r += 1, e = a[r], n = e[0], o = e.substring(e.match(/^(\^|\#|\!|\~|\:)/) ? 1 : 0), n) {
case "~":
l.push("for(var $i=0;$i<" + o + ".length;$i++) { var $item = " + o + "[$i];"), c++;
break;
case ":":
l.push("for(var $key in " + o + ") { var $val = " + o + "[$key];"), c++;
break;
case "#":
l.push("if(" + o + ") {"), c++;
break;
case "^":
l.push("if(!" + o + ") {"), c++;
break;
case "/":
l.push("}"), c--;
break;
case "!":
l.push("__ret.push(" + o + ");");
break;
default:
l.push("__ret.push(escape(" + o + "));")
} else l.push("__ret.push('" + e.replace(/\'/g, "\\'") + "');");
r += 1
}
return s = new Function("$data", ["var __ret = [];", "try {", "with($data){", c ? '__ret = ["Not all blocks are closed correctly."]' : l.join(""), "};", "}catch(e){__ret = [e.message];}", 'return __ret.join("").replace(/\\n\\n/g, "\\n");', "function escape(html) { return String(html).replace(/&/g, '&').replace(/\"/g, '"').replace(/</g, '<').replace(/>/g, '>');}"].join("\n")), i ? s(i) : s
}, i.Utils.focus = function(i, e) {
if (i = t(i), !i.length) return i;
var n, o = i.find("[autofocus]:first");
return o.length ? o.focus() : (o = i.find(":input" + (e && "," + e || "")).first(), o.length ? o.focus() : (i.attr("tabindex") || (n = 1e3, i.attr("tabindex", n)), i[0].focus(), n && i.attr("tabindex", ""), i))
}, i.Utils.events = {}, i.Utils.events.click = i.support.touch ? "tap" : "click", i.fn = function(e, n) {
var o = arguments,
s = e.match(/^([a-z\-]+)(?:\.([a-z]+))?/i),
a = s[1],
r = s[2];
return i[a] ? this.each(function() {
var e = t(this),
s = e.data(a);
s || e.data(a, s = i[a](this, r ? void 0 : n)), r && s[r].apply(s, Array.prototype.slice.call(o, 1))
}) : (t.error("UIkit component [" + a + "] does not exist."), this)
}, t.UIkit = i, t.fn.ftl = i.fn, i.langdirection = "rtl" == i.$html.attr("dir") ? "right" : "left", i.components = {}, i.component = function(e, n, o) {
if (i.components[e] && !o) return i.components[e];
var s = function(n, o) {
var a = this;
return this.UIkit = i, this.element = n ? i.$(n) : null, this.options = t.extend(!0, {}, this.defaults, o), this.plugins = {}, this.element && this.element.data(e, this), this.init(), (this.options.plugins.length ? this.options.plugins : Object.keys(s.plugins)).forEach(function(t) {
s.plugins[t].init && (s.plugins[t].init(a), a.plugins[t] = !0)
}), this.trigger("init.ftl.component", [e, this]), this
};
return s.plugins = {}, t.extend(!0, s.prototype, {
defaults: {
plugins: []
},
boot: function() {},
init: function() {},
on: function(t, e, n) {
return i.$(this.element || this).on(t, e, n)
},
one: function(t, e, n) {
return i.$(this.element || this).one(t, e, n)
},
off: function(t) {
return i.$(this.element || this).off(t)
},
trigger: function(t, e) {
return i.$(this.element || this).trigger(t, e)
},
find: function(t) {
return i.$(this.element ? this.element : []).find(t)
},
proxy: function(t, i) {
var e = this;
i.split(" ").forEach(function(i) {
e[i] || (e[i] = function() {
return t[i].apply(t, arguments)
})
})
},
mixin: function(t, i) {
var e = this;
i.split(" ").forEach(function(i) {
e[i] || (e[i] = t[i].bind(e))
})
},
option: function() {
return 1 == arguments.length ? this.options[arguments[0]] || void 0 : (2 == arguments.length && (this.options[arguments[0]] = arguments[1]), void 0)
}
}, n), this.components[e] = s, this[e] = function() {
var n, o;
if (arguments.length) switch (arguments.length) {
case 1:
"string" == typeof arguments[0] || arguments[0].nodeType || arguments[0] instanceof jQuery ? n = t(arguments[0]) : o = arguments[0];
break;
case 2:
n = t(arguments[0]), o = arguments[1]
}
return n && n.data(e) ? n.data(e) : new i.components[e](n, o)
}, i.domready && i.component.boot(e), s
}, i.plugin = function(t, i, e) {
this.components[t].plugins[i] = e
}, i.component.boot = function(t) {
i.components[t].prototype && i.components[t].prototype.boot && !i.components[t].booted && (i.components[t].prototype.boot.apply(i, []), i.components[t].booted = !0)
}, i.component.bootComponents = function() {
for (var t in i.components) i.component.boot(t)
}, i.domObservers = [], i.domready = !1, i.ready = function(t) {
i.domObservers.push(t), i.domready && t(document)
}, i.on = function(t, e, n) {
return t && t.indexOf("ready.ftl.dom") > -1 && i.domready && e.apply(i.$doc), i.$doc.on(t, e, n)
}, i.one = function(t, e, n) {
return t && t.indexOf("ready.ftl.dom") > -1 && i.domready ? (e.apply(i.$doc), i.$doc) : i.$doc.one(t, e, n)
}, i.trigger = function(t, e) {
return i.$doc.trigger(t, e)
}, i.domObserve = function(t, e) {
i.support.mutationobserver && (e = e || function() {}, i.$(t).each(function() {
var t = this,
n = i.$(t);
if (!n.data("observer")) try {
var o = new i.support.mutationobserver(i.Utils.debounce(function() {
e.apply(t, [n]), n.trigger("changed.ftl.dom")
}, 50), {
childList: !0,
subtree: !0
});
o.observe(t, {
childList: !0,
subtree: !0
}), n.data("observer", o)
} catch (s) {}
}))
}, i.init = function(t) {
t = t || document, i.domObservers.forEach(function(i) {
i(t)
})
}, i.on("domready.ftl.dom", function() {
i.init(), i.domready && i.Utils.checkDisplay()
}), document.addEventListener("DOMContentLoaded", function() {
var e = function() {
i.$body = i.$("body"), i.trigger("beforeready.ftl.dom"), i.component.bootComponents();
var e = requestAnimationFrame(function() {
var t = {
dir: {
x: 0,
y: 0
},
x: window.pageXOffset,
y: window.pageYOffset
},
n = function() {
var o = window.pageXOffset,
s = window.pageYOffset;
(t.x != o || t.y != s) && (t.dir.x = o != t.x ? o > t.x ? 1 : -1 : 0, t.dir.y = s != t.y ? s > t.y ? 1 : -1 : 0, t.x = o, t.y = s, i.$doc.trigger("scrolling.ftl.document", [{
dir: {
x: t.dir.x,
y: t.dir.y
},
x: o,
y: s
}])), cancelAnimationFrame(e), e = requestAnimationFrame(n)
};
return i.support.touch && i.$html.on("touchmove touchend MSPointerMove MSPointerUp pointermove pointerup", n), (t.x || t.y) && n(), n
}());
if (i.trigger("domready.ftl.dom"), i.support.touch && navigator.userAgent.match(/(iPad|iPhone|iPod)/g) && i.$win.on("load orientationchange resize", i.Utils.debounce(function() {
var i = function() {
return t(".ftl-height-viewport").css("height", window.innerHeight), i
};
return i()
}(), 100)), i.trigger("afterready.ftl.dom"), i.domready = !0, i.support.mutationobserver) {
var n = i.Utils.debounce(function() {
requestAnimationFrame(function() {
i.init(document.body)
})
}, 10);
new i.support.mutationobserver(function(t) {
var i = !1;
t.every(function(t) {
if ("childList" != t.type) return !0;
for (var e, n = 0; n < t.addedNodes.length; ++n)
if (e = t.addedNodes[n], e.outerHTML && -1 !== e.outerHTML.indexOf("data-ftl-")) return (i = !0) && !1;
return !0
}), i && n()
}).observe(document.body, {
childList: !0,
subtree: !0
})
}
};
return ("complete" == document.readyState || "interactive" == document.readyState) && setTimeout(e), e
}()), i.$html.addClass(i.support.touch ? "ftl-touch" : "ftl-notouch"), i.support.touch) {
var n, o = !1,
s = "ftl-hover",
a = ".ftl-overlay, .ftl-overlay-hover, .ftl-overlay-toggle, .ftl-animation-hover, .ftl-has-hover";
i.$html.on("mouseenter touchstart MSPointerDown pointerdown", a, function() {
o && t("." + s).removeClass(s), o = t(this).addClass(s)
}).on("mouseleave touchend MSPointerUp pointerup", function(i) {
n = t(i.target).parents(a), o && o.not(n).removeClass(s)
})
}
return i
}),
function(t) {
function i(t, i, e, n) {
return Math.abs(t - i) >= Math.abs(e - n) ? t - i > 0 ? "Left" : "Right" : e - n > 0 ? "Up" : "Down"
}
function e() {
c = null, d.last && (void 0 !== d.el && d.el.trigger("longTap"), d = {})
}
function n() {
