@charset "UTF-8";
@-ms-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}

@font-face
{
font-family: tronfont;
src: url('tron.ttf'),
     url('tron.eot'); /* IE9+ */
}
@font-face
{
font-family: tronfont2;
src: url('tron2.ttf'),
     url('tron2.eot'); /* IE9+ */
}

.tron{
font-family:tronfont;
}
.tron2{
font-family:tronfont2;
}

html {
  /*overflow-y: scroll;*/
  background: #000;
}
body {
  margin:0 auto;
  color: #afe3e6;
  min-width: 20em;  
  max-width:60em;  
}
.overlay{
  background-image: url(../img/pixels.png);
  background-repeat: repeat;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top:0;
  z-index:999;
  pointer-events: none;
  opacity: 1;
}
.orangeglow{
/*color:#FF6103;*/
color:#F75C00;
-moz-text-shadow: 0 0 10px #F75C00;
-webkit-text-shadow: 0 0 10px #F75C00;
text-shadow: 0px 0px 10px #F75C00;

/*IE NOT WORTH IT AT THE MOMENT- looks like crap
filter:progid:DXImageTransform.Microsoft.Glow(Color='#F75c00',Strength=10);
*/

}
.orange{color:#F75C00;}

.yellow{color:#f6cb1a;}

.lightglow{
color:#afefff;
-moz-text-shadow: 0 0 10px #47b6d3;
-webkit-text-shadow: 0 0 10px #47b6d3;
text-shadow: 0px 0px 10px #47b6d3;

/*IE NOT WORTH IT AT THE MOMENT- looks like shit
filter:progid:DXImageTransform.Microsoft.Glow(Color='#009bf7',Strength=10);
*/
}

.blueglow{
color:#47b6d3;
-moz-text-shadow: 0 0 10px #47b6d3;
-webkit-text-shadow: 0 0 10px #47b6d3;
text-shadow: 0px 0px 10px #47b6d3;
}
.blue{color:#47b6d3;}

ul, ol {
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, h5, h6, p, ul, ol {
  margin: 0;  
}
h1, h2, h3, h4, h5, h6{
color:#47b6d3;
/*color:#8fdbe4;*/

}

a {
  text-decoration: none;
}
*{

    color:#afe3e6;
    font-family: Monaco, monospace  
}

a{
color:#f6cb1a;
padding:3px;
text-decoration:underline;
word-wrap:break-word;
}
a:hover{
background: rgba(255, 255, 255, 0.2);
}

article{
border-right: 3px solid #afe3e6;
border-bottom: 3px solid #afe3e6;
border-left: 3px solid #afe3e6;
}


.highlight {
  background: #fff699;
  padding: 0 0.5em;
}

header .head{
z-index: 2;
  position: relative;
  border-radius:4px 4px 0 0;
  height:32px;
  color:#222;
  margin-bottom:3px;
  text-align:center;
  text-align:vertical-center;
  background:#d0f5f5;  
}
header .head p{
margin-top:5px;
color:#222;
display:inline-block;
}
.decobox0{
  position: absolute;
  top:0;
  right: 0;
  background:#AFE3E6;
  border-radius:0 4px 0 0;
  border-left:3px solid #222;
}
.decobox {
margin:4px 4px;
left:0;
height:18px;
width:18px;   
border-radius:3px;
border:3px solid #222;
}
.decobox2 {
  width: 10px;
  height: 10px;
  position: relative; 
  top:6px;
  border:3px solid #222;
  border-bottom:0;
  border-left:0;  
}

.block {
  position: relative;
  padding: 0.5em 1.25em;
  
}

.close-btn {
  display: block;
  width: 2.625em;
  height: 2em;
  padding: 0;
  border: 0;
  outline: none;
  background: url("../img/close-btn.png") center center no-repeat;
  
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/*.no-svg .close-btn {
  background-image: url("../img/close-btn.png");
}*/
.close-btn:focus, .close-btn:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  background: url("../img/close-btn-glow.png") center center no-repeat;
  -moz-box-shadow: 0 0 10px #F75C00;
  -webkit-box-shadow: 0 0 10px #F75C00;
  box-shadow: 0px 0px 10px #F75C00;
}

.nav-btn {
  display: block;
  width: 2.625em;
  height: 2em;
  padding: 0;
  border: 0;
  outline: none;
  background: url("../img/nav-icon.png") center center no-repeat;
  
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/*.no-svg .nav-btn {
  background-image: url("../img/nav-icon.png");
}*/
.nav-btn:hover, .nav-btn:focus {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  background: url("../img/nav-icon-glow.png") center center no-repeat;
  -moz-box-shadow: 0 0 10px #F75C00;
  -webkit-box-shadow: 0 0 10px #F75C00;
  box-shadow: 0px 0px 10px #F75C00;
}

#outer-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
}

#inner-wrap {
  position: relative;
  width: 100%;
}

#nav {
  z-index: 200;
  position: relative;
  overflow: hidden;
  width: 100%;
  color: #222;
}
#nav .close-btn {
  display: none;
}
#nav .block-title {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
#nav .block {
  z-index: 2;
  position: relative;
  padding: 0.15em 1.25em;
  background:#AFE3E6;  
}

