Jump to content

Member group colors not working


Recommended Posts

 Basically I'm just really stuck on trying to set up member group colors. They are set up elsewhere on another board and are working fine. But I copied and pasted the same code into something else we are working on/reviving (it's the same skin coding on both sites). Thinking I could just change the colors to match this one. And it does not work. It isn't even showing the colors as set on the site it is working on.  I'm so stuck on this. I'd love some help.  There are 8 groups in total -that is including root/admin.

Link to post
Share on other sites
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

  • Admin

Check the actual group settings. Most likely they don't have their prefix and suffix set up.

 

What software and I'll tell you where to look.

Also, provide your code @Metal Health

adtest3.png

engineeringad.jpg

0_mainsignature.jpg

image.png

Profile set made by myself and original Artwork by Fae Merriman, my daughter.

 

 

Link to post
Share on other sites

Oh, it's jcink.

The code used is as follows xD

/****************************************
 Color Changes + Customizations
****************************************/

:root {
 --color1: rgba(232, 196, 129, 0);
 --color2: rgba(232, 196, 129, 0.2);
 --color3: rgba(232, 196, 129, 0.3);
 --color4: rgba(232, 196, 129, 0.5);
 --color5: rgba(232, 196, 129, 0.8);
 --color6: rgba(232, 196, 129, 1);  
 --glow1: #e8b55e;
 --glow2: #f39a54;
 --mgn1: rgba(232, 196, 129);
 --mgn2: rgba(232, 196, 129);
 --mgnr: 232 196 129;
}

