Team:SYSU-Software/flatui.css
From 2012.igem.org
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,700italic,900,400italic,300"); @font-face {
font-family: 'Flat-UI-Icons'; src: url('../fonts/Flat-UI-Icons.eot'); src: url('../fonts/Flat-UI-Icons.eot?#iefix') format('embedded-opentype'), url('../fonts/Flat-UI-Icons.woff') format('woff'), url('../fonts/Flat-UI-Icons.ttf') format('truetype'), url('../fonts/Flat-UI-Icons.svg#Flat-UI-Icons') format('svg'); 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: 'Flat-UI-Icons'; content: attr(data-icon); speak: none; font-weight: normal; font-variant: normal; text-transform: none; -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*="fui-"] {
- /
.fui-arrow-right, .fui-arrow-left, .fui-cmd, .fui-check-inverted, .fui-heart, .fui-location, .fui-plus, .fui-check, .fui-cross, .fui-list, .fui-new, .fui-video, .fui-photo, .fui-volume, .fui-time, .fui-eye, .fui-chat, .fui-search, .fui-user, .fui-mail, .fui-lock, .fui-gear, .fui-radio-unchecked, .fui-radio-checked, .fui-checkbox-unchecked, .fui-checkbox-checked, .fui-calendar-solid, .fui-pause, .fui-play, .fui-check-inverted-2 {
display: inline-block; font-family: 'Flat-UI-Icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased;
} .fui-arrow-right:before {
content: "\e02c";
} .fui-arrow-left:before {
content: "\e02d";
} .fui-cmd:before {
content: "\e02f";
} .fui-check-inverted:before {
content: "\e006";
} .fui-heart:before {
content: "\e007";
} .fui-location:before {
content: "\e008";
} .fui-plus:before {
content: "\e009";
} .fui-check:before {
content: "\e00a";
} .fui-cross:before {
content: "\e00b";
} .fui-list:before {
content: "\e00c";
} .fui-new:before {
content: "\e00d";
} .fui-video:before {
content: "\e00e";
} .fui-photo:before {
content: "\e00f";
} .fui-volume:before {
content: "\e010";
} .fui-time:before {
content: "\e011";
} .fui-eye:before {
content: "\e012";
} .fui-chat:before {
content: "\e013";
} .fui-search:before {
content: "\e01c";
} .fui-user:before {
content: "\e01d";
} .fui-mail:before {
content: "\e01e";
} .fui-lock:before {
content: "\e01f";
} .fui-gear:before {
content: "\e024";
} .fui-radio-unchecked:before {
content: "\e02b";
} .fui-radio-checked:before {
content: "\e032";
} .fui-checkbox-unchecked:before {
content: "\e033";
} .fui-checkbox-checked:before {
content: "\e034";
} .fui-calendar-solid:before {
content: "\e022";
} .fui-pause:before {
content: "\e03b";
} .fui-play:before {
content: "\e03c";
} .fui-check-inverted-2:before {
content: "\e000";
} /* 62px */ /* 52px */ /* 40px */ /* 29px */ /* 28px */ /* 24px */ .inline-block {
display: inline-block; zoom: 1; *display: inline;
} .clearfix {
*zoom: 1;
} .clearfix:before, .clearfix:after {
display: table; content: "";
} .clearfix:after {
clear: both;
} .drop-ie-gradient {
filter: unquote("progid:DXImageTransform.Microsoft.gradient(enabled = false)");
} .dropdown-arrow-inverse {
border-bottom-color: #34495e !important; border-top-color: #34495e !important;
} .demo-headline {
padding: 73px 0 110px; text-align: center;
} .demo-logo {
font-size: 90px; font-weight: 900; letter-spacing: -2px; line-height: 100px;
} .demo-logo .logo {
background: url(../images/demo/logo-mask.png) center 0 no-repeat; background-size: 256px 186px; height: 186px; margin: 0 auto 26px; overflow: hidden; text-indent: -9999em; width: 256px;
} .demo-logo small {
color: rgba(52, 73, 94, 0.30000000000000004); display: block; font-size: 22px; font-weight: 700; letter-spacing: -1px; padding-top: 5px;
} .demo-row {
margin-bottom: 20px;
} .demo-panel-title {
margin-bottom: 20px; padding-top: 20px;
} .demo-panel-title small {
color: #798795; font-size: inherit; font-weight: 400;
} .demo-navigation {
margin-bottom: -4px; margin-top: -10px;
} .demo-pager {
margin-top: -10px;
} .demo-tooltips {
height: 126px;
} .demo-tooltips .tooltip {
left: -8px !important; position: relative !important; top: -8px !important;
} .demo-headings {
margin-bottom: 12px;
} .demo-tiles {
margin-bottom: 46px;
} .demo-icons {
font-size: 32px; margin-left: -15px;
} .demo-icons .demo-content {
margin: 0 0 0 -36px;
} .demo-icons .demo-content > span {
display: inline-block; margin: 0 0 32px 36px; width: 24px; font-size: 24px;
} .demo-icons-tooltip {
bottom: 0; color: #c2c8cf; font-size: 12px; left: 100%; margin-left: 0 !important; position: absolute; width: 80px;
} .demo-illustrations {
margin-top: 40px; *zoom: 1;
} .demo-illustrations:before, .demo-illustrations:after {
display: table; content: "";
} .demo-illustrations:after {
clear: both;
} .demo-illustrations .demo-content {
margin: 0 0 0 -40px; padding-top: 20px;
} .demo-illustrations .demo-content > div {
float: left; width: 100px; height: 100px; margin: 0 0 80px 40px; text-align: center;
} .demo-illustrations img {
display: inline-block; max-height: 100px; max-width: 100px; vertical-align: baseline;
} .demo-samples {
margin-bottom: 46px;
} .demo-video {
padding-top: 95px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
} .demo-download-section {
float: none; margin: 0 auto; padding: 60px 0 90px 20px; text-align: center;
} .demo-download-section [class*='fui-'] {
margin: 3px 0 -3px;
} .demo-download {
background-color: #ebedef; height: 120px; margin: 0 auto 32px; padding: 40px 28px 30px 32px; text-align: center; width: 130px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
} .demo-download img {
height: 104px; width: 82px;
} .demo-download-text {
font-size: 15px; padding: 20px 0; text-align: center;
} .demo-text-box a:hover {
color: #1abc9c;
} .demo-browser {
background: #2c3e50 url(../images/demo/browser.png) 0 0 no-repeat; background-size: 659px 42px; color: #ffffff; margin: 0 41px 140px 0; padding-top: 42px; -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
} .demo-browser-side {
float: left; padding: 22px 20px; width: 111px;
} .demo-browser-side > h5 {
margin-bottom: 3px; text-transform: none;
} .demo-browser-side > h6 {
font-size: 11px; font-weight: 300; line-height: 18px; margin-top: 3px; text-transform: none;
} .demo-browser-author {
background: url(../images/demo/browser-author.jpg) center center no-repeat; border: 3px solid #ffffff; display: block; height: 84px; margin: 0 auto; width: 84px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
} .demo-browser-action {
padding: 30px 0 12px;
} .demo-browser-action > .btn {
padding: 9px 0 10px 11px !important; text-align: left; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
} .demo-browser-action > .btn:before {
color: #ffffff; content: '\e009'; font-size: 16px; font-family: 'Flat-UI-Icons'; font-weight: 300; margin-right: 12px; position: relative; top: 1px; -webkit-font-smoothing: antialiased;
} .demo-browser-content {
background-color: #34495e; overflow: hidden; padding: 21px 0 0 20px; -webkit-border-radius: 0 0 6px; -moz-border-radius: 0 0 6px; border-radius: 0 0 6px;
} .demo-browser-content > img {
border: 6px solid #ffffff; float: left; margin: 0 15px 20px 0; width: 134px;
} @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) {
.logo { background-image: url(../images/demo/logo-mask-2x.png); } .demo-browser { background-image: url(../images/demo/browser-2x.png); }
} body {
color: #34495e; font-family: "Lato", sans-serif; font-size: 14px; line-height: 1.231;
} input, button, select, textarea {
font-family: "Lato", sans-serif; font-size: 14px;
} a {
color: #16a085; text-decoration: underline; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; -webkit-backface-visibility: hidden;
} a:hover {
color: #1abc9c; text-decoration: none;
} h1 {
font-size: 32px; font-weight: 900;
} h2 {
font-size: 26px; font-weight: 700; margin-bottom: 2px;
} h3 {
font-size: 24px; font-weight: 700; margin-bottom: 4px; margin-top: 2px;
} h4 {
font-size: 18px; font-weight: 500; margin-top: 4px;
} h5 {
font-size: 16px; font-weight: 500; text-transform: uppercase;
} h6 {
font-size: 13px; font-weight: 500; text-transform: uppercase;
} .btn, .btn-group > .btn, .btn-group > .dropdown-menu, .btn-group > .popover {
font-size: 14.994px; /* 15px */
font-weight: 500;
} .btn {
border: none; background: #bdc3c7; color: #ffffff; padding: 9px 12px 10px; line-height: 22px; text-decoration: none; text-shadow: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; -webkit-backface-visibility: hidden;
} .btn:hover, .btn:focus, .btn-group:focus .btn.dropdown-toggle {
background-color: #cacfd2; color: #ffffff; outline: none; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; -webkit-backface-visibility: hidden;
} .btn:active, .btn-group.open .btn.dropdown-toggle, .btn.active {
background-color: #a1a6a9; color: rgba(255, 255, 255, 0.75); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
} .btn.disabled, .btn[disabled] {
background-color: #bdc3c7; color: rgba(255, 255, 255, 0.75); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; opacity: 0.7; filter: alpha(opacity=70);
} .btn.btn-large {
font-size: 16.996px; /* 17px */
line-height: 20px; padding: 12px 18px 13px;
} .btn.btn-large > [class^="fui-"] {
top: 0;
} .btn.btn-large > [class^="fui-"].pull-right {
margin-right: -2px;
} .btn.btn-primary {
background-color: #1abc9c;
} .btn.btn-primary:hover, .btn.btn-primary:focus, .btn-group:focus .btn.btn-primary.dropdown-toggle {
background-color: #48c9b0;
} .btn.btn-primary:active, .btn-group.open .btn.btn-primary.dropdown-toggle, .btn.btn-primary.active {
background-color: #16a085;
} .btn.btn-info {
background-color: #3498db;
} .btn.btn-info:hover, .btn.btn-info:focus, .btn-group:focus .btn.btn-info.dropdown-toggle {
background-color: #5dade2;
} .btn.btn-info:active, .btn-group.open .btn.btn-info.dropdown-toggle, .btn.btn-info.active {
background-color: #2c81ba;
} .btn.btn-danger {
background-color: #e74c3c;
} .btn.btn-danger:hover, .btn.btn-danger:focus, .btn-group:focus .btn.btn-danger.dropdown-toggle {
background-color: #ec7063;
} .btn.btn-danger:active, .btn-group.open .btn.btn-danger.dropdown-toggle, .btn.btn-danger.active {
background-color: #c44133;
} .btn.btn-success {
background-color: #2ecc71;
} .btn.btn-success:hover, .btn.btn-success:focus, .btn-group:focus .btn.btn-success.dropdown-toggle {
background-color: #58d68d;
} .btn.btn-success:active, .btn-group.open .btn.btn-success.dropdown-toggle, .btn.btn-success.active {
background-color: #27ad60;
} .btn.btn-warning {
background-color: #f1c40f;
} .btn.btn-warning:hover, .btn.btn-warning:focus, .btn-group:focus .btn.btn-warning.dropdown-toggle {
background-color: #f5d313;
} .btn.btn-warning:active, .btn-group.open .btn.btn-warning.dropdown-toggle, .btn.btn-warning.active {
background-color: #cda70d;
} .btn.btn-inverse {
background-color: #34495e;
} .btn.btn-inverse:hover, .btn.btn-inverse:focus, .btn-group:focus .btn.btn-inverse.dropdown-toggle {
background-color: #415b76;
} .btn.btn-inverse:active, .btn-group.open .btn.btn-inverse.dropdown-toggle, .btn.btn-inverse.active {
background-color: #2c3e50;
} .btn > [class^="fui-"] {
margin: 0 4px; position: relative; top: 1px; vertical-align: top; display: inline-block; zoom: 1; *display: inline;
} .btn > [class^="fui-"].pull-right {
margin-right: 0px;
} .btn-toolbar .btn.active {
color: #ffffff;
} .btn-toolbar .btn:first-child {
-webkit-border-radius: 6px 0 0 6px; -moz-border-radius: 6px 0 0 6px; border-radius: 6px 0 0 6px;
} .btn-toolbar .btn:last-child {
-webkit-border-radius: 0 6px 6px 0; -moz-border-radius: 0 6px 6px 0; border-radius: 0 6px 6px 0;
} .btn-toolbar .btn > [class^="fui-"] {
font-size: 16px; top: 0;
} .btn-tip {
font-weight: 300; padding-left: 10px;
} .btn-group > .btn {
border-radius: 0; text-align: center;
} .btn-group > .btn:active + .btn, .btn-group > .btn.active + .btn {
border-left-color: transparent;
} .btn-group > .btn:first-of-type {
border-top-left-radius: 6px; border-bottom-left-radius: 6px;
} .btn-group > .btn:last-of-type {
border-top-right-radius: 6px; border-bottom-right-radius: 6px;
} .btn-group > .btn + .btn {
margin-left: 0;
} .btn-group > .btn + .dropdown-toggle {
border-left: 2px solid rgba(52, 73, 94, 0.15); padding-left: 13px; padding-right: 13px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
} .btn-group > .btn + .dropdown-toggle .caret {
margin-left: 3px; margin-right: 3px;
} .btn-group > .btn.btn-huge + .dropdown-toggle .caret {
margin-left: 7px; margin-right: 7px;
} .btn-group > .btn.btn-small + .dropdown-toggle .caret {
margin-left: 0; margin-right: 0;
} .caret {
border-left-width: 6px; border-right-width: 6px; border-top-width: 8px; border-bottom-color: #34495e; border-style: solid; border-bottom-style: none; border-top-color: #34495e; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; -webkit-backface-visibility: hidden;
} .dropup .caret, .dropup .btn-large .caret, .navbar-fixed-bottom .dropdown .caret {
border-bottom-width: 8px;
} .btn-mini .caret, .btn-small .caret, .btn-large .caret {
margin-top: 7px;
} .btn-large .caret {
border-top-width: 8px; border-right-width: 6px; border-left-width: 6px;
} .navbar {
font-size: 15.988px; /* 16px */
} .navbar .brand {
border-radius: 6px 0 0 6px; color: #526476; font-size: 23.996px; /* 24px */
font-weight: 700; margin-left: 0; padding: 23px 28px 24px 32px; text-shadow: none;
} .navbar .brand:hover, .navbar .brand:focus {
color: #1abc9c;
} .navbar .brand[class*="fui-"] {
font-weight: normal;
} .navbar .nav {
margin-right: 0;
} .navbar .nav > li {
position: relative;
} .navbar .nav > li:hover > ul {
opacity: 1; top: 100%; visibility: visible; z-index: 100; -webkit-transform: scale(1, 1); display: block\9;
} .navbar .nav > li.active > a, .navbar .nav > li.active > a:hover, .navbar .nav > li.active > a:focus {
background: none; color: #1abc9c; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
} .navbar .nav > li > ul {
padding-top: 13px; top: 80%;
} .navbar .nav > li > ul:before {
content: ""; border-style: solid; border-width: 0 9px 9px 9px; border-color: transparent transparent #34495e transparent; height: 0; position: absolute; left: 15px; top: 5px; width: 0; -webkit-transform: rotate(360deg);
} .navbar .nav > li > ul li:hover ul {
opacity: 1; -webkit-transform: scale(1, 1); visibility: visible; display: block\9;
} .navbar .nav > li > ul li ul {
left: 100%;
} .navbar .nav > li > a {
color: #526476; font-weight: 700; font-size: 14.994px; /* 15px */
padding: 29px 20px 27px; text-shadow: none; -webkit-transition: background-color .25s, color .25s, border-bottom-color .25s; -moz-transition: background-color .25s, color .25s, border-bottom-color .25s; -o-transition: background-color .25s, color .25s, border-bottom-color .25s; transition: background-color .25s, color .25s, border-bottom-color .25s; -webkit-backface-visibility: hidden;
} .navbar .nav > li > a:hover, .navbar .nav > li > a:focus {
color: #1abc9c;
} .navbar .nav > li > a[class*="fui-"] {
font-size: 24px; font-weight: normal;
} .navbar .nav > li > a > [class*="fui-"] {
font-size: 24px; margin: -4px 0 0; position: relative; top: 4px;
} .navbar .nav > li > a > [class*="fui-"] + * {
margin-left: 12px;
} .navbar .nav > li:first-child > a {
-webkit-border-radius: 0 0 0 6px; -moz-border-radius: 0 0 0 6px; border-radius: 0 0 0 6px;
} .navbar .nav ul {
border-radius: 4px; left: 0; list-style-type: none; margin-left: 0; opacity: 0; position: absolute; top: 0; width: 234px; z-index: -100; -webkit-transform: scale(1, 0.99); -webkit-transform-origin: 0 0; visibility: hidden; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; -webkit-backface-visibility: hidden;
} .navbar .nav ul ul {
left: 95%; padding-left: 5px;
} .navbar .nav ul li {
background-color: #34495e; padding: 0 3px 3px; position: relative;
} .navbar .nav ul li:first-child {
border-radius: 6px 6px 0 0; padding-top: 3px;
} .navbar .nav ul li:last-child {
border-radius: 0 0 6px 6px;
} .navbar .nav ul li.active > a, .navbar .nav ul li.active > a:hover, .navbar .nav ul li.active > a:focus {
background-color: #1abc9c; color: #ffffff; padding-left: 9px; padding-right: 9px;
} .navbar .nav ul li.active + li > a {
padding-left: 9px; padding-right: 9px;
} .navbar .nav ul a {
border-radius: 2px; color: #ffffff; display: block; font-size: 14px; padding: 6px 9px; text-decoration: none;
} .navbar .nav ul a:hover {
background-color: #1abc9c;
} .navbar .btn-navbar {
background: none; border: none; color: #34495e; margin: 21px 15px 17px; text-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
} .navbar .btn-navbar:hover, .navbar .btn-navbar:focus {
background: none; color: #1abc9c;
} .navbar .btn-navbar:before {
content: "\e00c"; font-family: "Flat-UI-Icons"; font-size: 21.994px; font-style: normal; font-weight: normal; -webkit-font-smoothing: antialiased;
} .navbar .btn-navbar .icon-bar {
display: none;
} .navbar-inner {
background: #eceef0; border: none; padding-left: 0; padding-right: 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; filter: unquote("progid:DXImageTransform.Microsoft.gradient(enabled = false)"); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
} .navbar-inverse {
font-size: 16.996px; /* 17px */
} .navbar-inverse .navbar-inner {
background: #34495e; filter: unquote("progid:DXImageTransform.Microsoft.gradient(enabled = false)");
} .navbar-inverse .brand {
border-bottom: 2px solid #2c3e50; border-right: 2px solid #2c3e50; color: #ffffff; padding: 10px 28px 11px 32px;
} .navbar-inverse .btn-navbar {
color: #ffffff; margin: 7px 10px;
} .navbar-inverse .nav > li:first-child.active > a {
padding-left: 20px;
} .navbar-inverse .nav > li:first-child > a {
border-left: none;
} .navbar-inverse .nav > li.active > a, .navbar-inverse .nav > li.active > a:hover, .navbar-inverse .nav > li.active > a:focus {
background-color: #1abc9c; border-bottom-color: #16a085; border-left: none; color: #ffffff; padding-left: 22px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
} .navbar-inverse .nav > li.active + li > a {
border-left: none; padding-left: 22px;
} .navbar-inverse .nav > li > a {
font-size: 16.002px; /* 16px */
border-bottom: 2px solid #2c3e50; border-left: 2px solid #2c3e50; color: #ffffff; padding: 16px 20px 15px;
} .navbar-inverse .nav.pull-right > li > a {
border-radius: 0 6px 6px 0;
} .navbar-unread, .navbar-new {
font-family: "Lato", sans-serif; background-color: #1abc9c; border-radius: 50%; color: #ffffff; font-size: 0; font-weight: 700; height: 6px; line-height: 14px; position: absolute; right: 12px; text-align: center; top: 28px; width: 6px; z-index: 10;
} .active .navbar-unread, .active .navbar-new {
background-color: #ffffff; display: none;
} .navbar-inverse .navbar-unread, .navbar-inverse .navbar-new {
top: 15px;
} .navbar-new {
background-color: #e74c3c; font-size: 12px; line-height: 17px; height: 18px; margin: -9px -1px; min-width: 16px; padding: 0 1px; width: auto; -webkit-font-smoothing: subpixel-antialiased;
} .navbar.navbar-inverse .nav li.dropdown.open > .dropdown-toggle {
background-color: #1abc9c; border-bottom-color: #16a085; color: #ffffff;
} .navbar.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret {
border-bottom-color: #ffffff !important; border-top-color: #ffffff !important;
} .navbar .nav li.dropdown.open > .dropdown-toggle {
background: none; color: #1abc9c;
} .navbar .nav li.dropdown.open > .dropdown-toggle .caret {
border-bottom-color: #1abc9c !important; border-top-color: #1abc9c !important;
} .navbar .nav li.dropdown.open .dropdown-menu {
opacity: 1; top: 100%; visibility: visible; z-index: 1000; -webkit-transform: none;
} .navbar .nav li.dropdown > .dropdown-toggle {
outline: none;
} .navbar .nav li.dropdown > .dropdown-toggle:hover .caret, .navbar .nav li.dropdown > .dropdown-toggle:focus .caret {
border-bottom-color: #1abc9c; border-top-color: #1abc9c;
} .navbar .nav li.dropdown > .dropdown-toggle .caret {
border-left-width: 6px; border-right-width: 6px; border-top-width: 8px; border-bottom-color: #4c6a89; border-top-color: #4c6a89; margin-left: 10px; margin-top: 7px;
} .navbar .nav li.dropdown .dropdown-menu {
background-color: #34495e; opacity: 0; padding: 0; visibility: hidden;
} .navbar .nav li.dropdown .dropdown-menu:before {
display: none;
} .navbar .nav li.dropdown .dropdown-menu:after {
border-bottom-color: #34495e;
} .navbar .nav li.dropdown .dropdown-menu > li > a {
border-radius: 3px; color: #ffffff; padding: 6px 8px 8px;
} .navbar .nav li.dropdown .dropdown-menu .divider {
background-color: #2c3e50; border-bottom: none; margin: 2px 0 5px; padding: 0; height: 2px;
} .select {
display: inline-block; margin-bottom: 10px;
} [class*="span"] > .select[class*="span"] {
margin-left: 0;
} .select[class*="span"] .btn {
width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
} .select.select-block {
display: block; float: none; margin-left: 0; width: auto;
} .select.select-block .btn {
width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
} .select .btn {
width: 220px;
} .select .btn.btn-huge .filter-option {
left: 20px; right: 40px; top: 16px;
} .select .btn.btn-huge .caret {
right: 20px;
} .select .btn.btn-large .filter-option {
left: 18px; right: 38px; top: 12px;
} .select .btn.btn-small .filter-option {
left: 13px; right: 33px; top: 7px;
} .select .btn.btn-small .caret {
right: 13px;
} .select .btn.btn-mini .filter-option {
left: 13px; right: 33px; top: 5px;
} .select .btn.btn-mini .caret {
right: 13px;
} .select .btn .filter-option {
height: 26px; left: 13px; overflow: hidden; position: absolute; right: 33px; text-align: left; top: 10px;
} .select .btn .caret {
position: absolute; right: 16px;
} .select .btn .dropdown-toggle {
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
} .select .btn .dropdown-menu {
min-width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
} .select .btn .dropdown-menu dt {
cursor: default; display: block; padding: 3px 20px;
} .select .btn .dropdown-menu li:not(.disabled) > a:hover small {
color: rgba(255, 255, 255, 0.004);
} .select .btn .dropdown-menu li > a {
min-height: 20px;
} .select .btn .dropdown-menu li > a.opt {
padding-left: 35px;
} .select .btn .dropdown-menu li small {
padding-left: 0.5em;
} .select .btn .dropdown-menu li > dt small {
font-weight: normal;
} .select .btn > .disabled, .select .btn .dropdown-menu li.disabled > a {
cursor: default;
} .select .caret {
border-left-width: 6px; border-right-width: 6px; border-top-width: 8px; border-bottom-color: #ffffff; border-style: solid; border-bottom-style: none; border-top-color: #ffffff; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; -webkit-backface-visibility: hidden;
} textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
border: 2px solid #bdc3c7; color: #34495e; font-family: "Lato", sans-serif; font-size: 14px; padding: 8px 5px; height: 21px; text-indent: 6px; -webkit-appearance: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transition: border .25s linear, color .25s linear; -moz-transition: border .25s linear, color .25s linear; -o-transition: border .25s linear, color .25s linear; transition: border .25s linear, color .25s linear; -webkit-backface-visibility: hidden;
} textarea:-moz-placeholder, input[type="text"]:-moz-placeholder, input[type="password"]:-moz-placeholder, input[type="datetime"]:-moz-placeholder, input[type="datetime-local"]:-moz-placeholder, input[type="date"]:-moz-placeholder, input[type="month"]:-moz-placeholder, input[type="time"]:-moz-placeholder, input[type="week"]:-moz-placeholder, input[type="number"]:-moz-placeholder, input[type="email"]:-moz-placeholder, input[type="url"]:-moz-placeholder, input[type="search"]:-moz-placeholder, input[type="tel"]:-moz-placeholder, input[type="color"]:-moz-placeholder, .uneditable-input:-moz-placeholder {
color: #b2bcc5;
} textarea::-webkit-input-placeholder, input[type="text"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder, input[type="datetime"]::-webkit-input-placeholder, input[type="datetime-local"]::-webkit-input-placeholder, input[type="date"]::-webkit-input-placeholder, input[type="month"]::-webkit-input-placeholder, input[type="time"]::-webkit-input-placeholder, input[type="week"]::-webkit-input-placeholder, input[type="number"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder, input[type="url"]::-webkit-input-placeholder, input[type="search"]::-webkit-input-placeholder, input[type="tel"]::-webkit-input-placeholder, input[type="color"]::-webkit-input-placeholder, .uneditable-input::-webkit-input-placeholder {
color: #b2bcc5;
} textarea.placeholder, input[type="text"].placeholder, input[type="password"].placeholder, input[type="datetime"].placeholder, input[type="datetime-local"].placeholder, input[type="date"].placeholder, input[type="month"].placeholder, input[type="time"].placeholder, input[type="week"].placeholder, input[type="number"].placeholder, input[type="email"].placeholder, input[type="url"].placeholder, input[type="search"].placeholder, input[type="tel"].placeholder, input[type="color"].placeholder, .uneditable-input.placeholder {
color: #b2bcc5;
} .control-group.focus textarea, .control-group.focus input[type="text"], .control-group.focus input[type="password"], .control-group.focus input[type="datetime"], .control-group.focus input[type="datetime-local"], .control-group.focus input[type="date"], .control-group.focus input[type="month"], .control-group.focus input[type="time"], .control-group.focus input[type="week"], .control-group.focus input[type="number"], .control-group.focus input[type="email"], .control-group.focus input[type="url"], .control-group.focus input[type="search"], .control-group.focus input[type="tel"], .control-group.focus input[type="color"], .control-group.focus .uneditable-input, textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus {
border-color: #1abc9c; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
} .row-fluid textarea, .row-fluid input[type="text"], .row-fluid input[type="password"], .row-fluid input[type="datetime"], .row-fluid input[type="datetime-local"], .row-fluid input[type="date"], .row-fluid input[type="month"], .row-fluid input[type="time"], .row-fluid input[type="week"], .row-fluid input[type="number"], .row-fluid input[type="email"], .row-fluid input[type="url"], .row-fluid input[type="search"], .row-fluid input[type="tel"], .row-fluid input[type="color"], .row-fluid .uneditable-input {
height: 41px; width: 100%;
} textarea.flat, input[type="text"].flat, input[type="password"].flat, input[type="datetime"].flat, input[type="datetime-local"].flat, input[type="date"].flat, input[type="month"].flat, input[type="time"].flat, input[type="week"].flat, input[type="number"].flat, input[type="email"].flat, input[type="url"].flat, input[type="search"].flat, input[type="tel"].flat, input[type="color"].flat, .uneditable-input.flat {
border-color: transparent;
} textarea.flat:hover, input[type="text"].flat:hover, input[type="password"].flat:hover, input[type="datetime"].flat:hover, input[type="datetime-local"].flat:hover, input[type="date"].flat:hover, input[type="month"].flat:hover, input[type="time"].flat:hover, input[type="week"].flat:hover, input[type="number"].flat:hover, input[type="email"].flat:hover, input[type="url"].flat:hover, input[type="search"].flat:hover, input[type="tel"].flat:hover, input[type="color"].flat:hover, .uneditable-input.flat:hover {
border-color: #bdc3c7;
} textarea.flat:focus, input[type="text"].flat:focus, input[type="password"].flat:focus, input[type="datetime"].flat:focus, input[type="datetime-local"].flat:focus, input[type="date"].flat:focus, input[type="month"].flat:focus, input[type="time"].flat:focus, input[type="week"].flat:focus, input[type="number"].flat:focus, input[type="email"].flat:focus, input[type="url"].flat:focus, input[type="search"].flat:focus, input[type="tel"].flat:focus, input[type="color"].flat:focus, .uneditable-input.flat:focus {
border-color: #1abc9c;
} .control-group.error textarea, .control-group.error input[type="text"], .control-group.error input[type="password"], .control-group.error input[type="datetime"], .control-group.error input[type="datetime-local"], .control-group.error input[type="date"], .control-group.error input[type="month"], .control-group.error input[type="time"], .control-group.error input[type="week"], .control-group.error input[type="number"], .control-group.error input[type="email"], .control-group.error input[type="url"], .control-group.error input[type="search"], .control-group.error input[type="tel"], .control-group.error input[type="color"], .control-group.error .uneditable-input {
border-color: #e74c3c; color: #e74c3c; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
} .control-group.error textarea:focus, .control-group.error input[type="text"]:focus, .control-group.error input[type="password"]:focus, .control-group.error input[type="datetime"]:focus, .control-group.error input[type="datetime-local"]:focus, .control-group.error input[type="date"]:focus, .control-group.error input[type="month"]:focus, .control-group.error input[type="time"]:focus, .control-group.error input[type="week"]:focus, .control-group.error input[type="number"]:focus, .control-group.error input[type="email"]:focus, .control-group.error input[type="url"]:focus, .control-group.error input[type="search"]:focus, .control-group.error input[type="tel"]:focus, .control-group.error input[type="color"]:focus, .control-group.error .uneditable-input:focus {
-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
} .control-group.success textarea, .control-group.success input[type="text"], .control-group.success input[type="password"], .control-group.success input[type="datetime"], .control-group.success input[type="datetime-local"], .control-group.success input[type="date"], .control-group.success input[type="month"], .control-group.success input[type="time"], .control-group.success input[type="week"], .control-group.success input[type="number"], .control-group.success input[type="email"], .control-group.success input[type="url"], .control-group.success input[type="search"], .control-group.success input[type="tel"], .control-group.success input[type="color"], .control-group.success .uneditable-input {
border-color: #2ecc71; color: #2ecc71; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
} .control-group.success textarea:focus, .control-group.success input[type="text"]:focus, .control-group.success input[type="password"]:focus, .control-group.success input[type="datetime"]:focus, .control-group.success input[type="datetime-local"]:focus, .control-group.success input[type="date"]:focus, .control-group.success input[type="month"]:focus, .control-group.success input[type="time"]:focus, .control-group.success input[type="week"]:focus, .control-group.success input[type="number"]:focus, .control-group.success input[type="email"]:focus, .control-group.success input[type="url"]:focus, .control-group.success input[type="search"]:focus, .control-group.success input[type="tel"]:focus, .control-group.success input[type="color"]:focus, .control-group.success .uneditable-input:focus {
-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
} .control-group.warning textarea, .control-group.warning input[type="text"], .control-group.warning input[type="password"], .control-group.warning input[type="datetime"], .control-group.warning input[type="datetime-local"], .control-group.warning input[type="date"], .control-group.warning input[type="month"], .control-group.warning input[type="time"], .control-group.warning input[type="week"], .control-group.warning input[type="number"], .control-group.warning input[type="email"], .control-group.warning input[type="url"], .control-group.warning input[type="search"], .control-group.warning input[type="tel"], .control-group.warning input[type="color"], .control-group.warning .uneditable-input {
border-color: #f1c40f; color: #f1c40f; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
} .control-group.warning textarea:focus, .control-group.warning input[type="text"]:focus, .control-group.warning input[type="password"]:focus, .control-group.warning input[type="datetime"]:focus, .control-group.warning input[type="datetime-local"]:focus, .control-group.warning input[type="date"]:focus, .control-group.warning input[type="month"]:focus, .control-group.warning input[type="time"]:focus, .control-group.warning input[type="week"]:focus, .control-group.warning input[type="number"]:focus, .control-group.warning input[type="email"]:focus, .control-group.warning input[type="url"]:focus, .control-group.warning input[type="search"]:focus, .control-group.warning input[type="tel"]:focus, .control-group.warning input[type="color"]:focus, .control-group.warning .uneditable-input:focus {
-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
} .control-group.info textarea, .control-group.info input[type="text"], .control-group.info input[type="password"], .control-group.info input[type="datetime"], .control-group.info input[type="datetime-local"], .control-group.info input[type="date"], .control-group.info input[type="month"], .control-group.info input[type="time"], .control-group.info input[type="week"], .control-group.info input[type="number"], .control-group.info input[type="email"], .control-group.info input[type="url"], .control-group.info input[type="search"], .control-group.info input[type="tel"], .control-group.info input[type="color"], .control-group.info .uneditable-input {
border-color: #3498db; color: #3498db; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
} .control-group.info textarea:focus, .control-group.info input[type="text"]:focus, .control-group.info input[type="password"]:focus, .control-group.info input[type="datetime"]:focus, .control-group.info input[type="datetime-local"]:focus, .control-group.info input[type="date"]:focus, .control-group.info input[type="month"]:focus, .control-group.info input[type="time"]:focus, .control-group.info input[type="week"]:focus, .control-group.info input[type="number"]:focus, .control-group.info input[type="email"]:focus, .control-group.info input[type="url"]:focus, .control-group.info input[type="search"]:focus, .control-group.info input[type="tel"]:focus, .control-group.info input[type="color"]:focus, .control-group.info .uneditable-input:focus {
-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
} .control-group textarea, .control-group input[type="text"], .control-group input[type="password"], .control-group input[type="datetime"], .control-group input[type="datetime-local"], .control-group input[type="date"], .control-group input[type="month"], .control-group input[type="time"], .control-group input[type="week"], .control-group input[type="number"], .control-group input[type="email"], .control-group input[type="url"], .control-group input[type="search"], .control-group input[type="tel"], .control-group input[type="color"], .control-group .uneditable-input {
margin-bottom: 0;
} .control-group {
position: relative;
} .control-group > .input-icon {
position: absolute; top: 2px; right: 2px; line-height: 37px; vertical-align: middle; font-size: 19.991999999999997px; /* 20px */
color: #b2bcc5; background-color: #ffffff; padding: 0 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
} .control-group input:focus + .input-icon {
color: #34495e;
} .control-group.huge > .input-icon {
line-height: 49px;
} .control-group.large > .input-icon {
line-height: 41px;
} .control-group.small > .input-icon {
font-size: 15.988px; /* 16px */
line-height: 30px;
} .control-group.success > .input-icon, .control-group.success input + .input-icon {
color: #2ecc71;
} .control-group.warning > .input-icon, .control-group.warning input + .input-icon {
color: #f1c40f;
} .control-group.error > .input-icon, .control-group.error input + .input-icon {
color: #e74c3c;
} .control-group.disabled > .input-icon, .control-group.disabled input + .input-icon {
color: #d5dbdb; background-color: #f4f6f6;
} input[disabled], input[readonly], textarea[disabled], textarea[readonly] {
background-color: #f4f6f6; border-color: #d5dbdb; color: #d5dbdb; cursor: default;
} input, textarea, .uneditable-input {
width: 192px;
} textarea {
height: auto; font-size: 14.994px; /* 15px */
line-height: 24px; padding: 5px 11px; text-indent: 0;
} .row-fluid textarea {
height: auto; width: 100% !important;
} textarea[class*="span"] {
width: 100% !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
} .checkbox, .radio {
margin-bottom: 12px; padding-left: 32px; position: relative; -webkit-transition: color 0.25s linear; -moz-transition: color 0.25s linear; -o-transition: color 0.25s linear; transition: color 0.25s linear; -webkit-backface-visibility: hidden;
} .checkbox input, .radio input {
outline: none !important; display: none;
} .checkbox .icons, .radio .icons {
color: #bdc3c7; display: block; height: 20px; left: 0; position: absolute; top: 0; width: 20px; text-align: center; line-height: 20px; font-size: 20px; -webkit-transition: color 0.25s linear; -moz-transition: color 0.25s linear; -o-transition: color 0.25s linear; transition: color 0.25s linear; -webkit-backface-visibility: hidden;
} .checkbox .icons .first-icon-icon, .radio .icons .first-icon-icon, .checkbox .icons .second-icon, .radio .icons .second-icon {
position: absolute; left: 0; top: 0; opacity: 1; filter: alpha(opacity=100);
} .checkbox .icons .second-icon, .radio .icons .second-icon {
opacity: 0; filter: alpha(opacity=0);
} .checkbox:hover .first-icon, .radio:hover .first-icon {
opacity: 0; filter: alpha(opacity=0);
} .checkbox:hover .second-icon, .radio:hover .second-icon {
opacity: 1; filter: alpha(opacity=100);
} .checkbox.checked, .radio.checked {
color: #16a085;
} .checkbox.checked .icons, .radio.checked .icons {
color: #1abc9c;
} .checkbox.checked .first-icon, .radio.checked .first-icon {
opacity: 0; filter: alpha(opacity=0);
} .checkbox.checked .second-icon, .radio.checked .second-icon {
opacity: 1; filter: alpha(opacity=100);
} .checkbox.disabled, .radio.disabled {
cursor: default; color: #e6e8ea;
} .checkbox.disabled .icons, .radio.disabled .icons {
color: #e6e8ea;
} .checkbox.disabled .first-icon, .radio.disabled .first-icon {
opacity: 1; filter: alpha(opacity=100);
} .checkbox.disabled .second-icon, .radio.disabled .second-icon {
opacity: 0; filter: alpha(opacity=0);
} .checkbox.disabled.checked .icons, .radio.disabled.checked .icons {
color: #e6e8ea;
} .checkbox.disabled.checked .first-icon, .radio.disabled.checked .first-icon {
opacity: 0; filter: alpha(opacity=0);
} .checkbox.disabled.checked .second-icon, .radio.disabled.checked .second-icon {
opacity: 1; filter: alpha(opacity=100);
} .tagsinput {
background: white; border: 2px solid #1abc9c; border-radius: 6px; height: 100px; margin-bottom: 18px; padding: 6px 1px 1px 6px; overflow-y: auto; text-align: left;
} .tagsinput .tag {
border-radius: 4px; background-color: #1abc9c; color: #ffffff; cursor: pointer; margin-right: 5px; margin-bottom: 5px; overflow: hidden; line-height: 15px; padding: 6px 13px 8px 19px; position: relative; vertical-align: middle; display: inline-block; zoom: 1; *display: inline; -webkit-transition: 0.14s linear; -moz-transition: 0.14s linear; -o-transition: 0.14s linear; transition: 0.14s linear; -webkit-backface-visibility: hidden;
} .tagsinput .tag:hover {
background-color: #16a085; color: #ffffff; padding-left: 12px; padding-right: 20px;
} .tagsinput .tag:hover .tagsinput-remove-link {
color: #ffffff; opacity: 1; display: block\9;
} .tagsinput input {
background: transparent; border: none; color: #34495e; font-family: "Lato", sans-serif; font-size: 14px; margin: 0px; padding: 0 0 0 5px; outline: 0; margin-right: 5px; margin-bottom: 5px; width: 12px;
} .tagsinput-remove-link {
bottom: 0; color: #ffffff; cursor: pointer; font-size: 12px; opacity: 0; padding: 7px 7px 5px 0; position: absolute; right: 0; text-align: right; text-decoration: none; top: 0; width: 100%; z-index: 2; display: none\9;
} .tagsinput-remove-link:before {
color: #ffffff; content: "\e00b"; font-family: "Flat-UI-Icons";
} .tagsinput-add-container {
vertical-align: middle; display: inline-block; zoom: 1; *display: inline;
} .tagsinput-add {
background-color: #d6dbdf; border-radius: 3px; color: #ffffff; cursor: pointer; margin-bottom: 5px; padding: 6px 9px; display: inline-block; zoom: 1; *display: inline; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; -webkit-backface-visibility: hidden;
} .tagsinput-add:hover {
background-color: #1abc9c;
} .tagsinput-add:before {
content: "\e009"; font-family: "Flat-UI-Icons";
} .tags_clear {
clear: both; width: 100%; height: 0px;
} .not_valid {
background: #fbd8db !important; color: #90111a !important;
} .progress {
background: #ebedef; border-radius: 32px; height: 12px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; filter: unquote("progid:DXImageTransform.Microsoft.gradient(enabled = false)");
} .progress .bar {
background: #1abc9c; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; filter: unquote("progid:DXImageTransform.Microsoft.gradient(enabled = false)");
} .progress .bar-success {
background-color: #2ecc71; filter: unquote("progid:DXImageTransform.Microsoft.gradient(enabled = false)");
} .progress .bar-warning {
background-color: #f1c40f; filter: unquote("progid:DXImageTransform.Microsoft.gradient(enabled = false)");
} .progress .bar-danger {
background-color: #e74c3c; filter: unquote("progid:DXImageTransform.Microsoft.gradient(enabled = false)");
} .progress .bar-info {
background-color: #3498db; filter: unquote("progid:DXImageTransform.Microsoft.gradient(enabled = false)");
} .ui-slider {
background: #ebedef; border-radius: 32px; height: 12px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; filter: unquote("progid:DXImageTransform.Microsoft.gradient(enabled = false)"); margin-bottom: 20px; position: relative;
} .ui-slider .bar {
background: #1abc9c; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; filter: unquote("progid:DXImageTransform.Microsoft.gradient(enabled = false)");
} .ui-slider .bar-success {
background-color: #2ecc71; filter: unquote("progid:DXImageTransform.Microsoft.gradient(enabled = false)");
} .ui-slider .bar-warning {
background-color: #f1c40f; filter: unquote("progid:DXImageTransform.Microsoft.gradient(enabled = false)");
} .ui-slider .bar-danger {
background-color: #e74c3c; filter: unquote("progid:DXImageTransform.Microsoft.gradient(enabled = false)");
} .ui-slider .bar-info {
background-color: #3498db; filter: unquote("progid:DXImageTransform.Microsoft.gradient(enabled = false)");
} .ui-slider-handle {
background-color: #16a085; border-radius: 50%; cursor: pointer; height: 18px; margin-left: -9px; position: absolute; top: -3px; width: 18px; z-index: 2; -webkit-transition: background 0.25s; -moz-transition: background 0.25s; -o-transition: background 0.25s; transition: background 0.25s; -webkit-backface-visibility: hidden;
} .ui-slider-handle[style*='100'] {
margin-left: -15px;
} .ui-slider-handle:hover, .ui-slider-handle:focus {
background-color: #48c9b0; outline: none;
} .ui-slider-handle:active {
background-color: #16a085;
} .ui-slider-range {
background-color: #1abc9c; border-radius: 30px 0 0 30px; display: block; height: 100%; position: absolute; z-index: 1;
} .ui-slider-segment {
background-color: #d9dbdd; border-radius: 50%; float: left; height: 6px; margin: 3px -6px 0 0; width: 6px;
} .ui-slider-value {
float: right; font-weight: 500; margin-top: 12px;
} .ui-slider-value.first {
clear: left; float: left;
} .pager {
background-color: #34495e; border-radius: 6px; color: #ffffff; font-size: 16px; font-weight: 700; display: inline-block; zoom: 1; *display: inline;
} .pager li:first-child > a, .pager li:first-child > span {
border-left: none; -webkit-border-radius: 6px 0 0 6px; -moz-border-radius: 6px 0 0 6px; border-radius: 6px 0 0 6px;
} .pager li.pager-center {
padding: 9px 15px 10px; padding-left: 0; padding-right: 0; display: inline-block; zoom: 1; *display: inline;
} .pager li > a, .pager li > span {
background: none; border: none; border-left: 2px solid #2c3e50; color: #ffffff; padding: 9px 15px 10px; text-decoration: none; white-space: nowrap; -webkit-border-radius: 0 6px 6px 0; -moz-border-radius: 0 6px 6px 0; border-radius: 0 6px 6px 0;
} .pager li > a:hover, .pager li > span:hover, .pager li > a:focus, .pager li > span:focus {
background-color: #2c3e50;
} .pager li > a:active, .pager li > span:active {
background-color: #2c3e50;
} .pager li > a [class*="fui-"] + span, .pager li > span [class*="fui-"] + span {
margin-left: 8px;
} .pager li > a span + [class*="fui-"], .pager li > span span + [class*="fui-"] {
margin-left: 8px;
} .pagination {
position: relative;
} .pagination ul {
background: #d6dbdf; color: #ffffff; vertical-align: top; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
} .pagination ul li {
display: inline-block; margin-right: -3px; vertical-align: top;
} .pagination ul li.active > a, .pagination ul li.active > span {
background-color: #1abc9c; color: #ffffff;
} .pagination ul li.active.previous > a, .pagination ul li.active.next > a, .pagination ul li.active.previous > span, .pagination ul li.active.next > span {
margin: 0;
} .pagination ul li.active.previous > a, .pagination ul li.active.next > a, .pagination ul li.active.previous > span, .pagination ul li.active.next > span, .pagination ul li.active.previous > a:hover, .pagination ul li.active.next > a:hover, .pagination ul li.active.previous > span:hover, .pagination ul li.active.next > span:hover, .pagination ul li.active.previous > a:focus, .pagination ul li.active.next > a:focus, .pagination ul li.active.previous > span:focus, .pagination ul li.active.next > span:focus {
background-color: #1abc9c; color: #ffffff;
} .pagination ul li:first-child {
-webkit-border-radius: 6px 0 0 6px; -moz-border-radius: 6px 0 0 6px; border-radius: 6px 0 0 6px;
} .pagination ul li:first-child > a, .pagination ul li:first-child > span {
-webkit-border-radius: 6px 0 0 6px; -moz-border-radius: 6px 0 0 6px; border-radius: 6px 0 0 6px;
} .pagination ul li:first-child.previous + li > a, .pagination ul li:first-child.previous + li > span {
border-left-width: 5px;
} .pagination ul li:first-child > a, .pagination ul li:first-child > span {
border-left: none;
} .pagination ul li:last-child {
margin-right: 0; -webkit-border-radius: 0 6px 6px 0; -moz-border-radius: 0 6px 6px 0; border-radius: 0 6px 6px 0;
} .pagination ul li:last-child > a, .pagination ul li:last-child > span, .pagination ul li:last-child > a:hover, .pagination ul li:last-child > span:hover, .pagination ul li:last-child > a:focus, .pagination ul li:last-child > span:focus {
-webkit-border-radius: 0 6px 6px 0; -moz-border-radius: 0 6px 6px 0; border-radius: 0 6px 6px 0;
} .pagination ul li.previous > a, .pagination ul li.next > a, .pagination ul li.previous > span, .pagination ul li.next > span {
background: transparent; border: none; border-right: 2px solid #e4e7ea; font-size: 15.988px; /* 16px */
margin: 0 9px 0 0; padding: 12px 17px; min-width: auto; -webkit-border-radius: 6px 0 0 6px; -moz-border-radius: 6px 0 0 6px; border-radius: 6px 0 0 6px; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important;
} .pagination ul li.previous > a, .pagination ul li.next > a, .pagination ul li.previous > span, .pagination ul li.next > span, .pagination ul li.previous > a:hover, .pagination ul li.next > a:hover, .pagination ul li.previous > span:hover, .pagination ul li.next > span:hover, .pagination ul li.previous > a:focus, .pagination ul li.next > a:focus, .pagination ul li.previous > span:focus, .pagination ul li.next > span:focus {
border-color: #e4e7ea !important;
} .pagination ul li.next {
margin-left: 9px;
} .pagination ul li.next > a, .pagination ul li.next > span {
border-left: 2px solid #e4e7ea; border-right: none; margin: 0; -webkit-border-radius: 0 6px 6px 0; -moz-border-radius: 0 6px 6px 0; border-radius: 0 6px 6px 0;
} .pagination ul li.active > a, .pagination ul li.active > span {
background-color: #ffffff; border-color: #ffffff; border-width: 2px !important; color: #d6dbdf; margin: 10px 5px 9px;
} .pagination ul li.active > a:hover, .pagination ul li.active > span:hover, .pagination ul li.active > a:focus, .pagination ul li.active > span:focus {
background-color: #ffffff; border-color: #ffffff; color: #d6dbdf; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
} .pagination ul li.active.previous, .pagination ul li.active.next {
border-color: #e4e7ea;
} .pagination ul li.active.previous {
margin-right: 6px;
} .pagination ul li > a, .pagination ul li > span {
background: #ffffff; border: 5px solid #d6dbdf; color: #ffffff; line-height: 16px; min-height: 17px; min-width: auto; outline: none; padding: 0 4px; margin: 7px 2px 6px; text-align: center; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-transition: background 0.2s ease-out, border-color 0s ease-out, color 0.2s ease-out; -moz-transition: background 0.2s ease-out, border-color 0s ease-out, color 0.2s ease-out; -o-transition: background 0.2s ease-out, border-color 0s ease-out, color 0.2s ease-out; transition: background 0.2s ease-out, border-color 0s ease-out, color 0.2s ease-out; -webkit-backface-visibility: hidden;
} .pagination ul li > a:hover, .pagination ul li > span:hover, .pagination ul li > a:focus, .pagination ul li > span:focus {
background-color: #1abc9c; border-color: #1abc9c; color: #ffffff; -webkit-transition: background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out; -moz-transition: background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out; -o-transition: background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out; transition: background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out; -webkit-backface-visibility: hidden;
} .pagination ul li > a:active, .pagination ul li > span:active {
background-color: #16a085; border-color: #16a085; color: #ffffff;
} .pagination > .btn.previous, .pagination > .btn.next {
margin-right: 8px; font-size: 14px; padding-left: 23px; padding-right: 23px;
} .pagination > .btn.previous [class*="fui-"], .pagination > .btn.next [class*="fui-"] {
font-size: 16px; margin-left: -2px; margin-top: -2px;
} .pagination > .btn.next {
margin-left: 8px; margin-right: 0;
} .pagination > .btn.next [class*="fui-"] {
margin-right: -2px; margin-left: 4px;
} .tooltip {
font-size: 14px;
} .tooltip.in {
opacity: 1;
} .tooltip.top {
padding-bottom: 9px;
} .tooltip.top .tooltip-arrow {
border-top-color: #34495e; border-width: 9px 9px 0; bottom: 0; margin-left: -9px;
} .tooltip.right .tooltip-arrow {
border-right-color: #34495e; border-width: 9px 9px 9px 0; margin-top: -9px; left: -3px;
} .tooltip.bottom {
padding-top: 8px;
} .tooltip.bottom .tooltip-arrow {
border-bottom-color: #34495e; border-width: 0 9px 9px; margin-left: -9px; top: -1px;
} .tooltip.left .tooltip-arrow {
border-left-color: #34495e; border-width: 9px 0 9px 9px; margin-top: -9px; right: -3px;
} .tooltip-inner {
background-color: #34495e; line-height: 17.99px; padding: 12px 12px; text-align: center; width: 183px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
} .dropdown-menu {
background-color: #f3f4f5; border: none; display: block; margin-top: 8px; opacity: 0; padding: 0; visibility: hidden; width: 100%; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; -webkit-backface-visibility: hidden;
} .dropdown-menu.typeahead {
display: none; opacity: 1; visibility: visible; width: auto; margin-top: 2px;
} .open > .dropdown-menu {
margin-top: 18px; opacity: 1; visibility: visible;
} .dropdown-menu li:first-child dt + a {
border-radius: 0;
} .dropdown-menu li:first-child > a {
border-radius: 6px 6px 0 0; padding-top: 8px;
} .dropdown-menu li:last-child > a {
border-radius: 0 0 6px 6px; padding-bottom: 10px;
} .dropdown-menu li.active > a, .dropdown-menu li.selected > a, .dropdown-menu li.active > a.highlighted, .dropdown-menu li.selected > a.highlighted {
background: #1abc9c; color: #ffffff;
} .dropdown-menu li.active > a:hover, .dropdown-menu li.selected > a:hover, .dropdown-menu li.active > a.highlighted:hover, .dropdown-menu li.selected > a.highlighted:hover, .dropdown-menu li.active > a:focus, .dropdown-menu li.selected > a:focus, .dropdown-menu li.active > a.highlighted:focus, .dropdown-menu li.selected > a.highlighted:focus {
background: #16a085; color: #ffffff;
} .dropdown-menu li > a {
color: rgba(52, 73, 94, 0.75); padding: 6px 15px 8px; text-decoration: none; *zoom: 1; -webkit-transition: background-color 0.25s; -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s; transition: background-color 0.25s; -webkit-backface-visibility: hidden;
} .dropdown-menu li > a:before, .dropdown-menu li > a:after {
display: table; content: "";
} .dropdown-menu li > a:after {
clear: both;
} .dropdown-menu li > a:hover, .dropdown-menu li > a:active, .dropdown-menu li > a:focus {
background: #e1e4e7; color: inherit; outline: none;
} .dropdown-menu li > a.highlighted {
background: #c9cfd4; color: #ffffff;
} .dropdown-menu li > a.highlighted:hover, .dropdown-menu li > a.highlighted:focus {
background: #bac1c8; color: #ffffff;
} .dropdown-menu li > a:before {
float: right; margin-top: 3px;
} .dropdown-menu li dt {
font-weight: 300; margin-bottom: 3px; margin-top: 12px; padding: 0 15px;
} .dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu {
margin-bottom: 8px;
} .dropup .dropdown-arrow, .navbar-fixed-bottom .dropdown .dropdown-arrow {
border-bottom: none; border-top: 8px outset #f3f4f5; bottom: 100%; top: auto;
} .navbar-fixed-bottom .nav > li > ul:before {
border-bottom: none; border-top: 9px outset #34495e; bottom: 4px; top: auto;
} .open.dropup > .dropdown-menu {
margin-bottom: 18px;
} .open.dropup > .dropdown-arrow {
margin-bottom: 10px;
} .open.dropup > .dropdown-arrow.dropdown-arrow-inverse {
border-top-color: #34495e;
} .open > .dropdown-arrow {
margin-top: 9px; opacity: 1;
} .dropdown-arrow {
border-style: solid; border-width: 0 9px 9px 9px; border-color: transparent transparent #f3f4f5 transparent; height: 0; margin-top: 0; opacity: 0; position: absolute; right: 13px; top: 100%; width: 0; z-index: 10; -webkit-transform: rotate(360deg); -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; -webkit-backface-visibility: hidden;
} .dropdown-inverse {
background-color: #34495e; color: #cccccc; padding: 4px 0 6px;
} .dropdown-inverse li {
margin: 0 4px -2px;
} .dropdown-inverse li:first-child > a, .dropdown-inverse li:last-child > a {
border-radius: 2px; padding-bottom: 7px; padding-top: 5px;
} .dropdown-inverse li:first-child dt + a, .dropdown-inverse li:last-child dt + a {
border-radius: 2px;
} .dropdown-inverse li.active > a, .dropdown-inverse li.selected > a {
background: #1abc9c; color: #ffffff; position: relative; z-index: 1;
} .dropdown-inverse li dt {
padding-left: 11px; padding-right: 11px;
} .dropdown-inverse li .divider {
margin-left: 11px; margin-right: 11px;
} .dropdown-inverse li > a {
border-radius: 2px; color: #ffffff; padding: 5px 11px 7px;
} .dropdown-inverse li > a:hover, .dropdown-inverse li > a:active, .dropdown-inverse li > a:focus {
background: #2c3e50;
} .dropdown-inverse li > a.highlighted {
background: #526476;
} .dropdown-inverse li > a.highlighted:hover, .dropdown-inverse li > a.highlighted:focus {
background: #677786;
} .dropdown-inverse li .divider {
background-color: #526476; border-bottom-color: #526476;
} /* ============================================================
* bootstrapSwitch v1.3 by Larentis Mattia @spiritualGuru * http://www.larentis.eu/switch/ * ============================================================ * Licensed under the Apache License, Version 2.0 * http://www.apache.org/licenses/LICENSE-2.0 * ============================================================ */
.has-switch {
border-radius: 30px; display: inline-block; cursor: pointer; line-height: 1.231; overflow: hidden; position: relative; text-align: left; width: 80px; -webkit-mask: url('../images/switch/mask.png') 0 0 no-repeat; mask: url('../images/switch/mask.png') 0 0 no-repeat; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;
} .has-switch.deactivate {
opacity: 0.5; filter: alpha(opacity=50); cursor: default !important;
} .has-switch.deactivate label, .has-switch.deactivate span {
cursor: default !important;
} .has-switch > div {
width: 162%; position: relative; top: 0;
} .has-switch > div.switch-animate {
-webkit-transition: left 0.25s ease-out; -moz-transition: left 0.25s ease-out; -o-transition: left 0.25s ease-out; transition: left 0.25s ease-out; -webkit-backface-visibility: hidden;
} .has-switch > div.switch-off {
left: -63%;
} .has-switch > div.switch-off label {
background-color: #7f8c9a; border-color: #bdc3c7; -webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5); -moz-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5); box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5);
} .has-switch > div.switch-on {
left: 0%;
} .has-switch > div.switch-on label {
background-color: #1abc9c;
} .has-switch input[type=checkbox] {
display: none;
} .has-switch span {
cursor: pointer; font-size: 14.994px; font-weight: 700; float: left; height: 29px; line-height: 19px; margin: 0; padding-bottom: 6px; padding-top: 5px; position: relative; text-align: center; width: 50%; z-index: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: 0.25s ease-out; -moz-transition: 0.25s ease-out; -o-transition: 0.25s ease-out; transition: 0.25s ease-out; -webkit-backface-visibility: hidden;
} .has-switch span.switch-left {
border-radius: 30px 0 0 30px; background-color: #34495e; color: #1abc9c; border-left: 1px solid transparent;
} .has-switch span.switch-right {
border-radius: 0 30px 30px 0; background-color: #bdc3c7; color: #ffffff; text-indent: 7px;
} .has-switch span.switch-right [class*="fui-"] {
text-indent: 0;
} .has-switch label {
border: 4px solid #34495e; border-radius: 50%; float: left; height: 21px; margin: 0 -15px 0 -14px; padding: 0; position: relative; vertical-align: middle; width: 21px; z-index: 100; -webkit-transition: 0.25s ease-out; -moz-transition: 0.25s ease-out; -o-transition: 0.25s ease-out; transition: 0.25s ease-out; -webkit-backface-visibility: hidden;
} .switch-square {
border-radius: 6px; -webkit-mask: url('../images/switch/mask.png') 0 0 no-repeat; mask: url('../images/switch/mask.png') 0 0 no-repeat;
} .switch-square > div.switch-off label {
border-color: #7f8c9a; border-radius: 6px 0 0 6px;
} .switch-square span.switch-left {
border-radius: 6px 0 0 6px;
} .switch-square span.switch-left [class*="fui-"] {
text-indent: -10px;
} .switch-square span.switch-right {
border-radius: 0 6px 6px 0;
} .switch-square span.switch-right [class*="fui-"] {
text-indent: 5px;
} .switch-square label {
border-radius: 0 6px 6px 0; border-color: #1abc9c;
} .share {
background-color: #eff0f2; position: relative; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
} .share:before {
content: ""; border-style: solid; border-width: 0 9px 9px 9px; border-color: transparent transparent #eff0f2 transparent; height: 0; position: absolute; left: 23px; top: -9px; width: 0; -webkit-transform: rotate(360deg);
} .share ul {
list-style-type: none; margin: 0; padding: 15px;
} .share li {
padding-top: 11px; *zoom: 1;
} .share li:before, .share li:after {
display: table; content: "";
} .share li:after {
clear: both;
} .share li:first-child {
padding-top: 0;
} .share .toggle {
float: right; margin: 0;
} .share .btn {
-webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
} .share-label {
float: left; font-size: 15px; padding-top: 5px; width: 50%;
} .palette {
color: #ffffff; margin: 0; padding: 15px; text-transform: uppercase;
} .palette dt {
display: block; font-weight: 500; opacity: 0.8; filter: alpha(opacity=80);
} .palette dd {
font-weight: 200; margin-left: 0; opacity: 0.8; filter: alpha(opacity=80);
} .palette-turquoise {
background-color: #1abc9c;
} .palette-green-sea {
background-color: #16a085;
} .palette-emerald {
background-color: #2ecc71;
} .palette-nephritis {
background-color: #27ae60;
} .palette-peter-river {
background-color: #3498db;
} .palette-belize-hole {
background-color: #2980b9;
} .palette-amethyst {
background-color: #9b59b6;
} .palette-wisteria {
background-color: #8e44ad;
} .palette-wet-asphalt {
background-color: #34495e;
} .palette-midnight-blue {
background-color: #2c3e50;
} .palette-sun-flower {
background-color: #f1c40f;
} .palette-orange {
background-color: #f39c12;
} .palette-carrot {
background-color: #e67e22;
} .palette-pumpkin {
background-color: #d35400;
} .palette-alizarin {
background-color: #e74c3c;
} .palette-pomegranate {
background-color: #c0392b;
} .palette-clouds {
background-color: #ecf0f1;
} .palette-silver {
background-color: #bdc3c7;
} .palette-concrete {
background-color: #95a5a6;
} .palette-asbestos {
background-color: #7f8c8d;
} .palette-clouds {
color: #bdc3c7;
} .palette-paragraph {
color: #7f8c8d; font-size: 12px; line-height: 17px;
} .palette-paragraph span {
color: #bdc3c7;
} .palette-headline {
color: #7f8c8d; font-weight: 700; margin-top: -5px;
} .tile {
background-color: #eff0f2; border-radius: 6px; padding: 14px; position: relative; text-align: center;
} .tile.tile-hot:before {
background: url(../images/tile/ribbon.png) 0 0 no-repeat; background-size: 82px 82px; content: ; height: 82px; position: absolute; right: -4px; top: -4px; width: 82px;
} .tile p {
font-size: 15px; margin-bottom: 33px;
} .tile-image {
height: 100px; margin: 31px 0 27px; vertical-align: bottom;
} .tile-image.big-illustration {
height: 111px; margin-top: 20px; width: 112px;
} .tile-title {
font-size: 20px; margin: 0;
} @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) {
.tile.tile-hot:before { background-image: url(../images/tile/ribbon-2x.png); }
} .todo {
background-color: #2c3e50; color: #798795; margin-bottom: 20px; -webkit-border-radius: 8px 8px 6px 6px; -moz-border-radius: 8px 8px 6px 6px; border-radius: 8px 8px 6px 6px;
} .todo ul {
margin: 0; list-style-type: none;
} .todo li {
background: #34495e url(../images/todo/todo.png) 92% center no-repeat; background-size: 20px 20px; cursor: pointer; margin-top: 2px; padding: 18px 42px 17px 25px; position: relative; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; -webkit-backface-visibility: hidden;
} .todo li:first-child {
margin-top: 0;
} .todo li:last-child {
-webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; padding-bottom: 18px;
} .todo li.todo-done {
background: transparent url(../images/todo/done.png) 92% center no-repeat; background-size: 20px 20px; color: #1abc9c;
} .todo li.todo-done .todo-name {
color: #1abc9c;
} .todo-search {
position: relative; background: #1abc9c; background-size: 16px 16px; border-radius: 6px 6px 0 0; color: #34495e; padding: 19px 25px 20px;
} .todo-search:before {
position: absolute; font-family: 'Flat-UI-Icons'; content: "\e01c"; font-size: 16px; display: inline-block; top: 50%; left: 92%; margin: -0.5em 0 0 -1em;
} input.todo-search-field {
background: none; border: none; color: #34495e; font-size: 19px; font-weight: 700; margin: 0; line-height: 23px; padding: 5px 0; text-indent: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
} input.todo-search-field:-moz-placeholder {
color: #34495e;
} input.todo-search-field::-webkit-input-placeholder {
color: #34495e;
} input.todo-search-field.placeholder {
color: #34495e;
} .todo-icon {
float: left; font-size: 24px; padding: 11px 22px 0 0;
} .todo-content {
padding-top: 1px; overflow: hidden;
} .todo-name {
color: #ffffff; font-size: 17px; margin: 1px 0 3px;
} @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) {
.todo li { background-image: url(../images/todo/todo-2x.png); } .todo li.todo-done { background-image: url(../images/todo/done-2x.png); }
} footer {
background-color: #edeff1; color: #bac1c8; font-size: 15px; padding: 0;
} footer a {
color: #9aa4af; font-weight: 700;
} footer p {
font-size: 15px; line-height: 20px;
} .footer-title {
margin: 0 0 22px; padding-top: 21px;
} .footer-brand {
display: block; margin-bottom: 26px; width: 220px;
} .footer-brand img {
width: 216px;
} .footer-banner {
background-color: #1abc9c; color: #d1f2eb; margin-left: 42px; min-height: 286px; padding: 0 30px 30px;
} .footer-banner .footer-title {
color: #ffffff;
} .footer-banner a {
color: #b7f5e9; text-decoration: underline;
} .footer-banner a:hover {
text-decoration: none;
} .footer-banner ul {
list-style-type: none; margin: 0 0 26px;
} .footer-banner ul li {
border-top: 1px solid #1bc5a3; line-height: 19px; padding: 6px 0;
} .footer-banner ul li:first-child {
border-top: none; padding-top: 1px;
} .video-js {
background-color: transparent; margin-top: -95px; position: relative; padding: 0; font-size: 10px; vertical-align: middle; -webkit-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden;
} .video-js .vjs-tech {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
} .video-js:-moz-full-screen {
position: absolute;
} body.vjs-full-window {
padding: 0; margin: 0; height: 100%; overflow-y: auto;
} .video-js.vjs-fullscreen {
position: fixed; overflow: hidden; z-index: 1000; left: 0; top: 0; bottom: 0; right: 0; width: 100% !important; height: 100% !important; _position: absolute;
} .video-js:-webkit-full-screen {
width: 100% !important; height: 100% !important;
} .vjs-poster {
margin: 0 auto; padding: 0; cursor: pointer; position: relative; width: 100%; max-height: 100%; -webkit-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
} .video-js .vjs-text-track-display {
text-align: center; position: absolute; bottom: 4em; left: 1em; right: 1em; font-family: "Lato", sans-serif;
} .video-js .vjs-text-track {
display: none; color: #ffffff; font-size: 1.4em; text-align: center; margin-bottom: .1em; background: #000; background: rgba(0, 0, 0, 0.5);
} .video-js .vjs-subtitles {
color: #fff;
} .video-js .vjs-captions {
color: #fc6;
} .vjs-tt-cue {
display: block;
} .vjs-fade-in {
visibility: visible !important; opacity: 1 !important; -webkit-transition: visibility 0s linear 0s, opacity .3s linear; -moz-transition: visibility 0s linear 0s, opacity .3s linear; -o-transition: visibility 0s linear 0s, opacity .3s linear; transition: visibility 0s linear 0s, opacity .3s linear; -webkit-backface-visibility: hidden;
} .vjs-fade-out {
visibility: hidden !important; opacity: 0 !important; -webkit-transition: visibility 0s linear 1.5s, opacity 1.5s linear; -moz-transition: visibility 0s linear 1.5s, opacity 1.5s linear; -o-transition: visibility 0s linear 1.5s, opacity 1.5s linear; transition: visibility 0s linear 1.5s, opacity 1.5s linear; -webkit-backface-visibility: hidden;
} .vjs-controls {
position: absolute; bottom: -47px; left: 0; right: 0; margin: 0; padding: 0; height: 47px; color: #ffffff; background: #273747; -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
} .vjs-controls.vjs-fade-out {
visibility: visible !important; opacity: 1 !important;
} .vjs-control {
background-position: center center; background-repeat: no-repeat; position: relative; float: left; text-align: center; margin: 0; padding: 0; height: 18px; width: 18px;
} .vjs-control:focus {
outline: 0;
} .vjs-control div {
background-position: center center; background-repeat: no-repeat;
} .vjs-control-text {
border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
} .vjs-play-control {
cursor: pointer !important; height: 47px; left: 0; position: absolute; top: 0; width: 58px;
} .vjs-play-control div {
position: relative; height: 47px;
} .vjs-play-control div:before, .vjs-play-control div:after {
position: absolute; font-family: "Flat-UI-Icons"; color: #1abc9c; font-size: 16px; top: 50%; left: 50%; margin: -0.55em 0 0 -0.5em; -webkit-transition: color .25s, opacity .25s; -moz-transition: color .25s, opacity .25s; -o-transition: color .25s, opacity .25s; transition: color .25s, opacity .25s; -webkit-backface-visibility: hidden;
} .vjs-play-control div:after {
content: "\e03b";
} .vjs-play-control div:before {
content: "\e03c";
} .vjs-paused .vjs-play-control:hover div:before {
color: #16a085;
} .vjs-paused .vjs-play-control div:after {
opacity: 0; filter: alpha(opacity=0);
} .vjs-paused .vjs-play-control div:before {
opacity: 1; filter: alpha(opacity=100);
} .vjs-playing .vjs-play-control:hover div:after {
color: #16a085;
} .vjs-playing .vjs-play-control div:after {
opacity: 1; filter: alpha(opacity=100);
} .vjs-playing .vjs-play-control div:before {
opacity: 0; filter: alpha(opacity=0);
} .vjs-rewind-control {
width: 5em; cursor: pointer !important;
} .vjs-rewind-control div {
width: 19px; height: 16px; background: none transparent; margin: .5em auto 0;
} .vjs-mute-control {
background: url(../images/video/volume-full.png) center -48px no-repeat; background-size: 16px 64px; cursor: pointer !important; position: absolute; right: 51px; top: 14px;
} .vjs-mute-control:hover div, .vjs-mute-control:focus div {
opacity: 0;
} .vjs-mute-control.vjs-vol-0, .vjs-mute-control.vjs-vol-0 div {
background-image: url(../images/video/volume-off.png);
} .vjs-mute-control div {
background: #273747 url(../images/video/volume-full.png) no-repeat center 2px; background-size: 16px 64px; height: 18px; -webkit-transition: opacity 0.25s; -moz-transition: opacity 0.25s; -o-transition: opacity 0.25s; transition: opacity 0.25s; -webkit-backface-visibility: hidden;
} .vjs-volume-control, .vjs-volume-level, .vjs-volume-handle, .vjs-volume-bar {
display: none;
} .vjs-progress-control {
position: absolute; left: 60px; right: 180px; height: 12px; width: auto; top: 18px; background: #425669; -webkit-border-radius: 32px; -moz-border-radius: 32px; border-radius: 32px;
} .vjs-progress-holder {
position: relative; cursor: pointer !important; padding: 0; margin: 0; height: 12px;
} .vjs-play-progress, .vjs-load-progress {
position: absolute; display: block; height: 12px; margin: 0; padding: 0; left: 0; top: 0; -webkit-border-radius: 32px; -moz-border-radius: 32px; border-radius: 32px;
} .vjs-play-progress {
background: #1abc9c; left: -1px;
} .vjs-load-progress {
background: #d6dbdf; -webkit-border-radius: 32px 0 0 32px; -moz-border-radius: 32px 0 0 32px; border-radius: 32px 0 0 32px;
} .vjs-load-progress[style*='100%'], .vjs-load-progress[style*='99%'] {
-webkit-border-radius: 32px; -moz-border-radius: 32px; border-radius: 32px;
} .vjs-seek-handle {
background-color: #16a085; position: absolute; width: 18px; height: 18px; margin: -3px 0 0 1px; left: 0; top: 0; -webkit-transition: background-color 0.25s; -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s; transition: background-color 0.25s; -webkit-backface-visibility: hidden; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
} .vjs-seek-handle[style*='95.'] {
margin-left: 3px;
} .vjs-seek-handle[style='left: 0%;'] {
margin-left: -2px;
} .vjs-seek-handle:hover, .vjs-seek-handle:focus {
background-color: #148d75;
} .vjs-seek-handle:active {
background-color: #117a65;
} .vjs-time-controls {
position: absolute; height: 20px; width: 50px; top: 16px; font: 300 13px "Lato", sans-serif;
} .vjs-current-time {
right: 128px; text-align: right;
} .vjs-duration {
color: #5d6d7e; right: 69px; text-align: left;
} .vjs-remaining-time {
display: none;
} .vjs-time-divider {
color: #5d6d7e; font-size: 14px; position: absolute; right: 121px; top: 15px;
} .vjs-secondary-controls {
float: right;
} .vjs-fullscreen-control {
background-image: url(../images/video/fullscreen.png); background-position: center -47px; background-size: 15px 64px; cursor: pointer !important; position: absolute; right: 17px; top: 13px;
} .vjs-fullscreen-control:hover div, .vjs-fullscreen-control:focus div {
opacity: 0;
} .vjs-fullscreen-control div {
height: 18px; background: url(../images/video/fullscreen.png) no-repeat center 2px; background-size: 15px 64px; -webkit-transition: opacity 0.25s; -moz-transition: opacity 0.25s; -o-transition: opacity 0.25s; transition: opacity 0.25s; -webkit-backface-visibility: hidden;
} .vjs-menu-button {
display: none !important;
} @-webkit-keyframes sharp {
0% { background: #e74c3c; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } 50% { background: #ebedee; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } 100% { background: #e74c3c; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
} @-moz-keyframes sharp {
0% { background: #e74c3c; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } 50% { background: #ebedee; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } 100% { background: #e74c3c; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
} @-o-keyframes sharp {
0% { background: #e74c3c; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } 50% { background: #ebedee; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } 100% { background: #e74c3c; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
} @keyframes sharp {
0% { background: #e74c3c; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } 50% { background: #ebedee; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } 100% { background: #e74c3c; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
} .vjs-loading-spinner {
background: #ebedee; display: none; height: 16px; left: 50%; margin: -8px 0 0 -8px; position: absolute; top: 50%; width: 16px; -webkit-animation: sharp 2s ease infinite; -moz-animation: sharp 2s ease infinite; -o-animation: sharp 2s ease infinite; animation: sharp 2s ease infinite; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
} .login {
background: url(../images/login/imac.png) 0 0 no-repeat; background-size: 940px 778px; color: #ffffff; margin-bottom: 77px; padding: 38px 38px 267px; position: relative;
} .login-screen {
background-color: #1abc9c; min-height: 317px; padding: 123px 199px 33px 306px;
} .login-icon {
left: 200px; position: absolute; top: 160px; width: 96px;
} .login-icon > img {
display: block; margin-bottom: 6px; width: 100%;
} .login-icon > h4 {
font-size: 17px; font-weight: 200; line-height: 34px; opacity: 0.95; filter: alpha(opacity=95);
} .login-icon > h4 small {
color: inherit; display: block; font-size: inherit; font-weight: 700;
} .login-form {
background-color: #edeff1; padding: 24px 23px 20px; position: relative; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
} .login-form:before {
content: ; border-style: solid; border-width: 12px 12px 12px 0; border-color: transparent #edeff1 transparent transparent; height: 0; position: absolute; left: -12px; top: 35px; width: 0; -webkit-transform: rotate(360deg);
} .login-form .control-group {
margin-bottom: 6px; position: relative;
} .login-form .login-field {
border-color: transparent; font-size: 17px; padding-bottom: 11px; padding-top: 11px; text-indent: 3px; width: 299px; margin-bottom: 10px !important;
} .login-form .login-field:focus + .login-field-icon {
color: #1abc9c;
} .login-form .login-field-icon {
color: #bfc9ca; font-size: 16px; position: absolute; right: 13px; top: 14px; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; -webkit-backface-visibility: hidden;
} .login-link {
color: #bfc9ca; display: block; font-size: 13px; margin-top: 15px; text-align: center;
} @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) {
.login { background-image: url(../images/login/imac-2x.png); }
} .last-col {
overflow: hidden;
} .ptn, .pvn, .pan {
padding-top: 0;
} .ptx, .pvx, .pax {
padding-top: 3px;
} .pts, .pvs, .pas {
padding-top: 5px;
} .ptm, .pvm, .pam {
padding-top: 10px;
} .ptl, .pvl, .pal {
padding-top: 20px;
} .prn, .phn, .pan {
padding-right: 0;
} .prx, .phx, .pax {
padding-right: 3px;
} .prs, .phs, .pas {
padding-right: 5px;
} .prm, .phm, .pam {
padding-right: 10px;
} .prl, .phl, .pal {
padding-right: 20px;
} .pbn, .pvn, .pan {
padding-bottom: 0;
} .pbx, .pvx, .pax {
padding-bottom: 3px;
} .pbs, .pvs, .pas {
padding-bottom: 5px;
} .pbm, .pvm, .pam {
padding-bottom: 10px;
} .pbl, .pvl, .pal {
padding-bottom: 20px;
} .pln, .phn, .pan {
padding-left: 0;
} .plx, .phx, .pax {
padding-left: 3px;
} .pls, .phs, .pas {
padding-left: 5px;
} .plm, .phm, .pam {
padding-left: 10px;
} .pll, .phl, .pal {
padding-left: 20px;
} .mtn, .mvn, .man {
margin-top: 0px;
} .mtx, .mvx, .max {
margin-top: 3px;
} .mts, .mvs, .mas {
margin-top: 5px;
} .mtm, .mvm, .mam {
margin-top: 10px;
} .mtl, .mvl, .mal {
margin-top: 20px;
} .mrn, .mhn, .man {
margin-right: 0px;
} .mrx, .mhx, .max {
margin-right: 3px;
} .mrs, .mhs, .mas {
margin-right: 5px;
} .mrm, .mhm, .mam {
margin-right: 10px;
} .mrl, .mhl, .mal {
margin-right: 20px;
} .mbn, .mvn, .man {
margin-bottom: 0px;
} .mbx, .mvx, .max {
margin-bottom: 3px;
} .mbs, .mvs, .mas {
margin-bottom: 5px;
} .mbm, .mvm, .mam {
margin-bottom: 10px;
} .mbl, .mvl, .mal {
margin-bottom: 20px;
} .mln, .mhn, .man {
margin-left: 0px;
} .mlx, .mhx, .max {
margin-left: 3px;
} .mls, .mhs, .mas {
margin-left: 5px;
} .mlm, .mhm, .mam {
margin-left: 10px;
} .mll, .mhl, .mal {
margin-left: 20px;
}