#nav ul {
  *zoom: 1;
  display: block;
}
#nav ul:before, #nav ul:after {
  content: "";
  display: table;
}
#nav ul:after {
  clear: both;
}
#nav li {
  display: block;
}
#nav li a {
  display: block;
  color: #222;
  text-decoration:none;
  font-size: 1em;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  /*line-height: 1.28571em;*/
  
  outline: none;
}
#nav li a:focus, #nav li a:hover {
  color: #f6cb1a;
  background: #222;
  background: rgba(34, 34, 34, .7);  
}
#nav li.is-active a {
  color: #FF6103;
  background: rgba(34, 34, 34, .7);
}

#top {
  z-index: 100;
  position: relative;
  color: #222;
  
}
#top .block-title {
  margin: 0;
  font-size: 2.7em;
  line-height: 1.2em;
  text-align: right;
  white-space: nowrap;
}
#top .nav-btn {
  border:3px solid #F75C00;
  border-radius:3px;
  position: absolute;
  top: .5em;
  left: .5em;
}

#main {
  
}
#main .block {
  padding: 1.5em 1em;
}
footer{
  margin-top:0.6em;
  font-size:0.9em;
  text-align:right;
}
#disclaimer{
  font-size:0.7em;
}

.standard #main p{
  margin-bottom:1.5em;
  line-height:1.35em;
}
.standard #main h4, .standard #main h2{
  margin-bottom:.5em;  
}
 #home #portrait{
    margin:0 1em 1em 0;
    float:left;
  }


/* --- CV styles ---- */

.js #cvinfo{
  display:none;
}
#cv .source h1, #cv .source h2, #cv .source h3, #cv .source h4, #cv .source p, #cv .source a{
font-size: 1em;
font-weight:normal;
}

#main article #cvinfo{
line-height:1.5em;
margin-top:15px;
}
#cvinfo, #cvinfo p, #cvinfo h1, #cvinfo h2, #cvinfo ul, #cvinfo li, #cvinfo div{
color:#95917e;
}
/*#cvinfo a{
color:#f92672;
padding:3px;
text-decoration:underline;
word-wrap:break-word;
}
#cvinfo a:hover{
background: rgba(255, 255, 255, 0.2);
border-radius:3px;
}*/
.section:before {
content:"/*----";
}
.section:after {
content:"----*/";
}
.longcomment:before{
  content:"/* ";
    display:block;
}
.longcomment:after{
content:" */";
display:block;
}
.comment:before{
  content:"/* ";
}
.comment:after{
  content:" */";
}

.break{
  margin-top:1.5em;
  margin-bottom:1em;
  text-transform: uppercase;
}

