CSS

Campaign CSS

The following code is what is currently displayed on this Campaign as of 07/25/2015. It should be compatible with current versions of IE, Firefox, Chrome, Safari, and Opera as of that date, but has not been tested for compatibility with older browsers. The design is being built for responsiveness, and so should load well on most portable devices. Also see the Formatting Testing page for details on specialized content handled by this template.

The template has a Content Max Width of 1350 and uses the following Google Fonts:

  • Handlee
  • Berkshire Swash
  • Amaranth
  • Milonga
  • Source Sans Pro
  • Satisfy
  • Waiting for the Sunrise
  • Sofia
  • Fondamento

If you have any fixes or improvements please feel free to let us know.

/* SITE WIDE */
/* REMOVE CONTENT */
.campaign-title,.flame-dragon,.campaign-public-layout .highlight-container,.tags-list,.campaign-public-layout #sidebar #campaign-stream,.wiki-page-name,.wiki-page-name.title,.character-show .bio h6,.character-show .tagline + div h6,.character-show .character-avatar .frame a,.item-show .character-avatar .frame a,.right-side-fade-out, .campaign-public-layout #campaign-nav li.active:after, .campaign-public-layout #campaign-nav .icon {
	display:none!important;
}

/* TRANSPARENCY */
.campaign-public-layout .adventure-log-post,.adventure-log-post .post-header-container,.adventure-log-show .post-main,.campaign-public-layout .sidebar-adventure-log-neighbors .small-4.columns.date-column.post-date,.campaign-public-layout .sidebar-adventure-log-neighbors .small-8.columns.post-column,.wiki-page,.wiki-page:after,.wiki-page:before,a.newroll,#content table,#content tr:nth-child(even),#sidebar .sidebar-party-members,.sidebar-last-updated,#sidebar .sidebar-quick-stats,#sidebar fan-counter-container,#sidebar .stream-module-container,#sidebar .adventure-log-index-filter,.campaign-landing-show .campaign-landing-page-container,.campaign-public-layout .post-main,.campaign-public-layout .post-section.post-main,.post-gm-only,body.campaign-public-layout .post-section.post-player-secret,.character-index.campaign-public-layout .character-list-item,.character-search-area,.character-index.campaign-public-layout .character-quick-search,.character-index.campaign-public-layout .filter-options,#gm-secrets,.campaign-search-page #center-column,.campaign-search-page #tag-library,.campaign-search-page #search-results, .collapsable-nav-row .main-content-container, .character-show .main-content section, .campaign-public-layout #campaign-nav, .campaign-public-layout #campaign-nav li.active .icon, .campaign-public-layout #campaign-nav .icon,.item-index.campaign-public-layout .character-quick-search,.item-index.campaign-public-layout .filter-options,.item-index.campaign-public-layout .character-list-item,.item-index.campaign-public-layout .character-list-item.gm-only,.item-show .main-content section,.campaign-map-index .map-placard {
	background-color:transparent!important;
}

/* BANNER ADJUSTMENTS */
/* TARGET DESKTOPS AND LAPTOPS */
@media only screen and (min-width : 1224px) {
.campaign-public-layout #banner-container {
    width: 80%;
    margin-left:16.6667%;
}
}

/* NAV MENU */
/* BACKGROUND */
.collapsable-nav-row .front-nav-container {
    background-image: url("//db4sgowjqfwig.cloudfront.net/campaigns/103824/assets/427539/menu_parch2.png");
    background-repeat: no-repeat;
    top: 75px;
    left: 15px;
    width: 191px;
    height: 450px;
}

.campaign-public-layout #campaign-nav .nav-links {
    margin: 40px 0px 0px 25px;
}

/* TEXT FONT */
.nav-text,#campaign-nav a:after {
	font-family:'Berkshire Swash',cursive;
	font-size:large;
}

.campaign-public-layout #campaign-nav a {
        color: black;
}

.campaign-public-layout #campaign-nav a:hover {
        color:white;
}

.campaign-public-layout #campaign-nav .nav-links li.active {
background: -moz-linear-gradient(left, rgba(255,0,0,1) 0%, rgba(255,0,0,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,0,0,1)), color-stop(100%,rgba(255,0,0,0)));
background: -webkit-linear-gradient(left, rgba(255,0,0,1) 0%,rgba(255,0,0,0) 100%);
background: -o-linear-gradient(left, rgba(255,0,0,1) 0%,rgba(255,0,0,0) 100%);
background: -ms-linear-gradient(left, rgba(255,0,0,1) 0%,rgba(255,0,0,0) 100%);
background: linear-gradient(to right, rgba(255,0,0,1) 0%,rgba(255,0,0,0) 100%);
}

.campaign-public-layout #campaign-nav .nav-links li:hover {
background: -moz-linear-gradient(left, rgba(139,0,0,1) 0%, rgba(139,0,0,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(139,0,0,1)), color-stop(100%,rgba(139,0,0,0)));
background: -webkit-linear-gradient(left, rgba(139,0,0,1) 0%,rgba(139,0,0,0) 100%);
background: -o-linear-gradient(left, rgba(139,0,0,1) 0%,rgba(139,0,0,0) 100%);
background: -ms-linear-gradient(left, rgba(139,0,0,1) 0%,rgba(139,0,0,0) 100%);
background: linear-gradient(to right, rgba(139,0,0,1) 0%,rgba(139,0,0,0) 100%);
}

/* REMOVE CURRENT TEXT */
#campaign-nav .dashboard .nav-text,#campaign-nav .front-page .nav-text,#campaign-nav .forum .nav-text,#campaign-nav .calendar .nav-text,#campaign-nav .adventure-log .nav-text,#campaign-nav .wiki .nav-text,#campaign-nav .characters .nav-text,#campaign-nav .items .nav-text,#campaign-nav .maps .nav-text,#campaign-nav .settings .nav-text {
	font-size:0;
}

/* ADD NEW TEXT */
#campaign-nav .dashboard a:after {
	content:" Console";
}

#campaign-nav .front-page a:after {
	content:" Camp";
}

#campaign-nav .forum a:after {
	content:" Chatter";
}

#campaign-nav .calendar a:after {
	content:" Calendar";
}

#campaign-nav .adventure-log a:after {
	content:" Chronicle";
}

#campaign-nav .wiki a:after {
	content:" Codex";
}

#campaign-nav .characters a:after {
	content:" Characters";
}

#campaign-nav .items a:after {
         content:" Contrivances";
}

#campaign-nav .maps a:after {
	content:" Cartography";
}

#campaign-nav .settings a:after {
	content:" Controls";
}

/* FIXED NAV */
/* TARGET DESKTOPS AND LAPTOPS */
@media only screen and (min-width : 1224px) {
.front-nav-container {
position:fixed !important;
/* margin-top:-225px; */
}

.main-content-container {
margin-left:16.6667%;
}
}
/* END FIXED NAV */
/* END NAV MENU */

/* EDIT AND REVISION ICON COLOR AND STYLE */
.icon-edit,.sidebar-last-updated .revisions-link-container a {
	color:#fff!important;
	background-color:red;
	transition:all .5s ease-in-out;
	padding:5px;
}

.icon-edit:hover,.sidebar-last-updated .revisions-link-container a:hover {
	color:#fff!important;
	background-color:#8b0000;
	transition:all .5s ease-in-out;
}

#content .icon-edit, #content .revisions-link {
    font-family: "pictonic" !important;
}

/* LEFT BAR TEXT COLOR */
.sidebar-last-updated .updated-by-container .when .time {
	color:#000!important;
}

/* LINKS */
/* GENERAL COLOR */
#content .main-content-container a {
	color:red;
	transition:all .5s ease-in-out;
}

/* HIGHLIGHT UNCREATED PAGES */
a[href$="/new"] {
	background-color:#d98e34;
}

/* TITLE COLOR */
body.campaign-public-layout .title a {
	color:red;
	transition:all .5s ease-in-out;
}

