/* Googl Nunito (similar to Avenir) */ @font-face { font-family: 'Nunito'; src: url('https://res.cloudinary.com/flicked/raw/upload/v1472622031/assets/flick_nunito?') format('eot'), url('https://res.cloudinary.com/flicked/raw/upload/v1472622031/assets/flick_nunito') format('woff'), url('https://res.cloudinary.com/flicked/raw/upload/v1472622031/assets/flick_nunito') format('truetype'); } .debug{position: fixed; top: 100px; background: red; height: 400px; overflow: scroll; width: 75%; z-index: 10000; display: none; opacity: 0.7;} /* fixes white space bottom issue when hyper scroll is enabled body{ position: fixed; height: 100% !important; width: 100%; overflow: hidden; background-color: white; font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif; font-size: 12px; color: #DDD; } */ body{ overflow: hidden; background-color: rgb(0, 0, 0); font-family: Avenir Light, 'Nunito', Arial, sans-serif; font-size: 12px; color: rgb(252, 250, 240); } body section{padding: 10px;} a{ color: #d96741 !important; text-decoration: none !important; } p{ font-size: 14px; } h1{ font-size: 20px; } h2{ font-size: 18px; } h3{ font-size: 16px } h4{ font-size: 14px; } li{ font-size: 14px; } .fb-like{display: inline-block; opacity: 0; margin-top: -5px;} .fa{color: rgb(246,210,130);} .fa-circle-o-notch{color: rgb(252, 250, 240); font-size: 47px;} .ui-loader-default{opacity: 0.9 !important; width: 75px !important; height: 75px !important; margin-left: -38px !important; -webkit-transform: translateZ(1);} .mqsmall{display: none; position: absolute;} .mqlarge{display: none; position: absolute;} .imageCache{display: none;} #gridPage { position: relative; overflow: hidden !important; -webkit-overflow-scrolling: touch !important;} #gridPage .header{ z-index: 10; position: fixed; top: 0; width: 100%; padding: 10px 0px 8px; background: linear-gradient(180deg, rgba(217, 103, 65, 1) -250%, rgb(0, 0, 0) 100% ); box-shadow: 0px 5px 15px rgb(0, 0, 0); text-align: center; overflow: hidden;} #gridPage .header span.navIcon{position: absolute; float: left; padding: 10px; left: 10px; top: 2px; color: rgb(252, 250, 240); font-size: 18px; } #gridPage .header span.navIcon span{ display: block; width: 21px; height: 2px; margin: 4px 0px; background-color: rgb(252, 250, 240); } #gridPage .header .back{display: none; position: absolute; float: left; padding: 5px; left: 15px; border-radius: 2px; color: rgb(252, 250, 240); font-size: 18px; } #gridPage .header .backTopic{ display: none; position: absolute; float: left; padding: 5px; top: 5px; left: 12px; border-radius: 2px; color: rgb(252, 250, 240); font-size: 18px; cursor: pointer;} #gridPage .header .backTopic img{ display: inline-block; vertical-align: top; width: 15px; margin: 0px 0px; } #gridPage .header .backTopic .text{ position: relative; display: none; vertical-align: top; margin: 2px } #gridPage .header .homeLogo{position: relative; top: 0px; height: 25px; } #gridPage .header .influenceHeader{ position: absolute; top: 2px; right:7px; padding: 10px; color: rgb(246,210,130); font-size: 20px; cursor: pointer} #gridPage .header .influenceHeader .notify{display: none; position: absolute; top: 21px; margin-left: -17px; padding: 1px 6.5px 0px; border-radius: 20px; color: white; font-size: 14px; background-color: red;} #gridPage .header span.plusPoints{z-index: 1000; position: absolute; display: none; float: right; top: 35px; right: 15px; color: rgb(246, 210, 130); font-size: 14px; font-weight: bold; -webkit-transform: translate3d(0,0,1px); transform: translate3d(0,0,1px); -webkit-transform: translateZ(1); -webkit-perspective: 1000; -webkit-backface-visibility: hidden;} /* translate3d fixed z-Index issue in IOS */ #gridPage .info{ z-index: 32; position: fixed; bottom: 0; left: 0; width: 21%; text-align: left; } #gridPage .info .infoIcon { z-index: 1; position: relative; display: inline-block; width: 40px; height: 40px; margin: 10px; border-radius: 50px; background-color: rgba(0, 0, 0, 0.5); box-shadow: inset -3px 5px 11px #555; border: 1px solid #d96741; } #gridPage .info .infoIcon .text{ z-index: 1; display: block; position: relative; top: 2px; text-align: center; font-size: 27px;} #gridPage .info .infoIcon .diameter{ position: absolute; left: 0; top: 47%; width: 100%; height: 1px; opacity: 0.5; background: linear-gradient(-90deg, #d96741, #1e070b 75% ); } #gridPage .info .genIntro{display: none;} #infoPop{ z-index: 31; display: none; position: fixed; top: 0; top: 100%; height: 100%; width: 100%; max-width: 740px; overflow: scroll; border: none; -webkit-transform: translateZ(1); } #infoPop .container{ height: 100%; width: 100%; overflow: scroll; text-align: left; background-color: rgba(0, 0, 0, 0.9);} #infoPop .container .head{ padding: 15px 15px 5px; border-bottom: 1px solid #d96741; } #infoPop .container .head .title{ display: block; font-size: 21px; text-align: center} #infoPop .container .head .brandIntro { display: block; font-size: 14px; } #infoPop .container .head .brandIntro p{font-size: 14px; } #infoPop .container .head .brandIntro .text{ color: gray;} #infoPop .container .head .brandIntro .you{ text-align: center;} #infoPop .container .items{ padding: 15px; } #infoPop .container .items .item{margin-bottom: 10px; border-bottom: 1px solid #444; } #infoPop .container .items .item .title{ display: block; font-size: 16px; } #infoPop .container .items .item .title .here{ display: none; margin-left: 10px; color: #d96741; } #infoPop .container .items .item .subtitle{ display: block; margin-top: 10px; font-size: 14px; color: gray; } #infoPop .container .items .item .body{ display: block; margin-top: 10px; } #infoPop .container .items .item .body p{ font-size: 14px; } #infoPop .container .items .item ol li{margin-bottom: 10px; font-size: 12px; } #gridPage .actionContainer{z-index: 7; display: block; position: fixed ; width: 100%; text-align: left; padding: 20px 0px 20px 20px; background: black; left: 0px; font-size: 18px;} #gridPage .actionContainer .block{ position: relative; display: inline-block; cursor: pointer;} #gridPage .actionContainer .searchContainer{ width: 75%; } #gridPage .actionContainer .searchContainer input{ display: inline-block; width: 100%; padding: 10px 0px; font-size: 14px; font-family: Avenir Light, 'Nunito', Arial, sans-serif; letter-spacing: 2px; background-color: transparent; outline: none; color: rgb(252, 250, 240); border: none; border-bottom: 1px solid gray;} #gridPage .actionContainer .addBtn{ width: 25%; text-align: center; } #gridPage .actionContainer .addBtn .text{ position: relative; display: inline-block; font-size: 14px; color: #d96741} #importPop{ z-index: 31; display: none; position: fixed; top: 0; top: 100%; height: 100%; width: 100%; max-width: 740px; overflow: scroll; border: none; -webkit-transform: translateZ(1); } #importPop .container{ display: table; height: 100%; width: 100%; overflow: scroll; text-align: center; background-color: rgba(0, 0, 0, 1);} #importPop .container .fileContainer{ display: table-cell; vertical-align: middle; text-align: center; } #importPop .container .fileContainer input{ padding-bottom: 25px; border-bottom: 1px solid gray; } #importPop .container .fileContainer .filepreview{ margin: 25px;} #importPop .container .fileContainer .filepreview .file{ margin-bottom: 25px;} #importPop .container .fileContainer .filepreview .file .filename{ padding-right: 10px; } #importPop .container .fileContainer .filepreview .file .xdatas{ background: #d96741; color: black; font-size: 12px; border: none; padding: 5px; user-select: none;} #importPop .container .importContainer{ display: table-cell; vertical-align: middle; text-align: left; } #importPop .container .close{ display: none; position: absolute; right: 0px; width: 30px; padding: 20px; } #gridPage #newtopProtect{ display: none; z-index: 2; position: fixed; height: 100%; width: 100%; top: -2px; background-color: rgba(0, 0, 0, 0.7); -webkit-transform: translate3d(0,0,1px); transform: translate3d(0,0,1px); } #gridPage #newtopPop { z-index: 30; display: none; position: fixed; top: 0; top: -100%; height: 100%; width: 100%; max-width: 740px; overflow: scroll; border: none; -webkit-transform: translateZ(1); } #gridPage #newtopPop .container{ z-index: 3 ; display: table; height: 100%; width: 100%; overflow: scroll; position: absolute; background: black;} #gridPage #newtopPop .uparrow{ z-index: 4; position: absolute; top: 0px; left: 0px; padding: 15px; width: 25px; } #gridPage #newtopPop .container .newtopic{ display: table-cell; position: relative; vertical-align: middle;} #gridPage #newtopPop .container .newtopic .title{ padding: 10px; font-size: 16px; text-align: center;} #gridPage #newtopPop .container .newtopic > .block{ padding: 40px 20px 70px; } #gridPage #newtopPop .container .newtopic .inputs .gqContainer { position: relative; } #gridPage #newtopPop .container .newtopic .inputs .gqContainer input{ display: inline-block; width: 100%; padding: 10px 0px; letter-spacing: 2px; background-color: transparent; outline: none; color: rgb(252, 250, 240); border: none; border-bottom: 1px solid gray;} #gridPage #newtopPop .container .newtopic .inputs .gqContainer textarea{ display: inline-block; width: 100%; vertical-align: top; font-size: 14px; font-family: Avenir Light, 'Nunito', Arial, sans-serif; letter-spacing: 2px; background-color: transparent; outline: none; color: rgb(252, 250, 240); border: none; border-bottom: 1px solid gray;} #gridPage #newtopPop .container .newtopic .inputs .gqContainer .feedback{ position: relative; font-size: 12px; float: right; opacity: 0; } #gridPage #newtopPop .container .newtopic .inputs .sqContainer{ position: relative; margin-top: 20px; opacity: 0.4;} #gridPage #newtopPop .container .newtopic .inputs .sqContainer .qlabel{ display: inline-block; padding: 5px 10px; border-radius: 2px; background-color: #1e485c;} #gridPage #newtopPop .container .newtopic .inputs .sqContainer input{ display: inline-block; width: 87%; padding: 10px 0px; margin-left: 15px; letter-spacing: 2px; background-color: transparent; outline: none; color: rgb(252, 250, 240); border: none; border-bottom: 1px solid gray;} #gridPage #newtopPop .container .newtopic .inputs .sqContainer textarea{ display: inline-block; width: 86%; font-size: 14px; font-family: Avenir Light, 'Nunito', Arial, sans-serif; margin-left: 15px; vertical-align: top; letter-spacing: 2px; background-color: transparent; outline: none; color: rgb(252, 250, 240); border: none; border-bottom: 1px solid gray;} #gridPage #newtopPop .container .newtopic .inputs .sqContainer .feedback{ position: relative; font-size: 12px; float: right; right: 2px; opacity: 0; } #gridPage #newtopPop .container .newtopic .inputs .save{ margin-top: 40px; text-align: center; opacity: 0.4; } #gridPage #newtopPop .container .newtopic .inputs .save .btn{ padding: 10px 0px; font-size: 14px; color: #d96741;} #gridPage #newtopPop .container .newtopic .listContainer{display: none;} #gridPage #newtopPop .container .newtopic .listContainer .listheader{ padding: 10px 0px; margin-bottom: 10px; color: gray; } #gridPage #newtopPop .container .newtopic .listContainer .list{ list-style: none;} #gridPage #newtopPop .container .newtopic .listContainer .list .ref{ padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #222;} #gridPage #newtopPop .container .newtopic .listContainer .list .ref > .block{ display: inline-block; vertical-align: top;} #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details { width: 100%; } #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details .name { display: block; font-size: 14px;} #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details > .other{ display: block; padding-top: 10px; font-size: 12px;} #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details > .other .profileImg{ display: inline-block; vertical-align: top; width: 20px; height: 20px; margin-right: 5px;} #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details > .other .username{ display: inline-block; margin-top: 3px; font-size: 12px; color: gray;} #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details > .other .infStrength{ position: absolute; right: 15px; float: right; display: inline-block; width: 25%; padding-left: 3px; margin-top: 4px; vertical-align: top; background: linear-gradient(90deg, rgb(246,210,130) 10%, rgba(13, 67, 47, 0) 10% ); color: rgb(252, 250, 240); text-shadow: 1px 1px 1px #000,1px 1px 1px #000; text-align: center; box-shadow: inset 0px 17px 0px rgba(246, 210, 130, 0.15);} #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details > .other .infStrength.exist{ box-shadow: inset 0px 17px 0px rgba(246, 210, 130, 0.15);} #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details > .other .infStrength .profileImg{ position: absolute; left: -21px; top: -2px; width: 17px; float: left;} #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details > .other .infStrength .infArrow { position: relative; width: 12px; height: 7px; right: 6px; top: 3px; opacity: 0.5; float: right;} #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details .influence{ display: none; z-index: 2; position: absolute; width: 100%; height: 100%; top: 100%; text-align: center; border-top: 1px solid rgb(246,210,130); background: linear-gradient(180deg, rgb(25, 21, 13) 15%, rgb(0, 0, 0) 150% ); color: rgb(246,210,130);} #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details .influence .you { display: block; width: 100%; font-size: 12px; } #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details .influence .you .container { text-align: center;} #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details .influence .you .toptext{ padding: 15px 15px 10px; font-size: 14px; } #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details .influence .you .toptext .infArrow{ position: absolute; right: 5px; top: 10px; width: 15px; padding: 5px; transform: rotate(180deg); float: right; } #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details .influence .you .given{ display: inline-block; width: 45%; vertical-align: top; margin-bottom: 15px; } #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details .influence .you .given .text{ padding: 7px; } #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details .influence .you .given .inc{ position: relative; padding: 7px; font-size: 27px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details .influence .you .given .inc .btn{ display: inline-block; position: relative; top: -9px;} #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details .influence .you .given .inc .save { display: none; position: relative; float: left; opacity: 0.5; padding: 0px 10px; border-right: 1px solid black; font-size: 16px; } #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details .influence .you .given .inc .plus { float: right; padding: 0px 6px; border-left: 1px solid black;} #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details .influence .you .given .inc .minus { float: left; padding: 0px 10px; border-right: 1px solid black;} #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details .influence .you .given .inc .give{ position: relative; font-size: 16px; } #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details .influence .you .given .inc .givedata{ display: none; } #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details .influence .you .gains{ display: inline-block; width: 45%; vertical-align: top; margin: 0px 0px 15px 10px;} #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details .influence .you .gains .text{ padding: 7px; } #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details .influence .you .gains .ret { display: block; padding: 7px; background-color: rgba(65, 56, 37, 0.5); } #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details .influence .you .gains .ret .gain{ position: relative; font-size: 16px; } #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details .influence .you .history{ display: none;} #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details .influence .others { display: table; width: 100%; height: 22%; border-top: 1px solid rgba(246, 210, 130, 0.35); } #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details .influence .others .container{ display: table-cell; vertical-align: middle; } #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details .influence .others .toptext{ width: 45%; padding-bottom: 15px; text-align: center;} #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details .influence .others .label{display: inline-block; margin: 15px 0px 15px 15px; vertical-align: top; font-size: 12px; } #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details .influence .others .influencers{ display: inline-block; padding: 12px 0px 0px 15px; text-align: left; vertical-align: top; } #gridPage #newtopPop .container .newtopic .listContainer .list .ref .details .influence .others .influencers .profileImg{ width: 20px; height: 20px; margin-right: 10px;} #gridPage #msgProtect{ display: none; z-index: 49; position: fixed; height: 100%; width: 100%; top: -1px; -webkit-transform: translate3d(0,0,1px); transform: translate3d(0,0,1px); } #gridPage #msgPop{z-index: 71; display: none; height: 100%; width: 100%; position: fixed; top: 0px; left: 100%; border: none; text-align: center; background-color: rgba(0,0,0, 1); border-left: 1px solid #d96741; -webkit-transform: translateZ(1);} #gridPage #msgPop .container { display: table; position: relative; height: 100%; width: 100%; text-align: center; font-size: 12px; } #gridPage #msgPop .container .text{ display: none; vertical-align: middle; text-align: center; font-size: 20px; } #gridPage .ui-content{ position: fixed; width: 100%; max-width: 745px; padding: 0px 0px 25px 0px; margin: 44px auto 0px; overflow-x: hidden; overflow-y: scroll; -webkit-transform: translateZ(1); } #gridPage .ui-content #scrollProtect{ z-index: 8; display: block; height: 100%; width: 100%; position: fixed; top: -2px; margin-top: 45px; border: none; } #gridPage .ui-content .elasticLogo{ z-index: -1; position: fixed; display: none; width: 100%; bottom: 0px; text-align: center; } #gridPage .ui-content .elasticLogo img{width: 75px;} #gridPage .ui-content .grid{z-index: 2; margin: 70px auto 0px; overflow: hidden; text-align: left; min-height: 250px} #gridPage .ui-content .grid .alltopicsBtn{ width: 100%; margin: 1px auto 20px; padding: 14px 0px; text-align: center; background: rgba(217, 103, 65, 0.5); font-size: 18px; } #gridPage .ui-content .grid .topic{display: inline-block; position: relative; vertical-align: top; cursor: pointer; -webkit-transform: translateZ(1); -webkit-perspective: 1000; -webkit-backface-visibility: hidden;} #gridPage .ui-content .grid .topic{width: 410px; height: 125px;} #gridPage .ui-content .grid .topic img{position: relative;} #gridPage .ui-content .grid .topic img{width: 410px; height: 125px; } /* #gridPage .ui-content .grid .topic:nth-child(3n+1){margin: 2px 2px 0px 0px; width: 333px; height: 250px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+2){margin: 2px 2px 0px 0px; width: 333px; height: 250px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+3){margin: 2px 2px 0px 0px; width: 333px; height: 250px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+1) img{width: 333px; height: 250px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+2) img{width: 333px; height: 250px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+3) img{width: 333px; height: 250px; } */ #gridPage .ui-content .grid .topic .info{position: absolute; display: table; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0,0.71); text-align: center; font-size: 24px; word-spacing: 2px} #gridPage .ui-content .grid .topic .info .aligncenter{position: relative; display: table-cell; vertical-align: middle; border-bottom: 1px solid #222;} #gridPage .ui-content .grid .topic .info .aligncenter .name{width: 95%; white-space: normal; text-shadow: 1px 1px 1px #000;} #gridPage .ui-content .grid .topic .info .aligncenter .fa{float: none; margin: 5px 21px; font-size: 18px; font-weight: bold;} #gridPage .ui-content .grid .topic .info .status{position: relative; margin-top: 10px; font-size: 14px; text-shadow: 1px 1px 1px black;} #gridPage .ui-content .grid .topic .info .status .block{ display: inline; } #gridPage .ui-content .grid .topic .info .status span { vertical-align: top; } #gridPage .ui-content .grid .topic .info .status .user .profileImg{ top: -4px; margin-right: 5px; width: 25px; height: 25px; } #gridPage .ui-content .grid .topic .info .status .user .name{ margin-right: 10px; width: 20px; height: 20px; } #gridPage .ui-content .grid .topic .info .status .count .qlabel{ padding: 5px 10px; margin-right: 5px; border-radius: 2px; background-color: #1E485C; } #gridPage .ui-content .grid .topic .info .status .count .text{ margin-right: 2px; } #gridPage .ui-content .grid .topic .info .status .continue{color: #d96741; margin-left: 10px; } #gridPage .ui-content .grid .topic .info .status .lastnum{display: none;} #gridPage .mobileBG{display: none; z-index: -1; position: fixed; top: 0; left: 0; height: 125%; width: 100%; overflow: visible;} #gridPage .mobileBG .img{ z-index: 0; position: fixed; top: 0; left: 0; height: 125%; width: 100%; background-attachment: fixed; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);} #gridPage .mobileBG .bg{ z-index: 1; position: fixed; top: 0; left: 0; height: 100%; width: 100%; } #gridPage .ui-content .mobileBG{ z-index: 5} #gridPage #topicPopProtect{ display: none; z-index: 8; display: block; position: fixed; height: 100%; width: 100%; opacity: 0; top: -2px; margin-top: 45px; background-color: rgba(0, 0, 0, 0.7); border: none;} #gridPage #topicVoteHow{z-index: 50; display: none; height: 100%; width: 100%; position: fixed; top: 0px; border: none; text-align: center; background-color: rgba(15, 15, 15, .5); -webkit-transform: translateZ(1);} #gridPage #topicVoteHow .votehow{display: table; position: relative; height: 100%; width: 100%; top: -50px; vertical-align: middle; text-align: center; font-size: 40px; text-align: center; text-shadow: 1px 1px 1px black; } #gridPage #topicVoteHow .votehow .swipe{ display: table-cell; position: relative; width: 100%; vertical-align: middle; opacity: 0;} #gridPage #topicVoteHow .votehow .likeText{display: block; margin-bottom: 22px; font-size: 21px;} #gridPage #topicVoteHow .votehow .heartContainer {position: relative; display: block; opacity: 0; width: 52px; height: 52px; margin: auto; border-radius: 50px; background-color: black;} #gridPage #topicVoteHow .votehow .heartContainer .fa{z-index: 0; position: absolute; top: -13px; left: -17px; color: rgb(217, 103, 65); font-size: 87px; text-shadow: 1px 1px 10px rgb(252, 250, 240),-1px -1px 10px rgb(252, 250, 240),1px -1px 10px rgb(252, 250, 240),-1px 1px 10px rgb(252, 250, 240);} #gridPage #topicVoteHow .votehow .heartContainer .fb-like{position: relative; top: -15px; left: 0px; opacity: 1;} #gridPage #topicVoteHow .votehow .nothanks{display: block; margin: 50px auto; font-size: 15px; border: 2px solid white; width: 100px; border-radius: 40px; cursor: pointer} #gridPage #topicVoteHow .block{height: 10px; width: 100%;} #gridPage #topicPop{z-index: 9; position: fixed; top: 0; left: 100%; height: 100%; width: 100%; max-width: 740px; margin-top: 44px; border: none; -webkit-transform: translateZ(1); background-color: #000;} #gridPage #topicPop .container { z-index:1; position: relative; height: 100%; } #gridPage #topicPop .container .prog { display: none; position: absolute; width: 100%; margin-top: -6px; z-index: 1; color: rgb(246,210,130); font-size: 12px;} #gridPage #topicPop .container .prog .bar{ position: relative; width: 5%; height: 1px; overflow: visible; border-top-right-radius: 40px; border-bottom-right-radius: 40px; background-color: rgb(246,210,130);} #gridPage #topicPop .container .prog .bar .glow{ position: absolute; right: 0; top: -0.5; border-radius: 20px; width: 2px; height: 2px; background-color: rgba(255, 240, 206,0.85); box-shadow: 0px 0px 5px rgb(246,210,130),0px 0px 5px rgb(246,210,130),0px 0px 10px rgb(246,210,130),0px 0px 10px rgb(246,210,130),0px 0px 10px rgb(246,210,130),0px 0px 10px rgb(246,210,130),0px 0px 10px rgb(246,210,130),0px 0px 10px rgb(246,210,130);} #gridPage #topicPop .container .prog .bar .motivate{ position: absolute; right: 0; right: -85px; top: 0px; opacity: 0; } #gridPage #topicPop .container .prog .bar .card{position: relative; left: 0px; top: 4px; text-align: right; width: 100%;} #gridPage #topicPop .container .prog .status{ position: absolute; min-width: 15%; margin: -3px 10px; text-align: left;} #gridPage #topicPop .container .prog .status .flicks{display: inline-block; margin-top: 2px;} #gridPage #topicPop .container .prog .status .text{display: inline; margin: 2px 5px 0px;} #gridPage #topicPop .container .prog .status .count{display: inline-block; margin-top: 2px;} #gridPage #topicPop .container .prog .status .hide{display: none; } #gridPage #topicPop .container .topicname{ display: table; position: relative; width: 100%; height: auto; margin-bottom: 5px; text-align: left; font-size: 21px; font-weight: normal;} #gridPage #topicPop .container .topicname span{ display: block; text-align: left; position: relative; width: 94%; } #gridPage #topicPop .container .topicname .name{margin: 5px auto 0px; padding: 20px 0px; vertical-align: middle; text-align: center; border-bottom: 1px solid gray; } #gridPage #topicPop .container .topicname .xmark{position: absolute; right: -5px; top: 0px; padding: 12px 0px; width: 40px; height: 40px; text-align: center; color: rgb(252, 250, 240); cursor: pointer;} #gridPage #topicPop .container .topicname .xmark img{width: 14px;} #gridPage #topicPop .container .statContainer {z-index: 35; display: none; position: fixed; height: 120%; top: 0; margin: 0px; width: 100%; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } #gridPage #topicPop .container .statContainer .bar{ display: table-cell; position: relative; top: -171px; padding: 10px 0px; vertical-align: middle; text-align: center; font-size: 18px; text-shadow: 1px 1px 1px black;} #gridPage #topicPop .container .statContainer .bar .thumb{display: none; position: absolute; margin: -25% 45%; border-radius: 51px; opacity: 1; height: 50px; width: auto;} #gridPage #topicPop .container .statContainer .bar .thumb.thumbup{ box-shadow: 0px 0px 0px 10px rgba(74, 207, 162, 0.34)} #gridPage #topicPop .container .statContainer .bar .thumb.thumbdown{ box-shadow: 0px 0px 0px 10px rgba(196, 79, 103, 0.34)} #gridPage #topicPop .container .statContainer .bar .nay{ display: inline-block; margin-right: 5px; background: rgba(206, 81, 105, 0.70); } #gridPage #topicPop .container .statContainer .bar .yay{ display: inline-block; background: rgba(81, 206, 163, 0.70); } #gridPage #topicPop .container .statContainer .bar .value {display: block; padding: 10px;} #gridPage #topicPop .container .statContainer .bar .you{ display: none; position: absolute; margin: -45px -35px; font-size: 21px; } #gridPage #topicPop .container .statContainer .bar .you .text {position: relative; top: -2px;} #gridPage #topicPop .container .statContainer .bar .you .arrow{ display: none; position: absolute; top: 20px; width: 25px; vertical-align: bottom;} #gridPage #topicPop .container .statContainer .bar .you .yayarrow{ right: -5px;} #gridPage #topicPop .container .statContainer .bar .you .nayarrow{ left: -5px;} #gridPage #topicPop .container .cardstack {position: relative; height: 60%;} #gridPage #topicPop .container .cardstack .card{ display: inline-block; position: absolute; top: 0px; opacity: 0; border-radius: 5px; overflow: hidden; background-color: #000; } #gridPage #topicPop .container .cardstack .card .contentScroll{width: 100%; overflow-x:scroll; text-align: center; background-color: #000} #gridPage #topicPop .container .cardstack .card .contentinfo{ z-index: 100; position: absolute; display: none; right: 0px; padding: 10px 0px; text-align: right; width: 100%; background: rgba(0, 0, 0, 0.7);} #gridPage #topicPop .container .cardstack .card .contentinfo .helptext{ display: inline-block; vertical-align: top; position: relative; top: 7px; font-size: 18px;} #gridPage #topicPop .container .cardstack .card .contentinfo .rightarrow{ height: 40px;} #gridPage #topicPop .container .cardstack .card .votehandle{ z-index: 8; position: absolute; bottom: 20%; left: 0; text-align: center; padding: 10px 0px 14px; cursor: pointer } #gridPage #topicPop .container .cardstack .card .votehandle .button{ display: inline-block; position: relative; width: 50px; height: 50px; vertical-align: top; text-align: center; margin: 5px 50px 10px; font-size: 18px; border-radius: 50px; padding: 2px; border: 1px solid #d96741; box-shadow: 0px 0px 0px 10px rgba(217, 103, 65, 0.36); background-color: rgba(38, 41, 46, 0.8);} #gridPage #topicPop .container .cardstack .card .votehandle .button .text{position: relative; top: 12px; } #gridPage #topicPop .container .cardstack .card img{ z-index: 1; border-radius: 2px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; border-bottom: 1px solid #222; } #gridPage #topicPop .container .cardstack .card .labelToggle{z-index: 2; display: none; position: absolute; height: 100%; width: 100%; top: 0;} #gridPage #topicPop .container .cardstack .card .labelToggle .agree{ top: 7%; left: 3%; transform: rotate(-23deg); text-shadow: 1px 1px 1px #333; } #gridPage #topicPop .container .cardstack .card .labelToggle .disagree{ top: 7%; right: 3%; transform: rotate(23deg); text-shadow: 1px 1px 1px #333; } #gridPage #topicPop .container .cardstack .card .labelToggle .text{display: block; position: relative; font-size: 47px; font-weight: bold; } #gridPage #topicPop .container .cardstack .card .labelToggle .text .count{display: block; font-size: 56px;} #gridPage #topicPop .container .cardstack .card .labelToggle .agree .count{ position: absolute; left: 0px; color: rgba(81,206,163,1);} #gridPage #topicPop .container .cardstack .card .labelToggle .disagree .count{ position: absolute; right: 0px; color: rgba(206, 81, 105, 1);} #gridPage #topicPop .container .cardstack .card .share{display: none;} #gridPage #topicPop .container .cardstack .card .label{z-index: 3; position: absolute; display: block; left: 0; bottom: 0px; height: 100%; width: 100%; overflow-x: hidden; overflow-y: hidden; text-shadow: 1px 1px 1px #000; border-radius: 1px; box-shadow: inset 0px -100px 135px -50px #000000; font-size: 18px; text-align: center; cursor: pointer; } #gridPage #topicPop .container .cardstack .card .label .chevron{ position: relative; top: 0px; width: 24px; height: 10px; padding: 1px 5px; background-color: rgb(214,102,70); } #gridPage #topicPop .container .cardstack .card .label .table{display: table; position: relative; height: 100%; width: 100%; text-align: left; } #gridPage #topicPop .container .cardstack .card .label .table .checkIt{ z-index: 5; position: absolute; width: 100%; right: 0px; top: -125px; padding-right: 10px; box-shadow: inset 0px -115px 180px -100px black; font-size: 39px} #gridPage #topicPop .container .cardstack .card .label .table > .cell{display: table-cell; padding: 0px 10px; vertical-align: middle; text-align: center;} #gridPage #topicPop .container .cardstack .card .label .table > .cell .qlabel{ display: inline-block; padding: 5px 10px; border-radius: 2px; background-color: #1e485c; margin-right: 10px; } #gridPage #topicPop .container .cardstack .card .label .table > .cell .subject{ display:block; font-weight: bold; font-style: italic; } #gridPage #topicPop .container .cardstack .card .label .table > .cell .morePoints {position: absolute; bottom: 10px; right: 10px; font-size: 14px; color: rgb(246,210,130); font-weight: bold;} #gridPage #topicPop .container .cardstack .card .label .table > .cell .btn{ display: block; opacity: 0; width: 100%; padding: 10px; } #gridPage #topicPop .container .cardstack .card .label .table > .cell .btn .sphere{ display: block; margin: auto; border-radius: 30px; background-color: black; vertical-align: middle; } #gridPage #topicPop .container .cardstack .card .label .table > .cell .btn .sphere .fa{ font-size: 18px; color: #d96741; text-shadow: 0px 0px 0px;} #gridPage #topicPop .container .cardstack .card .label .table > .cell .scroll { position: relative;; height: 171px; width: 100%; overflow: hidden; } #gridPage #topicPop .container .cardstack .card .label .table > .cell .scroll .refbox { position: relative;; height: auto; width: 100%; overflow: visible; font-size: 12px; } #gridPage #topicPop .container .cardstack .card .label .table > .cell .scroll .refbox .ref{ display: none; margin 10px 0px; } #gridPage #topicPop .container .cardstack .card .label .table > .cell .scroll .refbox .ref .line{ display: block; height: 10px; width: 1px; margin: 10px auto; background-color: gray} #gridPage #topicPop .container .cardstack .card .label .table > .cell .scroll .refbox .ref .content{ } #gridPage #topicPop .container .cardstack .card .label .table > .cell .scroll .refbox .ref .content img{ display: inline-block; width: 30px; height: 30px; margin: -1px 5px 0px; vertical-align: top; } #gridPage #topicPop .container .cardstack .card .label .table > .cell .scroll .refbox .ref .content .thread{ display: inline-block; text-align: left;} #gridPage #topicPop .container .cardstack .card .label .table > .cell .scroll .refbox .ref .content .thread .block{ display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #gridPage #topicPop .container .cardstack .card .label .table > .cell .scroll .refbox .ref .content .thread .details{ color: gray; font-style: italic; } #gridPage #topicPop .container .cardstack .card .label .table > .cell .scroll .refbox .ref .content .thread .details .separator{ margin: 0px 5px; } #gridPage #topicPop .container .cardstack .card .label .table > .cell .scroll .refbox .ref .url{ display: none; } #gridPage #topicPop .container .cardstack .card .label .table > .cell .scroll .refbox .feedback{ position: absolute; display: none; width: 100%; } #gridPage #topicPop .container .cardstack .card .label .table > .cell .scroll .refbox .feedback .title{ color: #d96741 } #gridPage #topicPop .container .cardstack .card .label .more {display: block; position: absolute; padding: 0px 10px 10px; } #gridPage #topicPop .container .cardstack .card .label .more .description{display: block; border-top: 1px solid rgb(240,240,240); text-align: left; color: white; font-size: 12px; } #gridPage #topicPop .container .cardstack .card .label .more .description .title{ display: block; padding: 10px 0px; border-bottom: 1px solid #EEE;} #gridPage #topicPop .container .cardstack .card .label .more .description .body{ padding: 10px 0px; display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} #gridPage #topicPop .container .cardstack .card .label .more .description .fade{ z-index: 1; position: absolute; width: 110%; height: 35px; top: 7px; left: -10px; border-radius: 5px; box-shadow: inset 0px -35px 50px -20px rgba(0,0,0, 0.80); } #gridPage #topicPop .container .cardstack .card .label .more .share{display: block; padding: 10px 5px; text-align: left; font-size: 12px; } #gridPage #topicPop .container .cardstack .card .label .more .share .FB{ display: none; width: 99%; height: 25px; padding: 5px 0px; background-color: #4e69a2; border-radius: 2px; text-align: center; color: white; cursor: pointer;} #gridPage #topicPop .container .cardstack .card .label .more .share .FB .ftext{ margin-right: 10px; padding-right: 10px; border-right: 1px solid rgb(64, 85, 131); font-size: 20px; font-weight: bold; } #gridPage #topicPop .container .cardstack .card .label .more .share .FB .sharetext{ position: relative; top: -2px; font-size: 16px; } #gridPage #topicPop .container .cardstack .card .label .more .share .FB .points{ position: relative; color: rgb(246,210,130); font-weight: bold; top: -2px; margin-left: 10px;} #gridPage #topicPop .container .cardstack .card .label .more .links{display: block; padding: 5px; text-align: left; font-size: 12px; } #gridPage #topicPop .container .cardstack .card .label .more .links .title{ display: block; padding: 10px 0px; border-bottom: 1px solid #EEE;} #gridPage #topicPop .container .cardstack .card .label .more .links .body{ display: block; padding: 10px 0px; } #gridPage #topicPop .container .cardstack .card .label .more .button{ display: inline-block; margin: 15px 10px; padding: 7px 10px 10px; color: white; border-radius: 2px; cursor: pointer;} #gridPage #topicPop .container .cardstack .card .label .more .close{ background-color: #333; } #gridPage #topicPop .container .cardstack .card .label .more .continue{ background-color: rgb(217, 103, 65); } #gridPage #topicPop .container .cardstack .card .xcorner { z-index: 100; position: absolute; display: none; top: -2px; right: -3px; height: 107px; float: right; -webkit-transform: translate3d(0,0,1px); transform: translate3d(0,0,1px);} /* translate3d fixed z-Index issue in IOS */ #gridPage #topicPop .container .cardstack .card .checkcorner { z-index: 100; position: absolute; display: none; top: -2px; left: -3px; height: 107px; float: left; -webkit-transform: translate3d(0,0,1px); transform: translate3d(0,0,1px);} /* translate3d fixed z-Index issue in IOS */ #gridPage #topicPop .container .topicSummary{ z-index: 1; position: relative; display: block; height: auto; width: 100%; } #gridPage #topicPop .container .topicSummary .table{ display: table; position: relative; height: 90%; width: 100%; margin: auto; text-align: center;} #gridPage #topicPop .container .topicSummary .titleRow{ display: table-row; height: 10%; text-align: center;} #gridPage #topicPop .container .topicSummary .titleRow .congratCell{ display: table-cell; vertical-align: middle; padding: 10px 15px 0px; letter-spacing: 0.5px; } #gridPage #topicPop .container .topicSummary .titleRow .congratCell .subtitle { margin: 25px 0px 20px; font-size: 18px; text-align: center;} #gridPage #topicPop .container .topicSummary .resultsRow { display: block; position: relative; width: 100%; top: 0; text-align: center; border-top: 1px solid #d96741;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell { display: table-cell; vertical-align: top; text-align: center; padding-bottom: 0px} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .filter{ position: relative; width: 100%; padding: 20px 0px; vertical-align: top; text-align: left; border-bottom: 1px solid #333; background-color: rgba(0, 0, 0, 0.70); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .filter .type{ display: inline-block; vertical-align: top; margin-left: 25px; padding: 4px 5px; background-color: #070707;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .filter .type.group{ color: gray;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .filter .type.share{ float: right; margin-right: 20px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .filter .type.share .fblogo{display: inline-block; vertical-align: top; width: 15px; height: 15px; margin-right: 5px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .filter .type.share .text{ display: inline-block; vertical-align: top; color: rgb(252, 250, 240); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll{ position: relative; width: 100%; background-color: rgba(0, 0, 0, 0.5); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend{ display: block; position: relative; width: 100%; min-height: 37px; vertical-align: top; padding: 20px 0px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend .label{ display: inline-block; position: relative; width: 100%; vertical-align: top; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend .label .type{ display: inline-block; vertical-align: top; margin: 0px 15px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend .label .type .colorbox{ display: inline-block; width: 12px; height: 12px; margin: 2px 5px 0px 0px; vertical-align: top; background-color: #d96741;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend .label .type .text{ display: inline-block; font-size: 12px; color: gray; vertical-align: top; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend .label.gen{margin-top: 10px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend .label.gen .type{ margin: 0px 25px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend .label.gen .type.yay .colorbox{ background-color: rgba(81,206,163,1) } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend .label.gen .type.nay .colorbox{ background-color: rgba(206, 81, 105, 1)} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend .label.gender{display: none; margin-top: 10px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend .label.gender .type.yay.male .colorbox{ background-color: rgba(33, 131, 97, 1); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend .label.gender .type.yay.female .colorbox{ background-color: rgba(81, 206, 163, 1); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend .label.gender .type.nay.male .colorbox{ background-color: rgba(160, 47, 68, 1); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend .label.gender .type.nay.female .colorbox{ background-color: rgba(206, 81, 105, 1); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend .label.age{display: none; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend .label.age .type{margin: 0px 2px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend .label.age .type .colorbox{display: block; margin: 0px auto 2px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend .label.age .type .text{margin: 0px 10px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend .label.age .type.yay.a21 .colorbox{ background-color: rgba(183, 223, 209, 1); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend .label.age .type.yay.a2135 .colorbox{ background-color: rgba(81, 206, 163, 1); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend .label.age .type.yay.a35 .colorbox{ background-color: rgba(33, 131, 97, 1)} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend .label.age .type.nay.a21 .colorbox{ background-color: rgba(160, 47, 68, 1);} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend .label.age .type.nay.a2135 .colorbox{ background-color: rgba(206, 81, 105, 1); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend .label.age .type.nay.a35 .colorbox{ background-color: rgba(215, 169, 178, 1); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend .confirm{display: none; padding: 10px 0px; margin-top: 0px; background: linear-gradient(90deg, rgba(217, 103, 65, 1) -100%, rgb(0, 0, 0) 80% );} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend .confirm .text{ display: inline-block; vertical-align: top; margin-right: 10px; color: gray; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .legend .confirm .type{ display: inline-block; vertical-align: top; margin: 0px 0px 0px 25px; color: rgb(252, 250, 240); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .axis { width: 100%; height: 20px; padding-bottom: 10px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .axis .line{ position: relative; display: block; width: 95%; height: 1px; margin: auto; background: linear-gradient(90deg, rgba(206, 81, 105, 1) 35%, rgba(81,206,163,1) 65% ); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .axis .line .mark{ position: absolute; width: 1px; height: 5px; background-color: #333; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .axis .line .mark .label{ position: relative; top: 5px; left: -5px; color: gray; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .axis .line .mark.nay{ background-color: rgba(206, 81, 105, 1)} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .axis .line .mark.yay{ background-color: rgba(81,206,163,1)} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .axis .line .mark.n100{ left: 0%; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .axis .line .mark.n75{ left: 12.5%; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .axis .line .mark.n50{ left: 25%;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .axis .line .mark.n25{ left: 37.5%;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .axis .line .mark.zero{ top: 1px; left: 50%;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .axis .line .mark.zero .label { left: -3px; background: #050505; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .axis .line .mark.y25{ left: 62.5% } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .axis .line .mark.y50{ left: 75% } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .axis .line .mark.y75{ left: 87.5% } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .axis .line .mark.y100{left: 100%} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .axis .line .mark.y100 .label { left: -14px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .maindeb{ width: 100%; height: 20px; padding-bottom: 10px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .maindeb .deb{ width: 25px; height: 25px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemHeader { display: block; width: 100%; border-bottom: 1px solid rgba(195, 195, 195, 0.42); margin-bottom: 5px; padding: 10px 0px 5px; font-size: 15px; font-weight: bold; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer { text-align: left; padding-bottom: 20px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .summaryText{padding: 10px 5px; font-size: 18px; text-align: center; border-bottom: 1px solid rgb(90, 90, 90);} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .addresults{ display: block; padding: 20px 5px 10px 12px; text-align: center; font-size: 18px; border-bottom: 1px solid rgb(90, 90, 90);} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item{ position: relative; display: inline-block; width: 100%; padding: 10px 0px; font-size: 16px; text-align: left; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item.winner{ border-top: 1px solid rgb(90, 90, 90);} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .rank{position: relative; display: inline-block; width: 88%; margin: 20px 0px 20px 10px; font-size: 14px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .rank .cardimgc { position: relative; display: inline-block; width: 30px; height: 42px; vertical-align: top;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .rank .cardimgc .cardimg{ display: block; width: 30px; height: 42px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .rank .subject{ display: inline-block; width: 82%; margin: 0px 10px; vertical-align: top; font-size: 12px; background: linear-gradient(180deg, rgba(7, 7, 7, 1) 70%,rgba(7, 7, 7, 0) 100%); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .rank .subject .rankval{ display: inline; position: relative; text-align: left; padding-right: 4px; margin-right: 4px; border-right: 1px solid rgb(252, 250, 240); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .rank .subject .rankval .text{ } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .rank .subject .rankval .rankpre{ color: rgb(252, 250, 240);} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .rank .subject .rankval .ranksub{ color: rgb(252, 250, 240);} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .rank .subject .rankval .ranknum{ } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .rank .subject .rankbg{ } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats { position: relative; display: inline-block; width: 100%; height: 60px; text-align: center;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar { width: 95%; margin: auto; background-color: #333; font-size: 12px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar{ position: relative; display: inline-block; width: 50%; height: 25px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar.nay{ } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar.yay{ } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric{ position: relative; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric .s2bar{ z-index: 3; position: absolute; height: 25px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric .s2bar .deb{ position: absolute; top: 27px; width: 25px; height: 25px; opacity: 0.7} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric .s2bar .yay.deb{ right: 0px; padding: 10px 0px 10px 25px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric .s2bar .nay.deb{ left: 0px; padding: 10px 25px 10px 0px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric.nay .s2bar{ background-color: rgba(206, 81, 105, 1); right: 0.5px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric.yay .s2bar{ background-color: rgba(81,206,163,1); left: 1px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric .s2bar .s3bar{ position: absolute; height: 25px; width: 100%; opacity: 0; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric.yay .s2bar .s3bar{ left: -1px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric.nay .s2bar .s3bar{ right: -0.5px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric .s2bar .s3bar .s4bar{ position: relative; display: inline-block; height: 25px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric .s2bar .s3bar .s4bar .s4line{ display: block; position: relative; width: 80%; margin: -24px auto; padding-bottom: 3px; color: gray; font-size: 10px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric.nay .s2bar .s3bar .s4bar .s4line{ border-bottom: 1px solid gray; color: rgb(252, 250, 240); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric.yay .s2bar .s3bar .s4bar .s4line{ border-bottom: 1px solid gray; color: rgb(252, 250, 240); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric .s2bar .s3bar .s4bar .s4line .perc{ font-size: 8px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric.yay .s2bar .s3bar .s4bar{ position: relative; display: inline-block; height: 25px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric.nay .s2bar .s3bar .s4bar{ position: relative; display: inline-block; height: 25px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric.yay .s2bar .s3bar.gender .s4bar.male{ background-color: rgba(33, 131, 97, 1); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric.yay .s2bar .s3bar.gender .s4bar.female{ background-color: rgba(81, 206, 163, 1); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric.nay .s2bar .s3bar.gender .s4bar.male{ background-color: rgba(160, 47, 68, 1); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric.nay .s2bar .s3bar.gender .s4bar.female{ background-color: rgba(216, 107, 128, 1); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric.yay .s2bar .s3bar.age .s4bar.a21{ background-color: rgba(33, 131, 97, 1); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric.yay .s2bar .s3bar.age .s4bar.a2135{ background-color: rgba(81, 206, 163, 1); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric.yay .s2bar .s3bar.age .s4bar.a35{ background-color: rgba(183, 223, 209, 1); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric.nay .s2bar .s3bar.age .s4bar.a21{ background-color: rgba(160, 47, 68,1); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric.nay .s2bar .s3bar.age .s4bar.a2135{ background-color: rgba(206, 81, 105, 1); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric.nay .s2bar .s3bar.age .s4bar.a35{ background-color: rgba(215, 169, 178, 1);} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric .you { z-index: 2; position: absolute; display: none; top: 2px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric .you.voted { display: block; top: 27px; height: 30px; width: 1px; background-color: rgba(246, 210, 130, 0.5); } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric.nay .you { right: 15%; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric.yay .you { left: 15%; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric .you .profileImg{ position: absolute; display: block; width: 21px; bottom: -23px; left: -10px; vertical-align: top;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .stats .bar .sbar .metric .total{ z-index: 3; position: absolute; top: 5px; text-shadow: 1px 1px 1px #000;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .compare { display: inline-block; position: relative; text-align: right; cursor: pointer; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .compare .data{display: none;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .compare .btn{ display: inline-block; padding: 25px 2px 10px; vertical-align: top;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .compare .btn img{ position: relative; width: 20px; height: 18px; vertical-align: top;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .debs{ width: 100%; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .debs .btn{ width: 25px; height: 25px; margin: 10px; opacity: 0.7; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .debs .nay.btn{ float: left; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .resScroll .itemContainer .item .debs .yay.btn{ float: right; } #gridPage #topicPop .container .topicSummary .votemore{ position: relative; display: block; top: 50px; padding: 15px 0px; background-color: #000; font-size: 21px; border-top: 1px solid #d96741;} #gridPage #topicPop .container .gutContainer{ z-index: 5; position: relative; display: block; height: 10.5%; text-align: center; } #gridPage #topicPop .container .gutContainer .button{position: relative; bottom: 0px; display: inline-block; width: 45px; height: 45px; padding: 2px; vertical-align: top; cursor: pointer; text-align: center; font-size: 14px; border-radius: 50px; } #gridPage #topicPop .container .gutContainer .button .text { display: inline-block; position: relative; top: 14px; font-size: 14px; font-weight: normal;} #gridPage #topicPop .container .gutContainer .button .points{ display: block; position: absolute; left: 13px; top: -21px; opacity: 1; color: rgb(246,210,130); } #gridPage #topicPop .container .gutContainer .button .fa{position: relative; top: 8px; font-size: 27px; } #gridPage #topicPop .container .gutContainer .gutShare{ width: 45px !important; margin: 0px 20px; overflow: hidden; border: 2px solid #4080ff; text-align: center; -webkit-transform: translate3d(0,0,1px); transform: translate3d(0,0,1px);} #gridPage #topicPop .container .gutContainer .gutShare .invite{display: block; position: relative; width: 30px; height: 27px; top: 8px; left: 10px; } #gridPage #topicPop .container .gutContainer .gutShare .sheen{display: block; position: absolute; height: 97px; width: 50px; top: -18px; left: -60px; box-shadow: inset -37px 0px 55px -25px;} #gridPage #topicPop .container .gutContainer .gutShare .count{ display: inline-block; position: relative; top: 14px; margin-left: 5px; font-size: 14px; font-weight: normal;} #gridPage #topicPop .container .gutContainer .gutSdebatehare .inviteList{display: none;} #gridPage #topicPop .container .gutContainer .gutYay{right: 0px; border: 2px solid rgba(81,206,163,1); color: rgba(81,206,163,1); } #gridPage #topicPop .container .gutContainer .gutNay{left: 0px; border: 2px solid rgba(206, 81, 105, 1); color: rgba(206, 81, 105, 1);} #gridPage #topicPop .container .gutContainer .gutYay .thumbYay{color: rgba(81,206,163,1); } #gridPage #topicPop .container .gutContainer .gutNay .thumbNay{color: rgba(206, 81, 105, 1);} #gridPage #topicPop .container .relTitle { display: block; padding: 15px 0px 10px; width: 100%; margin: auto; text-align: center; font-size: 18px; border-top: 1px solid #d96741;} #gridPage #topicPop .container .relContainer { display: block; position: relative; text-align: center; cursor: pointer; padding: 10px 0px 125px; background-color: rgba(0, 0, 0, 0.28);} #gridPage #topicPop .container .relContainer .more{ width: 90%; max-width: 350px; margin: 5px auto 25px; padding: 10px; border: 2px solid rgb(252, 250, 240); border-radius: 4px; font-size: 18px; font-weight: bold; } #gridPage #topicPop .container .relContainer .item { display: inline-block; position: relative; margin: 2px; cursor: pointer; } #gridPage #topicPop .container .relContainer .item .info { display: table; width: 120px; position: absolute; top: 0; height: 120px; box-shadow: inset 0px -43px 50px -6px rgba(0, 0, 0, 0.7); } #gridPage #topicPop .container .relContainer .item .info .align{ display: table-cell; vertical-align: bottom; padding: 7px 5px; text-align: left; font-size: 18px; text-shadow: 1px 1px 1px #000; } #gridPage #topicPop .container .relContainer .item .info .align .namedata{ display: none; } #gridPage #debProtect{ display: none; z-index: 48; position: fixed; height: 100%; width: 100%; top: -2px; background-color: rgba(0, 0, 0, 0.9); -webkit-transform: translate3d(0,0,1px); transform: translate3d(0,0,1px); } #gridPage .debPop{z-index: 49; position: fixed; height: 100%; width: 80%; left: 100%; top: 0px; border: none; text-align: center; background-color: rgba(0, 0, 0, 0.9); -webkit-transform: translateZ(1);} #gridPage .debPop.Yay{ left: 100%; } #gridPage .debPop.Nay{ left: -80%; } #gridPage .debPop .debtoggle { display: block; z-index: 5; padding-top: 15px; } #gridPage .debPop.Yay .debtoggle { box-shadow: 0px 5px 15px rgb(0, 0, 0); border-top: 2px solid rgba(81,206,163,1); background: linear-gradient(180deg, rgba(81,206,163,1) -150%, rgb(0, 0, 0) 100% ); } #gridPage .debPop.Nay .debtoggle { box-shadow: 0px 5px 15px rgb(0, 0, 0); border-top: 2px solid rgba(206, 81, 105, 1); background: linear-gradient(180deg, rgba(206, 81, 105, 1) -150%, rgb(0, 0, 0) 100% ); } #gridPage .debPop .debtoggle .deb{ position: relative; vertical-align: top; width: 30px; height: 30px; } #gridPage .debPop .debtoggle .title{ font-size: 18px; } #gridPage .debPop.Yay .debtoggle .title{ color: rgba(81,206,163,1); } #gridPage .debPop.Nay .debtoggle .title{ color: rgba(206, 81, 105, 1); } #gridPage .debPop.Yay .debtoggle .deb.Yay{ margin-left: 10px; } #gridPage .debPop.Nay .debtoggle .deb.Nay{ margin-right: 10px; } #gridPage .debPop.Yay .debtoggle .debop.Nay{ display: none; position: absolute; left: -40%; top: 80%; padding: 15px;} #gridPage .debPop.Yay .debtoggle .leftarrow{ width: 10px; height: 17px; margin: 3px 10px 0px 0px;} #gridPage .debPop.Nay .debtoggle .debop.Yay{ display: none; position: absolute; right: -40%; top: 80%; padding: 15px; } #gridPage .debPop.Nay .debtoggle .rightarrow{ width: 10px; height: 17px; margin: 3px 0px 0px 10px;} #gridPage .debPop .debContainer { display: block; position: absolute; height: 100% ; width: 100%; overflow-y: scroll; overflow-x: hidden; } #gridPage .debPop .debContainer .postContainer { z-index: 5; display: block; position: relative; width: 100%; padding: 20px 0px; background-color: rgb(0,0,0); text-align: left; } #gridPage .debPop .debContainer .postContainer .actionContainer { display: none; height: 20px; margin: 10px 10px 0px; padding-bottom: 10px; text-align: center;} #gridPage .debPop .debContainer .postContainer .actionContainer .btn{ display: inline-block; font-size: 16px; vertical-align: top; cursor: pointer;} #gridPage .debPop .debContainer .postContainer .actionContainer .cancel{float: left; color: #d96741; font-size: 14px; } #gridPage .debPop .debContainer .postContainer .actionContainer .help{ display: none; font-size: 14px;} #gridPage .debPop .debContainer .postContainer .actionContainer .post{ float: right; font-weight: bold; color: #d96741; opacity: 0.25;} #gridPage .debPop .debContainer .postContainer .argContainer { background: linear-gradient(0deg, #555 -250%, rgb(0, 0, 0) 100% ); } #gridPage .debPop .debContainer .postContainer .argContainer .protect{ z-index: 1; display: block; position: absolute; top: 0; width: 100%; height: 100%;} #gridPage .debPop .debContainer .postContainer .argContainer .profileImg{ display: inline-block; width: 30px; height: 30px; margin: 10px } #gridPage .debPop .debContainer .postContainer .argContainer .arg { position: relative; display: inline-block; width: 80%; margin: 15px 0px 0px; padding-bottom: 10px; vertical-align: top; } #gridPage .debPop .debContainer .postContainer .argContainer .arg .dinput{ position: relative; z-index: 1; width: 100%; height: 25px; padding: 0px; opacity: 0; background-color: transparent; border-radius: 0px; border: none; color: rgb(252, 250, 240); font-size: 14px; font-family: Avenir Light, 'Nunito', Arial, sans-serif !important;} #gridPage .debPop .debContainer .postContainer .argContainer .arg .rich{ position: absolute; top: 0; height: 25px; width: 100%; font-size: 14px; font-family: Avenir Light, 'Nunito', Arial, sans-serif !important; word-wrap: break-word; white-space: pre-wrap; background-color: transparent} #gridPage .debPop .debContainer .postContainer .argContainer .arg .rich .cursor{ display: inline-block; position: absolute; margin: -2px 0px 0px -1px; font-size: 18px; color: #d96741; animation: cursor 1.0s infinite; -webkit-animation: cursor 1.0s infinite;} #gridPage .debPop .debContainer .postContainer .argContainer .arg .rich .select{ background-color: rgba(217, 103, 65, 0.25); } #gridPage .debPop .debContainer .postContainer .argContainer .arg .rich .select .cusror{ display: none; } #gridPage .debPop .debContainer .postContainer .argContainer .arg .rich .holder { color: gray; } #gridPage .debPop .debContainer .postContainer .argContainer .arg .rich .holder.enter { position: relative; top: 2px; font-size: 16px;} #gridPage .debPop .debContainer .postContainer .argContainer .arg .rich .holder .yay {color: rgba(81,206,163,1); } #gridPage .debPop .debContainer .postContainer .argContainer .arg .rich .posting{ position: relative; top: 10px; font-size: 16px; color: gray; } #gridPage .debPop .debContainer .postContainer .argContainer .arg .rich .allargued{ position: absolute; top: 10px; font-size: 16px; color: gray; } #gridPage .debPop .debContainer .postContainer .argContainer .arg .rich .holder .nay {color: rgba(203,81,106,1); } #gridPage .debPop .debContainer .postContainer .argContainer .arg .rich .xref {color: #0084ff; cursor: pointer; } #gridPage .debPop .debContainer .postContainer .argContainer .arg .rich .xdeb {color: #0084ff; cursor: pointer; } #gridPage .debPop .debContainer .postContainer .argContainer textarea::-webkit-scrollbar-thumb{ background-color: rgba(252, 250, 240, .5) !important;} #gridPage .debPop .debContainer .postContainer .sugContainer { display: none; height: 60px; box-shadow: inset 0px -25px 20px -10px rgb(0, 0, 0), inset 0px 25px 20px -10px rgb(0, 0, 0), inset -20px 0px 20px -10px rgba(0, 132, 255, 0.5) } #gridPage .debPop .debContainer .postContainer .sugContainer .pos{ display: none; } #gridPage .debPop .debContainer .postContainer .sugContainer .box{ display: block; padding: 17px 0px; overflow-x: auto; font-size: 14px; white-space: nowrap; cursor: pointer; } #gridPage .debPop .debContainer .postContainer .sugContainer .box span{ display: inline-block; } #gridPage .debPop .debContainer .postContainer .sugContainer .box .title{ margin-right: 10px; padding: 2px 7px; color: gray; background: #222; } #gridPage .debPop .debContainer .postContainer .sugContainer .xdebs{ display: none; color: #0084ff; } #gridPage .debPop .debContainer .postContainer .sugContainer .xdebs .xdeb{ } #gridPage .debPop .debContainer .postContainer .sugContainer .xlinks{ position: absolute; width: 100%; overflow-x: scroll; background-color: rgba(0, 132, 255, 0.1); color: #0084ff;} #gridPage .debPop .debContainer .postContainer .sugContainer .xlinks .bar{ display: inline-block; margin: 0px 10px; color: gray;} #gridPage .debPop .debContainer .postContainer .sugContainer .xlinks .xlink .url{display: none;} #gridPage .debPop .debContainer .postContainer .cardContainer{ display: none; margin: 15px 0px 0px; font-size: 12px; text-align: left;} #gridPage .debPop .debContainer .postContainer .cardContainer .activeCard{ padding: 5px 10px 15px 14px; background-color: rgba(0, 0, 0, 1); border-bottom: 1px solid #333;} #gridPage .debPop .debContainer .postContainer .cardContainer .activeCard .cardImgc { display: inline-block;} #gridPage .debPop .debContainer .postContainer .cardContainer .activeCard .cardImgc .cardImg{ width: 21px; height: 30px;} #gridPage .debPop .debContainer .postContainer .cardContainer .activeCard > .text {display: inline-block; width: 76%; padding: 10px 5px 5px 13px; vertical-align: top; color: gray; } #gridPage .debPop .debContainer .postContainer .cardContainer .activeCard > .text .rankval{ display: inline-block; position: relative; padding-right: 4px; margin-right: 4px; border-right: 1px solid gray; } #gridPage .debPop .debContainer .postContainer .cardContainer .activeCard > .text .rankval .text{ } #gridPage .debPop .debContainer .postContainer .cardContainer .activeCard > .text .rankval .rankpre{ } #gridPage .debPop .debContainer .postContainer .cardContainer .activeCard > .text .rankval .ranksub{ } #gridPage .debPop .debContainer .postContainer .cardContainer .activeCard > .text .rankval .ranknum{ } #gridPage .debPop .debContainer .postContainer .cardContainer .activeCard .expandSpan { display: inline-block; float: right; vertical-align: top; margin-top: 10px; padding: 5px 0px 5px 10px; background-color: rgba(217, 103, 65, 0);} #gridPage .debPop .debContainer .postContainer .cardContainer .activeCard .expandSpan .expandFilter{display: block; width: 17px; height: 10px; } #gridPage .debPop .debContainer .postContainer .cardContainer .options{z-index: 0; position: relative; list-style: none; margin: 10px 0px; left: 0px; height: 0%; width: 100%; padding: 0px; background-color: rgba(0,0,0,0.9); color: rgb(252, 250, 240); overflow-y: scroll; } #gridPage .debPop .debContainer .postContainer .cardContainer .options li{ position: relative; margin: 15px 10px; font-size: 12px; } #gridPage .debPop .debContainer .postContainer .cardContainer .options li .argued{ z-index: 1; position: absolute; width: 100%; height: 100%; text-align: center; background: linear-gradient(90deg, rgba(25, 25, 25, 0.25) -10%, rgba(0, 0, 0,0.85) 35% ); } #gridPage .debPop .debContainer .postContainer .cardContainer .options li .argued .text{ display: inline-block; margin: 20px 10px; font-size: 14px; color: gray;} #gridPage .debPop .debContainer .postContainer .cardContainer .options li .argued .check{ display: inline-block; margin: 20px 0px; font-size: 16px;} #gridPage .debPop .debContainer .postContainer .cardContainer .options li .cardImgc{ display: inline-block; } #gridPage .debPop .debContainer .postContainer .cardContainer .options li .cardImgc .cardImg{ width: 21px; height: 30px; } #gridPage .debPop .debContainer .postContainer .cardContainer .options li > .text{display: inline-block; width: 76%; max-width: 90%; padding: 10px 5px 5px 10px; vertical-align: top;} #gridPage .debPop .debContainer .postContainer .cardContainer .options li > .text .rankval{ position: relative; padding-right: 4px; margin-right: 4px; border-right: 1px solid rgb(252, 250, 240); } #gridPage .debPop .debContainer .postContainer .cardContainer .options li > .text .rankval .text{ } #gridPage .debPop .debContainer .postContainer .cardContainer .options li > .text .rankval .rankpre{ color: rgb(252, 250, 240);} #gridPage .debPop .debContainer .postContainer .cardContainer .options li > .text .rankval .ranksub{ color: rgb(252, 250, 240);} #gridPage .debPop .debContainer .postContainer .cardContainer .options li > .text .rankval .ranknum{ } #gridPage .debPop .debContainer .postContainer .cardContainer .options li .thumb{ display: none; position: relative; width: 30px; float: right; right: 5px; vertical-align: top;} #gridPage .debPop .debContainer .postContainer .cardContainer .options li.Yay .thumbup{ display: inline-block; } #gridPage .debPop .debContainer .postContainer .cardContainer .options li.Nay .thumbdown{display: inline-block; } #gridPage .debPop .debContainer .argsContainer{ position: relative; display: block; width: 100%; padding-bottom: 50px; } #gridPage .debPop .debContainer .argsContainer .filter{position: relative; display: block; text-align: left; font-size: 14px;} #gridPage .debPop .debContainer .argsContainer .bglabel{position: absolute; z-index: 5; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 1); } #gridPage .debPop .debContainer .argsContainer .filter .sblock{ display: inline-block; position: relative; z-index: 5; padding: 20px 0px 15px 15px; vertical-align: top; background-color: rgba(0, 0, 0, 1);} #gridPage .debPop .debContainer .argsContainer .filter .showall{ float: right; width: 30%} #gridPage .debPop .debContainer .argsContainer .filter .showall .text{ display: block; padding-left: 20px;} #gridPage .debPop .debContainer .argsContainer .filter .acontainer{ float: left; text-align: center;} #gridPage .debPop .debContainer .argsContainer .filter .acontainer .label{ vertical-align: top; color: gray; margin-right: 7px;} #gridPage .debPop .debContainer .argsContainer .filter .activefilter{ position: relative; display: inline-block; text-align: right; } #gridPage .debPop .debContainer .argsContainer .filter .activefilter .expandfilter{ display: inline-block; width: 17px; height: 10px; vertical-align: top; padding: 5px 5px 0px; background-color: rgba(217, 103, 65, 0);} #gridPage .debPop .debContainer .argsContainer .filter .activefilter .filters{ display: inline-block; margin-top: -5px; vertical-align: top;} #gridPage .debPop .debContainer .argsContainer .filter .activefilter .filters .cardImgc{ position: relative; display: inline-block; margin: 0px 5px;} #gridPage .debPop .debContainer .argsContainer .filter .activefilter .filters .cardImgc .cardImg{ display: block; width: 21px; height: 30px; } #gridPage .debPop .debContainer .argsContainer .filter .activefilter .filters .cardImgc .rankval{ display: block; position: relative; left: 0; width: 100%; padding-top: 4px; text-align: center;} #gridPage .debPop .debContainer .argsContainer .filter .activefilter .filters .cardImgc .rankval .ranktext{ position: relative; } #gridPage .debPop .debContainer .argsContainer .filter .activefilter .filters .cardImgc .rankval .rankpre{ color: rgb(252, 250, 240);} #gridPage .debPop .debContainer .argsContainer .filter .activefilter .filters .cardImgc .rankval .ranksub{ color: rgb(252, 250, 240);} #gridPage .debPop .debContainer .argsContainer .filter .activefilter .filters .cardImgc .rankval .ranknum{ } #gridPage .debPop .debContainer .argsContainer .filter .activefilter .filters .profileImg { width: 30px; height: 30px; } #gridPage .debPop .debContainer .argsContainer .filter .set{display: none; } #gridPage .debPop .debContainer .argsContainer .filter .options {z-index: 4; display: none; position: absolute; right: 0px; width: 100%; margin: 0px; overflow-y: scroll; list-style: none; padding: 0px; background-color: rgba(0,0,0,0.95); color: rgb(252, 250, 240); text-align: left; } #gridPage .debPop .debContainer .argsContainer .filter .options li { position: relative; display: block; margin: 15px 5px; font-size: 12px; } #gridPage .debPop .debContainer .argsContainer .filter .options li .argued{ z-index: 1; position: absolute; bottom: 0; width: 100%; height: 15px; text-align: center; background: linear-gradient(90deg, rgba(51,51,51,0.5) 14%, rgba(217, 103, 65, 0.10) 69% ); } #gridPage .debPop .debContainer .argsContainer .filter .options li .argued .text{ display: inline-block; font-size: 12px; } #gridPage .debPop .debContainer .argsContainer .filter .options li .cardimgc{ display: inline-block; margin: 0px 5px;} #gridPage .debPop .debContainer .argsContainer .filter .options li .cardImgc .cardImg{ display: block; width: 21px; height: 30px; } #gridPage .debPop .debContainer .argsContainer .filter .options li > .text{ display: inline-block; width: 72%; max-width: 90%; padding: 7px 0px; vertical-align: top;} #gridPage .debPop .debContainer .argsContainer .filter .options li > .text .rankval{ position: relative; left: 0; width: 100%; padding-right: 4px; margin-right: 4px; border-right: 1px solid rgb(252, 250, 240); } #gridPage .debPop .debContainer .argsContainer .filter .options li > .text .rankval .ranktext{ position: relative; } #gridPage .debPop .debContainer .argsContainer .filter .options li > .text .rankval .rankpre{ color: rgb(252, 250, 240);} #gridPage .debPop .debContainer .argsContainer .filter .options li > .text .rankval .ranksub{ color: rgb(252, 250, 240);} #gridPage .debPop .debContainer .argsContainer .filter .options li > .text .rankval .ranknum{ } #gridPage .debPop .debContainer .argsContainer .filter .options li .circle { position: absolute; display: inline-block; width: 25px; height: 25px; right: 19px; top: 10%; border-radius: 25px; background-color: rgba(0, 132, 255, 0); border: 1px solid #444; text-align: center; color: rgba(252, 250, 240, 0.25);} #gridPage .debPop .debContainer .argsContainer .filter .options li.help{paddin-left: 5px; } #gridPage .debPop .debContainer .argsContainer .filter .options li.allfilter .text{ padding: 20px 0px 0px 10px; } #gridPage .debPop .debContainer .argsContainer .filter .options li.allfilter .profileImg{ width: 30px; padding: 7px 0px 0px; } #gridPage .debPop .debContainer .argsContainer .filter .options li.allfilter .circle {top: 25%; } #gridPage .debPop .debContainer .argsContainer .filter .options li .circle .check{font-size: 17px; } #gridPage .debPop .debContainer .argsContainer .arrow { z-index: 5; display: block; position: absolute; top: 49%; height: 36px; padding: 5px; } #gridPage .debPop .debContainer .argsContainer .arrow.text{ z-index: 4; display: inline-block; left: 0px; width: 100%; padding: 6px; background-color: rgba(0, 0, 0, 0.45); font-size: 18px; } #gridPage .debPop .debContainer .argsContainer .arrow.left{ float: left; left: 0; background-color: rgba(206, 81, 105, 0.25); height: 25px; width: 15px; } #gridPage .debPop .debContainer .argsContainer .arrow.right{ float: right; right: 0px; background-color: rgba(74, 207, 162, 0.25); height: 25px; width: 15px; } #gridPage .debPop .debContainer .argsContainer .args { display: inline-block; vertical-align: top; text-align: left; width: 100%; } #gridPage .debPop .debContainer .argsContainer .args .divider{ display: inline-block; position: relative; height: 400px; vertical-align: top; } #gridPage .debPop .debContainer .argsContainer .args .divider.new{ margin: 0px 15px; } #gridPage .debPop .debContainer .argsContainer .args .divider .action{ display: table; height: 100%; } #gridPage .debPop .debContainer .argsContainer .args .divider .action .cell{ display: table-cell; vertical-align: middle; width: 0px; font-size: 21px;} #gridPage .debPop .debContainer .argsContainer .args .divider .action .cell .top{ position: relative; margin-bottom: 10px; } #gridPage .debPop .debContainer .argsContainer .args .divider .action .cell .top .sphere{ position: relative; width: 125px; height: 125px; border-radius: 125px; color: rgb(5, 49, 34); background: radial-gradient(circle at 115% -3%, #d96741, rgb(104, 50, 33) 90%, #d96741 80%, #d96741 100%); text-shadow: 1px 1px 1px rgba(79, 191, 153, 0.96); } #gridPage .debPop .debContainer .argsContainer .args .divider .action .cell .top .sphere:before{ content: ""; position: absolute; top: 1%; left: 5%; width: 90%; height: 90%; border-radius: 47%; z-index: 2; background: radial-gradient(circle at 50% -15px, rgb(253, 235, 225), rgba(217, 103, 65, 0) 40%);} #gridPage .debPop .debContainer .argsContainer .args .divider .action .cell .top .profileImg{ position: absolute; top: 0; right: 5px; width: 75px; height: 75px; margin-top: 12%; } #gridPage .debPop .debContainer .argsContainer .args .divider .action .cell .grow{ display: block; font-size: 14px;} #gridPage .debPop .debContainer .argsContainer .args .divider .action .cell .add{ display: block; } #gridPage .debPop .debContainer .argsContainer .args .arg{ position: relative; display: inline-block; top: 0; width: 100%; margin: 10px 0px; padding-top: 10px; overflow: hidden; vertical-align: top; white-space: normal; font-size: 14px; background-color: #000; } #gridPage .debPop .debContainer .argsContainer .args .arg .spinner { z-index: 10; position: absolute; left: 43%; top: 12%; width: 50px; height: 50px; } #gridPage .debPop .debContainer .argsContainer .args .arg .spinner .spinnertext{ margin: 12px -2px; top: 0; left: 0} #gridPage .debPop .debContainer .argsContainer .args .arg.Yay{ background-color: rgba(81,206,163,0.12); } #gridPage .debPop .debContainer .argsContainer .args .arg.Yay .container .body { color: rgba(81,206,163,1);} #gridPage .debPop .debContainer .argsContainer .args .arg.Nay{ background-color: rgba(206, 81, 105, 0.12); } #gridPage .debPop .debContainer .argsContainer .args .arg.Nay .container .body { color: rgba(206, 81, 105, 1);} #gridPage .debPop .debContainer .argsContainer .args .arg .container{ display: inline-block; width: 100%; vertical-align: top; text-align: left; } #gridPage .debPop .debContainer .argsContainer .args .arg .container .head { margin: 10px 20px; } #gridPage .debPop .debContainer .argsContainer .args .arg .container .head .autovote { display: inline-block; width: 100%; } #gridPage .debPop .debContainer .argsContainer .args .arg .container .head .autovote .usercard > .profileImg{ display: inline-block; width: 30px; height: 30px; margin: -10px 10px 0px 0px; vertical-align: top; } #gridPage .debPop .debContainer .argsContainer .args .arg .container .head .autovote .usercard .user {margin-right: 4px; } #gridPage .debPop .debContainer .argsContainer .args .arg .container .head .autovote .usercard .pretext {margin-right: 4px; color: gray; } #gridPage .debPop .debContainer .argsContainer .args .arg .container .head .autovote .usercard .cardimgc { display: inline-block; margin-right: 4px; vertical-align: top; margin: -4px 4px 0px 4px;} #gridPage .debPop .debContainer .argsContainer .args .arg .container .head .autovote .usercard .cardimgc .cardimg { width: 16px; height: 23px; } #gridPage .debPop .debContainer .argsContainer .args .arg .container .head .autovote .usercard .rankval {margin-right: 4px;} #gridPage .debPop .debContainer .argsContainer .args .arg .container .body { min-height: 150px; margin: 10px 20px; color: rgba(206, 81, 105, 1);} #gridPage .debPop .debContainer .argsContainer .args .arg .container .body .xref {color: #0084ff; cursor: pointer; } #gridPage .debPop .debContainer .argsContainer .args .arg .container .body .xdeb {color: #0084ff; cursor: pointer; } #gridPage .debPop .debContainer .argsContainer .args .arg .container .foot { z-index: 3; position: relative; width: 100%; bottom: 0; background-color: rgba(0, 0, 0, 1); font-size: 11px; color: gray; } #gridPage .debPop .debContainer .argsContainer .args .arg .container .foot .time{display: inline-block; width: 54%; margin: 10px 0px 10px 20px; } #gridPage .debPop .debContainer .argsContainer .args .arg .container .foot .infStrength{ position: absolute; display: inline-block; width: 30%; padding-left: 3px; margin: 10px 0px 10px 10px; vertical-align: top; background: linear-gradient(90deg, rgb(246,210,130) 15%, rgba(13, 67, 47, 0) 15% ); color: rgb(252, 250, 240); text-shadow: 1px 1px 1px #000,1px 1px 1px #000; text-align: center; box-shadow: inset 0px 17px 0px rgba(246, 210, 130, 0.15);} #gridPage .debPop .debContainer .argsContainer .args .arg .container .foot .infStrength.exist{ box-shadow: inset 0px 17px 0px rgba(246, 210, 130, 0.15);} #gridPage .debPop .debContainer .argsContainer .args .arg .container .foot .infStrength .profileImg{ position: absolute; left: -21px; top: -2px; width: 17px; float: left;} #gridPage .debPop .debContainer .argsContainer .args .arg .container .foot .infStrength .infArrow { position: relative; width: 12px; height: 7px; right: 6px; top: 3px; opacity: 0.5; float: right;} #gridPage .debPop .debContainer .argsContainer .args .arg .container .influence{ display: none; z-index: 2; position: absolute; width: 100%; height: 100%; top: 100%; text-align: center; border-top: 1px solid rgb(246,210,130); background: linear-gradient(180deg, rgb(25, 21, 13) 15%, rgb(0, 0, 0) 150% ); color: rgb(246,210,130);} #gridPage .debPop .debContainer .argsContainer .args .arg .container .influence .you { display: block; width: 100%; font-size: 12px; } #gridPage .debPop .debContainer .argsContainer .args .arg .container .influence .you .container { text-align: center;} #gridPage .debPop .debContainer .argsContainer .args .arg .container .influence .you .toptext{ padding: 15px 15px 10px; font-size: 14px; } #gridPage .debPop .debContainer .argsContainer .args .arg .container .influence .you .toptext .infArrow{ position: absolute; right: 5px; top: 10px; width: 15px; padding: 5px; transform: rotate(180deg); float: right; } #gridPage .debPop .debContainer .argsContainer .args .arg .container .influence .you .given{ display: inline-block; width: 45%; vertical-align: top; margin-bottom: 15px; } #gridPage .debPop .debContainer .argsContainer .args .arg .container .influence .you .given .text{ padding: 7px; } #gridPage .debPop .debContainer .argsContainer .args .arg .container .influence .you .given .inc{ position: relative; padding: 7px; font-size: 27px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} #gridPage .debPop .debContainer .argsContainer .args .arg .container .influence .you .given .inc .btn{ display: inline-block; position: relative; top: -9px;} #gridPage .debPop .debContainer .argsContainer .args .arg .container .influence .you .given .inc .save { display: none; position: relative; float: left; opacity: 0.5; padding: 0px 10px; border-right: 1px solid black; font-size: 16px; } #gridPage .debPop .debContainer .argsContainer .args .arg .container .influence .you .given .inc .plus { float: right; padding: 0px 6px; border-left: 1px solid black;} #gridPage .debPop .debContainer .argsContainer .args .arg .container .influence .you .given .inc .minus { float: left; padding: 0px 10px; border-right: 1px solid black;} #gridPage .debPop .debContainer .argsContainer .args .arg .container .influence .you .given .inc .give{ position: relative; font-size: 16px; } #gridPage .debPop .debContainer .argsContainer .args .arg .container .influence .you .given .inc .givedata{ display: none; } #gridPage .debPop .debContainer .argsContainer .args .arg .container .influence .you .gains{ display: inline-block; width: 45%; vertical-align: top; margin: 0px 0px 15px 10px;} #gridPage .debPop .debContainer .argsContainer .args .arg .container .influence .you .gains .text{ padding: 7px; } #gridPage .debPop .debContainer .argsContainer .args .arg .container .influence .you .gains .ret { display: block; padding: 7px; background-color: rgba(65, 56, 37, 0.5); } #gridPage .debPop .debContainer .argsContainer .args .arg .container .influence .you .gains .ret .gain{ position: relative; font-size: 16px; } #gridPage .debPop .debContainer .argsContainer .args .arg .container .influence .you .history{ display: none;} #gridPage .debPop .debContainer .argsContainer .args .arg .container .influence .others { display: table; width: 100%; height: 22%; border-top: 1px solid rgba(246, 210, 130, 0.35); } #gridPage .debPop .debContainer .argsContainer .args .arg .container .influence .others .container{ display: table-cell; vertical-align: middle; } #gridPage .debPop .debContainer .argsContainer .args .arg .container .influence .others .toptext{ width: 45%; padding-bottom: 15px; text-align: center;} #gridPage .debPop .debContainer .argsContainer .args .arg .container .influence .others .label{display: inline-block; margin: 15px 0px 15px 15px; vertical-align: top; font-size: 12px; } #gridPage .debPop .debContainer .argsContainer .args .arg .container .influence .others .influencers{ display: inline-block; padding: 12px 0px 0px 15px; text-align: left; vertical-align: top; } #gridPage .debPop .debContainer .argsContainer .args .arg .container .influence .others .influencers .profileImg{ width: 20px; height: 20px; margin-right: 10px;} #gridPage #refPop{z-index: 50; position: fixed; height: 115%; width: 80%; left: 100%; top: 0px; border: none; text-align: center; background-color: rgba(24, 27, 23, 0.97); -webkit-transform: translateZ(1);} #gridPage #refProtect{ display: none; z-index: 49; position: fixed; height: 100%; width: 100%; top: -2px; background-color: rgba(0, 0, 0, 0.5); -webkit-transform: translate3d(0,0,1px); transform: translate3d(0,0,1px); } #gridPage #refPop .refContainer{position: relative; background-color: white; height: 87% ; overflow-y: scroll;} #gridPage #refPop .refContainer .head .source{ padding: 10px; text-align: left; font-size: 14px;} #gridPage #refPop .refContainer .head .source .logo{ width: 20px; vertical-align: top;} #gridPage #refPop .refContainer .head .source .name{ display: inline-block; margin: 2px 0px 0px 5px; font-weight: bold; color: #333} #gridPage #refPop .refContainer .head .source .auth1{ margin-top: 4px; float: right; font-size: 12px; color: gray;} #gridPage #refPop .refContainer .head .aimg{ width: 100%; height: auto;} #gridPage #refPop .refContainer .xref {padding: 10px; background-color: #111; color: #0084ff; border-top: 1px solid #333; text-align: left;} #gridPage #refPop .refContainer .xref .circle { display: inline-block; width: 25px; height: 25px; margin-right: 10px; border-radius: 25px; background: #0084ff; color: rgb(252, 250, 240); font-size: 17px; text-align: center; } #gridPage #refPop .refContainer .xref .sname { display: none; font-size: 14px; } #gridPage #refPop .refContainer .xref .pnum{ margin-left: 5px; } #gridPage #refPop .refContainer .title { padding: 10px 10px 0px; text-align: left; font-size: 16px; font-weight: bold; color: #333; } #gridPage #refPop .refContainer .pub { padding: 10px 10px 0px; text-align: left; font-size: 12px; color: gray; } #gridPage #refPop .refContainer .body{ padding: 10px 0px; text-align: justify; } #gridPage #refPop .refContainer .body table {text-align: justify; font-size: 14px; color: #333; border: none; } #gridPage #refPop .refContainer .body table tr .id{ width: 30px; text-align: center; background-color: #F7F7F7; font-size: 11px; } #gridPage #refPop .refContainer .body table tr .id .val{ display: inline-block;} #gridPage #refPop .refContainer .body table tr .id .circle{ position: absolute; display: inline-block; width: 25px; height: 25px; margin: -7px 0px 0px 1px; opacity: 0; border-radius: 25px; background-color: #FFF; border: 1px solid #CCC; color: rgb(252, 250, 240);} #gridPage #refPop .refContainer .body table tr .id .circle .check{ font-size: 17px;} #gridPage #refPop .refContainer .body table tr .data{ padding: 7px; } #gridPage #spherePop {display: table; z-index: 30; position: fixed; background-color: #222; height: 100%; top: 1px; right: -310px; max-width: 310px; top: 0; overflow-x: hidden; overflow-y: scroll; -webkit-transform: translate3d(0,0,1px); transform: translate3d(0,0,1px); -webkit-transform: translateZ(1);} #gridPage #sphereProtect{ display: none; z-index: 29; position: fixed; height: 100%; width: 100%; top: -1px; background-color: rgba(0, 0, 0, 0.5); -webkit-transform: translate3d(0,0,1px); transform: translate3d(0,0,1px); } #gridPage #spherePop .container{ display: table-cell; text-align: left; position: relative; width: 310px; height: 100%; margin: auto; border-left: 1px solid #333;} #gridPage #spherePop .container .logo{ margin: 15px;} #gridPage #spherePop .container .logo img{width: 150px;} #gridPage #spherePop .container .logo .text{ margin-top: 8px; font-size: 14.7px} #gridPage #spherePop .container .sphereContainer{ position: relative; height: 250px; width: 310px; background-color: transparent; background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .3) 25%, rgba(255, 255, 255, .3) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .3) 75%, rgba(255, 255, 255, .3) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .3) 25%, rgba(255, 255, 255, .4) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .4) 75%, rgba(255, 255, 255, .4) 76%, transparent 77%, transparent); background-size:30px 30px; border-bottom: 1px solid #d96741; overflow: scroll; white-space: nowrap; vertical-align: top; } #gridPage #spherePop .container .sphereContainer .sphereSub { display: inline-block; margin: 10px; -webkit-perspective: 1200px; -moz-perspective: 1200px; -ms-perspective: 1200px; -o-perspective: 1200px; perspective: 1200px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%;} #gridPage #spherePop .container .sphereContainer .sphereSub .sphere { display: inline-block; width: 100%; height: 100%; margin: 0; border-radius: 50%; position: relative; background: radial-gradient(circle at 115% -3%, #d96741 , #4f1200 10%, #d96741 80%, #d96741 100%); } #gridPage #spherePop .container .sphereContainer .sphereSub .sphere.selected{ border: 1px solid rgb(246,210,130); box-shadow: 0px 0px 10px rgb(246,210,130);} #gridPage #spherePop .container .sphereContainer .sphereSub .sphere:before { content: ""; position: absolute; top: 3%; left: 5%; width: 90%; height: 90%; border-radius: 50%; background: radial-gradient(circle at 50% -25px, rgb(255, 187, 165), rgba(217, 103, 65, 0) 58%); z-index: 2; } #gridPage #spherePop .container .sphereContainer .sphereSub.right .sphere:before { background: radial-gradient(circle at 5% -25px, #fff, rgba(255, 255, 255, 0) 56%); } #gridPage #spherePop .container .sphereContainer .sphereSub .line{ position: absolute; display: block; z-index: 10; top: 43%; width: 100%; left: -1px; height: 20px; width: 102%; border: none; border-radius: 2px; text-align: center; background: #222; } #gridPage #spherePop .container .sphereContainer .sphereSub .text{ z-index: 10; position: absolute; display: inline-block; top: 43%; left: 3%; width: 94%; height: 20px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-align: center; color: #d96741; background-color: rgb(72, 39, 28); box-shadow: inset 0px 0px 5px #222} #gridPage #spherePop .container .sphereContainer .sphereSub .text .s2{color: #612615; text-shadow: 1px 1px 1px #b86348; } #gridPage #spherePop .container .sphereContainer .sphereSub.primary { z-index: 2; position: relative; width: 150px; height: 150px; } #gridPage #spherePop .container .sphereContainer .sphereSub.primary.anim{animation: sph-float1 4.0s infinite ease-in-out; -webkit-animation: sph-float1 4.0s infinite ease-in-out;} #gridPage #spherePop .container .sphereContainer .sphereSub.primary .sphere:before { -webkit-filter: blur(4px); } #gridPage #spherePop .container .sphereContainer .sphereSub .text{ font-size: 16px;} #gridPage #spherePop .container .sphereContainer .sphereSub.secondary { z-index: 3; width: 100px; height: 100px; } #gridPage #spherePop .container .sphereContainer .sphereSub.secondary.alpha {top: -50px; } #gridPage #spherePop .container .sphereContainer .sphereSub.secondary.alpha.anim {animation: sph-float2 6.0s infinite ease-in-out; -webkit-animation: sph-float2 6.0s infinite ease-in-out;} #gridPage #spherePop .container .sphereContainer .sphereSub.secondary.beta {top: 50; left: -50px;} #gridPage #spherePop .container .sphereContainer .sphereSub.secondary.beta.anim {animation: sph-float1 5.0s infinite ease-in-out; -webkit-animation: sph-float1 5.0s infinite ease-in-out; } #gridPage #spherePop .container .sphereContainer .sphereSub.secondary .sphere:before { -webkit-filter: blur(3px); } #gridPage #spherePop .container .sphereContainer .sphereSub.secondary .line{ top: 41%; height: 17px;} #gridPage #spherePop .container .sphereContainer .sphereSub.secondary .text{ top: 41%; height: 17px; font-size: 14px;} #gridPage #spherePop .container .sphereContainer .sphereSub.tertiary {z-index: 1; width: 50px; height: 50px; } #gridPage #spherePop .container .sphereContainer .sphereSub.tertiary.alpha { top: -50; left: -50px;} #gridPage #spherePop .container .sphereContainer .sphereSub.tertiary.alpha.anim {animation: sph-float1 3.0s infinite ease-in-out; -webkit-animation: sph-float1 3.0s infinite ease-in-out;} #gridPage #spherePop .container .sphereContainer .sphereSub.tertiary.beta { top: 50; left: -50px;} #gridPage #spherePop .container .sphereContainer .sphereSub.tertiary.beta.anim {animation: sph-float3 4.0s infinite ease-in-out; -webkit-animation: sph-float3 4.0s infinite ease-in-out;} #gridPage #spherePop .container .sphereContainer .sphereSub.tertiary.theta { top: -50; left: 50px; } #gridPage #spherePop .container .sphereContainer .sphereSub.tertiary.theta.anim {animation: sph-float2 4.0s infinite ease-in-out; -webkit-animation: sph-float2 4.0s infinite ease-in-out;} #gridPage #spherePop .container .sphereContainer .sphereSub.tertiary .sphere:before { -webkit-filter: blur(1px); } #gridPage #spherePop .container .sphereContainer .sphereSub.tertiary .line{ top: 36%; height: 13px;} #gridPage #spherePop .container .sphereContainer .sphereSub.tertiary .text{ top: 36%; height: 13px; left: 7%; width: 86%; font-size: 12px; } #gridPage #spherePop .container .sphereContainer .sphereSub.floatstop { -webkit-animation: sph-floatStop 1.0s forwards ease-in-out !important; animation: sph-floatStop 1.0s forwards ease-in-out !important; } #gridPage #spherePop .container .head { z-index: 4; position: absolute; width: 100%; margin-top: -56px; background-color: rgba(0,0,0,0.5); } #gridPage #spherePop .container .head .profileImg{ display: inline-block; width: 45px; margin: 5px 0px 5px 10px; vertical-align: top; } #gridPage #spherePop .container .head .profileInfo{ display: inline-block; margin: 5px 0px 5px 10px; vertical-align: top; } #gridPage #spherePop .container .head .profileInfo .name{ display: block; } #gridPage #spherePop .container .head .profileInfo .locale{ display: block; } @-webkit-keyframes cursor { 0% 100%{ opacity: 1 } 50% { opacity: 0; } } @keyframes cursor { 0% 100%{ opacity: 1 } 50% { opacity: 0; } } @-webkit-keyframes sph-floatStop { 0% { -webkit-transform: translate(0px,0px); } 100% { -webkit-transform: translate(0px,7px); } } @keyframes sph-floatStop { 0% { -webkit-transform: translate(0px,0px);transform: translate(0px,0px); } 100% {-webkit-transform: translate(0px,7px); transform: translate(0px,7px); } } @-webkit-keyframes sph-float1 { 0% 100%{ -webkit-transform: translate(0px,0px); } 50% { -webkit-transform: translate(7px,0px); } } @keyframes sph-float1 { 0% 100%{ -webkit-transform: translate(0px,0px);transform: translate(0px,0px); } 50% {-webkit-transform: translate(7px,0px); transform: translate(7px,0px); } } @-webkit-keyframes sph-float2 { 0% 100%{ -webkit-transform: translate(0px,0px); } 50% { -webkit-transform: translate(0px,7px); } } @keyframes sph-float2 { 0% 100%{ -webkit-transform: translate(0px,0px);transform: translate(0px,0px); } 50% {-webkit-transform: translate(0px,7px); transform: translate(0px,7px); } } @-webkit-keyframes sph-float3 { 0% 100%{ -webkit-transform: translate(0px,0px); } 50% { -webkit-transform: translate(0px,7px); } } @keyframes sph-float3 { 0% 100%{ -webkit-transform: translate(0px,0px);transform: translate(0px,0px); } 50% {-webkit-transform: translate(0px,7px); transform: translate(0px,7px); } } #gridPage #spherePop .container .signupContainer{margin: 15px; } #gridPage #spherePop .container .signupContainer .text{ font-size: 15px; } #gridPage #spherePop .container .signupContainer input{padding: 16px 0px 10px; border-radius: 2px; width: 325px; background: transparent; border: none; border-bottom: 1px solid rgb(246,210,130) ; text-align: center; font-size: 18px; color: rgb(252, 250, 240); outline: none;} #gridPage #spherePop .container .signupContainer .feedback{ height: 10px; margin: 10px 0px; color: #d96741; font-size: 14px; letter-spacing: 1px; } #gridPage #spherePop .container .signupContainer .feedback .preset{ display: none; padding: 5px 7px; margin: 0px 3px; border: 1px solid gray; color: rgb(252, 250, 240); cursor: pointer} #gridPage #spherePop .container .signupContainer .feedback .btn { display: block; width: 72px; margin: 10px auto; padding: 4px 10px; background-color: #d96741; font-size: 14px; letter-spacing: 1px; color: rgb(252, 250, 240); cursor: pointer} #gridPage #navPop { z-index: 30; position: fixed; height: 100%; width: 70%; max-width: 250px; top: 0; left: -70%; overflow: scroll; -webkit-overflow-scrolling: touch !important; text-align: center; background-color: rgba(0,0,0,1); border-top: 1px solid #d96741; -webkit-transform: translate3d(0,0,1px); transform: translate3d(0,0,1px); -webkit-transform: translateZ(1);} #gridPage #navProtect{ display: none; z-index: 29; position: fixed; height: 100%; width: 100%; top: -1px; background-color: rgba(0, 0, 0, 0.5); -webkit-transform: translate3d(0,0,1px); transform: translate3d(0,0,1px); } #gridPage #navPop .opt{ display: table; padding: 20px 0px; width: 100%; text-align: left; font-size: 14px; cursor: pointer; } #gridPage #navPop .opt.padding{padding: 60px 0px;} #gridPage #navPop .opt:click{background-color: #222; } #gridPage #navPop .opt .label{ display: table-cell; width: 80%; vertical-align: middle; color: rgb(252, 250, 240); padding-left: 20px} #gridPage #navPop .opt img{ display: table-cell; width: 30px; margin-left: 20px; vertical-align: middle; border-radius: 2px; cursor: pointer;} #gridPage #navPop .opt .newuser{background: #d96741; width: 25px; height: 25px; display: block; border-radius: 5px; margin-left: 20px; } #gridPage #navPop .opt .label .sign{ margin: 0px 0px 7px; width: 77%; font-size: 16px; cursor: pointer;} #gridPage #navPop .opt .label .sign .bigText{margin-bottom: 5px; font-size: 16px; } #gridPage #navPop .opt.home{ background: linear-gradient(180deg, rgba(217, 103, 65, 1) -150%, rgb(0, 0, 0) 100% ); } #gridPage #navPopd.opt.user .fa{margin-right: 10px; font-size: 21px; color: rgb(217, 103, 65);} #gridPage #navPop .opt.user img{} #gridPage #navPop .opt.user .points{ color: rgb(246,210,130); } #gridPage #registerPop{z-index: 50; display: none; height: 100%; width: 100%; position: fixed; top: 0px; left: 100%; border: none; text-align: center; background-color: rgba(0,0,0, 1); -webkit-transform: translateZ(1);} #gridPage #registerProtect{ display: none; z-index: 49; position: fixed; height: 100%; width: 100%; top: -1px; -webkit-transform: translate3d(0,0,1px); transform: translate3d(0,0,1px); } #gridPage #registerPop .leftarrow{ display: none; z-index:1; position: absolute; left: 15px; top: 15px; width: 15px; height: 25px; } #gridPage #registerPop .container { display: table; position: relative; height: 100%; width: 100%; text-align: center; font-size: 12px; } #gridPage #registerPop .container .buttons { display: table-cell; position: relative; vertical-align: middle; } #gridPage #registerPop .container .buttons .linkDiv{ margin: 20px 10px 10px; } #gridPage #registerPop .container .buttons .linkDiv span{ position: relative; } #gridPage #registerPop .container .buttons .linkDiv .link {color: rgb(204,138,115);} #gridPage #registerPop .container .buttons .block{ height: 325px; width: 325px; margin: auto; } #gridPage #registerPop .container .buttons .block .multiplayer{ display: inline-block; margin: 0px auto 10px; width: 325px; height: 325px; } #gridPage #registerPop .container .buttons .inviter{ display: inline-block; position: absolute; width: 278px; padding: 4px 3px 0px 7px; margin-left: 18px; bottom: 247px; text-align: left; background: #111;} #gridPage #registerPop .container .buttons .inviter img{ display: inline-block; width: 47px; margin: 4px 7px 4px 0px; border-radius: 30px; } #gridPage #registerPop .container .buttons .inviter .text{ display: inline-block; text-align: center; font-size: 18px; vertical-align: top; margin-top: 14px; } #gridPage #registerPop .container .buttons .inviter .text .name{ display: inline-block; max-width: 120px; vertical-align: top; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #4080ff;} #gridPage #registerPop .container .buttons .inviter .text .msg{ display: inline-block; vertical-align: top; color: rgb(252, 250, 240); } #gridPage #registerPop .container .button { display: block; width: auto; margin: 10px auto 20px; max-width: 280px; padding: 12px 10px; border-radius: 4px; font-size: 18px; cursor: pointer;} #gridPage #registerPop .container .button.yes{background-color: #4267B2; } #gridPage #registerPop .container .button .fbtext{ position: relative; display: inline-block; top: -3px; height: 24px; width: 18px; margin: 0px 10px 0px 3px; padding-right: 5px; border-radius: 3px; vertical-align: middle; border: 1px solid white; text-align: right; color: #4267B2; background-color: white;} #gridPage #registerPop .container .button .fblogo{ width: 25px; margin-right: 10px; vertical-align: top;} #gridPage #registerPop .container .button.no .fklogo_w{ margin: -2px 10px 0px 0px; height: 25px; width: 26px; vertical-align: top; } #gridPage #registerPop .container .button.yes .points{ font-weight: bold; color: rgb(246,210,130); } #gridPage #registerPop .container .no.button { padding: 12px 8px; border: 2px solid rgb(252, 250, 240); background-color: #000; font-weight: normal; } #gridPage #registerPop .inputContainer{ display: table; position: absolute; width: 100%; height: 385px; bottom: -385px; background: black; } #gridPage #registerPop .inputContainer .block{ display: table-cell; vertical-align: middle; height: 100%; padding: 0px 15px; } #gridPage #registerPop .inputContainer .block input{ display: block; padding: 15px 0px 10px; width: 325px; margin: auto; background: transparent; border: none; border-bottom: 1px solid gray; text-align: left; font-size: 18px; color: rgb(252, 250, 240); outline: none;} #gridPage #registerPop .inputContainer .block .pw{ position: absolute; left: 375px;} #gridPage #registerPop .inputContainer .block .feedback{ height: 50px; width: 328px; margin: 10px auto 0px; font-size: 14px; letter-spacing: 1px;} #gridPage #registerPop .inputContainer .block .feedback .preset{ display: none; padding: 5px; margin-right: 12px; border: 1px solid gray; color: rgb(252, 250, 240); cursor: pointer;} #gridPage #registerPop .inputContainer .block .feedback .preset:nth-child(3){margin-right: 0px;} #gridPage #registerPop .inputContainer .block .feedback .msg{ display: block; width: 100%; text-align: right; color: gray; } #gridPage #registerPop .inputContainer .block .proceed{ opacity: 0.25; margin-top: 5px; font-size: 16px; font-weight: bold; color: #d96741;} #gridPage #orientPop { display: none; z-index: 60; position: fixed; height: 100%; width: 100%; top: 0; left: 0; margin-top: 45px; text-align: center; background-color: rgba(0,0,0,0.87); -webkit-transform: translate3d(0,0,1px); transform: translate3d(0,0,1px);} #gridPage #orientPop .textBlock{ display: table; position: relative; height: 100%; width: 100%; text-align: center;} #gridPage #orientPop .textBlock div{display: table-row; } #gridPage #orientPop .textBlock span {display: table-cell; vertical-align: middle; font-size: 21px; } #gridPage #orientPop .textBlock img { display: table-cell; vertical-align: middle; width: 50px; margin: auto;} #gridPage #orientPop .container{ display: table-cell; vertical-align: middle; text-align: center; font-size: 12px; } #gridPage #orientPop .container .mobileExp{ display: block; font-size: 50px; } #gridPage #orientPop .container .mobileExp .brand{ font-family: tahoma; font-weight: bold;} #gridPage #orientPop .container .continue{ display: block; margin: 15px 0px 100px; font-size: 24px; } #gridPage #orientPop .container .yesBtn{ display: table; width: 80px; height: 80px; margin: 70px auto; border-radius: 75px; border: 1px solid #222; background-color: rgb(186, 92, 61); font-size: 16px; cursor: pointer;} #gridPage #orientPop .container .yesBtn .text{display: table-cell; vertical-align: middle; } #gridPage #playPop{z-index: 50; position: fixed; height: 115%; width: 100%; left: 100%; top: 0px; border: none; text-align: center; background-color: rgba(24, 27, 23, 0.97); -webkit-transform: translateZ(1);} #gridPage #playPop .playContainer{display: none; margin: 21px 0px;} #gridPage #playPop .playContainer .confirm{ display: none; position: absolute; width: 100%; top: 40%; text-align: center; font-size: 20px; } #gridPage #playPop .playContainer .playTitle{ position: relative; font-size: 18px; border-bottom: 1px solid #d96741; padding-bottom: 10px; } #gridPage #playPop .playContainer .playTitle .title{position: relative; top: -5px; } #gridPage #playPop .playContainer .xmark{position: absolute; top: -15px; left: 5px; padding: 10px; } #gridPage #playPop .playContainer .xmark img{ display: inline-block; margin-right: 10px; width: 14px; vertical-align: top; } #gridPage #playPop .playContainer .desc{display: block; width: 100%; border-bottom: 1px solid #333; padding: 10px 0px; margin-bottom: 15px; font-size: 18px;} #gridPage #playPop .playContainer .desc .voters{ color: rgba(217, 103, 65, 1); } #gridPage #playPop .playContainer .desc .friends{ color: #4080ff;} #gridPage #playPop .playContainer .compareItem {padding: 10px 0px; margin-bottom: 10px; text-align: center; border-bottom: 1px solid #333;} #gridPage #playPop .playContainer .compareItem .content { display: block; position: relative; } #gridPage #playPop .playContainer .compareItem .content .arrow{ position: absolute; top: 8px; width: auto; height: 21px; margin: 0px 15px; padding: 7px 11px; border-radius: 30px; background-color: rgba(217, 103, 65, 0.25); vertical-align: top; } #gridPage #playPop .playContainer .compareItem .content .arrow.right{float: right; right: 0px; } #gridPage #playPop .playContainer .compareItem .content .arrow.left{float: left; left: 0px; opacity: 0.25;} #gridPage #playPop .playContainer .compareItem .content .votes{display: inline-block; vertical-align: top; margin: 8px 17px;} #gridPage #playPop .playContainer .compareItem .content .votes .thumb{width: 32px; height: auto; border-radius: 32px; margin-right: 10px;} #gridPage #playPop .playContainer .compareItem .content .votes .value{position: relative; top: 5px; vertical-align: top; font-size: 18px;} #gridPage #playPop .playContainer .compareItem .content .votes .value.win{font-weight: bold; } #gridPage #playPop .playContainer .compareItem .content .votes.nvotes{color: rgba(206, 81, 105, 1); } #gridPage #playPop .playContainer .compareItem .content .votes.yvotes{color: rgba(81,206,163,1); } #gridPage #playPop .playContainer .compareItem .content img { width: 40px; height: 50px;} #gridPage #playPop .playContainer .compareItem .topicInfo {display: inline-block; padding: 0px 5px 5px; vertical-align: top; font-size: 15px; max-width: 90%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} #gridPage #playPop .playContainer .compareItem .topicInfo .rank{ padding: 0px 7px; color: rgb(252, 250, 240); font-weight: bold;} #gridPage #playPop .playContainer .playBox{ display: none; position: relative; width: 85%; margin: 0px auto; height: 65%; max-width: 750px; padding: 0px 10px 10px; border-radius: 5px; color: rgb(252, 250, 240); } #gridPage #playPop .playContainer .playBox .title{font-size: 16px;} #gridPage #playPop .playContainer .playBox .title .topictitle{font-weight: bold; } #gridPage #playPop .playContainer .playBox .searchBox input{ display: inline-block; max-width: 3200px; width: 100%; padding: 8px 15px; border-radius: 4px; font-size: 14px; letter-spacing: 2px; background-color: rgb(63, 63, 63); border: 0px; color: rgb(252, 250, 240);} #gridPage #playPop .playContainer .playBox .friendsBox{ width: 100%; height: 95%; margin: 0px auto; padding: 0; overflow-y: scroll;} #gridPage #playPop .playContainer .playBox .friendsBox .matchupHelp{ padding: 10px 0px 5px; width: 99%; font-size: 16px; border-bottom: 1px solid gray; text-align: left;} #gridPage #playPop .playContainer .playBox .friendsBox .matchupHelp .subtitle{position: relative; display: inline-block; padding: 5px 7px 4px; vertical-align: top; border-top-left-radius: 4px; border-top-right-radius: 4px; background-color: #333; float: right; font-size: 14px; } #gridPage #playPop .playContainer .playBox .friendsBox .matchupHelp .subtitle .addCount{position: relative; display: inline-block; vertical-align: top; font-size: 12px; cursor: pointer;} #gridPage #playPop .playContainer .playBox .friendsBox .matchupHelp.invite .subtitle .addCount{color: rgb(246,210,130);} #gridPage #playPop .playContainer .playBox .friendsBox .matchupHelp.vote .subtitle .addCount{color: #4080ff;} #gridPage #playPop .playContainer .playBox .friendsBox .matchupHelp .subtitle .addCount .max{ margin-right: 7px; color: #F38E8E; font-size: 14px; } #gridPage #playPop .playContainer .playBox .friendsBox .matchupHelp .subtitle .addCount .int{margin: 0px 2px; font-weight: bold;} #gridPage #playPop .playContainer .playBox .friendsBox .more{ padding: 3px 2px; background: #333; width: 87px; margin: auto; font-size: 12px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; color: gray; cursor: pointer;} #gridPage #playPop .playContainer .playBox .friendsBox .friendsList{ list-style-type: none; text-align: left; width: 100%; padding: 0; margin: 0; border-bottom: 1px solid #333; } #gridPage #playPop .playContainer .playBox .friendsBox .friendsList.flickList{max-height: 99px; overflow: hidden;} #gridPage #playPop .playContainer .playBox .friendsBox .friendsList.inviteList{min-height: 300px;} #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li{ position: relative; font-size: 16px; height: 48px; border-bottom: 1px solid #333; padding-bottom: 2px; margin-bottom: 2px; } #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li .profileImg{ display: inline-block; width: 32px; margin: -2px 10px; position: relative; vertical-align: top; top: 9px; border-radius: 20px;} #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li .profileImg.friend{ box-shadow: 0px 0px 0px 2px rgba(64, 128, 255, .5);} #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li .namepoints { display: inline-block; position: relative; top: 7px; width: 65%; } #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li .namepoints .name{ display: block; width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li .namepoints .points{ display: block; width: auto; font-size: 12px; color: gray;} #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li .namepoints .points .voter{ color: rgba(217, 103, 65, 1);} #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li .namepoints .points .friend{ color: #4080ff;} #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li .namepoints .points .you{ color: rgb(246,210,130);} #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li .namepoints .points .int{font-weight: bold; color: rgb(246,210,130);} #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li .addBtn{ display: inline-block; position: relative; float: right; margin-top: 5px; right: 10px; width: 17%; width: 35px; height: 35px; background-color: rgba(252, 250, 240, 0.1); border-radius: 25px; font-size: 12px; color: rgb(4, 4, 4); cursor: pointer; text-align: center;} #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li .addBtn.added { display: none; background-color: #4080ff;} #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li .addBtn .check{ position: relative; top: 7px; font-size: 14px; font-weight: bold;} #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li .addBtn.added .check{top: 2px; font-size: 20px; color: rgb(246,210,130);} #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li .voteContainer{position: relative; float: right; width: 15%; margin-right: 2px; max-width: 200px; text-align: center; } #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li .hostvotelabel{display: inline-block; margin: 14px 5px 0px 0px; font-size: 15px; color: #BA5B3C;} #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li .vote{ position: relative; padding: 4px 6px 5px; margin: 8px 0px; vertical-align: top; font-size: 23px; border-radius: 25px;} #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li .vote.fa-thumbs-up {color: rgba(81,206,163,1); border: 1px solid rgba(81,206,163,1)} #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li .vote.fa-thumbs-down {color: rgba(206, 81, 105, 1); border: 1px solid rgba(206, 81, 105, 1);} #gridPage #playPop .playContainer .playBox .baseBtn{padding: 8px 7px; font-size: 18px; border-radius: 4px; width: 95%; margin: 7px auto; cursor: pointer;} #gridPage #playPop .playContainer .playBox .inviteBtn{background-color: #4267B2; border: 2px solid #4267B2; color: rgb(252, 250, 240); opacity: 0.25;} #gridPage #playPop .playContainer .playBox .baseBtn img{ position: relative; display: inline-block; width: 25px; vertical-align: top; top: -2px; margin: 0px 10px; } #gridPage #playPop .playContainer .resetconfirm{ padding: 20px; font-size: 21px; } #gridPage #playPop .playContainer .resetconfirm .fa{margin-right: 5px; color: rgb(246,210,130);} #gridPage #playPop .playContainer .resetconfirm .topic{ display: block; padding: 25px 0px; max-width: 330px; margin: auto; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 21px; font-weight: bold;} #gridPage #playPop .playContainer .resetconfirm .details{display: block; padding: 10px; font-size: 14px; } #gridPage #playPop .playContainer .takeme{padding: 10px; width: 145px; margin: auto; border-radius: 4px; border: 2px solid rgb(246,210,130); font-size: 14px;} /* ipad mini and ipad1and2, ipad3and4, galaxyTab, laptopRetina, laptopNon-Retina */ @media screen and (min-device-width: 768px) and (max-device-width: 1024px),screen and (min-width : 436px) { body{ font-size: 14px; } .mqlarge{display: none; position: relative;} .tablet{display: none; position: relative;} .webBG{ position: fixed; height: 100%; width: 100%; top: 0; left: 0; margin-top: 45px; text-align: center; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #333; height: 5px; width: 5px;} ::-webkit-scrollbar { width: 7px; height: 7px; background-color: #333;} ::-webkit-scrollbar-thumb{ background-color: rgba(217, 103, 65, 0.5); box-shadow: inset 2px 0px 10px -5px rgb(252, 250, 240)} #gridPage{background-color: rgba(12,12,12,0.75); min-height: 100%; } #gridPage .header img{ height: 25px;} #gridPage .header .backTopic img{ height: 25px;} #gridPage .header .backTopic .text{margin: 4px;} #gridPage .header span.navIcon{ padding: 10px 5px; } #gridPage .header .influenceHeader .points{position: relative; top: 0px; right: 10px; } #gridPage .header .influenceHeader .caret{ top: 12.5px; right: 1px; width: 11px; height: auto } #gridPage .header .influenceHeader .notify{ z-index: 1; margin-left: -25px; } #gridPage .ui-header h1 {font-size: 24px; } #gridPage .ui-header h1 span {display: inline-block; position: relative; } #gridPage .ui-header h1 span.fa-list-ul{float: left; margin: 5px; font-size: 24px;} #gridPage .ui-header h1 span.Name{position: relative; margin: 3px 5px 0px; color: #333;} #gridPage .ui-header h1 span.fa-hand-o-right{position: relative; top: -1px; font-size: 20px;} #gridPage .ui-header h1 span.points{float: right; margin: 5px 5px 4px; font-size: 21px; color: #cc0000; text-shadow: 0px 0px 5px rgb(219, 119, 119);} #gridPage .ui-header h1 span.fa-search{font-size: 20px;} #gridPage .ui-header h1 .ui-input-text{ display: inline-block; width: 77%; margin-right: 0px;} #gridPage .ui-header h1 .ui-input-text input{ width: 100%; font-size: 16px;} #gridPage .ui-content{position: fixed; max-width: 100%; margin-top: 80px; padding: 0px 0px 0px 0px; overflow-y: scroll; overflow-x: hidden !important;} #gridPage .ui-content .lightSlider .topic .info{ bottom: 0px; } #gridPage .ui-content .lightSlider .topic img{position: relative; width: 100%; height: 350px;} #gridPage .ui-content .grid .topic .info{border-radius: 2px;} #gridPage .ui-content .grid .topic{width: 620px; height: 150px; } #gridPage .ui-content .grid .topic img{width: 620px; height: 150px; border-radius: 2px;} #gridPage .ui-content .grid .topic:nth-child(3n+1){z-index: 1; margin: 25px; width: 345px; height: 150px;} #gridPage .ui-content .grid .topic:nth-child(3n+2){margin: 25px 0px 0px 0px; width: 345px; height: 150px;} #gridPage .ui-content .grid .topic:nth-child(3n+3){z-index: 2; margin: 0px 25px; width: 715px; height: 150px; } #gridPage .ui-content .grid .topic:nth-child(3n+1) img{width: 345px; height: 150px;} #gridPage .ui-content .grid .topic:nth-child(3n+2) img{width: 345px; height: 150px;} #gridPage .ui-content .grid .topic:nth-child(3n+3) img{width: 345px; height: 150px;} #gridPage .ui-content .grid .topic .info{font-size: 20px; } #gridPage #registerPop .container .button { width: 380px; max-width: 380px; padding: 12px 0px;} #gridPage #registerPop .container .no.button { width: 376px; padding: 12px 0px; } #gridPage #topicPop {z-index: 8; position: fixed; right: 0; left: 100%; margin-right: auto; margin-left: auto; margin-top: 48px; min-height: 10em; overflow-y: auto; background-color: rgba(0,0,0,0); } #gridPage #topicPop .container .prog .bar{ height: 3px;} #gridPage #topicPop .container .topicname{ margin-left: 0px; padding: 0px 15px; font-size: 24px;} #gridPage #topicPop .container .topicname .name{margin-top: 30px; padding: 15px 0px;} #gridPage #topicPop .container .topicname .xmark { display: none !important; margin-top: 10px; } #gridPage #topicPop .container .cardstack .card .votehandle{ width: auto; left: 40% } #gridPage #topicPop .container .cardstack .card .label .text > .title .subject{ padding: 10px; font-size: 24px; } #gridPage #topicPop .container .cardstack .card .label .text > .title .desc { display: block; padding: 0px 10px 10px; font-size: 21px; } #gridPage #topicPop .container .topicSummary .table{ width: 100%;} #gridPage #topicPop .container .topicSummary .titleRow .congratCell .subtitle { margin: 50px 0px 30px; font-size: 24px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .match{font-size: 18px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .match .label { margin: 0px 0px 3px 30px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .match .text { font-size: 18px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .match .chart{ position: relative; display: inline-block; top: 4px } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .match .chart .percent{ position: absolute; top: 10px; left: 47px; font-size: 18px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .points{font-size: 17px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .points .value{font-size: 30px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .fbshare{ width: 70%;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .fbshare .text{ top: -10px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .fbshare .points{ top: -8px; margin-left: 7px; width: 40px; font-weight: bold; text-align: left; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .itemHeader { font-size: 18px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .itemContainer .item .rank { margin: 5px 12px 15px; font-size: 21px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .itemContainer .item .content .cardimgc { width: auto; height: 180px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .itemContainer .item .content .votes { position: relative; margin: 5px 50px 5px;} #gridPage #topicPop .container .topicSummary .relatedRow { height: 225px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .itemContainer .item{ padding: 20px 0px;} #gridPage #topicPop .container .topicSummary .relatedRow .relatedCell .item { margin: 2px 0px 4px 4px; } #gridPage #topicPop .container .topicSummary .relatedRow .relatedCell .item img{width: 715px; height: 292.5px;} #gridPage #topicPop .container .topicSummary .relatedRow .relatedCell .item .info { height: 293px; width: 715px; } #gridPage #topicPop .container .topicSummary .relatedRow .relatedCell .item .info .align{ display: table-cell; vertical-align: bottom; padding: 15px; font-size: 24px; } #gridPage #topicPop .container .topicSummary .relatedRow .relatedCell .more{ width: 94%; } #gridPage #topicPop .container .topicSummary .relatedTitleRow { font-size: 24px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .itemContainer .item .stats .rank .subject{ max-width: 475px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .itemContainer .item .stats .rank.winner .subject{max-width: 450px; } #gridPage #debPop .debContainer .postContainer .argContainer .arg .rich{ margin-left: 4px !important;} #gridPage #topicPop .container .gutContainer{ height: 8.5%; padding: 10px 15px 0px; margin-top: 10px; } #gridPage #topicPop .container .gutContainer .button span {position: relative; top: 15px; font-size: 15px; font-weight: bold;} #gridPage #topicPop .container .gutContainer .gutYay{margin-left: 15px; float: none; right: 0px; color: rgba(81,206,163,1); } #gridPage #topicPop .container .gutContainer .gutNay{margin-right: 15px; float: none; left: 0px; color: rgba(206, 81, 105, 1);} #gridPage #topicPop .container .statContainer .bar{background-color: transparent;} #gridPage #topicPop .container .relTitle{ font-size: 24px; } #gridPage #topicPop .container .relContainer .item img{width: 715px; height: 292.5px;} #gridPage #topicPop .container .relContainer .item .info { height: 293px; width: 715px; } #gridPage #topicPop .container .relContainer .item .info .align{ display: table-cell; vertical-align: bottom; padding: 15px; font-size: 24px; } #gridPage #playPop .playContainer .playTitle { position: relative; top: -5px; font-size: 24px; } #gridPage #playPop .playContainer .compareItem { margin-bottom: 15px; } #gridPage #playPop .playContainer .compareItem .topicInfo { padding: 15px 0px 10px; font-size: 21px; } #gridPage #playPop .playContainer .compareItem .content .votes{ margin: 8px 50px; } #gridPage #playPop .playContainer .compareItem .content .votes .thumb { width: 45px; bordere-radius: 45px; } #gridPage #playPop .playContainer .compareItem .content .votes .value { top: 10px; left: 5px; font-size: 21px; } #gridPage #playPop .playContainer .compareItem .content .arrow { top: 16px; } #gridPage #playPop .playContainer .playBox{ height: 90% } #gridPage #playPop .playContainer .playBox .searchBox input { max-width: none; width: 97%; font-size: 18px; } #gridPage #playPop .playContainer .playBox .friendsBox{ margin-top: 10px; } #gridPage #playPop .playContainer .playBox .friendsBox .matchupHelp{ font-size: 18px; } #gridPage #playPop .playContainer .playBox .friendsBox .matchupHelp .subtitle .addCount{ font-size: 16px; } #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li { height: 70px; padding-top: 4px; font-size: 18px; } #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li .profileImg{ height: 50px; width: 50px; } #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li .addBtn { width: 45px; height: 45px; right: 25px; margin-top: 10px; } #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li .addBtn.added .check { top: 5px; font-size: 24px; } #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li .addBtn .check { font-size: 21px; } #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li .namepoints .points { font-size: 15px; } #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li .vote{ padding: 6px 8px 7px; margin-top: 10px; font-size: 32px; } #gridPage #registerPop{ top: 0px; } #gridPage #navPop::-webkit-scrollbar-thumb{ background-color: rgba(252, 250, 240, .5) !important;} #gridPage #pointsPop::-webkit-scrollbar-thumb{ background-color: rgba(252, 250, 240, .5) !important;} #gridPage #navPop{ margin-top: 44px; } #gridPage #pointsPop{ margin-top: 44px; } } /* web */ @media only screen and (min-width : 1100px) { h1{ font-size: 27px } h2{ font-size: 24px; } h3{ font-size: 21px } h4{ font-size: 18px } p,ol > li{ font-size: 16px; } .mqlarge{display: none; position: relative;} .web{display: none; position: relative;} .webBG{ position: fixed; height: 100%; width: 100%; top: 0; left: 0; margin-top: 45px; text-align: center; } #gridPage{background-color: rgba(12,12,12,0.75); min-height: 100%; } #gridPage .header{ padding: 0px; background-color: rgba(12,12,12,0.75); border-bottom: 1px solid #d96741;} #gridPage .header img{ height: 25px;} #gridPage .header .backTopic{ display: none !important; top: 7px; } #gridPage .header .backTopic img{ height: 25px;} #gridPage .header .backTopic .text{margin: 4px;} #gridPage .header .centerContainer{ max-width: 1100px; margin: auto; text-align: left; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } #gridPage .header .centerContainer .homeLogo { display: inline-block; vertical-align: top; padding: 14px 2px 14px 0px;} #gridPage .header .centerContainer #navPop{ position: relative; display: inline-block; left: 0px; vertical-align: top; height: 56px; width: auto; max-width: 986px; margin-top: 0px; overflow: hidden; overflow-y: hidden; background-color: transparent; box-shadow: none; } #gridPage .header .centerContainer #navPop .opt{ display: inline-block; vertical-align: top; width: 95px; padding: 19px 0px; text-align: center; border-bottom: 0px; box-shadow: none;} #gridPage .header .centerContainer #navPop .opt .label{display: block; width: 100%; padding-left: 0px} #gridPage .header .centerContainer #navPop .opt.home{display: none; } #gridPage .header .centerContainer #navPop .opt.user{display: none; } #gridPage .header .centerContainer #navPop .opt.faq{display: none; } #gridPage .header span.navIcon{ display: none !important;} #gridPage .header .influenceHeader .points{position: relative; top: 4px; right: 10px; font-size: 21px; } #gridPage .header .influenceHeader .caret{ top: 18px; height: auto; right: 0px;} #gridPage .header .influenceHeader .notify{ z-index: 1; top: 7px; margin-left: -35px; font-size: 16px; } #gridPage .actionContainer{display: none !important; } #gridPage .ui-content{position: fixed; height: 97%; max-width: 100%; padding: 0px; margin-top: 53px; overflow-y: scroll; overflow-x: visible !important;} #gridPage .ui-content .slider{position: relative; max-width: 1100px; margin: auto; } #gridPage .ui-content .lightSlider .topic { max-height: 600px; } #gridPage .ui-content .lightSlider .topic .info{ bottom: 0px; font-size: 47px; } #gridPage .ui-content .lightSlider .topic .info .aligncenter{ padding: 5px 15px; } #gridPage .ui-content .lightSlider .topic .info .status{ padding: 15px; font-size: 27px; } #gridPage .ui-content .lightSlider .topic .info .votes { margin-left: 20px; } #gridPage .ui-content .lightSlider .topic img{display: inline-block; position: relative; width: 1099px; height: 600px; vertical-align: top; } #gridPage .ui-content .lSSlideOuter .lSAction>.lSPrev{ left: 0} #gridPage .ui-content .lSSlideOuter .lSAction>.lSNext{ right: 0} #gridPage .ui-content .lSSlideOuter .lSAction>a{background-color: rgba(217,103,65,.5); height: auto; top: 50%; width: 25px; padding: 10px;} #gridPage .ui-content .lSSlideOuter .lSPager.lSpg{ padding-bottom: 20px; margin: 20px 0px 25px !important; border-bottom: 1px solid rgba(217, 103, 65, 0.5); } #gridPage .ui-content .grid{margin: 0px auto 0px; overflow-y: hidden; text-align: center; max-width: 1100px; min-height: 500px} #gridPage .ui-content .grid .topic img{border-radius: 2px;} #gridPage .ui-content .grid .topic:nth-child(3n+1){z-index: 1; position: relative; 1; margin: 0px 25px 25px 0px; width: 350px; height: 150px;} #gridPage .ui-content .grid .topic:nth-child(3n+2){margin: 0px 25px 25px 0px; width: 350px; height: 150px;} #gridPage .ui-content .grid .topic:nth-child(3n+3){margin: 0px 0px 25px 0px; width: 350px; height: 150px;} #gridPage .ui-content .grid .topic:nth-child(3n+1) img{width: 350px; height: 150px;} #gridPage .ui-content .grid .topic:nth-child(3n+2) img{width: 350px; height: 150px;} #gridPage .ui-content .grid .topic:nth-child(3n+3) img{width: 350px; height: 150px;} #gridPage .ui-content .grid .topic .info{width: 100%; height: 100%; text-align: center; border-radius: 2px; font-size: 21px; font-weight: normal; word-spacing: 1px} #gridPage #welcomePop .container .sphereContainer{ background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .2) 25%, rgba(255, 255, 255, .2) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .2) 75%, rgba(255, 255, 255, .2) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .2) 25%, rgba(255, 255, 255, .2) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .2) 75%, rgba(255, 255, 255, .2) 76%, transparent 77%, transparent); } #gridPage #registerPop .container .buttons .multiplayer{ width: 425px; } #gridPage #registerPop .container .button { width: 380px; max-width: 380px; padding: 12px 0px; } #gridPage #registerPop .container .no.button { width: 376px; padding: 12px 0px;} #gridPage #topicPopProtect{z-index: 7; } #gridPage #topicPop {z-index: 9; position: fixed; right: 0; left: 100%; max-width: 1100px; margin-right: auto; margin-left: auto; margin-top: 52px; width: 90%; min-height: 10em; overflow-y: auto; background-color: rgba(0,0,0,0); box-shadow: 20px 0px 25px -20px #111, -20px 0px 25px -20px #111; border-right: 1px solid #111; border-left: 1px solid #111; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } #gridPage #topicPop .container { display: block; margin: auto; background: linear-gradient(0deg, rgba(217, 103, 65, 1) -25%, rgb(0, 0, 0) 20% );} #gridPage #topicPop .container .prog{position: relative; width: 100%; margin: auto; top: 3px; padding: 0px 0px; font-size: 14px; } #gridPage #topicPop .container .prog .bar{ height: 5px; background-color: rgba(246, 210, 130, 0.75); } #gridPage #topicPop .container .prog .status { margin-top: 2px} #gridPage #topicPop .container .prog .status .flicks{display: inline-block; vertical-align: top;} #gridPage #topicPop .container .prog .status .text{display: inline-block; vertical-align: top;} #gridPage #topicPop .container .topicname .xmark { display: block !important; margin: 10px 38px 0px 0px; } #gridPage #topicPop .container .cardstack .card .votehandle{ left: 44% } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .itemHeader { font-size: 18px; } #gridPage #topicPop .container .topicSummary .scoreRow { height: 7%;} #gridPage #topicPop .container .topicSummary .scoreRow .scoreCell .text{ padding-left: 184px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .match{ padding: 15px 0px 20px; font-size: 17px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .match .chart{ position: relative; display: inline-block; top: 5px } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .match .chart .percent{ position: absolute; top: 10px; left: 41px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .points{font-size: 17px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .points .value{font-size: 30px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .fbshare{ width: 85%;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .fbshare .text{ top: -10px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .fbshare .points{ top: -8px; margin-left: 7px; width: 50px; font-weight: bold; text-align: left; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .fbtext { text-align: center;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .itemContainer .item{ padding: 20px 0px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .itemContainer .item .content .votes .you{ font-size: 21px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .itemContainer .item .content .cardimg { width: auto; height: 180px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .itemContainer .item .content .votes { position: relative; margin: 5px 50px 5px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .itemContainer .item .stats .rank .subject{ max-width: 475px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .itemContainer .item .rank{ margin: 15px 25px 25px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .itemContainer .item .stats .rank.winner .subject{max-width: 450px; } #gridPage #topicPop .container .topicSummary .relatedRow .relatedCell .item img{ width: 960px; height: 400px;} #gridPage #topicPop .container .topicSummary .relatedRow .relatedCell .item .info{ width: 960px; height: 400px;} #gridPage #topicPop .container .topicSummary .relatedRow .relatedCell .more{ width: 85.5%} #gridPage #topicPop .container .gutContainer{height: 8.5%} #gridPage #topicPop .container .gutContainer .button span {position: relative; top: 15px; font-size: 15px; font-weight: bold;} #gridPage #topicPop .container .gutContainer .gutYay{margin-left: 15px; float: none; right: 0px; color: rgba(81,206,163,1); } #gridPage #topicPop .container .gutContainer .gutNay{margin-right: 15px; float: none; left: 0px; color: rgba(206, 81, 105, 1);} #gridPage #topicPop .container .relContainer .item img{width: 960px; height: 400px;} #gridPage #topicPop .container .relContainer .item .info { width: 960px; height: 400px; } #gridPage #topicPop .container .statContainer .bar{background-color: transparent;} #gridPage #playPop .playContainer .playBox .subtitle{ top: 0px; } #gridPage #registerPop{ top: 0px; } #gridPage #pointsPop{ margin-top: 57px; overflow: auto; background-color: #141516; box-shadow: none;} #gridPage #pointsPop .seg .segSub.total{ border-top: 0px; } } /* galaxys4 */ @media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3){ .mqlarge{display: none; position: relative;} .galaxy4{display: none; position: relative;} #gridPage .header .influenceHeader{ position: absolute; top: 12px;} #gridPage .header .influenceHeader .caret{ top: 5px; } #gridPage .ui-content{padding: 0px 0px 0px 0px; } #gridPage .ui-content .lightSlider .topic img{position: relative; width: 415px;} #gridPage .ui-content .grid .topic{width: 415px; height: 150px; } #gridPage .ui-content .grid .topic img{width: 415px; height: 150px; } /* #gridPage .ui-content .grid .topic:nth-child(3n+1){top: -3px; left: -1px; margin: 0px 0px 0px 0px; width: 180px; height: 200px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+2){top: -3px; margin: 0px; width: 180px; height: 200px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+3){left: -1px; margin: -5px 0px 4px; width: 415px; height: 200px; } */ /* #gridPage .ui-content .grid .topic:nth-child(3n+1) img{width: 180px; height: 200px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+2) img{width: 180px; height: 200px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+3) img{width: 415px; height: 200px; } */ #gridPage .ui-content .grid .topic .info{ font-size: 20px; } #gridPage #topicPop .container .topicname{ font-size: 18px; } #gridPage #topicPop .container .topicname .xmark { margin-top: 2px; } #gridPage #topicPop .container .gutContainer .button span {position: relative; top: 16px; font-size: 14px; font-weight: bold;} #gridPage #topicPop .container .topicSummary .relatedRow .relatedCell .item img{width: 115px; height: 115px;} #gridPage #topicPop .container .topicSummary .relatedRow .relatedCell .item .info { height: 115px; width: 115px; } #gridPage #playPop .playContainer .playBox .subtitle .searchBox input { width: 93% } #gridPage #playPop .playContainer .playBox .subtitle{ right: 0px; } #gridPage #pointsPop{ margin-top: 45px;} #gridPage #navPop{margin-top: 45px;} } /* galaxys6 */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4){ .mqlarge{display: none; position: relative;} .galaxy6{display: none; position: relative;} #gridPage .header .influenceHeader .caret{ top: 5px; } #gridPage .ui-content{padding: 0px 0px 0px 0px; } #gridPage .ui-content .lightSlider .topic img{position: relative; width: 365px;} #gridPage .ui-content .grid .topic{ width: 365px; height: 150px; } #gridPage .ui-content .grid .topic img{width: 365px; height: 150px; } /* #gridPage .ui-content .grid .topic:nth-child(3n+1){top: -3px; left: -1px; margin: 0px 0px 0px 0px; width: 180px; height: 200px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+2){top: -3px; margin: 0px; width: 180px; height: 200px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+3){left: -1px; margin: -5px 0px 4px; width: 365px; height: 200px; } */ /* #gridPage .ui-content .grid .topic:nth-child(3n+1) img{width: 180px; height: 200px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+2) img{width: 180px; height: 200px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+3) img{width: 365px; height: 200px; } */ #gridPage .ui-content .grid .topic .info{ font-size: 20px; } #gridPage #topicPop .container .topicname{ font-size: 18px; } #gridPage #topicPop .container .topicname .xmark { margin-top: 2px; } #gridPage #topicPop .container .gutContainer .button span {position: relative; top: 16px; font-size: 14px; font-weight: bold;} #gridPage #topicPop .container .topicSummary .relatedRow .relatedCell .item img{width: 360px; height: 150px;} #gridPage #topicPop .container .topicSummary .relatedRow .relatedCell .item .info { height: 150px; width: 360px; } #gridPage #topicPop .container .relContainer .item img{width: 360px; height: 150px;} #gridPage #topicPop .container .relContainer .item .info { height: 150px; width: 360px; } #gridPage #playPop .playContainer .playBox .subtitle .searchBox input { width: 93% } #gridPage #playPop .playContainer .playBox .subtitle{ right: 0px; } #gridPage #pointsPop{ margin-top: 45px;} #gridPage #navPop{margin-top: 45px;} } /* galaxys5 */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3){ .mqlarge{display: none; position: relative;} .galaxy5{display: none; position: relative;} #gridPage .header .influenceHeader .caret{ top: 5px; } #gridPage .ui-content{padding: 0px 0px 0px 0px; } #gridPage .ui-content .lightSlider .topic img{position: relative; width: 365px;} #gridPage .ui-content .grid .topic{ width: 365px; height: 150px; } #gridPage .ui-content .grid .topic img{width: 365px; height: 150px; } /* #gridPage .ui-content .grid .topic:nth-child(3n+1){top: -3px; left: -1px; margin: 0px 0px 0px 0px; width: 180px; height: 200px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+2){top: -3px; margin: 0px; width: 180px; height: 200px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+3){left: -1px; margin: -5px 0px 4px; width: 365px; height: 200px; } */ /* #gridPage .ui-content .grid .topic:nth-child(3n+1) img{width: 180px; height: 200px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+2) img{width: 180px; height: 200px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+3) img{width: 365px; height: 200px; } */ #gridPage .ui-content .grid .topic .info{font-size: 20px; } #gridPage #topicPop .container .topicname{ font-size: 18px; } #gridPage #topicPop .container .topicname .xmark { margin-top: 2px; } #gridPage #topicPop .container .gutContainer .button span {position: relative; top: 16px; font-size: 14px; font-weight: bold;} #gridPage #topicPop .container .topicSummary .relatedRow .relatedCell .item img{width: 360px; height: 150px;} #gridPage #topicPop .container .topicSummary .relatedRow .relatedCell .item .info { height: 150px; width: 360px; } #gridPage #topicPop .container .relContainer .item img{width: 360px; height: 150px;} #gridPage #topicPop .container .relContainer .item .info { height: 150px; width: 360px; } #gridPage #playPop .playContainer .playBox .subtitle .searchBox input { width: 93% } #gridPage #playPop .playContainer .playBox .subtitle{ right: 0px; } #gridPage #pointsPop{ margin-top: 45px;} #gridPage #navPop{margin-top: 45px;} } /* nexus5X */ @media screen and (device-width: 411px) and (device-height: 731px) and (-webkit-min-device-pixel-ratio: 2){ .mqlarge{display: none; position: relative;} .nexus5X{display: none; position: relative;} #gridPage .ui-content{padding: 0px 0px 0px 0px; } #gridPage #topicVoteHow .votehow .heartContainer .fb-like{top: -20px;} #gridPage .ui-content .lightSlider .topic img{position: relative; width: auto;} #gridPage .ui-content .grid .topic{width: 411px; height: 150px; } #gridPage .ui-content .grid .topic img{width: 411px; height: 150px; } /* #gridPage .ui-content .grid .topic:nth-child(3n+1){top: -3px; left: -1px; margin: 0px 0px 0px 0px; width: 207px; height: 225px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+2){top: -3px; margin: 0px; width: 207px; height: 225px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+3){left: -1px; margin: -5px 0px 4px; width: 415px; height: 225px; } */ /* #gridPage .ui-content .grid .topic:nth-child(3n+1) img{width: 207px; height: 225px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+2) img{width: 207px; height: 225px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+3) img{width: 415px; height: 225px; } */ #gridPage .ui-content .grid .topic .info{ font-size: 20px; } #gridPage #topicPop .container .topicname{ font-size: 18px; } #gridPage #topicPop .container .topicSummary .relatedRow .relatedCell .item img{width: 400px; height: 190px;} #gridPage #topicPop .container .topicSummary .relatedRow .relatedCell .item .info { height: 190px; width: 400px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .itemContainer .item .comparisons .player .vote .compare{ padding: 4px 8px; } #gridPage #topicPop .container .relContainer .item img{width: 400px; height: 190px;} #gridPage #topicPop .container .relContainer .item .info { height: 190px; width: 400px; } #gridPage #playPop .playContainer .playBox .subtitle{ right: 21px; } } /* nexus6P */ @media screen and (device-width: 435px) and (device-height: 773px) and (-webkit-min-device-pixel-ratio: 2){ .mqlarge{display: none; position: relative;} .nexus6P{display: none; position: relative;} #gridPage .ui-content{padding: 0px 0px 0px 0px; } #gridPage #topicVoteHow .votehow .heartContainer .fb-like{top: -20px;} #gridPage .ui-content .lightSlider .topic img{position: relative; width: auto;} #gridPage .ui-content .grid .topic{width: 435px; height: 150px; } #gridPage .ui-content .grid .topic img{width: 435px; height: 150px; } /* #gridPage .ui-content .grid .topic:nth-child(3n+1){top: -3px; left: -1px; margin: 0px 0px 0px 0px; width: 207px; height: 225px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+2){top: -3px; margin: 0px; width: 207px; height: 225px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+3){left: -1px; margin: -5px 0px 4px; width: 415px; height: 225px; } */ /* #gridPage .ui-content .grid .topic:nth-child(3n+1) img{width: 207px; height: 225px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+2) img{width: 207px; height: 225px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+3) img{width: 415px; height: 225px; } */ #gridPage .ui-content .grid .topic .info{font-size: 20px; } #gridPage #topicPop .container .topicname{ font-size: 18px; } #gridPage #topicPop .container .topicSummary .relatedRow .relatedCell .item img{width: 400px; height: 190px;} #gridPage #topicPop .container .topicSummary .relatedRow .relatedCell .item .info { height: 190px; width: 400px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .itemContainer .item .comparisons .player .vote .compare{ padding: 4px 8px; } #gridPage #topicPop .container .relContainer .item img{width: 400px; height: 190px;} #gridPage #topicPop .container .relContainer .item .info { height: 190px; width: 400px; } #gridPage #playPop .playContainer .playBox .subtitle{ right: 21px; } } /* iphone6plus */ @media screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) { .mqlarge{display: none; position: relative;} .iphone6plus{display: none; position: relative;} #gridPage .ui-content{padding: 0px 0px 0px 0px; } #gridPage #topicVoteHow .votehow .heartContainer .fb-like{top: -20px;} #gridPage .ui-content .lightSlider .topic img{position: relative; width: 415px;} #gridPage .ui-content .grid .topic{width: 415px; height: 150px; } #gridPage .ui-content .grid .topic img{width: 415px; height: 150px; } /* #gridPage .ui-content .grid .topic:nth-child(3n+1){top: -3px; left: -1px; margin: 0px 0px 0px 0px; width: 207px; height: 225px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+2){top: -3px; margin: 0px; width: 207px; height: 225px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+3){left: -1px; margin: -5px 0px 4px; width: 415px; height: 225px; } */ /* #gridPage .ui-content .grid .topic:nth-child(3n+1) img{width: 207px; height: 225px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+2) img{width: 207px; height: 225px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+3) img{width: 415px; height: 225px; } */ #gridPage .ui-content .grid .topic .info{font-size: 20px; } #gridPage #topicPop .container .topicname{ font-size: 18px; } #gridPage #topicPop .container .topicSummary .relatedRow .relatedCell .item img{width: 400px; height: 190px;} #gridPage #topicPop .container .topicSummary .relatedRow .relatedCell .item .info { height: 190px; width: 400px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .itemContainer .item .comparisons .player .vote .compare{ padding: 4px 8px; } #gridPage #debPop .debContainer .postContainer .argContainer .arg .rich{ margin-left: 4px !important;} #gridPage #topicPop .container .relContainer .item img{width: 400px; height: 190px;} #gridPage #topicPop .container .relContainer .item .info { height: 190px; width: 400px; } #gridPage #playPop .playContainer .playBox .subtitle{ right: 21px; } } /* iphone6 */ @media screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2){ .iphone6{display: none; position: relative;} .mqlarge{display: none; position: relative;} #gridPage .ui-content{padding: 0px 0px 0px 0px; } #gridPage #topicVoteHow .votehow .heartContainer .fb-like{top: -20px;} #gridPage .ui-content .lightSlider .topic img{position: relative; width: 376px;} #gridPage .ui-content .grid .topic{width: 376px; height: 150px; } #gridPage .ui-content .grid .topic img{width: 376px; height: 150px; } /* #gridPage .ui-content .grid .topic:nth-child(3n+1){top: -3px; left: -1px; margin: 0px 0px 0px 0px; width: 187px; height: 200px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+2){top: -3px; margin: 0px; width: 187px; height: 200px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+3){left: -1px; margin: -5px 0px 4px; width: 376px; height: 225px; } */ /* #gridPage .ui-content .grid .topic:nth-child(3n+1) img{width: 187px; height: 200px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+2) img{width: 187px; height: 200px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+3) img{width: 376px; height: 225px; } */ #gridPage .ui-content .grid .topic .info{ font-size: 20px; } #gridPage #topicPop .container .topicname{ font-size: 18px; } #gridPage #topicPop .container .topicSummary .relatedRow .relatedCell .item img{width: 360px; height: 150px;} #gridPage #topicPop .container .topicSummary .relatedRow .relatedCell .item .info { height: 150px; width: 360px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .itemContainer .item .comparisons .player .vote .compare{ padding: 4px 8px; } #gridPage #debPop .debContainer .postContainer .argContainer .arg .rich{ margin-left: 4px !important; } #gridPage #topicPop .container .relContainer .item img{width: 360px; height: 150px;} #gridPage #topicPop .container .relContainer .item .info { height: 150px; width: 360px; } } /* iphone5 */ @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) { .iphone5{display: none; position: relative;} .mqsmall{display: none; position: relative;} #gridPage .header span.points{ padding-top: 0px;} #gridPage .ui-content{padding: 0px 0px 0px 0px; } #gridPage .ui-content .lightSlider .topic img{position: relative; width: 321px;} #gridPage .ui-content .grid .topic{ width: 321px; height: 150px; } #gridPage .ui-content .grid .topic img{width: 321px; height: 150px; } /* #gridPage .ui-content .grid .topic:nth-child(3n+1){top: -4px; left: -1px; margin: 0px 0px 0px 0px; width: 160px; height: 177px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+2){top: -4px; margin: 0px; width: 160px; height: 177px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+3){left: -1px; margin: -8px 0px 5px; width: 321px; height: 177px; } */ /* #gridPage .ui-content .grid .topic:nth-child(3n+1) img{width: 160px; height: 177px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+2) img{width: 160px; height: 177px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+3) img{width: 321px; height: 177px; } */ #gridPage .ui-content .grid .topic .info{font-size: 20px; } #gridPage #topicVoteHow .votehow .heartContainer .fb-like{top: -20px;} #gridPage #topicPop .container .cardstack {height: 53%; margin-bottom: 0px;} #gridPage #topicPop .container .topicname{ font-size: 17px; } #gridPage #topicPop .container .gutContainer { margin-bottom: 10px;} #gridPage #topicPop .container .gutContainer .button{width: 40px; height: 40px; } #gridPage #topicPop .container .gutContainer .button .text {position: relative; top: 8px; font-size: 18px; font-weight: normal;} #gridPage #topicPop .container .gutContainer .button .points{ display: block; position: absolute; left: 13px; top: -21px; opacity: 1; color: rgb(246,210,130); } #gridPage #topicPop .container .gutContainer .button .fa{position: relative; top: 5px; font-size: 27px; } #gridPage #topicPop .container .gutContainer .gutShare{ margin: 0px 20px;} #gridPage #topicPop .container .topicSummary .relatedRow .relatedCell .item img{width: 100px; height: 100px;} #gridPage #topicPop .container .topicSummary .relatedRow .relatedCell .item .info { height: 100px; width: 100px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .itemContainer .item .content .cardimg{ border-radius: 2px; width: 42px; height: 54px; } #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .itemContainer .item .comparisons .player .vote .compare{ padding: 4px 8px; } #gridPage #debPop .debContainer .postContainer .argContainer .arg .rich{ margin-left: 4px !important; } #gridPage #topicPop .container .relContainer .item img{width: 300px; height: 130px;} #gridPage #topicPop .container .relContainer .item .info { height: 130px; width: 300px; } #gridPage #playPop .playContainer .playTitle{font-size: 24px;} #gridPage #playPop .playContainer .playBox .friendsBox .friendsList.flickList{max-height: 97px} #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li .namepoints { width: 56%; } #gridPage #playPop .playContainer .compareItem .content .arrow{ margin: 0px 5px; width: auto; height: 30px; vertical-align: top; } #gridPage #playPop .playContainer .compareItem .content .votes{ margin: 8px 15px;} #gridPage #pointsPop .seg{ font-size: 11px;} #gridPage #pointsPop .seg .segSub.title{ font-size: 12px;} #gridPage #playPop .playContainer .playBox .baseBtn{padding: 7px 7px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .itemContainer .item .content .compare {margin: 60px 0px 5px; font-size: 14px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .itemContainer .item .content .cardimg {position: relative; top: 30px;} } /* iphone4 */ @media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2) { .iphone4{display: none; position: relative;} .mqsmall{display: none; position: relative;} #gridPage .ui-content{padding: 0px 0px 0px 0px; } #gridPage #topicVoteHow .votehow .heartContainer .fb-like{top: -20px;} #gridPage .ui-content .lightSlider .topic img{position: relative; width: 321px;} #gridPage .ui-content .grid .topic{ width: 321px; height: 150px; } #gridPage .ui-content .grid .topic img{width: 321px; height: 150px;} /* #gridPage .ui-content .grid .topic:nth-child(3n+1){top: -3px; left: -1px; margin: 0px 0px 0px 0px; width: 160px; height: 177px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+2){top: -3px; margin: 0px; width: 160px; height: 177px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+3){left: -1px; margin: -5px 0px 4px; width: 321px; height: 179px; } */ /* #gridPage .ui-content .grid .topic:nth-child(3n+1) img{width: 160px; height: 177px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+2) img{width: 160px; height: 177px;} */ /* #gridPage .ui-content .grid .topic:nth-child(3n+3) img{width: 321px; height: 179px;} */ #gridPage .ui-content .grid .topic .info{ font-size: 16px; } #gridPage #topicPop .container .cardstack {height: 52%; margin-bottom: 0px;} #gridPage #topicPop .container .gutContainer { margin-bottom: 10px;} #gridPage #topicPop .container .gutContainer .button{width: 40px; height: 40px; } #gridPage #topicPop .container .gutContainer .button span {top: 10px; font-size: 13px;} #gridPage #topicPop .container .gutContainer .gutShare{ margin: 0px 20px;} #gridPage #topicPop .container .topicname{ font-size: 17px; } #gridPage #topicPop .container .topicSummary .relatedRow .relatedCell .item img{width: 100px; height: 100px;} #gridPage #topicPop .container .topicSummary .relatedRow .relatedCell .item .info { height: 100px; width: 100px; } #gridPage #debPop .debContainer .postContainer .argContainer .arg .rich{ margin-left: 4px !important;} #gridPage #topicPop .container .relContainer .item img{width: 300px; height: 130px;} #gridPage #topicPop .container .relContainer .item .info { height: 130px; width: 300px; } #gridPage #pointsPop .seg{ font-size: 11px;} #gridPage #pointsPop .seg .segSub.title{ font-size: 12px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .itemContainer .item .content .compare {margin: 60px 0px 5px; font-size: 14px;} #gridPage #playPop .playContainer .playTitle{font-size: 24px;} #gridPage #playPop .playContainer .playBox .friendsBox .friendsList.flickList{max-height: 97px} #gridPage #playPop .playContainer .playBox .friendsBox .friendsList li .namepoints { width: 56%; } #gridPage #playPop .playContainer .compareItem .content .arrow{ margin: 0px 5px; width: auto; height: 30px; vertical-align: top; } #gridPage #playPop .playContainer .compareItem .content .votes{ margin: 8px 15px;} #gridPage #playPop .playContainer .playBox .baseBtn{padding: 7px 7px;} #gridPage #topicPop .container .topicSummary .resultsRow .biggestCell .itemContainer .item .content .cardimg {position: relative; top: 30px;} } .spinner { width: 75px; height: 75px; top: -38px; position: relative; margin: auto auto; } .spinner .double-bounce1, .spinner .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: #d96741; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; } .spinner .double-bounce2 { opacity: 0.9; -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinnertext{ position: relative; display: inline-block; top: -88px; font-size: 16px; font-weight: bold; line-height: 25px } @-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes sk-bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } } .ui-loader .cssload-more { width: 100%; height: 37px; text-align: center; } .ui-loader .cssload-speeding-wheel { width: 37px; height: 37px; margin: 0px auto; border: 5px solid rgb(217,103,65); border-radius: 50%; border-left-color: transparent; border-right-color: transparent; animation: cssload-spin 800ms infinite linear; -o-animation: cssload-spin 800ms infinite linear; -ms-animation: cssload-spin 800ms infinite linear; -webkit-animation: cssload-spin 800ms infinite linear; -moz-animation: cssload-spin 800ms infinite linear; } @keyframes cssload-spin { 100%{ transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes cssload-spin { 100%{ -o-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes cssload-spin { 100%{ -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes cssload-spin { 100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes cssload-spin { 100%{ -moz-transform: rotate(360deg); transform: rotate(360deg); } }