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 **/