/* HOVER COLOR */
#content .main-content-container a:hover {
	color:#900;
	transition:all .5s ease-in-out;
}

/* FRONT PAGE EDIT BUTTON */
.wiki-edit a:nth-child(1) {
	color:#fff!important;
}

.wiki-edit a:nth-child(1):hover {
	color:#fff!important;
}

/* MAP PAGE NEW BUTTON */
.new-map-button {
	color:#fff!important;
}

.new-map-button:hover {
	color:#fff!important;
}

/* NAME GENERATOR BUTTON */
.generate-button {
	color:#fff!important;
}

/* LOOK PUSHED ON CLICK */
a:not(.corner-add-button):not(.close-reveal-modal):not(.alert-button):not(.change-avatar-button):not(.edit-icon):active {
	position:relative;
	top:1px;
}

/* FOOTER LINKS */
.inline-list {
font-weight: bold;
}

/* END LINKS */
/* HEADERS */
h6,h5,h4,h3,h2,h1 {
	font-weight:700;
	font-family:'Berkshire Swash',cursive;
        clear: both;
}

/* TOP BAR */
/* TRANSPARENCY */
#top-bar {
	opacity:.5;
	transition:all .5s ease-in-out;
}

#top-bar:hover {
	opacity:1;
	transition:all .5s ease-in-out;
}

/* BORDER FOR SEARCH */
#campaign-search-input {
	border:solid 1px #fff;
	color:#fff!important;
}
/* END TOP BAR */

/* QUOTE STYLES */
.quote {
	font-style:italic;
	font-family:'Handlee',cursive;
	margin-top:10px;
	margin-bottom:10px;
	margin-left:50px;
	padding-left:15px;
	border-left:3px solid #8b0000;
}

.quote-character {
	font-style:italic;
	font-family:'Handlee',cursive;
	padding:18px 10px 18px 40px;
	background-color:#dadada;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	margin:5px;
	background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/103824/assets/421151/quote.png);
	background-position:middle left;
	background-repeat:no-repeat;
	text-indent:23px;
}

/* PRE TAG AS BOX */
pre {
	height:auto;
	max-height:200px;
	overflow:auto;
	background-color:#eee;
	word-break:normal!important;
	word-wrap:normal!important;
	white-space:pre!important;
}

/* VIDEO SIZE */
​iframe {
	max-width:700px;
}

.videoWrapper {
width: 90%;
margin: 20px auto;
        -webkit-box-shadow: 8px 8px 6px -6px black;
	-moz-box-shadow: 8px 8px 6px -6px black;
	box-shadow: 8px 8px 6px -6px black;
}

/* COLOR GM SCREEN */
.op-icon-gm {
	color:red!important;
}

.campaign-public-layout #campaign-summary-row .row {
	opacity:0!important;
	height:30px!important;
}

/* BETTER INPUT BOXES */
textarea,input {
	color:#202020;
}

input[type=text],textarea {
	-webkit-transition:all .3s ease-in-out;
	-moz-transition:all .3s ease-in-out;
	-ms-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	outline:none;
	padding:3px 0 3px 3px;
	margin:5px 1px 3px 0;
	border:1px solid #ddd;
}

input[type=text]:focus,textarea:focus {
	box-shadow:0 0 5px rgba(81,203,238,1);
	padding:3px 0 3px 3px;
	margin:5px 1px 3px 0;
	border:1px solid rgba(81,203,238,1);
}

/* POPUP NOTES */
.popupcontent {
position: fixed; 
top: 10%; 
left:30%; 
width:50%;
z-index: 20; 
background:#fff; 
font-size:10pt;
padding: 1em; 
color: #6d0808; 
box-shadow:0 10px 10px 4px rgba(0,0,0,0.3); 
visibility:hidden; 
opacity:0; 
transition:visibility 0s linear 0.5s,opacity 0.5s linear; 
} 

.popupbutton:hover + .popupcontent, .popupbutton:active + .popupcontent { 
visibility:visible; 
opacity:1; 
transition-delay:0s; 
}

/* CHARACTER POWERS */
/* ROGUE ABILITIES */
.backstab:after {
content:"You can inflict extra Damage with a Melee Attack.  You must approach your opponent with a Move Action and win an opposed test of your Dexterity (Stealth) vs. your target’s Perception (Seeing).  If you win, you can use your Melee Attack to Backstab him.  Gain a +2 bonus to the attack and +1D6 extra Damage.  You cannot Backstab an enemy that you begin adjacent to.";
}

.backstab.titleItem:after {
content:"Backstab";
}

.roguearmor:after {
content:"You are at home in Leather Armor.  You can ignore the Armor Penalty of Leather Armor altogether.  It affects neither your Speed nor your Dexterity.";
}

.roguearmor.titleItem:after {
content:"Rogue's Armor";
}
/* END ROGUE ABILITIES */

/* MAGE ABILITIES */
.arcanelance:after {
content:"Mages learn to focus magical power through a staff or wand.  If you are holding a quarterstaff or a wand, you can make a special ranged attack that damages foes with a lance of magical energy.  The attack uses Magic (Arcane Lance) with a range of 16 yards, and inflicts 1D6 + Magic Damage.  Costs 1 Mana.";
}

.arcanelance.titleItem:after {
content:"Arcane Lance";
}

.magictrain:after {
content:"The most important of the Mage’s powers.  It allows a Mage to cast the spells that are the trademark of the Class.  You get three Spells immediately, and you can gain more through Talents and Class Powers.";
}

.magictrain.titleItem:after {
content:"Magic Training";
}

.mana:after {
content:"You use Mana to power your Spells.  You have a number of Mana Points equal to 10 + Willpower + 1D6 and you gain Willpower + 1D6 more whenever you gain a new Character Level.  You must keep track of your current Mana Points; a measure of how much magical power is at your command at any given time.  You spend Mana Points when you cast spells; you can regain them through rest and meditation.";
}

.mana.titleItem:after {
content:"Mana Points";
}
/* END MAGE ABILITIES */

/* RACIAL ABILITIES */
.elvensight:after {
content:"Elves can see exceptionally well in the dark, their eyes are similar to that of a cat (they even glow).  Negate up to -1 from Darkness penalties related to Sight.";
}

.elvensight.titleItem:after {
content:"Elven Sight";
}
/* END RACIAL ABILITIES */

/* CLASS STUNT BONUES */
.roguestunt2:after {
content:"You become more adept at finding the weak spots in your opponents’ armor.  You can perform the Pierce Armor Stunt for 1 SP instead of the usual 2.";
}

.roguestunt2.titleItem:after {
content:"Level 2 Stunt Bonus";
}

.warriorstunt4:after {
content:"You can strike so fast in combat that your weapons are a blur. You can perform the Dual Strike stunt for 3 stunt points instead of the usual 4.";
}

.warriorstunt4.titleItem:after {
content:"Level 4 Stunt Bonus";
}

.warriorstunt7:after {
content:"You know how to unhinge your opponents.  You can perform the threaten stunt for 1 stunt point instead of the usual 2.";
}

.warriorstunt7.titleItem:after {
content:"Level 7 Stunt Bonus";
}
/* END CLASS STUNT BONUS */
/* END CHARACTER ABILITIES */
/* END POPUP CONTENT */

/* DETAIL BOX */
.detailbox {
	font-family:'Milonga',serif;
	background-color:#d3d3d3;
	max-width:45%;
	padding:10px;
	border:10px solid #8b0000;
	margin:0 2% 25px;
	float:left;
	word-wrap:break-word;
}

/* LEGAL BOX */
.legalbox {
	background-color:#d3d3d3;
	max-width:85%;
	padding:10px;
	border:5px solid #8b0000;
	margin-bottom:25px;
	margin-left:auto;
	margin-right:auto;
	word-wrap:break-word;
        -webkit-box-shadow: 8px 8px 6px -6px black;
	-moz-box-shadow: 8px 8px 6px -6px black;
	box-shadow: 8px 8px 6px -6px black;
}

.dar-small {
font-size: 8pt;
}