#cvinfo li:before{
content:"-";
position:relative;
left:-1em;
}
#cvinfo li{
text-indent:-0.6em;
margin-left:2em;
}

dl {
    margin:0;
    overflow: hidden;
    padding-left: 2em;
    display:block;

}
dl:after{
display:block;
color:#90e22a;
content:"}";
}
dt {
    min-width: 7em;
    clear: left;    
}
dt{
  float:left;
  color:#46beef;
  font-style:italic; 
}
dt.long{
  float:none;
  clear:right;
  display:inline-block;
}
dd{
  color:#ae81ff;
  margin-left:7em;
}
#cvinfo h3{
color:#90e22a;
margin-top:1.5em;
}
#cvinfo h3:before{
  content:"#";
}
#cvinfo h3:after{
content:" {";
}
dt:after{
  content:":";
}
dd:after{
  content:";";
}

/* PORTFOLIO STYLES */
 #portfolio #content li:before{
 content:"-";
 position:relative;
 left:-1em;
 }
 #portfolio #content li{
 text-indent:-0.6em;
 margin:0.5em 0 0.5em 2em;
 }
 #portfolio #content table{
 margin:1em 0;
 }

 #portfolio #content .titles{
 font-weight:bold;
 }
 #portfolio #content tr:nth-child(even) {
 background: #333;
 }
 
 #portfolio #content td{
 min-width:3.75em; 
 border:1px solid #666;
 padding:0.313em 0.625em 0.313em 0.313em;
 }

@media screen and (min-width: 45.0625em) {

  #top .nav-btn {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  #nav .close-btn {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  #nav .block-title {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  #nav ul {   
    white-space: nowrap;
  }
  #nav li {    
    padding-right:.6em;
    display: inline-block;
    /*border-right: 1px solid rgba(0, 0, 0, 0.2);*/
  }
  #nav li:last-child {
    border-right: none;
  }
  #nav li a {
    padding: 0.42857em 0.85714em;
  }
  article{
  height:35em;
  overflow-y:scroll;
  border-radius:0 0 4px 4px;
  }
  #home #content{
    float:left;
    width:75%;    
  }
  #brief{
    width:20%;
    padding:10px;
    border:1px solid #47b6d3;
    border-radius:3px;
    min-height:400px;
    float:right;
    /*-moz-box-shadow:    3px 0px 5px #555;
    -webkit-box-shadow: 3px 0px 5px #555;
     box-shadow:         3px 0px 5px #555;*/
  }
  #brief p:last-child{
    margin-bottom: 0;
  }


}
@media screen and (max-width: 30em){
  dl{
    padding-left:1em;
  }
  dt {    
    clear: both; 
    float:none;
    display:inline-block;   
  }
  dd{
    margin-left:1em;
  }
}

@media screen and (max-width: 25em) {
  #top .block-title {
  margin: 0;
  font-size: 2em;
  }
  #top .head{
    font-size:.9em;
  }
  .standard #main h1{
    font-size:1.5em;
  }
}