.mmg_3, .min_3, .members {
 --color1: rgba(186,74,74, 0);
 --color2: rgba(186,74,74, 0.2);
 --color3: rgba(186,74,74, 0.3);
 --color4: rgba(186,74,74, 0.5);
 --color5: rgba(186,74,74, 0.8);
 --color6: rgba(186,74,74, 1);  
 --mgn1: rgba(186,74,74);
 --mgn2: rgba(186,74,74);
 --mgnr: 186 74 74;
--grdn0: linear-gradient(90deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient vertical */
--grdn1: linear-gradient(0deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient horizontal */
}

.mmg_6, .min_6, .hero {
 --color1: rgba(147,26,37, 0);
 --color2: rgba(147,26,37, 0.2);
 --color3: rgba(147,26,37, 0.3);
 --color4: rgba(147,26,37, 0.5);
 --color5: rgba(147,26,37, 0.8);
 --color6: rgba(147,26,37, 1); 
 --mgn1: rgba(147,26,37);
 --mgn2: rgba(147,26,37);
 --mgnr: 147 26 37;
--grdn0: linear-gradient(90deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient vertical */
--grdn1: linear-gradient(0deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient horizontal */
}
.mmg_7, .min_7, .villain {
 --color1: rgba(211,93,110, 0);
 --color2: rgba(211,93,110, 0.2);
 --color3: rgba(211,93,110, 0.3);
 --color4: rgba(211,93,110, 0.5);
 --color5: rgba(211,93,110, 0.8);
 --color6: rgba(211,93,110, 1); 
 --mgn1: rgba(211,93,110);
 --mgn2: rgba(211,93,110);
 --mgnr: 211 93 110; 
--grdn0: linear-gradient(90deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient vertical */
--grdn1: linear-gradient(0deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient horizontal */
}
.mmg_8, .min_8, .herodescendant {
 --color1: rgba(138,8,75, 0);
 --color2: rgba(138,8,75, 0.2);
 --color3: rgba(138,8,75, 0.3);
 --color4: rgba(138,8,75, 0.5);
 --color5: rgba(138,8,75, 0.8);
 --color6: rgba(138,8,75, 1);  
 --mgn1: rgba(138,8,75);
 --mgn2: rgba(138,8,75);
 --mgnr: 138 8 75; 
--grdn0: linear-gradient(90deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient vertical */
--grdn1: linear-gradient(0deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient horizontal */
}
.mmg_9, .min_9, .villaindescendant {
 --color1: rgba(52,102,64, 0);
 --color2: rgba(52,102,64, 0.2);
 --color3: rgba(52,102,64, 0.3);
 --color4: rgba(52,102,64, 0.5);
 --color5: rgba(52,102,64, 0.8);
 --color6: rgba(52,102,64, 1); 
 --mgn1: rgba(52,102,64);
 --mgn2: rgba(52,102,64);
 --mgnr: 52 102 64; 
--grdn0: linear-gradient(90deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient vertical */
--grdn1: linear-gradient(0deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient horizontal */
}
.mmg_10, .min_10, .reformedvillain {
 --color1: rgba(50,168,82, 0);
 --color2: rgba(50,168,82, 0.2);
 --color3: rgba(50,168,82, 0.3);
 --color4: rgba(50,168,82, 0.5);
 --color5: rgba(50,168,82, 0.8);
 --color6: rgba(50,168,82, 1);  
 --mgn1: rgba(50,168,82);
 --mgn2: rgba(50,168,82);
 --mgnr: 50, 168, 82;  
--grdn0: linear-gradient(90deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient vertical */
--grdn1: linear-gradient(0deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient horizontal */
}
.mmg_11, .min_11, .neutral {
 --color1: rgba(240,84,84, 0);
 --color2: rgba(240,84,84, 0.2);
 --color3: rgba(240,84,84, 0.3);
 --color4: rgba(240,84,84, 0.5);
 --color5: rgba(240,84,84, 0.8);
 --color6: rgba(240,84,84, 1);  
 --mgn1: rgba(240,84,84);
 --mgn2: rgba(240,84,84);
 --mgnr: 240 84 84; 
--grdn0: linear-gradient(90deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient vertical */
--grdn1: linear-gradient(0deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient horizontal */
}

.mmg_12, .min_12, .mod {
 --color1: rgba(255, 51, 133, 0);
 --color2: rgba(255, 51, 133, 0.2);
 --color3: rgba(255, 51, 133, 0.3);
 --color4: rgba(255, 51, 133, 0.5);
 --color5: rgba(255, 51, 133, 0.8);
 --color6: rgba(255, 51, 133, 1);  
 --mgn1: rgba(255, 51, 133);
 --mgn2: rgba(255, 51, 133);
 --mgnr: 255 51 133; 
--grdn0: linear-gradient(90deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient vertical */
--grdn1: linear-gradient(0deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient horizontal */
}

.mmg_13, .min_13, .spare {
 --color1: rgba(155,81,81, 0);
 --color2: rgba(155,81,81, 0.2);
 --color3: rgba(155,81,81, 0.3);
 --color4: rgba(155,81,81, 0.5);
 --color5: rgba(155,81,81, 0.8);
 --color6: rgba(155,81,81, 1);
 --mgn1: rgba(155,81,81);
 --mgn2: rgba(155,81,81);
 --mgnr: 155 81 81;   
--grdn0: linear-gradient(90deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient vertical */
--grdn1: linear-gradient(0deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient horizontal */
}

 

Link to post
Share on other sites
  • Admin

image.png

But your code will likely be something like:

<span class='hero'>

 

 

 

 

Actually! I don't think that's right at all. Nothing there is defining a color for your groups.....

Its changing colors depending on the group the person is in but that's it.

 

Link me your site. There is code that is either missing or something else. @Metal Health

adtest3.png

engineeringad.jpg

0_mainsignature.jpg

image.png

Profile set made by myself and original Artwork by Fae Merriman, my daughter.

 

 

Link to post
Share on other sites

Yeah, it's very confusing the way it's set up, I haven't had trouble like this before with group colours.

The site is undergoing a re-vamp at the mo, so is offline, so can I PM you the login to a test admin account?

 

Or would you rather I just turn it back online quickly for now?

Link to post
Share on other sites
  • Admin

You can't PM me as I have it off. Post the entire CSS for me and one of the templates that should have the color in it.

adtest3.png

engineeringad.jpg

0_mainsignature.jpg

image.png

Profile set made by myself and original Artwork by Fae Merriman, my daughter.

 

 

Link to post
Share on other sites

Here's the full css 

						/*=============================================== *
 * JAC Born This Way
* ==============================================
 * https://juliannacodes.tumblr.com
 *=============================================== */

@import url('https://fonts.googleapis.com/css?family=Nanum+Brush+Script|Monoton|Montserrat:300,300i,400,400i,700,700i|Poppins:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

/* the fonts below should be uploaded to your site file manager in the ACP */
@font-face{
    font-family:'FontAwesome';
    src:url('https://files.jcink.net/uploads/frctn/fonts/fontawesome_webfont.eot?v=4.7.0');
    src:url('https://files.jcink.net/uploads/frctn/fonts/fontawesome_webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
    url('https://files.jcink.net/uploads/frctn/fonts/fontawesome_webfont.woff2?v=4.7.0') format('woff2'),
    url('https://files.jcink.net/uploads/frctn/fonts/fontawesome_webfont.woff?v=4.7.0') format('woff'),
    url('https://files.jcink.net/uploads/frctn/fonts/fontawesome_webfont.ttf?v=4.7.0') format('truetype'),
    url('https://files.jcink.net/uploads/frctn/fonts/fontawesome_webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family: 'selimaregular';
    src: url('https://files.jcink.net/uploads2/vlly/fonts/selima__webfont.woff2') format('woff2'),
         url('https://files.jcink.net/uploads2/vlly/fonts/selima__webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
:root{
--sans1: Poppins, Arial, sans-serif;
--sans2: montserrat, Arial, sans-serif;
--sans3: calibri, arial, sans-serif;
--serif: georgia;
--mono: courier;
--title: monoton;

/* default colors */
/* A good color picker is build right into google search */
/* https://www.google.com/search?q=color+picker */
--translight50: rgb(42 42 42 / .5);
--transdark50: rgb(24 24 24 / .5);
--border: #53315e;
--bglight: #272727;
--bgmid: #232323;
--bgdark: #191919;
--textw: #fff;
--textl: #d4d4d4; 
--textn: #969696;
--textd: #848484;

/* site images */
--background: url('https://wallpaperaccess.com/full/1372390.jpg');
--pat1: url('https://files.jcink.net/uploads/frctn/skins/one/diagmonds.png');
--pat2: url('https://files.jcink.net/uploads/frctn/skins/one/az_subtle.png');
--header: url('https://img.nickpic.host/lBDXAq.jpg');
--maintitle: url(https://files.jcink.net/uploads/frctn/skins/one/az_subtle.png), url(https://img.nickpic.host/lBCpVA.jpg);
--defaultavatar: url(https://cdnw.nickpic.host/r5XyyX.gif);
--forumrowdefault: url(https://img.nickpic.host/jkug6b.jpg);
--headership: url(https://img.nickpic.host/lBCpVA.jpg);

/* accent colors */
--mg1: #53315e; /* main accent */ 
--mg2: #301838; /* dark accent  */
--mgr: 143, 10, 19; /* rgb value for transparency */
--grd0: linear-gradient(90deg, var(--mg1) 0%, var(--mg2) 100%); /* accent gradient vertical */
--grd1: linear-gradient(0deg, var(--mg1) 0%, var(--mg2) 100%); /* accent gradient horizontal */

/* group accent colors */
--mgn1: #8208a1; /* group light */
--mgn2: #573061; /* group dark */
--mgnr: 148 94 135; /* rgb value for transparency */
--grdn0: linear-gradient(90deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient vertical */
--grdn1: linear-gradient(0deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient horizontal */
}
/****************************************
 Color Changes + Customizations
****************************************/

:root {
 --color1: rgba(232, 196, 129, 0);
 --color2: rgba(232, 196, 129, 0.2);
 --color3: rgba(232, 196, 129, 0.3);
 --color4: rgba(232, 196, 129, 0.5);
 --color5: rgba(232, 196, 129, 0.8);
 --color6: rgba(232, 196, 129, 1);  
 --glow1: #e8b55e;
 --glow2: #f39a54;
 --mgn1: rgba(232, 196, 129);
 --mgn2: rgba(232, 196, 129);
 --mgnr: 232 196 129;
}

.mmg_3, .min_3, .members {
 --color1: rgba(186,74,74, 0);
 --color2: rgba(186,74,74, 0.2);
 --color3: rgba(186,74,74, 0.3);
 --color4: rgba(186,74,74, 0.5);
 --color5: rgba(186,74,74, 0.8);
 --color6: rgba(186,74,74, 1);  
 --mgn1: rgba(186,74,74);
 --mgn2: rgba(186,74,74);
 --mgnr: 186 74 74;
--grdn0: linear-gradient(90deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient vertical */
--grdn1: linear-gradient(0deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient horizontal */
}

.mmg_6, .min_6, .hero {
 --color1: rgba(147,26,37, 0);
 --color2: rgba(147,26,37, 0.2);
 --color3: rgba(147,26,37, 0.3);
 --color4: rgba(147,26,37, 0.5);
 --color5: rgba(147,26,37, 0.8);
 --color6: rgba(147,26,37, 1); 
 --mgn1: rgba(147,26,37);
 --mgn2: rgba(147,26,37);
 --mgnr: 147 26 37;
--grdn0: linear-gradient(90deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient vertical */
--grdn1: linear-gradient(0deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient horizontal */
}
.mmg_7, .min_7, .villain {
 --color1: rgba(211,93,110, 0);
 --color2: rgba(211,93,110, 0.2);
 --color3: rgba(211,93,110, 0.3);
 --color4: rgba(211,93,110, 0.5);
 --color5: rgba(211,93,110, 0.8);
 --color6: rgba(211,93,110, 1); 
 --mgn1: rgba(211,93,110);
 --mgn2: rgba(211,93,110);
 --mgnr: 211 93 110; 
--grdn0: linear-gradient(90deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient vertical */
--grdn1: linear-gradient(0deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient horizontal */
}
.mmg_8, .min_8, .herodescendant {
 --color1: rgba(138,8,75, 0);
 --color2: rgba(138,8,75, 0.2);
 --color3: rgba(138,8,75, 0.3);
 --color4: rgba(138,8,75, 0.5);
 --color5: rgba(138,8,75, 0.8);
 --color6: rgba(138,8,75, 1);  
 --mgn1: rgba(138,8,75);
 --mgn2: rgba(138,8,75);
 --mgnr: 138 8 75; 
--grdn0: linear-gradient(90deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient vertical */
--grdn1: linear-gradient(0deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient horizontal */
}
.mmg_9, .min_9, .villaindescendant {
 --color1: rgba(52,102,64, 0);
 --color2: rgba(52,102,64, 0.2);
 --color3: rgba(52,102,64, 0.3);
 --color4: rgba(52,102,64, 0.5);
 --color5: rgba(52,102,64, 0.8);
 --color6: rgba(52,102,64, 1); 
 --mgn1: rgba(52,102,64);
 --mgn2: rgba(52,102,64);
 --mgnr: 52 102 64; 
--grdn0: linear-gradient(90deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient vertical */
--grdn1: linear-gradient(0deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient horizontal */
}
.mmg_10, .min_10, .reformedvillain {
 --color1: rgba(50,168,82, 0);
 --color2: rgba(50,168,82, 0.2);
 --color3: rgba(50,168,82, 0.3);
 --color4: rgba(50,168,82, 0.5);
 --color5: rgba(50,168,82, 0.8);
 --color6: rgba(50,168,82, 1);  
 --mgn1: rgba(50,168,82);
 --mgn2: rgba(50,168,82);
 --mgnr: 50, 168, 82;  
--grdn0: linear-gradient(90deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient vertical */
--grdn1: linear-gradient(0deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient horizontal */
}
.mmg_11, .min_11, .neutral {
 --color1: rgba(240,84,84, 0);
 --color2: rgba(240,84,84, 0.2);
 --color3: rgba(240,84,84, 0.3);
 --color4: rgba(240,84,84, 0.5);
 --color5: rgba(240,84,84, 0.8);
 --color6: rgba(240,84,84, 1);  
 --mgn1: rgba(240,84,84);
 --mgn2: rgba(240,84,84);
 --mgnr: 240 84 84; 
--grdn0: linear-gradient(90deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient vertical */
--grdn1: linear-gradient(0deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient horizontal */
}

.mmg_12, .min_12, .mod {
 --color1: rgba(255, 51, 133, 0);
 --color2: rgba(255, 51, 133, 0.2);
 --color3: rgba(255, 51, 133, 0.3);
 --color4: rgba(255, 51, 133, 0.5);
 --color5: rgba(255, 51, 133, 0.8);
 --color6: rgba(255, 51, 133, 1);  
 --mgn1: rgba(255, 51, 133);
 --mgn2: rgba(255, 51, 133);
 --mgnr: 255 51 133; 
--grdn0: linear-gradient(90deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient vertical */
--grdn1: linear-gradient(0deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient horizontal */
}

.mmg_13, .min_13, .spare {
 --color1: rgba(155,81,81, 0);
 --color2: rgba(155,81,81, 0.2);
 --color3: rgba(155,81,81, 0.3);
 --color4: rgba(155,81,81, 0.5);
 --color5: rgba(155,81,81, 0.8);
 --color6: rgba(155,81,81, 1);
 --mgn1: rgba(155,81,81);
 --mgn2: rgba(155,81,81);
 --mgnr: 155 81 81;   
--grdn0: linear-gradient(90deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient vertical */
--grdn1: linear-gradient(0deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient horizontal */
}


/****** CUSTOMIZATION END ******/
/****** KNOW WHAT YOU'RE DOING BEYOND THIS POINT ******/

html { overflow-x: auto; } 
form { display:inline; }

@-webkit-keyframes shake-bottom {0%, 100% {-webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } 10% {-webkit-transform: rotate(2deg); transform: rotate(2deg); } 20%, 40%, 60% {-webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 30%, 50%, 70% {-webkit-transform: rotate(4deg); transform: rotate(4deg); } 80% {-webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 90% {-webkit-transform: rotate(2deg); transform: rotate(2deg); } } @keyframes shake-bottom {0%, 100% {-webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } 10% {-webkit-transform: rotate(2deg); transform: rotate(2deg); } 20%, 40%, 60% {-webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 30%, 50%, 70% {-webkit-transform: rotate(4deg); transform: rotate(4deg); } 80% {-webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 90% {-webkit-transform: rotate(2deg); transform: rotate(2deg); } }
a:hover span.th {
    -webkit-animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
    animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}
.siteicon:before{font-family: "honeybee" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

/* SCROLLBARS */
::-webkit-scrollbar-thumb {
    background-color:var(--mg1);
    border-left:0px solid var(--bgdark);
    border-right:0px solid var(--bgdark);
}
::-webkit-scrollbar {
    height:6px;
    width:6px;
}
::-webkit-scrollbar-track {
    background-color:var(--bglight);
    -moz-box-shadow:inset 0 0 0 2px var(--bgdark);
    -webkit-box-shadow:inset 0 0 0 2px var(--bgdark);
    box-shadow:inset 0 0 0 2px var(--bgdark);
}
div::-webkit-scrollbar { background-color: var(--bgdark); }
div::-webkit-scrollbar-thumb { border: 0px; background-color: var(--mg1);}
.postcolor::-webkit-scrollbar, box::-webkit-scrollbar { background-color: var(--bgdark); }
.postcolor::-webkit-scrollbar-thumb, box::-webkit-scrollbar-thumb { border: 0px; background-color: var(--mgn1);}

/* HIDDEN ELEMENTS */
#navi br, #logostrip, #submenu, .newstext, #ucpmenu .maintitle, #ucpcontent .maintitle, td.darkrow2, #delcookiesrow, #mark-as-read-subto, div#recent-topics .maintitle {
    display: none!important;
}

/* GLOBAL STYLES */
body { 
    font-family: var(--sans1); 
    font-size: 12px; 
    color: var(--textl);
    margin:0px;
    padding:0px; 
    background-color:var(--bgdark); 
    text-align:center;
    background-image: var(--background);
    background-attachment: fixed;
    background-size: cover;
    background-position: top left;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
}
table, tr, td {
    font-family: var(--sans1); 
    font-size: 12px; 
    color: var(--textn); 
}
a:link, a:visited, a:active { 
    text-decoration: none;
    color: var(--textw);
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}
a:hover { 
    color:var(--textd); 
    text-decoration: none; 
}

/* FIXED TOPBAR */
body#Pages #headwrapper, body#Pages #topperbar {display: none;}
#mainnav {
    position: fixed;
    background-color: var(--bgdark);
    width: 100%;
    height: 50px;
    top: 0px;
    z-index: 9999;
}
.mainnavav {
    position: absolute;
    background-color: var(--mg1);
    width: 90px;
    height: 90px;
    border-radius: 100%;
    left: 30px;
    top: 5px;
}
.mainav {position: relative; display: block;}
.mainav span, .mainav img {
    width: 70px;
    height: 70px;
    display: block;
    border-radius: 100%;
    margin: 10px;
    filter: grayscale(1);
    position: absolute;
    top: 0;
    left: 0;
}
.mainav span {background-size: cover; background-image: var(--defaultavatar)!important;}
.mainav img {z-index: 2;}
.mainnavname {
    position: absolute;
    text-transform: uppercase;
    font-weight: bold;
    font-family: var(--sans2);
    color: var(--textl);
    font-size: 20px;
    top: 5px;
    left: 130px;
}
.mainnavname a {cursor: crosshair;}
.mainnavswitch {
    position: absolute;
    top: 29px;
    left: 135px;
}
.mainnavswitch .forminput {
    background-color: var(--bgmid);
    border: 1px solid var(--border);
    width: 200px;
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 8px;
    color: #909090;
}
.mainnavicons {
    position: absolute;
    right: 10px;
    top: 10px;
}
.mainnavicons a {cursor: crosshair;}
.mainnavicons a span {
    font-size: 30px;
    margin: 0px 10px;
}
.mainnavicons .bubble {
    position: absolute;
    background-color: var(--mg2);
    border-radius: 100%;
    font-size: 10px;
    padding: 3px 6px;
    top: 13px;
    margin-left: -27px;
    color: var(--textw);
}
#userlinks {list-style: none; width: 960px; position: fixed; top: -23px; z-index: 9999; }
#userlinks td {color: var(--textn); }
#recent-alerts {
    position: fixed;
    z-index: 9999;
    top: 93px;
    margin-left: 33vw;
    height: 60vh;
    background-color: var(--bgmid);
    width: 250px!important;
}
#recent-alerts .tableborder {
    background-color: var(--bgmid);
}
#recent-alerts .pformstrip {
    text-align: center;
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 10px;
    letter-spacing: 1px;
    background-color: var(--bgdark)!important;
    color: var(--mg1);
}
span#recent-alerts-data .row2 {
    background-color: var(--bgdark);
    margin-bottom: 1px;
}
.recent-alerts-msg {
    min-height: 51px;
    padding: 5px;
    font-family: var(--sans1);
    font-size: 10px;
    color: #888888;
}
.recent-alerts-msg img {
    float: left;
    border: 5px solid var(--textw);
    height: 50px;
    width: 50px;
    margin-right: 10px;
    margin-top: -5px;
    margin-left: -5px;
}
#navi {
    position: fixed;
    width: 100%;
    padding: 5px;
    text-transform: uppercase;
    top: 50px;
    background-color: var(--mg1);
    z-index: 9998;
}
#navstrip {
    font-weight: bold;
    left: 113px;
    position: relative;
    font-family: var(--sans2);
    text-transform: uppercase;
    font-size: 8px;
    letter-spacing: 1px;
}
#navstrip a {cursor: crosshair;}

/* BOARD STRUCTURE */
div#mainwrap {
    position: relative;
    padding: 30px;
    border: 1px solid var(--border);
    background-color: var(--transdark50);
    margin: 80px auto 20px auto;
    width: 1200px;
}
div#headlinks {
    position: relative;
    background-color: var(--mg1);
    background: var(--grd1);
    padding: 30px;
    text-align: right;
    overflow: hidden;
}
#headlinks span {
    position: absolute;
    font-weight: bold;
    font-size: 120px;
    left: 5px;
    top: -30px;
    color: var(--textw);
    opacity: .5;
}
div#headlinks a {
    position: relative;
    display: inline-block;
    background-color: var(--mg1);
    padding: 10px;
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 17px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--textw);
}
div#headwrapper {
    position: relative;
    width: 1200px;
    background-image: var(--header);
    height: 600px;
    margin: 0px auto;
}
#headwrapper title {
    position: relative;
    display: block;
    font-size: 120px;
    color: var(--textw);
    font-family: var(--title);
    text-transform: uppercase;
    text-shadow: 1px 1px var(--mg1), -1px -1px var(--mg2);
    margin: 0px auto;
    top: 420px;
}

/* TOPBAR */
#topperbar {
    position: relative;
    background-color: var(--bglight);
    height: 240px;
    padding: 20px;
    background-image: var(--pat2);
}
.topperinner {
    padding: 10px;
    background-color: var(--bgmid);
    height: 220px;
}
.topperleft {
    position: relative;
    float: left;
    background-color: var(--bglight);
    height: 220px;
    width: 860px;
}
.topperannounce .toparrow {
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25px 50%, 0% 0%);
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25px 50%, 0% 0%);
    background-color: var(--textw);
    left: 247px;
    top: 0px;
    background-color: var(--mg2);
    width: 50px;
    position: absolute;
    height: 74px;
}
.topperannounce {
    position: absolute;
    width: 800px;
    background-color: var(--border);
    padding: 25px 30px;
    text-align: right;
    font-family: var(--sans2);
    text-transform: uppercase;
    color: var(--textl);
    font-size: 20px;
}
.topperannounce span {
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: var(--mg1);
    background: var(--grd0);
    padding: 9px 40px;
    font-family: var(--title);
    font-size: 36px;
    text-transform: uppercase;
    color: var(--textl);
}
.topperannounce .toparrow {
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25px 50%, 0% 0%);
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25px 50%, 0% 0%);
    background-color: var(--textw);
    left: 247px;
    top: 0px;
    background-color: var(--mg2);
    width: 50px;
    position: absolute;
    height: 74px;
}
.topperannounce a {
    font-weight: bold;
    color: var(--textw);
    cursor: crosshair;
}
.topperinfo {
    background-color: var(--bgdark);
    height: 146px;
    width: 860px;
    position: absolute;
    top: 74px;
}
.topinfoleft {
    position: relative;
    float: left;
    height: 146px;
    width: 647px;
}
.topinfosetting {
    position: relative;
    float: left;
    margin: 10px;
}
.topinfosetting div {
    border: 1px solid var(--bgdark);
    height: 113px;
    padding: 5px;
    width: 228px;
}
.topinfosetting div span {
    background-size: cover;
    display: block;
    width: 228px;
    height: 113px;
}
.topinfodesc {
    position: relative;
    float: left;
    background-color: var(--bgmid);
    width: 367px;
    padding: 10px;
    height: 126px;
}
.topinfodesc div {
    display: block;
    padding: 15px 20px;
    background-color: var(--bglight);
    overflow: auto;
    height: 106px;
    text-align: justify;
    color: var(--textl);
    font-family: var(--sans1);
    line-height: 130%;
    font-size: 11px;
    font-weight: normal;
}
.topinforight {
    position: relative;
    float: right;
    height: 146px;
    width: 213px;
}
.topinfostaff {
    position: relative;
    margin: 9px;
}
.topinfostaff a div {
    display: inline-block;
    border: 1px solid var(--mg2);
    width: 50px;
    height: 50px;
    padding: 5px;
}
.topinfostaff a div span {
    background-size: cover;
    width: 50px;
    height: 50px;
    display: block;
}
.topper-right {
    position: relative;
    float: right;
    height: 220px;
    width: 280px;
    background-color: var(--bgdark);
    background-image: var(--pat1);
}
.topper-featured {
    position: relative;
    background-color: var(--bgmid);
    width: 240px;
    height: 180px;
    padding: 10px;
    margin: 10px;
}
.topper-featured a {
    display: inline-block;
    width: 106px;
    height: 76px;
    margin: 0 6px;
}
.topper-featured div {
    position: relative;
    border: 1px solid var(--mg1);
    padding: 5px;
    display: inline-block;
    width: inherit;
    height: inherit;
}
.topper-featured div span {
    background-size: cover;
    width: 106px;
    height: 76px;
    display: block;
}

#wrapper {
    text-align: left;
    width: 1000px;
    margin: 20px auto 30px;
    background: var(--transdark50);
    padding: 50px 100px;
    border: 1px solid var(--bgmid);
}
#innerwrapper {width: 1000px;}

/* SOFTWARE STYLES */
.searchlite {color:var(--textw); font-weight:bold; background-color:var(--bglight); }

.caldate {text-align:right; font-weight:bold; font-size:11px; color:var(--textl); background-color:var(--bgmid); padding:4px; margin:0px; }
#calendarname {font-size:22px; font-weight:bold; }
#padandcenter {margin-left:auto; margin-right:auto; text-align:center; padding:14px 0px 14px 0px; }

/* UserCP/My Controls styles */
#ucpmenu {line-height: 175%; width: 22%; background-color: var(--bgmid); padding-top: 54px; }
#ucpmenu p {color: transparent;}
#ucpmenu .pformstrip {width: 80%; position: relative; left: 9%; background: transparent; border-bottom: 1px solid var(--mg2); margin-top: -20px; text-align: right; letter-spacing: 1px; font-size: 14px; font-family: var(--sans2); text-transform: uppercase; font-weight: bold; color: var(--mg1); }
#ucpmenu p a {font-family: var(--sans1); font-size: 10px; background: var(--bgdark); padding: 2px; padding-left: 10px; width: 170px; margin: 2px auto; display: block; margin-top: -43px; color: var(--textd); transition: all .6s ease; -webkit-transition: all .6s ease; -moz-transition: all .6s ease; -ms-transition: all .6s ease; -o-transition: all .6s ease; }
#ucpmenu p a:hover {padding-left: 20px; color: var(--textw); background: var(--mg1); width: 160px; }
#ucpmenu p a:nth-child(1) {margin-top: -30px;}
#ucpcontent {background-color: var(--bgmid); line-height: 150%; width: auto; padding: 10px 20px; }
#ucpcontent .maintitle {display: none; background-color: transparent; }
#ucpcontent > div.pformstrip:nth-child(3) {font-size: 20px; font-family: var(--sans2); font-weight: bold; margin-top: 10px; padding: 10px 10px; color: var(--mg1); border-bottom: 1px solid var(--border); }
#ucpcontent p { padding:10px;margin:0px;}
body#UserCP.code-01 td#ucpcontent td {padding: 10px 0; }
body#UserCP.code-01 td.pformleft b, body#UserCP.code-01 td.pformleft label {font-family: var(--sans2); font-weight: bold; font-size: 10px; text-transform: uppercase; color: var(--mg1); }
body#UserCP.code-01 .pformright {padding: 10px 30px; background: var(--bgmid); }
body#UserCP.code-01 td#ucpcontent td input, body#UserCP.code-01 td#ucpcontent td select, body#UserCP.code-01 td#ucpcontent td textarea{margin-left: 42px; width: 320px; }
body#UserCP.code-01 td#ucpcontent td select {width: 332px; }
tr#field-website, tr#field-location, tr#field-interests {display: none;}

#store #ucpmenu {  padding-top: 0;  line-height: 29px;    width: 22%;    background-color: var(--bgmid);}
#store #ucpmenu .pformstrip {top: -19px; margin-top: 0; padding: 10px 0 0 0; width: 82%; }

/* Topic View styles */
.activeuserstrip {background-color: var(--bgdark); padding: 6px; font-size: 10px; color: var(--textw); }
.post1, .post2 {background-color: var(--bgmid); }
.postdetails {font-size: 10px; }
.postcolor {font-size: 12px; line-height: 160%; text-align: justify; margin: 20px; color: var(--textn); }
.postlinksbar {background-color: var(--bgmid); padding: 10px 3px; text-align: center; font-size: 0px; }
.postlinksbar a {font-family: var(--sans2); text-transform: uppercase; font-size: 8px; letter-spacing: 1px; margin: 0px 20px; color: var(--mg1); }
img        { vertical-align:middle; border:0px }
img.attach { border:0;padding:2px }
.desc { font-size:11px; color: var(--textn); }
.edit { font-size: 9px }
.signature   {display: none; }

/* Pagination e.g. [1],2,3 */
.pagination .pagination_current, .pagination a {padding: 2px 5px;}
.pagination a:link, .pagination a:visited, .pagination a:active {border: 1px solid var(--border); border-radius:3px; background-color:var(--bglight); padding-left:6px; padding-right:6px; color:var(--textw); text-decoration:none;}
.pagination a:hover {background: var(--text1); text-decoration: none; color:var(--bgdark); }
.pagination .pagination_current {background: var(--mg1); border: 0; border-radius:3px; padding:0 6px; }
.pagination_first, .pagination_last, .pagination_page {background: var(--mg2); border: 0; }
.pagination_pagetxt {display:none;}

/* Global general table/div row styles */
.row1, .row3, .row4, .row2 {background-color: var(--bgmid); padding: 5px; color: var(--textn); font-size: 10px; }
#boardstats .row2 {text-align: center;}
.darkrow1 {background-color: var(--border); color: var(--textn); font-family: var(--sans1); font-size: 10px; }
.darkrow2 {background-color: var(--border); color: var(--textn); font-family: var(--sans1); font-size: 10px; }
.darkrow3 {background-color: var(--bgdark); color: var(--textd); padding: 3px; }

.hlight { background-color: var(--bgmid); }
.dlight { background-color: var(--bgmid); }

/* Topic Macros */
.wrapmini {
    float: left;
    position: relative;
    display: inline-block;
    width: 200px;
    text-align: right;
    margin-right: 20px;
    background-color: var(--bgmid);
    padding: 10px;
    font-size: 8px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--textn);
    font-family: var(--sans2);
}
.wrapmini br {clear: both; }
.wrapmini span {
    float: left;
    font-size: 14px;
    margin: 0 0 10px;
}
.wrapmini span:last-of-type {margin: 0; }
span.th.th-fire-o.post {color: rgb(var(--mgr) / .6);}
span.th.th-fire-o.post-no {color: rgb(var(--mgr) / .2);}
span.th.th-fire-o.hot {color: var(--mg1); }
span.th.th-fire-o.hot-no {color: rgb(var(--mgr) / .6); }
span.th.th-pie-o.poll {color: rgb(var(--mgr) / .6);}
span.th.th-pie-o.poll-no {color: rgb(var(--mgr) / .2);}
span.th.th-closed-lock-o.locked {color: var(--mg2); }
span.th.th-chevron-right.moved {color: var(--mg2); }

/* Top table bars / gradient holders */
.maintitle {}
.maintitle a:link, .maintitle  a:visited, .maintitle  a:active {text-decoration: none; }
.maintitle a:hover {text-decoration: none;}
.titlemedium {font-weight: bold; color: var(--textl); padding: 2px 6px; margin: 0px; background-color: var(--border); text-transform: uppercase; }
.titlemedium  a:link, .titlemedium  a:visited, .titlemedium  a:active  {text-decoration: none; color: var(--textw); }

/* Table & Div Borders */
.tableborder {padding: 0px; margin: 0; }
.tablefill {background-color: var(--bgmid); border:1px solid var(--border); padding:6px; }
.tablepad {background-color: var(--bgmid); padding:6px; }
.tablebasic {width:100%; padding:0; margin:0px; border:0px; }
.plainborder {border:1px solid var(--border); background-color: var(--bgmid); }

/****************************************
  QUOTE and CODE BBCode boxes
*****************************************/
table#QUOTE-WRAP b {display: none;}
#QUOTE b { display: inline-block; }
#QUOTE {
    white-space: normal;
    font-family: var(--sans1);
    font-size: 11px;
    color: #333;
    background-color: var(--bgmid);
    border: 0px;
    padding: 20px;
    margin-top: 2px;
    line-height: 130%;
    color: #717171;
}
#CODE {
    white-space: normal;
    font-family: Courier, Courier New, Verdana, Arial;
    font-size: 10px;
    color: var(--textl);
    padding: 30px;
    margin-top: 2px;
    word-break: break-word;
    background-color: var(--bgmid);
    line-height: 130%;
}
.code-scroll {max-height: 100px; overflow: auto; padding-right: 5px; }
.code-toggle {
    cursor: default;
    text-transform: uppercase;
    text-align: center;
    display: block;
    padding: 10px;
    background: var(--bglight);
    font-family: var(--sans2);
    font-size: 10px;
    font-weight: bold;
}
.code-scroll.auto-code {height: auto; max-height: none;}
#CODE-WRAP.codes-box {border-collapse: collapse; margin-top: 20px;}
.code-highlight {
    font-size: 8px;
    font-family: var(--sans2);
    color: var(--textl);
    font-weight: bold;
    padding: 2px;
    margin: 0px;
    background-color: var(--bglight);
    text-align: center;
    text-transform: uppercase;
    cursor: default;
}

/* Input buttons, e.g. submit, text input, etc */
.button-large {
    padding: 10px 20px;
    text-align: center;
    color: var(--textd);
    min-width: 75px;
    display: inline-block;
    background-color: var(--bgmid);
    margin: 0px 10px;
    border: 1px solid var(--mg1);
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 20px;
}
.button-large span {
    float: left;
    margin-right: 20px;
    top: 2px;
    position: relative;
    color: var(--mg1);
}
.button-large b {border-bottom: 1px solid var(--mg2);}
.button-large.closed {}
.post-buttons-top { margin-top: 3px; }
.forminput, .codebuttons, .textinput, .radiobutton, .checkbox {
    border-radius: 2px;
    background: var(--bglight);
    border: 0px;
    color: var(--textl);
    font-family: var(--sans1);
    font-size: 10px;
    padding: 2px;
    vertical-align: middle;
}
input[type=submit], input[type=button], input[type=reset] {
    background: var(--grd0);
    color: var(--textw);
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 3px;
    padding: 5px 6px;
    text-decoration: none;
    font-family: var(--sans2);
    font-size: 10px;
    border: none;
}
.postcolor input[type=submit], .postcolor input[type=button], .postcolor input[type=reset],
div#new-profile input[type=submit], div#new-profile input[type=button], div#new-profile input[type=reset]
{background: var(--grdn0);}
.codebuttons  {font-size: 10px;}
#post-icon-options {font-size: 9px;}
.postmacros, .hidepostmacros {
    height: 20px;
    padding-right: 10px;
    font: 10px/20px var(--sans2);
    font-weight: bold;
    letter-spacing: 1px;
    color: var(--textl);
    display: inline-block;
    vertical-align: top;
}
.hidepostmacros {display: none;}
span.postmacros input[type="radio"],
span.postmacros .radiobutton,
#post-icon-options input[type="radio"],
#post-icon-options .radiobutton {display: none;}
#post-icon-options :checked + label {
    font-weight: bold;
    font-style: italic;
    color: var(--mg1);
}
#post-icon-options > td.pformright > input:nth-child(31) {
    display: inline-block;
    position: relative;
    top: 3px;
}

/* Form table cell styles, left/right/top */
.pformstrip {background-color: var(--bgdark); color: var(--textd); font-weight: bold; padding: 2px 5px; margin-top: 1px; }
.pformstrip strong {margin-left: 10px; font-size: 9px; }
.pformleft  {background-color: var(--bgmid); padding:6px;width:25%; }
.pformleftw {background-color: var(--bgmid); padding:6px; width:40%; }
.pformright {background-color: var(--bgmid); padding:6px; }

/* MISCELLANEOUS */
/* SCRIPTS */
.guest, .user-0 .user, .mod-0 .mod, .admin-0 .admin, .hidden {display: none;}
.user-0 .guest, .mod-1 .mod, .admin-1 .admin {display: inline-block!important;}

/* LOL ADS */
div[style="margin-bottom:3px;"] .row4 { text-align: center; background: transparent;}

/* EXTRA UTILITIES */
.clear { clear: both; }

/* SITE FOOTER copyright removal is against Terms */
.copyright { font-size: 10px; line-height: 12px;}
#skin_selector {margin: 10px 0; }

/* Mobile-specific Styles */
#mobile {}

/***********************************
 Custom Forum Rows
************************************/
.category {
    position: relative;
    margin-bottom: 20px;
}
.category .maintitle {
    height: 200px;
    display: block;
    position: relative;
    background-color: var(--bglight);
    background-image: var(--maintitle);
    overflow: hidden;
    border: 1px solid var(--border);
}
.category .maintitle a {
    position: absolute;
    font-family: var(--title);
    text-transform: lowercase;
    font-size: 60px;
    top: 55px;
    left: 106px;
    cursor: crosshair;
    background: var(--grd1);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
.category .maintitle span.classnum {
    font-size: 26px;
    color: var(--textl)!important;
    display: inline-block;
    top: 94px;
    left: 41px;
    position: absolute;
    font-family: var(--title);
    text-transform: lowercase;
}
.category .maintitle div {
    position: absolute;
    padding: 40px;
    border: 1px solid var(--bgmid);
    background-color: var(--transdark50);
    width: 150px;
    height: 150px;
    display: block;
    right: -18px;
    top: -18px;
    border-radius: 100%;
    text-align: center;
}
.category .maintitle div span {
    position: relative;
    right: 0px;
    top: 0px;
    font-size: 60px;
    padding: 45px;
    border-radius: 100%;
    background-color: var(--mg1);
    color: var(--textw);
    background: var(--grd1);
}
#subforum-list {
    padding: 30px;
    background-color: var(--transdark50);
    border: 1px solid var(--border);
}
.new-category {
    padding: 30px;
    background-color: var(--transdark50);
    border: 1px solid var(--border);
    border-top: 0px;
}
.new-row {
    position: relative;
    background-color: var(--bgmid);
    margin-bottom: 10px;
    height: 290px;
    border-bottom: 1px solid var(--mg1);
}
.idx_ftop {
    position: relative;
}
.idx_arrow {
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25px 50%, 0% 0%);
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25px 50%, 0% 0%);
    background-color: var(--textw);
    left: 505px;
    top: 0px;
    background-color: var(--mg2);
    width: 50px;
    position: absolute;
    height: 74px;
    z-index: 3;
}
.idx_fname {
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: var(--mg1);
    background: var(--grd0);
    padding: 15px 40px 16px;
    font-family: var(--sans2);
    font-weight: bold;
    font-size: 35px;
    text-transform: uppercase;
    color: var(--textl);
    min-width: 450px;
}
.idx_fname a {
    cursor: crosshair;
    color: var(--textw);
}
.idx_stats {
    position: absolute;
    right: 0px;
    background-color: var(--bgdark);
    width: 400px;
    height: 74px;
    z-index: 2;
    text-align: right;
}
.idx_stats div {
    position: relative;
    display: inline-block;
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    width: 125px;
    padding: 28px 0px;
    color: var(--mg1);
}
.idx_stats div span {color: var(--textl);}
.idx_inner {
    position: relative;
    top: 74px;
    height: 176px;
}
.idx_left {
    position: relative;
    float: left;
    height: 176px;
    width: 500px;
}
.idx_macro {
    position: absolute;
    color:#9c6fad;
    font-size: 160px;
    top: -15px;
    left: -10px;
    z-index: 1;
    height: 150px;
}
.idx_macro a {
    height: 150px;
    display: block;
}
.idx_info {
    position: absolute;
    width: 344px;
    left: 145px;
}
.idx_lpdetails {
    position: relative;
    margin-top: 13px;
}
.idx_lpdetails div {
    position: relative;
    display: block;
    background-color: var(--bglight);
    margin-bottom: 3px;
    padding: 9px 5px;
    font-family: var(--sans1);
    color: var(--textl);
}
.idx_lpdetails div div {
    display: inline-block;
    background-color: var(--mg1);
    border-radius: 4px;
    color: var(--textw);
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 11px;
    padding: 8px 10px;
    margin-right: 10px;
}
.idx_right {
    position: relative;
    float: right;
    width: 438px;
    height: 176px;
    overflow: hidden;
    z-index: 2;
}
.idx_right:after {
    content: '';
    display: block;
    position: absolute;
    width: 438px;
    height: 176px;
    background-image: var(--forumrowdefault);
    background-size: cover;
    z-index: 1;
    top: 0px;
    right: 0px;
    filter: brightness(.15) contrast(.75) grayscale(1);
    background-position: bottom right;
}
.idx_desc {
    z-index: 3;
    position: relative;
    width: 200px;
    height: 155px;
    left: 10px;
    top: 10px;
}
.idx_desc div {
    padding: 10px 10px 0px 10px;
    padding-right: 10px;
    text-align: justify;
    font-family: var(--sans1);
    font-size: 10px;
    color: var(--textl);
    border: 1px solid var(--bgmid);
    background-color: var(--transdark50);
    overflow: auto;
    height: 144px;
}
.idx_desc .fdesc-links {
    margin: 0px 10px 10px 10px;
    width: 150px;
    position: relative;
    display: block;
}
.idx_desc .fdesc-links a {
    position: relative;
    display: inline-block;
    background-color: var(--bgmid);
    padding: 5px;
    margin-right: 3px;
    border-radius: 5px;
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 8px;
    margin-bottom: 2px;
}
.idx_lpava {
    position: absolute;
    padding: 40px;
    border: 1px solid var(--mg1);
    background-color: var(--translight50);
    width: 150px;
    height: 150px;
    display: block;
    right: -18px;
    top: -26px;
    border-radius: 100%;
    text-align: center;
    z-index: 3;
}
.idx_lpava div {
    position: relative;
    display: block;
    background-size: cover;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background-color: var(--bgmid);
    background: linear-gradient(0deg, var(--mg1) 0%, var(--mg2) 100%);
    padding: 25px;
}
.idx_lpava div span {
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background-size: cover;
}
.idx_subforums {
    position: absolute;
    top: 250px;
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 8px;
    letter-spacing: 1px;
    background-color: var(--bglight);
    width: 938px;
    height: 40px;
}
.idx_subforums span.subforums {
    margin-left: 10px;
    color: transparent;
}
.idx_subforums span.subforums .subforums-macro {
    display: none;
}
.idx_subforums span.subforums a {
    display: inline-block;
    background-color: var(--bgmid);
    position: relative;
    padding: 10px;
    border-radius: 5px;
    margin-top: 6px;
    margin-left: 5px;
    color: var(--textl);
}



/***********************************
 Custom Topic Rows
************************************/
#topic-list {position: relative;}
#topic-list .maintitle {
    height: 200px;
    display: block;
    position: relative;
    background-color: var(--bglight);
    background-image: var(--maintitle);
    overflow: hidden;
    border: 1px solid var(--border);
}
#topic-list .maintitle span {
    position: absolute;
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 40px;
    top: 74px;
    left: 106px;
    cursor: default;
    background: var(--grd1);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
#new-topics {
    padding: 30px;
    background-color: var(--transdark50);
    border: 1px solid var(--border);
    border-top: 0px;
}
.topic-title-row {
    position: relative;
    background-color: var(--bgdark);
    background: var(--grd0);
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    text-align: right;
    font-size: 40px;
    padding: 20px 20px 20px 10px;
    color: var(--textl);
}
.topic-title-row span {
    float: left;
    font-size: 50px;
    color: var(--mg2);
    margin-left: 10px;
}
.no-topics-row {
    position: relative;
    display: block;
    background-color: var(--bglight);
    padding: 20px;
    text-align: center;
    font-family: var(--sans1);
    color: var(--textn);
    border: 1px solid var(--border);
}
.topic-row {
    position: relative;
    background-color: var(--bgmid);
    height: 100px;
    margin-bottom: 3px;
}
.cts-main {
    position: relative;
}
.cts-left {
    position: relative;
    float: left;
    width: 500px;
    height: 100px;
    overflow: hidden;
}
.cts-leftl {
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
}
.cts-marker-main {
    position: absolute;
    font-size: 120px;
    color: var(--mg1);
    top: -15px;
}
.cts-leftr {
    position: relative;
    float: right;
    width: 380px;
    height: 100px;
}
.cts-title {
    position: absolute;
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 17px;
    top: 25px;
}
.cts-desc {
    position: absolute;
    top: 50px;
    background-color: var(--bglight);
    padding: 5px;
    width: 365px;
    color: var(--textn);
    font-family: var(--sans1);
    font-size: 11px;
    min-height: 18px;
}
.cts-desc .postmacros {
    top: -1px;
    position: relative;
}
.cts-desc .small {
    float: right;
    font-size: 9px;
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
    top: 3px;
}
.cts-right {
    position: relative;
    float: right;
    width: 438px;
    height: 100px;
    overflow: hidden;
}
.cts-rightl {
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
}
.cts-deets {
    position: relative;
    margin: 0px auto;
}
.cts-replies, .cts-views {
    display: block;
    position: relative;
    margin: 2px 0px 4px 0px;
    background-color: var(--bglight);
    padding: 9px 10px;
    text-align: center;
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 15px;
    color: var(--textl);
}
.cts-replies span, .cts-views span {
    display: block;
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 8px;
    letter-spacing: .5px;
    color: var(--mg1);
}
.cts-rightr {
    position: relative;
    float: right;
    width: 338px;
    height: 100px;
}
.cts-author {
    position: absolute;
    width: 270px;
    height: 100px;
    left: 0px;
}
.cts-author div {
    position: relative;
    display: block;
    background-color: var(--bglight);
    margin: 2px 0px 3px 2px;
    padding: 4px 5px 3px 5px;
    font-family: var(--sans1);
    color: var(--textl);
    font-size: 10px;
}
.cts-author div div {
    display: inline-block;
    background-color: var(--mg1);
    border-radius: 4px;
    color: var(--textl);
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 10px;
    padding: 3px 5px;
    margin-right: 10px;
}
.cts-avatar {
    position: absolute;
    padding: 30px;
    border: 1px solid var(--mg1);
    background-color: var(--translight50);
    width: 80px;
    height: 80px;
    display: block;
    right: -8px;
    top: -22px;
    border-radius: 100%;
    text-align: center;
    z-index: 3;
}
.cts-avatar div {
    position: relative;
    display: block;
    background-size: cover;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: var(--bgmid);
    background: var(--grd1);
    padding: 15px;
    background-size: cover;
}
.cts-avatar div span {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-size: cover;
}
.cts-mod {
    position: absolute;
    right: 0px;
    z-index: 3;
}


/***********************************
 Custom Post Rows
************************************/
body#ST .maintitle {
    height: 38px;
    display: block;
    padding: 81px 20px;
    position: relative;
    background-color: #000000;
    background-image: var(--maintitle);
    overflow: hidden;
    border: 1px solid var(--border);
    font-size: 28px;
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
}
#new-posts {
    border: 1px solid var(--bgmid);
    background-color: var(--transdark50);
    padding: 20px;
}
.new-post {
    position: relative;
}
.npost-wrap {
    position: relative;
    border: 1px solid var(--bgmid);
}
.npost-left {
    position: relative;
    float: left;
    width: 676px;
}
.npost-top {
    position: relative;
    height: 150px;
    overflow: hidden;
    background-color: var(--bgmid);
}
.npost-gif-1 {
    position: absolute;
    padding: 40px;
    border: 1px solid var(--mgn1);
    background-color: var(--translight50);
    width: 150px;
    height: 150px;
    display: block;
    left: -24px;
    top: -41px;
    border-radius: 100%;
    text-align: center;
    z-index: 3;
}
.npost-gif-1 div {
    position: relative;
    display: block;
    background-size: cover;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background-color: var(--bgmid);
    background: var(--grd2);
    padding: 25px;
}
.npost-gif-1 div span {
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background-size: cover;
    filter: brightness(.75) contrast(.75) grayscale(.15);
}
.npost-name {
    position: absolute;
    right: 0px;
    font-size: 34px;
    text-transform: uppercase;
    width: 460px;
}
.npost-name nam {
    font-family: var(--sans2);
    display: block;
    font-weight: bold;
    margin-top: 46px;
    position: absolute;
    border-bottom: 1px solid var(--mgn1);
}
.npost-sub {
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 8px;
    letter-spacing: .5px;
    margin-left: 20px;
    top: 92px;
    left: -20px;
    position: absolute;
    width: 500px;
}
.npost-sub span {
    color: var(--mgn2);
    font-size: 7px;
    margin: 5px 5px 0;
    top: 0;
    position: relative;
}
.npost-toplinks {
    position: relative;
    padding: 10px 5px 5px 5px;
    background-color: #292929;
    width: 666px;
    text-align: center;
}
.npost-toplinks a {
    margin: 0px 16px;
    display: inline-block;
}
.npost-toplinks a div {
    display: inline-block;
    font-size: 24px;
    color: var(--mgn1);
    text-shadow: 1px 1px var(--bgdark);
}
.npost-mid {
    position: relative;
}
.npost-links {
    position: absolute;
    float: left;
    width: 42px;
    background-color: var(--bgmid);
    height: 100%;
}
.npost-blocklinks {
    position: relative;
    text-align: center;
    font-size: 20px;
}
.npost-blocklinks a {
    display: block;
    margin: 6px 0px 17px 0px;
    color: #969696;
}
.npost-content {
    position: relative;
    float: right;
    width: 634px;
    min-height: 450px;
}
.npost-midbuttonsl {
    position: relative;
    margin: 0px auto;
    width: 634px;
    background-color: var(--bgmid);
}
.npost-perma {
    position: relative;
}
.npost-perma a {
    float: left;
    font-size: 20px;
    margin-left: 10px;
    margin-top: 5px;
    color: var(--mgn2);
}
.npost-date {
    position: absolute;
    top: 12px;
    left: 40px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 10px;
    font-family: var(--sans2);
    letter-spacing: .5px;
}
.npost-posticon {
    position: absolute;
    top: 8px;
    right: 0px;
}
.npost-postinner {
    position: relative;
    background-color: #292929;
    padding: 20px;
    min-height: 372px;
}
.npost-bottom {
    position: relative;
    background-color: var(--bgmid);
    height: 120px;
}
.npost-player {
    position: relative;
    float: left;
    height: 120px;
    width: 450px;
}
.npost-playername {
    position: relative;
    float: left;
}
.npost-playername div {
    position: absolute;
    font-family: var(--title);
    font-size: 28px;
    width: 239px;
    text-align: center;
    text-transform: uppercase;
    color: var(--mgn1);
    opacity: .5;
    top: 30px;
}
.npost-playername span {
    width: 239px;
    display: block;
    position: absolute;
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 23px;
    text-align: center;
    top: 50px;
}
.npost-playerdeets {
    position: relative;
    float: right;
    margin-top: 0px;
}
.npost-playerdeets div {
    position: relative;
    display: block;
    background-color: var(--bglight);
    margin: 3px 0px;
    padding: 5px 5px 4px 5px;
    font-family: var(--sans1);
    color: #888888;
    width: 200px;
}
.npost-playerdeets div span {
    display: inline-block;
    background-color: var(--mgn1);
    border-radius: 4px;
    color: var(--textw);
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 11px;
    padding: 7px 10px;
    margin-right: 10px;
}
.npost-triggers {
    position: relative;
    float: right;
    width: 225px;
    border-left: 1px solid #212121;
    height: 120px;
    overflow: hidden;
}
.npost-triggers div {
    position: relative;
    margin: 10px;
    overflow: auto;
    height: 90px;
    padding: 5px 10px 5px 5px;
    text-align: justify;
    font-size: 10px;
    line-height: 130%;
    color: #848484;
}
.npost-triggers span {
    position: absolute;
    font-size: 100px;
    top: 34px;
    left: -17px;
    opacity: .25;
    color: rgb(var(--mgnr) / .5);
}
.npost-right {
    position: absolute;
    right: 0px;
    width: 280px;
    height: 100%;
    background-color: #252525;
}
.npost-gifmain {
    position: relative;
    background-color: #292929;
    width: 280px;
    height: 150px;
}
.npost-gifmain div {
    border: 1px solid #353535;
    position: relative;
    display: block;
    top: 10px;
    left: 10px;
    width: 238px;
    height: 108px;
    border-radius: 5px;
    padding: 10px;
    background-color: rgb(var(--mgnr) / .5);
}
.npost-gifmain div span {
    position: relative;
    background-size: cover;
    width: 239px;
    height: 109px;
    display: block;
    border-radius: 5px;
    filter: brightness(.75) contrast(.75) grayscale(.15);
}
.npost-miniprofile {
    position: relative;
    width: 280px;
    margin: 0px auto;
    min-height: 620px;
    height: calc(100% - 154px);
}
.npost-mini {
    position: relative;
    width: 250px;
    padding: 10px;
    border: 1px solid var(--bgmid);
    height: 450px;
    margin: 5px auto;
    background-color: rgb(var(--mgnr) / .5);
}
.npost-mini-hover {
    position: relative;
    width: 250px;
    height: 450px;
    overflow: hidden;
    transition: .5s ease all;
}
.npost-mini-avatar {
    position: relative;
    width: 250px;
    height: 450px;
    background-size: cover;
    transition: inherit;
    left: 0px;
    filter: grayscale(0);
}
.npost-mini-avatar div {
    background-size: cover;
    width: 250px;
    height: 450px;
}
.npost-mini-hover:hover .npost-mini-avatar {
    transition: .5s ease-in-out all;
    opacity: .5;
    filter: grayscale(1);
}
.npost-mini-in {
    position: absolute;
    top: 0px;
    width: 250px;
    height: 450px;
    opacity: 0;
    transition: 1.2s ease-in-out all;
}
.npost-mini-hover:hover .npost-mini-in {
    opacity: 1;
    transition: 1.2s ease-in-out all;
}
.npost-mini-in-bars {
    position: relative;
    margin: 0px auto;
    background-color: var(--transdark50);
    height: 310px;
}
.npost-poststats {
    position: relative;
    width: 200px;
    margin: 0px auto;
}
.npost-poststat-posts, .npost-poststat-points {
    display: inline-block;
    width: 98px;
    text-align: center;
    padding: 20px 0px;
    font-size: 16px;
    font-weight: bold;
}
.npost-poststat-posts span, .npost-poststat-points span {
    display: block;
    font-size: 8px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    color: #3e4d72;
    margin-bottom: -6px;
}
.npost-mini-in-bars div.btn {
    position: relative;
    width: 200px;
    margin: 0px auto;
    background-color: var(--transdark50);
    border: 1px solid var(--bgmid);
    padding: 8px;
    overflow: hidden;
    min-height: 20px;
}
.npost-mini-in-bars div.btn span {
    position: absolute;
    right: -6px;
    font-size: 34px;
    top: 6px;
}
.npost-romance {
    position: relative;
    width: 250px;
    background-color: var(--bgmid);
    height: 140px;
    overflow: hidden;
}
.npost-romance div {
    width: 220px;
    height: 107px;
    background-size: cover;
}
span.npost-shipname {
    position: relative;
    background-color: var(--bglight);
    padding: 8px;
    width: 220px;
    display: block;
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    color: #888888;
}
span.npost-shipstatus {
    position: absolute;
    transform: rotate(90deg);
    background-color: var(--mgn2);
    width: 125px;
    top: 55px;
    right: -55px;
    padding: 7px 5px 3px 10px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 10px;
}
span.npost-shipstatus span {
    float: right;
    font-size: 19px;
}
.npost-mini-in-awards {
    position: absolute;
    bottom: 0px;
    width: 261px;
    background-color: var(--bglight);
    height: 100px;
    display: block;
    padding: 10px;
}
.npost-mini-in-awards div {
    position: relative;
    width: 240px;
    height: 80px;
    padding: 10px;
    overflow: auto;
}



/***********************************
 Custom Board Stats
************************************/
div#boardstats {
    position: relative;
    margin-top: 50px;
    height: 642px;
    padding: 30px;
    background-color: var(--transdark50);
    border: 1px solid var(--border);
}
div#boardstats .maintitle {
    height: 200px;
    display: block;
    position: relative;
    background-color: var(--bgdark);
    background-image: var(--maintitle);
    overflow: hidden;
    border: 1px solid var(--border);
}
div#boardstats .maintitle .bstats-text {
    position: absolute;
    font-family: var(--title);
    text-transform: lowercase;
    font-size: 60px;
    top: 55px;
    right: 106px;
    cursor: crosshair;
    background: var(--grd1);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
div#boardstats .maintitle span.bstats-macro {
    position: absolute;
    font-size: 220px;
    top: -33px;
    color: var(--textw);
    opacity: .05;
}
.new-statistics {
    position: relative;
    background-color: var(--transdark50);
    margin-bottom: 3px;
    height: 290px;
    border: 1px solid var(--border);
    border-top: 0px;
}
.nstats-left {
    position: relative;
    float: left;
    width: 606px;
    height: 290px;
}
.nstats-top {
    position: relative;
    height: 224px;
    background-color: var(--translight50);
}
.nstats-onleft {
    position: relative;
    float: left;
    width: 400px;
    height: 220px;
}
.nstats-onstats {
    position: relative;
    margin-top: 10px;
    margin-left: 10px;
    background-color: var(--bgmid);
    padding: 5px;
    text-align: center;
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 10px;
}
.nstats-onstats span {
    color: var(--mg1);
    margin-right: 5px;
}
.nstats-onstats i {
    position: relative;
    margin: 0px 15px;
    font-size: 6px;
    top: -1px;
    color: var(--textd);
}
.nstats-onnow {
    position: relative;
    margin-left: 10px;
    background-color: var(--bglight);
    height: 157px;
    padding: 10px;
}
.nstats-onnow div {
    position: relative;
    padding: 5px;
    padding-right: 10px;
    overflow: auto;
    height: 147px;
    text-align: justify;
}
.nstats-onnow div a {
    font-size: 20px;
    font-family: var(--sans2);
}
.nstats-onright {
    position: relative;
    float: right;
    width: 200px;
}
.nstats-ontoday {
    position: relative;
    border: 1px solid var(--border);
    padding: 10px;
    background-color: var(--bgmid);
    margin: 10px;
    height: 178px;
}
.nstats-ontoday div {
    position: relative;
    padding: 5px;
    padding-right: 10px;
    text-align: justify;
    font-size: 9px;
    text-transform: uppercase;
    height: 168px;
    overflow: auto;
}
.nstats-bottom {
    position: relative;
    background-color: var(--bgmid);
    padding: 9px 0px 8px 0px;
}
.nstats-links {
    position: relative;
    text-align: center;
    width: 606px;
    font-size: 20px;
}
.nstats-links a {
    display: inline-block;
    margin: 10px 24px;
    color: var(--mg1);
    text-shadow: 1px 1px var(--bgdark);
    cursor: crosshair;
}
.nstats-right {
    position: relative;
    float: right;
    width: 329px;
    height: 290px;
    border-left: 1px solid var(--border);
}
.nstats-rtopics {position: relative;}
#recent-topics {
    position: relative;
    width: 310px;
    margin: 10px;
    height: 270px;
    overflow: auto;
    background-color: rgb(var(--mgr) / .1);
}
div#recent-topics table tbody tr {
    position: relative;
    display: block;
    margin-bottom: 2px;
    background-color: var(--bgdark);
    margin: 10px;
}
div#recent-topics table tbody tr .row4 {
    font-family: var(--sans2);
    text-transform: uppercase;
    padding: 20px 10px;
    width: 266px;
    border: 1px solid rgb(var(--mgr) / .3);
    font-size: 8px;
}
div#recent-topics table tbody tr .row4 a {cursor: crosshair;}
td.row4.recent-topics-date {display: none;}
.new-statistics-stats {
    position: relative;
    height: 150px;
    background-color: var(--bgdark);
    background-image: var(--pat1);
    margin-top: -3px;
}
.nstats-user {
    position: relative;
    text-align: center;
    padding-top: 28px;
    font-family: var(--title);
    text-transform: uppercase;
    font-size: 32px;
}
.nstats-user span {color: var(--textd); }
.nstats-user span nam {
    display: inline-block;
    border-bottom: 1px solid var(--textn);
    color: var(--mg1);
}
.nstats-user a {cursor: crosshair; color: var(--textl); }
.nstats-stats {
    position: relative;
    text-align: center;
    margin-top: 20px;
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 10px;
}
.nstats-stats span {
    display: inline-block;
    color: var(--mg1);
    border-bottom: 1px solid var(--textd);
    margin-right: 5px;
}
.nstats-stats i {
    margin: 0px 20px;
    font-size: 7px;
    top: -1px;
    position: relative;
    color: var(--mg1);
    text-shadow: 1px 1px var(--bgdark);
}


/***********************************
 Custom Profile View
************************************/
div#new-profile {
    padding: 30px;
    background-color: rgb(var(--mgnr) / .1);
    border: 1px solid var(--mgn2);
}
.np-wrap {
    position: relative;
    border: var(--bgdark);
}
.np-left {
    position: relative;
    float: left;
    height: 632px;
    width: 278px;
}
.np-gifmain {
    position: relative;
    background-color: var(--bglight);
    width: 280px;
    height: 150px;
}
.np-gifmain div {
    border: 1px solid var(--mgn2);
    position: relative;
    display: block;
    top: 10px;
    left: 10px;
    width: 238px;
    height: 108px;
    border-radius: 5px;
    padding: 10px;
    background-color: rgb(var(--mgnr) / .1);
}
.np-gifmain div span {
    position: relative;
    background-size: cover;
    width: 239px;
    height: 109px;
    display: block;
    border-radius: 5px;
    filter: brightness(.75) contrast(0.75) grayscale(.15);
}
.np-avatar {
    position: relative;
    margin-top: 0px;
    height: 450px;
    width: 250px;
    padding: 15px;
    background-color: var(--transdark50);
}
.np-avatar div {
    background-size: cover;
    width: 250px;
    height: 450px;
}
.np-right {
    position: relative;
    float: right;
    height: 632px;
    width: 658px;
}
.np-top {
    position: relative;
    height: 151px;
    overflow: hidden;
    background-color: var(--bgmid);
}
.np-gif-1 {
    position: absolute;
    padding: 40px;
    border: 1px solid var(--mgn1);
    background-color: var(--bglight);
    width: 150px;
    height: 150px;
    display: block;
    right: -24px;
    top: -41px;
    border-radius: 100%;
    text-align: center;
    z-index: 3;
}
.np-gif-1 div {
    position: relative;
    display: block;
    background-size: cover;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background-color: var(--bgdark);
    background: var(--grdn1);
    padding: 25px;
}
.np-gif-1 div span {
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background-size: cover;
    filter: brightness(0.75) contrast(0.75) grayscale(1);
}
.np-name {
    position: absolute;
    left: 20px;
    font-size: 31px;
    text-transform: uppercase;
    width: 610px;
}
.np-name nam {
    font-family: var(--sans2);
    display: block;
    font-weight: bold;
    margin-top: 46px;
    position: absolute;
    border-bottom: 1px solid var(--mgn2);
}
.np-sub {
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 8px;
    letter-spacing: .5px;
    margin-left: 20px;
    top: 92px;
    left: -20px;
    position: absolute;
    width: 500px;
    color: var(--textn);
}
.np-sub span {
    color: var(--mgn1);
    font-size: 7px;
    margin: 0px 5px;
    top: 0px;
    position: relative;
}
.np-mid {
    position: relative;
    background-color: var(--translight50);
    height: 425px;
    border-right: 1px solid var(--bglight);
}
.np-bottom {
    position: relative;
    background: var(--bgmid);
    height: 35px;
    padding: 10px 0px;
}
.np-toplinks {
    position: relative;
    padding: 0px 0px 5px 0px;
    width: 659px;
    text-align: center;
}
.np-toplinks a {
    margin: 0px 16px;
    display: inline-block;
}
.np-toplinks a div {
    display: inline-block;
    font-size: 24px;
    color: var(--mgn1);
    text-shadow: 1px 1px var(--bgdark);
}
.np-mid-stalkers {
    position: absolute;
    width: 598px;
    background-color: var(--transdark50);
    padding: 25px 30px;
    text-align: right;
    font-family: var(--sans2);
    text-transform: uppercase;
    color: var(--textn);
    font-size: 20px;
    height: 24px;
}
.np-mid-stalkers .np-mid-stalkerarrow {
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25px 50%, 0% 0%);
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25px 50%, 0% 0%);
    background-color: var(--bgdark);
    left: 266px;
    top: 0px;
    background-color: var(--mgn2);
    width: 50px;
    position: absolute;
    height: 74px;
}
.np-mid-stalkerstitle {
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: var(--mgn1);
    background: var(--grdn0);
    padding: 9px 40px;
    font-family: var(--title);
    font-size: 36px;
    text-transform: uppercase;
    color: var(--textl);
    font-weight: normal;
}
div#profile-lastvisitors {
    margin-top: -15px;
    margin-right: -20px;
}
.visitor {
    display: inline-block;
    margin: 0 2px 0 10px;
    outline: 1px solid var(--mgn2);
    outline-offset: 3px;
    opacity: 0.5;
    filter: grayscale(1);
    transition: all ease 0.6s;
}
.visitor:hover {opacity: 1; filter: grayscale(0);}
.np-mid-wrap {
    position: relative;
}
.np-mid-left {
    position: relative;
    float: left;
    width: 357px;
    height: 351px;
    top: 74px;
}
.np-mid-left-stats {
    position: relative;
    margin: 10px;
    background-color: rgb(35 35 35 / .5);
    border: 1px solid #1f1f1f;
    height: 240px;
}
.np-mid-left-stats div {
    position: relative;
    margin: 0px auto;
    background-color: rgb(35 35 35 / .5);
    border: 1px solid #232323;
    padding: 6px 8px 7px 8px;
    overflow: hidden;
    font-size: 9px;
    text-align: right;
    color: #949494;
}
.np-mid-left-stats div span {
    position: absolute;
    left: -3px;
    font-size: 24px;
    top: 3px;
    color: var(--mgn2);
    opacity: .5;
}
.np-mid-left-awards {
    position: relative;
    margin: 0px 10px;
    background-color: var(--transdark50);
    height: 68px;
    padding: 5px;
}
.np-mid-left-awards div {
    display: block;
    height: 58px;
    margin: 5px;
    overflow: auto;
    padding-right: 10px;
}
.np-mid-right {
    position: relative;
    float: right;
    width: 300px;
    height: 351px;
    top: 74px;
}
.np-mid-comments {
    position: relative;
    background-color: #242424;
    margin: 10px;
    border: 1px solid #1f1f1f;
    height: 328px;
}
.np-comment-contain {
    height: 290px;
    overflow: auto;
}
.np-mid-comments .row2.bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 268px;
}
.smallframe {width: 40px; height: 40px; margin-top: auto; margin-bottom: auto; float: left; }
.smallframe img {width: 40px; height: 40px; border-radius: 100%; }
#comment-message { width: 180px; }
textarea#comment-message {height: 24px; width: 189px; }
div#profile-comments .desc {
    padding: 10px;
    background: var(--bglight);
    font-size: 9px;
    color: var(--textn);
    margin-left: 44px;
    margin-top: -4px;
}
.np-comment-contain {height: 290px; overflow: auto; }
.np-mid-comments .row2.bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 268px;
}


/***********************************
 Custom Member List
************************************/

#member-list {
    padding: 30px;
    background-color: var(--transdark50);
    border: 1px solid var(--border);
    border-top: 0px;
}
#member-list .cml-title {
    font-family: var(--title);
    font-size: 61px;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 1px solid #5e6e94;
    margin-bottom: 20px;
}
#member-list .cml-mainwrap {
    position: relative;
}
#member-list .entry {
    position: relative;
    background-color: var(--bgdark);
    border-bottom: 1px solid var(--mg1);
    margin-bottom: 15px;
    height: 163px;
    display: inline-block;
    width: 459px;
    margin-left: 5px;
    margin-right: 5px;
}
#member-list .entry .name {
    bottom: 0px;
    margin: 13px;
    position: absolute;
    left: 0px;
    top: -2px;
    color: var(--textl);
    width: 427px;
    height: 36px;
    font-size: 30px;
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    border-bottom: 1px solid var(--mg1);
}
#member-list .entry .name a {
    color: #ffffff;
}
#member-list .entry .name a span {
    color: #ffffff;
}
#member-list .entry .avatar {
    position: absolute;
    border: 1px solid var(--mg1);
    display: block;
    width: 70px;
    height: 70px;
    padding: 10px;
    margin: 60px 15px 15px 13px;
}
#member-list .entry .avatar div {
    width: 70px;
    height: 70px;
    background-size: cover;
}
#member-list .entry .stats {
    width: 340px;
    margin-top: 60px;
    margin-left: 105px;
    position: relative;
    height: 92px;
    overflow: hidden;
}
#member-list .entry .stats div {
    position: relative;
    display: inline-block;
    width: 158px;
    margin: 5px;
    background-color: var(--bglight);
    margin-bottom: -2px;
    padding: 7px 0px;
    font-family: var(--sans1);
    color: var(--textl);
    text-align: center;
    text-transform: uppercase;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: .5px;
}
#member-list .entry .stats div span {
    color: var(--mg1);
}