/* TABLE FUNCTIONALITY */
/* GENERIC TABLES */
#content table {
	border-style:none;
        font-size:11pt;
        word-wrap: break-word;
}
/* END GENERIC TABLES */

/* START BASIC TABLE */
.basicTable {
	margin:0;
	padding:0;
	width:100%;
        -webkit-box-shadow: 8px 8px 6px -6px black;
	-moz-box-shadow: 8px 8px 6px -6px black;
	box-shadow: 8px 8px 6px -6px black;
	border-style:none;
	-moz-border-radius-bottomleft:0;
	-webkit-border-bottom-left-radius:0;
	border-bottom-left-radius:0;
	-moz-border-radius-bottomright:0;
	-webkit-border-bottom-right-radius:0;
	border-bottom-right-radius:0;
	-moz-border-radius-topright:0;
	-webkit-border-top-right-radius:0;
	border-top-right-radius:0;
	-moz-border-radius-topleft:0;
	-webkit-border-top-left-radius:0;
	border-top-left-radius:0;
}

.basicTable table {
	border-collapse:collapse;
	border-spacing:0;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}

.basicTable tr:last-child td:last-child {
	-moz-border-radius-bottomright:0;
	-webkit-border-bottom-right-radius:0;
	border-bottom-right-radius:0;
}

.basicTable table tr:first-child td:first-child {
	-moz-border-radius-topleft:0;
	-webkit-border-top-left-radius:0;
	border-top-left-radius:0;
}

.basicTable table tr:first-child td:last-child {
	-moz-border-radius-topright:0;
	-webkit-border-top-right-radius:0;
	border-top-right-radius:0;
}

.basicTable tr:last-child td:first-child {
	-moz-border-radius-bottomleft:0;
	-webkit-border-bottom-left-radius:0;
	border-bottom-left-radius:0;
}

.basicTable tr:hover td {
	background-color:#f43030;
}

.basicTable td {
	vertical-align:middle;
	background-color:#fff;
	border-style:none;
	border-width:0 1px 1px 0;
	text-align:left;
	padding:7px;
	font-size:12px;
	font-family:Amaranth;
	font-weight:400;
	color:#000;
}

.basicTable tr:last-child td {
	border-width:0 1px 0 0;
}

.basicTable tr td:last-child {
	border-width:0 0 1px;
}

.basicTable tr:last-child td:last-child {
	border-width:0;
}

.basicTable tr:first-child td {
	background:-o-linear-gradient(bottom,red 5%,#bf0000 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,red),color-stop(1,#bf0000));
	background:-moz-linear-gradient(center top,red 5%,#bf0000 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0000",endColorstr="#bf0000");
	background:-o-linear-gradient(top,red,bf0000);
	background-color:red;
	border-style:none;
	text-align:center;
	border-width:0 0 1px 1px;
	font-size:16px;
	font-family:'Amaranth',sans-serif;
	font-weight:700;
	color:#fff;
}

.basicTable tr:first-child:hover td {
	background:-o-linear-gradient(bottom,red 5%,#bf0000 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,red),color-stop(1,#bf0000));
	background:-moz-linear-gradient(center top,red 5%,#bf0000 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0000",endColorstr="#bf0000");
	background:-o-linear-gradient(top,red,bf0000);
	background-color:red;
}

.basicTable tr:first-child td:first-child {
	border-width:0 0 1px;
}

.basicTable tr:first-child td:last-child {
	border-width:0 0 1px 1px;
}

a.dar-tableLink {
color:darkred !important;
}

a.dar-tableLink:hover {
color:white !important;
}

.basicTable.yellow tr:first-child td {
	background:#eae672;
}

.basicTable.blue tr:first-child td {
	background:#347fd0;
}

.basicTable.green tr:first-child td {
	background:#699B67;
}

.basicTable.magenta tr:first-child td {
	background:#b63ace;
}

.basicTable.navy tr:first-child td {
	background:#1E2227;
}

.basicTable.dblue tr:first-child td {
	background:#0000CC;
}
/* END BASIC TABLE */

/* ADD "(PDF)" AFTER LINKS TO PDFs */
a[href$=".pdf"]:after {
	content:" (PDF)";
}

/* IF FILE SIZE SPECIFIED AS DATA-SIZE ATTRIBUTE, USE THAT TOO */
a[href$=".pdf"][data-size]:after {
	content:" (PDF, " attr(data-size) ")";
}

/* ROUNDED IMAGE CORNERS */
.user-container img,.small-3 img,.small-2 img,.author img,.who img,.avatar img,.character-avatar img,.character-container img {
	-webkit-border-radius:25px;
	-moz-border-radius:25px;
	border-radius:25px;
}

/* ROUNDED CORNERS */
.round {
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	-khtml-border-radius:10px;
}

/* COMMENT FORMATTING */
.reveal-modal {
width: 50%;
margin-left: -25%;
}

.large-2 {
    width: 30.6667%;
}

.large-4:not(.columns) {
    width:50%;
}

.comment-header {
width: 35%;
margin: 0 2%;
}

.comment-text {
width: 85%;
margin: 0 2%;
}
/* END COMMENTS */

/* HORIZONTAL RULE */
hr.gradient_one {
    border: 0;
    height: 2px;
    background-image: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(102,0,0,0.75), rgba(255,0,0,0)); 
    background-image: -moz-linear-gradient(left, rgba(255,0,0,0), rgba(102,0,0,0.75), rgba(255,0,0,0)); 
    background-image: -ms-linear-gradient(left, rgba(255,0,0,0), rgba(102,0,0,0.75), rgba(255,0,0,0)); 
    background-image: -o-linear-gradient(left, rgba(255,0,0,0), rgba(102,0,0,0.75), rgba(255,0,0,0));
}

hr {
    border: 0;
    height: 2px;
    background-image: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(102,0,0,0.75), rgba(255,0,0,0)); 
    background-image: -moz-linear-gradient(left, rgba(255,0,0,0), rgba(102,0,0,0.75), rgba(255,0,0,0)); 
    background-image: -ms-linear-gradient(left, rgba(255,0,0,0), rgba(102,0,0,0.75), rgba(255,0,0,0)); 
    background-image: -o-linear-gradient(left, rgba(255,0,0,0), rgba(102,0,0,0.75), rgba(255,0,0,0));
}
/* END SITE WIDE */

/* RIGHT SIDE BAR */
/* REMOVE HIGHLIGHT ON USERS */
.sidebar-party-members .user-container,.sidebar-party-members .game-master,.fan-count-wrapper,.comment-count-wrapper {
	background:transparent;
}

.fan-count-wrapper,.comment-count-wrapper {
	transition:all .5s ease-in-out;
}

/* HOVER HIGHLIGHT */
.fan-count-wrapper:hover,.comment-count-wrapper:hover {
	background:none repeat scroll 0 0 rgba(125,125,125,0.3);
	transition:all .5s ease-in-out;
}

/* BLACK TEXT FOR VIEWING */
.campaign-public-layout #sidebar {
	color:#000;
}
/* END RIGHT SIDE BAR */

/* WIKI */
/* EDIT BUTTON POSITION */
.wiki-page-show .header-icon {
	position:absolute;
	top:20px;
	left:50px;
}

/* CODEX PAGE FONT */
.codexPost {
	font-family:'Amaranth',sans-serif;
}

/* LOCATION WIDGET */
.widget {
	margin:0 auto;
	position:relative;
	width: 100%;
        max-width:400px;
        min-width:285px;
	min-height:290px;
	border-top:1px solid rgba(255,255,255,.3);
	border-radius:4px;
	box-shadow:0 6px 10px rgba(0,0,0,0.6);
}

.ferelden {
	background:url(https://db4sgowjqfwig.cloudfront.net/campaigns/103824/assets/417876/ferelden_mini.png) top center no-repeat #f7f7f7;
}

.marches {
	background:url(https://db4sgowjqfwig.cloudfront.net/campaigns/103824/assets/417877/marches_mini.jpg) top center no-repeat #f7f7f7;
}

.orlais {
	background:url(https://db4sgowjqfwig.cloudfront.net/campaigns/103824/assets/417878/orlais_mini.jpg) top center no-repeat #f7f7f7;
}

.rivain {
	background:url(https://db4sgowjqfwig.cloudfront.net/campaigns/103824/assets/417879/rivain_mini.png) top center no-repeat #f7f7f7;
}

.effect {
	position:relative;
	-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.9),0 0 40px rgba(0,0,0,0.1) inset;
	-moz-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
	box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
}

.effect:before,.effect:after {
	content:"";
	position:absolute;
	z-index:-1;
	-webkit-box-shadow:0 0 50px rgba(0,0,0,0.8);
	-moz-box-shadow:0 0 150px rgba(0,0,0,0.8);
	box-shadow:0 0 50px rgba(0,0,0,0.8);
	top:0;
	bottom:0;
	left:10px;
	right:10px;
	-moz-border-radius:100px / 10px;
	border-radius:100px / 10px;
}

.effect:after {
	right:10px;
	left:auto;
	-webkit-transform:skew(8deg) rotate(3deg);
	-moz-transform:skew(8deg) rotate(3deg);
	-ms-transform:skew(8deg) rotate(3deg);
	-o-transform:skew(8deg) rotate(3deg);
	transform:skew(8deg) rotate(3deg);
}

.widget ul {
	background-color:#8b0000;
	margin-top:250px;
	box-shadow:0 -3px 3px rgba(0,0,0,.5);
	padding:0;
	line-height:50px;
}

.widget ul li {
	width:20%;
	padding:0;
	margin:0;
	display:inline-block;
	margin-left:-5px;
	text-align:center;
	font:14px Milonga,serif;
	line-height:20px;
	color:#fff;
	border-right:1px solid;
}

.widget ul li a {
	color:#fff!important;
}

.widget ul li a:hover {
	color:#fff!important;
}

.widget ul li:first-child {
	margin-left:0;
}

.widget ul li:last-child {
	border-right:none;
}

/* RIBBON MENU */
.ribbon {
	display:inline-block;
}

.ribbon:after,.ribbon:before {
	margin-top:.45em;
	content:"";
	float:left;
	border:.7em solid #8b0000;
}

.ribbon:after {
	border-right-color:transparent;
}

.ribbon:before {
	border-left-color:transparent;
}

.ribbon a:link,.ribbon a:visited,.ribbon a:hover {
	color:#fff!important;
	text-decoration:none;
	float:left;
	height:1.89em;
	overflow:hidden;
}

.ribbon span {
	background:#8b0000;
	display:inline-block;
	line-height:1.89em;
	font-size:11.6px;
	padding:0 .6em;
	margin-top:.6em;
	position:relative;
	-webkit-transition:background-color 0.2s,margin-top .2s;
	-moz-transition:background-color 0.2s,margin-top .2s;
/* Saf3.2+, Chrome */
	-ms-transition:background-color 0.2s,margin-top .2s;
/* FF4+ */
        -o-transition:background-color 0.2s,margin-top .2s;
/* IE10 */
	transition:background-color 0.2s,margin-top .2s;
}

.ribbon a:hover span {
	background:red;
	margin-top:0;
}

.ribbon span:before {
	content:"";
	position:absolute;
	top:2em;
	left:0;
	border-right:.5em solid #9B8651;
	border-bottom:.5em solid #8b0000;
}

.ribbon span:after {
	content:"";
	position:absolute;
	top:2em;
	right:0;
	border-left:.5em solid #9B8651;
	border-bottom:.5em solid #8b0000;
}
/* END WIKI* /
 
/* CHARACTERS */
/* TARGET DESKTOPS AND LAPTOPS */
@media only screen and (min-width : 1224px) {
/* 3 COLUMNS */
.character-list-item-container {
    position:relative!important;
    width:33.33%!important;
    height:125px!important;
    display:inline;
    clear:none!important;
    color:transparent;
}
}
/* END DESKTOP AND LAPTOP */

/* GM ONLY SLIGHTLY TRANSPARENT */
.character-list-item.gm-only {
	opacity:.5;
	transition:all .5s ease-in-out;
}

.character-list-item.gm-only:hover {
	opacity:1;
	transition:all .5s ease-in-out;
}

/* QUICK SEARCH TRANSPARENCY */
.character-search-area {
	opacity:.5;
	transition:all .5s ease-in-out;
}

.character-search-area:hover {
	opacity:1;
	transition:all .5s ease-in-out;
}

/* SEARCH TITLE COLOR */
.character-index.campaign-public-layout .character-quick-search h4, .item-index.campaign-public-layout .character-quick-search h4 {
	color:#8b0000;
}

/* POSITION EDIT BUTTON */
#character-details .icon-edit {
	position:relative;
	top:-23px;
	left:-5px;
}

/* SEARCH BUTTON ADJUSTMENTS */
span.postfix,.campaign-search-page .search-submit {
	background-color:red;
	transition:all .5s ease-in-out;
}

span.postfix:hover,.campaign-search-page .search-submit:hover {
	background-color:#8b0000;
	transition:all .5s ease-in-out;
}

span.postfix {
	margin-top:5px;
}

/* FILTER AREA ADJUSTMENTS */
form.custom .custom.checkbox {
	border-color:red;
}

/* GM ICON FIX */
.character-index.campaign-public-layout .character-list-item.gm-only .gm-only-icon {
	z-index:5;
}
/* END CHARACTERS */

/* ADVENTURE LOGS */
/* NO FADE EFFECT */
.adventure-log-index .overflow-fade-out,.post-content .overflow-fade-out {
	background:none;
	display:none;
}

/* POSITION AND STYLE CREATE BUTTON */
.adv-new {
	color:#fff!important;
	background-color:red!important;
	transition:all .5s ease-in-out;
	position:relative;
}

.adventure-log-index .adventure-log-new-container {
	background-color:transparent;
}

.adv-new:hover {
	color:#fff!important;
	background-color:#8b0000!important;
	transition:all .5s ease-in-out;
}

/* DATE PICKER FORMATTING */
/* TRANSPARENT HEADERS */
.adventure-log-index-filter .filter-container {
	background-color:transparent;
}

.adventure-log-index-filter .filter-header {
	background-color:transparent;
        font-family: "Berkshire Swash",cursive;
}
/* END HEADERS */

/* ACTIVE LINK COLOR */
.adventure-log-index-filter li.active a {
	color:#fff;
}

.adventure-log-index-filter ul .active {
	background-color:#8b0000;
}

/* END DATE PICKER */
/* DATE FORMATTING, LISTING*/
.adventure-log-post-container .post-date {
background: -moz-linear-gradient(top, rgba(139,0,0,1) 0%, rgba(139,0,0,1) 25%, rgba(139,0,0,0.36) 73%, rgba(139,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(139,0,0,1)), color-stop(25%,rgba(139,0,0,1)), color-stop(73%,rgba(139,0,0,0.36)), color-stop(100%,rgba(139,0,0,0)));
background: -webkit-linear-gradient(top, rgba(139,0,0,1) 0%,rgba(139,0,0,1) 25%,rgba(139,0,0,0.36) 73%,rgba(139,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(139,0,0,1) 0%,rgba(139,0,0,1) 25%,rgba(139,0,0,0.36) 73%,rgba(139,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(139,0,0,1) 0%,rgba(139,0,0,1) 25%,rgba(139,0,0,0.36) 73%,rgba(139,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(139,0,0,1) 0%,rgba(139,0,0,1) 25%,rgba(139,0,0,0.36) 73%,rgba(139,0,0,0) 100%);
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	-khtml-border-radius:10px;
}

/* HEADER ART */
.adventure-log-post .post-header,.campaign-map-index .map-placard {
	background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/103824/assets/417324/chronicle_title_bar.png);
	background-repeat:no-repeat;
	background-size:100% 100%;
	height:100px;
}

.post-header-container {
	margin-bottom:20px;
}

/* HEADER TEXT ADJUSTMENT */
/* POST TITLE */
.post-header .adventure-log-post-title {
	position:relative;
	left:15px;
	top:-5px;
	border-bottom:0 none!important;
	font-size:180%;
	font-family:'Berkshire Swash',cursive;
	color:#8b0000!important;
}

/* POST SUBTITLE */
.post-header .adventure-log-post-subtitle {
	position:relative;
	top:-20px;
	left:30px;
	border-bottom:0 none!important;
	font-size:130%;
	font-family:serif;
	color:#8b0000!important;
	font-weight:700;
}

/* LISTING TITLE */
.post-column .adventure-log-post-title,.map-entry h4 a {
	position:relative;
	left:26px;
	top:25px;
	width:75%;
	border-bottom:0 none!important;
	font-size:120%;
	font-family:'Berkshire Swash',cursive;
	color:#8b0000!important;
	text-shadow:-2px 0 black,0px -2px black,2px 0 black,0 2px #000;
}

.post-column .adventure-log-post-title a:hover,.map-entry h4 a:hover {
	text-shadow:none;
	text-shadow:-1px 1px 8px #ffc,1px -1px 8px #fff;
}

/* LISTING SUBTITLE */
.post-column .adventure-log-post-subtitle {
	position:relative;
	left:40px;
	top:15px;
	width:75%;
	font-weight:700;
	border-bottom:0 none!important;
	font-size:120%;
	font-family:serif;
	color:#8b0000!important;
}
/* END HEADER TEXT ADJUSTMENT */

/* INDIVIDUAL TEASER ICONS */
/* SET SPACE FOR ICON */
.teaser .adv-summary {
	width:80px;
	height:80px;
	float:left;
	margin:15px 5px 5px -20px;
	border-radius:5px;
	background-size:contain;
	background-repeat:no-repeat;
}

/* HIDE ICON IN FULL POST */
.full .adv-summary {
	width:0;
}

/* DEFINE POSTING ICONS */
.gm-logo {
	background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/103824/assets/438433/GM_Post.png);
}

.commentary-logo {
	background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/103824/assets/438423/commentary.png);
}

.cassius-logo {
	background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/103824/assets/402220/Cassius_Post.png);
}

.ceanna-logo {
	background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/103824/assets/402221/Ceanna_Post.png);
}

.elora-logo {
	background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/103824/assets/402222/Elora_Post.png);
}

.roland-logo {
	background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/103824/assets/414571/Roland_Post.png);
}

.arol-logo {
	background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/103824/assets/486559/Arol_Post.png);
}

/* UNIQUE FONTS FOR LOGS */
.gmPost {
	font-family:'Milonga',serif;
}

.brittPost {
font-family: ‘Sofia’, cursive;
}

.randyPost {
font-family: 'Waiting for the Sunrise', cursive;
}

.tomPost {
font-family: ‘Reenie Beanie’, cursive;
}

/* POST DATES */
/* PARCHMENT BACKGROUND */
.campaign-public-layout .sidebar-adventure-log-neighbors .neighbor-post {
	background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/103824/assets/417324/chronicle_title_bar.png);
	background-repeat:no-repeat;
	background-size:88% 100%;
	background-position:right top;
}

/* BAR NO BACKGROUND */
.campaign-public-layout .sidebar-adventure-log-neighbors .neighbor-post.current-post {
	background-image:url(’’)!important;
}

/* DATE SIZE, COLOR, AND POSITION */
.campaign-public-layout .sidebar-adventure-log-neighbors .small-4.columns.date-column.post-date {
	color:#8b0000!important;
	font-family:'Berkshire Swash',cursive!important;
	font-size:20pt!important;
	position:relative;
	left:15px;
	top:30px;
}

/* PREVIOUS SESSION SIZE, COLOR, AND POSITION */
.campaign-public-layout .sidebar-adventure-log-neighbors .small-8.columns.post-column {
	position:relative;
	left:-10px;
	top:20px;
}

/* PREVIOUS SESSION TITLE */
.sidebar-adventure-log-neighbors .neighbor-post .adventure-log-post-title {
	margin-top:-20px!important;
	margin-bottom:20px!important;
}
/* END ADVENTURE LOGS */

/* START MAPS */
.campaign-map-index #selected-map .map-name {
color:darkred;
}

body.campaign-public-layout .title {
border-bottom:none;
}
/* END MAPS */

/* CLEAN PAGE PARCHMENT */
/* BODY BACKGROUND */
.wiki-page,.adventure-log-show .post-main,body.campaign-public-layout .post-section.post-gm-only,body.campaign-public-layout .post-section.post-player-secret,.adventure-log-index .post-content,.character-index.campaign-public-layout .character-list-item,.character-search-area,#gm-secrets,.campaign-search-page #center-column, .character-show .main-content section, .item-index.campaign-public-layout .character-list-item,.item-show .main-content section,.campaign-map-index .map-edit-form .custom {
	background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/57369/assets/377938/Parchment-Body.png);
	background-position:center;
	background-size:100%;
	position:relative;
	padding:0 50px;
}

/* TARGET SMARTPHONES (PORTRAIT AND LANDSCAPE) */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
.wiki-page,.adventure-log-show .post-main,body.campaign-public-layout .post-section.post-gm-only,body.campaign-public-layout .post-section.post-player-secret,.adventure-log-index .post-content,.character-index.campaign-public-layout .character-list-item,.character-search-area,#gm-secrets,.campaign-search-page #center-column, .character-show .main-content section, .item-index.campaign-public-layout .character-list-item,.item-show .main-content section,.campaign-map-index .map-edit-form .custom {
	padding:0 10px;
}
}
/* END SMARTPHONES */

/* SIDEBARS BACKGROUND */
#sidebar .sidebar-party-members,.sidebar-last-updated,#sidebar .sidebar-quick-stats,#sidebar fan-counter-container,#sidebar .stream-module-container,#sidebar .adventure-log-index-filter, .character-show .character-avatar,.item-show .character-avatar {
	background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/57369/assets/377938/Parchment-Body.png);
	background-position:center;
	background-size:100%;
	position:relative;
	padding:5px 20px 0;
}

/* ADVENTURE LOG PADDING FIX */
.adventure-log-show .post-main,body.campaign-public-layout .post-section.post-gm-only,body.campaign-public-layout .post-section.post-player-secret,.adventure-log-index .post-content, .character-show .main-content section,.item-show .main-content section {
	padding:20px 50px 2px!important;
}

/* CHARACTER LIST PADDING FIX */
.character-index.campaign-public-layout .character-list-item,.item-index.campaign-public-layout .character-list-item {
	padding:0 0 0 9px!important;
}

/* CHARACTER AVATAR PADDING FIX */
.character-show .character-avatar,.item-show .character-avatar {
	padding:25px 15px;
}

/* GM SECRET PADDING FIX */
#gm-secrets {
	padding:15px 50px;
}

/* CHARACTER LIST PICTURE FIX */
.character-index.campaign-public-layout .character-list-item img,.item-index.campaign-public-layout .character-list-item.gm-only .gm-only-icon,.item-index.campaign-public-layout .character-list-item img {
	z-index:5;
}

/* UPDATE BAR PADDING FIX */
.updated-by-container {
	padding:25px 5px;
}

.sidebar-last-updated .updated-by-container .when .time {
	padding-top:0!important;
}

/* HEADER AND FOOTER SHARED PROPERTIES */
.wiki-page:after,.wiki-page:before,.adventure-log-show .post-main:after,.adventure-log-show .post-main:before,body.campaign-public-layout .post-section.post-gm-only:after,body.campaign-public-layout .post-section.post-gm-only:before,body.campaign-public-layout .post-section.post-player-secret:after,body.campaign-public-layout .post-section.post-player-secret:before,.adventure-log-index .post-content:after,.adventure-log-index .post-content:before,#sidebar .sidebar-party-members:after,#sidebar .sidebar-party-members:before,.sidebar-last-updated:after,.sidebar-last-updated:before,#sidebar .sidebar-quick-stats:after,#sidebar .sidebar-quick-stats:before,#sidebar fan-counter-container:after,#sidebar fan-counter-container:before,#sidebar .stream-module-container:after,#sidebar .stream-module-container:before,#sidebar .adventure-log-index-filter:after,#sidebar .adventure-log-index-filter:before,.character-index.campaign-public-layout .character-list-item:after,.character-index.campaign-public-layout .character-list-item:before,.character-search-area:after,.character-search-area:before,#gm-secrets:after,#gm-secrets:before,.campaign-search-page #center-column:after,.campaign-search-page #center-column:before, .character-show .character-avatar:after, .character-show .character-avatar:before, .character-show .main-content section:after, .character-show .main-content section:before,.item-index.campaign-public-layout .character-list-item:after,.item-index.campaign-public-layout .character-list-item:before,.item-show .main-content section:after,.item-show .main-content section:before,.item-show .character-avatar:after,.item-show .character-avatar:before,.campaign-map-index .map-edit-form .custom:after,.campaign-map-index .map-edit-form .custom:before {
	background-size:100%;
	position:absolute;
	background-repeat:no-repeat;
	background-width:100%;
	height:34px;
	content:"";
}

/* HEADER SPECIFIC */
.wiki-page:before,.adventure-log-show .post-main:before,body.campaign-public-layout .post-section.post-gm-only:before,body.campaign-public-layout .post-section.post-player-secret:before,.adventure-log-index .post-content:before,#sidebar .sidebar-party-members:before,.sidebar-last-updated:before,#sidebar .sidebar-quick-stats:before,#sidebar fan-counter-container:before,#sidebar .stream-module-container:before,#sidebar .adventure-log-index-filter:before,.character-index.campaign-public-layout .character-list-item:before,.character-search-area:before,#gm-secrets:before,.campaign-search-page #center-column:before, .character-show .character-avatar:before, .character-show .main-content section:before,.item-index.campaign-public-layout .character-list-item:before,.item-show .main-content section:before,.item-show .character-avatar:before,.campaign-map-index .map-edit-form .custom:before {
	background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/103824/assets/412593/top_large.png);
	top:-14px;
	background-position:center center;
	left:-1px;
	width:100%;
}

/* FOOTER SPECIFIC */
.wiki-page:after,.adventure-log-show .post-main:after,body.campaign-public-layout .post-section.post-gm-only:after,body.campaign-public-layout .post-section.post-player-secret:after,.adventure-log-index .post-content:after,#sidebar .sidebar-party-members:after,.sidebar-last-updated:after,#sidebar .sidebar-quick-stats:after,#sidebar fan-counter-container:after,#sidebar .stream-module-container:after,#sidebar .adventure-log-index-filter:after,.character-index.campaign-public-layout .character-list-item:after,.character-search-area:after,#gm-secrets:after,.campaign-search-page #center-column:after, .character-show .character-avatar:after, .character-show .main-content section:after,.item-index.campaign-public-layout .character-list-item:after,.item-show .main-content section:after,.item-show .character-avatar:after,.campaign-map-index .map-edit-form .custom:after {
	background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/103824/assets/412592/bottom_large.png);
	bottom:-14px;
	background-position:center center;
	left:6px;
	width:100%;
}
/* END PARCHMENT PAGES */

/* NEWS TICKER */
/* TICKER EFFECT */
@-webkit-keyframes ticker {
	0%   {margin-top: -4px;}
	25%  {margin-top: -34px;}
 	50%  {margin-top: -64px;}
	75%  {margin-top: -94px;}
	100% {margin-top: -4px;}
}
@-moz-keyframes ticker {
	0%   {margin-top: -4px;}
	25%  {margin-top: -34px;}
 	50%  {margin-top: -64px;}
	75%  {margin-top: -94px;}
	100% {margin-top: -4px;}
}
@-ms-keyframes ticker {
	0%   {margin-top: -4px;}
	25%  {margin-top: -34px;}
	50%  {margin-top: -64px;}
	75%  {margin-top: -94px;}
	100% {margin-top: -4px;}
}
@keyframes ticker {
	0%   {margin-top: -4px;}
	25%  {margin-top: -34px;}
	50%  {margin-top: -64px;}
	75%  {margin-top: -94px;}
	100% {margin-top: -4px;}
}

/* CONTAINING BOX */
.news {
	box-shadow:inset 0 -15px 30px rgba(0,0,0,0.4),0 5px 10px rgba(0,0,0,0.5);
	width:75%;
	height:30px;
	margin:20px auto;
	overflow:hidden;
	border-radius:4px;
	-webkit-user-select:none;
	padding:2px 1px 2px 0;
}

/* TARGET SMARTPHONES (PORTRAIT AND LANDSCAPE) */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
.news {
	width:100%;
}
}

/* BOX TITLE SPAN */
.news span {
	float:left;
	color:#fff;
	padding:3px;
	position:relative;
	border-radius:4px;
	box-shadow:inset 0 -15px 30px rgba(0,0,0,0.4);
	font:16px 'Source Sans Pro',Helvetica,Arial,sans-serif;
	-webkit-font-smoothing:antialiased;
	-webkit-user-select:none;
}

/* TICKER LIST FORMAT */
.news ul {
	float:left;
	padding-left:5px;
	-webkit-user-select:none;
	-webkit-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
        -moz-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
        -ms-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
        animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
}

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

/* LINK STYLE */
.news ul li a {
	color:#fff!important;
	font:14px Helvetica,Arial,sans-serif;
	-webkit-font-smoothing:antialiased;
	-webkit-user-select:none;
}

.news ul li a:hover {
	color:#fff!important;
}

/* PAUSE ON LIST HOVER */
.news ul:hover {
	animation-play-state:paused;
}

/* OPTIONAL PAUSE ON SPAN HOVER */
.news span:hover+ul {
	animation-play-state:paused;
	cursor:default;
}

/* BACKGROUND COLORS */
.blue {
	background:#347fd0;
}

.blue span {
	background:#2c66be;
}

.red {
	background:#d23435;
}

.red span {
	background:#c22b2c;
}

.green {
	background:#699B67;
}

.green span {
	background:#547d52;
}

.magenta {
	background:#b63ace;
}

.magenta span {
	background:#842696;
}

.yellow {
	background:#eae672;
}

.yellow span {
	background:#d3cf67;
}

.navy {
    background: #1E2227;
}

.navy span {
    border-top-color: #161A1F;
}
/* END NEWS TICKER */

/* POST IT NOTES */
.quote-container {
	margin-top:50px;
	margin-bottom:-25px;
	position:relative;
	z-index:2;
}

.note {
	color:#333;
	position:relative;
	width:55%;
	margin:0 auto;
	padding:20px;
	font-family:'Satisfy',cursive;
	font-size:20px;
	box-shadow:0 10px 10px 2px rgba(0,0,0,0.3);
}

.note .author {
	display:block;
	margin:40px 0 0;
	text-align:right;
}

.note.yellow {
	-webkit-transform:rotate(2deg);
	-moz-transform:rotate(2deg);
	-o-transform:rotate(2deg);
	-ms-transform:rotate(2deg);
	transform:rotate(2deg);
}

.note.blue {
	-webkit-transform:rotate(-4deg);
	-moz-transform:rotate(-4deg);
	-o-transform:rotate(-4deg);
	-ms-transform:rotate(-4deg);
	transform:rotate(-4deg);
}

.note.red {
	-webkit-transform:rotate(3deg);
	-moz-transform:rotate(3deg);
	-o-transform:rotate(3deg);
	-ms-transform:rotate(3deg);
	transform:rotate(3deg);
}

.note.green {
	-webkit-transform:rotate(-3deg);
	-moz-transform:rotate(-3deg);
	-o-transform:rotate(-3deg);
	-ms-transform:rotate(-3deg);
	transform:rotate(-3deg);
}

