Midnight City - Circle Icon Variant

[sc=bg][sc=bg2][sc=header][i]>> the city is my church
 It wraps me in its blinding twilight[/i][/sc][sc=iconpic][/sc][sc=divcolor][sc=tabbed_interface horizontal][ul]
    [li]Tab 1[/li]
    [li]Tab 2[/li]
    [li]Tab 3[/li]
    [li]Tab 4[/li]
[/ul][
][sc=tab-active]TAB 1 CONTENT[/sc][
][sc=tab]TAB 2 CONTENT[/sc][
][sc=tab]TAB 3 CONTENT[/sc][
][sc=tab]TAB 4 CONTENT[/sc][
][/sc][/sc][/sc][sc=cred][url=https://pokefarm.com/forum/post/4362483]code[/url]* [url=https://www.pexels.com/photo/gray-concrete-road-near-buildings-1046477/]Stock[/url] * official TCG art[/sc][/sc]

[style]
a:hover {
color: #00ffff;
    -webkit-transition: all .1s linear 0s;
text-shadow: 0 0 8px #00ffff;
}
a {
    color: #ff4ffd;
    -webkit-transition: all .1s linear 0s;
text-shadow: 0 0 8px #ff4ffd;
}
.bg{
border-radius: 10px;
height: 290px;
 background-image: url("https://i.imgur.com/YE3wDL6.png");
  width: 310px;
  position:relative;
}
.bg2{
position: absolute;
height: 260px;
 background: rgba(64,0,88, 0.6);
  width: 290px;
left: 10px;
top: 10px;
box-shadow: 0 0 8px #00ffff;
  position:relative;
border-radius: 10px;
}
.header{
text-shadow: 0 0 8px #00ffff;
font-size: 14px;
padding: 5px;
color: #00ffff;
font-family: calibri light;
font-variant: small-caps;
text-transform: lowercase;
text-align: center;
}
.iconpic{
top: 42px;
position: absolute;
left: 10px;
  background: url("https://i.imgur.com/l890AI4.png");
  width: 85px;
  height: 87px;
background-size: 90px;
border: 3px double #00ffff;
border-radius: 50px;
}
.divcolor{
border: 3px double #ff4ffd;
position: absolute;
top: 42px;
left: 110px;
height: 202px;
width: 162px;
background: rgba(0,0,0,0.5);
border-radius: 0px;
border-radius: 10px;
}
.tabbed_interface{
box-shadow:0 0 0 transparent;
margin: 0;
>ul {
>li {
padding: 1px;
display: inline-block;
 border: 3px double #00ffff;
border-radius: 10px;
text-shadow: 0 0 8px #ff4ffd;
background: rgba(0,0,0,0.5);
color: #ff4ffd;
margin: 1px;
left: -105px;
width: 85px;
height: 14px;
position: absolute;
overflow: hidden;
 text-align: center;
font-size:14px;
letter-spacing: 0.5px;
font-family: calibri light;
font-variant: small-caps;
text-transform: lowercase;
line-height: 13px;
cursor: pointer;
-webkit-transition: all .2s linear 0s;
	-moz-transition: all .2s linear 0s;
	-ms-transition: all .2s linear 0s;
	-o-transition: all .2s linear 0s;
	transition: all .2s linear 0s;
}
>li:nth-child(1) {
top: 98px;

}
>li:nth-child(2) {

top: 126px;

}
>li:nth-child(3) {

top: 154px;

}
>li:nth-child(4) {

top: 182px;



}
li:hover {
text-shadow: 0 0 8px #00ffff;
color: #00ffff;
border: 3px double #ff4ffd;
     background: rgba(0,0,0,0.5);
	-webkit-transition: all .2s linear 0s;
	-moz-transition: all .2s linear 0s;
	-ms-transition: all .2s linear 0s;
	-o-transition: all .2s linear 0s;
	transition: all .2s linear 0s;

}
li{
&.tab-active {
text-shadow: 0 0 8px #00ffff;
color: #00ffff;
border: 3px double #ff4ffd;
  background: rgba(0,0,0,0.5);
}}
}
>div {
text-shadow: 0 0 8px #00ffff;
color: #00ffff;
margin-top: -3px;
margin-left: -3px;
height: 188px;
width: 148px;
border-radius: 0px;
border: none;
animation: 0.5s fade;
min-height: 10px;
text-align: center;
position: relative;
background: none;
font-family: Calibri;
letter-spacing: 0.5px;
font-size: 12px;
box-shadow:0 0 0 transparent;
padding: 10px;
overflow: hidden;
}}
.cred{
>a { color: white;
 text-shadow:
    -1px -1px 0 #150025,
    1px -1px 0 #150025,
    -1px 1px 0 #150025,
    1px 1px 0 #150025; }
margin-top: 12px;
font-size: 14px;
color: white;
 text-shadow:
    -1px -1px 0 #150025,
    1px -1px 0 #150025,
    -1px 1px 0 #150025,
    1px 1px 0 #150025;
font-family: calibri light;
font-variant: small-caps;
text-transform: lowercase;
text-align: center;
}
.panel h3 > a > svg {
    display:none;}
.panel {
background: none;
border: none;
font-family: calibri light;
box-shadow:0 0 0 transparent;
&>h3 {
background: rgba(0,0,0,0.2);
border: 3px double #00ffff;
  color: #ff4ffd;
text-shadow: 0 0 8px #ff4ffd;
text-align: center;
font-size: 13px;
text-transform:uppercase;
font-weight: normal;  color: #ff4ffd;
text-shadow: 0 0 8px #ff4ffd;
letter-spacing: 0.5px;
border-radius: 0px;
}
&>div {
text-shadow: 0 0 8px #00ffff;
background: rgba(0,0,0,0.2);
border: 3px double #00ffff;
  color: #ff4ffd;
text-shadow: 0 0 8px #ff4ffd;

border-top: none;
}}
   table {
         margin: 0px auto;
    border: 1px solid #22243A;

        }
    td {
background: rgba(0,0,0,0.4);
border: 3px double #00ffff;
       color: #ff4ffd;
text-shadow: 0 0 8px #ff4ffd;
        text-align: center;
        }
    th {
        border: 0px;
      background: rgba(0,0,0,0.4);
border: 3px double #00ffff;
        padding: 3px;
         color: #ff4ffd;
text-shadow: 0 0 8px #ff4ffd;
        text-align: center;
}

.expbar {
border: 3px double #00ffff;
border-radius: 0px;
padding: -10px;
background: rgba(0,0,0,0.4);
font-family: calibri;
 color: #ff4ffd;
text-shadow: 0 0 8px #ff4ffd;
overflow: hidden;
}
.expbar div {
background: rgba(0,0,0,0.7);
border: 1px solid rgba(118,50,107);
 border: 0px;
}
.tooltip_content {
  font-size: 14px;
  text-align:center;
   font-family: calibri;
background: rgba(0,0,0,0.7);
border: 3px double #ff4ffd;
  color: #00ffff;
  border-radius: 5px;
}
span.bbcode_tooltip {
    border-bottom: 1px dotted #ff4ffd;
}
::-moz-selection { background: #ff4ffd; color: white;}
::selection { background:  #ff4ffd; color: white;}
[/style]