.entry.gid4 {
    border-color: #945e87!important;
}
.entry.gid4 .name {
    border-color: #945e87!important;
}
.entry.gid4 .avatar {
    border-color: #945e87!important;
}
.entry.gid4 .stats div span {
    color: #945e87!important;
}

/***********************************
 Custom Pages
************************************/
div#pages {
    position: relative;
    padding: 30px;
    background-color: var(--transdark50);
    border: 1px solid var(--border);
}
.page-left {
    position: absolute;
    left: 30px;
    width: 250px;
    height: calc(100% - 60px);
    background-color: var(--transdark50);
    border: 1px solid var(--border);
}
.page-nav {
    background-color: var(--bglight);
    padding: 1px 15px 15px 15px;
    margin: 10px;
    position: sticky;
    top: 80px;
}
.page-nav h1 {
    font-family: var(--sans2);
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    border-bottom: 1px solid var(--mg1);
    font-size: 17px;
    margin-bottom: 5px;
}
.page-nav a div {
    position: relative;
    display: block;
    padding: 6px 9px;
    text-transform: uppercase;
    font-weight: bold;
    font-family: var(--sans2);
    font-size: 8px;
    letter-spacing: .5px;
    background-color: var(--bgmid);
    margin: 0px 8px 2px 8px;
    color: var(--textn);
    transition: .5s ease all;
    cursor: crosshair;
}
.page-nav a div:hover {
    background-color: var(--bglight);
    transition: .5s ease all;
}
.page-right {
    position: relative;
    float: right;
    width: 638px;
    background-color: var(--transdark50);
    padding: 20px;
    border: 1px solid var(--border);
}
.page-right .page-title {
    height: 100px;
    display: block;
    position: relative;
    background-color: var(--bglight);
    background-image: var(--maintitle);
    overflow: hidden;
    border: 1px solid var(--border);
}
.page-right .page-title span {
    font-family: var(--title);
    text-transform: lowercase;
    font-size: 53px;
    top: 8px;
    left: 26px;
    position: relative;
    cursor: crosshair;
    background: var(--grd1);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
.page-right .page-title div {
    position: absolute;
    padding: 40px;
    border: 1px solid var(--border);
    background-color: var(--translight50);
    width: 90px;
    height: 90px;
    display: block;
    right: -6px;
    top: -36px;
    border-radius: 100%;
    text-align: center;
}
.page-right .page-title div i {
    position: relative;
    right: 0px;
    top: 0px;
    font-size: 45px;
    padding: 23px;
    border-radius: 100%;
    background-color: var(--mg2);
    color: var(--text2);
    background: var(--grd1);
}
.page-right inner {
    position: relative;
    display: block;
    background-color: var(--bgmid);
    padding: 40px;
    border: 1px solid var(--border);
    border-top: 0px;
    text-align: justify;
    color: var(--textn);
    min-height: 402px;
}
.page-right inner b, .page-right inner i {color: var(--mg1);}
.page-right inner block {
    position: relative;
    display: block;
    margin: 30px;
}
.page-right inner h1 {
    position: relative;
    display: inline-block;
    font-family: var(--title);
    text-transform: uppercase;
    font-weight: lighter;
    font-size: 31px;
    border-bottom: 1px solid var(--mg1);
    margin-bottom: 0px;
    margin-top: 0px;
}
.page-right inner h2 {
    position: relative;
    margin-top: 20px;
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    border-bottom: 1px dotted var(--mg1);
    padding-bottom: 2px;
    color: var(--textw);
    font-size: 20px;
}
.page-right inner h3 {
    position: relative;
    display: inline-block;
    border-bottom: 1px solid var(--mg1);
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 10px;
    padding-bottom: 2px;
    margin-bottom: 0px;
    color: var(--textl);
}

/***********************************
 Custom Templates
************************************/
/* OOC Post */
.ooc-post {
    position: relative;
    margin: 30px;
    background-color: var(--bgdark);
    padding: 30px;
    border: 1px solid rgb(var(--mgnr) / .4);
}

/* General Template */
.gen1 {
    position: relative;
    width: 500px;
    background-color: rgb(var(--mgnr) / .2);
    border: 1px solid rgb(var(--mgnr) / .4);
    padding: 25px;
    margin: 0px auto;
}
.gen1-inside {
    position: relative;
    margin: 0 auto;
    background-color: var(--bglight);
}
.gen1-header {
    position: relative;
    top: 0px;
    background: var(--bglight);
    padding: 50px 20px;
    text-align: center;
    z-index: 2;
    border: 1px solid var(--bgdark);
}
.gen1-header span {
    padding-bottom: 5px;
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: .5px;
    font-size: 24px;
    border-bottom: 1px solid var(--mgn1);
}
.gen1-wrap {position: relative;}
.gen1-left {
    position: absolute;
    float: left;
    background-color: var(--bgmid);
    height: 100%;
    width: 67px;
    border: 1px solid var(--bgdark);
    border-width: 0 0 1px 1px;
    top: -1px;
}
.gen1-left div {
    min-width: 450px;
    height: 20px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    font-size: 10px;
    text-transform: uppercase;
    text-align: right;
    position: relative;
    display: block;
    top: 220px;
    right: 206px;
    padding: 19px 20px 10px 0px;
    font-weight: 700;
    font-family: var(--sans2);
    font-size: 12px;
    letter-spacing: 1px;
    cursor: default;
}
.gen1-right {
    position: relative;
    float: right;
    width: 430px;
    border: 1px solid var(--bgdark);
    border-width: 0 1px;
}
.gen1-sub {
    position: relative;
    background-color: var(--bgmid);
    padding: 10px;
    text-align: center;
    font-family: var(--sans2);
    text-transform: uppercase;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: 1px;
    color: var(--textn);
}
.gen1-right-wrap {
    position: relative;
    margin: 35px auto;
    width: 350px;
}
.gen1-right-wrap p {
    position: relative;
    padding: 20px;
    background-color: var(--bgmid);
    border: 1px solid var(--bgdark);
    margin: 10px auto 35px auto;
    line-height: 150%;
    font-size: 11px;
}
.gen1-right-wrap h1 {
    text-align: left;
    border-bottom: 1px solid var(--mgn1);
    position: relative;
    padding-bottom: 5px;
    font-family: var(--sans2);
    text-transform: uppercase;
    font-size: 17px;
    color: var(--textl);
}
.gen1-right-wrap h2 {
    text-align: left;
    border-bottom: 1px dotted var(--mgn1);
    position: relative;
    padding-bottom: 5px;
    font-family: var(--sans2);
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--textl);
}
.gen1-right-wrap h3 {
    position: relative;
    display: inline-block;
    border-bottom: 1px solid var(--mgn1);
    font-size: 10px;
    color: var(--textl);
    margin-bottom: 0px;
    text-transform: uppercase;
}

