User:TheGoldenPatrik1/MooMoo.css

html, body { background-color: #000; overflow: hidden; } html, body { position: relative; /* Fixes scrolling on Android */ overflow: hidden; /* Same */ width: 100%; height: 100%; margin: 0; padding: 0; }
 * -webkit-input-placeholder {

color:   #cecece; }
 * -moz-placeholder {

color:   #cecece; opacity: 1; }
 * -moz-placeholder {

color:   #cecece; opacity: 1; }
 * -ms-input-placeholder {

color:   #cecece; } input[type=text] { -webkit-touch-callout: text; -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } .menuLink { font-size: 20px; } a:link { color: #a56dc8; text-decoration: none; } a:active { color: #795094; } a:visited { color: #a56dc8; } a:hover { color: #795094; }	font-family: 'Hammersmith One'; font-size: 12px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

span { font-size: inherit; }

position: absolute; top: 10px; left: 10px; color: #fff; font-size: 24px; }
 * 1) youtuberOf {

.ytLink { color: #6eb3ef; font-size: 24px; text-decoration: none; }

.ytLink:hover { color: #5c96c9; }

margin-top: 5px; }
 * 1) featuredYoutube {

color: #6eb3ef !important; }
 * 1) featuredYoutube a {

color: #5c96c9 !important; }
 * 1) featuredYoutube a:hover {

background-color: rgba(0,0,0,0.5); position: absolute; width: 100%; height: 100%; z-index: 10; }
 * 1) mainMenu {

width: 100%; white-space: nowrap; text-align: center; position: absolute; top: 45%; transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); }
 * 1) menuContainer {

position: absolute; top: 10px; right: 10px; }
 * 1) soundSetting {

position: absolute; top: 20px; right: 20px; cursor: pointer; }
 * 1) partyButton {

color: white; cursor: auto; }
 * 1) partyButton.inParty {

color: white; }
 * 1) partyButton.inParty:hover {

position: absolute; top: 54px; right: 20px; cursor: pointer; }
 * 1) joinPartyButton {

position: absolute; cursor: pointer; display: none; }
 * 1) settingsButton {

position: absolute; bottom: 86px; left: 10px; color: #fff; font-size: 22px; }
 * 1) followText {

position: absolute; bottom: 10px; left: 10px; }
 * 1) twitterFollow {

position: absolute; bottom: 52px; left: 10px; }
 * 1) youtubeFollow {

border-radius: 4px; position: absolute; bottom: 0px; left: 0px; background-color: #fff; font-size: 20px; padding: 8px; -webkit-border-radius: 0 4px 0 0; -moz-border-radius: 0 4px 0 0; border-radius: 0 4px 0 0; }
 * 1) linksContainer1 {

border-radius: 4px; position: absolute; bottom: 0px; right: 0px; background-color: #fff; text-align: right; font-size: 20px; padding: 8px; -webkit-border-radius: 4px 0 0 0; -moz-border-radius: 4px 0 0 0; border-radius: 4px 0 0 0; }
 * 1) linksContainer2 {

font-size: 45px; color: #fff; text-align: center; }
 * 1) loadingText {

display: block; }
 * 1) loadingText a {

.menuCard { vertical-align: top; text-align: left; white-space: normal; word-wrap: break-word; margin: 5px; display: inline-block; width: 300px; padding: 18px; background-color: #fff; -moz-box-shadow: 0px 7px #c4c4c4; -webkit-box-shadow: 0px 7px #c4c4c4; box-shadow: 0px 7px #c4c4c4; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; overflow: hidden; }

.menuHeader { font-size: 24px; color: #292929; margin-bottom: 5px; }

.menuText { font-size: 18px; color: #a8a8a8; margin-bottom: 10px; }

width: 100%; height: 24px; }
 * 1) serverSelect {

width: 100%; padding: 0px; padding-top: 5px; padding-bottom: 0px; }
 * 1) skinColorHolder {

.activeSkin { -webkit-border-radius: 8px !important; -moz-border-radius: 8px !important; border-radius: 8px !important; }

.skinColorItem { cursor: pointer; display: inline-block; margin-right: 10px; width: 30px; height: 30px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; border: 3px solid #525252; }

.skinColorItem:hover { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }

.settingRadio { font-size: 18px; color: #a8a8a8; margin-bottom: 10px; }

font-size: 170px; margin-bottom: -25px; text-shadow: 0 1px 0 #c4c4c4, 0 2px 0 #c4c4c4, 0 3px 0 #c4c4c4, 0 4px 0 #c4c4c4, 0 5px 0 #c4c4c4, 0 6px 0 #c4c4c4, 0 7px 0 #c4c4c4, 0 8px 0 #c4c4c4, 0 9px 0 #c4c4c4; color: #fff; }
 * 1) gameName {

max-height: 200px; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
 * 1) guideCard {

display: none; }
 * 1) guideCard #smallLinks {

display: block; }
 * 1) guideCard #desktopInstructions {

display: none; }
 * 1) guideCard #mobileInstructions {

display: none; }
 * 1) guideCard.touch #desktopInstructions {

display: block; }
 * 1) guideCard.touch #mobileInstructions {

text-align: center; }
 * 1) promoImgHolder {

opacity: 0.9; }
 * 1) promoImg:hover {

display: inline-block; vertical-align: top; }
 * 1) rightCardHolder {

display: block; text-align: center; padding-bottom: 12px; margin-top: 14px; }
 * 1) downloadButtonContainer {

display: none; }
 * 1) downloadButtonContainer.cordova {

display: none; }
 * 1) mobileDownloadButtonContainer {

display: none; }
 * 1) mobileDownloadButtonContainer.cordova {

.downloadBadge { margin: 0 6px 0 6px; }

.downloadBadge img { height: 40px; }

text-align: center; width: 300px; height: auto; }
 * 1) adCard {

text-align: center; font-size: 23px; margin-bottom: 16px; padding: 6px; border: none; outline: none; box-sizing: border-box; color: #4A4A4A; background-color: #e5e3e3; width: 100%; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
 * 1) nameInput {

.menuButton { text-align: center; font-size: 23px; padding: 6px; box-sizing: border-box; color: #fff; background-color: #7ee559; width: 100%; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; cursor: pointer; }

.menuButton:hover { background-color: #6fc94e; }

pointer-events: none; position: absolute; width: 100%; height: 100%; z-index: 2; }
 * 1) gameUI {

position: absolute; bottom: 200px; width: 100%; text-align: center; }
 * 1) chatHolder {

padding: 6px; font-size: 20px; color: #fff; background-color: rgba(0, 0, 0, 0.25); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; pointer-events: all; border: 0; }   outline: none; }
 * 1) chatBox {
 * 1) chatBox:focus {

position: absolute; right: 20px; top: 20px; }
 * 1) topInfoHolder {

color: #fff; font-size: 31px; text-align: left; padding: 10px; padding-top: 7px; padding-bottom: 5px; width: 220px; background-color: rgba(0, 0, 0, 0.25); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
 * 1) leaderboard {

.leaderHolder { overflow: hidden; white-space: nowrap; }

right: 0px; margin-top: 10px; color: #fff; font-size: 28px; background-color: rgba(0, 0, 0, 0.25); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-image: url(../img/icons/skull.png); }
 * 1) killCounter {

.leaderScore { text-align: right; float: right; margin-left: 10px; display: inline-block; font-size: 22px; }

.leaderboardItem { float: left; display: inline-block; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; font-size: 22px; }

.uiElement, .resourceDisplay { background-color: rgba(0, 0, 0, 0.25); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: #fff; padding: 10px; padding-top: 5px; padding-bottom: 5px; font-size: 28px; }

.resourceDisplay { position: absolute; right: 20px; height: 35px; text-align: right; line-height: 39px; padding-left: 10px; padding-right: 40px; background-size: 28px; background-repeat: no-repeat; background-position: right 6px center; }

background-image: url(../img/resources/food_ico.png); }
 * 1) foodDisplay {

background-image: url(../img/resources/wood_ico.png); }
 * 1) woodDisplay {

background-image: url(../img/resources/stone_ico.png); }
 * 1) stoneDisplay {

right: inherit; left: 20px; bottom: 160px; text-align: left; padding-left: 40px; padding-right: 10px; background-position: left 6px center; background-image: url(../img/resources/gold_ico.png); }
 * 1) scoreDisplay {

bottom: 20px; }
 * 1) stoneDisplay {

bottom: 75px; }
 * 1) woodDisplay {

bottom: 130px; }
 * 1) foodDisplay {

position: absolute; bottom: 17px; width: 100%; text-align: center; }
 * 1) actionBar {

.actionBarItem { width: 66px; height: 66px; margin-left: 5px; margin-right: 5px; background-color: rgba(0, 0, 0, 0.25); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; display: inline-block; cursor: pointer; pointer-events: all; background-size: cover; }

.actionBarItem:hover { background-color: rgba(50, 50, 50, 0.25); }

.itemIcon { width: 66px; height: 66px; }

position: absolute; bottom: 20px; left: 20px; display: inline-block; width: 130px; height: 130px; pointer-events: all; background-color: rgba(0, 0, 0, 0.25); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
 * 1) mapDisplay {

.gameButton { position: absolute; top: 20px; padding: 5px; cursor: pointer; pointer-events: all; }

.gameButton:hover { background-color: rgba(50, 50, 50, 0.25); }

right: 270px; }
 * 1) allianceButton {

right: 330px; }
 * 1) storeButton {

right: 390px; }
 * 1) chatButton {

display: none; width: 100%; position: absolute; text-align: center; top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); }
 * 1) storeMenu {

pointer-events: all; width: 400px; display: inline-block; background-color: rgba(0, 0, 0, 0.25); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: #fff; padding: 10px; height: 200px; max-height: calc(100vh - 200px); overflow-y: scroll; -webkit-overflow-scrolling: touch; }
 * 1) storeHolder {

.storeTab { width: 183px; font-size: 26px; display: inline-block; background-color: rgba(0, 0, 0, 0.25); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: #fff; padding: 10px; pointer-events: all; cursor: pointer; }

.storeTab:hover { background-color: rgba(50, 50, 50, 0.25); }

.storeItem { color: #fff; padding: 5px; font-size: 24px; text-align: left; cursor: pointer; }

.itemPrice { margin-top: 5px; float: right; display: inline-block; color: rgba(255,255,255,0.5); font-size: 24px; padding-right: 5px; }

.hatPreview { margin-top: -5px; width: 45px; height: 45px; display: inline-block; vertical-align: middle; padding-right: 10px; }

display: none; width: 100%; position: absolute; text-align: center; top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); }
 * 1) allianceMenu {

pointer-events: all; height: 200px; max-height: calc(100vh - 260px); overflow-y: scroll; -webkit-overflow-scrolling: touch; width: 350px; display: inline-block; text-align: left; padding: 10px; background-color: rgba(0, 0, 0, 0.25); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
 * 1) allianceHolder {

.allianceItem { font-size: 24px; color: #fff; padding: 5px; }

.joinAlBtn { float: right; font-size: 24px; text-align: right; cursor: pointer; color: #80eefc; }

.joinAlBtn:hover { color: #72d3e0; }

.notificationText { vertical-align: top; font-size: 25px; color: #fff; display: inline-block; }

.notifButton { padding: 5px; margin-left: 10px; display: inline-block; cursor: pointer; pointer-events: all; background-color: rgba(0, 0, 0, 0.25); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

.notifButton:hover { background-color: rgba(50, 50, 50, 0.25); }

vertical-align: top; position: absolute; right: 270px; top: 80px; text-align: right; }
 * 1) noticationDisplay {

.allianceButtonM { pointer-events: all; cursor: pointer; margin-top: 10px; font-size: 24px; color: #fff; padding: 5px; background-color: rgba(0, 0, 0, 0.25); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 5px; text-align: center; display: inline-block; }

.allianceButtonM:hover { background-color: rgba(50, 50, 50, 0.25); }

pointer-events: all; font-size: 24px; color: #fff; padding: 5px; background-color: rgba(0, 0, 0, 0.25); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 5px; display: inline-block; outline: none; border-color: none; border: 0; -webkit-box-shadow: none; box-shadow: none; width: 200px; margin-right: 10px; }
 * 1) allianceInput {

max-width: 250px; display: none; position: absolute; top: 20px; left: 20px; }
 * 1) itemInfoHolder {

display: block; }
 * 1) itemInfoHolder.visible {

font-size: 30px; }
 * 1) itemInfoName {

font-size: 22px; color: rgba(255, 255, 255, 0.6); }
 * 1) itemInfoDesc {

.itemInfoReq { font-size: 22px; }

.itemInfoReqVal { font-size: 22px; color: rgba(255, 255, 255, 0.6); }

.itemInfoLmt { font-size: 22px; position: absolute; right: 10px; bottom: 6px; }

width: 100%; position: absolute; bottom: 93px; text-align: center; }
 * 1) ageBarContainer {

width: 100%; position: absolute; bottom: 118px; text-align: center; color: #fff; font-size: 24px; }
 * 1) ageText {

background-color: rgba(0, 0, 0, 0.25); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 5px; width: 314px; height: 10px; display: inline-block; }
 * 1) ageBar {

background-color: rgba(255, 255, 255, 1); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width: 0px; height: 100%; }
 * 1) ageBarBody {

width: 100%; position: absolute; text-align: center; top: 10px; }
 * 1) upgradeHolder {

width: 100%; position: absolute; top: 95px; text-align: center; font-size: 24px; color: #fff; }
 * 1) upgradeCounter {

width: 100%; height: 100%; background-color: #b6db66; z-index: 1; }
 * 1) gameCanvas {

display: none; font-size: 150px; color: #fff; background-color: rgba(0, 0, 0, 0.25); width: 100%; padding: 0px; position: absolute; text-align: center; top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); pointer-events: none; }
 * 1) diedText {

position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; background: rgba(0, 0, 0, 0.8); z-index: 1000; }
 * 1) pre-content-container {

position: absolute; width: 640px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
 * 1) pre-content-player {

position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
 * 1) post-ad-join {

width: 100px; height: 100px; background: red; }