@media screen and (max-width: 45em) {
  header .head{
  margin-bottom:0;
  
  }

  #main .block {
    padding: 1em;
  }
  #nav {
    position: absolute;
    top: 0;
    padding-top: 4.3em;
  }
  #nav:not(:target) {
    z-index: 1;
    height: 0;
  }
  #nav:target .close-btn {
    display: block;
  }
  #nav .close-btn {
    position: absolute;
    top: -3.75em;
    left: .5em;
    border:3px solid #F75C00;
    border-radius:3px;
  }
  #nav .block {
    position: relative;
    padding: 0;
  }
  #nav li {
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
  }
  #nav li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  }
  #nav li.is-active:after {
    z-index: 50;
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: -0.03125em;
    margin-top: -0.625em;
    border-top: 0.625em transparent solid;
    border-bottom: 0.625em transparent solid;
    border-right: 0.625em #FF6103 solid;
  }
  #nav li a {
    padding: 0.85714em 1em 0.85714em .5em;
  }

  .js-ready #nav {
    height: 100%;
    width: 40%;
    background: #AFE3E6;
    -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
  }
  .js-ready #nav .block {
    background: transparent;
  }
  .js-ready #nav .close-btn {
    display: block;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
  }
  .js-ready #nav .close-btn:focus, .js-ready #nav .close-btn:hover {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }

  .js-ready #nav {
    left: -40%;
  }
  .js-ready #inner-wrap {
    left: 0;
  }

  .js-nav #inner-wrap {
    left: 40%;
  }

  .csstransforms3d.csstransitions.js-ready #nav {
    left: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .csstransforms3d.csstransitions.js-ready #inner-wrap {
    left: 0 !important;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -o-transition: -o-transform 500ms ease;
    transition: transform 500ms ease;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .csstransforms3d.csstransitions.js-nav #inner-wrap {
    -webkit-transform: translate3d(40%, 0, 0) scale3d(1, 1, 1);
    -moz-transform: translate3d(40%, 0, 0) scale3d(1, 1, 1);
    -ms-transform: translate3d(40%, 0, 0) scale3d(1, 1, 1);
    -o-transform: translate3d(40%, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(40%, 0, 0) scale3d(1, 1, 1);
  }

  .csstransforms3d.csstransitions.js-ready #nav .block {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
    -webkit-transition: opacity 300ms 100ms, -webkit-transform 500ms ease;
    -webkit-transition-delay: ease, 0s;
    -moz-transition: opacity 300ms 100ms ease, -moz-transform 500ms ease;
    -o-transition: opacity 300ms 100ms ease, -o-transform 500ms ease;
    transition: opacity 300ms 100ms ease, transform 500ms ease;
    -webkit-transform: translate3d(40%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -moz-transform: translate3d(40%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -ms-transform: translate3d(40%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -o-transform: translate3d(40%, 0, 0) scale3d(0.9, 0.9, 0.9);
    transform: translate3d(40%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -webkit-transform-origin: 40% 0%;
    -moz-transform-origin: 40% 0%;
    -ms-transform-origin: 40% 0%;
    -o-transform-origin: 40% 0%;
    transform-origin: 40% 0%;
  }

  .csstransforms3d.csstransitions.js-nav #nav .block {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  #brief{
    padding:1em;
    border:1px solid #ccc;
    margin:2em 0;
    
    /*-moz-box-shadow:    3px 0px 5px #555;
    -webkit-box-shadow: 3px 0px 5px #555;
     box-shadow:         3px 0px 5px #555;*/
  }
   #home #portrait{
    width:150px;
   }
}

.terminal{
  
}
output {
clear: both;
width: 100%;
}


input, textarea, keygen, select, button {
margin: 0em;
font: -webkit-small-control;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
-webkit-appearance: textfield;
-webkit-writing-mode: horizontal-tb;
}

input:not([type]){
  padding: 1px 0;
}

.input-line {
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-align: stretch;
display: box;
box-orient: horizontal;
box-align: stretch;
clear: both;
}

.prompt {
white-space: nowrap;
color: #ffcc00;
margin-right: 7px;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-orient: vertical;
display: box;
box-pack: center;
box-orient: vertical;
-webkit-user-select: none;
user-select: none;
}

.input-line > div:nth-child(2) {
-webkit-box-flex: 1;
box-flex: 1;
}

.cmdline {
outline: none;
background-color: transparent;
margin: 0;
width: 100%;
font: inherit;
border: none;
color: inherit;
}
.flicker {
  -webkit-animation-name: flicker;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes flicker{
  0% { opacity: 0.99; }
  10% { opacity: 0.94; }
  20% { opacity: 0.89; }
  30% { opacity: 0.94; }
  40% { opacity: 0.99; }
  50% { opacity: 0.89; }
  60% { opacity: 0.99; }
  70% { opacity: 0.96; }
  80% { opacity: 0.89; }
  90% { opacity: 0.96; }
  100% { opacity: 0.94; }
}