Whisperpedia

/* *************************************************
    Legacy default character styles, added for backwards compatibility
************************************************* */
body, html {padding: 0px; margin: 0px; font-family: Garamond, "Hoefler Text", "Times New Roman", Times, serif; font-size: 16px; letter-spacing: normal }

h1, h2, h3, h4, h5, h6 {font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; }

#toolbar {background: rgba(0, 0, 0, 0.5); width: 80%; margin-left: 10%; margin-right: 10%; -moz-border-radius: 0px 0px 5px 5px; -webkit-border-radius: 0px 0px 5px 5px; height: 25px; display: block; }
#toolbar ul {padding: 0px; padding-left: 20px; margin: 0px; list-style-type: none;}
#toolbar li {display: inline; margin-right: 10px;}

ul#toolbar-dropdown-nav li,ul#pagetabs li ul.nestedPages li {display: block; padding: 2px 14px; margin: 0px;}
ul#toolbar-dropdown-nav, ul.nestedPages {position: absolute; background: #ffffff; border: 1px solid black; margin-top: -2px; padding: 0px;}

#sitecontainer, #header-and-content-container {width: 100%; min-width: 1000px; }

#leftheaderside, #rightheaderside { height: 150px; width: 10%;float: left; }

#charheader {width: 80%; height: 150px; float: left; }
#charheader a {text-decoration: none;}
#headerholder {float: left; margin: 0px; padding: 0px; width: 100%;}
#charcontent {width: 74%; padding-left: 13%; padding-right: 13%; float: left; }
ul#pagetabs {list-style-type: none; }
ul#pagetabs li {float: left; margin: 10px; }
ul#pagetabs li ul.nestedPages li {float: none; margin: 0px;}

.portraitcontainer {float: left; margin: 27px 10px 0px 20px; width: 95px; height: 95px; border: 1px solid black; }
.portraitcontainer img {max-width: 95px; max-height: 95px;}
#characterName {font-size: 35px; padding-bottom: 0px; margin-bottom: 0px; padding-top: 15px; }
#playedBy {font-size: 15px; margin: 0px;display: inline; margin-left: 30px; }

.pagetitle {font-size: 30px; }
.widgetTitle {font-size: 20px; }

#footer {width: 74%; padding-left: 13%; padding-right: 13%; padding-top: 20px; float: left; clear: both; }
#footer p { font-size: 13px; font-style: italic; text-align: center;}

#charcontent-clear {clear: both;}

#mobileBackground {display: none;}

/* *************************************************
    Your own CSS starts here
************************************************* */

/* Whisperpedia free template by Shaun Kyle AKA Creepmachine */

body {
font-family: Arial;
background-color: #f6f6f6;
font-size: 11pt;
overflow-x: hidden;
    background-image: url(http://puu.sh/nV7Lu/7e03434bd4.png); /*This is the fake Wikipedia sidebar*/
    background-repeat: no-repeat;
}

#toolbar {
background: none !important;
margin-top: 10px;
}

#toolbar > ul {
float: right;
}

#toolbar > ul:before {
content: "Not logged in";
color: #707070;
font-size: 12px;
padding-right: 5px;
font-family: sans-serif;
background-image: url(https://en.wikipedia.org/w/skins/Vector/images/user-icon.png);
background-repeat: no-repeat;
    background-position: left center;
    padding-left: 15px;
}

#toolbar ul a {
    text-decoration: none;
    color: #0645ad;
    font-size: 12px;
}

#sitecontainer {
    width: 95%;
    margin-left: 13em;
}

.pagetitle, #headerholder .portraitcontainer {
display: none;
}

#header-and-content-container {
    background-color: #fff;
    border-left: 1px solid #a7d7f9;
    display: flex;
    flex-direction: column;
margin-top: 20px;
}

#leftheaderside, #rightheaderside {
display: none;
}

/* **** Navigation **** */

#alltabs {
margin-top: -120px;
    border-bottom: 1px solid #a7d7f9;
    margin-bottom: 0px;
    display: flex;
    flex-direction: column;
    margin-left: -25px;
    height: 50px;
background-color: #f6f6f6;
}

#alltabs ul#pagetabs {
    margin-left: -40px;
margin-top: 16px;
font-size: 12px;
}

#alltabs ul#pagetabs li {
padding: 10px;
    margin: 0px;
    border-right: 1px solid #a7d7f9;
background: rgba(246,246,246,1);
background: -moz-linear-gradient(top, rgba(246,246,246,1) 0%, rgba(246,246,246,1) 42%, rgba(223,237,245,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(246,246,246,1)), color-stop(42%, rgba(246,246,246,1)), color-stop(100%, rgba(223,237,245,1)));
background: -webkit-linear-gradient(top, rgba(246,246,246,1) 0%, rgba(246,246,246,1) 42%, rgba(223,237,245,1) 100%);
background: -o-linear-gradient(top, rgba(246,246,246,1) 0%, rgba(246,246,246,1) 42%, rgba(223,237,245,1) 100%);
background: -ms-linear-gradient(top, rgba(246,246,246,1) 0%, rgba(246,246,246,1) 42%, rgba(223,237,245,1) 100%);
background: linear-gradient(to bottom, rgba(246,246,246,1) 0%, rgba(246,246,246,1) 42%, rgba(223,237,245,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#dfedf5', GradientType=0 );
}

#alltabs ul#pagetabs li a:hover {
text-decoration: underline;
}