position: absolute; top: 8px; left: 8px; }
 * 1) force-skip-ad {

/* MOBILE */ @media only screen and (max-width: 768px) { /* HOME */ #adCard, #promoImgHolder { display: none !important; }

#guideCard { position: absolute; display: none; z-index: 10; top: calc(50% + 20px); left: 50%; transform: translate(-50%, -50%); }

#guideCard #smallLinks { display: block; }

#guideCard.showing { display: block; }

#downloadButtonContainer { display: none; }

#mobileDownloadButtonContainer { display: block; text-align: center; margin-top: 16px; margin-bottom: -6px; }

.downloadBadge { margin: 0 2px 0 2px; }

.downloadBadge img { height: 36px; }

#loadingText { margin-top: 20px; }

#gameName { font-size: 80px; text-shadow: 0 1px 0 #c4c4c4, 0 2px 0 #c4c4c4, 0 3px 0 #c4c4c4, 0 4px 0 #c4c4c4, 0 5px 0 #c4c4c4; }

#menuCardHolder { margin-top: 20px; }

#setupCard { width: 260px; margin-top: 4px; }

#partyButton { top: 8px; left: 33%; right: inherit; transform: translateX(-50%); }

#joinPartyButton { top: 8px; left: 66%; right: inherit; transform: translateX(-50%); }

#settingsButton { display: block; bottom: 8px; left: 50%; transform: translateX(-50%); }

#youtuberOf { display: none; top: 8px; left: 8px; }

#featuredYoutube { display: inline-block; margin-top: 0; }

#linksContainer1, #linksContainer2, #youtubeFollow, #twitterFollow { display: none; }

/* GAME */ #mapDisplay { width: 66px; height: 66px; bottom: unset; top: 8px; left: 8px; }

#itemInfoHolder { max-width: 128px; top: inherit; top: 8px; right: 8px; left: inherit; }

#itemInfoName { font-size: 22px; }

#itemInfoDesc, #itemInfoDesc, .itemInfoReq, .itemInfoLmt, .itemInfoReqVal { font-size: 12px; }

.uiElement, .resourceDisplay { font-size: 20px; }

.resourceDisplay, #scoreDisplay { right: inherit; left: 8px; height: 25px; line-height: 27px;

padding-left: 36px; padding-right: 10px;

background-size: 24px; background-position: left 6px center; }

#foodDisplay { top: 82px; bottom: inherit; }

#woodDisplay { top: 124px; bottom: inherit; }

#stoneDisplay { top: 166px; bottom: inherit; }

#scoreDisplay { top: 208px; left: 8px; bottom: inherit; }

#topInfoHolder { top: 8px; right: 8px; }

#killCounter { left: inherit; margin-top: 0; }

#actionBar { bottom: 8px; height: 44px; }

.actionBarItem { width: 44px; height: 44px; margin-left: 5px; margin-right: 5px; }

#upgradeCounter { font-size: 18px; top: 58px; }

#ageText { bottom: 70px; font-size: 16px; }

#ageBarContainer { bottom: 54px; }

#ageBar { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; padding: 3px; width: 200px; height: 6px; }

#ageBarBody { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

/*#leaderboard { top: 8px; right: 8px; max-height: calc(100vh - 210px); width: 180px;

font-size: 24px; pointer-events: all; overflow-y: scroll; -webkit-overflow-scrolling: touch; }*/

#leaderboard { display: none; }

#leaderboardData, .leaderHolder, .leaderboardItem, .leaderScore { font-size: 18px; }

.leaderScore { margin-left: 0; }

#noticationDisplay { top: inherit; right: inherit; left: 50%; bottom: 96px; transform: translateX(-50%); text-align: center; }

.notificationText { line-height: 35px; font-size: 18px; display: block; }

.notifButton { padding: 3px 3px 0 3px; margin-left: 4px; margin-right: 4px; }

#allianceButton { top: inherit; right: 8px; }

#storeButton { top: inherit; right: 60px; }

#chatButton { top: inherit; left: 8px; }

#chatButton.hide { /* Hide if showing info box */ display: none; }

.gameButton { bottom: 8px; width: 44px; height: 44px; padding: 0 !important; }

.gameButton i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 34px !important; }

/* GAME MENUS */ .allianceItem, #allianceInput, .allianceButtonM { font-size: 18px; }

.storeItem { font-size: 18px; }

.hatPreview { width: 35px; height: 35px; }

.joinAlBtn, .itemPrice { font-size: 18px; } }