Pastel Perfection

/*Main Body*/
body {
background: url(https://i.imgur.com/0y1v6YE.png) center center;
font-family: belleza, arial, sans-serif;
color: #edd6d2;
}

html, body {
max-width: 100%;
max-height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}

/*Main Container*/
#sitecontainer {
width: 1240px;
margin: 0 auto;
background: transparent;
padding: 10px;
}

/*header and container piece*/
#header-and-content-container {
margin: 0 auto;
display: table;
background-image: url(https://i.imgur.com/oksi6HA.png);
background-repeat: no-repeat;
background-position: center center;
width: 1240px;
height: 881px;
margin-top: -40px;
}

/*widget container*/
#charcontent {
float: none;
width: 790px;
margin 0 auto !important;
margin-left: 210px !important;
height: 400px;
overflow: auto;
color: #a54765;
font-size: 14px;
scrollbar-color: #e7b5af #9987ba;
scrollbar-width: thin;
}

/*Toolbar and Dropdown Pieces*/
#toolbar {
text-align: center;
margin-top: 30px;
font-size: 16px;
width: 1240px;
font-family: belleza, arial, sans-serif;
}

#toolbar a {
color: #9987ba;
}

ul#toolbar-dropdown-nav, #charheader ul.nestedPages {
background: #e6b3ae;
border: 1px solid #9987ba !important;
}

/*background on hover for dropdowns*/
#toolbar ul#toolbar-dropdown-nav .dropdown-hover, #charheader ul.nestedPages .dropdown-hover {
background: #edd6d2;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

/*Toolbar only*/
#toolbar-dropdown-nav a {
color: #9987ba !important;
font-weight: normal;
font-size: 15px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

/*Toolbar and Dropdown Links*/
#toolbar-dropdown-nav a:hover,  #charheader ul.nestedPages .dropdown-hover a:hover {
color: #9987ba !important;
}

/*Header, Portrait, Character Title, and Player Link*/
#charheader {
text-align: center;
padding-top: 60px;
margin-top: 30px;
}

#charheader .portraitcontainer {
margin: 0 auto;
float: none;
martin-top: 40px;
background-image: url(https://i.imgur.com/TCiQsMD.png);
height: 146px;
width:150px;
}

#charheader .portraitcontainer img {
border-radius: 100%;
height: 100px;
width: 100px;
margin-top:23px;
}
charheader .portraitcontainer:before {
position: relative;
top:98px;
left:-3px;
}

#characterName {
color: #cbac7c;
font-size: 100px;
font-family: dancing script, arial, sans-serif;
font-weight: normal;
margin-bottom: 80px;
margin-top: -75px;
margin-right: 0px;
height: 150px;
background: url(https://i.imgur.com/o3eUMwM.png) repeat bottom right;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#playedBy {
position: relative;
margin-top: -140px;
padding-bottom: 10px;
color: #e7b5af;
}

#playedBy a {
background: url(https://i.imgur.com/o3eUMwM.png) repeat bottom right;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/*Navigation*/

#pagetabs {
position: relative;
top: -20px;
left: -20px;
}

#pagetabs:after {
content: url();
display: block;
}

#pagetabs ul.nestedPages.open-dropdown {
left: auto !important;
}

#alltabs {
margin-top: 20px;
padding-left: 15px;
height: 25px;
}

#alltabs ul#pagetabs li {
margin-right: 10px;
}

#alltabs ul#pagetabs a {
font-size: 20px;
color: #9987ba;
font-family: belleza, arial, sans-serif;
}

#alltabs ul#pagetabs li.currentPage a {
color: #cbac7c;
text-shadow: 1px 1px 0px #000;
padding-left: 10px;
padding-top: 6px;
padding bottom: 5px;
}

#alltabs ul#pagetabs > li: not(.currentPage) {
padding-left: 10px;
paddting-top: 6px;
padding-bottom: 5px;
}

#alltabs ul#pagetabs > li:not(.currentPage) a {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

#alltabs ul#pagetabs > li:not(.currentPage):hover {
text-shadow: 1px 1px 0px #cbac7c;
}

