.framework:before, .framework:after, #main-header:before, #main-header:after, #main-menu:before, #main-menu:after, #main-content > .list > .item:before, #main-content > .list > .item:after, #main-header aside > .list > .item:before, #main-header aside > .list > .item:after, #main-menu .item .link:before, #main-menu .item .link:after, #main-section:before, #main-section:after, .wrapper:before, .wrapper:after, .visible-element:before, .visible-element:after, #main-footer .wrapper:before, #main-footer .wrapper:after, .container:before, .container:after, .grid-5:before, .grid-5:after {
  content: " ";
  display: table;
}

.framework:after, #main-header:after, #main-menu:after, #main-content > .list > .item:after, #main-header aside > .list > .item:after, #main-menu .item .link:after, #main-section:after, .wrapper:after, .visible-element:after, #main-footer .wrapper:after, .container:after, .grid-5:after {
  clear: both;
}

.framework, #main-header, #main-menu, #main-content > .list > .item, #main-header aside > .list > .item, #main-menu .item .link, #main-section, .wrapper, .visible-element, #main-footer .wrapper, .container, .grid-5 {
  *zoom: 1;
}

/* Clearfixes */
/* Component Manager Styles */
#myDocument .framework {
  background-color: hsla(214, 20%, 93%, 1);
}
#myDocument .framework #main-header {
  padding: 0;
  z-index: 999;
  background-color: hsla(215, 16%, 23%, 1);
}
#myDocument .framework #main-header #main-menu .menu.components {
  margin: 0;
}
#myDocument .framework #main-header #main-menu a {
  color: hsla(0, 0%, 100%, 0.5);
  background-color: transparent;
  padding: 1.1666em 1.5em 1.5em;
  border-top: 0.3333em solid transparent;
}
#myDocument .framework #main-header #main-menu a:hover, #myDocument .framework #main-header #main-menu a:active {
  color: hsla(0, 0%, 100%, 0.85);
  background-color: hsla(0, 0%, 0%, 0.05);
}
#myDocument .framework #main-header #main-menu .item.active a, #myDocument .framework #main-header #main-menu .item.active a:hover, #myDocument .framework #main-header #main-menu .item.active a:active {
  color: hsla(0, 0%, 100%, 0.85);
  background-color: hsla(0, 0%, 0%, 0.15);
  border-top-color: hsla(172, 72%, 43%, 1);
}
#myDocument .framework #main-section {
  min-height: 480px;
  margin-top: 0;
}
#myDocument .framework #main-section #main-content {
  min-height: 70em;
  background-color: transparent;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -o-box-shadow: none;
}
#myDocument .framework #main-section #main-content h1 {
  margin-bottom: 1em;
  color: hsla(172, 72%, 43%, 1);
}
#myDocument .framework #main-section #main-content > h1 {
  color: hsla(172, 72%, 43%, 1);
  text-transform: uppercase;
}
#myDocument .framework #main-section #main-content h2 {
  margin-bottom: 1em;
}
#myDocument .framework #main-section #main-content > .box {
  background-color: transparent;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -o-box-shadow: none;
}
#myDocument .framework #main-section #main-content .with-background {
  color: hsla(0, 0%, 100%, 1);
}
#myDocument .framework #main-section #main-content > .list.main > .item {
  padding: 1em;
  margin-bottom: 1em;
  border-bottom: 0.0833em dashed hsla(0, 0%, 0%, 0.1);
  background-color: transparent;
}
#myDocument .framework #main-section #main-content > .list.main > .item .visible-element h1, #myDocument .framework #main-section #main-content > .list.main > .item .visible-element h2, #myDocument .framework #main-section #main-content > .list.main > .item .visible-element h4 {
  margin-bottom: 0;
}
#myDocument .framework #main-section #main-content > .list.main > .item:last-child {
  margin-bottom: 0;
  border-bottom: none;
}
#myDocument .framework #main-section #main-content > .list.main > .item > .ui-tabs > .ui-tabs-panel {
  background-color: transparent;
  border: none;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -o-box-shadow: none;
}
#myDocument .framework #main-section #main-content > .list .item > aside, #myDocument .framework #main-section #main-content .list .item .tab-content > aside {
  margin: 0;
  position: relative;
}
#myDocument .framework #main-section #main-content > .list .item > aside.element, #myDocument .framework #main-section #main-content > .list .item .tab-content > aside.element {
  padding-right: 1em;
}
#myDocument .framework #main-section #main-content > .list .item > aside.element > .trigger, #myDocument .framework #main-section #main-content > .list .item .tab-content > aside.element > .trigger {
  z-index: 99;
  margin-left: 1em;
  margin-bottom: 1em;
  opacity: 0.3;
  -moz-opacity: 0.3;
  -webkit-opacity: 0.3;
  filter: alpha(opacity=30);
  -ms-filter: "alpha(opacity=30)";
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
}
#myDocument .framework #main-section #main-content > .list .item > aside.element > .trigger:hover, #myDocument .framework #main-section #main-content > .list .item > aside.element > .trigger:active, #myDocument .framework #main-section #main-content > .list .item .tab-content > aside.element > .trigger:hover, #myDocument .framework #main-section #main-content > .list .item .tab-content > aside.element > .trigger:active {
  opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "alpha(opacity=100)";
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
#myDocument .framework #main-section #main-content > .list .item > aside.element > .trigger .icon, #myDocument .framework #main-section #main-content > .list .item .tab-content > aside.element > .trigger .icon {
  margin-top: 0.25em;
}
#myDocument .framework #main-section #main-content > .list .item > aside.element > .trigger + *, #myDocument .framework #main-section #main-content > .list .item > aside.element > .trigger + * + *, #myDocument .framework #main-section #main-content > .list .item .tab-content > aside.element > .trigger + *, #myDocument .framework #main-section #main-content > .list .item .tab-content > aside.element > .trigger + * + * {
  max-width: 75%;
  clear: both;
}
#myDocument .framework #main-section #main-content > .list .item > aside.element > .trigger + *.controls, #myDocument .framework #main-section #main-content > .list .item > aside.element > .trigger + *.controls-horizontal, #myDocument .framework #main-section #main-content > .list .item > aside.element > .trigger + * + *.controls, #myDocument .framework #main-section #main-content > .list .item > aside.element > .trigger + * + *.controls-horizontal, #myDocument .framework #main-section #main-content > .list .item .tab-content > aside.element > .trigger + *.controls, #myDocument .framework #main-section #main-content > .list .item .tab-content > aside.element > .trigger + *.controls-horizontal, #myDocument .framework #main-section #main-content > .list .item .tab-content > aside.element > .trigger + * + *.controls, #myDocument .framework #main-section #main-content > .list .item .tab-content > aside.element > .trigger + * + *.controls-horizontal {
  right: 15em;
}
#myDocument .framework #main-section #main-content > .list .reveal .js-functionality {
  visibility: hidden;
}
#myDocument .framework #main-section #main-content > .list .reveal:hover .js-functionality, #myDocument .framework #main-section #main-content > .list .reveal:focus .js-functionality {
  visibility: visible;
}
#myDocument .framework #main-section #main-content > .list.controls {
  display: block;
  position: relative;
  top: auto;
  right: auto;
}
#myDocument .framework #main-section #main-content > .list.controls > .item {
  text-align: left;
}
#myDocument .framework #main-section #main-content .list .tab-content {
  display: none;
}
#myDocument .framework #main-section #main-content .list .tab-content.uk-active {
  display: block;
}
#myDocument .framework #main-section #main-content .tab-control .options .item {
  float: left;
}
#myDocument .framework #main-section #main-content .tab-control .options .item a {
  display: block;
}
#myDocument .framework #main-section #main-content .tab-control .options .item.uk-active a, #myDocument .framework #main-section #main-content .tab-control .options .item.uk-active a:hover, #myDocument .framework #main-section #main-content .tab-control .options .item.uk-active a:active {
  color: hsla(0, 0%, 100%, 1);
  background-color: hsla(172, 72%, 43%, 1);
  border-radius: 0.25em;
  -moz-border-radius: 0.25em;
  -webkit-border-radius: 0.25em;
}
#myDocument .framework #main-section #main-content .tab-control > .list {
  padding: 1em 0;
}
#myDocument .framework #main-section #main-content .tab-control > .list.options {
  padding: 0;
}
#myDocument .framework #main-section #main-content .code-block {
  margin: 0;
}
#myDocument .framework #main-section #main-content .message-warning .icon:before, #myDocument .framework #main-section #main-content .message-info .icon:before {
  content: "";
}
#myDocument .framework #main-section #main-content .controls.left {
  position: relative;
  left: 50%;
  margin-top: -2.75em;
}
#myDocument .framework #main-section #main-content .article {
  padding: 1em;
}
#myDocument .framework #main-section #main-content .article > .title {
  margin-bottom: 0.5em;
}
#myDocument .framework #main-section #main-content .article > .title a {
  padding: 0;
}
#myDocument .framework #main-section #main-content .article .tags {
  margin: 1em 0;
}
#myDocument .framework #main-section #main-content .article .tags .item {
  float: left;
  display: block;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
}
#myDocument .framework #main-section #main-content .article .tags .item:last-child {
  margin-right: 0;
}
#myDocument .framework #main-section #main-content .article .tags .item .tag {
  display: block;
  font-weight: 700;
  color: hsla(0, 0%, 100%, 1);
}
#myDocument .framework #main-section #main-content .article .tags .item .tag:hover, #myDocument .framework #main-section #main-content .article .tags .item .tag:active {
  color: hsla(0, 0%, 100%, 1);
  background-color: hsla(215, 16%, 23%, 1);
}
#myDocument .framework #main-section #main-content .article .tags .item .tag .icon {
  margin-top: 0.5em;
}
#myDocument .framework #main-section #main-content .article > .details {
  display: block;
  margin: 0.5em 0 2.5em;
}
#myDocument .framework #main-section #main-content .article .read {
  display: inline-block;
  margin-top: 1.5em;
}
#myDocument .framework #main-section #main-content .scale-double, #myDocument .framework #main-section #main-content .translate-left {
  position: relative;
  left: 7em;
}
#myDocument .framework #main-section #main-content .translate-left {
  left: 50%;
}
#myDocument .framework #main-section #main-content .js-functionality {
  color: hsla(0, 0%, 100%, 1);
  background-color: hsla(351, 66%, 48%, 1);
  margin: 0.5em 0;
  padding: 0.5em 0.75em;
  position: relative;
  font-size: 85%;
  float: left;
  z-index: 996;
}
#myDocument .framework #main-footer {
  color: hsla(240, 8%, 39%, 1);
  background-color: hsla(0, 0%, 100%, 1);
}
#myDocument .framework #main-footer .copyright {
  display: block;
  padding: 0.5em 0;
  float: left;
}
#myDocument .framework #main-footer .social {
  float: right;
  padding: 0.25em 0;
}
#myDocument .framework #main-footer .social .item {
  margin-bottom: 0;
}
#myDocument .framework #main-footer .social .item a {
  min-width: 36px;
  min-height: 36px;
  border-radius: 5em;
  -moz-border-radius: 5em;
  -webkit-border-radius: 5em;
}
#myDocument .framework #main-footer .social .item a .icon {
  margin-top: 0.4166em;
}
#myDocument .framework #main-footer .social .item:last-child {
  margin-right: 0;
}
#myDocument .framework .extra-space-small {
  margin-bottom: 7.5em;
}
#myDocument .framework .extra-space-x-small {
  margin-bottom: 10em;
}
#myDocument .framework .extra-space-medium {
  margin-bottom: 15em;
}
#myDocument .framework .extra-space-x-medium {
  margin-bottom: 20em;
}
#myDocument .framework .extra-space-big {
  margin-bottom: 25em;
}
#myDocument .framework .extra-space-x-big {
  margin-bottom: 31.25em;
}

