.topnav {   overflow: hidden;   background-color: #333; } .topnav a {   float: left;   color: white;   text-align: center;   padding: 15px 15px;   text-decoration: none;   font-size: 19px; } .topnav a:hover {   background-color: #ddd;   color: white; } .topnav nexxt.next {   background-color: red;   color: white; } .topnav number.number {   background-color: green;   color: white; } .topnav prev.prev {   background-color: #3b5998;   color: white; } .topnav-right { float: right; } .location ~* \.pdf$ { add_header X-Robots-Tag "index, follow"; } .location ~* \.(png|jpe?g|gif|jpeg|jpg)$ { add_thumbnail X-Robots-Tag "index"; } .element {font-size: 23px; font-size-adjust: .22;} .taglist-title-bd { border: 1px solid #3b5998; margin-left: 10px; margin-right: 10px; } .taglist-next { background-color: green; background-repeat: no-repeat; color: #fff; padding: 4px; font-weight: bolder; text-align: center; margin-left: 10px; border-radius: 4px; width: 200px; } .taglist-title { background-color: red; background-repeat: no-repeat; color: #fff; padding: 4px; font-weight: bolder; text-align: center; margin-left: 10px; border-radius: 4px; width: 200px; } .f { background-color: #333; background-repeat: no-repeat; color: #fff; padding: 4px; font-weight: bolder; text-align: center; margin-left: 9px; border-radius: 4px; width: 250px; } .error {  padding: 20px;  background-color: khaki;  color: white;} .closebtn {  margin-left: 1px;  color: white;  font-weight: bold;  float: right;  font-size: 2px;  line-height: 3px;  cursor: pointer;  transition: 0.3s;} .closebtn:hover {  color: black;} .alert {  padding: 2px;  background-color: #3b5998;  color: white;} .closebtn {  margin-left: 1px;  color: white;  font-weight: bold;  float: right;  font-size: 1px;  line-height: 1px;  cursor: pointer;  transition: 0.2s;} .closebtn:hover {  color: black;} .allprojects {repositories {google()} #content {width:100%;}:root {--aspect-ratio: 1.7777777777; --chat-width: 450px; --iframe-width: 1280px; --iframe-height: 720px;} iframe {border: 0; padding: 0; display: block; height: 100%; width: var(--iframe-width); max-height: calc(100vh - 92px); background-color: #0002; border-radius: 3px; position: absolute; left: 0; top: 0; transition: background-color 0.05s ease-out;} iframe.aspectRatio {max-height: min(calc(100vh - 92px), calc(100vw - 160px - var(--chat-width)) / var(--aspect-ratio-widget))!important; max-width: min(calc((100vh - 92px) *  var(--aspect-ratio-widget)), calc(100vw - 160px - var(--chat-width)))!important; height: var(--iframe-height)!important; width: var(--iframe-width)!important;} .gone {position: absolute; top: -150px;} .modal {overflow: auto; width: 160px;} .message {background: #3e3e3e00; color: #FCFCFC; vertical-align: top; border: 1px solid #2e445c; border-radius: 10px; background: #2e445c; box-shadow: 5px 5px 10px #121620, -5px -5px 10px #162a36;} .inMessage {color: #000; margin: 3px; border-radius: 5px; background: #FFF; padding: 5px; text-align: left;} .actionMessage {color: #000; margin: 3px; border-radius: 5px; background: #FFF; padding: 5px; text-align: left;} .outMessage {color: #000; margin: 3px; border-radius: 5px; background: #BCF; padding: 5px; text-align: right;} #chatBody {background-color: #0004; margin: 0 10px 10px 0; border-radius: 5px; overflow-y:scroll; overflow-wrap: anywhere; bottom: 45px; position: absolute;} .ui-widget-content {border-left:0; border-top:0;} #chatBody::-webkit-scrollbar {width: 0px; background: transparent; /* make scrollbar transparent */} .xbutton{float: right; cursor: pointer; user-select: none; color: white; font-size: 150%; font-family: Verdana; line-height: 14px;} #sceneSettings {font-size: 80%;} #chatModule {bottom: 0; position: fixed; margin: 10px; align-self: center; width: 400px; max-width: 100%; z-index: 3; height: calc(100vh - 40px); overflow: hidden; right:0; background: #0001; border: solid 2px #0005; border-radius: 10px; padding: 10px; transition: all .05s ease-in-out;} #chatInput {display: inline-block; color: #000; background-color: #FFFE; width: 324px; font-size: 105%; margin-left: 7px;} .part0 {display:inline-block; cursor:default;} .part {display: inline-block; cursor: pointer;} .part:hover {text-shadow: 0 0 black;} .dimensions {cursor: default; background-color: #FFF9; z-index:1;} #chatSendBar {display: inline-block; bottom: 0px; position:absolute;} #savedroompassword{width:50px;} button[data-state='true'] {background-color:#CEF!important;} input[type="checkbox"] {width: 20px; height: 20px; text-align: center; vertical-align: middle; transition: all .2s ease-in-out;} input[type="checkbox"]:checked {transform: scale(1.1);} label {margin: 0 0px 6px 0; display: inline-block; font-weight: 600;} .ui-widget-header {background: rgb(225,225,225); /* Old browsers */ background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);} #containerMenu {overflow-x: auto; overflow-y: hidden; position: absolute; left: 160px; width: calc(100vw - var(--chat-width) - 160px); display: flex; top: 0; height: 92px;} #iframeContainer {position: absolute; left: 160px; box-shadow: 1px 1px 3px #1b1b1b, -1px -1px 3px #1d1d1d;} #vdoninja {max-width: calc(100vw - 160px - var(--chat-width)); width: 100vw; height: calc(100vh - 90px);} #viewlink {width:400px;} #container {display:block; padding:0px; background-color: #e5e5e5;} button[data-state='true'] {background-color:#CEF!important;} .disconnected{border: 4px dotted red!important; padding: 6px 0.25em 0.25em 0.25em!important; outline: dashed 2px black!important;} .thing:hover{animation: horizontalShake 2s; animation-iteration-count: 1;} #col1>.thing:hover{animation: enlargeAnimation 2s; animation-iteration-count: 1;} #col1>.thing:active{transform: scale(1.05); animation:none;} .thing:active{animation:none; transform: translate(7px, 0px) rotate(0deg);} #delete:hover{animation: none!important;} #delete:active{transform: none!important;} @keyframes enlargeAnimation { 0% {transform: scale(1.01); } 20% { transform: scale(1.03); } 80% { transform: scale(1.05); } 100% { transform: scale(1.06);}} @keyframes horizontalShake { 0% {transform: translate(3px, 0px) rotate(0deg); } 20% {transform: translate(7px, 0px) rotate(0deg); } 80% {transform: translate(8px, 0px) rotate(0deg); } 100% {transform: translate(-1px, 0px) rotate(0deg); }} .shake {animation: shake 0.5s; animation-iteration-count: 1;} @keyframes shake { 0% {transform: translate(1px, 1px) rotate(0deg); } 10% {transform: translate(-1px, -2px) rotate(-1deg);} 20% {transform: translate(-3px, 0px) rotate(1deg);} 30% {transform: translate(3px, 2px) rotate(0deg);} 40% {transform: translate(1px, -1px) rotate(1deg);} 50% {transform: translate(-1px, 2px) rotate(-1deg);} 60% {transform: translate(-3px, 1px) rotate(0deg);} 70% {transform: translate(3px, 1px) rotate(-1deg); } 80% {transform: translate(-1px, -1px) rotate(1deg);} 90% {transform: translate(1px, 2px) rotate(0deg);} 100% {transform: translate(1px, -2px) rotate(-1deg);}} input {padding:5px; margin:5px; border-radius: 3px;} .menuButton {width: 92%;} button {user-select: none; padding:5px; margin:5px; border-radius: 3px; cursor: pointer; background: linear-gradient(135deg, rgba(238,238,238,1) 60%,rgb(225, 225, 225, 1) 80%,rgb(210, 209, 209, 1) 100%);} canvas {padding: 10px; cursor: pointer; border-radius: 10px; box-shadow: 2px 2px 6px #273a4e, -2px -2px 6px #354e6a;} h2 {text-shadow: 0 0 2px #a7a7a7; color: #000b3a; user-select: none;} .inline{display:inline-block;} table {font-size: 1em;} ::-webkit-scrollbar {width: 15px; height: 15px;} ::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 13px rgb(0 0 0 / 90%); border-radius: 4px;} ::-webkit-scrollbar-thumb {border-radius: 4px; -webkit-box-shadow: inset 0 0 16px rgb(150 150 150 / 100%); border: solid 3px transparent;} .ui-draggable, .ui-droppable {background-position: top;} #containerMenu2 {width: calc(100vw - 300px); position: absolute; left: 155px; margin: 20px 0; top: 60px;} .tFadeOut {animation-duration: 1s; animation-name: tFadeOut; transition: top 1s; top: 92px;} .tFadeIn {animation-duration: 1s; animation-name: tFadeIn; transition: top 1s; top: 122px;} .tFadeOut {animation-duration: 1s; animation-name: tFadeOut; transition: top 1s; top: 92px;} .tFadeStart {top: 92px;} @keyframes tFadeOut {from {top: 122px;} to {top: 92px; }} @keyframes tFadeIn { from {top: 92px; } to {top: 122px;}} .hFadeOut {overflow: hidden; animation-duration: 1s; animation-name: hFadeOut; transition: height 1s; height:0;} @keyframes hFadeOut { from {height: 43px;} to {height: 0;}} .hFadeIn {overflow: hidden; animation-duration: 1s; animation-name: hFadeIn; transition: height 1s; height:43px;} @keyframes hFadeIn { from {height: 0;} to {height: 43px;}} .draggable {width: 150px; height: 150px; padding: 0; margin:0; border:0;} .resizable {width: 150px; height: 150px; padding: 0; margin:0; border:0;} .resizable h3 {text-align: center; margin: 0; cursor: grab; border: 1px solid black;} .ui-menu {width: 150px;} .ui-state-selected {background-color: #64b1ff;} .ui-state-disabled {background-color: grey;} .widget {background-color: #DDD; position: absolute; width:100%; height:100%;} #canvas {background-color: #000; width: var(--iframe-width); height: var(--iframe-height); margin: 0; padding:0; border: 0; display: inline-block;} h3 {margin-bottom: 6px;} .settings {display: block; background: #c0e3ff; position: absolute; top: 100px; left: 100px; z-Index:20;} .hidden {display:none!important;} .fadeout {visibility: hidden; opacity: 0; transition: visibility 0s 0.5s, opacity 0.5s linear;} .fade2black {background-color: 000F; transition: background-color 0.5s linear;} .hidden2{display:none!important;} .hidden3 {display: none!important;} .thing {width: 100px; padding: 10px 0.5em 0.5em 0.5em; margin: 6px; border: #565656 solid 1px; background: rgba(0,0,0,0.8); color: white; font-family: sans-serif; cursor: grab; text-align: center; border-radius: 6px; word-wrap: break-word; box-shadow: inset 6px 6px 6px #dadada1c, inset -6px -6px 6px #27272724;} .empty {width: 100px; padding: 10px 0.5em 0 0.5em; margin: 0.5em 0.4em; background: rgba(0,0,0,0.8); color: white; font-family: sans-serif; user-select: none; text-align: center; border-radius: 6px; height: 1.7em; cursor: crosshair; border: 1px solid black;} .col {width: 130px; height: calc(100vh - 20px); padding: 5px; border: 1px solid; border-radius: 5px; position: relative; float: left; user-select: none;} .pressed>canvas {box-shadow: inset 2px 2px 10px #0007, inset -2px -2px 10px #0007; background-color: #FFFA;} .pressed>.group {box-shadow: inset 2px 2px 10px #0007, inset -2px -2px 10px #0007; background-color: #276022aa;} button.pressed {background-color: #CEF;} .editButton {display:none; position: absolute; z-index: 2; padding: 6px 0; width: 28px; margin: 2px; height: 28px; line-height: 0px; border-radius: 14px;} .editButton[data-state="active"] {display: block!important; background: #defffd; border: #166b49 solid 2px;} .setButton {display: none; position:absolute; margin: 20px 57px; z-index:2;} .canvasContainer {display: inline-block;} .canvasContainer>canvas {transform: scale(calc(  var(--aspect-ratio) / (16 / 9)), 1);} .canvasContainer:hover>canvas {box-shadow: 0 0 6px #273a4e, 0 0px 6px #fffC;} .canvasContainer:hover>button {display:inline-block; padding: 3.2px; opacity: 80%;} .canvasContainer>button:hover {display:inline-block; padding: 3.2px; opacity: 100!important; box-shadow:  2px 2px 2px #918c8c7c, -2px -2px 2px #27272774;} b {text-shadow: 0 0 1px #f4f4f4;} a {display: inline-block; margin: 5px; background-color: #c9c9c9; border: 2px solid black; padding: 4px; border-radius: 6px; cursor: pointer;} [title] {cursor: help;} #delete {background-color: rgb(191 191 191); text-align: center; border: 1px solid black; color: black; cursor: crosshair; margin: 5.5px; border-radius: 0px; display:none;} .modal {position: fixed; padding-top: 50px; left: 0; top: 0; width: 100%; height: 100%; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.5); z-Index: 20;} .modal-content {position: relative; padding: 20px; margin: auto; margin-bottom: 100px; width: 75%; -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s; border-radius: 4px; background-color: #e2e2e2; background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");} .close-btn {color: #333; font-size: 42px; font-weight: bold; user-select: none;} .close-btn:hover {color: black; cursor:pointer;} span.close-btn {float: right;} @-webkit-keyframes animatetop { from {top:-300px; opacity: 0;} to {top: 0; opacity: 1;}} @keyframes animatetop {from {top: -300px; opacity: 0;} to {top: 0; opacity: 1;}} #welcomeWindow {display: none; position: absolute; top:0; left: 0; width: 100vw; height: 100vh; z-index: 5; background: #2775dc; box-shadow: 20px 20px 60px #51729d, -20px -20px 60px #6d9ad5; background: -moz-linear-gradient(-45deg, rgba(59,103,158,1) 2%, rgba(43,136,217,1) 50%, rgba(32,124,202,1) 79%, rgba(89, 165, 224,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, rgba(59,103,158,1) 2%,rgba(56, 134, 202,1) 50%,rgba(32,124,202,1) 79%,rgba(89, 165, 224,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, rgba(59,103,158,1) 2%,rgba(56, 134, 202,1) 50%,rgba(32,124,202,1) 79%,rgba(89, 165, 224,1) 100%); background: linear-gradient(135deg, rgba(59,103,158,1) 2%,rgba(56, 134, 202,1) 50%,rgba(32,124,202,0.8) 79%,rgba(89, 165, 224,1) 100%),  url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='noise' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeBlend mode='screen'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23noise)' opacity='0.5'/%3E%3C/svg%3E");} .center-content {align-content: center; margin: 20px auto; display: block; width: 500px; max-width: 100%;} .footer {bottom: 0; display: inline-block; vertical-align: middle; margin: 5px 20px; height: 28px; display: flex; align-items: center; position: fixed; right: 0;} .footer>div {align-items: center;} .popup-message {display: none; align-text: center; position: absolute; z-index: 35!important; padding: 5px!important; border-radius: 3px; width: 180px!important; height: auto!important; background-color: #fff!important; border: solid 1px #dfdfdf!important; box-shadow: 1px 1px 2px #cfcfcf!important;} .context-menu--active {display: block!important;} .context-menu__items {list-style: none!important;margin: 0; padding: 0;} .context-menu__item {display: block; margin-bottom: 4px!important;} .context-menu__item:last-child {margin-bottom: 0!important;} .context-menu__link {display: block; padding: 4px 12px; color: #0066aa!important; text-decoration: none;} button.menuButtons {background-color: #b4c5ca!important; background: linear-gradient(135deg, #c2d2d7 60%,#c7d3d7 80%, #a3b5ba 100%);} .context-menu__link:hover {color: #fff!important; background-color: #0066aa!important;} .discord {background-image: url("data:image/svg+xml,%3Csvg width='71' height='55' viewBox='0 0 71 55' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z' fill='%23ffffff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='71' height='55' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; width: 14px; height: 10px; border: 0; background-color: #000000;} .github {background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z'/%3E%3C/svg%3E"); background-size: contain; width: 10px; height: 10px; border: 0; background-color: #000000;} #containermenu>div:nth-child(1)>div::before {content: "0"; color: #a4a4a4;} #containermenu>div:nth-child(2)>div::before {content: "1"; color: #a4a4a4;} #containermenu>div:nth-child(3)>div::before {content: "2"; color: #a4a4a4;} #containermenu>div:nth-child(4)>div::before {content: "3"; color: #a4a4a4;} #containermenu>div:nth-child(5)>div::before {content: "4"; color: #a4a4a4;} #containermenu>div:nth-child(6)>div::before {content: "5"; color: #a4a4a4;} #containermenu>div:nth-child(7)>div::before {content: "6"; color: #a4a4a4;} #containermenu>div:nth-child(8)>div::before {content: "7"; color: #a4a4a4;} #containermenu>div:nth-child(9)>div::before {content: "8"; color: #a4a4a4;} #containermenu>div:nth-child(10)>div::before {content: "9"; color: #a4a4a4;} #containermenu>div>div {width: 15px; height: 15px; border-radius: 10px; margin: 0 auto; color: #a4a4a4; position: relative; left: 4px; font-size: 70%; cursor:help;} .tooltip {z-index: 100;} .tooltip .tooltiptext {visibility: hidden; background-color: #333; color: #fff; text-align: center; border-radius: 3px; padding: 3px; overflow: auto; margin: 0; position:relative; font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus,Code2000, Code2001, Code2002, Musica, serif, LastResort;} .tooltip:hover .tooltiptext {visibility: visible;} .randomRoomName {width: 24px; height: 24px; background-size: contain; background-repeat: no-repeat; border-radius: 5px; background: rgb(238,238,238); background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 29 29'%3E%3Cpath d='M18 9v-3c-1 0-3.308-.188-4.506 2.216l-4.218 8.461c-1.015 2.036-3.094 3.323-5.37 3.323h-3.906v-2h3.906c1.517 0 2.903-.858 3.58-2.216l4.218-8.461c1.356-2.721 3.674-3.323 6.296-3.323v-3l6 4-6 4zm-9.463 1.324l1.117-2.242c-1.235-2.479-2.899-4.082-5.748-4.082h-3.906v2h3.906c2.872 0 3.644 2.343 4.631 4.324zm15.463 8.676l-6-4v3c-3.78 0-4.019-1.238-5.556-4.322l-1.118 2.241c1.021 2.049 2.1 4.081 6.674 4.081v3l6-4z'/%3E%3C/svg%3E"), linear-gradient(135deg, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);} #demoDrop {background-color: #30892c; cursor: help; display:none;} .demoThing {width: 100px; padding: 10px 0.5em 0.5em 0.5em; margin: 6px; border: #565656 solid 1px; background: rgba(0,0,0,0.8); color: white; font-family: sans-serif; cursor: grab; text-align: center; border-radius: 6px; word-wrap: break-word; box-shadow: inset 6px 6px 6px #dadada1c, inset -6px -6px 6px #27272724; display: none;} #sendChat {bottom: 1px; position: relative;}pre code.hljs {display: block; overflow-x: auto; padding: 1em;} code.hljs {padding: 3px 5px;} .hljs {color:#383a42;background:#fafafa} .hljs-comment,.hljs-quote {color: #a0a1a7; font-style: italic;} .hljs-doctag,.hljs-formula,.hljs-keyword{color: #a626a4;} .hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst {color: #e45649;} .hljs-literal {color: #0184bb;} .hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string {color: #50a14f;} .hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable {color: #986801;} .hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title {color: #4078f2;} .hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_ {color: #c18401;} .hljs-emphasis {font-style: italic;} .hljs-strong {font-weight: 700;} .hljs-link {text-decoration: underline;}/* cyrillic-ext */ @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 400; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1Mu51xFIzIXKMnyrYk.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} /* cyrillic */ @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 400; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1Mu51xMIzIXKMnyrYk.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} /* greek-ext */ @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 400; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1Mu51xEIzIXKMnyrYk.woff2) format('woff2'); unicode-range: U+1F00-1FFF;} /* greek */ @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 400; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1Mu51xLIzIXKMnyrYk.woff2) format('woff2'); unicode-range: U+0370-03FF;} /* vietnamese */ @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 400; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1Mu51xHIzIXKMnyrYk.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;} /* latin-ext */ @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 400; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1Mu51xGIzIXKMnyrYk.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;} /* latin */ @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 400; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1Mu51xIIzIXKMny.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* cyrillic-ext */ @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 500; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51S7ACc3CsTYl4BOQ3o.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} /* cyrillic */ @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 500; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51S7ACc-CsTYl4BOQ3o.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} /* greek-ext */ @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 500; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51S7ACc2CsTYl4BOQ3o.woff2) format('woff2'); unicode-range: U+1F00-1FFF;} /* greek */ @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 500; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51S7ACc5CsTYl4BOQ3o.woff2) format('woff2'); unicode-range: U+0370-03FF;} /* vietnamese */ @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 500; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51S7ACc1CsTYl4BOQ3o.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;} /* latin-ext */ @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 500; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51S7ACc0CsTYl4BOQ3o.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;} /* latin */ @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 500; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51S7ACc6CsTYl4BO.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* cyrillic-ext */ @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 700; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TzBic3CsTYl4BOQ3o.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} /* cyrillic */ @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 700; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TzBic-CsTYl4BOQ3o.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} /* greek-ext */ @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 700; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TzBic2CsTYl4BOQ3o.woff2) format('woff2'); unicode-range: U+1F00-1FFF;} /* greek */ @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 700; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TzBic5CsTYl4BOQ3o.woff2) format('woff2'); unicode-range: U+0370-03FF;} /* vietnamese */ @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 700; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TzBic1CsTYl4BOQ3o.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;} /* latin-ext */ @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 700; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TzBic0CsTYl4BOQ3o.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;} /* latin */ @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 700; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* cyrillic-ext */ @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} /* cyrillic */ @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} /* greek-ext */ @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2'); unicode-range: U+1F00-1FFF;} /* greek */ @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2'); unicode-range: U+0370-03FF;} /* vietnamese */ @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;} /* latin-ext */ @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;} /* latin */ @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* cyrillic-ext */ @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 500; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} /* cyrillic */ @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 500; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} /* greek-ext */ @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 500; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCBc4AMP6lbBP.woff2) format('woff2'); unicode-range: U+1F00-1FFF;} /* greek */ @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 500; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBxc4AMP6lbBP.woff2) format('woff2'); unicode-range: U+0370-03FF;} /* vietnamese */ @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 500; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCxc4AMP6lbBP.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;} /* latin-ext */ @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 500; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;} /* latin */ @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 500; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* cyrillic-ext */ @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfCRc4AMP6lbBP.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} /* cyrillic */ @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfABc4AMP6lbBP.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} /* greek-ext */ @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfCBc4AMP6lbBP.woff2) format('woff2'); unicode-range: U+1F00-1FFF;} /* greek */ @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBxc4AMP6lbBP.woff2) format('woff2'); unicode-range: U+0370-03FF;} /* vietnamese */ @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfCxc4AMP6lbBP.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;} /* latin-ext */ @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;} /* latin */ @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}.header-outer {border-bottom: 1px solid #e0e0e0; background: #ffffff;} html, .Label h2, #sidebar .rss a, .BlogArchive h2, .FollowByEmail h2.title, .widget .post h2 {font-family: Roboto, sans-serif;} .plusfollowers h2.title, .post h2.title, .widget h2.title {font-family: Roboto, sans-serif;} .widget-item-control {height: 100%;} .widget.Header, #header {position: relative; height: 100%;bwidth: 100%;}} .widget.Header .header-logo1 {float: left; margin-right: 15px; padding-right: 15px; border-right: 1px solid #ddd;} .widget.Header .header-title h2 {font-size: 24px; font-family: Roboto, sans-serif; font-weight: normal; line-height: 32px; margin-bottom: 7px;} .header-inner {background-repeat: no-repeat; background-position: right 0px;} .post-author, .byline-author {font-size: 14px; font-weight: normal; color: #757575; color: rgba(0,0,0,.54);} .post-content .img-border {border: 1px solid rgb(235, 235, 235); padding: 4px;} .header-title a {text-decoration: none!important;} .header-left .header-logo1 {width: 128px!important;} .header-desc {line-height: 20px; margin-bottom: 4px; max-width: 260px;} .fb-custom img, .twitter-custom img, .gplus-share img {cursor: pointer; opacity: 0.54;} .fb-custom img:hover, .twitter-custom img:hover, .gplus-share img:hover {opacity: 0.87;} .fb-like {width: 80px;} .post .share {float: right;} #twitter-share {border: #CCC solid 1px; border-radius: 3px; background-image: -webkit-linear-gradient(top,#ffffff,#dedede);} .twitter-follow {background: url(//3.bp.blogspot.com/-M7uPAxKEeh4/WKrvV1ujKCI/AAAAAAAATZE/cdHhTldtvk4q4ad1Me1XDIgQD9Aul09CACK4B/s1600/twitter-bird.png) no-repeat left center; padding-left: 18px; font: normal normal normal 11px/18px 'Helvetica Neue',Arial,sans-serif; font-weight: bold; text-shadow: 0 1px 0 rgba(255,255,255,.5); cursor: pointer; margin-bottom: 10px;} .twitter-fb {padding-top: 2px;} .fb-follow-button  {background: -webkit-linear-gradient(#4c69ba, #3b55a0); background: -moz-linear-gradient(#4c69ba, #3b55a0); background: linear-gradient(#4c69ba, #3b55a0); border-radius: 2px; height: 18px; padding: 4px 0 0 3px; width: 57px; border: #4c69ba solid 1px;} .fb-follow-button a {text-decoration: none!important; text-shadow: 0 -1px 0 #354c8c; text-align: center; white-space: nowrap; font-size: 11px; color: white; vertical-align: top;} .fb-follow-button a:visited {color: white;} .fb-follow {padding: 0px 5px 3px 0px; width: 14px; vertical-align: bottom;} .gplus-wrapper {margin-top: 3px; display: inline-block; vertical-align: top;} .twitter-custom, .gplus-share {margin-right: 12px;} .fb-follow-button{margin: 10px auto; } .header-outer {clear: both;}.header-inner {margin: auto; padding: 0px;} .footer-outer {background: #f5f5f5; clear: both; margin: 0;} .footer-inner {margin: auto; padding: 0px;} .footer-inner-2 {/* Account for right hand column elasticity. */ max-width: calc(100% - 248px);} .google-footer-outer {clear: both;} .cols-wrapper, .google-footer-outer, .footer-inner, .header-inner {max-width: 978px; margin-left: auto; margin-right: auto;} .cols-wrapper {margin: auto; clear: both; margin-top: 60px; margin-bottom: 60px; overflow: hidden;} .col-main-wrapper {float: left; width: 100%;} .col-main {margin-right: 278px; max-width: 660px;} .col-right {float: right; width: 248px; margin-left: -278px;} /* Tweaks for layout mode. */ body#layout .google-footer-outer {display: none;} body#layout .header-outer, body#layout .footer-outer {background: none;} body#layout .header-inner {height: initial;} body#layout .cols-wrapper {margin-top: initial; margin-bottom: initial;} .butter-bar {background-color: #fce8b2;bfont-size: 16px; margin-bottom: 0; padding: 15px!important; text-align: center;} .google-logo {top: 94px;} #google-footer {position: relative; font-size: 13px; list-style: none; text-align: right;} #google-footer a {color: #444;} #google-footer ul {margin: 0; padding: 0; height: 144px; line-height: 144px;} #google-footer ul li {display: inline;} #google-footer ul li:before {color: #999; content: "\00b7"; font-weight: bold; margin: 5px;} #google-footer ul li:first-child:before {content: '"';} #google-footer .google-logo-dark {left: 0; margin-top: -16px; position: absolute; top: 50%;} /** Sitemap links. **/ .footer-inner-2 {font-size: 14px; padding-top: 42px; padding-bottom: 74px;} .footer-inner-2 .HTML h2 {color: #212121; color: rgba(0,0,0,.87); font-size: 14px; font-weight: 500; padding-left: 0; margin: 10px 0;} .footer-inner-2 .HTML ul {font-weight: normal; list-style: none; padding-left: 0;} .footer-inner-2 .HTML li {line-height: 24px; padding: 0;} .footer-inner-2 li a {color: rgba(65,132,243,.87);}/** Archive widget. **/ .BlogArchive {font-size: 13px; font-weight: normal;} .BlogArchive .widget-content {display: none;} .BlogArchive h2, .Label h2 {color: #4184F3; text-decoration: none;} .BlogArchive .hierarchy li {display: inline-block;} /* Specificity needed here to override widget CSS defaults. */ .BlogArchive #ArchiveList ul li, .BlogArchive #ArchiveList ul ul li {margin: 0; padding-left: 0; text-indent: 0;} .BlogArchive .intervalToggle {cursor: pointer;} .BlogArchive .expanded .intervalToggle .new-toggle {-ms-transform: rotate(180deg); transform: rotate(180deg);} .BlogArchive .new-toggle {float: right; padding-top: 3px; opacity: 0.87;} #ArchiveList {text-transform: uppercase;} #ArchiveList .expanded > ul:last-child {margin-bottom: 16px;} #ArchiveList .archivedate {width: 100%;} /* Months */ .BlogArchive .items {max-width: 150px; margin-left: -4px;} .BlogArchive .expanded .items {margin-bottom: 10px; overflow: hidden;} .BlogArchive .items > ul {float: left; height: 32px;} .BlogArchive .items a {padding: 0 4px;} .Label {font-size: 13px; font-weight: normal;} .sidebar-icon {display: inline-block; width: 24px; height: 24px; vertical-align: middle; margin-right: 12px; margin-top: -1px;} .Label a {margin-right: 4px;} .Label .widget-content {display: none;} .FollowByEmail {font-size: 13px; font-weight: normal;} .FollowByEmail h2 {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUBJREFUeNrMkSGLAlEUhb+ZB4JFi8mx2cz+ApvhRUGTcUCrNqNJDYIi+DO0GUwmQXDK2DSIoGgZcSaIjDrzwrK4ssvChj1w0733O+fdp+m6PozH4yQSCfb7Pa7r8pOi0SjJZBLP8zgej4gAIMvlMuPxmADIYrHger1+C6lUKmo+NJ/NZojb7SZDWiwWo1qtks1msW2bw+HwZdkwDHq9HvV6nel0SqvVYrvdIh6Ph3Qch+VyqRYLhQJSSjRNw7IsfN9XgGKxSLfbJZfL0e/3aTabrFYr7vc7IujLcOh8PqunrNdr0uk0pVKJVCpFJBJRgEajweVyod1uMxgM2O12BAGUgRbU8DV2JpOhVquRz+cRQii3+XxOp9NRN3jVR5LPOp1OjEYjlSL8hclkgmmabDabt4d+m+S30vkD/R/IU4ABAPTZgnZdmG/PAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-position: 0 50%; text-indent: 30px;} .FollowByEmail .widget-content {display: none;} .searchBox input {border: 1px solid #eee; color: #212121; color: rgba(0,0,0,.87); font-size: 14px; padding: 8px 8px 8px 40px; width: 164px; font-family: Roboto, sans-serif; background: url("https://www.gstatic.com/images/icons/material/system/1x/search_grey600_24dp.png") 8px center no-repeat;} .searchBox ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color:    rgba(0,0,0,.54);} .searchBox :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:    #000; opacity: 0.54;} .searchBox ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #000; opacity:  0.54;} .searchBox :-ms-input-placeholder { /* Internet Explorer 10-11 */ color:    #757575;} .widget-item-control {margin-top: 0px;} .section {margin: 0; padding: 0;} #sidebar-top {border: 1px solid #eee;} #sidebar-top > div {margin: 16px 0;} .widget ul {line-height: 1.6;} /*main post*/ .post {margin: 3px; background-color: #ffffff;} #main .post .title {margin: 0;} #main .post .title a {color: #212121; color: rgba(0,0,0,.87); font-weight: normal; font-size: 24px;} #main .post .title a:hover {text-decoration:none; color:#4184F3;} .message,  #main .post .post-header {margin: 0; padding: 0;} #main .post .post-header .caption, #main .post .post-header .labels-caption,  #main .post .post-footer .caption, #main .post .post-footer .labels-caption {color: #444;font-weight: 500;} #main .tr-caption-container td {text-align: left;} #main .post .tr-caption {color: #757575; color: rgba(0,0,0,.54); display: block; max-width: 560px; padding-bottom: 20px;} #main .post .tr-caption-container {line-height: 24px; margin: -1px 0 0 0!important; padding: 4px 0; text-align: left;} #main .post .post-header .published {font-size: 11px; font-weight: bold;} .post-header .publishdate {font-size: 17px; font-weight:normal; color: #757575; color: rgba(0,0,0,.54);} #main .post .post-footer {font-size: 12px; padding-bottom: 21px;} .label-footer {margin-bottom: 12px; margin-top: 12px;} .comment-img {margin-right: 16px; opacity: 0.54; vertical-align: middle;} #main .post .post-header .published {margin-bottom: 40px; margin-top: -2px;} .post .post-content {color: #212121; color: rgba(0,0,0,.87); font-size: 17px; margin: 25px 0 36px 0; line-height: 32px; word-wrap: break-word;} .post-body .post-content ul, .post-body .post-content ol {margin: 16px 0; padding: 0 48px;} .post-summary {display: none;}/* Another old-style caption. */ .post-content div i, .post-content div + i {font-size: 14px; font-style: normal; color: #757575; color: rgba(0,0,0,.54); display: block; line-height: 24px; margin-bottom: 16px; text-align: left;} /* Another old-style caption (with link) */ .post-content a > i {color: #4184F3!important;} /* Old-style captions for images. */ .post-content .separator + div:not(.separator) {margin-top: -16px;} /* Capture section headers. */ .post-content br + br + b, .post-content .space + .space + b, .post-content .separator + b {display: inline-block; margin-bottom: 8px; margin-top: 24px; } .post-content li {line-height: 32px;} /* Override all post images/videos to left align. */ .post-content .separator, .post-content > div {text-align: left;} .post-content .separator > a, .post-content .separator > span {margin-left: 0!important;} .post-content img {max-width: 100%; height: auto; width: auto;} .post-content .tr-caption-container img {margin-bottom: 12px;} .post-content iframe, .post-content embed {max-width: 100%;} .post-content .carousel-container {margin-bottom: 48px;} #main .post-content b {font-weight: 500;} /* These are the main paragraph spacing tweaks. */ #main .post-content br {content: ""; display: block; padding: 4px;} .post-content .space {display: block; height: 8px;} .post-content iframe + .space, .post-content iframe + br {padding: 0 !important;} #main .post .jump-link {margin-bottom:10px;} .post-content img, .post-content iframe {margin: 30px 0 20px 0;} .post-content > img:first-child, .post-content > iframe:first-child {margin-top: 0;} .col-right .section {padding: 0 16px;} #aside {background: #fff; border:1px solid #eee; border-top: 0;} #aside .widget {margin: 0;} #aside .widget h2, #ArchiveList .toggle + a.post-count-link {color: #212121; color: rgba(0,0,0,.87); font-weight: 400!important; margin: 0;} #ArchiveList .toggle {float: right;} #ArchiveList .toggle .material-icons {padding-top: 4px;} #sidebar .tab {cursor: pointer;} #sidebar .tab .arrow {display: inline-block; float: right;} #sidebar .tab .icon {display: inline-block; vertical-align: top; height: 24px; width: 24px; margin-right: 13px; margin-left: -1px; margin-top: 1px; color: #757575; color: rgba(0,0,0,.54);} #sidebar .widget-content > :first-child {padding-top: 8px;} #sidebar .active .tab .arrow {-ms-transform: rotate(180deg); transform: rotate(180deg);} #sidebar .arrow {color: #757575; color: rgba(0,0,0,.54);} #sidebar .widget h2 {font-size: 14px; line-height: 24px; display: inline-block;} #sidebar .widget .BlogArchive {padding-bottom: 8px;} #sidebar .widget {border-bottom: 1px solid #eee; box-shadow: 0px 1px 0 white; margin-bottom: 0; padding: 14px 0; min-height: 20px;} #sidebar .widget:last-child {border-bottom: none; box-shadow: none; margin-bottom: 0;} #sidebar ul {margin: 0; padding: 0;} #sidebar ul li {list-style: none; padding: 0;} #sidebar ul li a {line-height: 32px;} #sidebar .archive {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpiNDY23s9AAWBioBCwYBM8c+YMVsUmJibEGYBNMS5DaeMFfDYSZQA2v9I3FrB5AZeriI4FmnrBccCT8mhmGs1MwyAzAQQYAKEWG9zm9QFEAAAAAElFTkSuQmCC"); height: 24px; line-height: 24px; padding-left: 30px;} #sidebar .labels {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNpiNDY23s9AAMycOfM7UF05kHkZmzwTMkdSUhKrIcXFxZy3bt3qBjIN8RrS09PDsHnzZjCNDr58+cKQlpbGDjSoHcg1w2oIyAUODg5gARCNzUVIBrUCuVYYhjx//pzhwIEDYAEQDeJjA1CDWIAGNQK59jBxRuSABbkAlwHIgIeHh2HWrFn/1NTU2oDcvSgBS4wBSC5iArqoCsj1YGIgEyAZVMoEchqlBjEB/cZAiUHg2AEGznpKDAImxOeM////B4VLKtBvEUCngZ1ILKivr3/u6+ubBzJAGZQ9gC5aQoqLgAY8BhkAZL4BuQQkxgXE34A4BuiiZEIuAhrwEGhAEZD5DpzYoIaA2UAM4kQADUrHZRDUgAIg8wO2XAwzbQXQa5OweQ1owB10AyA6gS7BgX1u3ry5397eHow3bdo0EyjGi00tQIABANPgyAH1q1eaAAAAAElFTkSuQmCC"); height: 20px; line-height: 20px; padding-left: 30px;}#sidebar .rss a {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX5JREFUeNqsVDGSgkAQHL2rIiIikohIc/EBRkbwAIwuwgfwAXiAD9AHSI7kEkECRCb6AIyINDLx7K0aa6kT7uq0q7YYtnZ7umdnt7darXbr9Zpegeu61DNNc0dvwCcH4/GYJpMJnc9nOhwOVJbl/4hAAokMECZJQtvt9k+kH7qufyEYDAakqqqYxFdRFBqNRmTbNg2HQ0rTlK7XayvR0xqBdDqdkuM4dE/0ULhYLOh4PHYrknG5XGi/31MYhuL/nkwonM1mlGUZ1XXdrsiyLGEDhY7juJEZ1u5tIixDGdYhmYw+B7CAzPP5nDabjdgIAgCksMX1832/3drtdqPT6SQWapomiGEFNkDEdpDMMAzK81ys/7XYy+XyoQgq2WoURSIJ2iIIgp/WZCCTvFm2wgeAU31aI3Q2GhIDMeB53qPYPIcm5VrxXIOIOxsDMStjVawAc1VViRgN22lNBiuQN3GR+SY07hpOoStmFQAKXRRFY93bnpG+fONfedi+BRgAbkS8Fxp7QQIAAAAASUVORK5CYII=");} #sidebar .subscription a {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUBJREFUeNrMkSGLAlEUhb+ZB4JFi8mx2cz+ApvhRUGTcUCrNqNJDYIi+DO0GUwmQXDK2DSIoGgZcSaIjDrzwrK4ssvChj1w0733O+fdp+m6PozH4yQSCfb7Pa7r8pOi0SjJZBLP8zgej4gAIMvlMuPxmADIYrHger1+C6lUKmo+NJ/NZojb7SZDWiwWo1qtks1msW2bw+HwZdkwDHq9HvV6nel0SqvVYrvdIh6Ph3Qch+VyqRYLhQJSSjRNw7IsfN9XgGKxSLfbJZfL0e/3aTabrFYr7vc7IujLcOh8PqunrNdr0uk0pVKJVCpFJBJRgEajweVyod1uMxgM2O12BAGUgRbU8DV2JpOhVquRz+cRQii3+XxOp9NRN3jVR5LPOp1OjEYjlSL8hclkgmmabDabt4d+m+S30vkD/R/IU4ABAPTZgnZdmG/PAAAAAElFTkSuQmCC");} #sidebar-bottom {background: #f5f5f5; border-top:1px solid #eee;} #sidebar-bottom .widget {border-bottom: 1px solid #e0e0e0; padding: 15px 0; text-align: center;} #sidebar-bottom > div:last-child {border-bottom: 0;} #sidebar-bottom .text {line-height: 20px;} /* Home, forward, and backward pagination. */ .blog-pager {border-top : 1px #e0e0e0 solid; padding-top: 10px; margin-top: 15px; text-align: right!important;} #blog-pager {margin-botom: 0; margin-top: -14px; padding: 16px 0 0 0;} #blog-pager a {display: inline-block;} .blog-pager i.disabled {opacity: 0.2!important;} .blog-pager i {color: black; margin-left: 16px; opacity: 0.54;} .blog-pager i:hover, .blog-pager i:active {opacity: 0.87;} #blog-pager-older-link, #blog-pager-newer-link {float: none;} .gplus-profile {background-color: #fafafa; border: 1px solid #eee; overflow: hidden; width: 212px;} .gplus-profile-inner {margin-left: -1px; margin-top: -1px;} /* Sidebar follow buttons. */ .followgooglewrapper {padding: 12px 0 0 0;} .loading {visibility: hidden;} .detail-page .post-footer .cmt_iframe_holder {padding-top: 40px!important;} /** Desktop **/ @media (max-width: 900px) { .col-right {display: none;} .col-main {margin-right: 0; min-width: initial;} .footer-outer {display: none;} .cols-wrapper {min-width: initial;} .google-footer-outer {background-color: #f5f5f5;}} /** Tablet **/ @media (max-width: 712px) { .header-outer, .cols-wrapper, .footer-outer, .google-footer-outer {padding: 0 40px;}} /* An extra breakpoint to scale down the logo. */ @media (max-width: 600px) { .header-inner .google-logo {top: 32px; margin-top: 0;} .header-inner .google-logo img {height: 56px; width: auto; /* height: auto; width: 188px; */ /* Override any optical adjustments at desktop size. */ top: 0!important;} .header-left {left: 0; top: inherit; bottom: 24px;}} /** Mobile/small desktop window; also landscape. **/ @media (max-width: 480px), (max-height: 480px) { .header-outer, .cols-wrapper, .footer-outer, .google-footer-outer {padding: 0 16px;} .cols-wrapper {margin-top: 0;} .post-header .publishdate, .post .post-content {font-size: 16px;} .post .post-content {line-height: 28px; margin-bottom: 30px;} .byline-author {display: block; font-size: 12px; line-height: 24px; margin-top: 6px;} #main .post .title a {font-weight: 500; color: #4c4c4c; color: rgba(0,0,0,.70);} #main .post .post-header {padding-bottom: 12px;} #main .post .post-header .published {margin-bottom: -8px; margin-top: 3px;} .post .read-more {display: block; margin-top: 14px;} .post .tr-caption {font-size: 12px;} #main .post .title a {font-size: 20px; line-height: 30px;} .post-content iframe {/* iframe won't keep aspect ratio when scaled down. */ max-height: 240px;} .post-content .separator img, .post-content .tr-caption-container img, .post-content iframe {margin-left: -16px; max-width: inherit; width: calc(100% + 32px);} .post-content table, .post-content td {width: 100%;} #blog-pager {margin: 0; padding: 16px 0;} /** List page tweaks. **/ .list-page .post-original {display: none;} .list-page .post-summary {display: block;} .list-page .comment-container {display: none;} .list-page #blog-pager {padding-top: 0; border: 0; margin-top: -8px;} .list-page .label-footer {display: none;} .list-page #main .post .post-footer {border-bottom: 1px solid #eee; margin: -16px 0 0 0; padding: 0 0 20px 0;} .list-page .post .share {display: none;} /** Detail page tweaks. **/ .detail-page .post-footer .cmt_iframe_holder {padding-top: 32px!important;} .detail-page .label-footer {margin-bottom: 0;} .detail-page #main .post .post-footer {padding-bottom: 0;} .detail-page #comments {display: none;}} [data-about-pullquote], [data-is-preview], [data-about-syndication] {display: none;} .loading { visibility: visible;}#control_container {padding: 6px 8px;} #thumb-item-container {/****** width: 1036px; need dynamic calculate ? ******/ padding: 0px; margin: 0px; margin-left: 0px;} #thumb-item-container li {display: inline-block; height: 80px; margin-right: 10px; margin-bottom: 10px; float: left;} #thumb-item-container li a img {border: 2px solid #999999; height: 80px; opacity: 0.5; filter: alpha(opacity=50);} #thumb-item-container li.active a img, #thumb-item-container li a:hover img, #thumb-item-container li a:focus img {border: 2px solid #000000; opacity: 1; filter: alpha(opacity=100); /*border: 2px solid #000000; -webkit-box-shadow: 5px 5px 5px 0px rgba(204,204,204,1); -moz-box-shadow: 5px 5px 5px 0px rgba(204,204,204,1); box-shadow: 5px 5px 5px 0px rgba(204,204,204,1);*/} .img_desc, .img_id {display: none;} #main_content {/*padding: 0px 12px;*/} #main_content a:hover, #main_content a:focus {text-decoration: underline;} #main_img {/*position: absolute;*/ /*left: -9999px;*/ /* For Tablet version width: 95%; */ /* For Desktop version */ /*max-width: 895px; max-height: 650px;*/ /**/} #canvas {/*max-height: 650px;*/ z-index: 999999;} .img_title {font-size: 100%;} .img_identifier, .img_desc_taken_by, .img_desc_loc, .img_desc_lat, .img_desc_lng, .img_desc_photo_date, .img_desc_dir, .img_cloudcode {font-size: 86%; font-style: italic;} .img_identifier {margin-top: 12px;} .main_img_desc {padding-top: 8px;} .main_img_desc p {padding: 2px 18px; margin: 0px;} .btn_left_arrow, .btn_right_arrow {display: none; position: fixed; z-index: 999; height: 80px; padding: 15px 10px; top: 45%; font-weight: bold; line-height: 50px; background-color: rgba(0, 0, 0, 0.4); color: #FFFFFF; text-decoration: none; font-size: 150%;} .btn_left_arrow {left: 8px; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px;} .btn_right_arrow {right: 8px; -webkit-border-top-left-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-bottomleft: 6px; border-top-left-radius: 6px; border-bottom-left-radius: 6px;} #btn-screenfull-v1 {margin-left: 20px;} [class*="annotation-"] {position: absolute; z-index: 10; border: 3px solid #FF0000; border-top-left-radius: inherit; border-top-right-radius: inherit; background-color: rgba(255,255,255,0.01); display: none;} [class*="image-annotate-note"] {background: #333333 none repeat scroll 0 0; border: solid 2px #FFFF00; color: #FFF; font-size: 12px; max-width: 200px; padding: 3px 7px; position: absolute; font-family: 'OpenSans Regular'; display: none;} #meta_container {padding-bottom: 0px; padding-top: 6px;} #meta_container p, #meta_container_left p, #meta_container_right p {margin: 3px 0px;} #desc_container {/*max-height: 400px;*/ overflow-y: auto; overflow-x: hidden;} .imgviewer_remark {padding-bottom: 6px; font-size: small; color: #D70000;} #btn-screenfull-v1 {width: 134px; height: 32px; background: url('../images/english/enlarge.png') top left no-repeat; border: none; margin-left: 0px; margin-top: -10px;} .btn-img-type {font-size: 11px; height: 18px; line-height: 13px; display: block; margin-bottom: 7px; border: none; cursor: pointer;} .btn-img-type.active, .btn-img-type:hover, .btn-img-type:focus {background-color: #014E9E; color: #FFFFFF;} .thumb_show {display: inline-block!important;} .thumb_hidden {display: none!important;}div.container {margin: 10px 10px auto; border:1px solid orange;} div.product-image {height:220px; width:480px; border:1px solid red; margin:30px;} div.image-nav {border:1px solid black; width:500px; height:100px; margin:30px;} div.icon {background-image: url("http://i46.tinypic.com/zmmbo8.png"); background-repeat: no-repeat; height: 50px; left: 540px; position: relative; top: -104px; width: 50px; cursor:pointer;} div.icon iframe {display:none; position: relative; top:30px;} div.product-image iframe {position: absolute; top: 42px; left:42px;}@keyframes plyr-progress {to {background-position: 25px 0; background-position: var(--plyr-progress-loading-size,25px) 0;}} @keyframes plyr-popup { 0% {opacity: .5; transform: translateY(10px);} to {opacity: 1; transform: translateY(0);}} @keyframes plyr-fade-in {0% {opacity: 0;} to {opacity: 1;}} .plyr {-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; align-items: center; direction: ltr; display: flex; flex-direction: column; font-family: inherit; font-family: var(--plyr-font-family,inherit); font-variant-numeric: tabular-nums; font-weight: 400; font-weight: var(--plyr-font-weight-regular,400); line-height: 1.7; line-height: var(--plyr-line-height,1.7); max-width: 100%; min-width: 200px; position: relative; text-shadow: none; transition: box-shadow .3s ease; z-index: 0;} .plyr audio,.plyr iframe,.plyr video {display: block; height: 100%; width: 100%;} .plyr button {font: inherit; line-height: inherit; width: auto;} .plyr:focus {outline: 0;} .plyr--full-ui {box-sizing: border-box;} .plyr--full-ui *,.plyr--full-ui :after,.plyr--full-ui :before {box-sizing: inherit;} .plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui input,.plyr--full-ui label {touch-action: manipulation;} .plyr__badge {background: #4a5464; background: var(--plyr-badge-background,#4a5464); border-radius: 2px; border-radius: var(--plyr-badge-border-radius,2px); color: #fff; color: var(--plyr-badge-text-color,#fff); font-size: 9px; font-size: var(--plyr-font-size-badge,9px); line-height: 1; padding: 3px 4px;} .plyr--full-ui ::-webkit-media-text-track-container {display: none;} .plyr__captions {animation: plyr-fade-in .3s ease; bottom: 0; display: none; font-size: 13px; font-size: var(--plyr-font-size-small,13px); left: 0; padding: 10px; padding: var(--plyr-control-spacing,10px); position: absolute; text-align: center; transition: transform .4s ease-in-out; width: 100%;} .plyr__captions span:empty {display: none;} @media (min-width:480px) { .plyr__captions {font-size: 15px; font-size: var(--plyr-font-size-base,15px); padding: 20px; padding: calc(var(--plyr-control-spacing,10px)*2);}} @media (min-width:768px) { .plyr__captions {font-size: 18px; font-size: var(--plyr-font-size-large,18px);}} .plyr--captions-active .plyr__captions {display: block;} .plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty)~.plyr__captions {transform: translateY(-40px); transform: translateY(calc(var(--plyr-control-spacing,10px)*-4));} .plyr__caption {background: rgba(0,0,0,.8); background: var(--plyr-captions-background,rgba(0,0,0,.8)); border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; color: #fff; color: var(--plyr-captions-text-color,#fff); line-height: 185%; padding: .2em .5em; white-space: pre-wrap;} .plyr__caption div {display: inline;} .plyr__control {background: 0 0; border: 0; border-radius: 3px; border-radius: var(--plyr-control-radius,3px); color: inherit; cursor: pointer; flex-shrink: 0; overflow: visible; padding: 7px; padding: calc(var(--plyr-control-spacing,10px)*.7); position: relative; transition: all .3s ease;} .plyr__control svg {fill: currentColor; display: block; height: 18px; height: var(--plyr-control-icon-size,18px); pointer-events: none; width: 18px; width: var(--plyr-control-icon-size,18px);} .plyr__control:focus {outline: 0;} .plyr__control.plyr__tab-focus {outline-color: #00b3ff; outline-color: var(--plyr-tab-focus-color,var(--plyr-color-main,var(--plyr-color-main,#00b3ff))); outline-offset: 2px; outline-style: dotted; outline-width: 3px;} a.plyr__control {text-decoration: none;} .plyr__control.plyr__control--pressed .icon--not-pressed,.plyr__control.plyr__control--pressed .label--not-pressed,.plyr__control:not(.plyr__control--pressed) .icon--pressed,.plyr__control:not(.plyr__control--pressed) .label--pressed,a.plyr__control:after,a.plyr__control:before {display: none;} .plyr--full-ui ::-webkit-media-controls {display: none;} .plyr__controls {align-items: center; display: flex; justify-content: flex-end; text-align: center;} .plyr__controls .plyr__progress__container {flex: 1; min-width: 0;} .plyr__controls .plyr__controls__item {margin-left: 2.5px; margin-left: calc(var(--plyr-control-spacing,10px)/ 4);} .plyr__controls .plyr__controls__item:first-child {margin-left: 0; margin-right: auto;} .plyr__controls .plyr__controls__item.plyr__progress__container {padding-left: 2.5px; padding-left: calc(var(--plyr-control-spacing,10px)/ 4);} .plyr__controls .plyr__controls__item.plyr__time {padding: 0 5px; padding: 0 calc(var(--plyr-control-spacing,10px)/ 2);} .plyr__controls .plyr__controls__item.plyr__progress__container:first-child,.plyr__controls .plyr__controls__item.plyr__time+.plyr__time,.plyr__controls .plyr__controls__item.plyr__time:first-child {padding-left: 0;} .plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr [data-plyr=pip],.plyr__controls:empty {display: none;} .plyr--airplay-supported [data-plyr=airplay],.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr--pip-supported [data-plyr=pip] {display: inline-block;} .plyr__menu {display: flex; position:relative;} .plyr__menu .plyr__control svg {transition: transform .3s ease;} .plyr__menu .plyr__control[aria-expanded=true] svg {transform: rotate(90deg);} .plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip {display: none;} .plyr__menu__container {animation: plyr-popup .2s ease; background: hsla(0,0%,100%,.9); background: var(--plyr-menu-background,hsla(0,0%,100%,.9)); border-radius: 4px; bottom: 100%; box-shadow: 0 1px 2px rgba(0,0,0,.15); box-shadow: var(--plyr-menu-shadow,0 1px 2px rgba(0,0,0,.15)); color: #4a5464; color: var(--plyr-menu-color,#4a5464); font-size: 15px; font-size: var(--plyr-font-size-base,15px); margin-bottom: 10px; position: absolute; right: -3px; text-align: left; white-space: nowrap; z-index: 3;} .plyr__menu__container>div {overflow: hidden; transition: height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1);} .plyr__menu__container:after {border: 4px solid transparent; border-top: var(--plyr-menu-arrow-size,4px) solid hsla(0,0%,100%,.9); border-width: var(--plyr-menu-arrow-size,4px); content: ""; height: 0; position: absolute; right: 14px; right: calc(var(--plyr-control-icon-size,18px)/ 2 + var(--plyr-control-spacing,10px)*.7 - var(--plyr-menu-arrow-size,4px)/ 2); top: 100%; width: 0;} .plyr__menu__container [role=menu] {padding: 7px; padding: calc(var(--plyr-control-spacing,10px)*.7);} .plyr__menu__container [role=menuitem],.plyr__menu__container [role=menuitemradio] {margin-top: 2px;} .plyr__menu__container [role=menuitem]:first-child,.plyr__menu__container [role=menuitemradio]:first-child {margin-top: 0;} .plyr__menu__container .plyr__control {align-items: center; color: #4a5464; color: var(--plyr-menu-color,#4a5464); display: flex; font-size: 13px; font-size: var(--plyr-font-size-menu,var(--plyr-font-size-small,13px)); padding: 4.66667px 10.5px; padding: calc(var(--plyr-control-spacing,10px)*.7/1.5) calc(var(--plyr-control-spacing,10px)*.7*1.5); -webkit-user-select: none; user-select: none; width: 100%;} .plyr__menu__container .plyr__control>span {align-items: inherit; display: flex; width: 100%;} .plyr__menu__container .plyr__control:after {border: 4px solid transparent; border: var(--plyr-menu-item-arrow-size,4px) solid transparent; content: ""; position: absolute; top: 50%; transform: translateY(-50%);} .plyr__menu__container .plyr__control--forward {padding-right: 28px; padding-right: calc(var(--plyr-control-spacing,10px)*.7*4);} .plyr__menu__container .plyr__control--forward:after {border-left-color: #728197; border-left-color: var(--plyr-menu-arrow-color,#728197); right: 6.5px; right: calc(var(--plyr-control-spacing,10px)*.7*1.5 - var(--plyr-menu-item-arrow-size,4px));} .plyr__menu__container .plyr__control--forward.plyr__tab-focus:after,.plyr__menu__container .plyr__control--forward:hover:after {border-left-color: initial;} .plyr__menu__container .plyr__control--back {font-weight: 400; font-weight: var(--plyr-font-weight-regular,400); margin: 7px; margin: calc(var(--plyr-control-spacing,10px)*.7); margin-bottom: 3.5px; margin-bottom: calc(var(--plyr-control-spacing,10px)*.7/2); padding-left: 28px; padding-left: calc(var(--plyr-control-spacing,10px)*.7*4); position: relative; width: calc(100% - 14px); width: calc(100% - var(--plyr-control-spacing,10px)*.7*2);} .plyr__menu__container .plyr__control--back:after {border-right-color: #728197; border-right-color: var(--plyr-menu-arrow-color,#728197); left: 6.5px; left: calc(var(--plyr-control-spacing,10px)*.7*1.5 - var(--plyr-menu-item-arrow-size,4px));} .plyr__menu__container .plyr__control--back:before {background: #dcdfe5; background: var(--plyr-menu-back-border-color,#dcdfe5); box-shadow: 0 1px 0 #fff; box-shadow: 0 1px 0 var(--plyr-menu-back-border-shadow-color,#fff); content: ""; height: 1px; left: 0; margin-top: 3.5px; margin-top: calc(var(--plyr-control-spacing,10px)*.7/2); overflow: hidden; position: absolute; right: 0; top: 100%;} .plyr__menu__container .plyr__control--back.plyr__tab-focus:after,.plyr__menu__container .plyr__control--back:hover:after {border-right-color: initial;} .plyr__menu__container .plyr__control[role=menuitemradio] {padding-left: 7px; padding-left: calc(var(--plyr-control-spacing,10px)*.7);} .plyr__menu__container .plyr__control[role=menuitemradio]:after,.plyr__menu__container .plyr__control[role=menuitemradio]:before {border-radius: 100%;} .plyr__menu__container .plyr__control[role=menuitemradio]:before {background: rgba(0,0,0,.1); content: ""; display: block; flex-shrink: 0; height: 16px; margin-right: 10px; margin-right: var(--plyr-control-spacing,10px); transition: all .3s ease; width: 16px;} .plyr__menu__container .plyr__control[role=menuitemradio]:after {background: #fff; border: 0; height: 6px; left: 12px; opacity: 0; top: 50%; transform: translateY(-50%) scale(0); transition: transform .3s ease,opacity .3s ease; width: 6px;} .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before {background: #00b3ff; background: var(--plyr-control-toggle-checked-background,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));} .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:after {opacity: 1; transform: translateY(-50%) scale(1);} .plyr__menu__container .plyr__control[role=menuitemradio].plyr__tab-focus:before,.plyr__menu__container .plyr__control[role=menuitemradio]:hover:before {background: rgba(35,40,47,.1);} .plyr__menu__container .plyr__menu__value {align-items: center; display: flex; margin-left: auto; margin-right: calc(-7px - -2); margin-right: calc(var(--plyr-control-spacing,10px)*.7*-1 - -2); overflow: hidden; padding-left: 24.5px; padding-left: calc(var(--plyr-control-spacing,10px)*.7*3.5); pointer-events: none;} .plyr--full-ui input[type=range] {-webkit-appearance: none; background: 0 0; border: 0; border-radius: 26px; border-radius: calc(var(--plyr-range-thumb-height,13px)*2); color: #00b3ff; color: var(--plyr-range-fill-background,var(--plyr-color-main,var(--plyr-color-main,#00b3ff))); display: block; height: 19px; height: calc(var(--plyr-range-thumb-active-shadow-width,3px)*2 + var(--plyr-range-thumb-height,13px)); margin: 0; min-width: 0; padding: 0; transition: box-shadow .3s ease; width: 100%;} .plyr--full-ui input[type=range]::-webkit-slider-runnable-track {background: 0 0; background-image: linear-gradient(90deg,currentColor 0,transparent 0); background-image: linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0)); border: 0; border-radius: 2.5px; border-radius: calc(var(--plyr-range-track-height,5px)/ 2); height: 5px; height: var(--plyr-range-track-height,5px); -webkit-transition: box-shadow .3s ease; transition: box-shadow .3s ease; -webkit-user-select: none; user-select: none;} .plyr--full-ui input[type=range]::-webkit-slider-thumb {-webkit-appearance: none; background: #fff; background: var(--plyr-range-thumb-background,#fff); border: 0; border-radius: 100%; box-shadow: 0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2); box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)); height: 13px; height: var(--plyr-range-thumb-height,13px); margin-top: -4px; margin-top: calc(var(--plyr-range-thumb-height,13px)/ 2*-1 - var(--plyr-range-track-height,5px)/ 2*-1); position: relative; -webkit-transition: all .2s ease; transition: all .2s ease; width: 13px; width: var(--plyr-range-thumb-height,13px);} .plyr--full-ui input[type=range]::-moz-range-track {background: 0 0; border: 0; border-radius: 2.5px; border-radius: calc(var(--plyr-range-track-height,5px)/ 2); height: 5px; height: var(--plyr-range-track-height,5px); -moz-transition: box-shadow .3s ease; transition: box-shadow .3s ease; user-select: none;} .plyr--full-ui input[type=range]::-moz-range-thumb {background: #fff; background: var(--plyr-range-thumb-background,#fff); border: 0; border-radius: 100%; box-shadow: 0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2); box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)); height: 13px; height: var(--plyr-range-thumb-height,13px); position: relative; -moz-transition: all .2s ease; transition: all .2s ease; width: 13px; width: var(--plyr-range-thumb-height,13px);} .plyr--full-ui input[type=range]::-moz-range-progress {background: currentColor; border-radius: 2.5px; border-radius: calc(var(--plyr-range-track-height,5px)/ 2); height: 5px; height: var(--plyr-range-track-height,5px);} .plyr--full-ui input[type=range]::-ms-track {color: transparent;} .plyr--full-ui input[type=range]::-ms-fill-upper,.plyr--full-ui input[type=range]::-ms-track {background: 0 0; border: 0; border-radius: 2.5px; border-radius: calc(var(--plyr-range-track-height,5px)/ 2); height:5px; height: var(--plyr-range-track-height,5px); -ms-transition: box-shadow .3s ease; transition: box-shadow .3s ease; user-select: none;} .plyr--full-ui input[type=range]::-ms-fill-lower {background: 0 0; background: currentColor; border: 0; border-radius: 2.5px; border-radius: calc(var(--plyr-range-track-height,5px)/ 2); height: 5px; height: var(--plyr-range-track-height,5px); -ms-transition: box-shadow .3s ease; transition: box-shadow .3s ease; user-select: none;} .plyr--full-ui input[type=range]::-ms-thumb {background: #fff; background: var(--plyr-range-thumb-background,#fff); border: 0; border-radius: 100%; box-shadow: 0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2); box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)); height: 13px; height: var(--plyr-range-thumb-height,13px); margin-top: 0; position: relative; -ms-transition: all .2s ease; transition: all .2s ease; width: 13px; width: var(--plyr-range-thumb-height,13px);} .plyr--full-ui input[type=range]::-ms-tooltip {display: none;} .plyr--full-ui input[type=range]:focus {outline: 0;} .plyr--full-ui input[type=range]::-moz-focus-outer {border: 0;} .plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track {outline-color: #00b3ff; outline-color: var(--plyr-tab-focus-color,var(--plyr-color-main,var(--plyr-color-main,#00b3ff))); outline-offset: 2px; outline-style: dotted; outline-width: 3px;}.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track {outline-color: #00b3ff; outline-color: var(--plyr-tab-focus-color,var(--plyr-color-main,var(--plyr-color-main,#00b3ff))); outline-offset: 2px; outline-style: dotted; outline-width: 3px;} .plyr--full-ui input[type=range].plyr__tab-focus::-ms-track {outline-color: #00b3ff; outline-color: var(--plyr-tab-focus-color,var(--plyr-color-main,var(--plyr-color-main,#00b3ff))); outline-offset: 2px; outline-style: dotted; outline-width: 3px;} .plyr__poster {background-color: #000; background-color: var(--plyr-video-background,var(--plyr-video-background,#000)); background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; transition: opacity .2s ease; width: 100%; z-index: 1;} .plyr--stopped.plyr__poster-enabled .plyr__poster {opacity: 1;} .plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster {display: none;} .plyr__time {font-size: 13px; font-size: var(--plyr-font-size-time,var(--plyr-font-size-small,13px));} .plyr__time+.plyr__time:before {content: "\2044"; margin-right: 10px; margin-right: var(--plyr-control-spacing,10px);} @media (max-width:767px) { .plyr__time+.plyr__time{display:none}}.plyr__tooltip {background: hsla(0,0%,100%,.9); background: var(--plyr-tooltip-background,hsla(0,0%,100%,.9)); border-radius: 3px; border-radius: var(--plyr-tooltip-radius,3px); bottom: 100%; box-shadow: 0 1px 2px rgba(0,0,0,.15); box-shadow: var(--plyr-tooltip-shadow,0 1px 2px rgba(0,0,0,.15)); color: #4a5464; color: var(--plyr-tooltip-color,#4a5464); font-size: 13px; font-size: var(--plyr-font-size-small,13px); font-weight: 400; font-weight: var(--plyr-font-weight-regular,400); left: 50%; line-height: 1.3; margin-bottom: 10px; margin-bottom: calc(var(--plyr-control-spacing,10px)/ 2*2); opacity: 0; padding: 5px 7.5px; padding: calc(var(--plyr-control-spacing,10px)/ 2) calc(var(--plyr-control-spacing,10px)/ 2*1.5); pointer-events: none; position: absolute; transform: translate(-50%,10px) scale(.8); transform-origin:50% 100%; transition: transform .2s ease .1s,opacity .2s ease .1s; white-space: nowrap; z-index: 2;} .plyr__tooltip:before {border-left: 4px solid transparent; border-left: var(--plyr-tooltip-arrow-size,4px) solid transparent; border-right: 4px solid transparent; border-right: var(--plyr-tooltip-arrow-size,4px) solid transparent; border-top: 4px solid hsla(0,0%,100%,.9); border-top: var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,hsla(0,0%,100%,.9)); bottom: -4px; bottom: calc(var(--plyr-tooltip-arrow-size,4px)*-1); content: ""; height: 0; left: 50%; position: absolute; transform: translateX(-50%); width: 0; z-index: 2;} .plyr .plyr__control.plyr__tab-focus .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible {opacity: 1; transform: translate(-50%) scale(1);} .plyr .plyr__control:hover .plyr__tooltip {z-index: 3;} .plyr__controls>.plyr__control:first-child .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip {left: 0; transform: translateY(10px) scale(.8); transform-origin: 0 100%;} .plyr__controls>.plyr__control:first-child .plyr__tooltip:before,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip:before {left: 16px; left: calc(var(--plyr-control-icon-size,18px)/ 2 + var(--plyr-control-spacing,10px)*.7);} .plyr__controls>.plyr__control:last-child .plyr__tooltip {left: auto; right: 0; transform: translateY(10px) scale(.8); transform-origin: 100% 100%;} .plyr__controls>.plyr__control:last-child .plyr__tooltip:before {left: auto; right: 16px; right: calc(var(--plyr-control-icon-size,18px)/ 2 + var(--plyr-control-spacing,10px)*.7); transform: translateX(50%);} .plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip {transform: translate(0) scale(1);} .plyr__progress {left: 6.5px; left: calc(var(--plyr-range-thumb-height,13px)*.5); margin-right: 13px; margin-right: var(--plyr-range-thumb-height,13px); position: relative;} .plyr__progress input[type=range],.plyr__progress__buffer {margin-left: -6.5px; margin-left: calc(var(--plyr-range-thumb-height,13px)*-.5); margin-right: -6.5px; margin-right: calc(var(--plyr-range-thumb-height,13px)*-.5); width:calc(100% + 13px); width: calc(100% + var(--plyr-range-thumb-height,13px));} .plyr__progress input[type=range] {position: relative; z-index: 2;} .plyr__progress .plyr__tooltip {font-size: 13px; font-size: var(--plyr-font-size-time,var(--plyr-font-size-small,13px)); left: 0;} .plyr__progress__buffer {-webkit-appearance: none; background: 0 0; border: 0; border-radius: 100px; height: 5px; height: var(--plyr-range-track-height,5px); left: 0; margin-top: -2.5px; margin-top: calc(var(--plyr-range-track-height,5px)/ 2*-1); padding: 0; position: absolute; top: 50%;} .plyr__progress__buffer::-webkit-progress-bar {background: 0 0;} .plyr__progress__buffer::-webkit-progress-value {background: currentColor; border-radius: 100px; min-width: 5px; min-width: var(--plyr-range-track-height,5px); -webkit-transition: width .2s ease; transition: width .2s ease} .plyr__progress__buffer::-moz-progress-bar {background: currentColor; border-radius: 100px; min-width: 5px; min-width: var(--plyr-range-track-height,5px); -moz-transition: width .2s ease; transition: width .2s ease;} .plyr__progress__buffer::-ms-fill {border-radius: 100px; -ms-transition: width .2s ease; transition: width .2s ease;} .plyr--loading .plyr__progress__buffer {animation: plyr-progress 1s linear infinite; background-image: linear-gradient(-45deg,rgba(35,40,47,.6) 25%,transparent 0,transparent 50%,rgba(35,40,47,.6) 0,rgba(35,40,47,.6) 75%,transparent 0,transparent); background-image: linear-gradient(-45deg,var(--plyr-progress-loading-background,rgba(35,40,47,.6)) 25%,transparent 25%,transparent 50%,var(--plyr-progress-loading-background,rgba(35,40,47,.6)) 50%,var(--plyr-progress-loading-background,rgba(35,40,47,.6)) 75%,transparent 75%,transparent); background-repeat: repeat-x; background-size: 25px 25px; background-size: var(--plyr-progress-loading-size,25px) var(--plyr-progress-loading-size,25px); color: transparent;} .plyr--video.plyr--loading .plyr__progress__buffer {background-color: hsla(0,0%,100%,.25); background-color:var(--plyr-video-progress-buffered-background,hsla(0,0%,100%,.25));} .plyr--audio.plyr--loading .plyr__progress__buffer {background-color: rgba(193,200,209,.6); background-color: var(--plyr-audio-progress-buffered-background,rgba(193,200,209,.6));} .plyr__volume {align-items: center; display: flex; max-width: 110px; min-width: 80px; position: relative; width: 20%;} .plyr__volume input[type=range] {margin-left: 5px; margin-left: calc(var(--plyr-control-spacing,10px)/ 2); margin-right: 5px; margin-right: calc(var(--plyr-control-spacing,10px)/ 2); position: relative; z-index: 2;} .plyr--is-ios .plyr__volume {min-width: 0; width: auto;} .plyr--audio {display: block;} .plyr--audio .plyr__controls {background: #fff; background: var(--plyr-audio-controls-background,#fff); border-radius: inherit; color: #4a5464; color: var(--plyr-audio-control-color,#4a5464); padding: 10px; padding: var(--plyr-control-spacing,10px);} .plyr--audio .plyr__control.plyr__tab-focus,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true] {background: #00b3ff; background: var(--plyr-audio-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b3ff))); color: #fff; color: var(--plyr-audio-control-color-hover,#fff);} .plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track {background-color: rgba(193,200,209,.6); background-color: var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,rgba(193,200,209,.6)));} .plyr--full-ui.plyr--audio input[type=range]::-moz-range-track {background-color: rgba(193,200,209,.6); background-color: var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,rgba(193,200,209,.6)));} .plyr--full-ui.plyr--audio input[type=range]::-ms-track {background-color: rgba(193,200,209,.6); background-color: var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,rgba(193,200,209,.6)));} .plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb {box-shadow: 0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2),0 0 0 3px rgba(35,40,47,.1); box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,rgba(35,40,47,.1));} .plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb {box-shadow: 0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2),0 0 0 3px rgba(35,40,47,.1); box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,rgba(35,40,47,.1));} .plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb {box-shadow: 0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2),0 0 0 3px rgba(35,40,47,.1); box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,rgba(35,40,47,.1));} .plyr--audio .plyr__progress__buffer {color: rgba(193,200,209,.6); color: var(--plyr-audio-progress-buffered-background,rgba(193,200,209,.6));} .plyr--video {background: #000; background: var(--plyr-video-background,var(--plyr-video-background,#000)); overflow: hidden;} .plyr--video.plyr--menu-open {overflow: visible;} .plyr__video-wrapper {background: #000; background: var(--plyr-video-background,var(--plyr-video-background,#000)); height: 100%; margin: auto; overflow: hidden; position: relative; width: 100%;} .plyr__video-embed,.plyr__video-wrapper--fixed-ratio {aspect-ratio: 16/9;} @supports not (aspect-ratio:16/9) { .plyr__video-embed,.plyr__video-wrapper--fixed-ratio {height: 0; padding-bottom: 56.25%; position: relative;}} .plyr__video-embed iframe,.plyr__video-wrapper--fixed-ratio video {border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%;} .plyr--full-ui .plyr__video-embed>.plyr__video-embed__container {padding-bottom: 240%; position: relative; transform: translateY(-38.28125%);} .plyr--video .plyr__controls {background: linear-gradient(transparent,rgba(0,0,0,.75));background:var(--plyr-video-controls-background,linear-gradient(transparent,rgba(0,0,0,.75))); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; bottom: 0; color: #fff; color: var(--plyr-video-control-color,#fff); left: 0; padding: 5px; padding: calc(var(--plyr-control-spacing,10px)/ 2); padding-top: 20px; padding-top: calc(var(--plyr-control-spacing,10px)*2); position: absolute; right: 0; transition: opacity .4s ease-in-out,transform .4s ease-in-out; z-index: 3;} @media (min-width:480px) { .plyr--video .plyr__controls {padding: 10px; padding: var(--plyr-control-spacing,10px); padding-top: 35px; padding-top: calc(var(--plyr-control-spacing,10px)*3.5);}} .plyr--video.plyr--hide-controls .plyr__controls {opacity: 0; pointer-events: none; transform: translateY(100%);} .plyr--video .plyr__control.plyr__tab-focus,.plyr--video .plyr__control:hover,.plyr--video .plyr__control[aria-expanded=true] {background: #00b3ff; background: var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b3ff))); color: #fff; color: var(--plyr-video-control-color-hover,#fff);} .plyr__control--overlaid {background: #00b3ff; background: var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b3ff))); border: 0; border-radius: 100%; color: #fff; color: var(--plyr-video-control-color,#fff); display: none; left: 50%; opacity: .9; padding: 15px; padding: calc(var(--plyr-control-spacing,10px)*1.5); position: absolute; top: 50%; transform: translate(-50%,-50%); transition: .3s; z-index: 2;} .plyr__control--overlaid svg {left: 2px; position: relative;} .plyr__control--overlaid:focus,.plyr__control--overlaid:hover {opacity: 1;} .plyr--playing .plyr__control--overlaid {opacity: 0; visibility: hidden;} .plyr--full-ui.plyr--video .plyr__control--overlaid {display: block;} .plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track {background-color: hsla(0,0%,100%,.25); background-color: var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,hsla(0,0%,100%,.25)));} .plyr--full-ui.plyr--video input[type=range]::-moz-range-track {background-color: hsla(0,0%,100%,.25); background-color: var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,hsla(0,0%,100%,.25)));} .plyr--full-ui.plyr--video input[type=range]::-ms-track {background-color: hsla(0,0%,100%,.25); background-color: var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,hsla(0,0%,100%,.25)));} .plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb {box-shadow: 0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2),0 0 0 3px hsla(0,0%,100%,.5); box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,hsla(0,0%,100%,.5));} .plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb {box-shadow: 0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2),0 0 0 3px hsla(0,0%,100%,.5); box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,hsla(0,0%,100%,.5));} .plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb {box-shadow: 0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2),0 0 0 3px hsla(0,0%,100%,.5); box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,hsla(0,0%,100%,.5));} .plyr--video .plyr__progress__buffer {color: hsla(0,0%,100%,.25); color: var(--plyr-video-progress-buffered-background,hsla(0,0%,100%,.25));} .plyr:fullscreen {background: #000; border-radius: 0!important; height: 100%; margin: 0; width: 100%;} .plyr:fullscreen video {height: 100%;} .plyr:fullscreen .plyr__video-wrapper {height: 100%; position: static;} .plyr:fullscreen.plyr--vimeo .plyr__video-wrapper {height: 0; position: relative;} .plyr:fullscreen .plyr__control .icon--exit-fullscreen {display: block;} .plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg {display: none;} .plyr:fullscreen.plyr--hide-controls {cursor: none;} @media (min-width:1024px) { .plyr:-webkit-full-screen .plyr__captions {font-size: 21px; font-size: var(--plyr-font-size-xlarge,21px);} .plyr:fullscreen .plyr__captions {font-size: 21px; font-size: var(--plyr-font-size-xlarge,21px);}} .plyr:-webkit-full-screen {background: #000; border-radius: 0!important; height: 100%; margin: 0; width: 100%;} .plyr:-webkit-full-screen video {height: 100%;} .plyr:-webkit-full-screen .plyr__video-wrapper {height: 100%; position: static;} .plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper {height: 0; position: relative;} .plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen {display: block;} .plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg {display: none;} .plyr:-webkit-full-screen.plyr--hide-controls {cursor: none;} @media (min-width:1024px) {. plyr: -webkit-full-screen .plyr__captions {font-size: 21px; font-size: var(--plyr-font-size-xlarge,21px);}} .plyr:-moz-full-screen {background: #000; border-radius: 0!important; height: 100%; margin: 0; width: 100%;} .plyr:-moz-full-screen video {height: 100%;} .plyr:-moz-full-screen .plyr__video-wrapper {height: 100%; position: static;} .plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper {height: 0; position: relative;} .plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen {display: block;} .plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg {display: none;} .plyr:-moz-full-screen.plyr--hide-controls {cursor: none;} @media (min-width:1024px) { . plyr:-moz-full-screen .plyr__captions {font-size: 21px; font-size: var(--plyr-font-size-xlarge,21px);}} .plyr:-ms-fullscreen {background: #000; border-radius: 0!important; height: 100%; margin: 0; width: 100%;} .plyr:-ms-fullscreen video {height: 100%;} .plyr:-ms-fullscreen .plyr__video-wrapper {height: 100%; position: static;} .plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper {height: 0; position: relative;} .plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen {display: block;} .plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg {display: none;} .plyr:-ms-fullscreen.plyr--hide-controls {cursor: none;} @media (min-width:1024px) { .plyr:-ms-fullscreen .plyr__captions {font-size: 21px; font-size: var(--plyr-font-size-xlarge,21px):}} .plyr--fullscreen-fallback {background: #000; border-radius: 0!important; bottom: 0; display: block; height: 100%; left: 0; margin: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 10000000} .plyr--fullscreen-fallback video {height: 100%;} .plyr--fullscreen-fallback .plyr__video-wrapper {height: 100%; position: static;} .plyr--fullscreen-fallback.plyr--vimeo .plyr__video-wrapper {height:0;position: relative;} .plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen {display: block;} .plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg {display: none;} .plyr--fullscreen-fallback.plyr--hide-controls {cursor: none;} @media (min-width:1024px) { .plyr--fullscreen-fallback .plyr__captions {font-size: 21px; font-size: var(--plyr-font-size-xlarge,21px);}} .plyr__ads {border-radius: inherit; bottom: 0; cursor: pointer; left: 0; overflow: hidden; position: absolute; right: 0; top: 0; z-index: -1;} .plyr__ads>div,.plyr__ads>div iframe {height: 100%; position: absolute; width: 100%;} .plyr__ads:after {background: #23282f; border-radius: 2px; bottom: 10px; bottom: var(--plyr-control-spacing,10px); color: #fff; content: attr(data-badge-text); font-size: 11px; padding: 2px 6px; pointer-events: none; position: absolute; right: 10px; right:var(--plyr-control-spacing,10px); z-index: 3;} .plyr__ads:after:empty {display: none;} .plyr__cues {background: currentColor; display: block; height: 5px; height: var(--plyr-range-track-height,5px); left: 0; margin: -var(--plyr-range-track-height,5px)/2 0 0; opacity: .8; position: absolute; top:50%; width: 3px; z-index: 3;} .plyr__preview-thumb {background-color: hsla(0,0%,100%,.9); background-color: var(--plyr-tooltip-background,hsla(0,0%,100%,.9)); border-radius: 3px; bottom: 100%; box-shadow: 0 1px 2px rgba(0,0,0,.15); box-shadow: var(--plyr-tooltip-shadow,0 1px 2px rgba(0,0,0,.15)); margin-bottom: 10px; margin-bottom: calc(var(--plyr-control-spacing,10px)/ 2*2); opacity: 0; padding: 3px; padding: var(--plyr-tooltip-radius,3px); pointer-events: none; position: absolute; transform: translateY(10px) scale(.8); transform-origin: 50% 100%; transition: transform .2s ease .1s,opacity .2s ease .1s; z-index: 2;} .plyr__preview-thumb--is-shown {opacity: 1; transform: translate(0) scale(1);} .plyr__preview-thumb:before {border-left: 4px solid transparent; border-left: var(--plyr-tooltip-arrow-size,4px) solid transparent; border-right: 4px solid transparent; border-right: var(--plyr-tooltip-arrow-size,4px) solid transparent; border-top: 4px solid hsla(0,0%,100%,.9); border-top: var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,hsla(0,0%,100%,.9)); bottom: -4px; bottom: calc(var(--plyr-tooltip-arrow-size,4px)*-1); content: ""; height: 0; left: 50%; position: absolute; transform: translateX(-50%); width: 0; z-index: 2;} .plyr__preview-thumb__image-container {background: #c1c8d1; border-radius: 2px; border-radius: calc(var(--plyr-tooltip-radius,3px) - 1px); overflow: hidden; position: relative; z-index: 0;} .plyr__preview-thumb__image-container img {height: 100%; left: 0; max-height: none; max-width: none; position: absolute; top: 0; width: 100%;} .plyr__preview-thumb__time-container {bottom: 6px; left:0; position: absolute; right: 0; white-space: nowrap; z-index: 3;} .plyr__preview-thumb__time-container span {background-color: rgba(0,0,0,.55); border-radius: 2px; border-radius: calc(var(--plyr-tooltip-radius,3px) - 1px); color: #fff; font-size: 13px; font-size: var(--plyr-font-size-time,var(--plyr-font-size-small,13px)); padding: 3px 6px;} .plyr__preview-scrubbing {bottom: 0; filter: blur(1px); height: 100%; left: 0; margin: auto; opacity: 0; overflow: hidden; pointer-events: none; position: absolute; right: 0; top: 0; transition: opacity .3s ease; width:100%; z-index: 1;} .plyr__preview-scrubbing--is-shown {opacity: 1;} .plyr__preview-scrubbing img {height: 100%; left: 0; max-height: none; max-width: none; -o-object-fit: contain; object-fit: contain; position: absolute;  top: 0; width: 100%;} .plyr--no-transition {transition: none!important;} .plyr__sr-only {clip: rect(1px,1px,1px,1px); border: 0!important; height: 1px!important; overflow: hidden; padding: 0!important; position: absolute!important; width: 1px!important;} .plyr [hidden] {display: none!important;}main {width: 100%; height: 329px; display: flex; flex-direction: column; justify-content: center; align-items: center;} .main p, .main span {width: 388px; padding: 3px 10px; border-radius: 5px; font-size: 14px;} p:nth-of-type(1) {background-color: #f4f4f5; color: #909399; animation: 1s blink-normal infinite step-end;} p:nth-of-type(2) {background-color: #fdf6ec; color: #e6a23c; animation: .5s blink-alternate infinite; animation-direction: alternate; } p:nth-of-type(3) {background: #fef0f0; color: #f56c6c; animation: .5s blink-alternate infinite; animation-direction: alternate-reverse;} @keyframes blink-normal { 50% {color: transparent;}} @keyframes blink-alternate { to {color: transparent;}}.btnBar .btnForm, .btnBar .btn {display: block;} .btn {border: solid 2px; cursor: pointer; margin: 0; padding: 2px 6px 3px; text-align: center;} .largeBtn {display: block; width: 100%;} .btnForm {display: inline; border: none; padding: 0;} .btnD, .acb .btnC, .btnI {background: #f3f4f5; border-color: #ccc #aaa #999; color: #505c77;} .acb .btnD, .btnC, .acb .btnI {background: #5b74a8; border-color: #8a9ac5 #29447E #1a356e; color: #fff;} .btnS {background: #69a74e; border-color: #98c37d #3b6e22 #2c5115; color: #fff;} .btnN {background: #ee3f10; border-color: #f48365 #8d290e #762610; color: #fff;} .btn, .btnForm {display: inline-block;} .btn + .btn, .btnForm + .btnForm, .btn + .btnForm, .btnForm + .btn {margin-left: 3px;} .largeBtn + .largeBtn {margin- left: 0; margin-top: 6px;} .btn input {background: none; border: none; margin: 0; padding: 0;} .btnD input, .acb .btnC input, .btnI input {color: #505c77;} .acb .btnD input, .btnC input, .acb .btnI input, .btnS input, .btnN input {color: #fff;}/* common.css */ INSTRUMENT { display: inline; } ARTICLE, HEADLINE, AUTHOR, PARA { display: block; } ARTICLE { font-family: sans-serif; background: white; color: black; } AUTHOR { margin: 1em; color: red; } HEADLINE { text-align: right; margin-bottom: 2em; } PARA { line-height: 1.5; margin-left: 15%; } INSTRUMENT { color: blue; } ARTICLE { font-family: serif; background: white; color: #003; } AUTHOR { font-size: large; margin: 1em 0; } HEADLINE { font-size: x-large; margin-bottom: 1em; } PARA { text-indent: 1em; text-align: justify; } INSTRUMENT { font-style: italic;}