#alltabs ul#pagetabs li ul.netstedPages li.nested-pagetab a:before {
content= "";
}

#alltabs ul#pagetabs li ul.nestedPages li.nested-pagetab {
margin-right: 0px;
}

/*Page Title*/

.pagetitle {
font-family: dancing script, arial, sans-serif;
text-align: right;
font-size: 40px;
font-weight: normal;
margin: 0 auto;
margin-right: 5px;
color: #cbac7c;
width: 700px;
text-shadow: 1px 1px 0px #000;
margin-bottom: 5px;
position: relative;
z-index: 10;
}


/*BBCODE*/

.bbcode_smiley {
border: none !important;
border-radius: 0 !important;
}

.bbcode_img {
max-width: 100%;
}

.bbcode_spoiler {
color: transparent;
background-color: transparent;
text-shadow: 0px 0px 5px #e6b3ae;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

.bbcode_spoiler:hover {
color: #e6b3ae;
text-shadow: none;
}

.bbcode_collapse, .collapse_name {
color: #e6b3ae;
text-shadow: 1px 1px 0px #000;
border-bottom: 0px !important;
padding-top: 2px;
cursor: pointer;
letter-spacing: 3px;
}

.collapse_content {
padding-top: 2px;
padding-left: 10px;
padding-bottom: 2px;
margin-bottom: 5px;
letter-spacing: normal;
color: #9987ba;
font-family: belleza, arial, sans serif;
text-shadow: none;
}


table.bbcode_columns td {
vertical-align: top;
}

ul.bbcode_list {
    list-style-image: url(https://i.imgur.com/Oc3a22l.png)
}

.bbcode_quote, .bbcode_code {
border: 1px solid #eeabbb !important;
margin: 20px 0;
}

.bbcode_quote_head, .bbcode_code_head {
background-color: #edd6d2;
padding: 5px 20px;
}

.bbcode_quote_body, .bbcode_code_body {
padding: 10px 20px;
}

.bbcode_code_body {
overflow-x: scoll;
}

.bbcode_center .bbcode_columns {
margin: auto auto;
}

.bbcode_italic, em, i {
text-transformation: italic;
text-shadow: 1px 1px 0px #fff;
}

#charcontent a {
color: #e6b3ae;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
}

/*Widget Titles*/
.widgetTitle {
font-family: dancing script, arial, sans-serif;
text-align: center;
font-size: 25px;
font-weight: bold;
color: #9987ba;
padding-left: 10px;
padding-top: 8px;
height: 50px;
margin-bottom: 5px;
margin-top: 0px;
margin-right: 10px;
}

/*Journals*/
.journal .posttitle {
    color: #877ba8;
    font-family: dancing script;
}

.journal .postdate {
float: right;
    font-weight: normal;
font-variant: small-caps;
}

ul.journal .journalentry {
margin-bottom: 20px;
}

ul.journal .journalentry:after {
content: url();
    position: relative;
    left: 40%;
    top: 20px;
}

/*Character connections*/
.charactertiescontainer .friendname > a, .notifications td.message a { /*I'm adding some legibility to the character names and player names.*/
font-family: dancing Script;
font-size: 18px;
}

.charactertiescontainer .playedby > a, .notifications .playedby { /*Still adding legibility.*/
font-size: 12px !important;
}

/*Character Ties*/
.charactertiescontainer h4 {
clear: left;
font-size: 25px;
font-family: dancing script, arial, sans serif;
font-weight: normal;
text-align: center;
letter-spacing: 3px;
color: #877ba8;
position: relative;
z-index: 10;
margin-top: 0px;
margin-left: -60px;
}

.charactertiescontainer h4:before {
position: relative;
z-index: -1;
top: 20px;
left: 40px;
}

table.friendswidget .portraitcontainer img {
border-radius: 100px;
border: solid 2px #70648d;
}

/*Guestbook*/
.guestbook .portraitcontainer img {
border-radius: 100%;
box-shadow: none;
height: 40px;
}

#charcontent ul.guestbook li div.portraitcontainer {
margin: 0;
padding: 0;
margin-right: 10px;
background: none;
width: 40px;
float: left;
}

