Template:Peking/mdl/MDLnew

@charset "UTF-8";

/* SHADOW */ .mdl-shadow--2dp {

   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }

.mdl-shadow--3dp {

   box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12); }

.mdl-shadow--4dp {

   box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); }

.mdl-shadow--6dp {

   box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2); }

.mdl-shadow--8dp {

   box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); }

.mdl-shadow--16dp {

   box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); }

.mdl-shadow--24dp {

   box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2); }

/* card */ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu, .mdl-icon-toggle, .mdl-item, .mdl-radio, .mdl-slider, .mdl-switch, .mdl-tabs__tab {

   -webkit-tap-highlight-color: transparent;
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

.mdl-card {

   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   font-size: 16px;
   font-weight: 400;
   min-height: 200px;
   overflow: hidden;
   width: 330px;
   z-index: 1;
   position: relative;
   background: rgb(255,255,255);
   border-radius: 2px;
   box-sizing: border-box; }

.mdl-card__media {

   background-color: rgb(255,64,129);
   background-repeat: repeat;
   background-position: 50% 50%;
   background-size: cover;
   background-origin: padding-box;
   background-attachment: scroll;
   box-sizing: border-box; }

.mdl-card__title {

   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
   color: rgb(0,0,0);
   display: block;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-justify-content: stretch;
   -ms-flex-pack: stretch;
   justify-content: stretch;
   line-height: normal;
   padding: 16px 16px;
   -webkit-perspective-origin: 165px 56px;
   perspective-origin: 165px 56px;
   -webkit-transform-origin: 165px 56px;
   transform-origin: 165px 56px;
   box-sizing: border-box; }

.mdl-card__title.mdl-card--border {

   border-bottom: 1px solid rgba(0, 0, 0, 0.1); }

.mdl-card__title-text {

   -webkit-align-self: flex-end;
   -ms-flex-item-align: end;
   align-self: flex-end;
   color: inherit;
   display: block;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   font-size: 24px;
   font-weight: 300;
   line-height: normal;
   overflow: hidden;
   -webkit-transform-origin: 149px 48px;
   transform-origin: 149px 48px;
   margin: 0; }

.mdl-card__subtitle-text {

   font-size: 14px;
   color: rgba(0,0,0, 0.54);
   margin: 0; }

.mdl-card__supporting-text {

   color: rgba(0,0,0, 0.54);
   font-size: 1rem;
   line-height: 18px;
   overflow: hidden;
   padding: 16px 16px;
   width: 90%; }

.mdl-card__supporting-text.mdl-card--border {

   border-bottom: 1px solid rgba(0, 0, 0, 0.1); }

.mdl-card__actions {

   font-size: 16px;
   line-height: normal;
   width: 100%;
   background-color: transparent;
   padding: 8px;
   box-sizing: border-box; }

.mdl-card__actions.mdl-card--border {

   border-top: 1px solid rgba(0, 0, 0, 0.1); }

.mdl-card--expand {

   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1; }

.mdl-card__menu {

   position: absolute;
   right: 16px;
   top: 16px; }

/*BUTTON*/ .mdl-button .mdl-badge[data-badge]:after {

   top: -10px;
   right: -5px; }

.mdl-button {

   background: transparent;
   border: none;
   border-radius: 2px;
   color: rgb(0,0,0);
   position: relative;
   height: 36px;
   margin: 0;
   min-width: 64px;
   padding: 0 16px;
   display: inline-block;
   font-family: "Roboto", "Helvetica", "Arial", sans-serif;
   font-size: 14px;
   font-weight: 500;
   text-transform: uppercase;
   line-height: 1;
   letter-spacing: 0;
   overflow: hidden;
   will-change: box-shadow;
   transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   outline: none;
   cursor: pointer;
   text-decoration: none;
   text-align: center;
   line-height: 36px;
   vertical-align: middle; }

.mdl-button::-moz-focus-inner {

   border: 0; }

.mdl-button:hover {

   background-color: rgba(158,158,158, 0.20); }

.mdl-button:focus:not(:active) {

   background-color: rgba(0,0,0, 0.12); }

.mdl-button:active {

   background-color: rgba(158,158,158, 0.40); }

.mdl-button.mdl-button--colored {

   color: rgb(63,81,181); }

.mdl-button.mdl-button--colored:focus:not(:active) {

   background-color: rgba(0,0,0, 0.12); }

input.mdl-button[type="submit"] {

   -webkit-appearance: none; }

.mdl-button--raised {

   background: rgba(158,158,158, 0.20);
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }

.mdl-button--raised:active {

   box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
   background-color: rgba(158,158,158, 0.40); }

.mdl-button--raised:focus:not(:active) {

   box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
   background-color: rgba(158,158,158, 0.40); }

.mdl-button--raised.mdl-button--colored {

   background: rgb(63,81,181);
   color: rgb(255,255,255); }

.mdl-button--raised.mdl-button--colored:hover {

   background-color: rgb(63,81,181); }

.mdl-button--raised.mdl-button--colored:active {

   background-color: rgb(63,81,181); }

.mdl-button--raised.mdl-button--colored:focus:not(:active) {

   background-color: rgb(63,81,181); }

.mdl-button--raised.mdl-button--colored .mdl-ripple {

   background: rgb(255,255,255); }

.mdl-button--fab {

   border-radius: 50%;
   font-size: 24px;
   height: 56px;
   margin: auto;
   min-width: 56px;
   width: 56px;
   padding: 0;
   overflow: hidden;
   background: rgba(158,158,158, 0.20);
   box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
   position: relative;
   line-height: normal; }

.mdl-button--fab .material-icons {

   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-12px, -12px);
   transform: translate(-12px, -12px);
   line-height: 24px;
   width: 24px; }

