/* * Copyright © 2015 MMOUI. All Rights Reserved. */ /* MAIN */ body, html {margin:10px 0 0 0;height:100%;} body {background-color:#131313;font:14px Verdana, Geneva, sans-serif;margin:0px;padding:0px;color:#c5c7c9;-webkit-font-smoothing:antialiased;} h1 {padding:0px;margin:0px;font-weight:normal;} h2 {color:#0197fe;margin:0px;padding:0px;} h3 {color:#7dc705;padding:0;margin:10px 0 0 0;} a {color:#da8a00;text-decoration:none;} a:hover {color:#ffffff;} select {background:#4f4f4e;color:#E5E5E5;font-size:14px;border:1px solid #404040;} input {background:#4f4f4e;color:#E5E5E5;font-size:18px;border:1px solid #404040;padding:5px;} textarea {background:#4f4f4e;color:#E5E5E5;font-size:18px;border:1px solid #404040;padding:5px;box-sizing:border-box;width:100%} fieldset {border:1px solid #4f4f4e;margin-bottom:10px;padding:15px} .center {text-align:center;} .wrapper {width:1200px;margin-left:auto;margin-right:auto;overflow:hidden;} /* ADS */ .horzBTF {text-align:center;padding-top:20px} #anchor-btm {background-color: rgba(40, 40, 40, 0.8) !important} /* HEADER AREA */ .header .logo {background:url("../img/MMOUI-Logo.png") no-repeat;width:256px;height:83px;margin-top:25px;} .header .logo a {display:block;text-decoration:none;width:210px;height:61px;} .header .menu {float:right; margin:0;padding:20px 5px 0px 0px;list-style-type:none;} .header .menu li {display:inline-block;padding:5px;color:#0197fe;padding-right:58px;text-transform:uppercase;vertical-align:top;} .header .menu .lastitem {padding-right:0px} .header .menu li a {color:#c5c7c9;text-decoration:none;font-size:24px;transition: all 0.2s ease-in-out;} .header .menu li a:hover {color:#0197fe;} .header .menu .selected a {color:#fff;} .header .menu .selected a:hover {color: #fff;cursor:default;} .header .menu .selected .fa-caret-up {font-size:36px;color:#fff;margin-top:-10px;} /* CONTENT AREA */ .page .main-col {background-color:#202020;width:875px;margin-top:20px;} #home .page .main-col {background:#202020 url("../img/Minion-bg.png") no-repeat;background-position:-51px -85px;} #premium .page .main-col, #privacy .page .main-col, #tos .page .main-col, #error .page .main-col {width:auto;} .page .main-col .promo {padding:20px; margin-left:290px;} .page .main-col .promo .minion-tagline {font-size:28px;text-transform:uppercase;text-align:center;text-justify:distribute;} .page .main-col .promo .minion-desc {margin:0 10px 0 46px;font-size:18px;color:#888888;} .page .main-col .promo .minion-download-btn {background-color:#b22c22;border-radius:3px;margin-top:20px;text-align:center;width:150px;margin-left:auto;margin-right:auto;overflow:hidden;transition:all 0.2s ease-in-out;} .page .main-col .promo .minion-download-btn:hover {background-color: #d92c1f;} .page .main-col .promo .minion-download-btn a {color:#fff;font-size:14px;font-weight: bold;display: block;padding:10px;} .page .main-col .content {background-color:rgba(42, 42, 42, 0.90);border-top:2px solid #373737;padding:20px;} .page .main-col .content .browse {padding:10px 0 20px 90px; font-size:28px; color:#888888;} .page .main-col .content .browse .sortorder {float: right;font-size: 14px;margin:7px 60px 0 0;} .page .main-col .content h1 {color:#909090;font-size:24px;} .page .main-col .content .sites {position:relative;animation:sitesmove 0.5s ease-out forwards;animation-iteration-count:1;margin:0 65px 20px 53px;list-style-type:none;display:block;} @keyframes sitesmove { from {top:50px; opacity: 0;} to {top:0px; opacity: 1}} .page .main-col .content .sites li {display:block;padding:20px;transition:all 0.2s ease-in-out;} .page .main-col .content .sites li:hover {background-color:#303030;border-radius:4px;} .page .main-col .content .sites li a {text-decoration:none;display:block;} .page .main-col .content .sites li a:hover {color:#0197fe;} .page .main-col .content .sites .game-pic {height:200px; width:200px; display:block;} .page .main-col .content .sites .game-info {float:left; margin-left:220px; padding:1px 10px 1px 10px;color:#787878;display:block;} .page .main-col .content .sites .wowinfo {border-left:8px solid #404373;} .page .main-col .content .sites .wowpic {background:url("../img/games/wow.jpg") no-repeat;} .page .main-col .content .sites .esoinfo {border-left:8px solid #ba6a27;} .page .main-col .content .sites .esopic {background:url("../img/games/eso.jpg") no-repeat;} .page .main-col .content .sites .riftinfo {border-left:8px solid #6d3c86;} .page .main-col .content .sites .riftpic {background:url("../img/games/rift.jpg") no-repeat;} .page .main-col .content .sites .swtorinfo {border-left:8px solid #3e5174;} .page .main-col .content .sites .swtorpic {background:url("../img/games/swtor.jpg") no-repeat;} .page .main-col .content .sites .cwinfo {border-left:8px solid #0bab01;} .page .main-col .content .sites .cwpic {background:url("../img/games/cw.jpg") no-repeat;} .page .main-col .content .sites .eqinfo {border-left:8px solid #3a82a4;} .page .main-col .content .sites .eqpic {background:url("../img/games/eq.jpg") no-repeat;} .page .main-col .content .sites .eq2info {border-left:8px solid #5b5b5b;} .page .main-col .content .sites .eq2pic {background:url("../img/games/eq2.jpg") no-repeat;} .page .main-col .content .sites .lotroinfo {border-left:8px solid #90942e;} .page .main-col .content .sites .lotropic {background:url("../img/games/lotro.jpg") no-repeat;} .page .main-col .content .sites .tswinfo {border-left:8px solid #7a251e;} .page .main-col .content .sites .tswpic {background:url("../img/games/tsw.jpg") no-repeat;} /* RIGHT COLUMN */ .page .right-col {float:right;width:300px;} .page .right-col .vert {margin-bottom:25px;min-height:250px;min-width:300px;text-align:center;background-color:#202020;} .page .right-col .social {background-color:#202020;padding:5px;list-style-type:none;} .page .right-col .social ul {margin:0px;padding:12px 20px 12px 20px;} .page .right-col .social li {display:inline-block;padding-right:25px;padding-left:38px;} .page .right-col .social .lastitem {padding-right:0px;} .page .right-col .social li a {text-decoration:none;} .page .right-col .social li i {background:#205D7A;color:#fff;width:50px;height:40px;border-radius:30px;font-size:32px;text-align:center;padding-top:15%;transition:all 0.2s ease-in-out;} .page .right-col .social .fa-facebook {background:#3b5998;} .page .right-col .social .fa-facebook:hover {background:#4465aa;} .page .right-col .social .fa-twitter {background:#00aced;} .page .right-col .social .fa-twitter:hover {background:#3fc4f6;} .page .right-col .social .fa-google-plus {background:#dd4b39;} .page .right-col .social .fa-google-plus:hover {background:#f27767;} /* FOOTER AREA */ .footer .menu {text-align:center;padding-top:20px;font-size:12px} .footer .copyright {text-align:center;padding:20px;font-size:12px} /* MISC AREA */ .stick {position:fixed;top:0px;margin-top:20px;transition: all 0.5s ease-in-out;} #contact .infotext {font-size:12px;font-style:italic;color:#787878;padding-bottom:5px} #contact .submit {text-align:center;} #contact .submit input {padding:10px 50px 10px 50px} #contact select {font-size:18px;} #about h1 {color:#fff;font-size:28px;} #about .years {float:right;text-align:center;font-size:16px;margin:10px 20px 20px 20px;width:120px;margin-right:30px} #about .years .count {font-size:80px;line-height: 75px} #about .years .name {letter-spacing:10px;padding-left:15px} #error .message {padding:20px 0 40px 0; text-align: center;} /* Timeline Stuff */ #about .content *,#about .content *:after,#about .content *:before {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .cd-container {width:90%;max-width:1170px;margin:0 auto;} .cd-container::after {content: '';display:table;clear:both;} #cd-timeline {position: relative;padding: 2em 0;margin-top: 2em;margin-bottom: 2em;} #cd-timeline::before {content: '';position: absolute;top: 0;left: 18px;height: 100%;width: 4px;background: #444;} @media only screen and (min-width: 1170px) { #cd-timeline {margin-top: 3em;margin-bottom: 3em;} #cd-timeline::before {left: 50%;margin-left: -2px;} } .cd-timeline-block {position: relative;margin: 2em 0;} .cd-timeline-block:after {content: "";display: table;clear: both;} .cd-timeline-block:first-child {margin-top: 0;} .cd-timeline-block:last-child {margin-bottom: 0;} @media only screen and (min-width: 1170px) { .cd-timeline-block {margin: 4em 0;} .cd-timeline-block:first-child {margin-top: 0;} .cd-timeline-block:last-child {margin-bottom: 0;} } .cd-timeline-img {position: absolute;top: 0;left: 0;width: 40px;height: 40px;z-index: 100;} .cd-timeline-img img {display: block;position: relative;left: 50%;top: 50%;margin-left: -23px;margin-top: -23px;} .cd-timeline-img.cd-picture {background: #75ce66;} .cd-timeline-img.cd-movie {background: #c03b44;} .cd-timeline-img.cd-location {background: #f0ca45;} @media only screen and (min-width: 1170px) { .cd-timeline-img {width: 60px;height: 60px;left: 50%;margin-left: -30px;-webkit-transform: translateZ(0);-webkit-backface-visibility: hidden;} .cssanimations .cd-timeline-img.is-hidden {visibility: hidden;} .cssanimations .cd-timeline-img.bounce-in {visibility: visible;-webkit-animation: cd-bounce-1 0.6s;-moz-animation: cd-bounce-1 0.6s;animation: cd-bounce-1 0.6s;} } @-webkit-keyframes cd-bounce-1 { 0% { opacity: 0; -webkit-transform: scale(0.5); } 60% { opacity: 1; -webkit-transform: scale(1.2); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes cd-bounce-1 { 0% { opacity: 0; -moz-transform: scale(0.5); } 60% { opacity: 1; -moz-transform: scale(1.2); } 100% { -moz-transform: scale(1); } } @keyframes cd-bounce-1 { 0% { opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } 60% { opacity: 1; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } .cd-timeline-content {position: relative;margin-left: 60px;background: #343434;border-radius: 0.25em;padding: 1em;box-shadow: 0 3px 0 #202020;} .cd-timeline-content:after {content: "";display: table;clear: both;} .cd-timeline-content h2 {color: #fff;} .cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {font-size: 13px;font-size: 0.8125rem;} .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {display: inline-block;} .cd-timeline-content p {margin: 1em 0;line-height: 1.6;} .cd-timeline-content .cd-date {float: left;padding: .8em 0;opacity: .7;} .cd-timeline-content::before { content: '';position: absolute;top: 16px;right: 100%;height: 0;width: 0;border: 7px solid transparent;border-right: 7px solid #343434;} @media only screen and (min-width: 768px) { .cd-timeline-content h2 {font-size: 20px;font-size: 1.25rem;} .cd-timeline-content p {font-size: 16px;font-size: 1rem;} .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {font-size: 14px;font-size: 0.875rem;} } @media only screen and (min-width: 1170px) { .cd-timeline-content {margin-left: 0;padding: 1.6em;width: 45%;} .cd-timeline-content::before {top: 24px;left: 100%;border-color: transparent;border-left-color: #343434;} .cd-timeline-content .cd-read-more {float: left;} .cd-timeline-content .cd-date {position: absolute;width: 100%;left: 122%;top: 6px;font-size: 16px;font-size: 1rem;} .cd-timeline-block:nth-child(even) .cd-timeline-content {float: right;} .cd-timeline-block:nth-child(even) .cd-timeline-content::before {top: 24px;left: auto;right: 100%;border-color: transparent;border-right-color: #343434;} .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {float: right;} .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {left: auto;right: 122%;text-align: right;} .cssanimations .cd-timeline-content.is-hidden {visibility: hidden;} .cssanimations .cd-timeline-content.bounce-in {visibility: visible;-webkit-animation: cd-bounce-2 0.6s;-moz-animation: cd-bounce-2 0.6s;animation: cd-bounce-2 0.6s;} } @media only screen and (min-width: 1170px) { /* inverse bounce effect on even content blocks */ .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {-webkit-animation: cd-bounce-2-inverse 0.6s;-moz-animation: cd-bounce-2-inverse 0.6s;animation: cd-bounce-2-inverse 0.6s;} } @-webkit-keyframes cd-bounce-2 { 0% { opacity: 0; -webkit-transform: translateX(-100px); } 60% { opacity: 1; -webkit-transform: translateX(20px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes cd-bounce-2 { 0% { opacity: 0; -moz-transform: translateX(-100px); } 60% { opacity: 1; -moz-transform: translateX(20px); } 100% { -moz-transform: translateX(0); } } @keyframes cd-bounce-2 { 0% { opacity: 0; -webkit-transform: translateX(-100px); -moz-transform: translateX(-100px); -ms-transform: translateX(-100px); -o-transform: translateX(-100px); transform: translateX(-100px); } 60% { opacity: 1; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes cd-bounce-2-inverse { 0% { opacity: 0; -webkit-transform: translateX(100px); } 60% { opacity: 1; -webkit-transform: translateX(-20px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes cd-bounce-2-inverse { 0% { opacity: 0; -moz-transform: translateX(100px); } 60% { opacity: 1; -moz-transform: translateX(-20px); } 100% { -moz-transform: translateX(0); } } @keyframes cd-bounce-2-inverse { 0% { opacity: 0; -webkit-transform: translateX(100px); -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); transform: translateX(100px); } 60% { opacity: 1; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } }