@font-face {
  font-family: "04b08";
  src: url(04b08.ttf);
}
@font-face {
  font-family: "Bitstream Vera Sans Mono";
  src: url(VeraMono.ttf);
}

/**** PAGE ****/
html {
    background-image: url('/img/back.jpg');
	background-position: 50% 50%;
	background-color: black;
	background-repeat: no-repeat;
    height: 100%;
}
body {
    font-family: sans-serif;
    font-size: 11px;
}
footer {
    font-family: "04b08";
    font-size: 8px;
    text-shadow: 1px 1px 0px white;
	background-color: rgba(255,255,255,0.6);
	border-top: 1px #FFF solid;
	text-align: center;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;	
	width: 100%;
	padding: 5px;
}
#center {
	left: 70px;
	margin: auto;
	position: absolute;
	right: 50px;
	background-color: rgba(0, 0, 0, 0.9);
	display: block;
	height: auto;
	top: 20px;
	bottom: 46px;
	border-radius: 4px;
	padding: 10px;
	color: white;
	border: 3px ridge #CCC;
	overflow: auto;
    box-shadow: 0 0 10px black;
}
#right {
	position: absolute;
	top: 20px;
	right: 5px;
	width: 50px;
	bottom: 46px;
}
body.on #center, 
body.on #right, 
body.on menu {
	top: 40px;
}
/* MENU */
menu {
	position: absolute;
	left: 0px;
	width: 70px;
	bottom: 46px;
	top: 20px;
	margin: auto;
	border-radius: 0 4px 4px 0;
	padding: 0;
}
menu ul {
	padding: 0;
}
menu li, menu ul {
	display: block;
}
menu li {
	list-style: none;
}
menu li.drag {
	background: black;
	color: white;
}
menu a {
    background-position: center center;
    background-repeat: no-repeat;
    color: white;
    cursor: pointer;
    display: block;
    font-family: "04b08";
    font-size: 8px;
    height: 46px;
    margin: 0px 0px 10px 0px;
    padding: 41px 5px 5px;
    text-align: center;
    text-decoration: none;
    width: 68px;
    text-shadow: 0 0 3px black;
}
menu a:hover {
    color: yellow;
}
menu a.link,
menu a.section,
menu a.page {
}
menu a.section.sel,
menu a.page.sel {
}
/* ICONS */
menu a.index { background-image: url(/img/home.png); }
menu a.about { background-image: url(/img/about.png); }
menu a.portfolio { background-image: url(/img/portfolio.png); }
menu a.terminal { background-image: url(/img/terminal.png); }
menu a.pictures { background-image: url(/img/image.png); }
menu a.projects { background-image: url(/img/projects.png); }
menu a.contact { background-image: url(/img/mail.png); }
/* BASIC */
h1 {
	border-bottom: 1px dashed #009900;
    color: black;
    margin: 0 0 10px;
    padding-bottom: 4px;
    text-shadow: 1px 1px 0 #008800, -1px 1px 0 #00AA00, 1px -1px 0 #00AA00, -1px -1px 0 #00FF00;
}
h2 {
	font-size: 12px;
	color: #FF5900;
}
h3 {
    font-size: 11px;
}
h6 {
	font-size: 8px;
	margin: 0;
	margin-bottom: 15px;
	font-weight: normal;
	margin-top: -5px;
	color: #0E0;
	font-family: "04b08";
}
hr {
	border: 0;
	border-top: 1px dashed #090;
	margin-top: 10px;
	margin-bottom: 10px;	
}
p { padding: 0 20px; }
pre {
    margin: 0;
    font-family: "Bitstream Vera Sans Mono", monospace;
}
ol {}
ul {}
a {
	color: #007FFF;
}
/* ADV */
em {
    color: yellow;
    font-style: normal;
}
strike {}
sub {}
sup {}
time.created {
	position: absolute;
	top: 5px;
	right: 5px;
	font-family: "04b08";
	font-size: 8px;
}
time.created span {
	color: #0F0;
}
time.modified {
	position: absolute;
	top: 15px;
	right: 5px;
	font-family: "04b08";
	font-size: 8px;
}
time.modified span {
	color: yellow;
}
img{}
code {
    background-color: #111111;
    border-color: #222222;
    border-style: dotted dotted dotted solid;
    border-width: 1px 1px 1px 5px;
}
#prompt {
	width: 100%;
    margin-top: -4px;
    border-collapse: collapse;
}
#prompt th {
	font-weight: normal;
	text-align: left;
	width: 1%;
	white-space: nowrap;
    font-family: "Bitstream Vera Sans Mono", monospace;
    padding: 0;
}
#prompt input {
	border: none;
	width: 100%;
	background-color: transparent;
	color: yellow;
	font-size: 11px;
	font-family: "Bitstream Vera Sans Mono", monospace;
    padding-left: 5px;
}
#prompt input:focus {  
    outline: none;  
} 

