/* Copyright Marius Hofert
   1) validate with http://jigsaw.w3.org/css-validator/
   more options -> Profile: CSS level 3, Vendor Extensions: Warnings
   2) check browser compatibility with http://browsershots.org/
*/


/* %%% general %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

/* font-face, see fontspring.com */

@font-face {
    font-family: 'LatinModernSans10Bold';
    src: url('./fonts/lmsans10-bold-webfont.eot');
    src: url('./fonts/lmsans10-bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('./fonts/lmsans10-bold-webfont.woff') format('woff'),
    url('./fonts/lmsans10-bold-webfont.ttf') format('truetype'),
    url('./fonts/lmsans10-bold-webfont.svg#LatinModernSans10Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatinModernSans10Regular';
    src: url('./fonts/lmsans10-regular-webfont.eot');
    src: url('./fonts/lmsans10-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('./fonts/lmsans10-regular-webfont.woff') format('woff'),
    url('./fonts/lmsans10-regular-webfont.ttf') format('truetype'),
    url('./fonts/lmsans10-regular-webfont.svg#LatinModernSans10Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* body */

body {
    font-family: LatinModernSans10Regular, 'Lucida Sans', Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    margin: 0px;
    padding: 0px;
    border: 0px; /* display with border: 1px solid #000000; */
}

/* container for all, including footer */

.container {
    width: 720px;
    margin: 80px auto 36px auto;
    border: 0px; /* 1px solid #FF0000; */
}

/* clearing */

.clear {
    clear: both;
}

/* header */

.header {
    width: 720px;
    border: 0px; /* 1px solid #0000FF; */
}

/* headings */

h1 {
    font-family: LatinModernSans10Bold, 'Lucida Sans', Arial, Helvetica, sans-serif;
    font-size: 2.6em;
    margin: 0px 0px 10px -2px; /* space below and adjust space to the left */
    padding: 0px;
    color: #000000;
}

h2 {
    font-family: LatinModernSans10Regular, 'Lucida Sans', Arial, Helvetica, sans-serif;
    font-weight: normal; /* just for subtitle */
    font-size: 1.3em;
    margin: 0px;
    padding: 0px;
    color: #000;
}

h3 {
    font-family: LatinModernSans10Bold, 'Lucida Sans', Arial, Helvetica, sans-serif;
    font-size: 1.6em;
    margin: 0px 0px 10px -2px; /* space below and adjust space to the left */
    padding: 0px;
    color: #000000;
}

.h3sub { /* small sub-heading that goes along with an h3 heading */
    font-family: LatinModernSans10Regular, 'Lucida Sans', Arial, Helvetica, sans-serif;
    font-size: 0.7em; /* is measured relative to h3 since this class is used within <h3></h3> */
    margin: 0px;
    padding: 0px;
    color: #000000;
}

h4 {
    font-family: LatinModernSans10Regular, 'Lucida Sans', Arial, Helvetica, sans-serif;
    font-size: 1.15em;
    margin: 0.3em 0em 0.3em 0em;
    padding: 0px;
    color: #000000;
}

/* links */

a {
    /* text-decoration: none; */
    font-family: inherit;
    /* color: inherit; */
}

a:hover {
    color: #99834D;
}

/* navigation */

.navi {
    list-style-type: none;
    margin: 32px 0px 36px 0px; /* space above and below */
    padding: 0px;
}

.navi li {
    display: inline;
    padding: 0px 18px 0px 18px; /* space to the left and right */
    border-right: 1px solid #5C6976; /* vertical lines on the right side */
}

.navi li:last-child {
    border-right: none; /* for the right-most navi element do not use a vertical line */
}

.navi li a, .aslink {
    font-family: LatinModernSans10Regular, 'Lucida Sans', Arial, Helvetica, sans-serif;
    font-size: 1.1em;
    text-decoration: none;
    color: #5C6976;
}

.navi li a:hover {
    color: #99834D;
}

/* spaces */

.space05 {
    margin: 0.5em 0em 0em 0em;
}

.space075 {
    margin: 0.75em 0em 0em 0em;
}

.space1 {
    margin: 1em 0em 0em 0em;
}

.space15 {
    margin: 1.5em 0em 0em 0em;
}

/* content */

.content{
    position: relative; /* to be able to position logos abolutely to the content container */
    width: 720px;
    border: 0px; /* 1px solid #00FF00; */
    font-size: 1em;
}

p {
    margin: 0.3em 0em 0em 0em; /* distance before paragraph */
}

.p {
    margin: 0em 0em 0.3em 0em; /* distance after (certain) paragraphs, e.g., for teaching */
}

img {
    border:none; /* removes border around images that are links */
}

/* for this to work better, also manually use &shy; at points where hypenation is allowed */

.justify {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    -webkit-hyphenate-character: "\2010";
    -webkit-hyphenate-limit-after: 1;
    -webkit-hyphenate-limit-before: 3;
    -moz-hyphens: auto;
}

/* box for content, see http://sass-lang.com/stylesheets/application.css */

.box {
    background-color: #FFF5EE;
    padding: 0.5em 0.8em 0.5em 0.8em;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    -khtml-border-radius: 8px;
    border-radius: 8px;
    display: inline-block;
    -moz-box-orient: vertical;
    border-style: solid;
    border-width: 1px;
    border-color: #5C6976;
}

/* small image */

.adobe_reader {
    width: 28px;
    margin: 0px 4px 0px 0px;
    vertical-align: -1ex;
}

/* footer */

.footer {
    font-family: LatinModernSans10Regular, 'Lucida Sans', Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    width: 720px;
    margin: 36px 0px 0px 0px; /* distance from text */
    color: #5C6976;
}

.footer_left {
    float: left;
}

.footer_right {
    float: right;
}


/* about %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

/* image */

.img_about {
    position: relative;
    width: 500px;
    left: -124px;
    margin: 0px -100px 48px 0px; /* space to the right and below */
    float: left;
}

/* logos */

.logo_uni {
    position: absolute;
    width: 240px;
    bottom: -2px; /* make baseline corresponding to willis logo */
    right: 0px;
}

.logo_willis {
    position: absolute;
    width: 110px;
    bottom: 0px;
    right: 280px; /* width eth logo + margin */
}


/* contact %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

.contact {
    margin: 0.5em 0em 1em 0em;
    padding: 18px;
    width: 600px;
}

.logo_uni_contact {
    width: 240px;
}

/* vCard */

.vcard {
    width: 36px;
    margin: 0px 8px 0px 0px;
    vertical-align: -1.6ex;
}

/* google maps */

.google_maps {
    width: 640px;
    height: 400px;
    margin: 0.8em 0em 0em 0em;
}

.google_maps_link {
    margin: 0.5em 0em 0em 0em;
}


/* %%% research %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

/* bullet point lists */

ul {
    list-style-type: square;
    margin: 0.5em 0em 0em 0em; /* space between text and first element */
    padding: 0em 0em 0em 1.8em; /* indent from left */
}

ul li {
    margin: 0.3em 0em 0em 0em; /* space between elements */
}

/* ordered lists, see http://stackoverflow.com/questions/11195400/how-to-adjust-items-in-an-ordered-list-without-affecting-sub-lists */
ol {
    list-style-type: none;
    padding: 0em; /* indent from left */
    counter-reset:mycounter;
}

ol > li:before {
    content: counter(mycounter) ") "; /* define layout of label */
    counter-increment:mycounter;
}

ol ul {
    padding: 0em 0em 0em 2.4em; /* indent from left */
}

/* two column layouts */

.l1 { /* left */
	width: 08%;
	float: left;
}

.r1 { /* right */
	width: 92%;
	padding: 0em 0em 0.3em 0em; /* space between the entries */
	float: right;
}

.l2 { /* left */
    width: 20%;
    float: left;
}

.r2 { /* right */
    width: 80%;
    padding: 0em 0em 0.3em 0em; /* space between the entries */
    float: right;
}

.l3 { /* left */
    width: 50%;
    float: left;
}

.r3 { /* right */
    width: 50%;
    padding: 0em 0em 0.3em 0em; /* space between the entries */
    float: right;
}

/* teaser */

.teaser {
    width: 720px;
}

/* R logo */

.rlogo {
    width: 120px;
    position: relative; /* position relative to its normal position */
    top: -36px; /* move upwards */
    float: right;
}

/* package link */

.package_link {
    margin: 0.3em 0em 0em 0em; /* positioning of the box */
}

/* LaTeX symbol, see http://edward.oconnor.cx/2007/08/tex-poshlet */

.latex sub, .tex sub { /* subscript E */
    text-transform:uppercase;
    font-size: 1em;
    vertical-align: -0.5ex;
    margin-left: -0.1667em;
    margin-right: -0.125em;
}

.latex sup { /* superscript A */
    text-transform:uppercase;
    font-size: 0.85em;
    vertical-align: 0.15em;
    margin-left: -0.36em;
    margin-right: -0.15em;
}


/* %%% teaching %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

/* image */

.img_teaching {
    position: absolute; /* float: right; creates the problem of having two right-floating objects ... */
    width: 440px;
    left: 540px;
}

/* %%% QRM %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

.logo_uni_qrm {
/*    position: relative; */
    width: 240px;
    left: 480px;
}