/*
                              _     
 ___ ___ _ _ _ ___    ___ ___| |_       ╱|､
| ° | °'| | | |   |  |  _| °'|  _|    ﾞ(°､。７
|  _|__,|_____|_|_|  |___|__,|_|       )､  ﾞヽ
|_|                                    じし_,)ノ
                                    
[website] https://www.pwnc.at
[mail] drbx@pwnc.at
*/
/* v RESET v*/ 
* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/* ^ RESET ^ */

@font-face {
    font-family: 'Share Tech Mono', monospace;
    src: url('/fonts/ShareTechMono-Regular.ttf') format('ttf');
}

body {
    
    font-family: 'Share Tech Mono', monospace;
    color: #999;
    font-size: 16px;
    font-weight: 200;
    background-color: #252525;
    /*min-height: 100%;*/
    /*{-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}*/
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;*/
}

pre {
    padding: 0;
    margin: 0 0 0px 0;
}

ul {
    padding: 0;
}

span {
    padding: 0;
    margin: 0 10px 0 0;
}

li {
    margin: 15px 0;
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
    color: #555555;
    transition-duration: 0.2s;
}

a:hover  {
    color: #202020;
    font-weight:500;
    background-color: #555555
}

a:active {
    color: #555555;
}

img {
    max-width: 100%;
    margin-bottom: 20px;
}

header {
    width: 100%;
    height: 50px;
    position: absolute;
    letter-spacing: 0px;
    z-index: 1;
}

div.container {
    padding: 60px 0px 0px 0px;
}

div.headblock {
    background: #202020;
    height: 100%;
    padding-left:10px;
    padding-right:10px;
    padding-top:0px;
    padding-bottom:0px;
}

div.headtable {
    display: table;
    border-collapse: collapse;
    max-height: 10px;
    width: 100%;    
}

div.left-cell {
    display: table-cell;
    text-align: left;
    overflow: hidden;
    width: 33%;
}

div.middle-cell {
    font-size: 70%;
    font-size: .4rem;
    display: table-cell;
    text-align: center;
    width: 33%;
    overflow: hidden;
}

div.right-cell {
    -moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	-ms-filter: "FlipV";
	filter: FlipV;
    display: table-cell;
    overflow: hidden;
    width: 33%;
}

header img {
    width: 50em;
}

span.top-link {
    font-size: 70%;
}

span.headline {
    font-weight: bold;
}

.page-wrap, .header-wrap, .container-wrap, .foota-wrap {
  width: 100%; 
  min-width: 320px; 
  max-width: 640px; 
  margin: 0 auto; 
  /* separate content from window edge -- 
     padding-top and -bottom specified below.
     Here (not on body) to work with fixed header */
  padding: 0 10px;    
}

/* v MENU v */
.drpdwn {
    position: absolute;
    bottom: 0;
    display: inline-block;
}

.drpbtn {
    /*background-color: #4CAF50;*/
    color: white;
    padding: 0px 0px;
    font-size: 16px;
    width: 100%;
}

.lbl {
    font-size: 14px;
    font-weight: bold;
    color: #999;
    text-transform: uppercase;
    white-space: nowrap;
    background-color: #323232;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-decoration: none;
}

.drpdwn-content {
    font-size: 14px;
    font-weight: bold;
    display: none;
    position: absolute;
    margin: 0px 9px;
    min-width: 160px;
    background-color: #222222;
    opacity: 80%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-decoration: none;
    box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.drpdwn-content a {
    font-size: 12px;
    color: #555;
    padding: 0px 0px;
    
    text-decoration: none;
    display: block;
}

.drpbtn span{
    /**/
}
/* Colorized focuzed listentry */
.drpdwn-content a:hover {background-color: #303030;}

/* "change" caption... */
.drpdwn:hover .drpbtn p.lbl span {display: none;}
.drpdwn:hover .drpbtn p.lbl:after {content: '[+] MENU';}

/* ...even if dropdown-content is focuzed */
.drpdwn-content:hover .drpdwn .drpbtn p.lbl span {display: none;}
.drpdwn-content:hover .drpdwn .drpbtn p.lbl:after {content: '[+] MENU';}
.drpdwn-content a:before { content: '|- '; }
.drpdwn-content a:last-child:before { content: '+= '; }

/* display dropdown-content */
.drpdwn:hover .drpdwn-content {display: block;}
.drpdwn-content a:before { content: '|- '; }
.drpdwn-content a:last-child:before { content: '+= '; }
/* ^ MENU ^ */

/* v BLOCK v */

div.block {
    margin-bottom: 10px;
    border-style: dotted;

}
div.entry {
    display: table;
    border-collapse: collapse;
    color: #444;
    cursor: pointer;
    border: 1px;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    transition: 0.4s;
}

div.hleft {
    font-weight: bold;
    display: table-cell;
    text-align: left;
    width: 20%;
}

div.hcenter {
    font-weight: inherit;
    display: table-cell;
    text-align: left;
    width: 60%;
}

div.hright {
    font-weight: inherit;
    display: table-cell;
    text-align: right;
    width: 20%;
}
.active, .entry:hover {
    background-color: #303030; 
    
}

.panel {
    padding: 0 18px;
    margin-bottom: 5px;
    height: 40px;
    background-color: white;
    overflow: hidden;
    background-image:linear-gradient(180deg,#555555,#202020);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.entry:hover .panel {
    background-image:linear-gradient(180deg,#555555,#555555);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ccc;
}

/* ^ BLOCK ^ */

footer {
        width: 100%;
        position: fixed;        
        bottom: 0px;
    overflow: hidden;
}
.foota-wrap {
    background: #202020;
    overflow: hidden;
}


/* v media formatation v */
@media 			all and (max-width: 1000px) and (min-width: 20px) {
    
    .categories 	{visibility: hidden;}
    
    .catbox			{visibility: hidden;}
}

.catbox			{width: 300px; height: 160px; right:0; margin:0; position: absolute; background: #222;
    display: block; z-index: 999;}
.tag            {color: ##555555;}
.important      {margin-left: -18px;}
.title          {display: inline-block; margin-bottom: 20px; margin-top: 20px;}
.subtitle       {display: inline-block; margin: 20px 0;}
.code           {color: #555555; max-width: 100%; background: #202020; padding: 2px; margin:2px 0 2px 0;}
.codesmall      {background: #202020; display:inline-block;}
.filter         {display:block; margin-bottom: 30px; margin-top: -20px;}
.description    {background: #202020; padding: 10px 0 10px 10px; margin-top: 0px;}
/* ^ media formatation ^ */