paulwalko.github.io/_site/assets/css/alternative.css

2363 lines
46 KiB
CSS

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
hr,
dl,
dd,
ol,
ul,
figure {
margin: 0;
padding: 0;
}
@font-face {
font-family: gidole;
src: url(/assets/font/gidole.otf);
}
body {
font: 400 16px/1.5 gidole;
color: #fff;
background-color: #222222;
-webkit-text-size-adjust: 100%;
-webkit-font-feature-settings: "kern" 1;
-moz-font-feature-settings: "kern" 1;
-o-font-feature-settings: "kern" 1;
font-feature-settings: "kern" 1;
font-kerning: normal;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
ul,
ol,
dl,
figure,
.highlight {
margin-bottom: 15px;
}
img {
max-width: 100%;
vertical-align: middle;
}
figure>img {
display: block;
}
figcaption {
font-size: 14px;
}
ul,
ol {
margin-left: 30px;
}
li>ul,
li>ol {
margin-bottom: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 400;
}
a {
color: #0ce3ac;
text-decoration: none;
}
a:visited {}
blockquote {
color: #828282;
border-left: 4px solid #e8e8e8;
padding-left: 15px;
font-size: 18px;
letter-spacing: -1px;
font-style: italic;
}
blockquote>:last-child {
margin-bottom: 0;
}
pre,
code {
font-size: 15px;
background-color: #222;
}
code {
padding: 1px 5px;
}
pre {
padding: 8px 12px;
overflow-x: auto;
}
pre>code {
border: 0;
padding-right: 0;
padding-left: 0;
}
.wrapper {
max-width: -webkit-calc(800px - (30px * 2));
max-width: calc(1020px - (30px * 2));
margin-right: auto;
margin-left: auto;
padding-right: 30px;
padding-left: 30px;
position: relative;
}
@media screen and (max-width: 800px) {
.wrapper {
max-width: -webkit-calc(800px - (30px));
max-width: calc(800px - (30px));
padding-right: 15px;
padding-left: 15px;
}
}
.footer-col-wrapper:after {
content: "";
display: table;
clear: both;
}
.icon>svg {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
}
.post-header .post-title a {
font-size: 20px;
}
.post-excerpt p {
font-size: 14px;
}
.post-meta {
font-size: 10px;
color: #828282;
}
.post {
position: relative;
margin: 1rem auto;
padding-bottom: 0.5em;
/* border-bottom: #E8E8E8 1px solid; */
word-wrap: break-word;
}
.pagination {
margin-top: 20px;
padding-bottom: 40px;
}
.tags-date {
float: right;
margin-top: -35px;
font-size: 12px;
color: #828282;
}
.tags-pagee {
border-bottom: 1px solid #e8e8e8;
height: auto;
display: inline-block;
}
@media screen and (min-width: 47.5em) {
.tags-pagee {
border-bottom: 1px solid #e8e8e8;
padding: 0 0 15px;
}
.tags-date {
float: right;
margin-top: -40px;
font-size: 12px;
color: #828282;
}
.post {
position: relative;
margin: 1.9rem auto;
padding-bottom: 0;
/* border-bottom: #636363 1px solid; */
word-wrap: break-word;
background: #3E3E3E;
/* padding: 20px; */
}
.home {
margin-right: 18.5em;
border-right: 1px solid #e8e8e8;
padding-right: 30px;
}
.widgets {
position: absolute;
top: 0;
right: 0;
width: 18.75em;
padding-botom: 0;
}
.post-header .post-title a {
font-size: 1em;
}
.post-excerpt p {
font-size: 16px;
}
.post-meta {
font-size: 12px;
color: #fff;
}
.pagination {
padding-bottom: 40px;
}
}
.home {
margin-bottom: .5em;
}
.widgets {
padding-bottom: 50px;
}
ol,
ul {
list-style: none;
margin-left: 0;
}
.post:after {
display: block;
content: "";
width: 7px;
height: 7px;
border: #00bc8c 1px solid;
position: absolute;
bottom: 43px;
left: 50%;
margin-left: -5px;
background: #138668;
border-radius: 100%;
box-shadow: #00bc8c 0 0 0 5px;
}
.tags li {
position: relative;
float: left;
margin: 0 35px 9px 0px;
background: #e74c3c;
border-style: solid;
border-width: 1px 0 1px 1px;
border-radius: 1px 0 0 3px;
border-color: #e74c3c;
}
.tags a {
height: 26px;
line-height: 23px;
padding: 0 9px 0 8px;
font-size: 12px;
color: #fff;
text-decoration: none;
border-width: 1px 0 1px 1px;
}
.tags span {
position: absolute;
top: 1px;
left: 100%;
z-index: 2;
overflow: hidden;
max-width: 0;
height: 24px;
line-height: 21px;
padding: 0 0 0 2px;
color: white;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
background: #100F0F;
border: 1px solid;
border-color: #100F0F;
border-radius: 0 2px 2px 0;
opacity: .95;
padding: 0 7px 0 6px;
max-width: 40px;
}
.tags a,
.tags span {
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.tags li:after {
content: '';
z-index: 2;
position: absolute;
top: 10px;
right: -2px;
width: 5px;
height: 6px;
opacity: .95;
background: #000;
border-radius: 3px 0 0 3px;
-webkit-box-shadow: inset 1px 0 #000;
box-shadow: inset 1px 0 #000;
}
.tags:before,
.tags:after {
content: '';
display: table;
}
.post-tags {
display: inline-block;
text-transform: uppercase;
white-space: nowrap;
}
.post-tags a {
color: #fff;
}
.post-date {
display: inline-block;
margin-left: 8px;
padding-left: 12px;
/* border-left:#d5dbde 1px solid; */
text-transform: uppercase;
white-space: nowrap;
}
.pagination span,
.pagination a {
font-size: 16px;
background: #00bc8c;
padding: 5px 15px;
/* border-radius: 3px; */
color: #969696;
}
.pagination span.previous,
.pagination a.previous {
float: left;
}
.pagination span.next,
.pagination a.next {
float: right;
}
.pagination a {
color: #fff;
border-color: #fff;
}
.site-header {
height: 55px;
position: relative;
background: #375a7f;
position: fixed;
margin-bottom: 54px;
top: 0;
z-index: 2000;
width: 100%;
}
.site-title {
font-size: 26px;
font-weight: 300;
line-height: 56px;
letter-spacing: -1px;
margin-bottom: 0;
float: left;
}
.site-title,
.site-title:visited {
color: #fff;
}
.site-nav {
float: right;
line-height: 55px;
}
.site-nav a.page-link {
position: relative;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
z-index: 1099;
padding: 9px;
border-radius: 4px;
}
.site-nav a.page-link:hover {
/* width: 100%; */
/* transition: 0.5s linear; */
-webkit-transition: all ease-in 0.1s;
-moz-transition: all ease-in 0.1s;
transition: all ease-in 0.1s;
background: #1F3F61;
}
.site-nav a.page-link:hover:before {
height: 20px;
background-color: #000;
z-index: 2;
}
.site-nav .menu-icon {
display: none;
}
.site-nav .page-link {
color: #fff;
line-height: 1.5;
}
.site-nav .page-link:not(:last-child) {
margin-right: 20px;
}
.trigger .active {
background: #1F3F61;
}
@media screen and (max-width: 600px) {
.site-nav {
position: absolute;
top: 9px;
right: 15px;
background-color: #fdfdfd;
border: 1px solid #e8e8e8;
border-radius: 5px;
text-align: right;
}
.site-nav a.page-link:hover:after {
border-bottom: 2px solid transparent;
}
.site-nav .menu-icon {
display: block;
float: right;
width: 36px;
height: 26px;
line-height: 0;
padding-top: 10px;
text-align: center;
}
.site-nav .menu-icon>svg {
width: 18px;
height: 15px;
}
.site-nav .trigger {
clear: both;
display: none;
padding-bottom: 5px;
z-index: 999;
position: relative;
background-color: #fdfdfd;
}
.site-nav .page-link {
display: block;
padding: 5px 10px;
margin-left: 20px;
}
.site-nav .page-link:not(:last-child) {
margin-right: 0;
}
}
.site-footer {
/* border-top:1px solid #e8e8e8; */
padding: 30px 0;
}
.footer-heading {
font-size: 18px;
margin-bottom: 15px;
}
.contact-list,
.social-media-list {
list-style: none;
margin-left: 0;
}
.footer-col-wrapper {
font-size: 15px;
color: #828282;
margin-left: -15px;
}
.footer-col {
float: left;
margin-bottom: 15px;
padding-left: 15px;
}
.footer-col-1 {
width: -webkit-calc(40% - (30px/ 2));
width: calc(40% - (30px/ 2));
}
.footer-col-2 {
width: -webkit-calc(30% - (30px/ 2));
width: calc(30% - (30px/ 2));
}
.footer-col-3 {
width: -webkit-calc(45% - (30px/ 2));
width: calc(30% - (30px/ 2));
}
@media screen and (max-width: 800px) {
.footer-col-1,
.footer-col-2 {
width: -webkit-calc(50% - (30px/ 2));
width: calc(50% - (30px/ 2));
}
.footer-col-3 {
width: -webkit-calc(100% - (30px/ 2));
width: calc(100% - (30px/ 2));
}
}
@media screen and (max-width: 600px) {
.footer-col {
float: none;
width: -webkit-calc(100% - (30px/ 2));
width: calc(100% - (30px/ 2));
}
}
.page-content {
padding-bottom: 30px;
background: #222222;
margin-top: 50px;
}
.page-heading {
padding: 9px 0 0px 16px;
/* border-bottom: 1px solid transparent; */
/* border-top-right-radius: 3px; */
/* border-top-left-radius: 3px; */
color: #ffffff;
background-color: #375a7f;
/* border-color: #375a7f; */
/* margin-top: 20px; */
height: 31px;
font-size: 16px;
}
.post-list {
margin-left: 0;
list-style: none;
}
.post-list>li {
margin-bottom: 30px;
}
.post-link {
display: block;
font-size: 24px;
}
.post-header {
/* margin-bottom:20px; */
/* background-color: #375a7f; */
}
.inpost-header {
background: #00bc8c;
padding: 15px 20px 20px 20px;
height: 30px;
}
.inpost-title {
font-size: 25px;
letter-spacing: -1px;
float: left;
}
.post-title {
font-size: 25px;
letter-spacing: -1px;
line-height: 1;
color: #fff;
}
@media screen and (max-width: 800px) {
.post-title {
font-size: 24px;
}
}
.post-content {
margin-bottom: 30px;
padding: 20px;
}
.post-content h2 {
font-size: 32px;
}
@media screen and (max-width: 800px) {
.post-content h2 {
font-size: 28px;
}
}
.post-content h3 {
font-size: 26px;
}
@media screen and (max-width: 800px) {
.post-content h3 {
font-size: 22px;
}
}
.post-content h4 {
font-size: 20px;
}
@media screen and (max-width: 800px) {
.post-content h4 {
font-size: 18px;
}
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.pacel {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
height: 0;
width: 0;
position: relative;
margin-left: 65px;
z-index: 0;
}
.pace-inactive {
display: none;
}
.pacel .pace-progress {
z-index: 2000;
right: 100%;
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 30px;
}
.pacel .pace-progress-inner {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #29d, 0 0 5px #29d;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-moz-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
-o-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
.pacel .pace-activity {
display: block;
position: relative;
z-index: 2000;
top: 20px;
left: 37%;
width: 14px;
height: 14px;
border: solid 2px transparent;
border-top-color: #fff;
/* border-left-color: rgba(255, 255, 255, 0.14); */
border-radius: 10px;
-webkit-animation: pace-spinner 400ms linear infinite;
-moz-animation: pace-spinner 400ms linear infinite;
-ms-animation: pace-spinner 400ms linear infinite;
-o-animation: pace-spinner 400ms linear infinite;
animation: pace-spinner 400ms linear infinite;
margin-left: 85px;
}
@-webkit-keyframes pace-spinner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes pace-spinner {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes pace-spinner {
0% {
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-ms-keyframes pace-spinner {
0% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes pace-spinner {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
.arrowLeft a {
position: fixed;
z-index: 100;
top: 45%;
margin-left: -3.2em;
padding: 15px 15px;
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
}
.arrowLeft a:hover {
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
color: #D0D0D0;
}
.arrowRight a {
position: fixed;
z-index: 100;
top: 45%;
padding: 15px 15px;
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
float: right;
margin-left: 1em;
}
.arrowRight a:hover {
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
color: #D0D0D0;
}
.arrowNav a {
background: transparent;
color: #E8e8e8;
text-decoration: none;
font-size: 30px;
}
.row {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 62.5em;
*zoom: 1;
}
.row:before,
.row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}
.row.collapse .column,
.row.collapse .columns {
position: relative;
padding-left: 0;
padding-right: 0;
float: left;
}
.row .row {
width: auto;
margin-left: -0.9375em;
margin-right: -0.9375em;
margin-top: 0;
margin-bottom: 0;
max-width: none;
*zoom: 1;
}
.row .row:before,
.row .row:after {
content: " ";
display: table;
}
.row .row:after {
clear: both;
}
.row .row.collapse {
width: auto;
margin: 0;
max-width: none;
*zoom: 1;
}
.row .row.collapse:before,
.row .row.collapse:after {
content: " ";
display: table;
}
.row .row.collapse:after {
clear: both;
}
.column,
.columns {
position: relative;
width: 100%;
float: left;
}
@media only screen {
.column,
.columns {
position: relative;
float: left;
}
.small-1 {
position: relative;
width: 8.33333%;
}
.small-2 {
position: relative;
width: 16.66667%;
}
.small-3 {
position: relative;
width: 25%;
}
.small-4 {
position: relative;
width: 33.33333%;
}
.small-5 {
position: relative;
width: 41.66667%;
}
.small-6 {
position: relative;
width: 50%;
}
.small-7 {
position: relative;
width: 58.33333%;
}
.small-8 {
position: relative;
width: 66.66667%;
}
.small-9 {
position: relative;
width: 75%;
}
.small-10 {
position: relative;
width: 83.33333%;
}
.small-11 {
position: relative;
width: 91.66667%;
}
.small-12 {
position: relative;
width: 100%;
}
.small-offset-0 {
position: relative;
margin-left: 0%;
}
.small-offset-1 {
position: relative;
margin-left: 8.33333%;
}
.small-offset-2 {
position: relative;
margin-left: 16.66667%;
}
.small-offset-3 {
position: relative;
margin-left: 25%;
}
.small-offset-4 {
position: relative;
margin-left: 33.33333%;
}
.small-offset-5 {
position: relative;
margin-left: 41.66667%;
}
.small-offset-6 {
position: relative;
margin-left: 50%;
}
.small-offset-7 {
position: relative;
margin-left: 58.33333%;
}
.small-offset-8 {
position: relative;
margin-left: 66.66667%;
}
.small-offset-9 {
position: relative;
margin-left: 75%;
}
.small-offset-10 {
position: relative;
margin-left: 83.33333%;
}
[class*="column"]+[class*="column"]:last-child {
float: right;
}
[class*="column"]+[class*="column"].end {
float: left;
}
.column.small-centered,
.columns.small-centered {
position: relative;
margin-left: auto;
margin-right: auto;
float: none!important;
}
.samping {
border-right: 0;
padding-right: 0;
}
}
@media only screen and (min-width: 768px) {
.samping {
/* border-right:1px solid #E8e8e8; */
padding-right: 35px;
padding-bottom: 20px;
}
.large-1 {
position: relative;
width: 8.33333%;
}
.large-2 {
position: relative;
width: 16.66667%;
}
.large-3 {
position: relative;
width: 25%;
}
.large-4 {
position: relative;
width: 33.33333%;
}
.large-5 {
position: relative;
width: 41.66667%;
}
.large-6 {
position: relative;
width: 50%;
}
.large-7 {
position: relative;
width: 58.33333%;
min-height: 40em;
}
.large-8 {
position: relative;
width: 66.66667%;
}
.large-9 {
position: relative;
width: 75%;
}
.large-10 {
position: relative;
width: 83.33333%;
}
.large-11 {
position: relative;
width: 91.66667%;
}
.large-12 {
position: relative;
width: 100%;
}
.row .large-offset-0 {
position: relative;
margin-left: 0%;
}
.row .large-offset-1 {
position: relative;
margin-left: 8.33333%;
}
.row .large-offset-2 {
position: relative;
margin-left: 16.66667%;
}
.row .large-offset-3 {
position: relative;
margin-left: 25%;
}
.row .large-offset-4 {
position: relative;
margin-left: 33.33333%;
}
.row .large-offset-5 {
position: relative;
margin-left: 41.66667%;
}
.row .large-offset-6 {
position: relative;
margin-left: 50%;
}
.row .large-offset-7 {
position: relative;
margin-left: 58.33333%;
}
.row .large-offset-8 {
position: relative;
margin-left: 66.66667%;
}
.row .large-offset-9 {
position: relative;
margin-left: 75%;
}
.row .large-offset-10 {
position: relative;
margin-left: 83.33333%;
}
.row .large-offset-11 {
position: relative;
margin-left: 91.66667%;
}
.push-1 {
position: relative;
left: 8.33333%;
right: auto;
}
.pull-1 {
position: relative;
right: 8.33333%;
left: auto;
}
.push-2 {
position: relative;
left: 16.66667%;
right: auto;
}
.pull-2 {
position: relative;
right: 16.66667%;
left: auto;
}
.push-3 {
position: relative;
left: 25%;
right: auto;
}
.pull-3 {
position: relative;
right: 25%;
left: auto;
}
.push-4 {
position: relative;
left: 33.33333%;
right: auto;
}
.pull-4 {
position: relative;
right: 33.33333%;
left: auto;
}
.push-5 {
position: relative;
left: 41.66667%;
right: auto;
}
.pull-5 {
position: relative;
right: 41.66667%;
left: auto;
}
.push-6 {
position: relative;
left: 50%;
right: auto;
}
.pull-6 {
position: relative;
right: 50%;
left: auto;
}
.push-7 {
position: relative;
left: 58.33333%;
right: auto;
}
.pull-7 {
position: relative;
right: 58.33333%;
left: auto;
}
.push-8 {
position: relative;
left: 66.66667%;
right: auto;
}
.pull-8 {
position: relative;
right: 66.66667%;
left: auto;
}
.push-9 {
position: relative;
left: 75%;
right: auto;
}
.pull-9 {
position: relative;
right: 75%;
left: auto;
}
.push-10 {
position: relative;
left: 83.33333%;
right: auto;
}
.pull-10 {
position: relative;
right: 83.33333%;
left: auto;
}
.push-11 {
position: relative;
left: 91.66667%;
right: auto;
}
.pull-11 {
position: relative;
right: 91.66667%;
left: auto;
}
.column.large-centered,
.columns.large-centered {
position: relative;
margin-left: auto;
margin-right: auto;
float: none!important;
}
.column.large-uncentered,
.columns.large-uncentered {
margin-left: 0;
margin-right: 0;
float: left!important;
}
.column.large-uncentered.opposite,
.columns.large-uncentered.opposite {
float: right!important;
}
}
.wf-container {
margin: 0 auto;
}
.wf-container:before,
.wf-container:after {
content: '';
display: table;
}
.wf-container:after {
clear: both;
}
.wf-box {
margin-right: 10px;
margin-bottom: 10px;
}
.wf-box img {
display: block;
width: 100%;
}
.wf-box .content {
border-top-width: 0;
}
.wf-column {
float: left;
}
@media screen and (min-width: 768px) {
.wf-container {
width: 750px;
}
}
@media screen and (min-width: 992px) {
.wf-container {
width: 970px;
}
}
@media screen and (min-width: 1200px) {
.wf-container {
width: 960px;
}
}
.widgetnya {
display: inline-table;
width: 100%;
background: #3E3E3E;
margin-top: 30px;
}
.easy-autocomplete {
position: relative;
min-width: 110px;
}
.easy-autocomplete-container ul:after {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #00bc8c transparent;
position: absolute;
top: -10px;
left: 10px;
}
.easy-autocomplete input {
border-color: #3E3E3E;
border-style: solid;
border-width: 1px;
color: #555;
float: none;
padding: 6px 12px;
min-width: 293px;
background-color: #3E3E3E;
color: #fff;
padding: 0 0px 12px 0px;
outline: none;
}
.easy-autocomplete input:hover,
.easy-autocomplete input:focus {
box-shadow: none;
}
.easy-autocomplete a {
display: block;
color: #fff;
}
.easy-autocomplete.eac-blue-light input:hover,
.easy-autocomplete.eac-blue-light input:focus {
border-color: #66afe9;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
}
.easy-autocomplete.eac-blue-light ul {
border-color: #66afe9;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
}
.easy-autocomplete.eac-blue-light ul li,
.easy-autocomplete.eac-blue-light ul .eac-category {
border-color: #66afe9;
}
.easy-autocomplete.eac-blue-light ul li.selected,
.easy-autocomplete.eac-blue-light ul .eac-category.selected {
background-color: #ecf5fc;
}
.easy-autocomplete.eac-green-light input:hover,
.easy-autocomplete.eac-green-light input:focus {
border-color: #41DB00;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(146, 237, 107, 0.6);
}
.easy-autocomplete.eac-green-light ul {
border-color: #41DB00;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(146, 237, 107, 0.6);
}
.easy-autocomplete.eac-green-light ul li,
.easy-autocomplete.eac-green-light ul .eac-category {
border-color: #41DB00;
}
.easy-autocomplete.eac-green-light ul li.selected,
.easy-autocomplete.eac-green-light ul .eac-category.selected {
background-color: #9eff75;
}
.easy-autocomplete.eac-red-light input:hover,
.easy-autocomplete.eac-red-light input:focus {
border-color: #ff5b5b;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 90, 90, 0.6);
}
.easy-autocomplete.eac-red-light ul {
border-color: #ff5b5b;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 90, 90, 0.6);
}
.easy-autocomplete.eac-red-light ul li,
.easy-autocomplete.eac-red-light ul .eac-category {
border-color: #ff5b5b;
}
.easy-autocomplete.eac-red-light ul li.selected,
.easy-autocomplete.eac-red-light ul .eac-category.selected {
background-color: #ff8e8e;
}
.easy-autocomplete.eac-yellow-light input:hover,
.easy-autocomplete.eac-yellow-light input:focus {
border-color: #ffdb00;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 231, 84, 0.6);
}
.easy-autocomplete.eac-yellow-light ul {
border-color: #ffdb00;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 231, 84, 0.6);
}
.easy-autocomplete.eac-yellow-light ul li,
.easy-autocomplete.eac-yellow-light ul .eac-category {
border-color: #ffdb00;
}
.easy-autocomplete.eac-yellow-light ul li.selected,
.easy-autocomplete.eac-yellow-light ul .eac-category.selected {
background-color: #ffe233;
}
.easy-autocomplete.eac-dark-light input:hover,
.easy-autocomplete.eac-dark-light input:focus {
border-color: #333;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(55, 55, 55, 0.6);
}
.easy-autocomplete.eac-dark-light ul {
border-color: #333;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(55, 55, 55, 0.6);
}
.easy-autocomplete.eac-dark-light ul li,
.easy-autocomplete.eac-dark-light ul .eac-category {
border-color: #333;
}
.easy-autocomplete.eac-dark-light ul li.selected,
.easy-autocomplete.eac-dark-light ul .eac-category.selected {
background-color: #4d4d4d;
color: #fff;
}
.easy-autocomplete.eac-dark {
color: #fff;
}
.easy-autocomplete.eac-dark input {
background-color: #404040;
border-radius: 4px;
box-shadow: 0;
color: #f6f6f6;
}
.easy-autocomplete.eac-dark input:hover,
.easy-autocomplete.eac-dark input:focus {
border-color: #333;
box-shadow: 0;
}
.easy-autocomplete.eac-dark ul {
border-color: #333;
}
.easy-autocomplete.eac-dark ul li,
.easy-autocomplete.eac-dark ul .eac-category {
background-color: #404040;
border-color: #333;
}
.easy-autocomplete.eac-dark ul li.selected,
.easy-autocomplete.eac-dark ul .eac-category.selected {
background-color: #737373;
color: #f6f6f6;
}
.easy-autocomplete.eac-dark-glass {
color: #fff;
}
.easy-autocomplete.eac-dark-glass input {
background-color: rgba(0, 0, 0, 0.8);
border-radius: 4px;
box-shadow: 0;
color: #f6f6f6;
}
.easy-autocomplete.eac-dark-glass input:hover,
.easy-autocomplete.eac-dark-glass input:focus {
border-color: rgba(0, 0, 0, 0.8);
box-shadow: 0;
}
.easy-autocomplete.eac-dark-glass ul {
border-color: rgba(0, 0, 0, 0.8);
}
.easy-autocomplete.eac-dark-glass ul li,
.easy-autocomplete.eac-dark-glass ul .eac-category {
background-color: rgba(0, 0, 0, 0.8);
border-color: rgba(0, 0, 0, 0.8);
}
.easy-autocomplete.eac-dark-glass ul li.selected,
.easy-autocomplete.eac-dark-glass ul .eac-category.selected {
background-color: rgba(64, 64, 64, 0.8);
color: #f6f6f6;
}
.easy-autocomplete.eac-dark-glass ul li:last-child,
.easy-autocomplete.eac-dark-glass ul .eac-category:last-child {
border-radius: 0 0 4px 4px;
}
.easy-autocomplete.eac-blue {
color: #fff;
}
.easy-autocomplete.eac-blue input {
background-color: #6d9ed1;
border-radius: 4px;
box-shadow: 0;
color: #f6f6f6;
}
.easy-autocomplete.eac-blue input::-webkit-input-placeholder {
color: #f6f6f6;
}
.easy-autocomplete.eac-blue input:-moz-placeholder {
color: #f6f6f6;
}
.easy-autocomplete.eac-blue input::-moz-placeholder {
color: #f6f6f6;
}
.easy-autocomplete.eac-blue input:-ms-input-placeholder {
color: #f6f6f6;
}
.easy-autocomplete.eac-blue input:hover,
.easy-autocomplete.eac-blue input:focus {
border-color: #5A91CB;
box-shadow: 0;
}
.easy-autocomplete.eac-blue ul {
border-color: #5A91CB;
}
.easy-autocomplete.eac-blue ul li,
.easy-autocomplete.eac-blue ul .eac-category {
background-color: #6d9ed1;
border-color: #5A91CB;
}
.easy-autocomplete.eac-blue ul li.selected,
.easy-autocomplete.eac-blue ul .eac-category.selected {
background-color: #94b8dd;
color: #f6f6f6;
}
.easy-autocomplete.eac-yellow {
color: #333;
}
.easy-autocomplete.eac-yellow input {
background-color: #ffdb7e;
border-color: #333;
border-radius: 4px;
box-shadow: 0;
color: #333;
}
.easy-autocomplete.eac-yellow input:hover,
.easy-autocomplete.eac-yellow input:focus {
border-color: #333;
box-shadow: 0;
}
.easy-autocomplete.eac-yellow ul {
border-color: #333;
}
.easy-autocomplete.eac-yellow ul li,
.easy-autocomplete.eac-yellow ul .eac-category {
background-color: #ffdb7e;
border-color: #333;
}
.easy-autocomplete.eac-yellow ul li.selected,
.easy-autocomplete.eac-yellow ul .eac-category.selected {
background-color: #ffe9b1;
color: #333;
}
.easy-autocomplete.eac-purple {
color: #333;
}
.easy-autocomplete.eac-purple input {
background-color: #d6d1e7;
border-color: #b8afd5;
box-shadow: 0;
color: #333;
}
.easy-autocomplete.eac-purple input:hover,
.easy-autocomplete.eac-purple input:focus {
border-color: #333;
box-shadow: 0;
}
.easy-autocomplete.eac-purple ul {
border-color: #333;
}
.easy-autocomplete.eac-purple ul li,
.easy-autocomplete.eac-purple ul .eac-category {
background-color: #d6d1e7;
border-color: #333;
}
.easy-autocomplete.eac-purple ul li.selected,
.easy-autocomplete.eac-purple ul .eac-category.selected {
background-color: #ebe8f3;
color: #333;
}
.easy-autocomplete.eac-bootstrap input {
border-color: #ccc;
border-radius: 4px;
border-style: solid;
border-width: 1px;
color: #555;
padding: 6px 12px;
}
.easy-autocomplete-container {
left: -15px;
position: absolute;
width: 100%;
z-index: 1099;
width: 319px;
}
.easy-autocomplete-container ul {
background: none repeat scroll 0 0 #00bc8c;
/* border-top: 1px dotted #ccc; */
display: none;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
position: relative;
top: 5px;
}
.easy-autocomplete-container ul li,
.easy-autocomplete-container ul .eac-category {
background: inherit;
border-image: none;
border-width: 0 1px;
display: block;
font-size: 14px;
font-weight: normal;
padding: 7px 12px;
}
.easy-autocomplete-container ul li:last-child {
border-radius: 0 0 2px 2px;
border-width: 0 1px 1px;
}
.easy-autocomplete-container ul li.selected {
background: none repeat scroll 0 0 #049C75;
cursor: pointer;
}
.easy-autocomplete-container ul li.selected div {
font-weight: normal;
}
.easy-autocomplete-container ul li div {
display: block;
font-weight: normal;
word-break: break-all;
}
.easy-autocomplete-container ul li b {
font-weight: bold;
}
.easy-autocomplete-container ul .eac-category {
font-color: #aaa;
font-style: italic;
}
.eac-description .eac-item span {
color: #aaa;
font-style: italic;
font-size: 0.9em;
}
.eac-icon-left .eac-item img {
margin-right: 4px;
max-height: 30px;
}
.eac-icon-right .eac-item {
margin-top: 8px;
min-height: 24px;
position: relative;
}
.eac-icon-right .eac-item img {
margin-left: 4px;
max-height: 30px;
position: absolute;
right: -4px;
top: -8px;
}
.typico {
font-size: 28px;
position: relative;
top: 3px;
}
.highlight {
background: #fff;
}
.highlighter-rouge .highlight {
background: #eef;
}
.highlight .c {
color: #998;
font-style: italic;
}
.highlight .err {
color: #a61717;
background-color: #e3d2d2;
}
.highlight .k {
font-weight: bold;
}
.highlight .o {
font-weight: bold;
}
.highlight .cm {
color: #998;
font-style: italic;
}
.highlight .cp {
color: #999;
font-weight: bold;
}
.highlight .c1 {
color: #998;
font-style: italic;
}
.highlight .cs {
color: #999;
font-weight: bold;
font-style: italic;
}
.highlight .gd {
color: #000;
background-color: #fdd;
}
.highlight .gd .x {
color: #000;
background-color: #faa;
}
.highlight .ge {
font-style: italic;
}
.highlight .gr {
color: #a00;
}
.highlight .gh {
color: #999;
}
.highlight .gi {
color: #000;
background-color: #dfd;
}
.highlight .gi .x {
color: #000;
background-color: #afa;
}
.highlight .go {
color: #888;
}
.highlight .gp {
color: #555;
}
.highlight .gs {
font-weight: bold;
}
.highlight .gu {
color: #aaa;
}
.highlight .gt {
color: #a00;
}
.highlight .kc {
font-weight: bold;
}
.highlight .kd {
font-weight: bold;
}
.highlight .kp {
font-weight: bold;
}
.highlight .kr {
font-weight: bold;
}
.highlight .kt {
color: #458;
font-weight: bold;
}
.highlight .m {
color: #099;
}
.highlight .s {
color: #d14;
}
.highlight .na {
color: #008080;
}
.highlight .nb {
color: #0086B3;
}
.highlight .nc {
color: #458;
font-weight: bold;
}
.highlight .no {
color: #008080;
}
.highlight .ni {
color: #800080;
}
.highlight .ne {
color: #900;
font-weight: bold;
}
.highlight .nf {
color: #900;
font-weight: bold;
}
.highlight .nn {
color: #555;
}
.highlight .nt {
color: #000080;
}
.highlight .nv {
color: #008080;
}
.highlight .ow {
font-weight: bold;
}
.highlight .w {
color: #bbb;
}
.highlight .mf {
color: #099;
}
.highlight .mh {
color: #099;
}
.highlight .mi {
color: #099;
}
.highlight .mo {
color: #099;
}
.highlight .sb {
color: #d14;
}
.highlight .sc {
color: #d14;
}
.highlight .sd {
color: #d14;
}
.highlight .s2 {
color: #d14;
}
.highlight .se {
color: #d14;
}
.highlight .sh {
color: #d14;
}
.highlight .si {
color: #d14;
}
.highlight .sx {
color: #d14;
}
.highlight .sr {
color: #009926;
}
.highlight .s1 {
color: #d14;
}
.highlight .ss {
color: #990073;
}
.highlight .bp {
color: #999;
}
.highlight .vc {
color: #008080;
}
.highlight .vg {
color: #008080;
}
.highlight .vi {
color: #008080;
}
.highlight .il {
color: #099;
}
.badanwidget {
padding: 0px 15px 0px;
}
.cssload-loader {
width: 20px;
height: 20px;
border-radius: 50%;
margin: 3em;
display: inline-block;
position: relative;
vertical-align: middle;
background: rgb(255, 255, 255);
}
.cssload-loader,
.cssload-loader:before,
.cssload-loader:after {
animation: 1.15s infinite ease-in-out;
-o-animation: 1.15s infinite ease-in-out;
-ms-animation: 1.15s infinite ease-in-out;
-webkit-animation: 1.15s infinite ease-in-out;
-moz-animation: 1.15s infinite ease-in-out;
}
.cssload-loader:before,
.cssload-loader:after {
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
}
.cssload-loader { animation-name: cssload-loader;
-o-animation-name: cssload-loader;
-ms-animation-name: cssload-loader;
-webkit-animation-name: cssload-loader;
-moz-animation-name: cssload-loader; }
@keyframes cssload-loader {
from { transform: scale(0); opacity: 1; }
to { transform: scale(1); opacity: 0; }
}
@-o-keyframes cssload-loader {
from { -o-transform: scale(0); opacity: 1; }
to { -o-transform: scale(1); opacity: 0; }
}
@-ms-keyframes cssload-loader {
from { -ms-transform: scale(0); opacity: 1; }
to { -ms-transform: scale(1); opacity: 0; }
}
@-webkit-keyframes cssload-loader {
from { -webkit-transform: scale(0); opacity: 1; }
to { -webkit-transform: scale(1); opacity: 0; }
}
@-moz-keyframes cssload-loader {
from { -moz-transform: scale(0); opacity: 1; }
to { -moz-transform: scale(1); opacity: 0; }
}
/* This is the default Tooltipster theme (feel free to modify or duplicate and create multiple themes!): */
.tooltipster-default {
/* border-radius: 5px; */
/* border: 2px solid #000; */
background: #4c4c4c;
color: #fff;
}
/* Use this next selector to style things like font-size and line-height: */
.tooltipster-default .tooltipster-content {
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 16px;
/* padding: 8px 10px; */
overflow: hidden;
}
/* This next selector defines the color of the border on the outside of the arrow. This will automatically match the color and size of the border set on the main tooltip styles. Set display: none; if you would like a border around the tooltip but no border around the arrow */
.tooltipster-default .tooltipster-arrow .tooltipster-arrow-border {
border-color: #222222;
}
/* If you're using the icon option, use this next selector to style them */
.tooltipster-icon {
cursor: help;
margin-left: 4px;
}
/* This is the base styling required to make all Tooltipsters work */
.tooltipster-base {
padding: 0;
font-size: 0;
line-height: 0;
position: absolute;
left: 0;
top: 0;
z-index: 9999999;
pointer-events: none;
max-width: 250px;
overflow: visible;
}
.tooltipster-base .tooltipster-content {
overflow: hidden;
}
/* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */
.tooltipster-arrow {
display: block;
text-align: center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.tooltipster-arrow span, .tooltipster-arrow-border {
display: block;
width: 0;
height: 0;
position: absolute;
}
.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span {
border-left: 8px solid transparent !important;
border-right: 8px solid transparent !important;
border-top: 8px solid;
bottom: -7px;
}
.tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border {
border-left: 9px solid transparent !important;
border-right: 9px solid transparent !important;
border-top: 9px solid;
bottom: -7px;
}
.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span {
border-left: 8px solid transparent !important;
border-right: 8px solid transparent !important;
border-bottom: 8px solid;
top: -7px;
}
.tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
border-left: 9px solid transparent !important;
border-right: 9px solid transparent !important;
border-bottom: 9px solid;
top: -7px;
}
.tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border {
left: 0;
right: 0;
margin: 0 auto;
}
.tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span {
left: 6px;
}
.tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
left: 5px;
}
.tooltipster-arrow-top-right span, .tooltipster-arrow-bottom-right span {
right: 6px;
}
.tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border {
right: 5px;
}
.tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border {
border-top: 8px solid transparent !important;
border-bottom: 8px solid transparent !important;
border-left: 8px solid;
top: 50%;
margin-top: -7px;
right: -7px;
}
.tooltipster-arrow-left .tooltipster-arrow-border {
border-top: 9px solid transparent !important;
border-bottom: 9px solid transparent !important;
border-left: 9px solid;
margin-top: -8px;
}
.tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border {
border-top: 8px solid transparent !important;
border-bottom: 8px solid transparent !important;
border-right: 8px solid;
top: 50%;
margin-top: -7px;
left: -7px;
}
.tooltipster-arrow-right .tooltipster-arrow-border {
border-top: 9px solid transparent !important;
border-bottom: 9px solid transparent !important;
border-right: 9px solid;
margin-top: -8px;
}
/* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */
.tooltipster-fade {
opacity: 0;
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
-ms-transition-property: opacity;
transition-property: opacity;
}
.tooltipster-fade-show {
opacity: 1;
}
.tooltipster-grow {
-webkit-transform: scale(0,0);
-moz-transform: scale(0,0);
-o-transform: scale(0,0);
-ms-transform: scale(0,0);
transform: scale(0,0);
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
-webkit-backface-visibility: hidden;
}
.tooltipster-grow-show {
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
transform: scale(1,1);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}
.tooltipster-swing {
opacity: 0;
-webkit-transform: rotateZ(4deg);
-moz-transform: rotateZ(4deg);
-o-transform: rotateZ(4deg);
-ms-transform: rotateZ(4deg);
transform: rotateZ(4deg);
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
}
.tooltipster-swing-show {
opacity: 1;
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
transform: rotateZ(0deg);
-webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1);
-webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
-moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
-ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
-o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
}
.tooltipster-fall {
top: 0;
-webkit-transition-property: top;
-moz-transition-property: top;
-o-transition-property: top;
-ms-transition-property: top;
transition-property: top;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}
.tooltipster-fall-show {
}
.tooltipster-fall.tooltipster-dying {
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
-ms-transition-property: all;
transition-property: all;
top: 0px !important;
opacity: 0;
}
.tooltipster-slide {
left: -40px;
-webkit-transition-property: left;
-moz-transition-property: left;
-o-transition-property: left;
-ms-transition-property: left;
transition-property: left;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}
.tooltipster-slide.tooltipster-slide-show {
}
.tooltipster-slide.tooltipster-dying {
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
-ms-transition-property: all;
transition-property: all;
left: 0px !important;
opacity: 0;
}
/* CSS transition for when contenting is changing in a tooltip that is still open. The only properties that will NOT transition are: width, height, top, and left */
.tooltipster-content-changing {
opacity: 0.5;
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
p.hoveratas {
background: #375a7f;
padding: 10px 11px;
}
p.hoverbawah {
padding: 10px;
margin-bottom: -5px;
padding-top: 0px;
position: relative;
top: -5px;
}