/* IC templates */
.ic-temp-1 {
    position: relative;
    width: 250px;
    margin: 0px auto;
    background-color: var(--transdark50);
    border: 1px solid var(--mgn2);
    padding: 30px;
}
.ic-temp-1 top {
    position: relative;
    background: var(--grdn1);
    width: 310px;
    height: 150px;
    display: block;
    top: -30px;
    left: -30px;
}
.ic-temp-1 top div {
    border: 1px solid var(--mgn1);
    width: 230px;
    height: 110px;
    border-radius: 5px;
    background-color: var(--translight50);
    padding: 10px;
    margin: 0px auto;
    top: 40px;
    position: relative;
}
.ic-temp-1 top div span {
    display: block;
    background-size: cover;
    width: 230px;
    height: 110px;
}
.ic-temp-1 inner {
    position: relative;
    margin-top: -30px;
    display: block;
    font-size: 11px;
    line-height: 150%;
    font-family: var(--sans1);
}
.ic-temp-1 inner b, .ic-temp-1 inner i {
    font-family: var(--sans2);
    font-size: 12px;
    color: var(--mgn1);
}

/* Shipper */
.mav-shipper-1 {
    position: relative;
    background-color: rgb(var(--mgnr) / .1);
    width: 500px;
    height: 720px;
    margin: 0px auto;
    border: 1px solid rgb(var(--mgnr) / .3);
}
.mav-shipper-1-in {
    position: relative;
    background-color: var(--bglight);
    width: 460px;
    margin: 20px;
    height: 680px;
}
.mav-shipper-1-ban {
    position: absolute;
    height: 10px;
    padding: 11px 0px 19px 0px;
    text-align: center;
    width: 460px;
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 8px;
    letter-spacing: .5px;
    background-color: rgb(var(--mgnr) / .25);
    color: var(--textl);
}
.mav-shipper-1-ban span {
    display: inline-block;
    width: 112px;
    text-align: center;
}
.mav-shipper-1-top {
    position: relative;
    background-color: var(--bgdark);
    height: 200px;
    top: 40px;
    background-image: var(--headership);
    border: 1px solid var(--mgn2);
    border-width: 1px 0;
}
.mav-shipper-1-top name {
    position: absolute;
    top: 82px;
    font-family: var(--sans2);
    text-transform: uppercase;
    font-size: 30px;
    font-weight: bold;
    display: block;
    width: 410px;
    color: var(--textw);
    text-align: left;
    left: 49px;
}
.mav-shipper-1-top name span {
    border-bottom: 1px solid var(--mgn1);
}
.mav-shipper-1-top sub {
    position: absolute;
    top: 112px;
    width: 410px;
    margin: 0 auto;
    left: 51px;
}
.mav-shipper-1-top sub span {
    color: var(--textw);
    letter-spacing: 2px;
}
.mav-shipper-1-bot {
    position: relative;
    top: 40px;
    display: block;
    padding: 1px;
    height: 387px;
    overflow: hidden;
}
.shipswipe.ng-scope {
    position: relative;
}
.shipswipe pages {
    color: var(--textn);
    text-align: center;
    display: block;
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
    white-space: nowrap;
}
.shipswipe pages .container {
    white-space: nowrap;
    font-size: 0px;
    height: 340px;
}
.shipswipe pages page {
    width: 100%;
    height: 100%;
    padding: 0;
    position: relative;
    top: 80px;
    display: inline-block;
}
.shipswipe pages page wrap {
    position: relative;
    background-color: var(--bgmid);
    border: 1px solid rgb(var(--mgnr) / .2);
    display: block;
    margin-top: -110px;
    margin: -70px 10px 10px 10px;
    height: 319px;
    font-size: 12px;
    overflow: hidden;
    white-space: pre-wrap;
    text-align: justify;
}
.shipswipe pages page wrap box {
    display: block;
    width: calc(420px - 40px);
    height: calc(300px - 20px);
    position: relative;
    margin: 10px;
    background-color: #252525;
    top: -1px;
    padding: 0 20px 20px;
    overflow: auto;
}
.shipswipe pages page wrap box p {margin: 0 0 -20px; }
.shipswipe pages page wrap img {
    width: 380px;
    margin-top: 0px;
    height: 261px;
}
.shipswipe pages page wrap box row {
    margin-bottom: 1px;
    min-height: 8px;
    padding: 8px 5px;
    margin: -9px 5px;
    display: block;
    background-color: var(--bglight);
    border: 1px solid var(--bgmid);
    text-align: right;
    line-height: 105%;
    color: var(--textl);
    font-size: 9px;
}
.shipswipe pages page wrap box row tg {
    display: inline-block;
    font-family: var(--sans2);
    float: left;
    color: var(--mgn1);
    font-weight: bold;
    margin-right: 10px;
}
.shipswipe pages page wrap box tt {
    position: relative;
    display: block;
    text-align: left;
    font-family: var(--sans2);
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
    margin-top: 5px;
    margin-left: 10px;
    font-size: 10px;
}
.shipswipe pages page wrap box tt span {
    text-shadow: 1px 1px var(--bgdark), -1px -1px var(--bgdark), 1px -1px var(--bgdark), -1px 1px var(--bgdark);
    border-bottom: 1px solid var(--mgn1);
    color: var(--textl);
}
.shipswipe pages page wrap box bloc {
    padding: 10px;
    margin: -10px 5px 5px 5px;
    display: block;
    background-color: var(--bgmid);
    border: 1px solid rgb(var(--mgnr) / .2);
    text-align: justify;
    line-height: 130%;
    color: var(--textn);
    font-size: 9px;
}
.shipswipe pages page.active {opacity: 1!important;}
.shipswipe tab-layout {
  background-color: rgb(var(--mgnr) / .25);
  
  display: flex;
  display: -webkit-flex;
  display: -ms-flex;
  
  -webkit-align-items: center;
    -ms-flex-align: center;
      
  -webkit-align-items: center;
    -ms-align-items: center;
      align-items: center;
      
  height: 48px;
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  
  -webkit-user-select: none;
    -ms-user-select: none;
      user-select: none;
        
  -webkit-tap-highlight-color: var(--bgdark);
  -webkit-tap-highlight-color: transparent;


  -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
}
.shipswipe tab-layout .tabs_container{
  position: relative;
  height: 100%;
  white-space: nowrap;
  overflow: hidden;
  
  -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  
  touch-action: pan-y;
  outline: 0;
}
.shipswipe tab-layout .tabs_content{
  position: absolute;
  white-space: nowrap;
  height: 100%;
  -moz-flex-basis: auto;
    -ms-flex-basis: auto;
      flex-basis: auto;
}
.shipswipe tab-layout[scrollable] .tabs_content{position: absolute; white-space: nowrap; }
.shipswipe tab-layout tab .tab-content {
  height: 100%;
  
  -webkit-transform: translateZ(0);
    transform: translateZ(0);
    
  -webkit-transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1);
    -moz-transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1);
      -ms-transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1);
        transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1);
  
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-direction: row;
    -ms-flex-direction: row;
      flex-direction: row;
  -webkit-align-items: center;
    -ms-flex-align: center;
      align-items: center;
  -webkit-justify-content: center;
    -ms-flex-pack: center;
      justify-content: center;
  -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
      flex: 1 1 auto;
}
.shipswipe tab-layout tab .tab-content i {font-size: 20px;}
.shipswipe tab-layout tab {
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    position: relative;
    padding: 0 41px;
    overflow: hidden;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    color: var(--textl);
    height: 100%;
    outline: 0;
}
.shipswipe tab-layout .tabs_content{padding-left: 16px;}
.shipswipe tab-layout tab[aria-selected="true"]{color: var(--textl);}
.shipswipe tab-layout .indicator {
    height: 2px;
    background-color: var(--bgmid);
    position: absolute;
    bottom: 0;
}
.shipswipe tab-layout .indicator.right{transition: right 200ms;}
.shipswipe tab-layout .indicator.left{transition: left 200ms;}
.shipswipe pages page:nth-child(1) {background-color: var(--bglight); }
.shipswipe pages page:nth-child(2) {background-color: var(--bglight); }
.shipswipe pages page:nth-child(3) {background-color: var(--bglight); }
.shipswipe pages page:nth-child(4) {background-color: var(--bglight); }
.mav-shipper-1-play {
    position: relative;
    height: 47px;
    background-color: rgb(var(--mgnr) / .25);
    top: 42px;
}
.mav-shipper-1-play div {
    margin: 7px auto 0px auto;
    display: inline-block;
    text-align: center;
    width: 112px;
    font-size: 10px;
}
.mav-shipper-1-play div span {
    display: block;
    font-family: var(--sans3);
    text-transform: uppercase;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: .5px;
    margin-bottom: -6px;
    color: var(--mgn1);
}






