CSS

.sidebar-party-members::before{content: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/702782/COTM_XComSmall.gif);
margin-left: -110px;
padding: 50%;
}

:not(.campaign-member) .xcomcalendaricon {position:absolute; TOP:216px; LEFT:15px; z-index:999}
.campaign-member .xcomcalendaricon {position:absolute; TOP:396px; LEFT:15px; z-index:999}

.calmonth {
border-collapse: collapse;
background: transparent;
margin-bottom: 0px;
border: 0px;
width: 100%
}

.calmonth th {
background-color:transparent;
color: #1b39ac;
text-align: center;
font-size: 36px;
}

.mycalendar {
width: 100%;
}

.mycalendar a {
color: #8e352e;
text-decoration: none;
}

.mycalendar ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}

.mycalendar li {
display: block;
float: left;
width:14.342%;
padding: 5px;
box-sizing:border-box;
border: 1px solid #ccc;
margin-right: -1px;
margin-bottom: -1px;
}

.mycalendar ul.weekdays {
height: 40px;
background: #5b85e4;
}

.mycalendar ul.weekdays li {
text-align: center;
text-transform: uppercase;
line-height: 20px;
border: none !important;
padding: 10px 6px;
color: #fff;
font-size: 13px;
}

.mycalendar .days li {
height: 180px;
background: #f5f5f5;
}

.mycalendar .days li:hover {
background: #d3d3d3;
}

.mycalendar .date {
text-align: center;
margin-bottom: 5px;
padding: 4px;
background: #333;
color: #fff;
width: 40px;
border-radius: 50%;
float: right;
}

.mycalendar .event {
clear: both;
display: block;
font-size: 13px;
border-radius: 4px;
padding: 5px;
margin-top: 40px;
margin-bottom: 5px;
line-height: 14px;
background: #e4f2f2;
border: 1px solid #b5dbdc;
color: #009aaf;
text-decoration: none;
}

.mycalendar .event-desc {
color: #666;
margin: 3px 0 7px 0;
text-decoration: none;
}

.mycalendar .other-month {
background: none!important;
color: #666;
}

img[alt*=" "] {
border: 10px solid transparent;
border-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/662330/SkullBorder.png) 30 round;
}

.adventure-log-index .post-date {width:15%;}
.adventure-log-index .comments-section {padding-top: 90px;}

.adventure-log-index .post-column {width: 85%;}

/* Comment Section*/
.small-12.columns.comment-count-column {
background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/664042/Comment.gif);
height: 300px;
background-position:center;
background-repeat: no-repeat;
}

.comment-count-wrapper {
height: 300px;
}
.comment-count-wrapper .count {
padding-top: 250px;
}
.comment-count-wrapper dd{font-size:100%;}

ins { color:inherit; text-decoration:inherit;} /* Plus sign no longer underlines /
ins:before { content:‘+’;} /
Plus sign no longer underlines /
ins:after { content:‘+’;} /
Plus sign no longer underlines */

.campaign-title,.flame-dragon{ display:none!important;}
#selected-map-container {height: 600px!important;}
body.campaign-landing-show #content {max-width: 1600px;}
body.character-show #content {max-width: 1200px;}
body.adventure-log-show #content {max-width: 1600px;}
body.wiki-page-show #content a.icon-edit[href*=“main-page”] {max-width: 1600px;}

.campaign-public-layout .main-content h2 {color:#5b85e4!important;}

.delete-link.icon-kub-trash.expand.alert {display: none;}
.campaign-game-master .delete-link.icon-kub-trash.expand.alert {display: inline-block;}
.delete-link.expand.alert {display: none;}
.campaign-game-master .delete-link.icon-kub-trash.expand.alert {display: inline-block;}

/Character Speech Colors/

.roy {color: darkgreen;}
.allan {color: green;}
.andre {color: silver;}
.jax {color: gold;}
.grace {color: pink;}
.npc1 {color: lightgreen;}
.npc2 {color: lightblue;}
.npc3 {color: orange;}

/* .icon-kub-trash{display:none!important;} /
/
Nav Icons */

.op-icon-dash::before {content: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/640745/XDash.png);}
.icon-home::before {content: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/640315/XMaps.png);}
.campaign-stream-module .update-container.favorite .background-container {background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/640315/XMaps.png);}
.op-icon-forum::before {content: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/640760/xShadowland.png);}
.icon-calendar-empty::before {content: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/640736/Calendar.png);}
.op-icon-page::before {content: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/640350/XWiki.png);}
.campaign-stream-module .update-container.adventure-log .background-container{background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/640350/XWiki.png);}
.op-icon-image-embed::before {content: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/640725/XCybereye.png);}
.op-icon-book-wiki::before {content: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/640320/XFront.png);}
.campaign-stream-module .update-container.wiki .background-container{background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/640320/XFront.png);}
.op-icon-characters::before {content: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/640313/XCharacters.png);}
.campaign-stream-module .update-container.character .background-container {background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/640313/XCharacters.png);}
.op-icon-map::before {content: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/640329/XWiki.png);}
.op-icon-backpack::before {content: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/640317/XGear.png);}
.campaign-stream-module .update-container.item .background-container{background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/640317/XGear.png);}
.op-icon-gears::before {content: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/640763/xSettings.png);}
.character-quick-search::after {content: url(“https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/695179/XCom-ATeamSmall.png”);}
.character-index.campaign-public-layout .secondary-heading:nth-child(5)::before {content: url(“https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/695180/XCom-BTeamSmall.png”);}

.nav-text{
position: relative;
top: -12px;
}

body.campaign-public-layout .post-section.post-player-secret {
background-color: #000;
}
body.campaign-public-layout .post-section.post-gm-only {
background-color: rgba(0, 0, 0, 0.7);
}
.campaign-public-layout .main-content h4 {
color: #1800FF;
}

body.campaign-public-layout .title a {color:#5b85e4;}
.main-content a {color:#a1a2ef;}
.campaign-public-layout .main-content h2 {color:#5b85e4;}
.campaign-public-layout .main-content {color:white}

li.character-list-item-container{transition: all .5s ease-in-out; }
li.character-list-item-container:hover {transform: scale(1.1);}
.item-index.campaign-public-layout .character-list-item {background-color: #0D162F;}
.item-index.campaign-public-layout .character-quick-search {background-color:transparent;}

.archived-version-compare.center-column {background-color:black;}

/Adventure Logs/
.adventure-log-show .post-header-container {background-color: rgba(0,0,40,0.5);}
.adventure-log-index .adventure-log-post {background-color: rgba(0,0,40,0.5);}
.adventure-log-show .post-header-container, .adventure-log-show .post-main, .adventure-log-show .post-comments {background-color: rgba(0,0,40,0.5);}
.item-show .main-content section {background-color: rgba(0,0,40,0.5);}

.adventure-log-index .overflow-fade-out {
background: -webkit-linear-gradient(top, rgba(0,0,0,0), #39396c)!important;
}
.adventure-log-index .post-date, .adventure-log-show .post-date {background-color: #3350b3;}
.adventure-log-index .adventure-log-new-container {background: transparent;}

.adventure-log-index .overflow-fade-out {
background: linear-gradient(top, rgba(255,255,255,0),#063cbf);
}
.campaign-landing-show .campaign-landing-page-container {background-color:transparent;}

.campaign-public-layout #campaign-summary-row .campaign-public-title-container {
height: 10px;
position: relative;
}

/Character Page/

.character-index.campaign-public-layout .character-quick-search, .item-index.campaign-public-layout .character-quick-search {
padding: 17px 0 0;
}

#character-details {background-color:transparent;}
.dz-default {color: blue;}
.character-index.campaign-public-layout .character-list-item {background-color: #0D162F;}
.character-index.campaign-public-layout .character-quick-search {background-color:transparent;}
.campaign-public-layout .main-content h3 {color: white;}
.campaign-public-layout .main-content h6 {color: white;}

/Wiki Pages/

body.campaign-public-layout .post-section.post-main {background-color: rgba(0,0,40,0.5);}
body.campaign-public-layout .post-section.post-main {color:white;}

@keyframes ticker {
0% {margin-top: -75px;}
25% {margin-top: -130px;}
50% {margin-top: -185px;}
75% {margin-top: -240px;}
100% {margin-top: 0px;}
}

.news {
box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4), 0 5px 10px rgba(0,0,0,0.5);
width: 550px;
height: 30px;
margin: 20px auto;
overflow: hidden;
border-radius: 4px;
padding: 3px;
-webkit-user-select: none
}

.news .newsspan {
float: left;
color: #fff;
padding: 0px;
position: relative;
top: 0%;
border-radius: 4px;
box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4);
font: 16px, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-user-select: none;
cursor: pointer
}

.news ul {
float: left;
padding-left: 120px;
animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
-webkit-user-select: none
}

.news ul li {line-height: 30px; list-style: none }

.news ul li a {
color: #fff;
text-decoration: none;
font: 14px Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-user-select: none
}

.news ul:hover { animation-play-state: paused }
.news .newsspan:hover+ul { animation-play-state: paused }

/* OTHER COLORS */
.blue { background: #347fd0 }
.blue .newsspan { background: #2c66be }

/Wiki Main Page Navigation Transitions/

.xcombase {
opacity: 0;
animation: xbase 10s ease-in both infinite;
}

@keyframes xbase {
0% { opacity: 0; }
25% { opacity: 0; }
50% { opacity: .55; }
90% { opacity: 0; }
100% { opacity: 0; }
}

.lefnavimg {
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
.lefnavimg:hover {
-webkit-transform: translate(1em,0);
-moz-transform: translate(1em,0);
-o-transform: translate(1em,0);
-ms-transform: translate(1em,0);
transform: translate(1em,0);
}

.bottomnavimg{
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}

.bottomnavimg:hover { -webkit-transform: translate(0,-2em); -moz-transform: translate(0,-2em); -o-transform: translate(0,-2em); -ms-transform: translate(0,-2em); transform: translate(0,-2em); }

.Gear1 {
opacity: 0;
animation: gearfade 1s 1 ease-in forwards;
}

.Gear2 {
opacity: 0;
animation: gearfade .5s ease-in 1s 1 forwards;
}

.Gear3 {
opacity: 0;
animation: gearfade .5s ease-in 1.5s 1 forwards;
}

.Gear4 {
opacity: 0;
animation: gearfade .5s ease-in 2s 1 forwards;
}

.Gear5 {
opacity: 0;
animation: gearfade .5s ease-in 2.5s 1 forwards;
}

.Gear6 {
opacity: 0;
animation: gearfade .5s ease-in 3s 1 forwards;
}

.Gear7 {
opacity: 0;
animation: gearfade .5s ease-in 3.5s 1 forwards;
}

.GearText {
opacity: 0;
animation: gearfade .5s ease-in 4s 1 forwards;
}

@-webkit-keyframes gearfade {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes gearfade {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes gearfade {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes gearfade {
0% { opacity: 0; }
100% { opacity: 1; }
}

/Main Page/

h2 span {color: #1b39ac !important;}

h2 {
color: #1b39ac !important;
}

/**/
@keyframes blurFadeInOut{
0%{
opacity: 0;
text-shadow: 0px 0px 50px #5b85e4;
-ms-transform: scale(1.3);
transform: scale(1.3);

}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #5b85e4;
transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 60px #5b85e4;
transform: scale(0);
}
}
@keyframes blurFadeIn{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #000;
transform: scale(1.3);
}
50%{
opacity: 0.5;
text-shadow: 0px 0px 10px #000;
transform: scale(1.1);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #000;
transform: scale(1);
}
}
@keyframes fadeInBack{
0%{
opacity: 0;
transform: scale(0);
}
50%{
opacity: 0.4;
transform: scale(1);
}
100%{
opacity: 0;
transform: scale(2);
}
}
@keyframes fadeInRotate{
0%{
opacity: 0;
transform: scale(0) rotate(360deg);
}
90%{
opacity: 1;
transform: scale(1) rotate(0deg);
}
100%{
opacity: 0;
transform: scale(2) rotate(0deg);
}

}

body{
height: 100%;
top: 0px;
bottom: 0px;
}

@keyframes orbitship {
0% { z-index:4; transform: rotateY(0); }
49% { z-index:4; }
50% { z-index:-4; }
99% { z-index:-4; }
100% { z-index:4; transform: rotateY(360deg); }
}

@keyframes spinsun {
0% { transform: rotate(0); }
100% { transform: rotate(-360deg); }
}
@keyframes shadow {
0% { background-position: 130% 0%; }
33%{ background-position: 50% 0%; }
55% { background-position: 0% 0%; }
80%{ background-position: -50% 0%; }
100%{ background-position: -50% 0%; }
}
@keyframes orbitmercury {
0% { z-index:2; transform: rotateY(0); }
49% { z-index:2; }
50% { z-index:-2; }
99% { z-index:-2; }
100% { z-index:2; transform: rotateY(360deg); }
}
@keyframes orbitvenus {
0% { z-index:3; transform: rotateY(0); }
49% { z-index:3; }
50% { z-index:-3; }
99% { z-index:-3; }
100% { z-index:3; transform: rotateY(360deg); }
}
@keyframes orbitearth {
0% { z-index:4; transform: rotateY(0);}
49% {z-index:4;}
50% {z-index:-4;}
99% {z-index:-4;}
100% { z-index:4; transform: rotateY(360deg);}
}
@keyframes orbitmars {
0% { z-index:5; transform: rotateY(0); }
49% { z-index:5; }
50% { z-index:-5; }
99% { z-index:-5; }
100% { z-index:5; transform: rotateY(360deg); }
}
@keyframes orbitjupiter {
0% { z-index:6; transform: rotateY(270); }
49% { z-index:6; }
50% { z-index:-6; }
99% { z-index:-6; }
100% { z-index:6; transform: rotateY(360deg); }
}
@keyframes orbitsaturn {
0% { z-index:7; transform: rotateY(270); }
49% { z-index:7; }
50% { z-index:-7; }
99% { z-index:-7; }
100% { z-index:7; transform: rotateY(360deg); }
}
/* Keep planet image flat */
@keyframes anti-spin {
from { transform: rotateY(0deg); }
to { transform: rotateY(-360deg); }
}
@keyframes anti-spin-rings {
from { transform: rotateY(0) rotateX(73deg); }
to { transform: rotateY(-360deg) rotateX(73deg); }
}

@keyframes beamfire {
0% { z-index:4; opacity:0; }
1% { z-index:4; opacity:1; }
5% { z-index:4; opacity:1; }
10% { z-index:-4; opacity:0; }
47% { z-index:-4; opacity:0; }
49% { z-index:-4; opacity:1; }
54% { z-index:-4; opacity:1; }
56% { z-index:-4; opacity:0; }
99% { z-index:-4; opacity:0; }
100% { z-index:4; opacity:0; transform: rotateY(360deg); }
}

/* scene wrapper */

.solarsystem{
position:relative;
margin: 0 auto;
display:block;
margin-top: 100px;
perspective: 1000px;
perspective-origin: 60% 50%;
transform: rotate(-10deg);

}
.solarsystem > div {
position: relative;
margin: 0 auto;
transform-style: preserve-3d;
height: 0px;
}
.sun {
width: 250px;
position: absolute;
top: 0px;
z-index: 1;
height: 125px !important;
}
.sun .star {
width: 250px;
height: 250px;
background: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/676828/sun.png) no-repeat;
background-size: cover;
border-radius: 250px;
margin: 0 auto;
animation: spinsun 40s infinite linear;
}
.planet {
background-size: cover;
background-repeat: no-repeat;
background-color: transparent;
animation-iteration-count: infinite;
overflow:hidden;
}
.ship {
background-size: cover;
background-repeat: no-repeat;
background-color: transparent;
animation-iteration-count: infinite;
}
.beam {
background-size: cover;
background-repeat: no-repeat;
background-color: transparent;
animation-iteration-count: infinite;
}
.shadow {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background: transparent url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/676830/shadow.png) 0% 0% no-repeat;
background-size: cover;
border-radius: 100%;
}
.mercury {
position: absolute;
width: 400px;
z-index:2;
animation: orbitmercury 12s infinite linear;
top: -7.5px; /half of planets height to keep orbits in line/
}
.mercury .planet {
width:15px;
height:15px;
background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/676831/mercury.png);
animation: anti-spin 12s infinite linear;
}
.mercury .shadow {
animation: shadow 12s infinite linear;
}
.venus {
position: absolute;
width: 506px;
z-index:3;
animation: orbitvenus 15s infinite linear;
top: -19px;
}
.venus .planet {
width:38px;
height:38px;
background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/676832/venus.png);
animation: anti-spin 15s infinite linear;
}

.earth {
position: absolute;
width: 610px;
z-index:4;
animation: orbitearth 20s infinite linear;
top: -20px;
}

.venus .shadow {
animation: shadow 15s infinite linear;
}

.earth .shadow {
animation: shadow 20s infinite linear;
}

.earth .planet {
width:40px;
height:40px;
background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/676829/earth.png);
animation: anti-spin 20s infinite linear;
}

.mars {
position: absolute;
width: 706px;
z-index:5;
animation: orbitmars 30s infinite linear;
top: -11px;
}
.mars .planet {
width:22px;
height:22px;
background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/676833/mars.png);
animation: anti-spin 30s infinite linear;
}
.mars .shadow {
animation: shadow 30s infinite linear;
}
.jupiter {
position: absolute;
width: 1100px;
z-index:6;
animation: orbitjupiter 50s infinite linear;
top: -64px;
}
.jupiter .planet {
width:128px;
height:128px;
background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/676834/jupiter.png);
animation: anti-spin 50s infinite linear;
}
.jupiter .shadow {
animation: shadow 50s infinite linear;
}
.alien {
position: absolute;
width: 610px;
z-index: 4;
animation: orbitship 20s infinite ease-in-out;
top: -35px;
}
.alien .ship {
width:20px;
height:10px;
background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/676838/ufo_by_kholikekstrada-d9rfv06.png);
animation: anti-spin 20s infinite ease-in-out;
}
.alien .beam {
width:10px;
height:15px;
background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/676843/beam.png);
animation: beamfire 20s infinite ease-in-out;
}
.aliens1 {
opacity: 0;
animation: blurFadeInOut 3s 1 ease-in forwards;
animation-delay: 9s
}

.aliens2 {
opacity: 0;
animation: blurFadeInOut 3s 1 ease-in forwards;
animation-delay: 20s
}
.aliens3 {
opacity: 0;
animation: blurFadeInOut 3s 1 ease-in forwards;
animation-delay: 29s
}

.aliens4 {
opacity: 0;
animation: blurFadeInOut 3s 1 ease-in forwards;
animation-delay: 40s
}
.aliens5 {
opacity: 0;
animation: blurFadeInOut 3s 1 ease-in forwards;
animation-delay: 49s
}

.aliens6 {
opacity: 0;
animation: blurFadeInOut 3s 1 ease-in forwards;
animation-delay: 60s
}

.aliens7 {
opacity: 0;
animation: blurFadeInOut 3s 1 ease-in forwards;
animation-delay: 69s
}

.fadetext0,
.fadetext1,
.fadetext2,
.fadetext3,
.fadetext4,
.fadetext5,
.fadetext6,
.fadetext7 {
position: absolute;
display: block;
top: 1 em;
width: 86%;
font-size: 2em;
}

.fadetext0 {
text-align: center;
animation: blurFadeInOut 5s ease-in 2s both;
color: transparent;
text-shadow: 0px 0px 1px #5b85e4;
}

.fadetext1 {
text-align: center;
animation: blurFadeInOut 5s ease-in 8s both;
color: transparent;
text-shadow: 0px 0px 1px #5b85e4;
}
.fadetext2 {
text-align: center;
animation: blurFadeInOut 5s ease-in 19s both;
color: transparent;
text-shadow: 0px 0px 1px #5b85e4;
}
.fadetext3 {
text-align: center;
animation: blurFadeInOut 5s ease-in 28s both;
color: transparent;
text-shadow: 0px 0px 1px #5b85e4;
}
.fadetext4 {
text-align: center;
animation: blurFadeInOut 5s ease-in 39s both;
color: transparent;
text-shadow: 0px 0px 1px #5b85e4;
}
.fadetext5 {
text-align: center;
animation: blurFadeInOut 5s ease-in 48s both;
color: transparent;
text-shadow: 0px 0px 1px #5b85e4;
}
.fadetext6 {
text-align: center;
animation: blurFadeInOut 5s ease-in 59s both;
color: transparent;
text-shadow: 0px 0px 1px #5b85e4;
}
.fadetext7 {
text-align: center;
animation: blurFadeInOut 5s ease-in 68s both;
color: transparent;
text-shadow: 0px 0px 1px #5b85e4;
}

CSS

X-Com: Defiance cgregory