a.dir {
    color: cyan;
    text-decoration: none;
}
a.file {
    color: magenta;
    text-decoration: none;
}
a.dir:hover, a.file:hover {
    text-decoration: underline;
}
.mono {
    font-family: "Bitstream Vera Sans Mono", monospace;
}
/* COMMENTS */
#comments {
	background-color: rgba(255, 255, 255, 0.1);
	padding: 5px;
	border-radius: 8px;
	margin-bottom: 10px;
	margin-top: 10px;	
}
#comments dl {
	background-color: #111;
	padding: 5px;
	border-radius: 8px;	
}
#comments dt {
	
}
#comments dt b {
	
}
#comments dt time {
	float: right;
	font-family: "04b08";
	font-size: 8px;
	color: yellow;	
}
#comments dd {
	white-space: pre;
	font-family: "Bitstream Vera Sans Mono", monospace;	
}
#comments table {
	width: 100%;
}
#comments th {
	width: 1%;
	white-space: nowrap;
	text-shadow: 1px 1px 1px black;
}
#comments td {
	text-align: right;
}
#comments button {
	cursor: pointer;
}
#comments form {
	display: block;
}
#comments input,
#comments textarea {
	display: block;
	border: 1px inset #333;
	background: #DDD;
	width: 100%;	
	border-radius: 4px;
}
#gallery a {
    display: inline-block;
    margin: 1%;
    width: 22%;
}
#gallery img {
    border: 2px solid black;
    height: auto;
    vertical-align: top;
    width: 100%;
}
/*** RESUME ****/
table.resume {
    border-collapse: collapse;
    width: 100%;
}
table.resume tbody:nth-child(odd) {
    background-color: rgba(150, 150, 150, 0.1);
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
}
table.resume tbody:nth-child(even) {
    color: #999;
}
table.resume tbody tr:first-child td {
    padding-top: 5px;
}
table.resume tbody tr:last-child td {
    padding-bottom: 5px;
}
table.technology {
    border-collapse: collapse;
    width: 100%;
}
table.technology tr:nth-child(even) {
    background-color: rgba(150, 150, 150, 0.1);
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}
table.technology td {
    padding: 3px;
    vertical-align: middle;
}
table.technology thead th {
    color: red;
    font-size: 12px;
}
table.technology tbody th {
    text-align: center;
    background-color: rgba(255,0,0,0.1);
    color: white;
    padding: 3px;
    border-top: 1px solid #333;
}
table.technology tbody tr td:first-child {
    padding-right: 10px;
    border-right: 1px solid #666;
    color: yellow;
}
table.technology td.l5 {
    color: #0F0;
}
table.technology td.l4 {
    color: #6F6;
}
table.technology td.l3 {
    color: #FF6;
}
table.technology td.l2 {
    color: darkorange;
}
table.technology td.l1 {
    color: pink;
}
/*********** RESIZE ***************/
@media screen and (max-width:700px) {
    menu {
        display: none;
    }
    #center {
        left: 10px;
        right: 10px;
    }
}
@media screen and (max-width:450px) {
    footer {
        display: none;
    }
    body {
        font-size: 10px;
    }
    #center {
        bottom: 20px;
    }
}
@media screen and (max-width:400px) {
    #center {
        left: 0px;
        right: 0px;
        padding: 5px;
    }
    body {
        font-size: 9px;
    }
}
@media screen and (max-height:600px) {
    footer {
        display: none;
    }
    #center {
        top: 0px;
        bottom: 0px;
    }
}