.note.magenta {
	-webkit-transform:rotate(4deg);
	-moz-transform:rotate(4deg);
	-o-transform:rotate(4deg);
	-ms-transform:rotate(4deg);
	transform:rotate(4deg);
}

.pin {
	background-color:#aaa;
	display:block;
	height:32px;
	width:2px;
	position:absolute;
	left:50%;
	top:-16px;
	z-index:3;
}

.pin:after {
	background-color:#A31;
	background-image:radial-gradient(25% 25%,circle,hsla(0,0%,100%,.3),hsla(0,0%,0%,.3));
	border-radius:50%;
	box-shadow:inset 0 0 0 1px hsla(0,0%,0%,.1),inset 3px 3px 3px hsla(0,0%,100%,.2),inset -3px -3px 3px hsla(0,0%,0%,.2),23px 20px 3px hsla(0,0%,0%,.15);
	content:'';
	height:12px;
	left:-5px;
	position:absolute;
	top:-10px;
	width:12px;
}

.pin:before {
	background-color:hsla(0,0%,0%,0.1);
	box-shadow:0 0 .25em hsla(0,0%,0%,.1);
	content:'';
	height:24px;
	width:2px;
	left:0;
	position:absolute;
	top:8px;
	transform:rotate(57.5deg);
	-moz-transform:rotate(57.5deg);
	-webkit-transform:rotate(57.5deg);
	-o-transform:rotate(57.5deg);
	-ms-transform:rotate(57.5deg);
	transform-origin:50% 100%;
	-moz-transform-origin:50% 100%;
	-webkit-transform-origin:50% 100%;
	-ms-transform-origin:50% 100%;
	-o-transform-origin:50% 100%;
}
/* END POST NOTES */

/* ASSORTED BUTTON FIXES */
/* EMBED BUTTONS */
.campaign-textarea-container .embed-buttons a,.campaign-textarea-container .embed-buttons a:hover {
	color:#fff!important;
}

/* PREVIEW BUTTON */
a[href$="/previews"] {
	color:#fff!important;
}

/* ADD SECRET BUTTON */
a.add-secrets-link,a.add-secrets-link:hover {
	color:#fff!important;
}

/* SAVE BUTTON */
.submit-button input:nth-child(1),.submit-button input:nth-child(1):hover {
	color:#fff!important;
}

/* REMOVE TAG */
ul.as-selections li a.as-close,ul.as-selections li a.as-close:hover {
	color:#fff!important;
}
/* END BUTTON FIXES */

/* LIST FIX */
li.underlined {
	border-bottom:0 solid transparent;
}

h3.underlined {
	border-bottom:1px solid #8b0000;
}

/* FRONT PAGE NOTICE */
.frontNotice {
	margin-bottom:-200px;
}

/* INFO AND WARNING BOXES */
p.info {
	position:relative;
	background:#A5DEE4;
	padding:2em 2em 1em;
	margin:24px;
	font-size:10pt;
	font-family:'Amaranth',sans-serif;
}

p.info:before {
	content:"Info";
	color:#fff;
	background:#33A6B8;
	display:block;
	position:absolute;
	top:-9px;
	left:-18px;
	padding:9px 18px;
	font-family:'Berkshire Swash',cursive;
}

p.info:after {
	content:" ";
	display:block;
	position:absolute;
	border:9px solid transparent;
	border-top-color:#2B5F75;
	border-right-color:#2B5F75;
	top:30px;
	left:-18px;
}

p.info.warning {
	background:#F4A7B9;
}

p.info.warning:before {
	content:"Warning";
	background:#C00;
	font-family:'Berkshire Swash',cursive;
}

p.info.warning:after {
	border-top-color:#8b0000;
	border-right-color:#8b0000;
}
/* END INFO AND WARNING BOXES */

/* CSS ONLY XP BAR */
.graph {
    width: 75%;
    height: 30px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #888;
    /* FALLBACK */
    background-color: #CCC;
    /* SAFARI 4, CHROME 1-9, IOS 3.2-4.3, ANDROID 2.1-3.0 */
    -webkit-gradient(linear, left top, right top, from(#A8A8A8), to(#CCC));
    /* SAFARI 5.1, IOS 5.0-6.1, CHROME 10-25, ANDROID 4.0-4.3 */
    background-image: -webkit-linear-gradient(left, #A8A8A8, #CCC);
    /* FIREFOX 3.6 - 15 */
    background-image: -moz-linear-gradient(center top, #A8A8A8, #CCC);
    /* OPERA 15+, CHROME 25+, IE 10+, FIREFOX 16+, SAFARI 6.1+, IOS 7+, ANDROID 4.4+ */
    background-image: linear-gradient(to right, #A8A8A8, #CCC);
    position: relative;
}

.bar {
    height: 29px;
    /* FALLBACK */
    background-color: red;
    /* SAFARI 4, CHROME 1-9, IOS 3.2-4.3, ANDROID 2.1-3.0 */
    -webkit-gradient(linear, left top, right top, from(darkred), to(red));
    /* SAFARI 5.1, IOS 5.0-6.1, CHROME 10-25, ANDROID 4.0-4.3 */
    background-image: -webkit-linear-gradient(left, darkred, red);
    /* FIREFOX 3.6 - 15 */
    background-image: -moz-linear-gradient(left, darkred, red);
    /* OPERA 15+, CHROME 25+, IE 10+, FIREFOX 16+, SAFARI 6.1+, IOS 7+, ANDROID 4.4+ */
    background-image: linear-gradient(to right, darkred, red);
}

.prestige {
    /* FALLBACK */
    background-color: gold;
    /* SAFARI 4, CHROME 1-9, IOS 3.2-4.3, ANDROID 2.1-3.0 */
    -webkit-gradient(linear, left top, right top, from(goldenrod), to(gold));
    /* SAFARI 5.1, IOS 5.0-6.1, CHROME 10-25, ANDROID 4.0-4.3 */
    background-image: -webkit-linear-gradient(left, goldenrod, gold);
    /* FIREFOX 3.6 - 15 */
    background-image: -moz-linear-gradient(left, goldenrod, gold);
    /* OPERA 15+, CHROME 25+, IE 10+, FIREFOX 16+, SAFARI 6.1+, IOS 7+, ANDROID 4.4+ */
    background-image: linear-gradient(to right, goldenrod, gold);
}

.xpValue {
    position: absolute;
    text-align: center;
    width: 100%;
    margin: 0px;
    line-height: 30px;
}
/* END XP BAR */

/* IMAGE HOVER MAGIC */
.view {
    width: 48%;
    max-width: 300px;
    min-width: 200px;
    height: 200px;
    margin: 10px 10px;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
        -webkit-box-shadow: 8px 8px 6px -6px black;
	-moz-box-shadow: 8px 8px 6px -6px black;
	box-shadow: 8px 8px 6px -6px black;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
}

.view .mask, .view .content {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}

.view img {
    display: block;
    position: relative
}

.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 5px;
    background: rgba(0, 0, 0, 0.8);
    margin: 10px 0 0 0
}

.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 10px 5px;
    text-align: center
}

.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}

.view a.info:hover {
    box-shadow: 0 0 5px #000
}

.view-tenth img { 
	transform: scaleY(1);
	transition: all 0.7s ease-in-out;
}

.view-tenth .mask { 
    background-color: rgba(255, 231, 179, 0.3); 
    transition: all 0.5s linear;
    opacity: 0;
}	

.view-tenth h2{
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: scale(0);
    color: #333;
    transition: all 0.5s linear;
    opacity: 0;
}

.view-tenth p {
    color: #333;
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}

.view-tenth a.info { 
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}

.view-tenth:hover img { 
	transform: scale(10);
    opacity: 0;
}

.view-tenth:hover .mask { 
	opacity: 1;
}																			 

.view-tenth:hover h2, .view-tenth:hover p, .view-tenth:hover a.info { 
    transform: scale(1);
    opacity: 1;
}

.floatLeft {
    float: left;
    clear: left;
}

.floatRight {
    float: right;
    clear: right;
}

/* TARGET SMARTPHONES (PORTRAIT AND LANDSCAPE) */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
.floatLeft {
    float: none;
    margin-left: auto;
    margin-right: auto;
}
}
/* END IMAGE HOVER */

/* BACKGROUND BOX */
.dar-bg-container {
width:50%;
float:right;
background-color:transparent;
font-family:arial;
font-size:9pt;
margin:0px 0px 20px 20px;
}

.dar-bg-container.creature {
width:47%;
}

/* TARGET SMARTPHONES (PORTRAIT AND LANDSCAPE) */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
.dar-bg-container {
width:100%;
float:none;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
}

.dar-bg-title {
color:#FFFFFF;
background-color:darkred;
font-weight:bold;
padding:1px 5px 1px 5px;
font-size:8pt;
}

.dar-bg-name {
background-color:#FFFFFF;
line-height:normal;
padding:0px 0px 0px 0px;
}

.dar-bg-name span {
padding-left:5px;
font-weight:bold;
}

.dar-bg-desc {
font-style:italic;
background: -moz-linear-gradient(left, rgba(255,0,0,0.1) 0%, rgba(255,0,0,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,0,0,0.1)), color-stop(100%,rgba(255,0,0,1)));
background: -webkit-linear-gradient(left, rgba(255,0,0,0.1) 0%,rgba(255,0,0,1) 100%);
background: -o-linear-gradient(left, rgba(255,0,0,0.1) 0%,rgba(255,0,0,1) 100%);
background: -ms-linear-gradient(left, rgba(255,0,0,0.1) 0%,rgba(255,0,0,1) 100%);
background: linear-gradient(to right, rgba(255,0,0,0.1) 0%,rgba(255,0,0,1) 100%);
padding:3px 5px 3px 5px;
}