/* Instagram Template */
.instagram-template {
    position: relative;
    width: 525px;
    height: auto;
    padding-bottom: 30px;
    background-color: #f9f9f9;
    border: 1px solid #f1f1f1;
    margin: 0 auto;
    cursor: default;
}
.instagram-inner {
    position: relative;
    margin: 20px;
}
.instagram-top {
    position: relative;
    height: 150px;
    padding: 20px 0px;
    background-color: #94aebb;
}
.instagram-avatar {
    position: absolute;
    border-radius: 100%;
    height: 100px;
    width: 100px;
    overflow: hidden;
    top: 50px;
    left: 25px;
}
.instagram-avatar img {
    max-height: 100px;
    min-height: 100px;
    max-width: 100px;
    min-width: 100px;
    overflow: hidden;
    border-radius: 100%;
}
.instagram-name {
    position: relative;
    left: 140px;
    top: 10px;
    font-family: var(--sans2);
    font-weight: lighter;
    font-size: 28px;
    color: #ffffff;
}
.instagram-numbers {
  position: absolute;
  left: 116px;
  top: 58px;
}
.instagram-numbers div {
    position: relative;
    display: inline-block;
    min-width: 120px;
    text-align: center;
    font-family: var(--sans2);
    font-size: 12px;
    color: #ffffff;
}
.instagram-numbers div span {
    color: #bedeef;
}
.instagram-desc {
    position: absolute;
    height: 69px;
    width: 300px;
    overflow: hidden;
    padding: 8px;
    background: #ffffff;
    top: 80px;
    left: 144px;
}
.instagram-desc div {
    padding: 5px;
    text-align: justify;
    font-family: var(--sans2);
    font-size: 9px;
    color: #999999;
}
.instagram-desc div b {
    color: #94aebb;
    font-size: 10px;
}
.instagram-body {
  position: relative;
  margin: 20px auto;
  width: 370px;
}
.instagram-images {
  position: relative;
  height: 370px;
  width: 370px;
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
}
.instagram-images img {
    max-width: 120px;
    min-width: 120px;
    max-height: 120px;
    min-height: 120px;
    overflow: hidden;
    margin: 0px 0px 3px 0px;
}

.instagram-post {
    position: relative;
    height: 600px;
    width: 440px;
    margin: 0 auto;
    background-color: #f9f9f9;
    overflow: hidden;
    cursor: default;
}
.instagram-post-top {
    position: relative;
    height: 60px;
    overflow: hidden;
    background-color: #94aebb;
}
.instagram-post-avatar {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 40px;
  width: 40px;
  overflow: hidden;
  border-radius: 100%;
}
.instagram-post-avatar img {
    height: 40px;
    width: 40px;
}
.instagram-post-name {
    position: absolute;
    top: 16px;
    left: 60px;
    font-family: var(--sans2);
    text-transform: lowercase;
    font-weight: bold;
    color: #ffffff;
    font-size: 12px;
}
.instagram-post-title {
    position: absolute;
    left: 59px;
    top: 34px;
    font-family: var(--sans2);
    text-transform: none;
    font-size: 9px;
    color: #eaeaea;
}
.instagram-post-date {
  position: absolute;
  right: 56px;
  top: 25px;
  font-family: var(--sans2);
  font-size: 8px;
  font-weight: bold;
  color: #eaeaea;
}
.instagram-post-bookmark {
  position: absolute;
  right: 20px;
  top: 18px;
  font-size: 24px;
  color: #eaeaea;
}
.instagram-post-image {
  position: relative;
}
.instagram-post-image img {
  max-width: 440px;
  min-width: 440px;
  max-height: 370px;
  min-height: 370px;
  overflow: hidden;
}
.instagram-post-bottom {
  position: relative;
}
.instagram-post-desc {
  position: relative;
  width: 350px;
  height: 50px;
  margin: 20px auto 0 auto;
  border-bottom: 1px solid #dedede;
  overflow: hidden;
}
.instagram-post-desc div {
  position: relative;
  font-family: var(--sans2);
  font-size: 10px;
  color: #707070;
}
.instagram-post-desc div name {
    display: inline-block;
    margin-right: 3px;
    font-family: var(--sans2);
    font-size: 12px;
    font-weight: bold;
    color: #94aebb;
}
.instagram-post-desc div i {
    color: #94aebb;
}
.instagram-post-icons {
  position: absolute;
  width: 200px;
  height: 30px;
  left: 44px;
  margin-top: 10px;
  overflow: hidden;
}
.instagram-post-icons span {
  display: inline-block;
  margin-right: 8px;
  font-size: 20px;
  color: #cecece;
}
.instagram-post-likes {
    position: absolute;
    right: 50px;
    margin-top: 13px;
    text-align: right;
    font-family: var(--sans2);
    font-size: 12px;
    font-weight: bold;
    color: #aeaeae;
}
.instagram-post-likes span {
    color: #94aebb;
}
.instagram-post-comment {
  position: relative;
  width: 350px;
  height: 20px;
  padding-top: 18px;
  margin: 40px auto 0 auto;
  border-top: 1px solid #dedede;
}
.instagram-post-comment div {
  font-family: var(--sans2);
  font-size: 12px;
  color: #909090;
}
.instagram-post-comment div span {
    display: inline-block;
    position: absolute;
    right: 0px;
    margin-top: 0px;
    font-size: 30px;
}


