Warning, /webapps/ocs-webserver/httpdocs/theme/flatui/css/stylesheets/template.css is written in an unsupported language. File is not indexed.
0001 @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
0002 /*==================*/
0003 /* VARS */
0004 /*==================*/
0005 /*==================*/
0006 /* MIXINS */
0007 /*==================*/
0008 .bg_sheet {
0009 background-image: url(../img/bg_sheet.png);
0010 }
0011 .bg_sheet_statistics {
0012 background-image: url(../img/statistics_sheet.png);
0013 }
0014 .unstyled_list {
0015 list-style-type: none;
0016 padding: 0px;
0017 margin: 0px;
0018 }
0019 .hand-with-coin {
0020 display: inline-block;
0021 background-image: url('../img/new/button/hand-w-coin.png');
0022 height: 61px;
0023 width: 61px;
0024 }
0025 .hand-with-coin.v-2 {
0026 background-image: url('../img/new/button/hand-w-coin-2.png');
0027 }
0028 /**-- SPECIFIC USE CLASSES ---------*/
0029 .clearfix:after {
0030 content: ".";
0031 display: block;
0032 clear: both;
0033 visibility: hidden;
0034 line-height: 0;
0035 height: 0;
0036 }
0037 a {
0038 text-decoration: none;
0039 color: #2673b0;
0040 }
0041 a:hover,
0042 a:active,
0043 a:focus {
0044 color: #2673b0;
0045 }
0046 .full-width {
0047 width: 100% !important;
0048 }
0049 .left {
0050 float: left;
0051 }
0052 .right {
0053 float: right;
0054 }
0055 .clear {
0056 clear: both;
0057 }
0058 .margin-auto {
0059 margin: auto;
0060 }
0061 .margin-bottom-10 {
0062 margin-bottom: 10px;
0063 }
0064 .margin-bottom-20 {
0065 margin-bottom: 20px;
0066 }
0067 .margin-left-0 {
0068 margin-left: 0;
0069 }
0070 .margin-left-10 {
0071 margin-left: 10px;
0072 }
0073 .margin-left-30 {
0074 margin-left: 30px;
0075 }
0076 .margin-top-5 {
0077 margin-top: -5px;
0078 }
0079 .margin-top-40 {
0080 margin-top: 40px;
0081 }
0082 .padding-both-5 {
0083 padding: 0 5px;
0084 }
0085 .padding-both-20 {
0086 padding: 0 20px;
0087 }
0088 .center {
0089 text-align: center;
0090 }
0091 .relative {
0092 position: relative;
0093 }
0094 .absolute {
0095 position: absolute;
0096 }
0097 .inline {
0098 display: inline-block;
0099 }
0100 .block {
0101 display: block;
0102 }
0103 .aligncenter {
0104 margin: 0 auto;
0105 }
0106 .small {
0107 font-size: 12px;
0108 }
0109 .large {
0110 font-size: 18px;
0111 }
0112 .light {
0113 font-weight: 300;
0114 }
0115 .bold {
0116 font-weight: 700;
0117 }
0118 .italic {
0119 font-style: italic;
0120 }
0121 .lightblue {
0122 color: #2673b0;
0123 }
0124 .lightgrey {
0125 color: #95a5a6;
0126 }
0127 .lightlightgrey {
0128 color: #cacfd2;
0129 }
0130 .greyblue {
0131 color: #bdc3c7;
0132 }
0133 .purple {
0134 color: #8e44ad;
0135 }
0136 h1.page-title {
0137 color: #34495e;
0138 font-weight: bold;
0139 font-size: 32px;
0140 }
0141 .box {
0142 border-radius: 5px;
0143 margin-bottom: 10px;
0144 }
0145 .bordered {
0146 border: 1px solid #bdc3c7;
0147 }
0148 .bordered-top-left-right {
0149 border: 1px solid #bdc3c7;
0150 border-bottom: none;
0151 }
0152 .margin-top_5 {
0153 margin-top: 5px;
0154 }
0155 .margin-top-15 {
0156 margin-top: 15px;
0157 }
0158 .margin-top-25 {
0159 margin-top: 25px;
0160 }
0161 .margin-top-80 {
0162 margin-top: 80px;
0163 }
0164 .margin-bottom-15 {
0165 margin-bottom: 15px;
0166 }
0167 .margin-left-15 {
0168 margin-left: 15px;
0169 }
0170 .margin-right-5 {
0171 margin-right: 5px;
0172 }
0173 .wrapper {
0174 width: 1170px;
0175 margin: auto;
0176 }
0177 .width-150 {
0178 width: 150px;
0179 }
0180 .borderless {
0181 border: none !important;
0182 }
0183 .default-cursor {
0184 cursor: default !important;
0185 }
0186 .cursor-hand {
0187 cursor: pointer !important;
0188 }
0189 /**-- /SPECIFIC USE CLASSES --------*/
0190 /**-- ICONS ------------------------*/
0191 em.icon {
0192 display: inline-block;
0193 background-image: url(/theme/flatui/img/bg_sheet.png);
0194 }
0195 em.pling-icon-gold {
0196 width: 30px;
0197 height: 30px;
0198 background-image: url('/theme/flatui/img/new/box-logo.png')!important;
0199 background-size: cover;
0200 }
0201 em.gear-icon {
0202 width: 16px;
0203 height: 16px;
0204 background-position: -672px -129px;
0205 }
0206 em.info-icon {
0207 width: 31px;
0208 height: 30px;
0209 background-position: -289px -64px;
0210 }
0211 em.calender-icon {
0212 background-position: -223px -63px;
0213 width: 18px;
0214 height: 15px;
0215 }
0216 em.arrow-down-gray {
0217 width: 16px;
0218 height: 8px;
0219 background-position: -687px -25px;
0220 }
0221 em.arrow-right-black {
0222 width: 7px;
0223 height: 12px;
0224 background: url(../img/right_arrow_small.png) center center;
0225 /*background-position: -684px -35px;*/
0226 }
0227 em.arrow-white-up {
0228 width: 16px;
0229 height: 8px;
0230 background-position: -748px -103px;
0231 }
0232 em.arrow-gray-down {
0233 width: 16px;
0234 height: 8px;
0235 background-position: -748px -113px;
0236 }
0237 em.icon-expand {
0238 width: 12px;
0239 height: 10px;
0240 background-position: -734px -31px;
0241 }
0242 em.icon-contract {
0243 width: 12px;
0244 height: 10px;
0245 background-position: -750px -31px;
0246 }
0247 .icon-facebook,
0248 .icon-twitter,
0249 .icon-google {
0250 width: 40px;
0251 height: 40px;
0252 cursor: pointer;
0253 display: inline-block;
0254 background-image: url(../img/bg_sheet.png);
0255 }
0256 .icon-facebook {
0257 background-position: 0px -105px;
0258 }
0259 .icon-facebook:hover {
0260 background-position: 0px -145px;
0261 }
0262 .icon-twitter {
0263 background-position: -40px -105px;
0264 }
0265 .icon-twitter:hover {
0266 background-position: -40px -145px;
0267 }
0268 .icon-google {
0269 background-position: -80px -105px;
0270 }
0271 .icon-google:hover {
0272 background-position: -80px -145px;
0273 }
0274 em.heart-icon {
0275 width: 26px;
0276 height: 24px;
0277 background-position: -703px -48px;
0278 }
0279 em.heart-icon:hover {
0280 background-position: -673px -48px;
0281 }
0282 em.heart-icon-purple {
0283 width: 26px;
0284 height: 24px;
0285 background-position: -733px -48px;
0286 }
0287 em.share-icon {
0288 height: 23px;
0289 width: 23px;
0290 background-image: url(/theme/flatui/img/icon-share.png);
0291 }
0292 em.report-icon {
0293 height: 23px;
0294 width: 23px;
0295 background-image: url(/theme/flatui/img/icon-report.png);
0296 }
0297 em.section-heading-icon {
0298 width: 24px;
0299 height: 24px;
0300 margin: -3px 5px 0 0;
0301 }
0302 em.icon-profile {
0303 background-position: -192px -128px;
0304 }
0305 em.icon-profile-picture {
0306 background-position: -224px -128px;
0307 }
0308 em.icon-password {
0309 background-position: -257px -128px;
0310 }
0311 em.icon-newsletter {
0312 background-position: -320px -128px;
0313 }
0314 em.icon-website {
0315 background-position: -288px -128px;
0316 }
0317 em.icon-payment {
0318 background-position: -347px -128px;
0319 }
0320 /**-- /ICONS ------------------------*/
0321 /**-- BUTTONS -------------------**/
0322 .plingbutton {
0323 height: 60px;
0324 width: 204px;
0325 background: url(/theme/flatui/img/new/button.png);
0326 padding: 0;
0327 background-color: white !important;
0328 margin: 0 auto;
0329 }
0330 .plingbutton a,
0331 .plingbutton button {
0332 display: block;
0333 height: 100%;
0334 width: 100%;
0335 }
0336 .body-pling-button {
0337 margin: 0px;
0338 }
0339 .btn-pling-2 {
0340 font-size: 1.1em;
0341 font-weight: 400;
0342 padding: 0.4em 0.8em;
0343 height: 41px;
0344 margin: 0;
0345 background: #2673b0;
0346 color: white;
0347 border-radius: 5px;
0348 border: 1px solid #7f7f7f;
0349 text-shadow: 1px 1px 1px #444;
0350 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
0351 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
0352 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
0353 -webkit-transition: all 0.2s ease-out;
0354 -moz-transition: all 0.2s ease-out;
0355 -ms-transition: all 0.2s ease-out;
0356 -o-transition: all 0.2s ease-out;
0357 }
0358 .btn-pling-2:hover {
0359 background: #2b81c5;
0360 }
0361 .btn-pling-2:active {
0362 -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
0363 -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
0364 box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
0365 background: #21659b;
0366 }
0367 .btn-submit {
0368 background: #2673b0;
0369 padding: 10px 35px;
0370 }
0371 .btn-purple {
0372 background: #9b59b6;
0373 padding: 10px 35px;
0374 }
0375 .btn-grey {
0376 background: #393d3f;
0377 padding: 10px 35px;
0378 }
0379 .btn-light-grey {
0380 background: #517892;
0381 padding: 10px 35px;
0382 }
0383 .btn-native {
0384 background-color: #14B9D5;
0385 }
0386 .btn.btn-native:hover,
0387 .btn.btn-native:focus,
0388 .btn-group:focus .btn.btn-native.dropdown-toggle {
0389 background-color: #0e778a;
0390 }
0391 .btn-min-width {
0392 min-width: 120px;
0393 }
0394 /**-- /BUTTONS ------------------**/
0395 /**-- COMMON ----------------------*/
0396 * {
0397 outline: none !important;
0398 }
0399 .icon-expand {
0400 right: 0;
0401 top: 0;
0402 width: 45px;
0403 height: 50px;
0404 padding-bottom: 2px;
0405 background: url(../img/icon-expand.png);
0406 border-left: 1px solid #bdc3c7;
0407 }
0408 .expand {
0409 right: 0;
0410 top: 0px;
0411 width: 45px;
0412 height: 98%;
0413 padding-bottom: 2px;
0414 border-left: 1px solid #bdc3c7;
0415 }
0416 .expand em {
0417 position: absolute;
0418 top: 50%;
0419 left: 50%;
0420 margin-left: -6px;
0421 margin-top: -5px;
0422 border-left: 0px;
0423 }
0424 /**-- COMMON ----------------------*/
0425 /*==================*/
0426 /* TEMPLATE */
0427 /*==================*/
0428 #files-panel {
0429 font-size: 10pt;
0430 }
0431 /**
0432 .btn {
0433 background: #bdc3c7 none repeat scroll 0 0;
0434 border: medium none;
0435 border-radius: 6px;
0436 box-shadow: none;
0437 color: #ffffff;
0438 line-height: 22px;
0439 padding: 9px 12px 10px;
0440 text-decoration: none;
0441 text-shadow: none;
0442 transition: all 0.25s ease 0s;
0443 }
0444 */
0445 .btn.btn-large {
0446 font-size: 16.996px;
0447 /* 17px */
0448 line-height: 20px;
0449 padding: 12px 18px 13px;
0450 }
0451 .btn.btn-native {
0452 background-color: #2673b0;
0453 color: white;
0454 }
0455 .btn.btn-native:hover {
0456 background-color: #2b81c5;
0457 }
0458 .btn.btn-native:active,
0459 .btn.btn-native:focus {
0460 background-color: #21659b;
0461 color: white;
0462 }
0463 .btn.btn-native {
0464 background-color: #2673b0;
0465 color: white;
0466 }
0467 .btn.btn-native:hover {
0468 background-color: #2b81c5;
0469 }
0470 .btn.btn-native.disabled {
0471 cursor: default;
0472 background-color: #b4b4b4;
0473 }
0474 .btn.btn-native:active,
0475 .btn.btn-native:focus {
0476 background-color: #21659b;
0477 color: white;
0478 }
0479 .btn.btn-pling-red {
0480 background-color: #e84310;
0481 }
0482 .btn.btn-pling-red:hover {
0483 background-color: #f05222;
0484 }
0485 .btn.btn-pling-red:active {
0486 background-color: #d03c0e;
0487 color: white;
0488 }
0489 input[type="text"]:focus,
0490 input[type="number"]:focus,
0491 textarea:focus,
0492 input[type="password"]:focus {
0493 border-color: #e84310;
0494 }
0495 /*-- GENERAL --------------*/
0496 body {
0497 color: #32353d;
0498 overflow-y: scroll;
0499 font-size: 1.5em;
0500 color: #4e4e4e;
0501 /* font-family: Arial, sans-serif; */
0502 font-family: 'Open Sans', sans-serif;
0503 }
0504 header,
0505 footer,
0506 main {
0507 width: 100%;
0508 float: left;
0509 }
0510 header section.wrapper,
0511 footer section.wrapper,
0512 main section.wrapper {
0513 margin-left: auto;
0514 margin-right: auto;
0515 float: none;
0516 height: auto;
0517 }
0518 /*-- /GENERAL --------------*/
0519 /*-- HEADER --------------*/
0520 header {
0521 color: #6a7686;
0522 height: auto;
0523 font-size: 10pt;
0524 font-weight: 400;
0525 width: 100%;
0526 font-family: Arial, sans-serif;
0527 }
0528 header .container {
0529 margin-left: auto;
0530 margin-right: auto;
0531 float: none;
0532 height: auto;
0533 width: 100%;
0534 /* full width header */
0535 background-color: #E2E2E2;
0536 }
0537 header .container > section.wrapper {
0538 height: 40px;
0539 padding-left: 80px;
0540 position: relative;
0541 }
0542 header section.container + section.container {
0543 padding-left: 0px;
0544 background-color: #E2E2E2;
0545 }
0546 header section.container + section.container > section.wrapper {
0547 padding-left: 173px;
0548 }
0549 header .pull-left,
0550 header .pull-right {
0551 padding: 0px;
0552 }
0553 header .categories ul {
0554 list-style-type: none;
0555 padding: 0px;
0556 border-top: 1px solid #808080;
0557 width: 100%;
0558 float: left;
0559 margin: 0px;
0560 }
0561 header .categories ul li {
0562 float: left;
0563 height: 30px;
0564 line-height: 40px;
0565 }
0566 header .categories ul li a {
0567 display: block;
0568 float: left;
0569 padding: 0 10px;
0570 height: 30px;
0571 line-height: 30px;
0572 -webkit-transition: all 0.2s ease-out;
0573 -moz-transition: all 0.2s ease-out;
0574 -ms-transition: all 0.2s ease-out;
0575 -o-transition: all 0.2s ease-out;
0576 border-radius: 5px;
0577 border-left: 1px solid transparent;
0578 }
0579 header .categories ul li:hover {
0580 background-color: #eee;
0581 }
0582 header .categories ul li:hover a {
0583 background: #eee;
0584 border-left: 1px solid #ccc;
0585 box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.15);
0586 color: #6a7686;
0587 }
0588 header .categories ul li.bold a {
0589 background: #f8f8f8;
0590 border-left: 1px solid #ccc;
0591 box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.15);
0592 }
0593 header .categories ul li ul#tags {
0594 display: none;
0595 }
0596 header a {
0597 color: #6a7686;
0598 }
0599 header a:hover {
0600 text-decoration: none;
0601 }
0602 header .logo {
0603 display: block;
0604 width: 140px;
0605 height: 76px;
0606 position: absolute;
0607 top: 1px;
0608 left: 0px;
0609 background-image: url("../img/new/pling-logo-large.png");
0610 background-size: 140px 76px;
0611 z-index: 999;
0612 }
0613 header .logo a {
0614 display: block;
0615 width: 100%;
0616 height: 100%;
0617 cursor: pointer;
0618 -webkit-opacity: 0;
0619 -moz-opacity: 0;
0620 opacity: 0;
0621 -webkit-transition: all 0.2s ease-out;
0622 -moz-transition: all 0.2s ease-out;
0623 -ms-transition: all 0.2s ease-out;
0624 -o-transition: all 0.2s ease-out;
0625 }
0626 header .logo_ocsstore {
0627 display: block;
0628 width: 76px;
0629 height: 76px;
0630 position: absolute;
0631 top: 1px;
0632 left: 0px;
0633 background-image: url("../img/ocsstore.png");
0634 background-size: 76px 76px;
0635 z-index: 999;
0636 }
0637 header .logo_ocsstore a {
0638 display: block;
0639 width: 100%;
0640 height: 100%;
0641 cursor: pointer;
0642 -webkit-opacity: 0;
0643 -moz-opacity: 0;
0644 opacity: 0;
0645 -webkit-transition: all 0.2s ease-out;
0646 -moz-transition: all 0.2s ease-out;
0647 -ms-transition: all 0.2s ease-out;
0648 -o-transition: all 0.2s ease-out;
0649 }
0650 header .logo_kde {
0651 display: block;
0652 width: 75px;
0653 height: 75px;
0654 position: absolute;
0655 top: 1px;
0656 left: 0px;
0657 background-image: url("../img/klogo-128x128.png");
0658 background-size: 75px 75px;
0659 z-index: 999;
0660 }
0661 header .logo_kde a {
0662 display: block;
0663 width: 100%;
0664 height: 100%;
0665 cursor: pointer;
0666 -webkit-opacity: 0;
0667 -moz-opacity: 0;
0668 opacity: 0;
0669 -webkit-transition: all 0.2s ease-out;
0670 -moz-transition: all 0.2s ease-out;
0671 -ms-transition: all 0.2s ease-out;
0672 -o-transition: all 0.2s ease-out;
0673 }
0674 header .logo_books {
0675 display: block;
0676 width: 67px;
0677 height: 67px;
0678 position: absolute;
0679 top: 7px;
0680 left: 0px;
0681 background-image: url("../img/books_store_logo.png");
0682 background-size: 67px 67px;
0683 z-index: 999;
0684 }
0685 header .logo_books a {
0686 display: block;
0687 width: 100%;
0688 height: 100%;
0689 cursor: pointer;
0690 -webkit-opacity: 0;
0691 -moz-opacity: 0;
0692 opacity: 0;
0693 -webkit-transition: all 0.2s ease-out;
0694 -moz-transition: all 0.2s ease-out;
0695 -ms-transition: all 0.2s ease-out;
0696 -o-transition: all 0.2s ease-out;
0697 }
0698 header .dropdown-header {
0699 width: 175px;
0700 height: 12px;
0701 background-image: url(../img/bg_sheet.png);
0702 background-position: -385px 0px;
0703 }
0704 header .dropdown-header.f-nav {
0705 display: none;
0706 }
0707 header nav {
0708 float: left;
0709 width: 89%;
0710 height: 40px;
0711 margin-left: 70px;
0712 border-bottom: 1px solid #808080;
0713 }
0714 header nav .pull-right ul {
0715 float: right;
0716 }
0717 header ul {
0718 position: relative;
0719 display: inline-table;
0720 padding: 0;
0721 margin: 0;
0722 list-style-type: none;
0723 padding: 0px;
0724 margin: 0px;
0725 }
0726 header ul li {
0727 list-style: none;
0728 display: inline-block;
0729 margin: 0;
0730 cursor: pointer;
0731 height: 40px;
0732 line-height: 40px;
0733 float: left;
0734 position: relative;
0735 -webkit-transition: all 0.2s ease-out;
0736 -moz-transition: all 0.2s ease-out;
0737 -ms-transition: all 0.2s ease-out;
0738 -o-transition: all 0.2s ease-out;
0739 /* children */
0740 /* /children */
0741 /* classes */
0742 /* /classes */
0743 }
0744 header ul li > a {
0745 float: left;
0746 display: block;
0747 height: inherit;
0748 line-height: inherit;
0749 padding: 0px 20px;
0750 }
0751 header ul li > a span {
0752 float: left;
0753 height: inherit;
0754 }
0755 header ul li ul {
0756 width: 165px;
0757 margin-left: 0;
0758 position: absolute;
0759 left: -9999px;
0760 top: 45px;
0761 border: none;
0762 font-size: 14px;
0763 color: #7f8c8d;
0764 font-weight: normal;
0765 padding: 0;
0766 z-index: 10000;
0767 -webkit-border-radius: 5px;
0768 -moz-border-radius: 5px;
0769 border-radius: 5px;
0770 -webkit-background-clip: padding-box;
0771 -moz-background-clip: padding;
0772 background-clip: padding-box;
0773 }
0774 header ul li ul.active {
0775 left: 0;
0776 top: 40px;
0777 }
0778 header ul li ul li {
0779 text-align: left;
0780 display: block;
0781 width: 100%;
0782 background: #ecf0f1;
0783 margin: 0;
0784 padding: 0;
0785 height: 40px;
0786 border-bottom: 1px solid #d6d7d9;
0787 -webkit-transition: all 0 ease-out;
0788 -moz-transition: all 0 ease-out;
0789 -ms-transition: all 0 ease-out;
0790 -o-transition: all 0 ease-out;
0791 }
0792 header ul li ul li a {
0793 -webkit-transition: all 0 ease-out;
0794 -moz-transition: all 0 ease-out;
0795 -ms-transition: all 0 ease-out;
0796 -o-transition: all 0 ease-out;
0797 color: #6a7686;
0798 text-align: left;
0799 height: 40px;
0800 line-height: 40px;
0801 }
0802 header ul li ul li a .active {
0803 background: #e84310;
0804 }
0805 header ul li ul li a .active a {
0806 color: white;
0807 }
0808 header ul li ul li.active {
0809 background: #e84310;
0810 }
0811 header ul li ul li.active > a {
0812 color: white;
0813 }
0814 header ul li ul li a.active {
0815 background: #e84310;
0816 color: white;
0817 }
0818 header ul li ul li:hover {
0819 background: #e84310;
0820 }
0821 header ul li ul li:hover a {
0822 color: white;
0823 }
0824 header ul li ul li.first,
0825 header ul li ul li:first-of-type {
0826 -webkit-border-radius: 5px 5px 0 0;
0827 -moz-border-radius: 5px 5px 0 0;
0828 border-radius: 5px 5px 0 0;
0829 -webkit-background-clip: padding-box;
0830 -moz-background-clip: padding;
0831 background-clip: padding-box;
0832 }
0833 header ul li ul li:last-child {
0834 -webkit-border-radius: 0 0 5px 5px;
0835 -moz-border-radius: 0 0 5px 5px;
0836 border-radius: 0 0 5px 5px;
0837 -webkit-background-clip: padding-box;
0838 -moz-background-clip: padding;
0839 background-clip: padding-box;
0840 border-bottom: none;
0841 }
0842 header ul li.active,
0843 header ul li:hover {
0844 background: #e84310;
0845 }
0846 header ul li.active > a,
0847 header ul li:hover > a {
0848 color: white;
0849 }
0850 header ul li.profile-menu-container {
0851 padding-top: 0px;
0852 padding-left: 40px;
0853 }
0854 header ul li.profile-menu-container > a {
0855 display: block;
0856 }
0857 header ul li.profile-menu-container .header-profile-image {
0858 top: 50%;
0859 left: 10px;
0860 height: 30px;
0861 width: 30px;
0862 margin-top: -15px;
0863 }
0864 header ul li.profile-menu-container .header-profile-image img {
0865 height: 30px;
0866 width: 30px;
0867 float: left;
0868 -webkit-border-radius: 999px;
0869 -moz-border-radius: 999px;
0870 border-radius: 999px;
0871 -webkit-background-clip: padding-box;
0872 -moz-background-clip: padding;
0873 background-clip: padding-box;
0874 }
0875 header ul li.profile-menu-settings em {
0876 margin-top: 4px;
0877 }
0878 header ul li.profile-menu-settings ul .dropdown-header {
0879 background-position: -504px -25px;
0880 width: 151px;
0881 }
0882 header ul.menu-icon {
0883 float: right;
0884 display: none;
0885 }
0886 header ul.menu-icon li a span {
0887 font-size: 24px;
0888 height: 32px;
0889 margin: 7px 0 0;
0890 top: 0;
0891 float: right;
0892 }
0893 header #search {
0894 height: 25px;
0895 padding: 0px;
0896 margin: 6.5px 5px;
0897 line-height: 25px;
0898 position: relative;
0899 }
0900 header #search .dropdown-header {
0901 display: none;
0902 }
0903 header #search input.content-search {
0904 width: 16em;
0905 height: 25px;
0906 padding: 0;
0907 border: 1px solid white;
0908 margin-bottom: -1px;
0909 padding-right: 30px;
0910 text-indent: 5px;
0911 color: #6a7686;
0912 float: left;
0913 border-radius: 6px;
0914 box-shadow: none;
0915 }
0916 header #search input.content-search:hover {
0917 border-color: #b8c4cc;
0918 }
0919 header #search input.content-search:focus,
0920 header #search input.content-search:active {
0921 border-color: #e84310 !important;
0922 }
0923 header #search div.icon-search-input {
0924 top: 2px;
0925 right: 0px;
0926 width: 25px;
0927 height: 25px;
0928 background-image: url(/theme/flatui/img/icon-search-input-2.png);
0929 background-position: center center;
0930 }
0931 header .header-pickstore-container {
0932 position: absolute;
0933 top: 41px;
0934 right: 0;
0935 width: 15em;
0936 height: 0;
0937 overflow: hidden;
0938 background-color: #f3f3f3;
0939 -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
0940 -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
0941 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
0942 -webkit-opacity: 0;
0943 -moz-opacity: 0;
0944 opacity: 0;
0945 -webkit-transition: all 0.2s ease-out;
0946 -moz-transition: all 0.2s ease-out;
0947 -ms-transition: all 0.2s ease-out;
0948 -o-transition: all 0.2s ease-out;
0949 -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
0950 -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
0951 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
0952 }
0953 header .header-pickstore-container.active {
0954 z-index: 10000;
0955 -webkit-opacity: 1;
0956 -moz-opacity: 1;
0957 opacity: 1;
0958 height: auto;
0959 }
0960 header .header-pickstore-container .header-pickstore {
0961 padding: 0 15px;
0962 height: auto;
0963 overflow: hidden;
0964 background: #f3f3f3;
0965 }
0966 header .header-pickstore-container .top {
0967 width: 100%;
0968 float: left;
0969 border-bottom: 1px solid rgba(52, 73, 92, 0.3);
0970 }
0971 header .header-pickstore-container .top h3 {
0972 color: #6a7686;
0973 font-size: 1.1em;
0974 margin: 0;
0975 height: 2em;
0976 line-height: 2em;
0977 }
0978 header .header-pickstore-container .body {
0979 width: 100%;
0980 float: left;
0981 padding-top: 0.5em;
0982 padding-bottom: 0.5em;
0983 border-top: 1px solid rgba(52, 73, 92, 0.1);
0984 border-bottom: 1px solid rgba(52, 73, 92, 0.3);
0985 }
0986 header .header-pickstore-container .body ul {
0987 position: relative;
0988 left: 0px;
0989 top: 0px;
0990 border: medium none;
0991 font-size: 14px;
0992 color: #7F8C8D;
0993 font-weight: normal;
0994 z-index: 10000;
0995 border-radius: 5px;
0996 background-clip: padding-box;
0997 display: inline-table;
0998 list-style-type: none;
0999 padding: 0px;
1000 margin: 0px;
1001 }
1002 header .header-pickstore-container .body ul li {
1003 line-height: 12px;
1004 }
1005 header .header-pickstore-container .footer {
1006 width: 100%;
1007 float: left;
1008 padding-top: 0.5em;
1009 border-top: 1px solid rgba(52, 73, 92, 0.1);
1010 }
1011 header .header-pickstore-container .footer p {
1012 font-size: 12px;
1013 line-height: 16px;
1014 }
1015 header .header-pickstore-container .footer .social {
1016 margin-bottom: 1em;
1017 float: left;
1018 width: 100%;
1019 }
1020 header .header-pickstore-container .footer .social a {
1021 width: 40px;
1022 height: 40px;
1023 float: left;
1024 display: block;
1025 background-color: white;
1026 -webkit-border-radius: 10px;
1027 -moz-border-radius: 10px;
1028 border-radius: 10px;
1029 -webkit-background-clip: padding-box;
1030 -moz-background-clip: padding;
1031 background-clip: padding-box;
1032 }
1033 header .header-pickstore-container .footer .social a + a {
1034 margin-left: 10px;
1035 }
1036 header .header-login-container {
1037 position: absolute;
1038 top: 41px;
1039 right: 0;
1040 width: 15em;
1041 height: 0;
1042 overflow: hidden;
1043 background-color: #f3f3f3;
1044 -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
1045 -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
1046 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
1047 -webkit-opacity: 0;
1048 -moz-opacity: 0;
1049 opacity: 0;
1050 -webkit-transition: all 0.2s ease-out;
1051 -moz-transition: all 0.2s ease-out;
1052 -ms-transition: all 0.2s ease-out;
1053 -o-transition: all 0.2s ease-out;
1054 -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
1055 -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
1056 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
1057 }
1058 header .header-login-container.active {
1059 z-index: 10000;
1060 -webkit-opacity: 1;
1061 -moz-opacity: 1;
1062 opacity: 1;
1063 height: auto;
1064 }
1065 header .header-login-container .header-login-form {
1066 padding: 0 15px;
1067 height: auto;
1068 overflow: hidden;
1069 background: #f3f3f3;
1070 }
1071 header .header-login-container .form-top {
1072 width: 100%;
1073 float: left;
1074 border-bottom: 1px solid rgba(52, 73, 92, 0.3);
1075 }
1076 header .header-login-container .form-top h3 {
1077 color: #6a7686;
1078 font-size: 1.1em;
1079 margin: 0;
1080 height: 2em;
1081 line-height: 2em;
1082 }
1083 header .header-login-container .form-body {
1084 width: 100%;
1085 float: left;
1086 padding-top: 0.5em;
1087 padding-bottom: 0.5em;
1088 border-top: 1px solid rgba(52, 73, 92, 0.1);
1089 border-bottom: 1px solid rgba(52, 73, 92, 0.3);
1090 }
1091 header .header-login-container .form-body form input[type="text"],
1092 header .header-login-container .form-body form input[type="password"] {
1093 width: 100%;
1094 height: 30px;
1095 border-width: 1px;
1096 margin-bottom: 5px;
1097 float: left;
1098 line-height: 15px;
1099 padding: 0;
1100 }
1101 header .header-login-container .form-body form .container-checkbox-remember-me {
1102 margin: 0;
1103 }
1104 header .header-login-container .form-body form .container-checkbox-remember-me input[type="checkbox"] {
1105 width: auto;
1106 height: auto;
1107 margin: 5px 5px 0 0;
1108 }
1109 header .header-login-container .form-body form .container-checkbox-remember-me label {
1110 height: 10px;
1111 line-height: 10px;
1112 margin: 6px 0;
1113 font-size: 12px;
1114 float: left;
1115 }
1116 header .header-login-container .form-body form button {
1117 width: 100%;
1118 }
1119 header .header-login-container .form-body a.lightblue.small {
1120 float: left;
1121 height: 20px;
1122 line-height: 26px;
1123 }
1124 header .header-login-container .form-footer {
1125 width: 100%;
1126 float: left;
1127 padding-top: 0.5em;
1128 border-top: 1px solid rgba(52, 73, 92, 0.1);
1129 }
1130 header .header-login-container .form-footer p {
1131 font-size: 12px;
1132 line-height: 16px;
1133 }
1134 header .header-login-container .form-footer .social {
1135 margin-bottom: 1em;
1136 float: left;
1137 width: 100%;
1138 }
1139 header .header-login-container .form-footer .social a {
1140 width: 40px;
1141 height: 40px;
1142 float: left;
1143 display: block;
1144 background-color: white;
1145 -webkit-border-radius: 10px;
1146 -moz-border-radius: 10px;
1147 border-radius: 10px;
1148 -webkit-background-clip: padding-box;
1149 -moz-background-clip: padding;
1150 background-clip: padding-box;
1151 }
1152 header .header-login-container .form-footer .social a + a {
1153 margin-left: 10px;
1154 }
1155 /** RESPONSIVE FIX **/
1156 @media (max-width: 890px) {
1157 header {
1158 -webkit-transition: all 0.2s ease-out;
1159 -moz-transition: all 0.2s ease-out;
1160 -ms-transition: all 0.2s ease-out;
1161 -o-transition: all 0.2s ease-out;
1162 }
1163 header > section.wrapper {
1164 padding-left: 0;
1165 width: 100% !important;
1166 padding-left: 1.5%;
1167 padding-right: 1.5%;
1168 margin: 0 !important;
1169 }
1170 header figure {
1171 float: left;
1172 position: relative;
1173 }
1174 header ul.menu-icon {
1175 display: block;
1176 }
1177 header nav {
1178 height: 0;
1179 overflow: hidden;
1180 width: 100%;
1181 font-size: 14px;
1182 color: #7f8c8d;
1183 font-weight: normal;
1184 padding: 0;
1185 -webkit-opacity: 0;
1186 -moz-opacity: 0;
1187 opacity: 0;
1188 -webkit-transition: all 0.2s ease-out;
1189 -moz-transition: all 0.2s ease-out;
1190 -ms-transition: all 0.2s ease-out;
1191 -o-transition: all 0.2s ease-out;
1192 }
1193 header nav > div {
1194 width: 100%;
1195 float: left;
1196 border-top: 1px solid #4D6984;
1197 }
1198 header nav > div > ul {
1199 width: 100%;
1200 float: left;
1201 }
1202 header nav > div ul + ul {
1203 border-top: 1px solid #4D6984;
1204 }
1205 header.open nav {
1206 height: auto;
1207 overflow: visible;
1208 -webkit-opacity: 1;
1209 -moz-opacity: 1;
1210 opacity: 1;
1211 }
1212 }
1213 /** /RESPONSIVE FIX **/
1214 /*-- /HEADER --------------*/
1215 /*-- FOOTER --------------*/
1216 footer {
1217 width: 100%;
1218 float: left;
1219 padding: 12px 0px;
1220 border-bottom: 5px solid #2673B0;
1221 border-top: 1px solid darkgray;
1222 background-color: gainsboro;
1223 font-size: 9pt;
1224 }
1225 footer section.wrapper {
1226 overflow: auto;
1227 }
1228 footer section.wrapper .pull-right,
1229 footer section.wrapper .pull-left {
1230 padding: 0;
1231 }
1232 footer .container {
1233 margin: 0 auto;
1234 padding: 0;
1235 padding-top: 16px;
1236 }
1237 footer .container > .pull-right {
1238 padding-right: 5px;
1239 }
1240 footer .container > .pull-left {
1241 padding-left: 5px;
1242 }
1243 footer h3 {
1244 font-weight: normal;
1245 }
1246 footer h3#footer-heading {
1247 font-size: 1.3em;
1248 margin: 0;
1249 }
1250 footer nav#footer-nav ul {
1251 margin-top: 1em;
1252 list-style: none;
1253 padding: 0;
1254 margin-right: 1em;
1255 float: left;
1256 width: auto;
1257 margin-bottom: 0.2em;
1258 }
1259 footer nav#footer-nav ul li {
1260 display: inline-block;
1261 margin-right: 0;
1262 font-size: 1em;
1263 }
1264 footer nav#footer-nav ul li a {
1265 color: #666;
1266 font-weight: 400;
1267 }
1268 footer nav#footer-nav ul li span {
1269 color: #666;
1270 font-weight: 400;
1271 }
1272 footer nav#footer-nav ul li + li {
1273 margin-left: 10px;
1274 }
1275 footer nav#footer-nav p {
1276 margin-top: 1em;
1277 font-size: 1em;
1278 float: left;
1279 width: auto;
1280 text-align: left;
1281 padding-left: 0;
1282 color: #666666;
1283 }
1284 footer h3#footer-social-heading {
1285 color: #666;
1286 font-size: 1em;
1287 margin: 0 0 0.4em 0;
1288 }
1289 footer #footer-social {
1290 float: right;
1291 }
1292 footer #footer-social a {
1293 width: 30px;
1294 display: block;
1295 float: left;
1296 }
1297 footer #footer-social a > img {
1298 width: 100%;
1299 }
1300 footer #footer-social a + a {
1301 margin-left: 2px;
1302 }
1303 /** RESPONSIVE FIX **/
1304 @media (max-width: 450px) {
1305 footer .pull-left,
1306 footer .pull-right {
1307 width: 100%;
1308 float: left;
1309 padding: 0;
1310 }
1311 footer .pull-left #footer-social,
1312 footer .pull-right #footer-social {
1313 float: left;
1314 margin-top: 10px;
1315 }
1316 footer .pull-left #footer-social a,
1317 footer .pull-right #footer-social a {
1318 width: 3em;
1319 height: 3em;
1320 }
1321 }
1322 /** /RESPONSIVE FIX **/
1323 /*-- /FOOTER --------------*/
1324 /*==================*/
1325 /* FORMS */
1326 /*==================*/
1327 /**-- STANDARD FORM --*/
1328 .standard-form .field {
1329 margin-bottom: 15px;
1330 }
1331 .standard-form .field label {
1332 margin: 0;
1333 }
1334 .standard-form .field label input[type="radio"] {
1335 float: left;
1336 width: 10px;
1337 height: 10px;
1338 margin: 6px;
1339 }
1340 .standard-form .field label + label {
1341 margin-top: 10px;
1342 }
1343 .standard-form input,
1344 .standard-form textarea,
1345 .standard-form select {
1346 border: 1px solid #bdc3c7;
1347 padding: 0;
1348 border-radius: 5px;
1349 }
1350 .standard-form input {
1351 height: 41px;
1352 }
1353 .field-container {
1354 margin-bottom: 15px;
1355 }
1356 /* override flat ui default switch */
1357 div.switch-animate.switch-on label {
1358 background: #2673b0;
1359 border: 4px solid #ecf0f1;
1360 }
1361 div.switch-animate.switch-on span.switch-left {
1362 color: #2673b0;
1363 background: #ecf0f1;
1364 }
1365 /* custom select */
1366 .selectbox {
1367 width: 152px;
1368 height: 30px;
1369 position: relative;
1370 }
1371 .selectbox .selectbox_select {
1372 width: 137px;
1373 display: inline-block;
1374 padding: 4px 12px 4px 0px;
1375 margin-bottom: 0;
1376 font-size: 14px;
1377 line-height: 20px;
1378 cursor: pointer;
1379 color: #333333;
1380 background-color: #f5f5f5;
1381 border: 1px solid #cccccc;
1382 border-bottom-color: #b3b3b3;
1383 border-color: #e6e6e6 #e6e6e6 #bfbfbf;
1384 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1385 filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
1386 background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
1387 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
1388 background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
1389 background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
1390 background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
1391 background-repeat: repeat-x;
1392 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@from', endColorstr='@to', GradientType=0);
1393 -webkit-border-radius: 6px;
1394 -moz-border-radius: 6px;
1395 border-radius: 6px;
1396 -webkit-background-clip: padding-box;
1397 -moz-background-clip: padding;
1398 background-clip: padding-box;
1399 }
1400 .selectbox .selectbox_select span.selectbox_selected {
1401 height: 20px;
1402 display: block;
1403 width: 97px;
1404 text-align: right;
1405 background: url(/theme/flatui/img/dollar-icon-small.png) 5px 3px no-repeat;
1406 padding: 0 0 0 15px;
1407 }
1408 .selectbox .selectbox_select a.selectbox_button {
1409 display: inline-block;
1410 width: 0;
1411 height: 0;
1412 vertical-align: top;
1413 border-top: 4px solid #000000;
1414 border-right: 4px solid transparent;
1415 border-left: 4px solid transparent;
1416 content: "";
1417 position: absolute;
1418 top: 14px;
1419 right: 12px;
1420 }
1421 .selectbox .selectbox_select:hover {
1422 color: #333333;
1423 background-color: #e6e6e6;
1424 *background-color: #d9d9d9;
1425 background-image: none;
1426 }
1427 .open .selectbox .selectbox_select,
1428 .selectbox .selectbox_select:active {
1429 background-image: none;
1430 }
1431 .selectbox_menu {
1432 position: absolute;
1433 display: none;
1434 top: 100%;
1435 left: 0;
1436 z-index: 1000;
1437 float: left;
1438 min-width: 149px;
1439 padding: 5px 0;
1440 margin: 2px 0 0;
1441 list-style: none;
1442 background-color: #ffffff;
1443 border: 1px solid #ccc;
1444 border: 1px solid rgba(0, 0, 0, 0.2);
1445 -webkit-border-radius: 6px;
1446 -moz-border-radius: 6px;
1447 border-radius: 6px;
1448 -webkit-background-clip: padding-box;
1449 -moz-background-clip: padding;
1450 background-clip: padding-box;
1451 }
1452 .selectbox_menu ul {
1453 list-style-type: none;
1454 padding: 0px;
1455 margin: 0px;
1456 width: 100%;
1457 }
1458 .selectbox_menu ul li {
1459 text-align: right;
1460 padding: 0 15px;
1461 width: 90%;
1462 height: 16px;
1463 line-height: 16px;
1464 font-size: 14px;
1465 }
1466 .selectbox_menu ul li a {
1467 color: #000000;
1468 display: block;
1469 width: 100%;
1470 -webkit-transition: all 0 ease-out;
1471 -moz-transition: all 0 ease-out;
1472 -ms-transition: all 0 ease-out;
1473 -o-transition: all 0 ease-out;
1474 }
1475 .selectbox_menu ul li.selected,
1476 .selectbox_menu ul li:hover {
1477 text-decoration: none;
1478 background-color: #0081c2;
1479 background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
1480 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
1481 background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
1482 background-image: -o-linear-gradient(top, #0088cc, #0077b3);
1483 background-image: linear-gradient(to bottom, #0088cc, #0077b3);
1484 background-repeat: repeat-x;
1485 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@from', endColorstr='@to', GradientType=0);
1486 }
1487 .selectbox_menu ul li.selected a,
1488 .selectbox_menu ul li:hover a {
1489 color: #ffffff !important;
1490 }
1491 /* /custom select */
1492 /**-- /STANDARD FORM --*/
1493 /*==================*/
1494 /* COMMON LAYOUTS */
1495 /*==================*/
1496 #explore-content {
1497 background-color: #fff;
1498 }
1499 /**-- EXPLORE PRODUCTS --**/
1500 #products-wrapper {
1501 padding-top: 20px;
1502 }
1503 #products-wrapper .explore-products {
1504 padding-left: 30px;
1505 }
1506 #products-wrapper .explore-products h1 {
1507 margin: 0;
1508 font-size: 20px;
1509 height: 25px;
1510 line-height: 25px;
1511 margin-bottom: 15px;
1512 }
1513 #products-wrapper .explore-products ul.nav-tabs {
1514 border-bottom: 0;
1515 margin-bottom: -2px !important;
1516 }
1517 #products-wrapper .explore-products ul.nav-tabs li {
1518 margin-right: 5px;
1519 }
1520 #products-wrapper .explore-products ul.nav-tabs li a {
1521 margin: 0;
1522 padding: 0;
1523 -webkit-border-radius: 3px;
1524 -moz-border-radius: 3px;
1525 border-radius: 3px;
1526 -webkit-background-clip: padding-box;
1527 -moz-background-clip: padding;
1528 background-clip: padding-box;
1529 border: 1px solid #ccc;
1530 }
1531 #products-wrapper .explore-products ul.nav-tabs li a span {
1532 display: block;
1533 padding: 5px;
1534 font-size: 12px;
1535 font-weight: bold;
1536 height: 23px;
1537 line-height: 1;
1538 background: #E8E8E8;
1539 border: 1px solid white;
1540 -webkit-border-radius: 2px;
1541 -moz-border-radius: 2px;
1542 border-radius: 2px;
1543 -webkit-background-clip: padding-box;
1544 -moz-background-clip: padding;
1545 background-clip: padding-box;
1546 }
1547 #products-wrapper .explore-products ul.nav-tabs li.active {
1548 padding-bottom: 0;
1549 }
1550 #products-wrapper .explore-products ul.nav-tabs li.active a {
1551 border-bottom: 0;
1552 }
1553 #products-wrapper .explore-products ul.nav-tabs li.active a span {
1554 height: 30px;
1555 background: white;
1556 border-radius: 2px 2px 0 0;
1557 border-bottom: 0;
1558 }
1559 #products-wrapper .explore-products .product-list {
1560 width: 100%;
1561 float: left;
1562 padding: 0 10px;
1563 border: 1px solid #ccc;
1564 background-color: white;
1565 -webkit-border-radius: 0 0 5px 5px;
1566 -moz-border-radius: 0 0 5px 5px;
1567 border-radius: 0 0 5px 5px;
1568 -webkit-background-clip: padding-box;
1569 -moz-background-clip: padding;
1570 background-clip: padding-box;
1571 }
1572 #products-wrapper .explore-products .product-list .empty {
1573 padding: 5px 0;
1574 font-size: 12px;
1575 }
1576 #products-wrapper .explore-products .product-list .explore-product {
1577 padding: 10px 0;
1578 font-size: 12px;
1579 }
1580 #products-wrapper .explore-products .product-list .explore-product figure {
1581 padding-left: 0;
1582 }
1583 #products-wrapper .explore-products .product-list .explore-product figure img {
1584 max-width: 212px;
1585 max-height: 220px;
1586 }
1587 #products-wrapper .explore-products .product-list .explore-product .explore-product-details {
1588 padding-left: 0;
1589 }
1590 #products-wrapper .explore-products .product-list .explore-product .explore-product-details h3 {
1591 margin: 0 0 10px 0;
1592 font-size: 16px;
1593 height: 20px;
1594 font-weight: bold;
1595 color: #2673b0;
1596 }
1597 #products-wrapper .explore-products .product-list .explore-product .explore-product-plings {
1598 padding: 0;
1599 }
1600 #products-wrapper .explore-products .product-list .explore-product .explore-product-plings .progress {
1601 margin-bottom: 10px;
1602 padding: 3px;
1603 -webkit-opacity: 0;
1604 -moz-opacity: 0;
1605 opacity: 0;
1606 }
1607 #products-wrapper .explore-products .product-list .explore-product .explore-product-plings .progress .bar {
1608 width: 4px;
1609 max-width: 100%;
1610 height: 14px;
1611 background-color: #2673b0;
1612 -webkit-border-radius: 2px;
1613 -moz-border-radius: 2px;
1614 border-radius: 2px;
1615 -webkit-background-clip: padding-box;
1616 -moz-background-clip: padding;
1617 background-clip: padding-box;
1618 -webkit-box-shadow: inset 0 6px 0 rgba(255, 255, 255, 0.2);
1619 -moz-box-shadow: inset 0 6px 0 rgba(255, 255, 255, 0.2);
1620 box-shadow: inset 0 6px 0 rgba(255, 255, 255, 0.2);
1621 }
1622 #products-wrapper .explore-products .product-list .explore-product .explore-product-plings .progress .bar.no-goal {
1623 width: 50%;
1624 }
1625 #products-wrapper .explore-products .product-list .explore-product .explore-product-plings .collected span {
1626 width: 100%;
1627 float: left;
1628 }
1629 #products-wrapper .explore-products .product-list .explore-product .explore-product-more {
1630 text-align: center;
1631 padding-right: 0;
1632 }
1633 #products-wrapper .explore-products .product-list .explore-product .explore-product-more a {
1634 padding-left: 12px;
1635 position: relative;
1636 color: #666;
1637 font-weight: bold;
1638 -webkit-transition: all 0.2s ease-out;
1639 -moz-transition: all 0.2s ease-out;
1640 -ms-transition: all 0.2s ease-out;
1641 -o-transition: all 0.2s ease-out;
1642 }
1643 #products-wrapper .explore-products .product-list .explore-product .explore-product-more a em {
1644 position: absolute;
1645 top: 0;
1646 left: 0;
1647 width: 12px;
1648 height: 12px;
1649 display: block;
1650 background-image: url('../img/new/arrow_on_10_1.gif');
1651 }
1652 #products-wrapper .explore-products .product-list .explore-product .explore-product-more a em i {
1653 display: block;
1654 width: 100%;
1655 height: 100%;
1656 background-image: url('../img/new/arrow_off_10_1.gif');
1657 -webkit-opacity: 0;
1658 -moz-opacity: 0;
1659 opacity: 0;
1660 -webkit-transition: all 0.2s ease-out;
1661 -moz-transition: all 0.2s ease-out;
1662 -ms-transition: all 0.2s ease-out;
1663 -o-transition: all 0.2s ease-out;
1664 }
1665 #products-wrapper .explore-products .product-list .explore-product .explore-product-more a:hover {
1666 color: #2673b0;
1667 }
1668 #products-wrapper .explore-products .product-list .explore-product .explore-product-more a:hover em i {
1669 -webkit-opacity: 1;
1670 -moz-opacity: 1;
1671 opacity: 1;
1672 }
1673 #products-wrapper .explore-products .product-list .explore-product + .explore-product {
1674 border-top: 1px solid #ccc;
1675 }
1676 #products-wrapper .explore-products .explore-footer {
1677 width: 100%;
1678 text-align: center;
1679 }
1680 #products-wrapper .explore-products .explore-footer .projectPaginationControl {
1681 width: auto;
1682 display: table;
1683 margin: 0 auto;
1684 }
1685 #products-wrapper .explore-products .explore-footer .projectPaginationControl ul#pagination-digg {
1686 padding: 0;
1687 list-style-type: none;
1688 margin: 20px 0;
1689 height: auto;
1690 overflow: hidden;
1691 }
1692 #products-wrapper .explore-products .explore-footer .projectPaginationControl ul#pagination-digg li {
1693 float: left;
1694 font-size: 16px;
1695 font-weight: normal;
1696 margin: 0 4px;
1697 }
1698 #products-wrapper #explore-carousel {
1699 position: relative;
1700 height: auto;
1701 float: left;
1702 width: 100%;
1703 overflow: hidden;
1704 height: 550px;
1705 background-color: white;
1706 padding: 5px;
1707 }
1708 #products-wrapper #explore-carousel .carousel-arrow {
1709 position: absolute;
1710 bottom: 0;
1711 z-index: 101;
1712 height: 2em;
1713 width: 2em;
1714 line-height: 2em;
1715 text-align: center;
1716 cursor: pointer;
1717 -webkit-transition: all 0.2s ease-out;
1718 -moz-transition: all 0.2s ease-out;
1719 -ms-transition: all 0.2s ease-out;
1720 -o-transition: all 0.2s ease-out;
1721 -webkit-border-radius: 999px;
1722 -moz-border-radius: 999px;
1723 border-radius: 999px;
1724 -webkit-background-clip: padding-box;
1725 -moz-background-clip: padding;
1726 background-clip: padding-box;
1727 }
1728 #products-wrapper #explore-carousel .carousel-arrow span {
1729 -webkit-transition: all 0.2s ease-out;
1730 -moz-transition: all 0.2s ease-out;
1731 -ms-transition: all 0.2s ease-out;
1732 -o-transition: all 0.2s ease-out;
1733 color: whitesmoke;
1734 font-size: 1em;
1735 line-height: 2em;
1736 }
1737 #products-wrapper #explore-carousel .carousel-arrow#right {
1738 right: 0;
1739 }
1740 #products-wrapper #explore-carousel .carousel-arrow#left {
1741 left: 0;
1742 }
1743 #products-wrapper #explore-carousel .carousel-arrow:hover span {
1744 color: white;
1745 }
1746 #products-wrapper #explore-carousel .navigation {
1747 bottom: 0;
1748 position: absolute;
1749 left: 0;
1750 width: 100%;
1751 text-align: center;
1752 padding: 5px 0;
1753 background-color: #ccc;
1754 z-index: 10;
1755 }
1756 #products-wrapper #explore-carousel .navigation ul {
1757 width: auto;
1758 display: table;
1759 margin: 0 auto;
1760 padding: 0;
1761 list-style-type: none;
1762 }
1763 #products-wrapper #explore-carousel .navigation ul li {
1764 height: 20px;
1765 width: 20px;
1766 line-height: 20px;
1767 float: left;
1768 cursor: pointer;
1769 font-size: 12px;
1770 font-weight: bold;
1771 background-color: white;
1772 -webkit-transition: all 0.2s ease-out;
1773 -moz-transition: all 0.2s ease-out;
1774 -ms-transition: all 0.2s ease-out;
1775 -o-transition: all 0.2s ease-out;
1776 -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
1777 -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
1778 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
1779 }
1780 #products-wrapper #explore-carousel .navigation ul li.active {
1781 background-color: #F2F2F2;
1782 -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.15);
1783 -moz-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.15);
1784 box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.15);
1785 }
1786 #products-wrapper #explore-carousel .navigation ul li.active a {
1787 color: #111;
1788 }
1789 #products-wrapper #explore-carousel .navigation ul li + li {
1790 margin-left: 3px;
1791 }
1792 #products-wrapper #explore-carousel .items {
1793 position: relative;
1794 width: 100%;
1795 overflow: hidden;
1796 height: 520px;
1797 }
1798 #products-wrapper #explore-carousel .items .item {
1799 height: auto;
1800 width: 100%;
1801 position: absolute;
1802 top: 0;
1803 left: 100%;
1804 z-index: 1;
1805 overflow: hidden;
1806 }
1807 #products-wrapper #explore-carousel .items .item .explore-product {
1808 width: 20%;
1809 padding: 5px;
1810 }
1811 #products-wrapper #explore-carousel .items .item .explore-product article {
1812 width: 100%;
1813 border: 1px outset #f8f8f8;
1814 padding: 2px;
1815 background-color: white;
1816 float: left;
1817 -webkit-transition: all 0.2s ease-out;
1818 -moz-transition: all 0.2s ease-out;
1819 -ms-transition: all 0.2s ease-out;
1820 -o-transition: all 0.2s ease-out;
1821 -webkit-border-radius: 3px;
1822 -moz-border-radius: 3px;
1823 border-radius: 3px;
1824 -webkit-background-clip: padding-box;
1825 -moz-background-clip: padding;
1826 background-clip: padding-box;
1827 -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
1828 -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
1829 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
1830 }
1831 #products-wrapper #explore-carousel .items .item .explore-product article .inner-wrapper {
1832 float: left;
1833 width: 100%;
1834 padding: 5px;
1835 background: rgba(243, 243, 243, 0.33);
1836 border: 1px solid #ccc;
1837 }
1838 #products-wrapper #explore-carousel .items .item .explore-product figure {
1839 width: 100%;
1840 padding: 0;
1841 }
1842 #products-wrapper #explore-carousel .items .item .explore-product figure img {
1843 width: 100%;
1844 }
1845 #products-wrapper #explore-carousel .items .item .explore-product .explore-product-details {
1846 padding: 0;
1847 }
1848 #products-wrapper #explore-carousel .items .item .explore-product .explore-product-details h3 {
1849 margin: 5px 0;
1850 font-size: 13px;
1851 font-weight: bold;
1852 width: 100%;
1853 float: left;
1854 margin-bottom: 5px;
1855 word-wrap: break-word;
1856 height: 42px;
1857 }
1858 #products-wrapper #explore-carousel .items .item .explore-product .explore-product-details span {
1859 font-size: 12px;
1860 float: left;
1861 width: auto;
1862 display: inline-block;
1863 }
1864 #products-wrapper #explore-carousel .items .item .explore-product .explore-product-plings {
1865 padding: 0;
1866 font-size: 12px;
1867 }
1868 #products-wrapper #explore-carousel .items .item .explore-product > a > .product-inner-wrapper {
1869 background-color: white;
1870 }
1871 #products-wrapper #explore-carousel .items .item .explore-product:hover article {
1872 background-color: rgba(233, 233, 233, 0.41);
1873 border-color: #d5d5d5;
1874 -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15);
1875 -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15);
1876 box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15);
1877 }
1878 #products-wrapper #explore-carousel .items .item.active {
1879 left: 0;
1880 }
1881 /**-- /EXPLORE PRODUCTS --**/
1882 /**-- MINI CARDS --**/
1883 .mini-card {
1884 padding: 0 2px;
1885 width: 10%;
1886 }
1887 .mini-card .u-wrap {
1888 float: left;
1889 width: 100%;
1890 border: 2px solid #DEE0E0;
1891 -webkit-border-radius: 5px;
1892 -moz-border-radius: 5px;
1893 border-radius: 5px;
1894 -webkit-background-clip: padding-box;
1895 -moz-background-clip: padding;
1896 background-clip: padding-box;
1897 height: 15em;
1898 margin-bottom: 4px;
1899 background: white;
1900 -webkit-transition: all 0.2s ease-out;
1901 -moz-transition: all 0.2s ease-out;
1902 -ms-transition: all 0.2s ease-out;
1903 -o-transition: all 0.2s ease-out;
1904 }
1905 .mini-card .u-wrap a {
1906 float: left;
1907 width: 100%;
1908 height: auto;
1909 display: block;
1910 position: relative;
1911 }
1912 .mini-card .u-wrap figure {
1913 width: 100%;
1914 float: left;
1915 height: 120px;
1916 }
1917 .mini-card .u-wrap figure img {
1918 width: 100%;
1919 height: 120px;
1920 -webkit-border-radius: 3px 3px 0 0;
1921 -moz-border-radius: 3px 3px 0 0;
1922 border-radius: 3px 3px 0 0;
1923 -webkit-background-clip: padding-box;
1924 -moz-background-clip: padding;
1925 background-clip: padding-box;
1926 }
1927 .mini-card .u-wrap .u-content {
1928 width: 100%;
1929 float: left;
1930 padding: 3px;
1931 height: 5.0em;
1932 overflow: hidden;
1933 }
1934 .mini-card .u-wrap .u-content > h3 {
1935 font-size: 12px;
1936 word-wrap: break-word;
1937 }
1938 .mini-card .u-wrap .u-content > p {
1939 font-size: 15px;
1940 position: absolute;
1941 bottom: 0;
1942 right: 3px;
1943 width: 100%;
1944 margin: 0;
1945 color: black;
1946 font-weight: bold;
1947 text-align: right;
1948 color: #444;
1949 }
1950 .mini-card .u-wrap .u-content .productCategory {
1951 color: #4E4E4E;
1952 display: block;
1953 font-size: 11px;
1954 }
1955 .mini-card .u-wrap .rating {
1956 font-size: 11px;
1957 position: absolute;
1958 right: 10px;
1959 bottom: 10px;
1960 }
1961 .mini-card .u-wrap:hover {
1962 border-color: #DEE0E0;
1963 background: #f6f6f6;
1964 }
1965 .mini-card .u-wrap:hover figure {
1966 background: white;
1967 }
1968 @media (max-width: 800px) {
1969 .mini-card {
1970 width: 16.6666667%;
1971 }
1972 .mini-card .u-wrap {
1973 height: 12em;
1974 }
1975 }
1976 @media (max-width: 550px) {
1977 .mini-card {
1978 width: 20%;
1979 }
1980 .mini-card .u-wrap {
1981 height: 14em;
1982 }
1983 }
1984 @media (max-width: 350px) {
1985 .mini-card {
1986 width: 33.333333%;
1987 }
1988 .mini-card .u-wrap {
1989 height: 16em;
1990 }
1991 }
1992 .product-card {
1993 width: 10%;
1994 padding: 0 3px;
1995 margin-bottom: 10px;
1996 height: auto;
1997 }
1998 .product-card > a {
1999 display: block;
2000 float: left;
2001 width: 100%;
2002 height: auto;
2003 position: relative;
2004 }
2005 .product-card > a .card > .border {
2006 position: absolute;
2007 top: 0;
2008 left: 0;
2009 width: 100%;
2010 background-color: #2673b0;
2011 }
2012 .product-card > a .card > .p-wrap {
2013 width: 100%;
2014 height: 8.25em;
2015 border: 2px solid #c5ced5;
2016 background-color: white;
2017 -webkit-border-radius: 5px;
2018 -moz-border-radius: 5px;
2019 border-radius: 5px;
2020 -webkit-background-clip: padding-box;
2021 -moz-background-clip: padding;
2022 background-clip: padding-box;
2023 }
2024 .product-card > a .card > .p-wrap > figure {
2025 width: 100%;
2026 height: 3.5em;
2027 overflow: hidden;
2028 display: block;
2029 float: left;
2030 border-bottom: 1px solid #c5ced5;
2031 }
2032 .product-card > a .card > .p-wrap > figure > img {
2033 height: 100%;
2034 width: 100%;
2035 }
2036 .product-card > a .card > .p-wrap > .content {
2037 width: 100%;
2038 float: left;
2039 padding: 0.25em;
2040 font-size: 1em;
2041 height: 3.5em;
2042 }
2043 .product-card > a .card > .p-wrap > .content > h3 {
2044 font-size: .7em;
2045 margin: 0;
2046 color: #34495e;
2047 display: block;
2048 width: 100%;
2049 height: 100%;
2050 overflow: hidden;
2051 word-break: break-word;
2052 }
2053 .product-card > a .card > .p-wrap > .footer {
2054 float: left;
2055 width: 100%;
2056 height: 1em;
2057 line-height: 1em;
2058 font-size: 1em;
2059 text-align: right;
2060 padding: 0 0.1em;
2061 background-color: #f5f5f5;
2062 -webkit-border-radius: 3px;
2063 -moz-border-radius: 3px;
2064 border-radius: 3px;
2065 -webkit-background-clip: padding-box;
2066 -moz-background-clip: padding;
2067 background-clip: padding-box;
2068 }
2069 .product-card > a .card > .p-wrap > .footer > p {
2070 font-weight: bold;
2071 font-size: 0.75em;
2072 color: #a7a7a7;
2073 }
2074 .product-card > a > .empty-card {
2075 width: 100%;
2076 }
2077 @media (max-width: 800px) {
2078 .product-card {
2079 width: 16.6666667%;
2080 }
2081 }
2082 @media (max-width: 550px) {
2083 .product-card {
2084 width: 20%;
2085 }
2086 }
2087 @media (max-width: 350px) {
2088 .product-card {
2089 width: 33.333333%;
2090 }
2091 }
2092 /**-- MINI CARDS --**/
2093 /**-- EXPLORE SIDEBAR --**/
2094 aside#explore-sidebar {
2095 padding-left: 0;
2096 margin-bottom: 20px;
2097 }
2098 aside#explore-sidebar #accordion.panel-group .panel {
2099 border: 0;
2100 -webkit-border-radius: 0px;
2101 -moz-border-radius: 0px;
2102 border-radius: 0px;
2103 -webkit-background-clip: padding-box;
2104 -moz-background-clip: padding;
2105 background-clip: padding-box;
2106 -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
2107 -moz-box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
2108 box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
2109 }
2110 aside#explore-sidebar #accordion.panel-group .panel .panel-heading .panel-title {
2111 font-weight: bold;
2112 }
2113 aside#explore-sidebar #accordion.panel-group .panel .panel-heading .panel-title a {
2114 padding: 0;
2115 font-size: 14px;
2116 padding: 5px;
2117 position: relative;
2118 overflow: hidden;
2119 color: #2673b0;
2120 }
2121 aside#explore-sidebar #accordion.panel-group .panel .panel-collapse nav {
2122 width: 100%;
2123 float: left;
2124 }
2125 aside#explore-sidebar #accordion.panel-group .panel .panel-collapse nav h4 {
2126 font-size: 14px;
2127 }
2128 aside#explore-sidebar #accordion.panel-group .panel .panel-collapse nav ul {
2129 list-style-type: none;
2130 padding: 5px 7px;
2131 margin: 0;
2132 font-size: 12px;
2133 float: left;
2134 width: 100%;
2135 background-color: white;
2136 }
2137 aside#explore-sidebar #accordion.panel-group .panel .panel-collapse nav ul li {
2138 float: left;
2139 width: 100%;
2140 }
2141 aside#explore-sidebar #accordion.panel-group .panel .panel-collapse nav ul li > a {
2142 display: block;
2143 float: left;
2144 width: 100%;
2145 }
2146 aside#explore-sidebar #accordion.panel-group .panel .panel-collapse nav ul li ul#tags {
2147 display: none;
2148 }
2149 aside#explore-sidebar #accordion.panel-group .panel .panel-collapse nav ul.with-selection > li {
2150 display: none;
2151 }
2152 aside#explore-sidebar #accordion.panel-group .panel .panel-collapse nav ul.with-selection > li.bold {
2153 display: block;
2154 }
2155 aside#explore-sidebar #accordion.panel-group .panel .panel-collapse nav ul.with-selection > li.bold.parent > a {
2156 padding: 0 0 5px 0;
2157 border-bottom: #CACACA solid 1px;
2158 display: none;
2159 }
2160 aside#explore-sidebar #accordion.panel-group .panel .panel-collapse nav ul.with-selection > li.bold.parent ul#tags {
2161 display: block;
2162 float: left;
2163 padding-left: 0;
2164 padding-right: 0;
2165 }
2166 aside#explore-sidebar #accordion.panel-group .panel .panel-collapse nav ul.with-selection > li.bold.parent ul#tags li > a {
2167 font-weight: normal;
2168 padding: 0;
2169 border: 0;
2170 }
2171 aside#explore-sidebar #accordion.panel-group .panel .panel-collapse nav ul.with-selection > li.bold.parent ul#tags li.bold a {
2172 font-weight: bold;
2173 }
2174 aside#explore-sidebar #accordion.panel-group .panel + .panel {
2175 margin-top: 20px;
2176 }
2177 /**-- /EXPLORE SIDEBAR --**/
2178 /**-- **EXPORE MODAL --**/
2179 .modal-backdrop.in {
2180 top: 92px;
2181 -webkit-transition: all 0 ease-out;
2182 -moz-transition: all 0 ease-out;
2183 -ms-transition: all 0 ease-out;
2184 -o-transition: all 0 ease-out;
2185 display: none;
2186 }
2187 #explore-product-modal {
2188 -webkit-transition: all 0 ease-out;
2189 -moz-transition: all 0 ease-out;
2190 -ms-transition: all 0 ease-out;
2191 -o-transition: all 0 ease-out;
2192 overflow-y: hidden;
2193 top: 92px;
2194 }
2195 #explore-product-modal .modal-dialog {
2196 width: 100%;
2197 margin: 0;
2198 -webkit-transition: all 0 ease-out;
2199 -moz-transition: all 0 ease-out;
2200 -ms-transition: all 0 ease-out;
2201 -o-transition: all 0 ease-out;
2202 }
2203 #explore-product-modal .modal-dialog .modal-content {
2204 border: 0;
2205 }
2206 #explore-product-modal .modal-dialog .modal-content button.close {
2207 position: absolute;
2208 z-index: 10000;
2209 right: 0.5em;
2210 font-size: 3em;
2211 }
2212 #explore-product-modal .modal-dialog .modal-content .modal-body {
2213 padding: 0;
2214 overflow: auto;
2215 }
2216 #explore-product-modal .modal-dialog .modal-content .modal-body aside#explore-sidebar {
2217 display: none !important;
2218 }
2219 #explore-product-modal .modal-dialog .modal-content .modal-body header {
2220 display: none;
2221 }
2222 #explore-product-modal .modal-dialog .modal-content .modal-body .head-wrap > .wrapper,
2223 #explore-product-modal .modal-dialog .modal-content .modal-body .body-wrap > .wrapper {
2224 float: none;
2225 width: 970px;
2226 }
2227 /**-- /EXPLORE MODAL --**/
2228 /*==================*/
2229 /* JSCROLLPANE */
2230 /*==================*/
2231 .jspContainer {
2232 overflow: hidden;
2233 position: relative;
2234 }
2235 .jspContainer .jspPane {
2236 position: absolute;
2237 }
2238 .jspContainer .jspCap {
2239 display: none;
2240 }
2241 .jspContainer .jspTrack {
2242 position: relative;
2243 }
2244 .jspContainer .jspDrag {
2245 border-radius: 10px;
2246 background: rgba(88, 88, 88, 0.7);
2247 position: relative;
2248 top: 0;
2249 left: 0;
2250 cursor: pointer;
2251 -webkit-opacity: 0.3;
2252 -moz-opacity: 0.3;
2253 opacity: 0.3;
2254 -webkit-transition: all 0.2s ease-out;
2255 -moz-transition: all 0.2s ease-out;
2256 -ms-transition: all 0.2s ease-out;
2257 -o-transition: all 0.2s ease-out;
2258 }
2259 .jspContainer .jspArrow {
2260 background: #50506d;
2261 text-indent: -20000px;
2262 display: block;
2263 cursor: pointer;
2264 padding: 0;
2265 margin: 0;
2266 }
2267 .jspContainer .jspArrow.jspDisabled {
2268 cursor: default;
2269 background: #80808d;
2270 }
2271 .jspContainer .jspVerticalBar .jspArrow {
2272 height: 16px;
2273 }
2274 .jspContainer .jspArrow:focus {
2275 outline: none;
2276 }
2277 .jspContainer .jspCorner {
2278 background: #eeeef4;
2279 float: left;
2280 height: 100%;
2281 }
2282 .jspContainer .jspVerticalBar {
2283 position: absolute;
2284 top: -4px;
2285 right: 0;
2286 width: 1em;
2287 height: 100%;
2288 padding: 0.2em;
2289 }
2290 .jspContainer .jspHorizontalBar {
2291 position: absolute;
2292 bottom: 0;
2293 left: 0;
2294 width: 100%;
2295 height: 10px;
2296 }
2297 .jspContainer .jspHorizontalBar .jspTrack,
2298 .jspContainer .jspHorizontalBar .jspDrag {
2299 float: left;
2300 height: 100%;
2301 }
2302 .jspContainer .jspHorizontalBar .jspCap {
2303 float: left;
2304 }
2305 .jspContainer .jspHorizontalBar .jspArrow {
2306 width: 16px;
2307 float: left;
2308 height: 100%;
2309 }
2310 .jspContainer:hover .jspVerticalBar .jspDrag {
2311 -webkit-opacity: 0.8;
2312 -moz-opacity: 0.8;
2313 opacity: 0.8;
2314 }
2315 * html .jspCorner {
2316 margin: 0 -3px 0 0;
2317 }
2318 /*==================*/
2319 /* CUSTOMIZE */
2320 /*==================*/
2321 .customize {
2322 width: 100%;
2323 margin-bottom: 50px;
2324 }
2325 .customize .color-orange {
2326 background-color: #fb7c17;
2327 border: 1px solid #d66a14;
2328 color: white;
2329 }
2330 .customize .color-white {
2331 color: #c1c5cd !important;
2332 background-color: white;
2333 border: 1px solid #c1c5cd;
2334 }
2335 .customize .control-panel {
2336 width: 100%;
2337 height: auto;
2338 margin-bottom: 10px;
2339 }
2340 .customize .control-panel .options {
2341 width: auto;
2342 margin: 0 auto;
2343 float: none;
2344 display: table;
2345 }
2346 .customize .control-panel .options em.color-icon,
2347 .customize .control-panel .options em.hand-with-coin {
2348 width: 20px;
2349 height: 20px;
2350 margin-right: 10px;
2351 display: inline-block;
2352 background-size: cover;
2353 }
2354 .customize .control-panel .options .edit button {
2355 background-color: white;
2356 color: #c1c5cd;
2357 border: 1px solid #c1c5cd;
2358 height: 40px;
2359 }
2360 .customize .control-panel .options .edit ul {
2361 min-width: 20px !important;
2362 width: auto;
2363 margin-top: 5px;
2364 }
2365 .customize .control-panel .options .edit ul a {
2366 cursor: pointer;
2367 }
2368 .customize .control-panel .options .edit + .edit {
2369 margin-left: 5px;
2370 }
2371 .customize .preview {
2372 width: 100%;
2373 text-align: center;
2374 padding: 40px 0;
2375 border: 1px solid #ccc;
2376 box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.15);
2377 background-color: #F7F7F7;
2378 }
2379 .customize .preview .pling-donation-button {
2380 width: auto;
2381 margin: 0 auto;
2382 float: none;
2383 display: table;
2384 }
2385 .customize .preview .pling-donation-button .button-hand {
2386 float: left;
2387 }
2388 .customize .preview .pling-donation-button .button-btn {
2389 float: left;
2390 color: white;
2391 margin: 25px 0 0 5px;
2392 padding: 5px 10px;
2393 font-size: 18px;
2394 }
2395 /*==================*/
2396 /* POPUPS & MODALS */
2397 /*==================*/
2398 /*-- POPUPS GENERAL --*/
2399 .content-modal .modal-header h3 {
2400 text-align: center;
2401 color: #2673b0;
2402 }
2403 .content-modal .modal-body h4 {
2404 border-bottom: 1px solid #dbdbdb;
2405 padding-bottom: 5px;
2406 }
2407 .content-modal .modal-footer.w-logo {
2408 background: #34495c;
2409 }
2410 .content-modal .modal-footer.w-logo .logo {
2411 background-image: url(../img/bg_sheet.png);
2412 background-position: -85px 0;
2413 display: block;
2414 float: right;
2415 height: 32px;
2416 width: 91px;
2417 }
2418 div#modal-dialog {
2419 width: auto;
2420 outline: none;
2421 top: 50px;
2422 }
2423 div#modal-dialog iframe {
2424 margin-bottom: -10px;
2425 }
2426 .overlay {
2427 width: 100%;
2428 height: 100%;
2429 position: fixed;
2430 background: rgba(23, 35, 47, 0.8);
2431 z-index: 2;
2432 margin-top: -60px;
2433 }
2434 .modal {
2435 overflow-y: hidden;
2436 }
2437 .login-popup .login-popup-form,
2438 .forgot-pwd {
2439 width: 440px;
2440 }
2441 .login-popup-form,
2442 .signup-form,
2443 .forgot-pwd,
2444 .small-popup-form {
2445 background: #fff;
2446 border-radius: 10px;
2447 padding: 0 20px;
2448 float: left;
2449 margin: 0;
2450 }
2451 /*-- POPUPS GENERAL --*/
2452 /*-- LOGIN --*/
2453 .login-popup {
2454 position: relative;
2455 background: white;
2456 padding: 0;
2457 width: 420px;
2458 margin: 0 auto;
2459 }
2460 .login-popup p {
2461 font-size: 15px;
2462 margin-bottom: 0;
2463 text-align: left;
2464 }
2465 .login-popup .signup-form {
2466 width: 600px;
2467 }
2468 .login-popup .login-form-container > form {
2469 margin: 0;
2470 }
2471 .login-popup .login-form-container > form .inputbox {
2472 border: 1px solid #eaedf2;
2473 border-radius: 3px;
2474 height: 40px;
2475 padding: 10px 0 10px 32px;
2476 width: 100%;
2477 outline: none;
2478 margin-bottom: 10px;
2479 font-family: inherit;
2480 }
2481 .login-popup .login-form-container > form .name {
2482 background: #eaedf2 url(../img/user.png) 10px 13px no-repeat;
2483 }
2484 .login-popup .login-form-container > form .email {
2485 background: #eaedf2 url(../img/email.png) 10px 15px no-repeat;
2486 }
2487 .login-popup .login-form-container > form .password {
2488 background: #eaedf2 url(../img/password.png) 10px 10px no-repeat;
2489 }
2490 .login-popup .login-form-container > form .container-checkbox-remember-me {
2491 height: 20px;
2492 clear: both;
2493 margin-bottom: 10px;
2494 }
2495 .login-popup .login-form-container > form .container-checkbox-remember-me input {
2496 height: 20px;
2497 margin: 0 5px;
2498 float: left;
2499 width: auto;
2500 }
2501 .login-popup .login-form-container > form .container-checkbox-remember-me label {
2502 display: inline-block;
2503 font-weight: bold;
2504 font-size: 13px;
2505 float: left;
2506 }
2507 .login-popup .login-form-container > form .button {
2508 background: none repeat scroll 0 0 #14B9D5;
2509 border: none;
2510 border-radius: 4px 4px 4px 4px;
2511 color: #FFFFFF;
2512 cursor: pointer;
2513 font-family: inherit;
2514 font-size: 15px;
2515 font-weight: 700;
2516 padding: 10px 20px;
2517 }
2518 .login-popup .login-form-container > form .button:hover {
2519 background: #0e778a;
2520 }
2521 .login-popup .login-form-container > form .button > i {
2522 font-size: 20px;
2523 }
2524 .login-popup .social {
2525 margin: 20px 0 15px;
2526 }
2527 .login-popup .social a {
2528 color: #fff;
2529 text-decoration: none;
2530 font-weight: bold;
2531 border-radius: 4px 4px 4px 4px;
2532 margin-right: 10px;
2533 float: left;
2534 height: 40px;
2535 }
2536 .login-popup .social > i {
2537 border-radius: 4px 0 0 4px;
2538 bottom: 3px;
2539 font-size: 38px;
2540 padding: 0;
2541 position: relative;
2542 vertical-align: middle;
2543 clear: both;
2544 }
2545 .login-popup .social > span {
2546 font-size: 18px;
2547 letter-spacing: 0.06em;
2548 padding: 24px 20px 24px 0;
2549 }
2550 .small-popup-form {
2551 width: 350px;
2552 }
2553 /*Social Button Styling*/
2554 .login-form-container {
2555 position: relative;
2556 }
2557 .login-form-links {
2558 position: absolute;
2559 bottom: 10px;
2560 right: 20px;
2561 font-size: 13px;
2562 }
2563 .login-form-links a {
2564 font-size: 13px;
2565 }
2566 /*-- /LOGIN --*/
2567 /*-- HOMEPAGE VIDEO **/
2568 #homepage-video .content-modal {
2569 width: 680px;
2570 }
2571 /*-- /HOMEPAGE VIDEO **/
2572 /*-- AUTHORIZATION --*/
2573 .modal-content.auth-popup {
2574 width: 350px;
2575 margin: 0 auto;
2576 }
2577 /*-- /AUTHORIZATION --*/
2578 /*-- REPORT --*/
2579 .report-form {
2580 width: 430px;
2581 position: relative;
2582 margin: 5px auto;
2583 }
2584 .report-form .report-container {
2585 width: 100%;
2586 margin: 0 auto;
2587 }
2588 .report-form h3.report-heading {
2589 font-weight: normal;
2590 font-size: 18px;
2591 text-align: center;
2592 width: 100%;
2593 }
2594 .report-form input,
2595 .report-form select,
2596 .report-form textarea {
2597 width: 100%;
2598 }
2599 .report-form h3 {
2600 margin-top: 0px;
2601 }
2602 .report-form hr {
2603 height: 0;
2604 border-bottom: 1px solid #bdc3c6;
2605 width: 430px;
2606 margin: 15px -30px;
2607 }
2608 .report-form .standard-form .field {
2609 margin-bottom: 0px;
2610 }
2611 .report-form form {
2612 margin: 0px;
2613 }
2614 .report-form form .selectbox {
2615 width: 100%;
2616 margin-bottom: 10px;
2617 }
2618 .report-form form .selectbox .selectbox_select {
2619 width: 100%;
2620 }
2621 .report-form form .selectbox .selectbox_select span.selectbox_selected {
2622 width: 335px;
2623 text-align: left;
2624 background: none;
2625 }
2626 .report-form form .selectbox .selectbox_menu {
2627 width: 100%;
2628 }
2629 .report-form form .selectbox .selectbox_menu ul li {
2630 text-align: left;
2631 width: 100%;
2632 float: left;
2633 padding: 0 15px;
2634 font-size: 14px;
2635 }
2636 .report-form form button#send {
2637 margin: 10px 0px 0px 0px;
2638 }
2639 /*-- /REPORT --*/
2640 /*-- SUPPORT FORM --*/
2641 .standard-form.partialpaypal .controls > div {
2642 padding: 0;
2643 }
2644 .standard-form.partialpaypal .input-group .input-group-addon {
2645 background-color: white;
2646 border: 0;
2647 cursor: pointer;
2648 }
2649 .standard-form.partialpaypal .input-group input[type="radio"] {
2650 width: auto;
2651 padding-right: 0;
2652 height: auto;
2653 cursor: pointer;
2654 }
2655 .standard-form.partialpaypal .input-group input[type="text"] {
2656 height: 2.2em;
2657 line-height: 2em;
2658 background: none;
2659 border: 0;
2660 width: auto;
2661 cursor: pointer;
2662 color: #555;
2663 }
2664 .standard-form.partialpaypal input {
2665 width: 112px;
2666 padding-right: 40px;
2667 height: 30px;
2668 }
2669 .support {
2670 position: relative;
2671 margin: 5px auto;
2672 width: 400px;
2673 }
2674 .support h3 {
2675 margin: 0;
2676 }
2677 .support hr {
2678 height: 0px;
2679 border-top: 1px solid #bdc3c6;
2680 margin: 1em 0;
2681 }
2682 .support .clearfix > hr {
2683 width: 400px;
2684 margin: 15px -30px;
2685 border-bottom: 1px solid;
2686 }
2687 .support .product-support {
2688 font-size: 20px;
2689 }
2690 .support .product-info {
2691 padding-right: 132px;
2692 position: relative;
2693 min-height: 88px;
2694 }
2695 .support .product-info .product-about {
2696 width: 100%;
2697 font-size: 1.5em;
2698 }
2699 .support .product-info .product-about .product-maker {
2700 font-size: 0.8%;
2701 margin-top: 1em;
2702 }
2703 .support .product-info .product-about hr {
2704 height: 0px;
2705 border-top: 1px solid #bdc3c6;
2706 width: 70px;
2707 margin: 20px auto;
2708 }
2709 .support .product-info > .right {
2710 position: absolute;
2711 top: 0;
2712 right: 0;
2713 }
2714 .support form#support-form .clearfix + .clearfix {
2715 margin-top: 30px;
2716 }
2717 .support form#support-form .controls.controls-row {
2718 width: 100%;
2719 float: left;
2720 padding-bottom: 0.25em;
2721 }
2722 .support form#support-form .controls.controls-row label {
2723 display: block;
2724 float: left;
2725 height: 2em;
2726 text-shadow: 1px 1px 1px #e6e6e6;
2727 line-height: 2em;
2728 margin-bottom: 0;
2729 }
2730 .support form#support-form .controls.controls-row span {
2731 height: 2em;
2732 text-shadow: 1px 1px 1px #e6e6e6;
2733 line-height: 2em;
2734 margin-bottom: 0;
2735 }
2736 .support form#support-form .controls.controls-row span.glyphicon {
2737 font-size: 0.9em;
2738 }
2739 .support form#support-form .controls.controls-row textarea {
2740 background: rgba(246, 246, 246, 0.45);
2741 color: black;
2742 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
2743 -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
2744 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
2745 padding: 0.25em;
2746 }
2747 .support form#support-form .controls.controls-row .col-lg-6 {
2748 padding-right: 0.5em;
2749 padding-left: 0;
2750 }
2751 .support form#support-form .controls.controls-row .col-lg-6 + .col-lg-6 {
2752 padding-right: 0;
2753 padding-left: 0.5em;
2754 }
2755 .support form#support-form .controls.controls-row .well {
2756 background: none;
2757 border: 0px;
2758 padding: 0.5em;
2759 -webkit-box-shadow: 0 0 0 #000000;
2760 -moz-box-shadow: 0 0 0 #000000;
2761 box-shadow: 0 0 0 #000000;
2762 margin: 0;
2763 }
2764 .support form#support-form .controls.controls-row .well figure {
2765 width: 100%;
2766 height: 2.5em;
2767 background-size: contain;
2768 background-repeat: no-repeat;
2769 cursor: pointer;
2770 }
2771 .support form#support-form .controls.controls-row .well figure#bitcoin {
2772 background-image: url('../img/logo_bitcoin.png');
2773 }
2774 .support form#support-form .controls.controls-row .well figure#paypal {
2775 background-image: url('../img/logo_paypal.png');
2776 }
2777 .support form#support-form .controls.controls-row .well:active,
2778 .support form#support-form .controls.controls-row .well.active {
2779 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
2780 -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
2781 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
2782 }
2783 .support form#support-form .controls-row + .controls-row {
2784 padding-top: 0.25em;
2785 }
2786 .support form#support-form .controls-row:last-of-type {
2787 margin-top: 10px;
2788 }
2789 .support .modal-footer {
2790 margin-top: 0;
2791 }
2792 /*-- /SUPPORT FORM --*/
2793 /*-- SHARE FORM --*/
2794 .share-form {
2795 width: 400px;
2796 position: relative;
2797 margin: 10px auto;
2798 }
2799 .share-form .modal-content {
2800 background: #f6f6f6;
2801 }
2802 .share-form .modal-header {
2803 padding-left: 135px;
2804 min-height: 80px;
2805 background: white;
2806 -webkit-border-radius: 6px 6px 0 0;
2807 -moz-border-radius: 6px 6px 0 0;
2808 border-radius: 6px 6px 0 0;
2809 -webkit-background-clip: padding-box;
2810 -moz-background-clip: padding;
2811 background-clip: padding-box;
2812 }
2813 .share-form .modal-header > figure {
2814 position: absolute;
2815 top: 15px;
2816 left: 15px;
2817 width: 120px;
2818 height: 80px;
2819 padding: 3px;
2820 border: 1px solid #dbdbdb;
2821 background: rgba(246, 246, 246, 0.45);
2822 }
2823 .share-form .modal-header > figure > img {
2824 width: 100%;
2825 height: 100%;
2826 }
2827 .share-form .modal-header h3 {
2828 margin: 0;
2829 }
2830 .share-form .modal-body {
2831 padding: 0;
2832 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
2833 -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
2834 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
2835 }
2836 .share-form .modal-body ul.nav.nav-tabs {
2837 padding: 0 1em;
2838 padding-top: 1em;
2839 }
2840 .share-form .modal-body .tab-content {
2841 padding: 1em;
2842 background: white;
2843 -webkit-border-radius: 0 0 6px 6px;
2844 -moz-border-radius: 0 0 6px 6px;
2845 border-radius: 0 0 6px 6px;
2846 -webkit-background-clip: padding-box;
2847 -moz-background-clip: padding;
2848 background-clip: padding-box;
2849 }
2850 .share-form .modal-body .tab-content .social-container {
2851 margin-bottom: 0px;
2852 }
2853 .share-form .modal-body .tab-content .social-container .clearfix {
2854 margin-top: 0px;
2855 }
2856 .share-form .modal-body .tab-content .social-container .social > a {
2857 display: block;
2858 position: relative;
2859 width: 2.5em;
2860 float: left;
2861 height: 2.5em;
2862 background-size: cover;
2863 }
2864 .share-form .modal-body .tab-content .social-container .social > a > em {
2865 width: 100%;
2866 height: 100%;
2867 position: absolute;
2868 top: 0;
2869 left: 0;
2870 -webkit-opacity: 0;
2871 -moz-opacity: 0;
2872 opacity: 0;
2873 -webkit-transition: all 0.2s ease-out;
2874 -moz-transition: all 0.2s ease-out;
2875 -ms-transition: all 0.2s ease-out;
2876 -o-transition: all 0.2s ease-out;
2877 }
2878 .share-form .modal-body .tab-content .social-container .social > a:hover > em {
2879 -webkit-opacity: 1;
2880 -moz-opacity: 1;
2881 opacity: 1;
2882 }
2883 .share-form .modal-body .tab-content .social-container .social.facebook a {
2884 background-image: url('../img/icon-facebook.png');
2885 }
2886 .share-form .modal-body .tab-content .social-container .social.facebook a em {
2887 background-image: url('../img/icon-facebook-hover.png');
2888 }
2889 .share-form .modal-body .tab-content .social-container .social.twitter a {
2890 background-image: url('../img/icon-twitter.png');
2891 }
2892 .share-form .modal-body .tab-content .social-container .social.twitter a em {
2893 background-image: url('../img/icon-twitter-hover.png');
2894 }
2895 .share-form .modal-body .tab-content .social-container .social.google a {
2896 background-image: url('../img/icon-google.png');
2897 }
2898 .share-form .modal-body .tab-content .social-container .social.google a em {
2899 background-image: url('../img/icon-google-hover.png');
2900 }
2901 .share-form .modal-body .tab-content .social-container .social.mail a {
2902 background-color: #45bf45;
2903 -webkit-border-radius: 4px;
2904 -moz-border-radius: 4px;
2905 border-radius: 4px;
2906 -webkit-background-clip: padding-box;
2907 -moz-background-clip: padding;
2908 background-clip: padding-box;
2909 }
2910 .share-form .modal-body .tab-content .social-container .social.mail a em {
2911 -webkit-opacity: 1;
2912 -moz-opacity: 1;
2913 opacity: 1;
2914 background-image: url('../img/icon_mail.png');
2915 }
2916 .share-form .modal-body .tab-content .social-container .social.mail a:hover {
2917 background: #6bcc6b;
2918 }
2919 .share-form .modal-body .tab-content .social-container .social + .social {
2920 margin-left: 0.5em;
2921 }
2922 .share-form .modal-body .tab-content .social-container.fb-link em {
2923 background-image: url('../img/social_icons/fb.png');
2924 }
2925 .share-form .modal-body .tab-content .social-container.tw-link em {
2926 background-image: url('../img/social_icons/tw.png');
2927 }
2928 .share-form .modal-body .tab-content .social-container.gp-link em {
2929 background-image: url('../img/social_icons/g_plus.png');
2930 }
2931 .share-form .modal-body .tab-content .well {
2932 padding: 0.5em;
2933 margin-bottom: 0;
2934 margin-top: 0em;
2935 }
2936 .share-form .modal-body .tab-content .well h4 {
2937 margin: 0;
2938 padding-bottom: 10px;
2939 }
2940 .share-form .modal-body .tab-content .well label {
2941 font-size: 0.8em;
2942 }
2943 .share-form .modal-body .tab-content .well label:first-of-type {
2944 width: 100%;
2945 float: left;
2946 display: block;
2947 padding-top: 10px;
2948 border-top: 1px solid white;
2949 }
2950 .share-form .modal-body .tab-content .well input[type="text"] {
2951 width: 100%;
2952 }
2953 .share-form .modal-body .tab-content form.form-share input {
2954 width: 100%;
2955 }
2956 /*-- /SHARE FORM --*/
2957 /*-- VERIFICATION --*/
2958 .clipboard-copy .clipboard-code {
2959 margin-bottom: 10px;
2960 float: left;
2961 background: #2673B0;
2962 color: white;
2963 padding: 10px 5px;
2964 border-radius: 5px;
2965 box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.15);
2966 font-size: 13px;
2967 width: 100%;
2968 }
2969 /*-- /VERIFICATION --*/
2970 /*-- CODE EMBED --*/
2971 .code-embed-modal .content-modal {
2972 width: 400px;
2973 }
2974 .code-embed-modal .content-modal .modal-body textarea {
2975 width: 100%;
2976 border-width: 1px;
2977 height: 100px;
2978 }
2979 /*-- /CODE EMBED --*/
2980 /*-- WIDGET MODAL --*/
2981 #modal-widget .content-modal {
2982 width: 770px;
2983 }
2984 #modal-widget .content-modal .modal-body {
2985 overflow: hidden;
2986 height: auto;
2987 }
2988 #modal-widget .content-modal .modal-body hr {
2989 float: left;
2990 width: 100%;
2991 }
2992 #modal-widget .content-modal #configuration-options {
2993 width: 50%;
2994 float: left;
2995 padding-right: 10px;
2996 }
2997 #modal-widget .content-modal #configuration-options .tab-content .tab-pane {
2998 padding: 10px 0;
2999 }
3000 #modal-widget .content-modal #configuration-options .tab-content .tab-pane .field {
3001 font-size: 12px;
3002 }
3003 #modal-widget .content-modal #configuration-options .tab-content .tab-pane .field label {
3004 width: 35%;
3005 float: left;
3006 height: 25px;
3007 line-height: 25px;
3008 }
3009 #modal-widget .content-modal #configuration-options .tab-content .tab-pane .field input[type="text"] {
3010 float: right;
3011 width: 65%;
3012 border-width: 1px;
3013 height: 25px;
3014 line-height: 25px;
3015 border-radius: 3px;
3016 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15);
3017 -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15);
3018 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15);
3019 }
3020 #modal-widget .content-modal #configuration-options .tab-content .tab-pane .field input[type="radio"] {
3021 width: auto;
3022 float: left;
3023 margin: 7px 3px 5px 0;
3024 }
3025 #modal-widget .content-modal #configuration-options .tab-content .tab-pane .field span {
3026 float: left;
3027 height: 25px;
3028 line-height: 25px;
3029 display: inline-block;
3030 }
3031 #modal-widget .content-modal #configuration-options .tab-content .tab-pane .field span + input[type="radio"] {
3032 margin-left: 15px;
3033 }
3034 #modal-widget .content-modal #configuration-options .tab-content .tab-pane .field input[type="checkbox"] {
3035 float: left;
3036 margin: 7px 0;
3037 width: auto;
3038 }
3039 #modal-widget .content-modal #configuration-options .tab-content .tab-pane .field textarea {
3040 width: 65%;
3041 border-width: 1px;
3042 border-radius: 3px;
3043 padding: 2px 10px;
3044 height: 100px;
3045 margin-bottom: 5px;
3046 }
3047 #modal-widget .content-modal #widget-preview {
3048 width: 50%;
3049 padding-left: 10px;
3050 float: left;
3051 }
3052 #modal-widget .content-modal #widget-preview #pling-widget {
3053 width: 100%;
3054 padding: 8px;
3055 font-size: 12px;
3056 background-color: #2673b0;
3057 -webkit-border-radius: 8px;
3058 -moz-border-radius: 8px;
3059 border-radius: 8px;
3060 -webkit-background-clip: padding-box;
3061 -moz-background-clip: padding;
3062 background-clip: padding-box;
3063 }
3064 #modal-widget .content-modal #widget-preview #pling-widget .widget-header {
3065 width: 100%;
3066 margin-bottom: 5px;
3067 }
3068 #modal-widget .content-modal #widget-preview #pling-widget .widget-header h3 {
3069 margin: 0;
3070 font-size: 18px;
3071 margin-bottom: 0 !important;
3072 }
3073 #modal-widget .content-modal #widget-preview #pling-widget .widget-body {
3074 background-color: white;
3075 padding: 5px;
3076 margin-bottom: 5px;
3077 border: 1px solid rgba(68, 68, 68, 0.2);
3078 -webkit-border-radius: 5px;
3079 -moz-border-radius: 5px;
3080 border-radius: 5px;
3081 -webkit-background-clip: padding-box;
3082 -moz-background-clip: padding;
3083 background-clip: padding-box;
3084 -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.15);
3085 -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.15);
3086 box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.15);
3087 }
3088 #modal-widget .content-modal #widget-preview #pling-widget .widget-body .product-funding-info {
3089 width: 100%;
3090 position: relative;
3091 }
3092 #modal-widget .content-modal #widget-preview #pling-widget .widget-body .product-funding-info .goal-range-number {
3093 width: 100%;
3094 height: 20px;
3095 line-height: 20px;
3096 }
3097 #modal-widget .content-modal #widget-preview #pling-widget .widget-body .product-funding-info .goal-range-number span {
3098 display: block;
3099 float: left;
3100 }
3101 #modal-widget .content-modal #widget-preview #pling-widget .widget-body .product-funding-info .goal-range-number span + span {
3102 float: right;
3103 }
3104 #modal-widget .content-modal #widget-preview #pling-widget .widget-body .product-funding-info .goal-range-number span + span.unlimited {
3105 font-size: 27px;
3106 }
3107 #modal-widget .content-modal #widget-preview #pling-widget .widget-body .product-funding-info .achieved-amount {
3108 width: 100%;
3109 height: 20px;
3110 padding: 3px;
3111 background: rgba(204, 204, 204, 0.19);
3112 -webkit-border-radius: 4px;
3113 -moz-border-radius: 4px;
3114 border-radius: 4px;
3115 -webkit-background-clip: padding-box;
3116 -moz-background-clip: padding;
3117 background-clip: padding-box;
3118 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
3119 -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
3120 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
3121 }
3122 #modal-widget .content-modal #widget-preview #pling-widget .widget-body .product-funding-info .achieved-amount .bar {
3123 width: 4px;
3124 max-width: 100%;
3125 height: 14px;
3126 background-color: #2673b0;
3127 -webkit-border-radius: 2px;
3128 -moz-border-radius: 2px;
3129 border-radius: 2px;
3130 -webkit-background-clip: padding-box;
3131 -moz-background-clip: padding;
3132 background-clip: padding-box;
3133 -webkit-box-shadow: inset 0 6px 0 rgba(255, 255, 255, 0.2);
3134 -moz-box-shadow: inset 0 6px 0 rgba(255, 255, 255, 0.2);
3135 box-shadow: inset 0 6px 0 rgba(255, 255, 255, 0.2);
3136 }
3137 #modal-widget .content-modal #widget-preview #pling-widget .widget-body .product-funding-info .achieved-amount .bar.no-goal {
3138 width: 50%;
3139 }
3140 #modal-widget .content-modal #widget-preview #pling-widget .widget-body .product-funding-info .money-raised {
3141 width: 100%;
3142 height: 20px;
3143 line-height: 20px;
3144 }
3145 #modal-widget .content-modal #widget-preview #pling-widget .widget-body .product-funding-info.with-goal {
3146 padding-right: 25%;
3147 }
3148 #modal-widget .content-modal #widget-preview #pling-widget .widget-body .product-funding-info.with-goal .percentage {
3149 position: absolute;
3150 top: 0;
3151 right: 0;
3152 width: 25%;
3153 height: 60px;
3154 line-height: 60px;
3155 text-align: center;
3156 font-size: 22px;
3157 }
3158 #modal-widget .content-modal #widget-preview #pling-widget .widget-body .widget-text {
3159 margin-top: 10px;
3160 }
3161 #modal-widget .content-modal #widget-preview #pling-widget .widget-body .supporters {
3162 width: 100%;
3163 height: auto;
3164 overflow: hidden;
3165 margin-top: 10px;
3166 }
3167 #modal-widget .content-modal #widget-preview #pling-widget .widget-body .supporters .supporter {
3168 width: 12.5%;
3169 height: auto;
3170 float: left;
3171 padding: 2px;
3172 clear: none;
3173 border-bottom: 0;
3174 }
3175 #modal-widget .content-modal #widget-preview #pling-widget .widget-body .supporters .supporter figure {
3176 width: 100%;
3177 height: auto;
3178 }
3179 #modal-widget .content-modal #widget-preview #pling-widget .widget-body .supporters .supporter figure img {
3180 width: 100%;
3181 height: auto;
3182 -webkit-border-radius: 100%;
3183 -moz-border-radius: 100%;
3184 border-radius: 100%;
3185 -webkit-background-clip: padding-box;
3186 -moz-background-clip: padding;
3187 background-clip: padding-box;
3188 }
3189 #modal-widget .content-modal #widget-preview #pling-widget .widget-body .comments {
3190 height: auto;
3191 overflow: hidden;
3192 width: 100%;
3193 margin-top: 10px;
3194 }
3195 #modal-widget .content-modal #widget-preview #pling-widget .widget-body .comments .comment {
3196 position: relative;
3197 width: 100%;
3198 min-height: 42px;
3199 padding-left: 15%;
3200 }
3201 #modal-widget .content-modal #widget-preview #pling-widget .widget-body .comments .comment figure {
3202 position: absolute;
3203 top: 0;
3204 left: 0;
3205 width: 15%;
3206 height: auto;
3207 }
3208 #modal-widget .content-modal #widget-preview #pling-widget .widget-body .comments .comment figure img {
3209 width: 100%;
3210 height: auto;
3211 }
3212 #modal-widget .content-modal #widget-preview #pling-widget .widget-body .comments .comment .content {
3213 width: 100%;
3214 }
3215 #modal-widget .content-modal #widget-preview #pling-widget .widget-body .comments .comment .content .info {
3216 width: 100%;
3217 height: 12px;
3218 line-height: 12px;
3219 margin-bottom: 5px;
3220 }
3221 #modal-widget .content-modal #widget-preview #pling-widget .widget-body .comments .comment .content .text {
3222 width: 100%;
3223 font-size: 11px;
3224 line-height: 11px;
3225 }
3226 #modal-widget .content-modal #widget-preview #pling-widget .widget-body .comments .comment + .comment {
3227 margin-top: 5px;
3228 }
3229 #modal-widget .content-modal #widget-preview #pling-widget .widget-footer {
3230 width: 100%;
3231 height: auto;
3232 overflow: hidden;
3233 }
3234 #modal-widget .content-modal #widget-preview #pling-widget .widget-footer .button {
3235 float: left;
3236 }
3237 #modal-widget .content-modal #widget-preview #pling-widget .widget-footer .pay-secure {
3238 float: left;
3239 padding-left: 10px;
3240 color: white;
3241 width: 100px;
3242 }
3243 #modal-widget .content-modal #widget-preview #pling-widget .widget-footer .powered-by {
3244 float: right;
3245 }
3246 #modal-widget .content-modal #widget-preview #pling-widget .widget-footer .powered-by a.pling-logo {
3247 display: block;
3248 background-image: url('../img/new/pling-logo-large.png');
3249 height: 34px;
3250 width: 63px;
3251 background-size: contain;
3252 }
3253 #modal-widget .content-modal #widget-preview #pling-widget .widget-footer .powered-by a.pling-logo.grey {
3254 background-image: url('../img/new/logo.png');
3255 }
3256 #modal-widget .content-modal #widget-preview #pling-widget .widget-footer .powered-by a.pling-logo.icon {
3257 width: 34px;
3258 background-image: url('../img/new/box-logo.png');
3259 }
3260 /*-- /. MODAL --*/
3261 /** RESPONSIVE FIX **/
3262 @media (max-width: 470px) {
3263 .modal-dialog {
3264 width: 98% !important;
3265 margin: 0 1% !important;
3266 /* modal specific */
3267 }
3268 .modal-dialog .modal-content {
3269 width: 100% !important;
3270 }
3271 .modal-dialog .login-popup p {
3272 position: absolute;
3273 bottom: -25px;
3274 left: 0;
3275 }
3276 .modal-dialog form#support-form .controls.controls-row .radio {
3277 width: 50%;
3278 }
3279 }
3280 /** /RESPONSIVE FIX **/
3281 /**-- SUPPORTER BOX ---------------------------*/
3282 body.body-external {
3283 margin: 0;
3284 padding-top: 0;
3285 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
3286 }
3287 .supporter-box-container {
3288 width: 100%;
3289 height: auto;
3290 float: left;
3291 border: 1px solid #999999;
3292 -webkit-box-sizing: border-box;
3293 -moz-box-sizing: border-box;
3294 box-sizing: border-box;
3295 }
3296 .supporter-box-container figure {
3297 float: left;
3298 margin: 0;
3299 padding: 0;
3300 }
3301 .supporter-box-container div {
3302 float: left;
3303 }
3304 .supporter-box-container > div {
3305 width: 100%;
3306 height: auto;
3307 padding: 7px;
3308 -webkit-box-sizing: border-box;
3309 -moz-box-sizing: border-box;
3310 box-sizing: border-box;
3311 }
3312 .supporter-box-container .supporter-box-top {
3313 background-color: #e5e5e5;
3314 position: relative;
3315 }
3316 .supporter-box-container .supporter-box-top .title {
3317 float: left;
3318 width: 50%;
3319 }
3320 .supporter-box-container .supporter-box-top .title > a {
3321 font-size: 16px;
3322 color: #39568c;
3323 text-decoration: none;
3324 -webkit-transition: all 0.2s ease-out;
3325 -moz-transition: all 0.2s ease-out;
3326 -ms-transition: all 0.2s ease-out;
3327 -o-transition: all 0.2s ease-out;
3328 }
3329 .supporter-box-container .supporter-box-top .title > a:hover {
3330 text-decoration: underline;
3331 color: #428bca;
3332 }
3333 .supporter-box-container .supporter-box-top figure {
3334 position: absolute;
3335 top: 7px;
3336 right: 7px;
3337 width: 102px;
3338 height: 68px;
3339 border: inset 1px #999999;
3340 }
3341 .supporter-box-container .supporter-box-top figure a {
3342 width: 100%;
3343 height: 100%;
3344 display: block;
3345 overflow: hidden;
3346 }
3347 .supporter-box-container .supporter-box-top figure a img {
3348 width: 100%;
3349 }
3350 .supporter-box-container .supporter-box-body > div {
3351 width: 100%;
3352 float: left;
3353 -webkit-box-sizing: border-box;
3354 -moz-box-sizing: border-box;
3355 box-sizing: border-box;
3356 }
3357 .supporter-box-container .supporter-box-body .info {
3358 height: 30px;
3359 padding-left: 35px;
3360 position: relative;
3361 margin-bottom: 10px;
3362 }
3363 .supporter-box-container .supporter-box-body .info > em {
3364 position: absolute;
3365 left: 0;
3366 top: 0;
3367 }
3368 .supporter-box-container .supporter-box-body .info > span {
3369 display: block;
3370 width: 100%;
3371 height: 15px;
3372 line-height: 15px;
3373 font-size: 13px;
3374 float: left;
3375 color: black;
3376 }
3377 .supporter-box-container .supporter-box-body .info span + span {
3378 color: #1e4483;
3379 }
3380 .supporter-box-container .supporter-box-body .supporters {
3381 width: 102%;
3382 }
3383 .supporter-box-container .supporter-box-body .supporters figure {
3384 width: 30px;
3385 height: 30px;
3386 margin: 0px 3.5px 3.5px 0px;
3387 }
3388 .supporter-box-container .supporter-box-body .supporters figure a {
3389 display: block;
3390 width: 100%;
3391 height: 100%;
3392 overflow: hidden;
3393 -webkit-border-radius: 3px;
3394 -moz-border-radius: 3px;
3395 border-radius: 3px;
3396 -webkit-background-clip: padding-box;
3397 -moz-background-clip: padding;
3398 background-clip: padding-box;
3399 }
3400 .supporter-box-container .supporter-box-body .supporters figure a img {
3401 width: 100%;
3402 }
3403 /**-- /SUPPORTER BOX ---------------------------*/
3404 /*------ WIDGET --------------------*/
3405 #configuration-options {
3406 width: 60%;
3407 float: left;
3408 padding-right: 10px;
3409 }
3410 #configuration-options ul.nav-tabs {
3411 padding: 0;
3412 background-color: white;
3413 }
3414 #configuration-options ul.nav-tabs li a {
3415 padding: 5px;
3416 }
3417 #configuration-options .tab-content .tab-pane {
3418 padding: 10px 0;
3419 }
3420 #configuration-options .tab-content .tab-pane textarea {
3421 width: 65%;
3422 border-width: 1px;
3423 border-radius: 3px;
3424 padding: 0 5px;
3425 height: 100px;
3426 margin-bottom: 5px;
3427 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15);
3428 -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15);
3429 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15);
3430 }
3431 #configuration-options .tab-content .tab-pane .field {
3432 font-size: 12px;
3433 }
3434 #configuration-options .tab-content .tab-pane .field label {
3435 width: 35%;
3436 float: left;
3437 height: 25px;
3438 line-height: 25px;
3439 }
3440 #configuration-options .tab-content .tab-pane .field input[type="text"],
3441 #configuration-options .tab-content .tab-pane .field input.color-input {
3442 padding: 0 5px;
3443 float: right;
3444 width: 65%;
3445 border-width: 1px;
3446 height: 25px;
3447 line-height: 25px;
3448 border-radius: 3px;
3449 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15);
3450 -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15);
3451 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15);
3452 }
3453 #configuration-options .tab-content .tab-pane .field input[type="radio"] {
3454 width: auto;
3455 float: left;
3456 margin: 7px 3px 5px 0;
3457 }
3458 #configuration-options .tab-content .tab-pane .field span {
3459 float: left;
3460 height: 25px;
3461 line-height: 25px;
3462 display: inline-block;
3463 }
3464 #configuration-options .tab-content .tab-pane .field span + input[type="radio"] {
3465 margin-left: 15px;
3466 }
3467 #configuration-options .tab-content .tab-pane .field input[type="checkbox"] {
3468 float: left;
3469 margin: 7px 0;
3470 width: auto;
3471 }
3472 #pling-widget {
3473 width: 100%;
3474 max-width: 400px;
3475 padding: 8px;
3476 font-size: 12px;
3477 background-color: #2673b0;
3478 -webkit-border-radius: 8px;
3479 -moz-border-radius: 8px;
3480 border-radius: 8px;
3481 -webkit-background-clip: padding-box;
3482 -moz-background-clip: padding;
3483 background-clip: padding-box;
3484 }
3485 #pling-widget .widget-header {
3486 width: 100%;
3487 margin-bottom: 5px;
3488 }
3489 #pling-widget .widget-header h3 {
3490 margin: 0;
3491 font-size: 18px;
3492 }
3493 #pling-widget .widget-body {
3494 background-color: white;
3495 padding: 5px;
3496 margin-bottom: 5px;
3497 border: 1px solid rgba(68, 68, 68, 0.2);
3498 -webkit-border-radius: 5px;
3499 -moz-border-radius: 5px;
3500 border-radius: 5px;
3501 -webkit-background-clip: padding-box;
3502 -moz-background-clip: padding;
3503 background-clip: padding-box;
3504 -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.15);
3505 -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.15);
3506 box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.15);
3507 }
3508 #pling-widget .widget-body .donation-amount {
3509 line-height: 34px;
3510 margin: 0 0 5px 0;
3511 overflow: hidden;
3512 }
3513 #pling-widget .widget-body .donation-amount .support-with {
3514 width: 25%;
3515 height: 34px;
3516 float: left;
3517 }
3518 #pling-widget .widget-body .donation-amount .donation-amount-number {
3519 width: 50%;
3520 float: left;
3521 position: relative;
3522 }
3523 #pling-widget .widget-body .donation-amount .donation-amount-number span.glyphicon {
3524 position: absolute;
3525 top: 11px;
3526 left: 0;
3527 }
3528 #pling-widget .widget-body .donation-amount .donation-amount-number input[type="text"] {
3529 padding: 0 10px;
3530 float: right;
3531 width: 100%;
3532 border-width: 1px;
3533 height: 24px;
3534 line-height: 24px;
3535 border-radius: 3px;
3536 margin: 5px 0;
3537 border-right: 0;
3538 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15);
3539 -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15);
3540 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15);
3541 }
3542 #pling-widget .widget-body .donation-amount .button {
3543 width: 25%;
3544 float: right;
3545 }
3546 #pling-widget .widget-body .donation-amount .button button {
3547 float: left;
3548 margin-top: 5px;
3549 padding: 0;
3550 width: 100%;
3551 text-align: center;
3552 height: 24px;
3553 }
3554 #pling-widget .widget-body .donation-amount .payment-providers {
3555 width: 100%;
3556 float: left;
3557 margin: 5px 0;
3558 }
3559 #pling-widget .widget-body .donation-amount .payment-providers .pay-with {
3560 width: 25%;
3561 height: 34px;
3562 float: left;
3563 }
3564 #pling-widget .widget-body .donation-amount .payment-providers .input-group {
3565 width: 37%;
3566 float: left;
3567 display: block;
3568 }
3569 #pling-widget .widget-body .donation-amount .payment-providers .input-group .input-group-addon {
3570 width: 20%;
3571 float: left;
3572 padding: 8px 16px 4px 0;
3573 border: 0;
3574 background: transparent;
3575 margin-top: 3px;
3576 }
3577 #pling-widget .widget-body .donation-amount .payment-providers .input-group .input-group-addon input[type="radio"] {
3578 width: auto;
3579 }
3580 #pling-widget .widget-body .donation-amount .payment-providers .input-group .payment-icon {
3581 width: 70%;
3582 float: left;
3583 height: 34px;
3584 display: block;
3585 }
3586 #pling-widget .widget-body .donation-amount .payment-providers .input-group .payment-icon img {
3587 max-width: 100%;
3588 height: 20px;
3589 width: auto;
3590 margin-top: 7px;
3591 }
3592 #pling-widget .widget-body .product-funding-info {
3593 width: 100%;
3594 position: relative;
3595 }
3596 #pling-widget .widget-body .product-funding-info .goal-range-number {
3597 width: 100%;
3598 height: 20px;
3599 line-height: 20px;
3600 display: none;
3601 }
3602 #pling-widget .widget-body .product-funding-info .goal-range-number span {
3603 display: block;
3604 float: left;
3605 }
3606 #pling-widget .widget-body .product-funding-info .goal-range-number span + span {
3607 float: right;
3608 }
3609 #pling-widget .widget-body .product-funding-info .goal-range-number span + span.unlimited {
3610 font-size: 27px;
3611 }
3612 #pling-widget .widget-body .product-funding-info .achieved-amount {
3613 width: 100%;
3614 height: 20px;
3615 padding: 3px;
3616 background: rgba(204, 204, 204, 0.19);
3617 display: none;
3618 -webkit-border-radius: 4px;
3619 -moz-border-radius: 4px;
3620 border-radius: 4px;
3621 -webkit-background-clip: padding-box;
3622 -moz-background-clip: padding;
3623 background-clip: padding-box;
3624 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
3625 -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
3626 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
3627 }
3628 #pling-widget .widget-body .product-funding-info .achieved-amount .bar {
3629 width: 4px;
3630 max-width: 100%;
3631 height: 14px;
3632 background-color: #2673b0;
3633 -webkit-border-radius: 2px;
3634 -moz-border-radius: 2px;
3635 border-radius: 2px;
3636 -webkit-background-clip: padding-box;
3637 -moz-background-clip: padding;
3638 background-clip: padding-box;
3639 -webkit-box-shadow: inset 0 6px 0 rgba(255, 255, 255, 0.2);
3640 -moz-box-shadow: inset 0 6px 0 rgba(255, 255, 255, 0.2);
3641 box-shadow: inset 0 6px 0 rgba(255, 255, 255, 0.2);
3642 }
3643 #pling-widget .widget-body .product-funding-info .achieved-amount .bar.no-goal {
3644 width: 50%;
3645 }
3646 #pling-widget .widget-body .product-funding-info .money-raised {
3647 width: 100%;
3648 height: 20px;
3649 line-height: 20px;
3650 }
3651 #pling-widget .widget-body .product-funding-info.with-goal .percentage {
3652 position: absolute;
3653 top: 0;
3654 right: 0;
3655 width: 25%;
3656 height: 60px;
3657 line-height: 60px;
3658 text-align: center;
3659 font-size: 22px;
3660 }
3661 #pling-widget .widget-body .product-funding-info.with-goal .goal-range-number {
3662 padding-right: 25%;
3663 display: block;
3664 }
3665 #pling-widget .widget-body .product-funding-info.with-goal .achieved-amount {
3666 width: 75%;
3667 display: block;
3668 }
3669 #pling-widget .widget-body .widget-text {
3670 margin-top: 10px;
3671 }
3672 #pling-widget .widget-body .supporters {
3673 width: 100%;
3674 height: auto;
3675 overflow: hidden;
3676 margin-top: 5px;
3677 padding-top: 5px;
3678 border-top: 1px solid #ddd;
3679 }
3680 #pling-widget .widget-body .supporters .supporter {
3681 width: 12.5%;
3682 height: auto;
3683 float: left;
3684 padding: 2px;
3685 clear: none;
3686 border-bottom: 0;
3687 }
3688 #pling-widget .widget-body .supporters .supporter figure {
3689 width: 100%;
3690 height: auto;
3691 }
3692 #pling-widget .widget-body .supporters .supporter figure img {
3693 width: 100%;
3694 height: auto;
3695 }
3696 #pling-widget .widget-body .comments {
3697 height: auto;
3698 overflow: hidden;
3699 width: 100%;
3700 margin-top: 5px;
3701 padding-top: 5px;
3702 border-top: 1px solid #ddd;
3703 }
3704 #pling-widget .widget-body .comments .comment {
3705 position: relative;
3706 width: 100%;
3707 min-height: 42px;
3708 padding-left: 15%;
3709 }
3710 #pling-widget .widget-body .comments .comment figure {
3711 position: absolute;
3712 top: 0;
3713 left: 0;
3714 width: 15%;
3715 height: 100%;
3716 text-align: center;
3717 }
3718 #pling-widget .widget-body .comments .comment figure img {
3719 width: auto;
3720 height: 100%;
3721 float: left;
3722 }
3723 #pling-widget .widget-body .comments .comment .content {
3724 width: 100%;
3725 padding-left: 5%;
3726 }
3727 #pling-widget .widget-body .comments .comment .content .info {
3728 width: 100%;
3729 height: 12px;
3730 line-height: 12px;
3731 margin-bottom: 5px;
3732 }
3733 #pling-widget .widget-body .comments .comment .content .text {
3734 width: 100%;
3735 font-size: 11px;
3736 line-height: 11px;
3737 }
3738 #pling-widget .widget-body .comments .comment + .comment {
3739 margin-top: 5px;
3740 }
3741 #pling-widget .widget-footer {
3742 width: 100%;
3743 height: auto;
3744 overflow: hidden;
3745 }
3746 #pling-widget .widget-footer .donation-amount {
3747 padding-bottom: 10px;
3748 color: white;
3749 font-size: 14px;
3750 }
3751 #pling-widget .widget-footer .button {
3752 float: left;
3753 }
3754 #pling-widget .widget-footer .pay-secure {
3755 float: left;
3756 color: white;
3757 width: 100px;
3758 }
3759 #pling-widget .widget-footer .pay-secure a {
3760 color: white;
3761 }
3762 #pling-widget .widget-footer .powered-by {
3763 float: right;
3764 }
3765 #pling-widget .widget-footer .powered-by a.pling-logo {
3766 display: block;
3767 background-image: url('../img/new/pling-logo-large.png');
3768 height: 34px;
3769 width: 63px;
3770 background-size: contain;
3771 }
3772 #pling-widget .widget-footer .powered-by a.pling-logo.grey {
3773 background-image: url('../img/new/logo.png');
3774 }
3775 #pling-widget .widget-footer .powered-by a.pling-logo.icon {
3776 width: 34px;
3777 background-image: url('../img/new/box-logo.png');
3778 }
3779 /** preview area **/
3780 #widget-preview {
3781 width: 40%;
3782 padding-left: 10px;
3783 float: left;
3784 }
3785 /** /preview area **/
3786 /** in modal **/
3787 #widget-code-modal {
3788 width: 800px;
3789 height: auto;
3790 overflow: hidden;
3791 }
3792 #widget-code-modal .modal-body {
3793 height: auto;
3794 overflow: hidden;
3795 }
3796 #widget-code-modal .modal-body article {
3797 width: 100%;
3798 float: left;
3799 }
3800 #widget-code-modal .modal-body article #configuration-options ul.nav-tabs {
3801 float: left;
3802 width: 100%;
3803 background-color: #F3F3F3;
3804 border-bottom: 1px solid #e5e5e5;
3805 position: relative;
3806 top: 0;
3807 }
3808 #widget-code-modal .modal-body article #configuration-options ul.nav-tabs li {
3809 border-bottom: 1px solid #e5e5e5;
3810 -webkit-transition: all 0 ease-out;
3811 -moz-transition: all 0 ease-out;
3812 -ms-transition: all 0 ease-out;
3813 -o-transition: all 0 ease-out;
3814 }
3815 #widget-code-modal .modal-body article #configuration-options ul.nav-tabs li a {
3816 margin: 0;
3817 background-color: transparent;
3818 border: 0;
3819 color: #2673b0;
3820 border-bottom: 3px solid #f3f3f3;
3821 -webkit-transition: all 0 ease-out;
3822 -moz-transition: all 0 ease-out;
3823 -ms-transition: all 0 ease-out;
3824 -o-transition: all 0 ease-out;
3825 }
3826 #widget-code-modal .modal-body article #configuration-options ul.nav-tabs li.active {
3827 border-color: #2673b0;
3828 }
3829 #widget-code-modal .modal-body article #configuration-options ul.nav-tabs li.active a {
3830 border-color: #2673b0;
3831 }
3832 /** /in modal **/
3833 /** in iframe **/
3834 .body-external .supporter-box-container {
3835 border: 0;
3836 text-align: center;
3837 }
3838 .body-external .supporter-box-container #pling-widget {
3839 text-align: left;
3840 float: none;
3841 height: auto;
3842 overflow: hidden;
3843 }
3844 /** /in iframe **/
3845 /*------ /WIDGET --------------------*/
3846 /*==================================*/
3847 /* ADAPTIVE / RESPONSIVE */
3848 /*==================================*/
3849 /*---- ADAPTIVE/RESPONSIVE --------------------*/
3850 /** LARGE **/
3851 @media (min-width: 1200px) {
3852 body {
3853 font-size: medium;
3854 }
3855 .container-width-960 {
3856 width: 96%;
3857 padding: 0 2%;
3858 }
3859 header section.wrapper,
3860 footer section.wrapper,
3861 main section.wrapper {
3862 width: 95%;
3863 }
3864 }
3865 /** /LARGE **/
3866 /** MEDIUM **/
3867 @media (max-width: 1200px) and (min-width: 992px) {
3868 body {
3869 font-size: medium;
3870 }
3871 header section.wrapper,
3872 footer section.wrapper,
3873 main section.wrapper {
3874 width: 95%;
3875 margin-left: 2.5%;
3876 margin-right: 2.5%;
3877 }
3878 }
3879 /** /MEDIUM **/
3880 /** SMALL **/
3881 @media (max-width: 992px) and (min-width: 768px) {
3882 body {
3883 font-size: small;
3884 }
3885 header section.wrapper,
3886 footer section.wrapper,
3887 main section.wrapper {
3888 width: 95%;
3889 margin-left: 2.5%;
3890 margin-right: 2.5%;
3891 }
3892 header a.logo {
3893 margin-right: 20px;
3894 }
3895 }
3896 /** /SMALL **/
3897 /** XTRA SMALL **/
3898 @media (max-width: 767px) {
3899 body {
3900 font-size: small;
3901 }
3902 header section.wrapper,
3903 footer section.wrapper,
3904 main section.wrapper {
3905 width: 97%;
3906 margin-left: 1.5%;
3907 margin-right: 1.5%;
3908 }
3909 .field-missing-container,
3910 .mandatory {
3911 position: static;
3912 }
3913 .mandatory {
3914 text-align: left !important;
3915 }
3916 .field-container {
3917 margin-bottom: 0;
3918 height: auto;
3919 }
3920 .field-container .left,
3921 .field-container .right {
3922 float: none;
3923 }
3924 }
3925 @media (max-width: 600px) {
3926 header a.logo {
3927 margin-right: 5px;
3928 margin-left: 5px;
3929 }
3930 header ul.menu li.search-input #search {
3931 display: none;
3932 margin: 0;
3933 padding: 8px 8px 10px 8px;
3934 background: #ecf0f1;
3935 position: absolute;
3936 left: 0;
3937 -webkit-border-radius: 8px;
3938 -moz-border-radius: 8px;
3939 border-radius: 8px;
3940 -webkit-background-clip: padding-box;
3941 -moz-background-clip: padding;
3942 background-clip: padding-box;
3943 top: 50px;
3944 height: auto;
3945 }
3946 header ul.menu li.search-input #search .dropdown-header {
3947 display: block;
3948 width: 12px;
3949 height: 12px;
3950 margin: 0 auto;
3951 background-image: url(../img/bg_sheet.png);
3952 background-position: -402px 0;
3953 position: absolute;
3954 top: -12px;
3955 left: 12px;
3956 }
3957 header ul.menu li.search-input #search div.icon-search-input {
3958 top: 10px;
3959 right: 10px;
3960 }
3961 header ul.menu li.search-input form#search.show {
3962 display: block;
3963 }
3964 header ul.menu li.search-input:hover {
3965 background: #2a3b4a;
3966 }
3967 }
3968 /** /XTRA SMALL **/
3969 /** SUPER SMALL **/
3970 @media (max-width: 375px) {
3971 body {
3972 font-size: x-small;
3973 }
3974 }
3975 /** /SUPER SMALL **/
3976 /*---- /ADAPTIVE/RESPONSIVE --------------------*/
3977 /** PRODUCT PAYMENT MESSAGE **/
3978 #product-payment-message {
3979 padding: 15px;
3980 background-color: #f3f3f3;
3981 color: #2673b0;
3982 position: relative;
3983 max-width: 400px;
3984 text-align: left;
3985 margin: 0 auto;
3986 float: none;
3987 height: auto;
3988 overflow: hidden;
3989 }
3990 #product-payment-message button#btn-close {
3991 border: 0;
3992 padding: 0;
3993 background: transparent;
3994 position: absolute;
3995 top: 1px;
3996 right: 1px;
3997 }
3998 #product-payment-message figure {
3999 width: 100%;
4000 padding-bottom: 10px;
4001 height: auto;
4002 border-bottom: 1px solid #dbdbdb;
4003 }
4004 #product-payment-message figure img {
4005 width: 100%;
4006 height: auto;
4007 }
4008 #product-payment-message h1 {
4009 border-top: 1px solid #f5f5f5;
4010 padding: 10px 0;
4011 float: left;
4012 width: 100%;
4013 font-size: 24px;
4014 margin: 0;
4015 }
4016 #product-payment-message .info {
4017 width: 100%;
4018 padding: 10px 0;
4019 float: left;
4020 }
4021 #product-payment-message .info .category {
4022 float: left;
4023 }
4024 #product-payment-message .info .page-views {
4025 float: right;
4026 }
4027 #product-payment-message .payment-message {
4028 width: 100%;
4029 text-align: center;
4030 float: left;
4031 }
4032 #product-payment-message .payment-message span {
4033 width: 100%;
4034 float: left;
4035 color: white;
4036 padding: 5px;
4037 }
4038 #product-payment-message .payment-message span.text-success {
4039 background-color: #3c763d;
4040 }
4041 #product-payment-message .payment-message span.text-danger {
4042 background-color: #a94442;
4043 }
4044 #product-payment-message .social-share {
4045 width: 100%;
4046 float: left;
4047 padding: 10px 0 0 0;
4048 }
4049 #product-payment-message .social-share .social {
4050 margin-bottom: 10px;
4051 }
4052 #product-payment-message .social-share .social + .social {
4053 margin-left: 10px;
4054 }
4055 #product-payment-message .social-share .product-link {
4056 float: left;
4057 }
4058 #product-payment-message .close-modal {
4059 width: 100%;
4060 float: left;
4061 text-align: center;
4062 }
4063 #product-payment-message .close-modal .btn-close {
4064 background-color: #2673b0;
4065 }
4066 /** /PRODUCT PAYMENT MESSAGE **/