Campaign of the Month: August 2013
Dragons of Autumn
CSS Code
Like the format of Autumn Dragons?
Here’s the CSS Code, feel free to use it!
* This code may not represent the current updates to the campaign. Stay tuned or favorite the campaign for updates to this page!
/**//* Definitions for custom animation effects *//**/
@keyframes blur {
from { filter:blur(25px); }
to { filter:blur(0px); }
}
@-webkit-keyframes blur {
from { -webkit-filter:blur(25px); }
to { -webkit-filter:blur(0px); }
}
@keyframes opacity {
from { opacity:0; filter:alpha(opacity=0); }
to { opacity:1; filter:alpha(opacity=1);}
}
@-webkit-keyframes opacity {
from { opacity:0; }
to { opacity:1; }
}
@keyframes opacity2 {
from { opacity:.5; filter:alpha(opacity=.5); }
to { opacity:.5; filter:alpha(opacity=.5);}
}
@-webkit-keyframes opacity2 {
from { opacity:.5; }
to { opacity:.5; }
}
@keyframes blur2 {
from { filter:blur(50px); }
to { filter:blur(0px); }
}
@-webkit-keyframes blur2 {
from { -webkit-filter:blur(50px); }
to { -webkit-filter:blur(0px); }
}
/**//* Global Page Changes *//**/
a:link {color:#669900;text-decoration:none;}
a:visited {color:#669900;text-decoration:none;}
a:hover {color:#80A71F;text-decoration:underline;}
a:active {color:#669900;text-decoration:none;}
a:create-wiki-page-link {color:red;}
body { font-family:‘Andalus’;}
h1, h2, h3, h4, h5 { font-family:“Palatino Linotype”; font-variant:small-caps; color:black;}
/**//* Wrapper encompasses the entire display except the background image *//**/
#wrapper {
border:none;
background-color:#F3E2A9;
margin-top: 10px;
margin-bottom: 10px;
border-image: url(http://cdn.obsidianportal.com/assets/219851/tester2.png) 45 45 stretch;
border-image-width: 30px;
border-image-outset: 27px;
min-height: 1200px;
}
#wrapper label { color:black; } /* Fixes font color for the label element */
#main-column { min-height:1200px; }
/**//* Header *//**/
#header {
background-color:#202020;
border:1px solid #DAA520;
border-radius:5px;
padding-left:5px;
width:38px;
box-shadow: 0px 0px 28px -6px #DAA520;
margin:5px 5px -55px 0px;
opacity:0.5;
filter:alpha(opacity=0);
filter:blur(50px);
-webkit-filter:blur(50px);
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
animation:blur2 0.6s 2s 1 forwards, opacity2 0.6s 2s 1 forwards;
-webkit-animation:blur2 0.6s 2s 1 forwards, opacity2 0.6s 2s 1 forwards;
}
#header:hover {
width:99%;
margin:5px 5px 5px 0px;
opacity:1;
filter:alpha(opacity=1);
transition:all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
}
#header #search {width:175px; padding-right:5px;}
#navigation ul li a { font-family:“Palatino Linotype”; font-variant:small-caps; font-weight:normal; color:#669900;}
#navigation ul li a:hover {color:#80A71F;text-decoration:underline;}
#navigation {width:600px;}
#campaign-banner-container {
background-image: url(http://cdn.obsidianportal.com/assets/219860/solace2.png);
box-shadow: 0px 0px 15px 7px #f3e2a9 inset;
border-radius: 15px;
margin-bottom:-25px;
}
/**//* Main Column *//**/
#content {
background-color:#F3E2A9;
border:none;
}
#campaign-content .controls img, #campaign-content .sidebar img {
display: inline-block; /* Used inline-block instead of block to prevent button errors on calendar page */
border-radius:10px;
box-shadow: 0px 0px 30px -5px #DAA520;
-webkit-box-shadow: 0px 0px 30px -5px #DAA520;
-moz-box-shadow: 0px 0px 30px -5px #DAA520;
}
/**//* Sidebar *//**/
/* Fixes display format of social sharing icons in sidebar */
.social-share-link img {
margin-top: 7px;
padding-left: 3px;
}
/* Places input form field on same line as submit button (Search this Campaign) */
input[type=“text”] { margin-left: auto; }
/* Fixes weird zero-space in search sidebar element */
#campaign-search-sidebar form { margin-top: 7px; }
/* Centers Fan icons */
.fan { margin-left: 7px; }
/* Fixes Google Terms of Service display issues */
#where-we-game-map a.gmnoprint.terms-of-use-link {
line-height: 0;
display: block;
margin-bottom: 5px;
}
#where-we-game-map span a {
display: block;
line-height: 0;
}
.sidebar a:link, .sidebar a:visited {
font-family: ‘Andalus’;
font-size: 14px;
}
.sidebar .recent-update { border-bottom:1px solid #DAA520; }
#secondary-column { min-height:auto; }
#secondary-column .sidebar {
border:1px solid #DAA520;
border-radius:6px;
padding:10px;
background-color:#F3E2A9;
color:black;
padding-top:5px;
box-shadow:0px 0px 28px -8px #DAA520;
margin-bottom:5px;
}
.sidebar { overflow:hidden; }
#campaign-controls-sidebar, #campaign-party-info-sidebar, #campaign-search-sidebar, #campaign-latest-updates-sidebar, #campaign-quick-stats-sidebar, #campaign-fans-sidebar, #wiki-page-tags-sidebar, #wiki-filter-by-tag-sidebar, #social-sharing-sidebar, #model-versions-sidebar, #wiki-page-tools-sidebar, #add-npc-sidebar, #sort-by-tag-sidebar, #manage-forums-sidebar, #calendar-next-event-sidebar, #calendar-subscribe-webcal-sidebar, #game-character-tools-sidebar, #campaign-where-we-game-sidebar, #game-contents-tags-sidebar, #wiki-help-sidebar {
max-height:15px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
#campaign-controls-sidebar:hover, #campaign-party-info-sidebar:hover, #campaign-search-sidebar:hover, #campaign-latest-updates-sidebar:hover, #campaign-quick-stats-sidebar:hover, #campaign-fans-sidebar:hover, #wiki-page-tags-sidebar:hover, #wiki-filter-by-tag-sidebar:hover, #social-sharing-sidebar:hover, #model-versions-sidebar:hover, #wiki-page-tools-sidebar:hover, #add-npc-sidebar:hover, #sort-by-tag-sidebar:hover, #manage-forums-sidebar:hover, #calendar-next-event-sidebar:hover, #calendar-subscribe-webcal-sidebar:hover, #game-character-tools-sidebar:hover, #campaign-where-we-game-sidebar:hover, #game-contents-tags-sidebar:hover, #wiki-help-sidebar:hover {
max-height:3000px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
#secondary-column #campaign-controls-sidebar h4, #secondary-column #campaign-party-info-sidebar h4, #secondary-column #campaign-search-sidebar h4, #secondary-column #campaign-latest-updates-sidebar h4, #secondary-column #campaign-quick-stats-sidebar h4, #secondary-column #campaign-fans-sidebar h4, #secondary-column #wiki-page-tags-sidebar h4, #secondary-column #wiki-filter-by-tag-sidebar h4, #secondary-column #social-sharing-sidebar h4, #secondary-column #model-versions-sidebar h4, #secondary-column #wiki-page-tools-sidebar h4, #secondary-column #add-npc-sidebar h4, #secondary-column #sort-by-tag-sidebar h4, #secondary-column #manage-forums-sidebar h4, #secondary-column #calendar-next-event-sidebar h4, #secondary-column #calendar-subscribe-webcal-sidebar h4, #secondary-column #game-character-tools-sidebar h4, #secondary-column #campaign-where-we-game-sidebar h4, #secondary-column #game-contents-tags-sidebar h4, #secondary-column #wiki-help-sidebar h4 { margin:0px; }
#secondary-column, #secondary-column h1, #secondary-column h2, #secondary-column h3, #secondary-column h4, #secondary-column h5, #secondary-column h6, #secondary-column p { color:black; }
#login-password-authentication { padding-top:25px; }
#secondary-column .sidebar h1, #secondary-column .sidebar h2, #secondary-column .sidebar h3, #secondary-column .sidebar h4 {
margin:5px;
border-bottom:1px solid #DAA520;
}
#secondary-column .sidebar p {
margin:5px;
color:black;
border-bottom:1px solid #DAA520;
font-size:14px;
}
#secondary-column .inline { color:black; }
#secondary-column form { color:#DAA520; }
#welcome {
color:black;
font-family:“Palatino Linotype”;
font-variant:small-caps;
font-size: 12px;
}
#welcome-avatar { border-right:1px solid #DAA520; }
#game-contents-ads-sidebar { display:none; } /* Ads? Naht in mah house #DikembeMutomboRocks */
/* Old code for replacing broken image links on third party login */
/* #openid-authentication-toggle a, #openid-authentication-toggle a.active, #openid-authentication-toggle a:visited.active {
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
font-size:0%;
max-height:14px;
border-color:#F3E2A9;
background-color:#F3E2A9;
background-image:none;
font-weight:normal;
color:black;
}
#openid-authentication-toggle a.rpxnow:before, #openid-authentication-toggle a:before {
content: “Third Party Login”;
font-family:“Palatino Linotype”;
font-variant:small-caps;
font-size:14px;
color:#B40404;
font-weight:bold;
background-image:url(“http://www.obsidianportal.com/assets/bg_table_header-efa160205251cdc0c1e3dc702239413a.gif”);
border-style:solid;
border-color:#DAA520;
border-width:1px;
padding-top:2px;
padding-right:10px;
padding-bottom:2px;
padding-left:10px;
float:right;
margin-right:10px;
text-decoration:none;
}
#openid-authentication-toggle a.rpxnow img, #openid-authentication-toggle a.rpxnow:active img {display:none;}
*/
/**//* Main Column Header (Tab Container and Navigation) *//**/
div.tab-container ul.tabnav, div.tab-container2 ul.tabnav, div.tab-container3 ul.tabnav {text-align:center; }
div.tab-container3 ul.tabnav { width:722px; } /* Designed for widescreen resolutions, but I’ve yet to encounter issues on other resolutions */
#campaign-content .tabnav {
margin:1px;
border-style:none;
background:none;
margin-bottom:7px;
}
.tabnav { background-image:none; }
#campaign-content .tabnav a:link, #campaign-header .tabnav a:link, #campaign-content .tabnav a:visited, #campaign-header .tabnav a:visited {
float:none;
font-family: “Palatino Linotype”; font-variant:small-caps;
font-size: 14px;
font-weight:normal;
background-color:#F3E2A9;
color:black;
border-style:solid;
border-color:#DAA520;
border-width:1px;
border-radius:4px;
padding: 0px 10px 2px 10px;
box-shadow: 0px 0px 50px -8px #DAA520;
text-decoration:none;
}
#campaign-header .tabnav a:link.active, #campaign-content .tabnav a:link.active, #campaign-header .tabnav a:visited.active, #campaign-content .tabnav a:visited.active {
background-image:url(“http://www.obsidianportal.com/assets/bg_table_header-efa160205251cdc0c1e3dc702239413a.gif”);
font-weight:bold;
color:#B40404;
border-style:solid;
border-color:#DAA520;
border-width:1px;
border-radius:4px;
padding: 0px 10px 2px 10px;
box-shadow: 0px 0px 50px -8px #DAA520;
text-decoration:none;
}
#campaign-header .tabnav li.adventure-log a, #campaign-header .tabnav li.adventure-log a.active, #campaign-header .tabnav li.adventure-log a:visited.active {
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
font-size:0%;
max-height:14px;
border-color:#F3E2A9;
background-color:#F3E2A9;
background-image:none;
font-weight:normal;
color:black;
text-decoration:none;
}
.adventure-log a:before {
content: “Session Log”;
font-size:14px;
color:black;
border-style:solid;
border-color:#DAA520;
border-width:1px;
padding-top:0px;
padding-right:10px;
padding-bottom:2px;
padding-left:10px;
border-radius:4px;
background-color:#f3e2a9;
box-shadow: 0px 0px 50px -8px #DAA520;
}
.adventure-log a.active:before {
content: “Session Log”;
font-size:14px;
color:#B40404;
font-weight:bold;
background-image:url(“http://www.obsidianportal.com/assets/bg_table_header-efa160205251cdc0c1e3dc702239413a.gif”);
border-style:solid;
border-color:#DAA520;
border-width:1px;
padding-top:0px;
padding-right:10px;
padding-bottom:2px;
padding-left:10px;
border-radius:4px;
background-color:#f3e2a9;
box-shadow: 0px 0px 50px -8px #DAA520;
}
.tabnav li.home a, .tabnav li.home a.active { display:none; }
/**//* Main Column Page Changes *//**/
#campaign-content {
border:none;
border-radius:5px;
}
#campaign-content a.create-wiki-page-link { color:red; }
/**//* Home Page Changes *//**/
#wiki-page-home-page .page-title { display:none; }
/**//* Adventure-Log/Session Log Page Changes *//**/
/* Modifications to pagination of all Summary Logs */
.pagination .disabled, .pagination .current, .pagination a:link, .pagination a:hover, .pagination a:active {
margin-top:5px;
padding:0px 8px 1px 8px;
margin-right:5px;
}
.pagination .disabled { color:#757575; }
.pagination .current { color:black; }
.pagination a:link, .pagination a:visited, .pagination a:active {
border-color:#DAA520;
border-radius:5px;
color:#669900;
box-shadow: 0px 0px 50px -8px #DAA520;
}
.pagination a:hover {
border-color:#DAA520;
border-radius:5px;
color:#80A71F;
box-shadow: 0px 0px 50px -8px #DAA520;
}
/* Modifications to next/previous links at the bottom of each log */
#post-navigation a:link, #post-navigation a:visited, #post-navigation a:active {
border-color:#DAA520;
color:#669900;
box-shadow: 0px 0px 50px -8px #DAA520;
border-radius:5px;
}
#post-navigation a:hover {
border-color:#DAA520;
color:#80A71F;
box-shadow: 0px 0px 50px -8px #DAA520;
border-radius:5px;
}
#post-navigation p { font-size:14px; }
/* Modifications to how the Summary Logs page appearance */
.post-header .comment-count {
font-weight:normal;
font-size:14px
}
.post-header h3.post-title {
width:600px; /* Again, designed for widescreen resolution, but it seems to work fine */
font-size:18px;
font-weight:normal;
}
.post-header .post-time {
font-weight:normal;
color:#DAA520;
}
/**//* Wiki Page Changes *//**/
#wiki-page-main-page .page-title { display:none; }
/* I think this is just some old code from when I tried to make a Session Log table */
/*
#wiki-page-main-page .textile_longtext table tr { background-image:url(“http://www.obsidianportal.com/assets/bg_table_header-efa160205251cdc0c1e3dc702239413a.gif”); } */
#wiki-page-main-page .textile_longtext table tbody tr th {
font-family:“Palatino Linotype”;
font-variant:small-caps;
color:#B40404;
}
.textile_longtext p {
text-align:justify;
text-indent:30px;
line-height:1.5em;
}
.textile_longtext p:first-letter {
font-size:30px;
font-family:‘openclassic’;
}
.session-menu {
float:left;
width:232px;
}
.session-menu ul { padding-left:40px; }
.page-body br { clear:left; }
.session-menu ul li {
font-size:14px;
margin-left:16px;
}
.session-menu ul li a {
display:block;
width:222px;
text-direction:none;
}
.page-body h3 hr {
border-width:2px;
border-color:#DAA520;
}
.wiki-page .gm-only {
border-top:1px solid #DAA520;
font-family:“Palatino Linotype”;
font-variant:small-caps;
}
.wiki-page .page-title {
font-family:“Palatino Linotype”;
font-variant:small-caps;
}
.page-body p {
font-family:“Andalus”;
font-size:16px;
}
.gm-only p {
font-family:“Andalus”;
font-size:16px;
}
.wiki-list-all ul li { font-family:“Andalus”; }
/* Secondary Tab Container/Navigation */
.textile_longtext .tabnav {
margin:1px;
border-style:none;
background:none;
margin-bottom:10px;
}
/* I originally HTML coded two additional tab-containers (i.e. “tab-container2” and “tab-container3”). My thinking was, if I had to manually insert the HTML into each wiki page, I better use different tab-containers. I could’ve just used the “tab-container” already provided by Obsidian Portal for my formatting choice; however, if I ever wanted a different format for each layer, I’d have to change the HTML code in every wiki page. Instead, I implemented the code now; however, three tab containers with three element states makes for a long CSS definition */
#wiki-page-main-page.wiki-page div.textile_longtext div.tab-container ul.tabnav li a:link, #wiki-page-main-page.wiki-page div.textile_longtext div.tab-container ul.tabnav li a:visited, #wiki-page-main-page.wiki-page div.textile_longtext div.tab-container ul.tabnav li a:hover, #campaign-content div.textile_longtext div.tab-container2 ul.tabnav li a:link, #campaign-content div.textile_longtext div.tab-container2 ul.tabnav li a:visited, #campaign-content div.textile_longtext div.tab-container2 ul.tabnav li a:hover, #campaign-content div.textile_longtext div.tab-container3 ul.tabnav li a:link, #campaign-content div.textile_longtext div.tab-container3 ul.tabnav li a:visited, #campaign-content div.textile_longtext div.tab-container3 ul.tabnav li a:hover {
float:none;
font-family: “Palatino Linotype”; font-variant:small-caps;
font-size: 14px;
font-weight:normal;
background-color:#F3E2A9;
color:black;
border-style:solid;
border-color:#DAA520;
border-width:1px;
text-decoration:none;
}
#wiki-page-main-page.wiki-page div.textile_longtext div.tab-container ul.tabnav li a:link.active, #wiki-page-main-page.wiki-page div.textile_longtext div.tab-container ul.tabnav li a:visited.active, #wiki-page-main-page.wiki-page div.textile_longtext div.tab-container ul.tabnav li a:hover.active, #campaign-content div.textile_longtext div.tab-container2 ul.tabnav li a:link.active, #campaign-content div.textile_longtext div.tab-container2 ul.tabnav li a:visited.active, #campaign-content div.textile_longtext div.tab-container2 ul.tabnav li a:hover.active, #campaign-content div.textile_longtext div.tab-container3 ul.tabnav li a:link.active, #campaign-content div.textile_longtext div.tab-container3 ul.tabnav li a:visited.active, #campaign-content div.textile_longtext div.tab-container3 ul.tabnav li a:hover.active {
background-image:url(“http://www.obsidianportal.com/assets/bg_table_header-efa160205251cdc0c1e3dc702239413a.gif”);
font-weight:bold;
color:#B40404;
border-style:solid;
border-color:#DAA520;
border-width:1px;
float:none;
font-family: “Palatino Linotype”; font-variant:small-caps;
font-size: 14px;
text-decoration:none;
}
.wiki-page .page-title {display:none;} /* Wiki page title removals for secondary tabnav */
/**//* Character Page Changes *//**/
#character-list h2 { display:none; }
.pc-list, .pc-list ul, .npc-list, .npc-list ul { text-align:center; }
.pc-list-title, .npc-list-title {
font-family:“Palatino Linotype”;
font-variant:small-caps;
}
.character-name, .character-tagline, .bio-header, .gm-only-header, .textile_longtext h2 {
font-family:“Palatino Linotype”;
font-variant:small-caps;
}
.character-list-item {
position:relative;
border:1px solid #DAA520;
border-radius:10px;
box-shadow: 0px 0px 30px -5px #DAA520;
-webkit-box-shadow: 0px 0px 30px -5px #DAA520;
-moz-box-shadow: 0px 0px 30px -5px #DAA520;
width:156px;
min-height:156px;
display:inline-block;
margin-bottom:5px;
margin-right:7px;
text-align:center;
background-repeat:no-repeat;
background-size:156px 156px;
overflow:hidden;
}
.character-list-item a {
position:absolute;
bottom:0px;
text-decoration:none;
display:block;
padding-top:130px;
width:95%;
text-align:right;
max-height:156px;
max-width:156px;
}
a.character_link {
font-size:20px;
font-weight:bold;
font-family:“Andalus”;
font-variant:small-caps;
text-shadow: -5px -1px 10px #F3E2A9, 5px -1px 10px #F3E2A9, -5px 1px 10px #F3E2A9, 5px 1px 10px #F3E2A9, 0px 0px 1px #F3E2A9, 0px 0px 2px #F3E2A9, 0px 0px 3px #F3E2A9, 0px 0px 4px #F3E2A9, 0px 0px 5px #F3E2A9, 0px 0px 6px #F3E2A9, 0px 0px 7px #F3E2A9, 0px 0px 8px #F3E2A9, 0px 0px 9px #F3E2A9, 0px 0px 10px #F3E2A9, 0px 0px 11px #F3E2A9, 0px 0px 12px #F3E2A9, 0px 0px 13px #F3E2A9, 0px 0px 14px #F3E2A9, 0px 0px 15px #F3E2A9, 0px 0px 16px #F3E2A9, 0px 0px 17px #F3E2A9, 0px 0px 18px #F3E2A9, 0px 0px 19px #F3E2A9, 0px 0px 20px #F3E2A9;
}
#character-list img.game-content-image, #character-list .tag-list { display:none; }
#campaign-content #character-list ul a:hover { text-decoration:none; }
/*Character page animation effects */
.pc-list .character-list-item a, .npc-list .character-list-item a {
filter:blur(25px);
-webkit-filter:blur(25px);
opacity:0;
filter:alpha(opacity=0);
animation: blur 0.6s 1 forwards, opacity 0.6s 1 forwards;
-webkit-animation: blur 0.6s 1 forwards, opacity 0.6s 1 forwards;
}
.npc-list .character-list-item a {
animation-delay:2s;
-webkit-animation-delay:2s;
}
/* Almaia */
.pc-list #character-list-item-298683 a {
animation-delay: 1500ms;
-webkit-animation-delay: 1500ms;
}
/* Donegin */
.pc-list #character-list-item-299142 a {
animation-delay: 3500ms;
-webkit-animation-delay: 3500ms;
}
/* Draigo */
.pc-list #character-list-item-299143 a {
animation-delay: 5500ms;
-webkit-animation-delay: 5500ms;
}
/* Grim */
.pc-list #character-list-item-382411 a {
animation-delay: 7500ms;
-webkit-animation-delay: 7500ms;
}
/* Kip */
.pc-list #character-list-item-299144 a {
animation-delay: 2500ms;
-webkit-animation-delay: 2500ms;
}
/* Mora */
.pc-list #character-list-item-299136 a {
animation-delay: 4500ms;
-webkit-animation-delay: 4500ms;
}
/* Yelfis */
.pc-list #character-list-item-298932 a {
animation-delay: 6500ms;
-webkit-animation-delay: 6500ms;
}
/*CHARACTER PORTRAIT ASSIGNMENTS FOR PLAYER CHARACTER LISTINGS*/
/* Almaia */
#character-list-item-298683.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/219444/Lauras_Almaia_Sketch_Small.jpg”); }
/* Donegin */
#character-list-item-299142.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/217048/Donegin.jpg”); }
/* Draigo */
#character-list-item-299143.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/216202/gully-dwarf-sorcerer.png”); }
/* Grim */
#character-list-item-382411.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/216175/grim.jpg”); }
/* Kip */
#character-list-item-299144.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/216177/kip.jpg”); }
/* Mora*/
#character-list-item-299136.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/216173/bubblebrewbysanura35d2z14zb.png”); }
/* Yelfis */
#character-list-item-298932.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/216201/Maegrym.png”); }
/*CHARACTER PORTRAIT ASSIGNMENTS FOR NPC LISTINGS*/
/* Baaz */
#character-list-item-297546.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/216418/Baaz_Draconian.png”); }
/* Bozak */
#character-list-item-297549.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/216440/Bozak_Draconian.jpg”); }
/* Eben */
#character-list-item-298567.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/216451/Eben.png”); }
/* Elistan */
#character-list-item-297543.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/216420/Elistan.jpg”); }
/* Fewmaster Toede */
#character-list-item-297534.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/216438/Toede.jpg”); }
/* Fizban */
#character-list-item-297558.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/216452/Fizban_the_Fabulous.png”); }
/* Gilthanas */
#character-list-item-297419.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/216423/Gilthanas.jpg”); }
/* Goldmoon */
#character-list-item-297397.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/216424/Goldmoon.jpg”); }
/* Highklahd Drooth */
#character-list-item-314837.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/216425/Highklahd_Drooth.png”); }
/* Kapak */
#character-list-item-297551.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/216426/Kapak_Draconian.png”); }
/* Khisanth */
#character-list-item-297537.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/216441/Khisanth.jpg”); }
/* Laurana */
#character-list-item-297420.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/216443/Laurana.jpg”); }
/* Maritta */
#character-list-item-314441.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/216427/Maritta.png”); }
/* Mishakal */
#character-list-item-297561.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/216428/Mishakal.png”); }
/* Riverwind */
#character-list-item-292182.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/216430/Riverwind.png”); }
/* Thane Highbulp */
#character-list-item-297398.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/216429/Phudge.png”); }
/* Theros Ironfeld*/
#character-list-item-297559.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/216455/Theros_2.png”); }
/* Tika Waylan */
#character-list-item-297553.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/216433/Tika_close.png”); }
/* Zirkan */
#character-list-item-377325.character-list-item { background-image: url(“http://cdn.obsidianportal.com/assets/216439/Zirkan.png”); }
/**//* Items Page *//**/
#item-list h2 { display:none; }
#item-list { text-align:center; }
.item-list-item {
position:relative;
border:1px solid #DAA520;
border-radius:10px;
box-shadow: 0px 0px 30px -5px #DAA520;
-webkit-box-shadow: 0px 0px 30px -5px #DAA520;
-moz-box-shadow: 0px 0px 30px -5px #DAA520;
width:156px;
min-height:156px;
display:inline-block;
margin-bottom:5px;
margin-right:7px;
text-align:center;
background-repeat:no-repeat;
background-size:156px 156px;
overflow:hidden;
}
a.item_link {
font-size:20px;
font-weight:bold;
font-family:“Andalus”;
font-variant:small-caps;
text-shadow: -5px -1px 10px #F3E2A9, 5px -1px 10px #F3E2A9, -5px 1px 10px #F3E2A9, 5px 1px 10px #F3E2A9, 0px 0px 1px #F3E2A9, 0px 0px 2px #F3E2A9, 0px 0px 3px #F3E2A9, 0px 0px 4px #F3E2A9, 0px 0px 5px #F3E2A9, 0px 0px 6px #F3E2A9, 0px 0px 7px #F3E2A9, 0px 0px 8px #F3E2A9, 0px 0px 9px #F3E2A9, 0px 0px 10px #F3E2A9, 0px 0px 11px #F3E2A9, 0px 0px 12px #F3E2A9, 0px 0px 13px #F3E2A9, 0px 0px 14px #F3E2A9, 0px 0px 15px #F3E2A9, 0px 0px 16px #F3E2A9, 0px 0px 17px #F3E2A9, 0px 0px 18px #F3E2A9, 0px 0px 19px #F3E2A9, 0px 0px 20px #F3E2A9;
}
#item-list img.game-content-image, #item-list .tag-list { display:none; }
#campaign-content #item-list ul a:hover { text-decoration:none; }
/* Animation code for items page */
.item-list .item-list-item a{
filter:blur(25px);
-webkit-filter:blur(25px);
opacity:0;
filter:alpha(opacity=0);
animation: blur 0.6s 1 forwards, opacity 0.6s 1 forwards;
-webkit-animation: blur 0.6s 1 forwards, opacity 0.6s 1 forwards;
}
.item-list-item a {
position:absolute;
bottom:0px;
text-decoration:none;
display:block;
padding-top:130px;
width:95%;
text-align:right;
max-height:156px;
max-width:156px;
}
/* Blue Crystal Staff */
#item-list-item-297344.item-list-item a {
animation-delay:2s;
-webkit-animation-delay:2s;
}
/* Charm of Animal Transformation */
#item-list-item-314355.item-list-item a {
animation-delay:2s;
-webkit-animation-delay:2s;
}
/* Disks of Mishakal */
#item-list-item-297392.item-list-item a {
animation-delay:2s;
-webkit-animation-delay:2s;
}
/* Dragonlance */
#item-list-item-475096.item-list-item a {
animation-delay:2s;
-webkit-animation-delay:2s;
}
/* Knowstones */
#item-list-item-382417.item-list-item a {
animation-delay:2s;
-webkit-animation-delay:2s;
}
/* Oldfather Stonefist */
#item-list-item-481074.item-list-item a {
animation-delay:2s;
-webkit-animation-delay:2s;
}
/* Spellbook of Fistandantilus */
#item-list-item-475094.item-list-item a {
animation-delay:2s;
-webkit-animation-delay:2s;
}
/* Wyrmslayer */
#item-list-item-304274.item-list-item a {
animation-delay:2s;
-webkit-animation-delay:2s;
}
/*ITEM PORTRAIT ASSIGNMENT LISTINGS*/
/* Blue Crystal Staff */
#item-list-item-297344.item-list-item {
background-image: url(“http://cdn.obsidianportal.com/assets/216470/Blue_Crystal_Staff_zoom.png”);
}
/* Charm of Animal Transformation */
#item-list-item-314355.item-list-item {
background-image: url(“http://cdn.obsidianportal.com/assets/216479/Charm_of_Animal_Transformation.png”);
}
/* Disks of Mishakal */
#item-list-item-297392.item-list-item {
background-image: url(“http://cdn.obsidianportal.com/assets/216474/Disks_of_Mishakal.png”);
}
/* Dragonlance */
#item-list-item-475096.item-list-item {
background-image: url(“http://cdn.obsidianportal.com/assets/216925/Dragonlance.png”);
}
/* Knowstones */
#item-list-item-382417.item-list-item {
background-image: url(“http://cdn.obsidianportal.com/assets/218268/Knowstones.png”);
}
/*Oldfather Stonefist */
#item-list-item-481074.item-list-item {
background-image: url(“http://cdn.obsidianportal.com/assets/220437/Oldfather_square.jpg”);
}
/* Spellbook of Fistandantilus */
#item-list-item-475094.item-list-item {
background-image: url(“http://cdn.obsidianportal.com/assets/216926/Spellbook_of_Fistandantilus.png”);
}
/* Wyrmslayer */
#item-list-item-304274.item-list-item {
background-image: url(“http://cdn.obsidianportal.com/assets/216478/Wyrmslayer.png”);
}
/**//* Forum Changes *//**/
.forum-breadcrumbs { display:none; }
tr.odd td { background-color:#ffc; }
tr.header-row th {
font-family:“Palatino Linotype”;
font-variant:small-caps;
color:#B40404;
}
/**//* Calendar Changes *//**/
.fc-header-title h2 {
font-family:“Palatino Linotype”;
font-variant:small-caps;
}
.fc-border-separate th {
font-family:“Palatino Linotype”;
font-variant:small-caps;
color:#B40404;
border-color:#DAA520;
}
.fc-border-separate td { border-color:#DAA520; }
.fc-event-skin {
border-color:#669900;
background-color:#669900;
text-align:center;
}
/**//* Maps Changes *//**/
.maps-list-header { display:none; }
.map-name { color:#669900; }
/**//* Footer *//**/
#footer {
background-color:#202020;
border:1px solid #DAA520;
border-radius:5px;
box-shadow: 0px 0px 28px 6px #DAA520;=-=-=-=-=-=-=-=-Interactive Map Section
margin-bottom: 5px;
height: 80px;
}
#footer a {
font-family:“Palatino Linotype”;
font-variant:small-caps;
font-weight:normal;
color:#669900;
}
/* ===-=-=-=-=-=-=-= */
/* Places the map in the correct position */
.mapZoomedContainer {
position: relative;
text-align: center;
top: 0px;
left: 0px;
width: 722px;
height: 502px;
}
/* Places the second map in the correct position */
.mapZoomedContainer2 {
position: relative;
text-align: center;
top: 0px;
left: 0px;
width: 722px;
height: 993px;
}
/* Modifies Horizontal Rule */
.mapZoomedContainer hr, .mapZoomedContainer2 hr { border-color:#DAA520; }
/* Hides the on hover information */
.hideMe { display:none; }
/* The Solace icon container */
.solaceIcon{
background-color:transparent;
width:68px;
height:68px;
background-size:cover;
z-index:5;
position:absolute;
transition: .3s;
-moz-transition: .3s; /* Firefox 4 */
-webkit-transition: .3s; /* Safari and Chrome */
-o-transition: .3s; /* Opera */
}
.mapZoomedContainer .solaceIcon:hover{
position:absolute;
margin-top:5px;
margin-left:-170px;
z-index:20;
font-size:14px;
font-family:“Andalus”;
color:#669900;
width:220px;
height:140px;
border:2px solid #DAA520;
background:#F3E2A9;
border-radius: 5px;
padding:5px 0 5px 5px;
opacity:.95;
filter:alpha(opacity=.95);
}
/* The right half of the information pop-up */
.solaceIcon .hideMe .popUpRight {
position:absolute;
right:0px;
top:0px;
width:100px;
height:150px;
padding-top:0%;
margin:2px 5px 5px 2px;
}
/* The left half of the information pop-up */
.solaceIcon .hideMe .popUpLeft {
position:absolute;
top:0px;
left:0px;
width:100px;
height:150px;
padding-top:0%;
margin:2px 2px 5px 5px;
}
/* Changes the popup to visible */
.solaceIcon:hover .hideMe{ display:block; }
/* The Que Shu icon container */
.queshuIcon{
background-color:transparent;
width:34px;
height:34px;
background-size:cover;
z-index:5;
position:absolute;
transition: .3s;
-moz-transition: .3s; /* Firefox 4 */
-webkit-transition: .3s; /* Safari and Chrome */
-o-transition: .3s; /* Opera */
}
.mapZoomedContainer .queshuIcon:hover{
position:absolute;
margin-top:-5px;
margin-left:-100px;
z-index:20;
font-size:14px;
font-family:“Andalus”;
color:#669900;
width:205px;
height:150px;
border:2px solid #DAA520;
background:#F3E2A9;
border-radius: 5px;
padding:5px 0 5px 5px;
opacity:.95;
filter:alpha(opacity=.95);
}
/* The right half of the information pop-up */
.queshuIcon .hideMe .popUpRight {
position:absolute;
right:0px;
top:0px;
width:100px;
height:140px;
padding-top:0%;
margin:2px 5px 5px 2px;
}
/* The left half of the information pop-up */
.queshuIcon .hideMe .popUpLeft {
position:absolute;
top:0px;
left:0px;
width:100px;
height:140px;
padding-top:0%;
margin:2px 2px 5px 5px;
}
/* Changes the popup to visible */
.queshuIcon:hover .hideMe{ display:block; }
/* The Xak Tsaroth icon container */
.xaktsarothIcon{
background-color:transparent;
width:68px;
height:68px;
background-size:cover;
z-index:5;
position:absolute;
transition: .3s;
-moz-transition: .3s; /* Firefox 4 */
-webkit-transition: .3s; /* Safari and Chrome */
-o-transition: .3s; /* Opera */
}
.mapZoomedContainer .xaktsarothIcon:hover{
position:absolute;
margin-top:5px;
margin-left:-175px;
z-index:20;
font-size:14px;
font-family:“Andalus”;
color:#669900;
width:240px;
height:220px;
border:2px solid #DAA520;
background:#F3E2A9;
border-radius: 5px;
padding:2px 0 5px 5px;
opacity:.95;
filter:alpha(opacity=.95);
}
/* The right half of the information pop-up */
.xaktsarothIcon .hideMe .popUpRight {
position:absolute;
right:0px;
top:0px;
width:115px;
height:190px;
padding-top:0%;
margin:2px 5px 5px 2px;
}
/* The left half of the information pop-up */
.xaktsarothIcon .hideMe .popUpLeft {
position:absolute;
top:0px;
left:0px;
width:115px;
height:190px;
padding-top:0%;
margin:2px 2px 5px 5px;
}
/* Changes the popup to visible */
.xaktsarothIcon:hover .hideMe{ display:block; }
/* The Kingdom of Phudge icon container */
.phudgeIcon{
background-color:transparent;
width:34px;
height:34px;
background-size:cover;
z-index:5;
position:absolute;
transition: .3s;
-moz-transition: .3s; /* Firefox 4 */
-webkit-transition: .3s; /* Safari and Chrome */
-o-transition: .3s; /* Opera */
}
.mapZoomedContainer .phudgeIcon:hover{
position:absolute;
margin-top:-5px;
margin-left:-40px;
z-index:20;
font-size:14px;
font-family:“Andalus”;
color:#669900;
width:205px;
height:140px;
border:2px solid #DAA520;
background:#F3E2A9;
border-radius: 5px;
padding:5px 0 5px 5px;
opacity:.95;
filter:alpha(opacity=.95);
}
/* The right half of the information pop-up */
.phudgeIcon .hideMe .popUpRight {
position:absolute;
right:0px;
top:0px;
width:100px;
height:140px;
padding-top:0%;
margin:2px 5px 5px 2px;
}
/* The left half of the information pop-up */
.phudgeIcon .hideMe .popUpLeft {
position:absolute;
top:0px;
left:0px;
width:100px;
height:140px;
padding-top:0%;
margin:2px 2px 5px 5px;
}
/* Changes the popup to visible */
.phudgeIcon:hover .hideMe{ display:block; }
/* The Qualinost icon container */
.qualinostIcon{
background-color:transparent;
width:68px;
height:68px;
background-size:cover;
z-index:5;
position:absolute;
transition: .3s;
-moz-transition: .3s; /* Firefox 4 */
-webkit-transition: .3s; /* Safari and Chrome */
-o-transition: .3s; /* Opera */
}
.mapZoomedContainer .qualinostIcon:hover{
position:absolute;
margin-top:-70px;
margin-left:-190px;
z-index:20;
font-size:14px;
font-family:“Andalus”;
color:#669900;
width:240px;
height:125px;
border:2px solid #DAA520;
background:#F3E2A9;
border-radius: 5px;
padding:2px 0 5px 5px;
opacity:.95;
filter:alpha(opacity=.95);
}
/* The right half of the information pop-up */
.qualinostIcon .hideMe .popUpRight {
position:absolute;
right:0px;
top:0px;
width:115px;
height:120px;
padding-top:0%;
margin:2px 5px 5px 2px;
}
/* The left half of the information pop-up */
.qualinostIcon .hideMe .popUpLeft {
position:absolute;
top:0px;
left:0px;
width:115px;
height:120px;
padding-top:0%;
margin:2px 2px 5px 5px;
}
/* Changes the popup to visible */
.qualinostIcon:hover .hideMe{ display:block; }
/* The Pax Tharkas icon container */
.paxIcon{
background-color:transparent;
width:115px;
height:68px;
background-size:cover;
z-index:5;
position:absolute;
transition: .3s;
-moz-transition: .3s; /* Firefox 4 */
-webkit-transition: .3s; /* Safari and Chrome */
-o-transition: .3s; /* Opera */
}
.mapZoomedContainer2 .paxIcon:hover{
position:absolute;
margin-top:5px;
margin-left:-95px;
z-index:20;
font-size:14px;
font-family:“Andalus”;
color:#669900;
width:240px;
height:220px;
border:2px solid #DAA520;
background:#F3E2A9;
border-radius: 5px;
padding:2px 0 5px 5px;
opacity:.95;
filter:alpha(opacity=.95);
}
/* The right half of the information pop-up */
.paxIcon .hideMe .popUpRight {
position:absolute;
right:0px;
top:0px;
width:115px;
height:190px;
padding-top:0%;
margin:2px 5px 5px 2px;
}
/* The left half of the information pop-up */
.paxIcon .hideMe .popUpLeft {
position:absolute;
top:0px;
left:0px;
width:115px;
height:190px;
padding-top:0%;
margin:2px 2px 5px 5px;
}
/* Changes the popup to visible */
.paxIcon:hover .hideMe{ display:block; }
/* The Neidar Village icon container */
.neidarIcon{
background-color:transparent;
width:68px;
height:68px;
background-size:cover;
z-index:5;
position:absolute;
transition: .3s;
-moz-transition: .3s; /* Firefox 4 */
-webkit-transition: .3s; /* Safari and Chrome */
-o-transition: .3s; /* Opera */
}
.mapZoomedContainer2 .neidarIcon:hover{
position:absolute;
margin-top:-5px;
margin-left:-100px;
z-index:20;
font-size:14px;
font-family:“Andalus”;
color:#669900;
width:205px;
height:150px;
border:2px solid #DAA520;
background:#F3E2A9;
border-radius: 5px;
padding:5px 0 5px 5px;
opacity:.95;
filter:alpha(opacity=.95);
}
/* The right half of the information pop-up */
.neidarIcon .hideMe .popUpRight {
position:absolute;
right:0px;
top:0px;
width:100px;
height:140px;
padding-top:0%;
margin:2px 5px 5px 2px;
}
/* The left half of the information pop-up */
.neidarIcon .hideMe .popUpLeft {
position:absolute;
top:0px;
left:0px;
width:100px;
height:140px;
padding-top:0%;
margin:2px 2px 5px 5px;
}
/* Changes the popup to visible */
.neidarIcon:hover .hideMe{ display:block; }
/* The Hopeful Vale icon container */
.valeIcon{
background-color:transparent;
width:68px;
height:68px;
background-size:cover;
z-index:5;
position:absolute;
transition: .3s;
-moz-transition: .3s; /* Firefox 4 */
-webkit-transition: .3s; /* Safari and Chrome */
-o-transition: .3s; /* Opera */
}
.mapZoomedContainer2 .valeIcon:hover{
position:absolute;
margin-top:-5px;
margin-left:-100px;
z-index:20;
font-size:14px;
font-family:“Andalus”;
color:#669900;
width:205px;
height:150px;
border:2px solid #DAA520;
background:#F3E2A9;
border-radius: 5px;
padding:5px 0 5px 5px;
opacity:.95;
filter:alpha(opacity=.95);
}
/* The right half of the information pop-up */
.valeIcon .hideMe .popUpRight {
position:absolute;
right:0px;
top:0px;
width:100px;
height:140px;
padding-top:0%;
margin:2px 5px 5px 2px;
}
/* The left half of the information pop-up */
.valeIcon .hideMe .popUpLeft {
position:absolute;
top:0px;
left:0px;
width:100px;
height:140px;
padding-top:0%;
margin:2px 2px 5px 5px;
}
/* Changes the popup to visible */
.valeIcon:hover .hideMe{ display:block; }
/* The Skullcap Mountain icon container */
.skullIcon{
background-color:transparent;
width:68px;
height:63px;
background-size:cover;
z-index:5;
position:absolute;
transition: .3s;
-moz-transition: .3s; /* Firefox 4 */
-webkit-transition: .3s; /* Safari and Chrome */
-o-transition: .3s; /* Opera */
}
.mapZoomedContainer2 .skullIcon:hover{
position:absolute;
margin-top:5px;
margin-left:-85px;
z-index:20;
font-size:14px;
font-family:“Andalus”;
color:#669900;
width:220px;
height:165px;
border:2px solid #DAA520;
background:#F3E2A9;
border-radius: 5px;
padding:5px 0 5px 5px;
opacity:.95;
filter:alpha(opacity=.95);
}
/* The right half of the information pop-up */
.skullIcon .hideMe .popUpRight {
position:absolute;
right:0px;
top:0px;
width:100px;
height:150px;
padding-top:0%;
margin:2px 5px 5px 2px;
}
/* The left half of the information pop-up */
.skullIcon .hideMe .popUpLeft {
position:absolute;
top:0px;
left:0px;
width:100px;
height:150px;
padding-top:0%;
margin:2px 2px 5px 5px;
}
/* Changes the popup to visible */
.skullIcon:hover .hideMe{ display:block; }
/* The Northgate icon container */
.northgateIcon{
background-color:transparent;
width:68px;
height:68px;
background-size:cover;
z-index:5;
position:absolute;
transition: .3s;
-moz-transition: .3s; /* Firefox 4 */
-webkit-transition: .3s; /* Safari and Chrome */
-o-transition: .3s; /* Opera */
}
.mapZoomedContainer2 .northgateIcon:hover{
position:absolute;
margin-top:5px;
margin-left:-170px;
z-index:20;
font-size:14px;
font-family:“Andalus”;
color:#669900;
width:220px;
height:140px;
border:2px solid #DAA520;
background:#F3E2A9;
border-radius: 5px;
padding:5px 0 5px 5px;
opacity:.95;
filter:alpha(opacity=.95);
}
/* The right half of the information pop-up */
.northgateIcon .hideMe .popUpRight {
position:absolute;
right:0px;
top:0px;
width:100px;
height:150px;
padding-top:0%;
margin:2px 5px 5px 2px;
}
/* The left half of the information pop-up */
.northgateIcon .hideMe .popUpLeft {
position:absolute;
top:0px;
left:0px;
width:100px;
height:150px;
padding-top:0%;
margin:2px 2px 5px 5px;
}
/* Changes the popup to visible */
.northgateIcon:hover .hideMe{ display:block; }
/**//* Do a little dance, *//**/
/**//* Make a little love, *//**/
/**//* Get down tonight. *//**/
by:
robertkety