.container {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: auto;
}

.container .col {
  float: left;
  margin-right: 2%;
  margin-bottom: 2%;
}

.container.cols-1 .col {
  margin-right: 0;
  width: 100%;
}

.container.cols-2 .col {
  width: 49%;
}

.container.cols-3 .col {
  width: 32%;
}

.container.cols-4 .col {
  width: 23.5%;
}

.container .col:last-child {
  margin-right: 0;
}

.rtl .container .col {
  float: right;
  margin-right: 0;
  margin-left: 2%;
}
.rtl .container .col:last-child {
  margin-left: 0;
}

.container {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: auto;
}

.container .col {
  float: left;
  margin-right: 2%;
  margin-bottom: 2%;
}

.container.cols-1 .col {
  margin-right: 0;
  width: 100%;
}

.container.cols-2 .col {
  width: 49%;
}

.container.cols-3 .col {
  width: 32%;
}

.container.cols-4 .col {
  width: 23.5%;
}

.container.cols-5 .col {
  width: 18.4%;
}

.container .col:last-child {
  margin-right: 0;
}

.rtl .container .col {
  float: right;
  margin-right: 0;
  margin-left: 2%;
}
.rtl .container .col:last-child {
  margin-left: 0;
}

.grid-5 {
  width: 100%;
}