/* Twitter Template */
.twitter-temp {
    position: relative;
    margin: 0 auto;
    width: 525px;
    min-height: 440px;
    cursor: default;
}
.twitter-top {
  position: relative;
  height: 350px;
  width: 525px;
  z-index: 1;
}
.twitter-top-bg {
    position: relative;
    top: 0px;
    left: 0px;
    height: 350px;
    width: 525px;
    z-index: 2;
    overflow: hidden;
}
.twitter-top-bg img {
    max-width: 525px;
    min-width: 525px;
    max-height: 350px;
    min-height: 350px;
}
.twitter-avatar {
  position: absolute;
  background: #94aebb;
  padding: 5px;
  border-radius: 100%;
  overflow: hidden;
  height: 150px;
  width: 150px;
  z-index: 3;
  margin-top: -85px;
  margin-left: 10px;
}
.twitter-avatar img {
  max-height: 150px;
  min-height: 150px;
  max-width: 150px;
  min-width: 150px;
  overflow: hidden;
  border-radius: 100%;
}
.twitter-name {
    position: absolute;
    z-index: 3;
    font-family: var(--sans2);
    text-transform: none;
    color: #ffffff;
    font-weight: bold;
    font-size: 26px;
    letter-spacing: 0px;
    margin-top: -40px;
    margin-left: 180px;
    text-shadow: 2px 2px #94aebb;
}
.twitter-top-bar {
    position: relative;
    background-color: #94aebb;
    height: 30px;
    padding: 10px;
}
.twitter-numbers {
  position: relative;
  float: left;
  width: 240px;
  height: 50px;
  margin-left: 160px;
  margin-top: -10px;
  overflow: hidden;
}
.twitter-numbers div {
    display: inline-block;
    position: relative;
    width: 55px;
    height: 37px;
    margin-top: 10px;
    font-family: var(--sans3);
    text-transform: uppercase;
    font-size: 8px;
    font-weight: bold;
    text-align: center;
    color: #eaeaea;
}
.twitter-numbers div.one {
  border-bottom: 3px solid #bedeef;
}
.twitter-numbers div.one span {
  color: #bedeef;
}
.twitter-numbers div span {
  display: block;
  font-size: 14px;
  color: #ffffff;
}
.twitter-button {
  position: relative;
  float: right;
  width: 100px;
  height: 50px;
  margin-right: 0px;
  margin-top: -5px;
  overflow: hidden;
}
.twitter-button div {
    position: relative;
    display: block;
    background-color: #bedeef;
    height: 20px;
    width: 100px;
    padding: 15px 0 5px 0;
    border-radius: 100px;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--sans2);
    font-weight: bold;
    font-size: 10px;
    cursor: default;
}

.twitter-reply {
  position: relative;
  width: 400px;
  height: auto;
  margin: 0 auto 20px auto;
  background-color: #f9f9f9;
}
.twitter-reply-info {
  position: relative;
  width: 380px;
  height: 60px;
  padding: 20px 0px 5px 20px;
  overflow: hidden;
}
.twitter-reply-avatar {
    position: absolute;
    width: 50px;
    height: 50px;
    padding: 5px;
    background-color: #94aebb;
    border-radius: 100%;
    overflow: hidden;
}
.twitter-reply-avatar img {
  max-height: 50px;
  min-height: 50px;
  max-width: 50px;
  min-width: 50px;
  border-radius: 100%;
}
.twitter-reply-nname {
    position: relative;
    margin-top: 22px;
    margin-left: 70px;
    font-family: var(--sans2);
    font-weight: bold;
    font-size: 14px;
    color: #94aebb;
}
.twitter-reply-nname span {
    display: inline-block;
    position: relative;
    font-family: var(--sans2);
    font-weight: lighter;
    font-size: 10px;
    color: #bebebe;
    top: -2px;
}
.twitter-reply-date {
  position: relative;
  display: inline-block;
  font-family: var(--sans3)!important;
  text-transform: uppercase;
  font-size: 8px!important;
  font-weight: bold!important;
  top: -2px!important;
  color: #909090;
}
.twitter-reply-tweet {
    position: relative;
    width: 280px;
    height: auto;
    padding: 20px;
    margin: 0 auto;
    background-color: #ffffff;
    font-family: var(--sans2);
    font-size: 14px;
    text-align: justify;
    color: #999999;
}
.twitter-reply-bottom {
  position: relative;
  background-color: #ffffff;
  border-top: 1px solid #efefef;
  margin-top: 35px;
}
.twitter-reply-buttons {
  position: relative;
  margin-left: 10px;
}
.twitter-reply-buttons div {
    position: relative;
    display: inline-block;
    padding: 25px 0px;
    text-align: center;
    max-width: 92px;
    min-width: 92px;
    margin-right: 2px;
    font-family: var(--sans2)!important;
    text-transform: uppercase;
    color: #94aebb!important;
    font-weight: bold!important;
    font-size: 12px!important;
}
.twitter-reply-buttons div span {
  position: relative;
  display: inline-block;
  top: 5px;
  margin-right: 4px;
  font-size: 20px;
  color: #cecece;
}

/* Dev Templates */
.dev-mood-icon span i,
.dev-ls-icon span i,
.dev-wrd-icon span i,
.dev-plyl-icon span i,
.dev-rlships-icon span i,
.dev-ships-icon span i {
    animation: shake 1s infinite;
}

#dev-mood {
    position: relative;
    background-color: #ffffff;
    background-image: url(https://files.jcink.net/uploads/fatherspurge/skins/ma/absurdity.png);
    width: 465px;
    margin: 0 auto;
    border: 1px solid #f3f3f3;
}
.dev-mood-inner {
    position: relative;
    padding: 20px;
    background-color: #fefefe;
    margin: 20px;
    border: 1px solid #f3f3f3;
}
.dev-mood-images {
    position: relative;
    text-align: center;
}
.dev-mood-images span {
    display: inline-block;
    border: 1px solid #f2f9ff;
    margin: 1px auto 2px auto;
    width: 120px;
    height: 120px;
}
.dev-mood-images span img {
    width: 120px;
    height: 120px;
}
.dev-mood-bottom {
    position: relative;
    background: #94aebb;
    padding: 20px;
    text-align: right;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 3px;
}
.dev-mood-icon {
    position: relative;
    padding: 15px 0px;
}
.dev-mood-icon span {
    position: absolute;
    left: -20px;
    display: block;
    background: #f2f9ff;
    padding: 27px 27px 28px 27px;
    top: -20px;
    text-align: center;
    color: #94aebb;
}

#dev-ls {
    position: relative;
    background-color: #ffffff;
    background-image: url(https://files.jcink.net/uploads/fatherspurge/skins/ma/absurdity.png);
    width: 465px;
    margin: 0 auto;
    border: 1px solid #f3f3f3;
}
.dev-ls-inner {
    position: relative;
    padding: 20px;
    background-color: #fefefe;
    margin: 20px;
    border: 1px solid #f3f3f3;
}
.dev-ls-images {
    position: relative;
    text-align: center;
    width: 385px;
    height: 336px;
    overflow: auto;
    white-space: nowrap;
}
.dev-ls-images span {
    margin-right: 3px;
    display: inline-block;
    position: relative;
    height: 330px;
    width: 385px;
}
.dev-ls-images span img {
    width: 385px;
    height: 330px;
    overflow: hidden;
}
.dev-ls-bottom {
    position: relative;
    background: #94aebb;
    padding: 20px;
    text-align: right;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 3px;
}
.dev-ls-icon {
    position: relative;
    padding: 15px 0px;
}
.dev-ls-icon span {
    position: absolute;
    left: -20px;
    display: block;
    background: #f2f9ff;
    padding: 27px 27px 28px 27px;
    top: -20px;
    text-align: center;
    color: #94aebb;
}

#dev-wrd {
    position: relative;
    background-color: #ffffff;
    background-image: url(https://files.jcink.net/uploads/fatherspurge/skins/ma/absurdity.png);
    width: 465px;
    margin: 0 auto;
    border: 1px solid #f3f3f3;
}
.dev-wrd-top {
    position: relative;
    background: #94aebb;
    padding: 20px;
    text-align: right;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 3px;
}
.dev-wrd-icon {
    position: relative;
    padding: 15px 0px;
}
.dev-wrd-icon span {
    position: absolute;
    left: -20px;
    display: block;
    background: #f2f9ff;
    padding: 27px 27px 28px 27px;
    top: -20px;
    text-align: center;
    color: #94aebb;
}
.dev-wrd-inner {
    position: relative;
    padding: 20px 20px 10px 20px;
    background-color: #fefefe;
    margin: 20px;
    border: 1px solid #f3f3f3;
}
.dev-wrd-images {
    position: relative;
    text-align: center;
    width: 385px;
}
.dev-wrd-images span {
    display: inline-block;
    position: relative;
    width: 385px;
    margin-bottom: 10px;
}
.dev-wrd-images span img {
    width: 385px;
}

#dev-plyl {
    position: relative;
    background-color: #ffffff;
    background-image: url(https://files.jcink.net/uploads/fatherspurge/skins/ma/absurdity.png);
    width: 465px;
    margin: 0 auto;
    border: 1px solid #f3f3f3;
}
.dev-plyl-top {
    position: relative;
    background: #94aebb;
    padding: 20px;
    text-align: left;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 3px;
}
.dev-plyl-icon {
    position: relative;
    padding: 15px 0px;
}
.dev-plyl-icon span {
    position: absolute;
    right: -20px;
    display: block;
    background: #f2f9ff;
    padding: 27px 27px 28px 27px;
    top: -20px;
    text-align: center;
    color: #94aebb;
}
.dev-plyl-inner {
    position: relative;
    padding: 20px 20px 10px 20px;
    background-color: #fefefe;
    margin: 20px;
    border: 1px solid #f3f3f3;
}
.dev-plyl-list {
    position: relative;
}
.dev-plyl-list iframe {
    min-width: 383px;
    max-width: 383px;
}

#dev-rlships {
    position: relative;
    background-color: #ffffff;
    background-image: url(https://files.jcink.net/uploads/fatherspurge/skins/ma/absurdity.png);
    width: 465px;
    margin: 0 auto;
    border: 1px solid #f3f3f3;
}
.dev-rlships-inner {
    position: relative;
    padding: 20px;
    background-color: #fefefe;
    margin: 20px;
    border: 1px solid #f3f3f3;
}
.dev-rlships-blocks {
    position: relative;
}
.dev-rlships-blocks div {
    display: block;
    margin-bottom: 5px;
    border: 1px solid #eaeaea;
    background: #f3f3f3;
    height: 150px;
    overflow: hidden;
}
.dev-rlships-blocks div img {
    position: absolute;
    width: 120px;
    height: 120px;
    overflow: hidden;
}
.dev-rlships-blocks div span {
    position: absolute;
    background: #ffffff;
    right: 3px;
    margin-top: 3px;
    width: 234px;
    height: 94px;
    padding: 10px;
    overflow: hidden;
    color: #b3b3b3;
    line-height: 130%;
    font-size: 10px;
}
.dev-rlships-blocks div span span {
    margin: -5px 1px 5px 5px!important;
    overflow: auto;
    height: 85px;
    width: 225px;
}
.dev-rlships-blocks div name {
    display: block;
    position: absolute;
    background-color: #94aebb;
    height: 10px;
    width: 362px;
    padding: 8px 5px 12px 15px;
    margin-top: 120px;
    font-size: 17px;
    font-weight: bold;
    color: #ffffff;
}
.dev-rlships-blocks div.air name {
    background: #d2d69b;
}
.dev-rlships-blocks div.earth name {
    background: #dabb9a;
}
.dev-rlships-blocks div.fire name {
    background: #e89393;
}
.dev-rlships-blocks div.water name {
    background: #9cd8e4;
}
.dev-rlships-bottom {
    position: relative;
    background: #94aebb;
    padding: 20px;
    text-align: left;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 3px;
}
.dev-rlships-icon {
    position: relative;
    padding: 15px 0px;
}
.dev-rlships-icon span {
    position: absolute;
    right: -20px;
    display: block;
    background: #f2f9ff;
    padding: 27px 27px 28px 27px;
    top: -20px;
    text-align: center;
    color: #94aebb;
}

#dev-ships {
    position: relative;
    background-color: #ffffff;
    background-image: url(https://files.jcink.net/uploads/fatherspurge/skins/ma/absurdity.png);
    width: 465px;
    margin: 0 auto;
    border: 1px solid #f3f3f3;
}
.dev-ships-inner {
    position: relative;
    padding: 20px;
    background-color: #fefefe;
    margin: 20px;
    border: 1px solid #f3f3f3;
}
.dev-ships-blocks {
    position: relative;
    display: block;
    min-height: 162px;
    width: 381px;
    text-align: center;
}
.dev-ships-blocks div {
    position: relative;
    display: inline-block;
    background-color: #f7f7f7;
    padding: 7px 3px 5px 4px;
    width: 115px;
    height: 205px;
    overflow: hidden;
    text-align: center;
    cursor: default;
    border: 1px solid #eaeaea;
}
.dev-ships-blocks div.air {
    border-color: #d2d69b;
}
.dev-ships-blocks div.earth {
    border-color: #dabb9a;
}
.dev-ships-blocks div.fire {
    border-color: #e89393;
}
.dev-ships-blocks div.water {
    border-color: #9cd8e4;
}
.dev-ships-blocks div img {
    width: 110px;
    height: 110px;
}
.dev-ships-blocks div span {
    background: #ffffff;
    display: block;
    margin: 2px 2px 5px 3px;
    height: 92px;
    overflow: hidden;
    text-align: justify;
    font-size: 8px;
    line-height: 130%;
    color: #555;
}
.dev-ships-blocks div span span {
    margin: 3px;
    padding: 5px;
    height: 75px;
    overflow: auto;
}
.dev-ships-bottom {
    position: relative;
    background: #94aebb;
    padding: 20px;
    text-align: left;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 3px;
}
.dev-ships-icon {
    position: relative;
    padding: 15px 0px;
}
.dev-ships-icon span {
    position: absolute;
    right: -20px;
    display: block;
    background: #f2f9ff;
    padding: 27px 27px 28px 27px;
    top: -20px;
    text-align: center;
    color: #94aebb;
}
.dev-ships-blocks div span span type {
    display: block;
    font-family: var(--sans2);
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #f3f3f3;
    padding-bottom: 3px;
    margin-bottom: 3px;
    color: #94aebb;
}


/* Snapchat Template */
div#snapchat-temp {
    width: 285px;
    height: 524px;
    margin: 25px auto;
    padding: 0px;
    position: relative;
    background: #e9e9e9;
    border-radius: 20px;
    line-height: 0%;
    box-shadow: 3px 3px 10px #94aebb;
}
div#snapchat-temp .snapchat-temptbutt {
    width: 69px;
    height: 7px;
    display: block;
    position: absolute;
    top: 16px;
    right: 102px;
    background: #ffffff;
    border-radius: 10px;
}
div#snapchat-temp .snapchat-temptbutt:before {
    content: '';
    width: 11px;
    height: 11px;
    display: block;
    position: absolute;
    top: -2px;
    left: -38px;
    background: #ffffff;
    border-radius: 100%;
}
div#snapchat-temp .snapchat-tempmbutt {
    width: 6px;
    height: 23px;
    display: block;
    position: absolute;
    top: 65px;
    left: -4px;
    background: #e9e9e9;
    border-radius: 2px;
}
div#snapchat-temp .snapchat-tempmbutt:before, div#snapchat-temp .snapchat-tempmbutt:after {
    content: '';
    width: 6px;
    height: 30px;
    display: block;
    position: absolute;
    top: 45px;
    left: 0px;
    background: #e9e9e9;
    border-radius: 2px;
}
div#snapchat-temp .snapchat-tempmbutt:after {
    top: 78px;
}
div#snapchat-temp .snapchat-inside {
    background-color: #ffffff;
    height: 445px;
    width: 265px;
    top: 50px;
    left: 10px;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}
div#snapchat-temp .snapchat-strip {
    position: relative;
    top: 270px;
    background-color: rgba(144, 144, 144, .4);
    padding: 17px 3px 15px 3px;
    font-family: var(--sans3);
    text-transform: uppercase;
    font-size: 13px;
    color: #fff;
    font-weight: bold;
    cursor: default;
    line-height: 80%;
    z-index: 1;
}
div#snapchat-temp .snapchat-inside:after {
    content: '';
    display: block;
    height: 445px;
    width: 265px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-size: cover;
}
div#snapchat-temp.lgbt .snapchat-inside:after {
    background-image: url(https://files.jcink.net/uploads/fatherspurge/filters/gaystargif.gif);
}
div#snapchat-temp.snow .snapchat-inside:after {
    background-image: url(https://files.jcink.net/uploads/fatherspurge/filters/snowgif.gif);
}
div#snapchat-temp.party .snapchat-inside:after {
    background-image: url(https://files.jcink.net/uploads/fatherspurge/filters/partygif.gif);
}
div#snapchat-temp.heartsnow .snapchat-inside:after {
    background-image: url(https://files.jcink.net/uploads/fatherspurge/filters/heartsnowgif.gif);
}
div#snapchat-temp.pinksnow .snapchat-inside:after {
    background-image: url(https://files.jcink.net/uploads/fatherspurge/filters/pinksnowgif.gif);
}
div#snapchat-temp.rain .snapchat-inside:after {
    background-image: url(https://files.jcink.net/uploads/fatherspurge/filters/raingif.gif);
}
div#snapchat-temp.heavyrain .snapchat-inside:after {
    background-image: url(https://files.jcink.net/uploads/fatherspurge/filters/heavyraingif.gif);
}
div#snapchat-temp.snowfall .snapchat-inside:after {
    background-image: url(https://files.jcink.net/uploads/fatherspurge/filters/snowgif2.gif);
}