.dar-bg-bonus {
background-color:#FFFFFF;
padding:2px 5px 2px 5px;
}
/* END BACKGROUND BOX */

/* ITEM COST */
.dar-item-cost {
width:100px;
height:100px;
background:url(https://db4sgowjqfwig.cloudfront.net/campaigns/103824/assets/486528/bag_of_coins.png) no-repeat;
background-size:100%;
text-align: center;
vertical-align: middle;
line-height:100px;
color:white;
text-shadow:-2px 0 black,0px -2px black,2px 0 black,0 2px #000;
}

/* REQUIRED STRENGTH */
.dar-str-req {
width:100px;
height:100px;
background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/103824/assets/486530/pip_str.png);
background-size:100%;
text-align: center;
vertical-align: middle;
line-height:100px;
color:white;
text-shadow:-2px 0 black,0px -2px black,2px 0 black,0 2px #000;
}

/* FRONT CONTENT */
.frontContent {
margin-right:5%;
margin-top:10px;
margin-bottom:10px;
}

/* DASHBOARD FIX */
.campaign-stream-module .recent-update .avatar img {
width: 50%
}

/* TOOLTIP TEST */
.mobile-tooltip {
    position: relative;
    background: transparent;
    cursor: help;
    display: inline-block;
    text-decoration: none;
    color: #222;
    outline: medium none;
}

.mobile-tooltip span {
    visibility: hidden;
    position: absolute;
    bottom: 30px;
    left: 50%;
    z-index: 999;
    width: 280px;
    margin-left: -127px;
    padding: 10px;
    border: 2px solid #CCC;
    opacity: 0.9;
    background-color: #DDD;
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    border-radius: 4px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.5) inset;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4);
}

.mobile-tooltip:hover {
  border: 0; /* IE6 fix */
  cursor:help;
}

.mobile-tooltip:hover span {
  visibility: visible;
}

.mobile-tooltip span:before, .mobile-tooltip span:after {
    content: "";
    position: absolute;
    z-index: 1000;
    bottom: -7px;
    left: 50%;
    margin-left: -8px;
    border-width: 8px 8px 0px;
    border-style: solid solid none;
    border-color: #DDD transparent -moz-use-text-color;
}

.mobile-tooltip span:before {
    border-top-color: #CCC;
    bottom: -8px;
}

.navy span {
    color: #FFF;
    text-shadow: 0px 1px 0px #000;
    border-color: #161A1F;
    background-color: #1E2227;
}

.navy span:after {
    border-top-color: #1E2227;
}

.navy span:before {
    border-top-color: #161A1F;
}
/* END TOOLTIP TEST */

/* TIMELINE FORMAT TEST */
/* TIMELINE RIBBON */
.ribbonTimeline {
    content: "";
    height: 80px;
}

.ribbonTimeline span {
    position: absolute;
    width: calc(100% + 5px);
    left: -10px;
    color: #FFF !important;
    font-family: "Amaranth",sans-serif;
    font-size: 10pt;
    padding: 10px 35px;
    border-radius: 2px;
    box-shadow: 0px 5px 2px rgba(30, 24, 21, 0.5);
    margin-bottom: 10px;
    text-shadow: none;
    background: radial-gradient(ellipse at center center , #B52020 0%, #B52020 53%, #9E2121 100%) repeat scroll 0% 0% transparent;
}

.ribbonTimeline span:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #1E1815 transparent transparent;
    bottom: -10px;
    z-index: -1;
}

.ribbonTimeline span:after {
    right: 0px;
    border-width: 10px 16px 0px 0px;
}

.ribbonTimeline span.interlink a {
    color: #FFF !important;
    word-wrap: break-word;
}

.ribbonTimeline span.interlink a:hover {
	color:#8b0000!important;
	text-shadow:-1px 1px 8px #ffc,1px -1px 8px #fff;
}

.ribbonTimeline:before, .ribbonTimeline:after {
    content: "";
    width: calc(100% + 86px);
    position: relative;
    display: block;
    z-index: 10;
    left: -43px;
}
/* END TIMELINE RIBBON */

/* TIMELINE LINE */
.timelinecontainer{
  position: relative;
  overflow: hidden;
}
 
.timelinemargin{
  height: 100%;
  position: absolute; 
  left: 50%;
  width: 2px;
  background: #b52020;
  bottom: 10px;
  margin-left: -1px;
  z-index: 87;
}
 
ul.timeline{
  width:100%;
  position: relative;
  list-style: none;
  overflow: hidden; 
  padding: 0px;
  margin: 0px;
}
 
.timeline li{
  width: 48%;
  background: rgba(246,234,213,0.7);
  border-radius:4px;
  margin: 10px 0 10px 0;
  padding: 0 10px 0 10px;
  position: relative;
}

.timeline div.age{
  font-family:Fondamento;
  font-size:125%;
  margin-left: calc( 50% - 45px );
  font-weight:bold;
  display: inline-block;
  background: #b52020;
  color:white;
  border-radius:50px;
  padding: 0 10px 0 10px;
  position: relative;
  z-index:88;
  width:90px;
  text-align:center;
}

.timeline div.year{
  font-family:Fondamento;
  font-size:125%;
  margin-left: calc( 50% - 35px );
  font-weight:bold;
  display: inline-block;
  background: #b52020;
  color:white;
  border-radius:50px;
  padding: 0 10px 0 10px;
  position: relative;
  z-index:88;
  width:70px;
  text-align:center;
}
 
.timeline li:before{
  border: 7px solid;
  content: '';
  display: block;
  position: absolute;
}
 
.timeline li:nth-child(even){
  float:right;
  clear:right;
}
.timeline li:nth-child(odd){
  float:left;
  clear:left;
}
 
.timeline li:nth-child(even):before{
  border-color: transparent rgba(246,234,213,0.7) transparent transparent;
  right: 100%;
  top: 10px;
}
 
.timeline li:nth-child(odd):before{
  border-color: transparent transparent transparent rgba(246,234,213,0.7);
  left: 100%;
  top: 10px;
}
/* END TIMELINE LINE */
/* END TIMELINE FORMAT TEST */

back.png

CSS

Dragon Age: Requiem alex_redeye alex_redeye