@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

@font-face {
    font-family: 'Source Code Pro';
    src: url('fonts/SourceCodePro-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Source Code Pro';
    src: url('fonts/SourceCodePro-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}


html {
   background             : #202020 url("images/silicon.svgz") no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size   : cover;
   -o-background-size     : cover;
   background-size        : cover;
}

html, body {

   padding                : 0;
   margin                 : 0;
   width                  : 100%;
   height                 : 100%;
}

div.nav_wrapper {
   width                  : 100%;
}

div.nav {
   width                  : 100%;
   float                  : left;
   background-color       : rgba(0, 0, 0, 0.7);
   z-index                : 10;
   position               : fixed;
   right                  : 0;
   top                    : 0;
   box-shadow             : 0em 0.5em 2em rgba(0, 0, 0, 0.5);
}

ul.nav {
   list-style-type        : none;
   margin                 : 0;
   padding                : 0;
   overflow               : hidden;
}

li.nav_corner {
   float                  : left;
   display                : block;
   padding                : 1em;
}

li.nav {
   float                  : left;
   padding-top            : 1em;
   padding-bottom         : 1em;
   padding-left           : 0.5em;
   padding-right          : 0.5em;
}

li.nav a {
   display                : block;
   color                  : #a0a0a0;
   text-decoration        : none;
   font-family            : "Open Sans", sans-serif;
   font-size              : 1.2em;
}

li.nav_sel {
   float                  : left;
   padding-top            : 1em;
   padding-bottom         : 0.5em;
   padding-left           : 0.5em;
   padding-right          : 0.5em;
   border-bottom          : 0.5em solid #ffffff;
}

li.nav_sel a {
   display                : block;
   color                  : #ffffff;
   text-decoration        : none;
   font-weight            : bold;
   font-family            : "Open Sans", sans-serif;
   font-size              : 1.2em;
}

div.copy {
   width                  : 100%;
   float                  : left;
   background-color       : rgba(0, 0, 0, 0.7);
   z-index                : 10;
   position               : fixed;
   right                  : 0;
   bottom                 : 0;
   box-shadow             : 0em -0.5em 2em rgba(0, 0, 0, 0.5);
   font-size              : 0.8em;
}

p.copy {
   font-family            : "Open Sans", sans-serif;  
   font-size              : 0.8em;
   text-align             : center;
   line-height            : 1.0em;
   color                  : #ffffff;
}

div.bsd {
   width                  : 100%;
   background-color       : rgba(0, 0, 0, 0.5);
   font-family            : "Open Sans", sans-serif;  
   font-size              : 1.8em;
      text-align          : center;
   color                  : #ffffff;
}



div.body {
   font-family            : "Open Sans", sans-serif;
   font-size              : 1.2em;
   color                  : #ccc;
   padding-top            : 5em;
   padding-bottom         : 5em;
   padding-left           : 3em;
   padding-right          : 20em;
   position               : relative;
}


hr {
   width                  : 10em;
   height                 : 0.1em;
   background             : #a0a0a0;
   border                 : 0;
}

h1 {
   font-family            : "Open Sans", sans-serif;
   font-size              : 2.0em;
   color                  : #ffffff;
}

h2 {
   font-family            : "Open Sans", sans-serif;
   font-size              : 1.6em;
   color                  : #ffffff;
}

h3 {
   font-family            : "Open Sans", sans-serif;
   font-size              : 1.2em;
   color                  : #ffffff;
}

p {
   font-family            : "Open Sans", sans-serif;
   font-size              : 1.0em;
   line-height            : 1.4em;
}
p.center {
    text-align: center;
}

p.tiny {
   font-family            : "Open Sans", sans-serif;
   font-size              : 0.6em;
   line-height            : 0.8em;
   color                  : #ffffff;
}

a:link {
   color                  : #ffffff;
   text-decoration        : none;
}

a:visited {
   color                  : #dddddd;
   text-decoration        : none;
}

a:active {
   color                  : #0066ff;
   text-decoration        : none;
}

a:hover {
   color                  : #6699ff;
   text-decoration        : underline;
}

div.img {
   border                 : 0.1em solid #ffffff;
   text-align             : center;
   vertical-align         : middle;
   padding                : 0;
}

img.shot  {
   border                 : 0;
}

img {
   vertical-align         : middle;
}

pre {
   background-color       : rgba(0, 0, 0, 0.5);
   font-family            : "Source Code Pro", mono;
   color                  : #ffffff;
   font-size              : 1em;
   line-height            : 1.2em;
   border                 : 1px solid #404040;
   text-align             : left;
   vertical-align         : middle;
   padding                : 1em;
   overflow               : auto;
}

.article-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(0,0,0,0.5);
    padding: 1em;
    margin-bottom: 1em;
    width: 100%;
}

.article-header .article-date,
.article-header .article-title {
    font-family: "Open Sans", sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    color: #fff;
}


blockquote {
   color                  : #ffffff;
   font-family            : "Open Sans", sans-serif;
   font-size              : 1.2em;
   line-height            : 1.4em;
   border                 : 0;
   border-left            : 1em solid #606060;
}

div.thumb {
   border                 : 1px solid #aaaaaa;
   background-color       : rgba(0, 0, 0, 0.5);
   float                  : left;
   text-align             : center;
   vertical-align         : bottom;
   padding                : 1em;
   margin                 : 1em;
}

div.thumbsub {
   border                 : 1px solid #aaaaaa;
   text-align             : center;
   vertical-align         : middle;
   padding                : 0px;
   margin                 : 2px;
}

td.thumb {
   border                 : 0px;
   text-align             : center;
   vertical-align         : bottom;
   padding                : 0px;
   margin                 : 2px;
}


.barra {
    position: fixed;
    right: 0;
    top: 5em;
    bottom: 5em;
    width: 2em; /* colapsada */
    padding: 1em 0.5em;
    background: rgba(0,0,0,0.7);
    overflow: hidden; /* SEM scroll na barra */
    box-shadow: -0.5em 0 2em rgba(0,0,0,0.5);
    color: #ccc;
	font-family: "Open Sans", sans-serif;
    transition: width 0.3s ease;
	   z-index: 1000;     /* força o menu ficar acima do iframe */
}

.barra:hover {
    width: 15em;
}

.barra-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding-top: 2em; /* espaço para o título */
    overflow-y: auto; /* scroll vertical real */
    padding-right: 0.5em;
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    scrollbar-width: none; /* Firefox */
}
.barra-wrapper::-webkit-scrollbar {
    width: 0;
}

.barra h3 {
	position: fixed;
    margin-top: 0;
	margin-left: 0;
    margin-bottom: 1em;
    font-weight: bold;
    font-size: 1.1em;
    writing-mode: vertical-rl; /* gira o texto na barra colapsada */
    transition: writing-mode 0.3s ease;
}

.barra:hover h3 {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.barra-list {
    list-style: none;
    padding-left: 1em;
    margin: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-align: left;
    font-size: 0.8em;
	font-weight: normal;
}

.barra-list li.none-article {
    display: none;
}

.barra:hover .barra-list li.none-article {
    display: block;
}

.barra:hover .barra-list {
    opacity: 1;
}


.barra-link,
.barra-link:link,
.barra-link:visited,
.barra-link:active {
    color: #aaa;
    text-decoration: none;
    font-weight: bold;
    display: block;
    white-space: nowrap;
}

.barra-link:hover {
    color: #fff;
	    text-decoration: none;
		    font-weight: bold;
}
.flag{width:34px;height:22px;vertical-align:middle;margin-right:8px}