/* Text Messaging */
div#icp-1 {
    width: 245px;
    height: 424px;
    margin: 25px auto;
    padding: 0px;
    position: relative;
    background: #1f1f1f;
    border-radius: 20px;
    line-height: 0%;
    box-shadow: 3px 3px 10px #191919;
}
div#icp-1 .tbutt {
    width: 69px;
    height: 7px;
    display: block;
    position: absolute;
    top: 16px;
    right: 74px;
    background: #101010;
    border-radius: 10px;
}
div#icp-1 .tbutt:before {
    content: '';
    width: 11px;
    height: 11px;
    display: block;
    position: absolute;
    top: -2px;
    left: -38px;
    background: #101010;
    border-radius: 100%;
}
div#icp-1 .mbutt {
    width: 6px;
    height: 23px;
    display: block;
    position: absolute;
    top: 65px;
    left: -4px;
    background: #1f1f1f;
    border-radius: 2px;
}
div#icp-1 .mbutt:before, div#icp-1 .mbutt:after {
    content: '';
    width: 6px;
    height: 30px;
    display: block;
    position: absolute;
    top: 45px;
    left: 0px;
    background: #1f1f1f;
    border-radius: 2px;
}
div#icp-1 .mbutt:after {
    top: 78px;
}
div#icp-1 .icp-1-inside {
    background-color: #191919;
    height: 330px;
    width: 225px;
    top: 50px;
    left: 10px;
    position: relative;
}
div#icp-1 .icp-1-strip {
    position: relative;
    background-color: var(--mg1);
    height: 10px;
    padding: 7px 3px 5px 3px;
    font-family: var(--sans3);
    text-transform: uppercase;
    font-size: 9px;
    color: #fff;
    font-weight: bold;
    cursor: default;
}
div#icp-1 .icp-icons-left {
    display: inline-block;
    float: left;
}
div#icp-1 .icp-icons-right {
    display: inline-block;
    float: right;
}
div#icp-1 .icp-time {
    display: inline-block;
    position: relative;
    top: -1px;
}
div#icp-1 .icp-1-details {
    display: block;
    background-color: var(--bglight);
    height: 10px;
    padding: 6px;
    cursor: default;
    font-size: 10px;
}
div#icp-1 .icp-1-details span.th.th-backward-arrow {
    position: relative;
    display: inline-block;
    color: #b9b9b9;
}
div#icp-1 .icp-1-messages {
    display: block;
    position: relative;
    height: 234px;
    padding: 10px;
    overflow: auto;
}
div#icp-1 .icp-1-messages mssg {
    padding: 10px;
    margin: 6px 10px 7px 10px;
    float: right;
    display: block;
    position: relative;
    border-radius: 6px;
    line-height: 130%;
    background-color: var(--bglight);
    text-align: left;
    color: #949494;
    font-size: 10px;
    cursor: default;
    min-width: 63px;
}
div#icp-1 .icp-1-messages mssg:after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: -9px;
    border-bottom: 15px solid var(--bglight);
    border-right: 10px solid transparent;
}
div#icp-1 .icp-1-messages mssg img {
    max-width: 108px;
}
div#icp-1 span.m-nickname {
    display: inline-block;
    text-align: center;
    width: 186px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    position: relative;
    top: 1px;
    left: -3px;
    color: #989898;
    cursor: default;
}
div#icp-1 span.m-delete {
    color: #b9b9b9;
}
div#icp-1 .icp-1-enter {
    position: absolute;
    background-color: #1d1d1d;
    width: 225px;
    display: block;
    top: 306px;
    height: 24px;
}
div#icp-1 .message-enter {
    display: block;
    position: absolute;
    left: 7px;
    top: 3px;
    background-color: var(--bglight);
    font-size: 9px;
    color: #585858;
    font-weight: bold;
    padding: 9px 5px;
    border-radius: 7px;
    width: 145px;
}
div#icp-1 .message-attach {
    display: block;
    position: absolute;
    right: 36px;
    top: 4px;
    font-size: 16px;
    color: #888888;
}
div#icp-1 .message-send {
    display: block;
    position: absolute;
    right: 11px;
    top: 4px;
    font-size: 16px;
    color: #888888;
}
div#icp-1 .icp-1-bottom-butts {
    position: absolute;
    height: 30px;
    display: block;
    bottom: -36px;
    z-index: 10;
    left: 32px;
    width: 170px;
}
div#icp-1 .icp-1-bottom-butts div {
    display: inline-block;
    margin: 6px 16px 0px 16px;
    font-size: 20px;
    color: #989898;
}











		


/*=============================================== *
 * sunflower templates by codesbyteal
 *=============================================== */

/* general styling */