.mdl-button--fab.mdl-button--mini-fab {

   height: 40px;
   min-width: 40px;
   width: 40px; }

.mdl-button--fab .mdl-button__ripple-container {

   border-radius: 50%;
   -webkit-mask-image: -webkit-radial-gradient(circle, white, black); }

.mdl-button--fab:active {

   box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
   background-color: rgba(158,158,158, 0.40); }

.mdl-button--fab:focus:not(:active) {

   box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
   background-color: rgba(158,158,158, 0.40); }

.mdl-button--fab.mdl-button--colored {

   background: rgb(255,64,129);
   color: rgb(255,255,255); }

.mdl-button--fab.mdl-button--colored:hover {

   background-color: rgb(255,64,129); }

.mdl-button--fab.mdl-button--colored:focus:not(:active) {

   background-color: rgb(255,64,129); }

.mdl-button--fab.mdl-button--colored:active {

   background-color: rgb(255,64,129); }

.mdl-button--fab.mdl-button--colored .mdl-ripple {

   background: rgb(255,255,255); }

.mdl-button--icon {

   border-radius: 50%;
   font-size: 24px;
   height: 32px;
   margin-left: 0;
   margin-right: 0;
   min-width: 32px;
   width: 32px;
   padding: 0;
   overflow: hidden;
   color: inherit;
   line-height: normal; }

.mdl-button--icon .material-icons {

   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-12px, -12px);
   transform: translate(-12px, -12px);
   line-height: 24px;
   width: 24px; }

.mdl-button--icon.mdl-button--mini-icon {

   height: 24px;
   min-width: 24px;
   width: 24px; }

.mdl-button--icon.mdl-button--mini-icon .material-icons {

   top: 0px;
   left: 0px; }

.mdl-button--icon .mdl-button__ripple-container {

   border-radius: 50%;
   -webkit-mask-image: -webkit-radial-gradient(circle, white, black); }

.mdl-button__ripple-container {

   display: block;
   height: 100%;
   left: 0px;
   position: absolute;
   top: 0px;
   width: 100%;
   z-index: 0;
   overflow: hidden; }

.mdl-button[disabled] .mdl-button__ripple-container .mdl-ripple, .mdl-button.mdl-button--disabled .mdl-button__ripple-container .mdl-ripple {

   background-color: transparent; }

.mdl-button--primary.mdl-button--primary {

   color: rgb(63,81,181); }

.mdl-button--primary.mdl-button--primary .mdl-ripple {

   background: rgb(255,255,255); }

.mdl-button--primary.mdl-button--primary.mdl-button--raised, .mdl-button--primary.mdl-button--primary.mdl-button--fab {

   color: rgb(255,255,255);
   background-color: rgb(63,81,181); }

.mdl-button--accent.mdl-button--accent {

   color: rgb(255,64,129); }

.mdl-button--accent.mdl-button--accent .mdl-ripple {

   background: rgb(255,255,255); }

.mdl-button--accent.mdl-button--accent.mdl-button--raised, .mdl-button--accent.mdl-button--accent.mdl-button--fab {

   color: rgb(255,255,255);
   background-color: rgb(255,64,129); }

.mdl-button[disabled][disabled], .mdl-button.mdl-button--disabled.mdl-button--disabled {

   color: rgba(0,0,0, 0.26);
   cursor: default;
   background-color: transparent; }

.mdl-button--fab[disabled][disabled], .mdl-button--fab.mdl-button--disabled.mdl-button--disabled {

   background-color: rgba(0,0,0, 0.12);
   color: rgba(0,0,0, 0.26); }

.mdl-button--raised[disabled][disabled], .mdl-button--raised.mdl-button--disabled.mdl-button--disabled {

   background-color: rgba(0,0,0, 0.12);
   color: rgba(0,0,0, 0.26);
   box-shadow: none; }

.mdl-button--colored[disabled][disabled], .mdl-button--colored.mdl-button--disabled.mdl-button--disabled {

   color: rgba(0,0,0, 0.26); }

.mdl-button .material-icons {

   vertical-align: middle; }

.mdl-textfield--expandable .mdl-button--icon {

   top: 16px; }