.guestbookcommenter a {
font-family: dancing script;
font-size: 18px;
font-weight: normal;
}

.guestbookcomment img {
border-radius: 50px;
box-shadow: 2px 2px 0px #e7b5af !important;
border: 1px solid #e7b5af !important;
}

.guestbookreply {
text-align: center;
}

.guestbookreply a {
text-align: center;
color: #9987ba !important;
text-shadow: none;
font-size: 14px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

.guestbookreply a:hover {
border-left: 1px solid #a81414;
border-right: 1px solid #a81414;
padding-left: 5px;
padding-right: 5px;
}

.commenttime {
font-weight: normal;
color: #7d7d7d;
}

.guestbooktitle {
font-size: 1.4em;
text-align: center;
font-weight: normal;
}

.markItUpContainer {
border: none;
background: none;
padding: 5px 5px 2px 5px;
font-size: 14px;
font-family: jim nightshade;
}

.markItUpEditor {
border: 2px solid #e7b5af;
}

div.guestbookwidget textarea.markItUpEditor {
background-color: #ffffff;
color: #ffffff;
font-family: belleza, arial, sans serif;
}

textarea.guestbookcomment {
background-color: rgba(255, 255, 255, .50);
}

.guestbooksubmit {
background: transparent;
border: none;
width: 100%;
font-family: dancing Script;
font-size: 25px;
color: #c37176;
margin-top: -30px !important;
text-decoration: none;
}


.markItUpHeader ul .markItUpDropMenu {
background: transparent url(https://i.imgur.com/slX5i8D.png) no-repeat 115% 50%;
margin-right: 5px;
}

.markItUpHeader ul ul {
    display: none;
    position: absolute;
    top: 18px;
    left: 0px;
    background: #d6e9ea !important;
    border: 1px solid #e7b5af !important;
    height: inherit;
}

.markItUpHeader ul ul li {
    float: none;
    border-bottom: 1px solid #e7b5af !important;
}

.markItUpHeader ul ul li:hover {
    float: none;
background-color: #877ba8;
    border-bottom: 1px solid #e7b5af !important;
}

.markItUp a:link, .markItUp a:visited, .markItUpHeader ul li:before {
    color: #ccad7e !important;
    text-decoration: none;
}

select {
background-color: #e7b5af;
    color: #fff;
}

option {
background-color: #e7b5af;
}

/*D&D stat bars*/
td.statlabel, td.statlevel {
border: none !important;
color: #755b3f;
}

table.flexstatstable .filleddisc {
background-color: transparent;
border: none !important;
width: 20px;
height: 25px;
padding-left: 31px;
background: url(https://i.imgur.com/gX0ABYZ.png) no-repeat;
}

table.flexstatstable .emptydisc { /*Empty/unused stat points are now invisible.*/
background-color: transparent;
border: none !important;
}

/*Gallery*/
.gallerywrapper {
text-align: center;
}

.gallery img { /*Rounds gallery thumbnails and defines the transition to blurry greyscale on hover.*/
-webkit-transition: all .2s ease-in-out; /*Attributes: background, color, width, height, outline. Easing: ease, linear, ease-in, ease-out, ease-in-out*/
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
-webkit-mask-box-image: url('https://i.imgur.com/8175l7K.png');
-webkit-mask-box-image-outset: 4px;
}

.gallery img:hover {
transform: translateY(-10px);
}

/*AlwaysNever table*/
table.alwaysnever {
margin: 0 auto;
}

.alwaysnever td {
border: none !important;
}

.alwaysnever tr, table.alwaysnever {
border-bottom: 2px solid #e7b5af;
}

td.alwayscolumn, td.alwaystitle, td.sometimestitle, td.maybetitle, td.nevertitle, td.sometimescolumn, td.maybecolumn, td.nevercolumn {
text-align: center;
}

td.alwaystitle, td.sometimestitle, td.maybetitle, td.nevertitle {
font-family: dancing script, arial, sans script;
}

.alwaystitle strong, .sometimestitle strong, .maybetitle strong, .nevertitle strong{
padding: 10px;
font-size: 1.5em;
font-family: belleza, arial, sans serif;
text-align: center;
font-weight: normal;
color: #cbac7c;
}

/*Kudos*/
.kudoswidget .kudosAuthor a {
font-family: belleza, arial, sans serif;
font-size: 30px;
color: #cbac7c !important;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

.kudoswidget .kudosmessage:first-letter {
font-size: 30px;
font-family: belleza, arial, sans serif;
}

.vitalstats_contents strong {
color: #cbac7c;
}

::-webkit-scrollbar {
width: 8px; height: 4px;
}
/*::-webkit-scrollbar-button {
background-color: #292929;
}*/
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-track-piece {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
height: 50px;
background-color: #cbac7c;
}
::-webkit-scrollbar-thumb:hover{
background-color: #cbac7c;
}
::-webkit-scrollbar-corner {
background-color: transparent;
}
::-webkit-resizer {
background-color: transparent;
padding-top: 15px;
padding-left: 10px;
float: none;
clear: none;
 margin: 0px; margin-top: 10px;
 }
::-webkit-scrollbar-arrow-color {
background-color: #cbac7c !important;
}

#footer {
margin-left: -60px;
width: 1325px;
margin-top: -100px;
}

#footer a {
color: #ffnf00;
font-size: 14px;
font-variant: all-petite-caps;
}

#footer a:before {
content: "This profile was custom designed for Tea by Hadeslicious";
font-size: 14px;
display: block;
}


/* **********************************************************************************************************
    Mobile tweaks to hidden & behavioral elements
********************************************************************************************************** */

@media screen and (max-width: 500px) {
  /* Fix for BBCode lists inside indents at small sizes */
  .mobilesupportenabled .bbcode_indent {
    margin-left: 2em !important;
  }
  .mobilesupportenabled .bbcode_indent ul.bbcode_list {
    margin-left: 15px;
  }
}

@media screen and (max-width: 880px) {
  .mobilesupportenabled .bbcode_column img {
    max-width: 100%;
  }
}

@media screen and (max-width: 500px) {
  .mobilesupportenabled table.bbcode_columns td {
    display: block;
  }
}

@media screen and (max-width: 880px) {
  .mobilesupportenabled #toolbar ul li,
  .mobilesupportenabled #pagetabs li {
    margin-right: 0;
  }
  .mobilesupportenabled .mobiletabletonly {
    display: block;
  }
  .mobilesupportenabled .desktoponly {
    display: none;
  }
  .mobilesupportenabled #toolbar ul,
  .mobilesupportenabled #pagetabs {
    display: none;
  }
  .mobilesupportenabled #toolbar>ul.open,
  .mobilesupportenabled #pagetabs.open {
    display: block;
  }
  .mobilesupportenabled #toolbar ul li,
  .mobilesupportenabled #pagetabs li {
    display: block;
  }
  .mobilesupportenabled #toolbar-dropdown-nav,
  .mobilesupportenabled .nestedPages {
    position: relative;
    left: 0px !important;
  }
  .mobilesupportenabled #toolbar a,
  .mobilesupportenabled #pagetabs a {
    display: block;
    padding: 5px 20px;
  }
  .mobilesupportenabled #toolbar-dropdown-nav a,
  .mobilesupportenabled #pagetabs .nestedPages a {
    padding-left: 40px;
  }
  .mobilesupportenabled ul#toolbar-dropdown-nav li,
  .mobilesupportenabled #charheader ul#pagetabs li ul.nestedPages li {
    width: auto;
  }
  .mobilesupportenabled #alltabs {
    clear: both;
    padding-top: 20px;
  }
  .mobilesupportenabled span.mobiledropdowntoggle {
    display: block;
  }
}

@media screen and (max-width: 500px) {
  .mobilesupportenabled .mobileonly {
    display: block;
  }
}