/***** CSS RESET *****/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
/***** STYLE *****/
body {
font-size: 12pt;
line-height: 15pt;
width: 100%;
}
body * {
font-family: "CMU Sans Serif", "Linux Biolinum", "Myriad Pro", "DejaVu Sans Condensed", sans-serif;
}
.container_12 {
margin-top: 40pt;
}
/* ************************* text elements ************************* */
/*
* We aim at 12pt font size with 14pt leading.
*
* Typography is unnecessarily hard in CSS ...
*
*/
h1 {
font-weight: bold;
padding-bottom: 7pt;
border-bottom: 1pt dashed #DDD;
text-transform: uppercase;
font-size: 17pt;
line-height: 20.4pt;
margin-top: 1.6em;
margin-bottom: 1.6em;
}
h2 {
font-size: 12pt;
line-height: 14pt;
text-transform: uppercase;
margin-top: 1.6em;
margin-bottom: 1.6em;
}
h3 {
font-size: 12pt;
line-height: 14pt;
margin-top: 1.333333em;
margin-bottom: 1.333333em;
}
/* p.info { */
/* font-family: "Minion Pro", "CMU Serif", "Linux Libertine", "DejaVu Serif", serif; */
/* font-size: 12pt; */
/* line-height: 14pt; */
/* margin-top: 2em; */
/* margin-bottom: 2em; */
/* } */
b, strong, bold {
font-weight: bold;
}
code, tt {
font-family: "CMU Typewriter Text", "DejaVu Mono", monospace;
}
/* ***************************** rules ***************************** */
hr { /* moronic if compared to \hrule / \vrule … */
/* color: #999; */
background-color: #999;
height: 1pt;
}
hr.simple-break {
margin: 2em;
margin-top: 4em;
margin-bottom: 4em;
border-top: none;
border-left: none;
border-bottom: 1pt solid #888;
border-right: 1pt solid #888;
background-color: #CCC;
height: 3pt;
}
/* ***************************** links ***************************** */
a {
color: #933;
text-decoration: none;
}
a:visited {
color: #700;
text-decoration: none;
}
a:hover, a:active {
text-decoration: none;
border: 1pt dotted #999;
}
/* ***************************** lists ***************************** */
ol {
margin: 1pt;
padding-left: 1em;
padding-bottom: 1em;
}
/* ***************************** navbox **************************** */
.top-box {
/* default to white for all subelms */
color: #FFF;
}
div.top-box-frame {
width: 100%;
position: fixed;
background: #000;
padding-top: 0.618033em;
padding-bottom: 0.618033em;
margin-top: 2pt;
}
div.topskip {
height: 4em;
}
div.footerdistance {
height: 4em;
}
div.top-box-content {
margin-right: 0.618033em;
margin-left: 0.618033em;
}
div.top-box-content * {
vertical-align: bottom;
color: #FFF;
}
img.top-box-normal {
height: 12pt;
width: 12pt;
vertical-align: -3pt;
}
div.top-box-flushleft {
font-size: 11pt; /* account for uppercasing */
text-transform: uppercase;
float: left;
}
a.top-box-home {
font-size: 11pt;
font-weight: bold;
border: none;
}
a.top-box-home:hover {
text-shadow: 0.5pt 0.5pt 0pt #000,
0.0pt 0.0pt 5pt #FFF;
text-decoration: none;
border: none;
}
a.top-box-normal:hover {
text-shadow: 0.5pt 0.5pt 0pt #000,
0.0pt 0.0pt 5pt #FFF;
text-decoration: none;
border: none;
}
div.top-box-flushright {
float: right;
font-size: 11pt;
font-weight: bold;
}
a.top-box-location {
color: #FFF;
font-family: "CMU Typewriter Text", "DejaVu Mono", monospace;
}
a.top-box-location:hover {
text-shadow: 0.5pt 0.5pt 0pt #000,
0.0pt 0.0pt 5pt #FFF;
text-decoration: none;
border: none;
}
/* **************************** generic ***************************** */
body {
background: white;
}
div.main, div.cv-main {
padding-top: 2em;
padding-left: 3em;
padding-right: 3em;
width: 90%;
display: block;
margin-left: auto;
margin-right: auto;
}
p {
font-family: "Minion Pro", "CMU Serif", "Linux Libertine", "DejaVu Serif", serif;
text-align: justify;
}
span.TeX {
font-family: "CMU Serif", "Latin Modern Roman", serif;
}
p.home-info {
font-size: 12pt;
line-height: 14pt;
text-align: justify;
}
div.home-two-column {
column-count: 2;
column-gap: 1.618em;
-webkit-columns: 2;
-webkit-column-gap: 1.618em;
-moz-columns: 2;
-moz-column-gap: 1.618em;
padding-left: 5em;
padding-right: 3cm;
/* font-family: "CMU Sans Serif", "Linux Biolinum", "DejaVu Sans Condensed", sans-serif; */
}
ul.home-info {
font-size: 10pt;
font-family: "CMU Typewriter Text", "DejaVu Mono", monospace;
line-height: 14pt;
text-align: left;
margin-left: 1em;
margin-top: 14pt;
margin-bottom: 14pt;
list-style-type: circle;
}
.info-element {
padding: .5em;
}
div.image-box {
float: right;
background: #AAA;
border: 1pt solid #EEE;
padding: 3pt;
}
img.portrait {
height: auto;
max-width: 5cm;
}
a.image:hover, a.image:active {
text-decoration: none;
border: none;
}
/* ***************************** footer **************************** */
div.footer {
text-align: center;
margin-top: 2pt;
margin-bottom: 2pt;
width: 100%;
padding-top: 0.618033em;
padding-bottom: 0.618033em;
background: #DCDCDC;
font-size: 11pt;
color: #999;
}
div.footer-content {
}
a.footer {
color: #999;
}
/* ***************************** tables **************************** */
div.table-wrap {
padding-top: 1em;
padding-bottom 1em;
margin-left: 5em;
margin-right: 3cm;
background: #FAFAFA;
}
table.plain {
background: #FAFAFA;
margin: auto;
margin-bottom: 1ex;
margin-top: 1ex;
}
td.plain {
font-family: "Minion Pro", "CMU Serif", "Linux Libertine", "DejaVu Serif", serif;
padding-bottom: 6pt;
}
td.plain {
text-align: left;
padding-right: 0.5em;
}
p.plain {
font-family: "Minion Pro", "CMU Serif", "Linux Libertine", "DejaVu Serif", serif;
text-align: justify;
font-size: 12pt;
line-height: 14pt;
margin-top: 06pt;
/* margin-bottom: 2em; */
}
/* *************************** cv: layout ************************** */
/*
* Brace yourself. Due to the lack of proper dimensions we have to set
* the box width in terms of proportions to \hsize. For some reason,
* both margin and padding add to the total width of a box, which we
* cannot know in advance.
*
* Consequently, we will have to do without typographically sound
* dimensions when setting box margins and offsets -- percentages is
* all we got if we are determined not to exceed \hsize. So we’ll add
* up the room consumed so far along the way.
*/
div.cv-leftbar {
padding-top: 1.0em;
padding-left: 01%;
padding-right: 02%;
width: 25%; /* 72% left */
height: 10cm;
float: left;
text-align: right;
}
div.cv-leftbar * {
/* why tf is this overridden anyways? */
text-align: right;
}
div.cv-leftbar-item {
/* border: 1pt solid #222; */ /* dbg */
}
div.cv-leftbar-item:hover {
background: #F6F6F6;
}
div.cv-leftbar-item-body {
/* border: 1pt solid #222; */ /* dbg */
vertical-align: text-top;
width: 87%;
}
div.cv-leftbar-item-rubric {
height: 14pt;
position: relative;
float: right;
top: 1ex;
/* border: 1pt solid #222; */ /* dbg */
/*
* WTF???
* This is the most backwards programming imaginable.
*/
-moz-transform: matrix( 0.0, 1.0,-1.0, 0.0, 0.0, 0.0);
-moz-transform-origin: top right;
-ms-transform: matrix( 0.0, 1.0,-1.0, 0.0, 0.0, 0.0);
-ms-transform-origin: top right;
-o-transform: matrix( 0.0, 1.0,-1.0, 0.0, 0.0, 0.0);
-o-transform-origin: top right;
transform: matrix( 0.0, 1.0,-1.0, 0.0, 0.0, 0.0);
transform-origin: top right;
-webkit-transform: matrix( 0.0, 1.0,-1.0, 0.0, 0.0, 0.0);
-webkit-transform-origin: top right;
/*
* hack ahead
*/
width: 0pt;
font-weight: bold;
font-size: 10pt;
}
div.cv-leftbar-item-rubric-text {
font-weight: bold;
font-size: 10pt;
}
div.cv-content {
padding-top: 1.0em;
padding-left: 02%;
padding-right: 01%;
width: 69%; /* 100% of \hsize covered */
float: right;
}
/* div.cv-content:hover { */
/* background: #F6F6F6; */
/* } */
/* *************************** cv: stuff *************************** */
em {
font-style: italic;
font-family: inherit;
}
/* *************************** cv: tables ************************** */
table.cv-table {
margin-left: 5.0em;
margin-right: 1.0cm;
margin-bottom: 14pt; /* 1*line */
margin-top: 14pt; /* 1*line */
background: #FCFCFC;
}
td {
font-family: "Minion Pro", "CMU Serif", "Linux Libertine", "DejaVu Serif", serif;
padding-bottom: 6pt;
}
td.cv-table-cell-listhd {
text-align: left;
/* width: 10ex; */
padding-right: 0.9em;
}
td.cv-table-cell-dates {
text-align: left;
width: 20ex; /* not only year numbers but also text like “the present” etc. */
padding-right: 0.5em;
}
td.cv-table-cell-items {
text-align: justify;
/* width: 10ex; */
padding-right: 0.5em;
}
p.cv-table-item {
font-family: "Minion Pro", "CMU Serif", "Linux Libertine", "DejaVu Serif", serif;
text-align: justify;
font-size: 12pt;
line-height: 14pt;
margin-top: 06pt;
/* margin-bottom: 2em; */
}
/* *************************** cv: layout ************************** */
/*
* body font:
* \tfx -> font size of 9pt on 11pt leading
*/
h1.cv-leftbar {
font-weight: bold;
padding-bottom: 7pt;
border: none;
text-transform: uppercase;
font-size: 11pt;
line-height: 13pt;
margin-top: 1.6em;
margin-bottom: 1.6em;
}
p.cv-leftbar {
font-family: "Iwona",
"CMU Sans Serif",
"Linux Biolinum",
"Myriad Pro",
"DejaVu Sans Condensed",
sans-serif;
font-size: 09pt;
line-height: 12pt;
margin-top: 06pt;
/* margin-bottom: 2em; */
padding-bottom: 1em;
}
/* ************************* code projects ************************* */
p.projects-intro {
column-count: 2;
column-gap: 1.618em;
-webkit-columns: 2; /* REALLY? */
-webkit-column-gap: 1.618em;
-moz-columns: 2;
-moz-column-gap: 1.618em;
}
div.project-outer-box {
padding: 1em;
padding-top: 3em;
}
div.project-id {
float: left;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1ex;
height: 100%;
border-right: 4em solid white;
}
span.project-id-text {
font-size: 24pt;
font-weight: bold;
}
div.project-description {
padding-left: 15%;
padding-right: 15%;
padding-bottom: 12pt;
}
p.project-description-text {
text-align: justify;
}
div.project-link-wrap {
padding-left: 15%;
/* padding-right: 15%; */
}
div.project-link-box {
background: #DDD;
height: 2em;
padding: 1em;
text-align: center:
}
a.project-link {
font-weight: bold;
padding: 1ex;
background: #DDD;
border: 1pt dotted #FFF;
border-radius: 4pt;
color: black;
text-shadow: 1pt 1pt 0pt #FFF,
0pt 0pt 3pt #333;
}
a.project-link:hover {
background: #777;
color: white;
text-shadow: 1pt 1pt 0pt #000;
}
a.project-link-doc {
float: right;
margin-left: 1ex;
}
a.project-link-misc {
float: right;
margin-left: 1ex;
}
a.project-link-code {
display: inline-block;
}
/* ************************* splash screen ************************* */
/*
* We take some liberty with the layout here. Not much information
* anyways, nor functionality, so we make things larger, fancier.
* Haters gonna hate!
*/
div.splash-main-outer {
margin: 5%;
vertical-align: middle;
}
div.splash-main-inner {
width: 90%;
height: 90%;
margin: 0 auto;
text-align: center;
padding: 3em;
}
div.splash-main-searchbox {
position: fixed;
bottom: 5mm;
right: 35mm;
padding: 0;
width: 5cm;
height: 1cm;
}
/*
* Caution! Crappy code ahead. Stop reading here if you have a weak
* physique. Optimize your blood sugar level before you go on. You have
* been warned.
*
* As CSS appears to lack a proper spacing mechanism like \hfill and
* \vfill, not to mention different orders of infinity, we will attempt
* some crude, hard coded positioning, substituting proportions for
* intutitive dimensions. Sigh.
*/
div.splash-text-box {
margin-top: 5%;
margin-bottom: 5%;
}
div.splash-text-box2 {
margin-top: 2.5%;
margin-bottom: 2.5%;
}
div.splash-text-box3 {
margin-top: 4em;
margin-bottom: 5%;
}
hr.splash-separator {
width: 20%;
height: 2pt;
border: none;
background: #CCC;
}
div.splash-text-box4 {
display: flex;
width: 75%;
margin-left: auto;
margin-right: auto;
text-align: left;
margin-top: 1ex;
margin-bottom: 1ex;
flex-flow: row nowrap;
justify-content: space-between;
}
div.splash-text-box4-left {
}
div.splash-text-box4-middle {
}
div.splash-text-box4-right {
}
span.splash-text-xl {
font-family: "Minion Pro", "CMU Serif", "Linux Libertine", "DejaVu Serif", serif;
font-size: 42pt;
text-shadow: 1pt 1pt 0pt #FFF,
0pt 0pt 3pt #333;
text-transform: uppercase;
/* ridiculus fx below */
/* text-shadow: 0pt 1.0pt 0pt #EEE, */
/* 0pt 1.5pt 0pt #222, */
/* 0pt 2.0pt 0pt #333, */
/* 0pt 2.5pt 0pt #444, */
/* 0pt 3.0pt 0pt #555, */
/* 0pt 3.5pt 0pt #666, */
/* 0pt 4.0pt 0pt #777, */
/* 0pt 4.5pt 0pt #888, */
/* 0pt 5.0pt 0pt #999, */
/* 0pt 5.5pt 0pt #AAA, */
/* 0pt 6.0pt 0pt #111, */
/* 0pt 6.0pt 9pt #111; */
letter-spacing: 2pt; /* n of sheeps stolen: 42; n of fucks given: 0 */
}
span.splash-text-interleave {
font-family: "Minion Pro", "CMU Serif", "Linux Libertine", "DejaVu Serif", serif;
font-size: 17pt;
font-style: italic;
font-stretch: expanded;
text-shadow: 0.5pt 0.5pt 0pt #FFF;
letter-spacing: 1pt;
}
span.splash-text-l {
font-family: "Minion Pro", "CMU Serif", "Linux Libertine", "DejaVu Serif", serif;
font-size: 42pt;
text-shadow: 1pt 1pt 0pt #FFF,
0pt 0pt 3pt #333;
text-transform: uppercase;
letter-spacing: 1pt;
}
span.splash-text-m {
text-transform: uppercase;
font-family: "Minion Pro", "CMU Serif", "Linux Libertine", "DejaVu Serif", serif;
font-size: 24pt;
letter-spacing: 3pt;
}
a.splash-link {
text-decoration: none;
border: none;
font-weight: bold;
text-shadow: 0.5pt 0.5pt 0pt #999,
-0.4pt -0.4pt 0pt #444,
0.0pt 0.0pt 3pt #933;
}
a.splash-link:hover {
text-decoration: none;
text-shadow: 0.5pt 0.5pt 0pt #CCC,
-0.4pt -0.4pt 0pt #111,
0.0pt 0.0pt 9pt #933;
}
/* ***************************** coding **************************** */
tr.code-box {
/* width: 90%; */
border: 1pt solid #333;
}
td.code-rubric {
/* float: left; */
width: 30pt;
border: 1pt solid #922;
font-size: 28pt;
font-weight: bold;
color: white;
/* padding-bottom: 1ex; */
background: #DCDCDC;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: 0% 0%;
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
/* -moz-transform: matrix( 0.0,-1.0, 1.0, 0.0, 0.0, 0.0); */
/* -ms-transform: matrix( 0.0,-1.0, 1.0, 0.0, 0.0, 0.0); */
/* -o-transform: matrix( 0.0,-1.0, 1.0, 0.0, 0.0, 0.0); */
/* transform: matrix( 0.0,-1.0, 1.0, 0.0, 0.0, 0.0); */
/* -webkit-transform: matrix( 0.0,-1.0, 1.0, 0.0, 0.0, 0.0); */
}
td.code-content {
/* float: left; */
/* float: right; */
width: 80%;
border: 1pt solid #229;
padding: 1em;
}
/* **************************** switches *************************** */
.verbosity_switch {
font-family: "CMU Sans Serif", "Linux Biolinum", "Myriad Pro", "DejaVu Sans Condensed", sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 8pt;
padding: 1ex;
float: right;
position: relative;
top: -1ex;
right: 0;
border: 1pt dotted #AAA;
border-radius: 4pt;
}
.verbosity_switch:hover {
background: #EEE;
}
/* **************************** imprint **************************** */
ul.imprint {
margin-left: 20%;
margin-right: 20%;
padding: 1em;
background: #CCC;
}
p.imprint {
padding-left: 20%;
padding-right: 20%;
padding-bottom: 1em;
/* font-family: "CMU Sans Serif", "Linux Biolinum", "DejaVu Sans Condensed", sans-serif; */
font-size: 12pt;
line-height: 14pt;
text-align: justify;
}
img.imprint-cc-by {
float: left;
margin-right: 14pt;
height: 42pt;
}
/* ************************ history section ************************ */
div.history-entry {
padding-top: 5em;
}
div.history-id-box {
float: left;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1ex;
height: 100%;
border-right: 4em solid white;
}
span.history-id-text {
font-size: 24pt;
font-weight: bold;
}
div.history-description {
padding-left: 15%;
padding-right: 15%;
padding-bottom: 12pt;
}
p.history-description-text {
text-align: justify;
}
div.history-info-wrap {
padding-left: 15%;
/* padding-right: 15%; */
text-align: center:
}
div.history-info-box {
background: #DDD;
height: 2em;
padding: 1em;
vertical-align: center;
}
div.history-language-box {
background: #EEE;
display: inline-block;
border-right: 1pt dotted #555;
border-bottom: 1pt dotted #555;
border-top: 1pt dotted #FFF;
border-left: 1pt dotted #FFF;
border-radius: 4pt;
padding: 1ex;
}
span.history-language-text {
display: block;
font-weight: bold;
}
div.history-file-box {
margin-left: 1em;
float: right;
font-weight: bold;
padding: 1ex;
background: #DDD;
border: 1pt dotted #CCC;
border-radius: 4pt;
color: black;
text-shadow: 1pt 1pt 0pt #FFF,
0pt 0pt 3pt #333;
display: inline-block;
}
div.history-file-box:hover {
background: #EEE;
border-right: 1pt dotted #555;
border-bottom: 1pt dotted #555;
border-top: 1pt dotted #FFF;
border-left: 1pt dotted #FFF;
border-radius: 4pt;
padding: 1ex;
}
a.history-file-link {
color: #000;
border: none;
}