#alltabs ul#pagetabs li a:visited, #alltabs ul#pagetabs li a:active {
color: #0000EE;
}

#alltabs ul#pagetabs li.currentPage a {
color: #000;
}

#alltabs ul#pagetabs li.currentPage a:hover {
text-decoration: none;
}

#alltabs ul#pagetabs li.currentPage {
    background: none;
    padding: 10px;
    margin: 0px;
    border-right: 1px solid #a7d7f9;
border-bottom: 1px solid #fff;

background: rgba(246,246,246,1);
background: -moz-linear-gradient(top, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(246,246,246,1)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#ffffff', GradientType=0 );
}

/* End navigation */

/* ****Header and content**** */
#charheader {
width: 100%;
}

#headerholder {
margin-top: 8px;
padding-left: 25px;

}

#characterName {
    font-family: Georgia;
    font-weight: normal;
border-bottom: 1px solid #AEAEAE;
width: 90%;
}

#charcontent {
    padding-left: 25px;
    margin-top: -60px;
    width: 90%;
padding-right: 0px;
color: #353535;
}

#charcontent a {
text-decoration: none;
color: #0645ad;
}

#charcontent a:hover {
text-decoration: underline;
}

#charcontent a:active {
color: #faa700;
}

/* Collapse tags */
.bbcode_collapse {
text-indent: 50px;
}

.collapse_name {
border-bottom: none !important;
}

.collapse_name:after {
content: " ▼";
}

.collapse_content {
margin-top: -10px;
padding-left: 50px !important;
}

/* ****WIDGETS**** */

.widget {
margin-bottom: 20px;
}

.widgetTitle:not(#widget_348602) {
font-size: 25px;
    color: #000;
    font-family: Times;
    border-bottom: 1px solid #AEAEAE;
    font-weight: normal;
    margin-bottom: 8px;
}

/* **** SNIPPETS **** */
/* Styles for the side panels */


#widget_348563 { /* This will push the text widget that goes beside the side panel to the left so that they are beside one another. Without this things will go wonky */
float: left;
    width: 78%;
}

#widget_348589 { /* This and all styles selecting this particular ID is for the side panel */
width: 270px;
    background-color: #f6f6f6;
    padding: 10px;
    border: 1px solid #ccc;
    float: right;
    outline: 10px solid #fff;
    font-size: .9em;
    margin-left: 10px;
}

#widget_348589 .widgetTitle {
font-family: sans-serif;
    text-align: center;
    font-size: 1.2em;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 3px;
font-weight: bold;
    background-color: #f0e68c;
border: none !important;
}

#widget_348589 img {
margin-bottom: 5px;
}

#widget_348589 .text-widget-contents div:nth-child(2) {
text-align: center;
    background-color: #F0E68C;
    padding: 3px;
    margin-top: 10px;
}

/* Contents box */

#widget_348602, #widget_348973 { /* You'll need to add the IDs of each content box widget you use. */
margin-top: 170px;
    background-color: #f6f6f6;
    border: 1px solid #ccc;
    padding: 10px;
    width: 170px;
}

#widget_348602 .widgetTitle, #widget_348973 .widgetTitle {
text-align: center;
    font-family: sans-serif;
    font-size: .9em;
    color: #000;
    margin-top: 5px;
border: none;
    font-weight: bold;
}

#widget_348602 .text-widget-contents, #widget_348973 .text-widget-contents {
    line-height: 20px;
}

#widget_348973 { /* For second page contents. You'll probably have to adjust the margin for each content box on each page since this template is super hacky. */
margin-top: 70px;
}

/* Connections */
.charactertiescontainer table.friendswidgetwithnote {
    width: auto;
    clear: none;
    margin: 20px;
}

.charactertiescontainer h4 {
    clear: left;
    font-family: sans-serif;
    background-color: #f0e68c;
    padding: 5px;
    text-align: center;
}

.charactertiescontainer .friendswidget, .charactertiescontainer .friendswidgetwithnote {
background-color: #E3E3E3;
    border: solid 1px #ccc;
    padding: 10px;
}

/* Guestbook */

.guestbooktitle {
    font-family: sans-serif;
    background-color: #333;
    color: #fff;
    padding: 5px;
}

textarea.guestbookcomment {
font-family: courier;
}

ul.guestbook > li.guestbookcomment {
    background-color: #E3E3E3;
    border: 1px solid #ccc;
    padding: 10px;
}

ul.guestbook li {
margin: 10px;
}

/* Kudos */
#widget_348910 {
width: 400px;
    background-color: #f6f6f6;
    padding: 10px;
    border: 1px solid #ccc;
    float: right;
    outline: 10px solid #fff;
    font-size: .9em;
    margin-left: 10px;
}

.kudosForm h4 {
font-family: sans-serif;
}

#footer {
background-color: #FFF;
    border-left: 1px solid #a7d7f9;
    padding-left: 0%;
    width: 90%;
    border-bottom: 1px solid #a7d7f9;
    padding-bottom: 10px;
}

#footer a {
    font-style: normal;
    color: #686868;
}