.sunflower{--r1: 209, 160, 160; /* accent colour */
     --dark:#1b1b1b; --light: #f0f0f0;  --bodyfont: source sans pro; color:var(--body); font:400 12px var(--bodyfont); text-align:justify; line-height:150%;}

.sunflower-main b{color:rgba(var(--r1),1);}

/* styling for light and dark sets */

.sunflower.light{--body:var(--dark); --l0:#fff; --b1: #d9d9d9; --c1: rgba(var(--r1),0.3)}
.sunflower.dark{--body:var(--light); --l0:var(--dark); --b1: #898989; --c1: rgba(var(--r1),0.7)}


/* admin update */

sunflower-admin{display:block; margin:20px auto; width:480px; outline:3px solid var(--l0); min-height:200px; background:var(--l0); border:1px solid var(--b1); box-sizing:border-box; padding:45px;}
sunflower-admin top{width:100%; padding:40px 40px; display:flex; border:1px solid var(--b1); align-items:center; justify-content:center; font:400 23px var(--bodyfont); text-transform:uppercase; letter-spacing:1px; box-sizing:border-box; position:relative; overflow:hidden;}
sunflower-admin top x{display:inline-block; border-bottom:5px solid var(--c1); padding-bottom:5px; position:relative; z-index:2;}
sunflower-admin top i{position:absolute; z-index:0; width:100%; height:119px; display:flex; font-size:230px; color:var(--b1); opacity:0.3; align-items:center; justify-content:center; top:0; left:0;}
sunflower-admin .main{width:100%; display:block; box-sizing:border-box; border:1px solid var(--b1); border-top:none; padding:30px 45px;}
sunflower-admin h1{display:flex; width:100%; font:400 16px var(--bodyfont); text-transform:uppercase; letter-spacing:1px; box-sizing:border-box; align-items:center; padding-bottom:5px;}
sunflower-admin h1:after{content:""; margin-left:10px; display:block; flex-grow:1; background:var(--c1); height:5px;}
sunflower-admin h2{font:600 10px var(--bodyfont); text-transform:uppercase; letter-spacing:1px; display:block; text-align:right; margin-top:0px;} 

/* face claim */

sunflower-admin faceclaim{width:100%; display:flex; box-sizing:border-box; border:1px solid var(--b1); border-top:none;}
sunflower-admin facecol{width:50%; box-sizing:border-box; height:360px; display:block;}
sunflower-admin facecol:first-of-type{border-right:1px solid var(--b1);} 
sunflower-admin facecol x{width:100%; height:60px; display:flex; align-items:center; justify-content:center; font: 400 16px var(--bodyfont); box-sizing:border-box; text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid var(--b1);} 
sunflower-admin facecol scroll{width:100%; height:calc(100% - 60px); border:20px solid transparent; padding-right:5px; overflow:auto; display:block; box-sizing:border-box;}
sunflower-admin facecol a{font:11px var(--bodyfont); text-transform:uppercase; letter-spacing:1px; display:flex; width:100%; box-sizing:border-box; text-align:center; color:var(--body)!important; position:relative; height:24px; align-items:center; justify-content:center; overflow:hidden;}
sunflower-admin facecol a charname{position:absolute; z-index:1; width:100%; height:100%; display:flex; align-items:center; justify-content:center; top:0; left:0; text-align:center; transition:0.3s; opacity:0; transform:rotatex(90deg); font-style:italic;}
sunflower-admin facecol a:hover charname{transform:rotatex(0deg); opacity:1;}
sunflower-admin facecol a:hover fc{opacity:0;}
sunflower-admin facecol a fc{transition:0.3s; opacity:1;}
sunflower-admin .reservebox{display:block; padding:20px; border:1px solid var(--b1); border-top:none;}
sunflower-admin .reservebox:first-of-type{border-top:1px solid var(--b1); margin-top:25px;}
sunflower-admin reserve{display:block; margin:2px 0;}
sunflower-admin reserve b{text-transform:uppercase; letter-spacing:1px;}
sunflower-admin reserve i{color:var(--body); opacity:0.7; margin-right:5px; font-size:80%;}

/* member directory */

sunflower-memdir{display:block; margin:20px auto; width:420px; outline:3px solid var(--l0); min-height:200px; background:var(--l0); border:1px solid var(--b1); box-sizing:border-box; padding:45px;}
sunflower-memdir top{position:relative; width:100%;border:1px solid var(--b1); display:flex; flex-direction:column; align-items:center; padding:20px 30px 30px 30px; box-sizing:border-box;}
sunflower-memdir top name{display:inline-flex; background:var(--l0); padding:0px 15px; font:400 21px var(--bodyfont); text-transform:uppercase; letter-spacing:1px; position:absolute; height:40px; align-items:center; top:-20px;}
sunflower-memdir top subt{font:10px var(--bodyfont); text-transform:uppercase; letter-spacing:1px; text-align:center; display:block; padding-bottom:20px; display:block; }
sunflower-memdir top subt i{font-size:80%; opacity:0.7; margin:0px 5px;}
sunflower-memdir top desc{display:block;}
sunflower-memdir char{width:100%; border:1px solid var(--b1); border-top:none; display:flex; box-sizing:border-box; padding:30px; align-items:center;}
sunflower-memdir char img{border-radius:7px; width:60px; height:60px; position:relative; z-index:1;}
sunflower-memdir char pic{border-radius:7px; width:60px; height:60px; position:relative; display:block; margin:-4px 0 0 -4px; margin-right:30px;}
sunflower-memdir char pic:after{content:""; display:block; width:100%; height:100%; border-radius:7px; background:var(--c1); position:absolute; top:4px; left:4px; z-index:0; transition:0.2s;}
sunflower-memdir char pic:hover:after{background:var(--b1); opacity:0.5;}
sunflower-memdir char info{flex-grow:1; display:flex; flex-direction:column; justify-content:center; text-align:left;}
sunflower-memdir char info name{font:400 18px var(--bodyfont); text-transform:uppercase; letter-spacing:1px;}
sunflower-memdir char info subt{font:400 9px var(--bodyfont); text-transform:uppercase; letter-spacing:1px; margin-top:5px;}
sunflower-memdir char info subt i{font-size:80%; opacity:0.7; margin:0px 2px;}

/* shipper app */

sunflower-shipper{display:block; margin:20px auto; width:500px; outline:3px solid var(--l0); min-height:200px; background:var(--l0); border:1px solid var(--b1); box-sizing:border-box; padding:45px;}

sunflower-shipper btm{width:100%; padding:40px 40px; display:flex; flex-direction:column; border:1px solid var(--b1); align-items:center; justify-content:center; font:400 23px var(--bodyfont); text-transform:uppercase; letter-spacing:1px; box-sizing:border-box; position:relative; overflow:hidden;}
sunflower-shipper btm x{display:inline-block; padding-bottom:5px; position:relative; z-index:2;}
sunflower-shipper btm subt{font:10px var(--bodyfont); text-transform:uppercase; letter-spacing:1px; color:var(--body);}
sunflower-memdir bottom subt b{font-weight:600;}
sunflower-shipper btm i.bg{position:absolute; z-index:0; width:100%; height:119px; display:flex; font-size:230px; color:var(--b1); opacity:0.3; align-items:center; justify-content:center; top:0; left:0; transform:rotate(8deg);}

sunflower-shipper .sunflower-tabs{width:100%; height:340px; position:relative; border:1px solid var(--b1); border-bottom:none; box-sizing:border-box;}
sunflower-shipper tabcontainer{width:100px; padding:0px 30px; background:var(--l0); height:20px; position:absolute; top:-10px; left:calc(50% - 80px); display:block;}
.sunflower-tab{float:left;} 
.sunflower-tab label{display:block; width:10px; height:10px; margin:0px; position:relative; top:-5px; z-index:3; background:var(--c1); border-radius:50%; margin-left: 20px; cursor:pointer; transition:0.3s;}
.sunflower-tabs input#sunflower-tab-1 ~ label{margin-left:153px;}
.sunflower-tab input[type=radio]:checked ~ label{z-index:2; background:var(--b1);}
.sunflower-tab input[type=radio]{display:none;}
.sunflower-content{position: absolute; top:30px; left:30px; width:calc(100% - 60px); height:calc(100% - 60px); background:var(--l0); transition:0.3s; opacity:0;}
.sunflower-tab input[type=radio]:checked ~ label ~ .sunflower-content {z-index: 1; opacity:1;}

.sunflower-content mainpic{width:335px; height:270px; display:block; position:relative;}
.sunflower-content mainpic img{width:100%; height:100%; border-radius:7px; position:relative; z-index:1;}
.sunflower-content mainpic:after{content:""; display:block; width:100%; height:100%; border-radius:7px; background:var(--c1); position:absolute; top:9px; left:9px; z-index:0; transition:0.2s;}
.sunflower-shipcontent{width:100%; height:100%; overflow:auto; padding-right:10px;}
.sunflower-shipcontent h1{display:flex; width:100%; font:400 16px var(--bodyfont); text-transform:uppercase; letter-spacing:1px; box-sizing:border-box; align-items:center; padding-bottom:5px;}
.sunflower-shipcontent h1:after{content:""; margin-left:10px; display:block; flex-grow:1; background:var(--c1); height:5px;}
.sunflower-shipcontent appfield{width:100%; display:flex; border:1px solid var(--b1); box-sizing:border-box; padding:20px; justify-content:space-between; align-items:flex-start;} 
.sunflower-shipcontent appfield + appfield{border-top:none;}
.sunflower-shipcontent appfield x{font:600 10px var(--bodyfont); opacity:0.5; text-transform:uppercase; letter-spacing:1px; width:50%; display:block;}
.sunflower-shipcontent appfield y{max-width:50%; text-align:right; display:block; margin-top:-2px;}
.sunflower-shipcontent appfield + h1{margin-top:27px;}
.sunflower-shipcontent p + h1{margin-top:27px;}

/* shipper reply */

sunflower-shipreply{display:block; margin:20px auto; width:380px; outline:3px solid var(--l0); background:var(--l0); border:1px solid var(--b1); box-sizing:border-box; padding:45px;}
sunflower-shipreply main{position:relative; width:100%;border:1px solid var(--b1); display:flex; flex-direction:column; align-items:center; padding:20px 30px 30px 30px; box-sizing:border-box;}
sunflower-shipreply main name{display:inline-flex; background:var(--l0); padding:0px 15px; font:400 21px var(--bodyfont); text-transform:uppercase; letter-spacing:1px; position:absolute; height:40px; align-items:center; top:-20px;}
sunflower-shipreply main name c{opacity:0.5; margin-right:6px;}
sunflower-shipreply main subt{font:10px var(--bodyfont); text-transform:uppercase; letter-spacing:1px; text-align:center; display:block; padding-bottom:20px; display:block; }
sunflower-shipreply main subt i{font-size:80%; opacity:0.7; margin:0px 5px;}
sunflower-shipreply main subt a{color:var(--body)!important;}
sunflower-shipreply main .mainpost{padding-right:5px; display:block;}

/* dev - main styling */

sunflower-dev{display:block; margin:20px auto; width:480px; outline:3px solid var(--l0); background:var(--l0); border:1px solid var(--b1); box-sizing:border-box; padding:45px;}
sunflower-dev main{position:relative; width:100%;border:1px solid var(--b1); display:flex; flex-direction:column; align-items:center; padding:40px 30px 30px 30px; box-sizing:border-box;}
sunflower-dev main desc{display:inline-flex; background:var(--l0); padding:0px 15px; font:400 10px var(--bodyfont); text-transform:uppercase; letter-spacing:1px; position:absolute; height:40px; align-items:center; top:-20px;}

/* dev - one across */

sunflower-dev onepic{width:100%; display:flex; flex-direction:column; align-items:center;}
sunflower-dev onepic img{width:100%; border-radius:7px; margin-bottom:10px;}
sunflower-dev onepic img:last-of-type{margin-bottom:0;}
sunflower-dev divider{width:100%; height:5px; display:block; background:var(--c1); margin:10px 0;}
sunflower-dev divider:first-child{margin-top:0;}
sunflower-dev divider:last-child{margin-bottom:0;}

/* dev - two across */ 

sunflower-dev twopic{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;}
sunflower-dev twopic img{width:calc(50% - 5px); border-radius:7px; margin-bottom:10px;}
sunflower-dev twopic divider:last-child{margin-bottom:10px; margin-top:0;}

/* dev - three across */

sunflower-dev threepic{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;}
sunflower-dev threepic img{width:calc(33% - 4px); border-radius:7px; margin-bottom:10px;}
sunflower-dev threepic divider:last-child{margin-bottom:10px; margin-top:0;}

/* dev - quote */

sunflower-dev devquote{width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; box-sizing:border-box; padding:25px; position:relative; }
sunflower-dev devquote qt{font-size:170px; position:absolute; left:20px; top:50px; color:var(--b1); opacity:0.5; z-index:0;}
sunflower-dev devquote txt{position:relative; z-index:1; font:400 italic 17px var(--bodyfont); letter-spacing:0.5px; width:100%; display:block; text-align:center;}
sunflower-dev devquote author{position:relative; z-index:1; font:9px var(--headerfont); letter-spacing:1px; text-transform:uppercase; margin-top:25px; display:inline-block; padding-bottom:4px; border-bottom:4px solid var(--c1);}

/* dev - drabble */ 

sunflower-dev .drabble{width:100%; display:block; box-sizing:border-box; padding:0px 20px; position:relative;}

/* thread - a */

sunflower-threada{display:block; margin:20px auto; width:400px; outline:3px solid var(--l0); background:var(--l0); border:1px solid var(--b1); box-sizing:border-box; padding:45px;}
sunflower-threada main{position:relative; width:100%;border:1px solid var(--b1); display:flex; flex-direction:column; align-items:center; padding:30px 40px 30px 40px; box-sizing:border-box;}
sunflower-threada main name{display:inline-flex; background:var(--l0); padding:0px 15px; font:400 15px var(--bodyfont); text-transform:uppercase; letter-spacing:1px; position:absolute; height:40px; align-items:center; top:-20px; }
sunflower-threada main name x{padding-bottom:4px; border-bottom:4px solid var(--c1);}
sunflower-threada main name x a{color:var(--body)!important;}
sunflower-threada .postcontent{width:100%; display:block;}

/* thread - b */

sunflower-threadb{display:block; margin:20px auto; width:400px; outline:3px solid var(--l0); background:var(--l0); border:1px solid var(--b1); box-sizing:border-box; padding:87px 45px 45px 45px;}
sunflower-threadb main{position:relative; width:100%;border:1px solid var(--b1); display:flex; flex-direction:column; align-items:center; padding:62px 40px 40px 40px; box-sizing:border-box;}
sunflower-threadb main img{border-radius:7px; width:80px; height:80px; position:relative; z-index:2;}
sunflower-threadb main pic{border-radius:7px; width:84px; height:84px; display:block; position:absolute; top:-42px; left:calc(50% - 42px); background:var(--l0);}
sunflower-threadb main pic:after{content:""; display:block; width:80px; height:80px; border-radius:7px; background:var(--c1); position:absolute; bottom:0px; right:0px; z-index:0; transition:0.2s;}
sunflower-threadb main picbg{width:114px; height:84px; background:var(--l0); position:absolute; display:block; top:-42px; left:calc(50% - 57px);}
sunflower-threadb main name{display:inline-flex; background:var(--l0); padding:0px 15px; font:400 13px var(--bodyfont); text-transform:uppercase; letter-spacing:1px; position:absolute; height:40px; align-items:center; bottom:-20px; }
sunflower-threadb main name a{color:var(--body)!important;}
sunflower-threadb .postcontent{width:100%; display:block;}

/* thread - c (image & imageless versions) */ 

sunflower-threadc{display:block; margin:20px auto; width:400px; outline:3px solid var(--l0); background:var(--l0); border:1px solid var(--b1); box-sizing:border-box; padding:45px;}
sunflower-threadc top{width:100%; display:block; border:1px solid var(--b1); border-bottom:none; box-sizing:border-box; padding:40px;}
sunflower-threadc pic{width:100%; display:block; position:relative;}
sunflower-threadc pic img{width:100%; border-radius:7px; position:relative; top:-2px; left:-2px; z-index:1;}
sunflower-threadc pic:after{content:""; display:block; background:var(--c1); width:100%; height:100%; border-radius:7px; right:-2px; bottom:-2px; position:absolute; z-index:0;}
sunflower-threadc main{position:relative; width:100%;border:1px solid var(--b1); display:flex; flex-direction:column; align-items:center; padding:30px 40px; box-sizing:border-box;}
sunflower-threadc .postcontent{width:100%; display:block;}
sunflower-threadc btm{width:100%; height:80px; display:flex; border:1px solid var(--b1); border-top:none; align-items:center; justify-content:center; box-sizing:border-box; font:12px var(--bodyfont); text-transform:uppercase; letter-spacing:1px; position:relative; overflow:hidden;}
sunflower-threadc btm a{color:var(--bodyfont)!important;}
sunflower-threadc btm x{display:inline-block; padding-bottom:4px; border-bottom:5px solid var(--c1); position:relative; z-index:1;}
sunflower-threadc btm i.bg{position:absolute; z-index:0; width:100%; height:119px; display:flex; font-size:130px; color:var(--b1); opacity:0.3; align-items:center; justify-content:center; top:0; left:0;}

/* multi-char request */ 

sunflower-multireq{display:block; margin:20px auto; width:500px; outline:3px solid var(--l0); background:var(--l0); border:1px solid var(--b1); box-sizing:border-box; padding:45px;}
sunflower-multireq main{position:relative; width:100%;border:1px solid var(--b1); display:flex; flex-direction:column; align-items:center; padding:30px 30px 30px 30px; box-sizing:border-box;}
sunflower-multireq main reqtitle{display:inline-flex; background:var(--l0); padding:0px 15px; font:400 21px var(--bodyfont); text-transform:uppercase; letter-spacing:1px; position:absolute; height:40px; align-items:center; top:-20px; box-sizing:border-box;}
sunflower-multireq .topinfo{width:100%; max-height:120px; padding-right:10px; overflow:auto;}

sunflower-multireq char{width:100%; box-sizing:border-box; border:1px solid var(--b1); border-top:none; display:block; height:150px; display:flex;}
sunflower-multireq char pic{width:150px; height:150px; box-sizing:border-box; padding:30px; position:relative;}
sunflower-multireq char pic img{width:90px; height:90px; border-radius:7px; position:relative; top:-2px; left:-2px; z-index:1;}
sunflower-multireq char pic:after{content:""; display:block; border-radius:7px; background:var(--c1); width:90px; height:90px; position:absolute; right:28px; bottom:28px; z-index:0;}
sunflower-multireq char info{width:calc(100% - 150px); height:150px; border-left:1px solid var(--b1); padding:25px 30px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:space-between; align-items:center;}
sunflower-multireq char info name{font:13px var(--bodyfont); text-transform:uppercase; letter-spacing:1px; display:flex; align-items:center; height:15px; width:100%;}
sunflower-multireq char info name:after{content:""; flex-grow:1; display:block; background:var(--c1); margin-left:10px; height:5px;}
sunflower-multireq char info .scroll{width:100%; height:calc(100% - 25px); overflow:auto; padding-right:5px;}

sunflower-multireq char:nth-of-type(even){flex-direction:row-reverse;}
sunflower-multireq char:nth-of-type(even) info{border-left:none; border-right:1px solid var(--b1);}
sunflower-multireq char:nth-of-type(even) info name:after{flex-grow:0; width:0px;}
sunflower-multireq char:nth-of-type(even) info name:before{content:""; flex-grow:1; display:block; background:var(--c1); margin-right:10px; height:5px;}

/* single request */ 

sunflower-reqone{display:flex; flex-wrap:wrap; margin:20px auto; width:500px; outline:3px solid var(--l0); background:var(--l0); border:1px solid var(--b1); box-sizing:border-box; padding:45px;}
sunflower-reqone top{display:flex; width:100%; height:80px; border:1px solid var(--b1); border-bottom:none; box-sizing:border-box; font:10px var(--bodyfont); text-transform:uppercase; letter-spacing:1px; align-items:center; justify-content:center; padding:0px 20px; position:relative; overflow:hidden;}
sunflower-reqone top x{display:inline-block; padding-bottom:4px; border-bottom:5px solid var(--c1);}
sunflower-reqone top x i{color:var(--body); opacity:0.5; font-size:80%; margin:0px 4px; position:relative; z-index:1;}
sunflower-reqone top i.bg{position:absolute; z-index:0; width:100%; height:119px; display:flex; font-size:130px; color:var(--b1); opacity:0.3; align-items:center; justify-content:center; top:0; left:0; transform:rotate(8deg); top:-20px;}
sunflower-reqone left{display:block; width:200px; height:310px; box-sizing:border-box; padding:25px; border:1px solid var(--b1); position:relative;}
sunflower-reqone left img{width:100%; height:100%; position:relative; top:-2px; left:-2px; border-radius:7px; z-index:1;}
sunflower-reqone left:after{content:""; display:block; width:150px; height:260px; position:absolute; z-index:0; border-radius:7px; background:var(--c1); right:23px; bottom:23px;}
sunflower-reqone right{display:block; width:calc(100% - 200px); height:310px; box-sizing:border-box; border:1px solid var(--b1); border-left:none; padding:25px;}
sunflower-reqone right .main{width:100%; height:100%; padding-right:10px; overflow:auto;}
sunflower-reqone h1{display:flex; width:100%; font:400 13px var(--bodyfont); text-transform:uppercase; letter-spacing:1px; box-sizing:border-box; align-items:center; padding-bottom:5px;}
sunflower-reqone h1:after{content:""; margin-left:10px; display:block; flex-grow:1; background:var(--c1); height:5px;}

/* phone - general styling */

sunflower-phone{display:block; margin:20px auto; width:310px; background:var(--l0); border:3px solid var(--l0); box-sizing:border-box; border-radius:17px;}
sunflower-phone1{display:block; width:100%; height:540px; padding:60px 20px 20px 20px; border:1px solid var(--b1); box-sizing:border-box; border-radius:17px; position:relative;}
sunflower-phone top{width:80px; height:5px; background:var(--b1); border-radius:2px; position:absolute; top:28px; left:calc(50% - 45px); display:block; opacity:0.5;}
sunflower-phone top1{width:6px; height:6px; background:var(--b1); border-radius:50%; position:absolute; top:28px; left:calc(50% + 45px); display:block; opacity:0.5;}
sunflower-phone main{width:100%; height:calc(100% - 50px); border:1px solid var(--b1); display:flex; flex-direction:column; box-sizing:border-box; border-radius:7px 7px 0 0; position:relative; align-items:center; padding:30px 20px 20px 20px;}
sunflower-phone main name{position:absolute; height:20px; top:-10px; z-index:1; padding:0px 15px; font:13px var(--bodyfont); letter-spacing:1px; background:var(--l0); display:flex; align-items:center; text-transform:uppercase;}

/* phone - texting */

sunflower-phone main .texts{width:100%; height:100%; padding-right:10px; display:flex; flex-direction:column; align-items:flex-end; overflow:auto;}
sunflower-phone main .texts p{background:rgba(var(--r1),1); max-width:80%; border-radius: 7px 7px 0 7px; padding:10px; margin:0px 0px 10px 0px; color:var(--dark);}
sunflower-phone main .texts p img{border-radius:7px 7px 0 7px; width:100%;}
sunflower-phone btm{width:100%; height:50px; border:1px solid var(--b1); border-top:none; display:flex; box-sizing:border-box; border-radius:0 0 7px 7px; justify-content:space-between; padding:0 20px; font:10px var(--bodyfont); text-transform:uppercase; letter-spacing:1px; align-items:center; background:rgba(var(--r1),0.1);}
sunflower-phone btm i, sunflower-phone btm x{opacity:0.5;}

/* phone - calling */

sunflower-phone main.phonecall{ height:calc(100% - 190px);  padding:40px 30px 30px 30px;}
sunflower-phone main .call{width:100%; height:100%; display:block; overflow:auto; box-sizing:border-box; padding-right:5px;}
sunflower-phone callbtm{width:100%; height:190px; border:1px solid var(--b1); border-top:none; display:flex; box-sizing:border-box; border-radius:0 0 7px 7px; justify-content:center; padding:20px; font:10px var(--bodyfont); text-transform:uppercase; letter-spacing:1px; align-items:center; flex-direction:column; background:rgba(var(--r1),0.1);}
sunflower-phone callbtm pic{width:80px; height:80px; position:relative; display:block; margin-bottom:21px;}
sunflower-phone callbtm pic img{width:80px; height:80px; border-radius:50%; position:relative; top:-2px; left:-2px; z-index:1;}
sunflower-phone callbtm pic:after{content:""; display:block; background:var(--c1); opacity:0.6; width:80px; height:80px; position:absolute; z-index:0; bottom:-2px; right:-2px; border-radius:50%;}
sunflower-phone callbtm x{opacity:0.5;}





/*----------------------------------------
  AFFILIATES TABLE
------------------------------------------
  CODED BY THISBE OF THE RPG-DIRECTORY
----------------------------------------*/

.cte-affheader {
background-color: #53315e;

padding: 20px 0 20px 75px;
font-family: var(--title);
font-size: 4em;
font-weight: lighter;
font-variant: small-caps;
letter-spacing: 1px;
color: #fefefe;
margin: 0 0 5px 0;
}

.aff-table {
border-collapse: collapse;
width: 900px;
margin: 0 40px;
}

.aff-marquee a:link, a:visited, a:active { text-decoration: none; }
.aff-marquee a:hover { text-decoration: none; }
.aff-marquee a:before { display: none; }
.aff-table a:hover:before { display: none; }

.aff-table a:link, a:visited, a:active { text-decoration: none; }
.aff-table a:hover { text-decoration: none; }
.aff-table a:before { display: none; }
.aff-table a:hover:before { display: none; }
		
		

 

 

And here's one of the templates (post row)

 

<div id="new-posts">
	<div id="entry<!-- |pid| -->" class="new-post group<!-- |g_id| -->-post-normal"><a name="entry<!-- |pid| -->"></a>
		<div class="npost-wrap">
			<div class="npost-left">
				<div class="npost-top">
					<div class="npost-gif-1">
						<div> <span style="background-image:URL('<!-- |field_30| -->'), url('https://placehold.it/150x1510/232323/555555');"></span></span></div>
					</div>
					<div class="npost-name">
						<nam> <!-- |name| --> </nam>
						<div class="npost-sub">
							<!-- |field_16| --> <span class="th th-chevron-right"></span>
							<!-- |field_13| --> <span class="th th-chevron-right"></span>
							<!-- |field_25| --> <span class="th th-chevron-right"></span>
							<!-- |field_23| --> <span class="th th-chevron-right"></span>
							<!-- |field_10| -->
						</div>
					</div>
				</div>
				<div class="npost-toplinks">
					<a href="?act=Msg&CODE=04&MID=<!-- |poster_id| -->" title="Send Message">
						<div class="npost-pmessage">
							<span class="th th-envelope-o"></span>
						</div>
					</a>
					<a href="?act=Search&CODE=getalluser&mid=<!-- |poster_id| -->&type=topics" title="Find Topics">
						<div class="npost-findtopics">
							<span class="th th-cursor-o"></span>
						</div>
					</a>
					<a href="?act=Search&CODE=getalluser&mid=<!-- |poster_id| -->&type=posts" title="Find Posts">
						<div class="npost-findposts">
							<span class="th th-command-o"></span>
						</div>
					</a>
					<a href="<!-- |field_9| -->" title="Shipper">
						<div class="npost-shipper">
							<span class="th th-broken-heart-o"></span>
						</div>
					</a>
					<a href="<!-- |field_10| -->" title="Development">
						<div class="npost-dev">
							<span class="th th-newspaper-o"></span>
						</div>
					</a>
					<a href="<!-- |field_11| -->" title="Tracker">
						<div class="npost-tracker">
							<span class="th th-map-1-o"></span>
						</div>
					</a>
					<a href="<!-- |field_12| -->" title="Wanted">
						<div class="npost-wanted">
							<span class="th th-skull-o"></span>
						</div>
					</a>
					<a href="<!-- |field_13| -->" title="Directory">
						<div class="npost-directory">
							<span class="th th-knife-o"></span>
						</div>
					</a>
					<a href="<!-- |field_14| -->" title="Playlist">
						<div class="npost-instagram">
							<span class="th th-music-o"></span>
						</div>
					</a>
					<a href="<!-- |field_15| -->" title="AMA Thread">
						<div class="npost-twitter">
							<span class="th th-question-o"></span>
						</div>
					</a>
					<a href="<!-- |field_16| -->" title="Moodboard">
						<div class="npost-snapchat">
							<span class="th th-pirate-swords-o"></span>
						</div>
					</a>
				</div>
				<div class="npost-mid">
					<div class="npost-links">
						<div class="npost-blocklinks">
							<!-- |report_link| -->
							<!-- |edit_button| -->
							<!-- |quote_button| -->
							<!-- |delete_button| -->
						</div>
					</div>
					<div class="npost-content">
						<div class="npost-midbuttonsl">
							<div class="npost-perma">
								<a href="#" onclick="link_to_post(<!-- |pid| -->); return false;" title="permalink">
									<div class="permalink">
										<span class="th th-clock-o"></span>
									</div>
								</a>
								<div class="npost-date"><!-- |post_date| --></div>
								<div class="clear"></div>
							</div>
							<div class="npost-posticon">
								<!-- |posticon| -->
							</div>
						</div>
						<div class="npost-postinner">
							<div id="pid_<!-- |pid| -->"> <!-- THE POST <!-- |pid| --> --> <div class='postcolor'><!-- |post| --></div> <!-- THE POST --> </div>
						</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="npost-bottom">
					<div class="npost-player">
						<div class="npost-playername">
							<div> NICKNAME </div>
							<span><!-- |field_12| --><i>!</i></span>
						</div>
						<div class="npost-playerdeets">
							<div class="npost-timezone">
								<span>Timezone:</span> <!-- |field_28| -->
							</div>
							<div class="npost-pronouns">
								<span>Pronouns:</span> <!-- |field_4| -->
							</div>
							<div class="npost-rating">
								<span>Mature:</span> <!-- |field_21| -->
							</div>
						</div>
						<div class="clear"></div>
					</div>
					<div class="npost-triggers">
						<span class="th th-hashtag"></span>
						<div title="quote me"> <!-- |field_29| --> </div>
					</div>
				</div>
			</div>
			<div class="npost-right">
				<div class="npost-gifmain">
					<div>
						<span style="background-image:URL('<!-- |field_7| -->'), url('https://placehold.it/240x110/232323/555555');"></span>
					</div>
				</div>
				<div class="npost-miniprofile">
					<!-- |mini_profile| -->
				</div>
			</div>
			<div class="clear"></div>
		</div>
	</div>
</div>

 

Link to post
Share on other sites
  • Admin

The problem is the color isn't being defined anywhere:

 

No where in the CSS is a color defined for the name. Its missing CSS code.

 

This bit:

.mmg_3, .min_3, .members {
 --color1: rgba(186,74,74, 0);
 --color2: rgba(186,74,74, 0.2);
 --color3: rgba(186,74,74, 0.3);
 --color4: rgba(186,74,74, 0.5);
 --color5: rgba(186,74,74, 0.8);
 --color6: rgba(186,74,74, 1);  
 --mgn1: rgba(186,74,74);
 --mgn2: rgba(186,74,74);
 --mgnr: 186 74 74;
--grdn0: linear-gradient(90deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient vertical */
--grdn1: linear-gradient(0deg, var(--mgn1) 0%, var(--mgn2) 100%); /* group gradient horizontal */
}

 

All its doing is defining color values. that should be getting defined in later CSS in a color: var(--color1); sort of style which it never does.

 

.group4-post-normal .npost-name nam {
	color: var(--color1);
}

 

Something like this would probably do it but I'll be honest I've never seen variables defined outside of :root so I'm not sure which variable its going to take.

adtest3.png

engineeringad.jpg

0_mainsignature.jpg

image.png

Profile set made by myself and original Artwork by Fae Merriman, my daughter.

 

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

Search In
  • More options...
Find results that contain...
Find results in...
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.