.grid-5 .cell {
  float: left;
  width: 18.4%;
  margin: 2%;
  margin-top: 0;
  margin-left: 0;
}
.grid-5 .cell:first-child, .grid-5 .cell.first {
  margin-left: 0;
}
.grid-5 .cell:last-child, .grid-5 .cell.last {
  margin-right: 0;
}
.grid-5 .cell:nth-child(5n) {
  margin-right: 0;
}

.grid-5.with-padding .cell {
  margin: 0;
  padding: 2%;
  padding-top: 0;
  padding-left: 0;
  padding-bottom: 0;
  margin-bottom: 2%;
}
.grid-5.with-padding .cell:first-child, .grid-5.with-padding .cell.first {
  padding-left: 0;
}
.grid-5.with-padding .cell:last-child, .grid-5.with-padding .cell.last {
  padding-right: 0;
}
.grid-5.with-padding .cell:nth-child(5n) {
  padding-right: 0;
}

.rtl .grid-5 .cell {
  float: right;
  margin: 2%;
  margin-top: 0;
  margin-right: 0;
}
.rtl .grid-5 .cell:first-child, .rtl .grid-5 .cell.first {
  margin-right: 0;
}
.rtl .grid-5 .cell:last-child, .rtl .grid-5 .cell.last {
  margin-left: 0;
}
.rtl .grid-5 .cell:nth-child(5n) {
  margin-left: 0;
}

/*# sourceMappingURL=main.css.map */
