/* @import "font/font.css"; */

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    min-height: 100vh;
    font-family: /* "Source Serif Pro",*/ "Helvetica Neue","Helvetica","Arial",sans-serif;
    font-size: 10pt;
}

a:link { color: rgb(0, 26, 89); }
a:visited { color: rgb(0, 26, 89); }

.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

/* Float area, which can hold floating elements within div#content and auto-clears following elements */
div.content-floatarea {
    overflow:		hidden; /* see http://www.quirksmode.org/css/clearing.html */
    width:			100%;
}

div#i4logo {
    width: 100%;
    text-align: center;
    padding: 0px 0pt;
    padding-top: 42px;
}

div.univis_header {
    background-color: rgb(204, 204, 204);
    top:0px;
    height: 30px;
    border-bottom: 2px solid rgb(2, 37, 61);
    z-index: 99;
}

div.techfak_header {
    background-color: rgb(224, 229, 240);
    top: 32px;
    height: 50px;
    border-bottom: 2px solid rgb(2, 37, 61);
    z-index: 99;
}

#logo_univis { position:relative; left: 0pt;}
#logo_fau { position: relative; left: 0pt; }
#logo_techfak { position: relative; left: 0pt; }
#logo_inf { position: absolute; right:50px;}

#refbar {
    background-color: rgb(187, 204, 238);
    padding-left: 1em;
    border-left: 1pt solid rgb(2, 37, 61);
    border-bottom: 1pt solid rgb(2, 37, 61);
    margin: 0;
}

#refbar .pure-menu-list .pure-menu-link {
    color: #222;
    height: 16pt;
    margin-bottom: 0;
    margin-top: 0;
    padding-top: 2pt;
    padding-bottom: 2pt;
    border: 0pt;
}


#refbar .pure-menu-list .pure-menu-children .pure-menu-link {
    padding-bottom: 5px;
    padding-top: 5px;
    margin: 0;
    border-bottom: 1pt solid rgb(2, 37, 61);
    border-left: 1pt solid rgb(2, 37, 61);
    border-right: 1pt solid rgb(2, 37, 61);
}

#refbar .pure-menu-list .pure-menu-children li:first-child {
    border-top: 1pt solid rgb(2, 37, 61);
}

#refbar .pure-menu-active > .pure-menu-link,
#refbar .pure-menu-link:hover,
#refbar .pure-menu-link:focus {
    background-color: #ccc;
}

#refbar .pure-menu-children .pure-menu-selected {
    background-color: #e1e1e1;
    border-left-color: #3a6daf;
    font-weight: bold;
}


#footer {
    background-color: rgb(187, 204, 238);
    padding-left: 1em;
    height: 28px;
    border-left: 1pt solid rgb(2, 37, 61);
    border-top: 1pt solid rgb(2, 37, 61);
    line-height: 25px;
}


#menu div.univis_header {
    background-color: rgb(204, 204, 204);
    height: 30px;
    border-bottom: 2px solid rgb(2, 37, 61);
    margin-bottom: 5px;
    width: 100%;
    z-index: 99;
}


/*
This is the parent `<div>` that contains the menu and the content area.
*/
#layout {
    position: relative;
    padding-left: 0;
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}
    #layout.active #menu {
        left: 13em;
        width: 13em;
    }

    #layout.active .menu-link {
        left: 13em;
    }
    #main {
        height:auto !important; /* real browsers */
        height:100%; /* IE6: treaded as min-height*/

        min-height:100vh; /* real browsers */
    }

/*
The content `<div>` is where all your content goes.
*/
.content {
    margin: 0;
    padding: 1em;
    max-width: 1250px;
    hyphens: auto;
    -moz-hyphens: auto;

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height: calc(100vh - 32px - 52px - 28px - 28px);

    box-sizing: border-box;
}


/*
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the left side of the page.
*/

#menu {
    color: #000;
    background-color: rgb(242, 242, 242);
    margin-left: -13em; /* "#menu" width */
    width: 13em;
    position: fixed;
    min-height: 100%;
    left: 0;
    bottom: 0;
    height: 100%;
    z-index: 1000; /* so the menu or its navicon stays above all content */
    border-right: 1px solid black;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
    /*
    All anchors inside the menu should be styled like this.
    */
    #menu a {
        color: #222;
        border: none;
        padding: 6px 0 4px 6px;
        border-left: 7px solid transparent;
        font-size:85%;
    }

    /*
    Remove all background/borders, since we are applying them to #menu.
    */
     #menu .pure-menu,
     #menu .pure-menu ul {
        border: none;
        background: transparent;
     }
     #menu li a {
         border-left-color: #CCDCEB;
         padding: 4px 0 4px 6px;
     }
     #menu .pure-menu-item {
         margin-left: 7px;
         display: block;
     }
     #menu .pure-menu-link {
         display:inline;
     }
     #menu .pure-menu-selected {
         background-color: #e1e1e1;
         border-left-color: #3a6daf;
         font-weight: bold;
     }
     #menu .pure-menu li a:hover,
     #menu .pure-menu li a:focus,
     #menu a.pure-menu-heading:focus,
     #menu a.pure-menu-heading:hover {
         background: #ccc;
     }

    /*
    Add that light border to separate items into groups.
    */
    #menu .pure-menu ul,
    #menu .pure-menu .menu-item-divided {
        border-top: 1px solid #333;
    }
        /*
        Change color of the anchor links on hover/focus.
        */
        #menu .pure-menu li a:hover,
        #menu .pure-menu li a:focus {
        }

    /*
    This styles the selected menu item `<li>`.
    */
    #menu .pure-menu-selected,
    #menu .pure-menu-heading {
    }
        /*
        This styles a link within a selected menu item `<li>`.
        */
        #menu .pure-menu-selected a {
            color: #fff;
        }

    /*
    This styles the menu heading.
    */
    #menu .pure-menu-heading {
        font-size: 85%;
        color: #222;
        margin: 0;
        margin-top: 3ex;
        padding-left: 2px;
        padding-bottom: 2px;
        font-weight: bold;
        text-transform: none;
        border-left: 7px solid #3a6daf;
    }

/* -- Dynamic Button For Responsive Menu -------------------------------------*/

/*
The button to open/close the Menu is custom-made and not part of Pure. Here's
how it works:
*/

/*
`.menu-link` represents the responsive menu toggle that shows/hides on
small screens.
*/
.menu-link {
    position: fixed;
    display: block; /* show this only on small screens */
    top: 0;
    left: 0; /* "#menu width" */
    background: #000;
    background: rgba(0,0,0,0.7);
    z-index: 10;
    width: 2em;
    height: auto;
    padding: 1.29em 0.8em;
}

    .menu-link:hover,
    .menu-link:focus {
        background: #000;
    }

    .menu-link span {
        position: relative;
        display: block;
    }

    .menu-link span,
    .menu-link span:before,
    .menu-link span:after {
        background-color: #fff;
        width: 100%;
        height: 0.2em;
        font-size: 10px; /* change this value to increase/decrease button size */

    }

        .menu-link span:before,
        .menu-link span:after {
            position: absolute;
            margin-top: -0.6em;
            content: " ";
        }

        .menu-link span:after {
            margin-top: 0.6em;
        }


/* -- Responsive Styles (Media Queries) ------------------------------------- */

/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 48em) {

    .header,
    .content {
        padding-left: 1em;
        padding-right: 1em;
    }

    #layout {
        padding-left: 13em; /* left col width "#menu" */
        left: 0;
    }
    #menu {
        left: 13em;
    }

    .menu-link {
        position: fixed;
        left: 13em;
        display: none;
    }

    #layout.active .menu-link {
        left: 13em;
    }


    #menu .univis_header,
    #menu .techfak_header {
        display: none;
    }

}

@media (max-width: 48em) {
    /* Only apply this when the window is small. Otherwise, the following
    case results in extra padding on the left:
        * Make the window small.
        * Tap the menu to trigger the active state.
        * Make the window large again.
        */
    #refbar {
        padding-left: 4em;
        direction: rtl;
    }
    #refbar .pure-menu-list {
        direction: ltr;
    }
    #refbar .pure-menu-list .pure-menu-link {
        height: 2.6em;
        line-height: 2.6em;
        box-sizing: border-box;
    }
    .content {
        padding: 1em 1em;
        min-height: calc(100vh - 2.6em - 28px);
    }

    #layout.active {
        position: relative;
        left: 13em;
    }

    #univis_header_large {
        display: none;
    }

    #techfak_header_large {
        display: none;
    }

    div#i4logo {
        padding-top: 5pt;
    }

    /*
      Add transition to containers so they can push in and out.
   */
    #layout,
    #menu,
    .menu-link {
        -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
        -ms-transition: all 0.2s ease-out;
        -o-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
    }




}

.content h1 {
    margin-top:0;
}

/* Level 1 headings are dark blue */
.content h1 {
    color:				#001a59;
    padding-top: 23px;
    padding-bottom: 23px;
}

/* Level 2 headings are dark blue w/ light gray background */
.content h2 {
    color:				#001a59;
    background-color:	#f2f2f2;
}

/* Source Code Highlighing */
.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
pre.sourceCode { border-left: 5px solid #999999; padding-left: 5px; }
code > span.kw { color: #007020; font-weight: bold; }
code > span.dt { color: #902000; }
code > span.dv { color: #40a070; }
code > span.bn { color: #40a070; }
code > span.fl { color: #40a070; }
code > span.ch { color: #4070a0; }
code > span.st { color: #4070a0; }
code > span.co { color: #60a0b0; font-style: italic; }
code > span.ot { color: #007020; }
code > span.al { color: #ff0000; font-weight: bold; }
code > span.fu { color: #06287e; }
code > span.er { color: #ff0000; font-weight: bold; }


/* /People/: Area of floating people */
div.people-imagearea {
	float:			left;
	max-width:		850px;
}
div.people-imagearea div.people-picandname {
	float:			left;
	text-align:		center;
	height:			170px;
	width: 			150px;
	margin:			0 0.5em 0.5em .5em;
}
div.people-imagearea div.people-picandname div{
	text-align:		center;
	vertical-align:		bottom;
	display:		table-cell;
	height:			170px;
	width: 			150px;
}
div.people-imagearea div.people-picandname div.people-name {
    text-align:		center;
    hyphens:            no;
    max-width:		150px;
    height:             auto;
}
div.people-imagearea div img {
	margin-top:		.8em;
	height:			100px;
}
span.people-remotetag {
	color:			red;
	font-size:		8pt;
}
span.people-dagger {
	font-size:		8pt;
	vertical-align:		text-top;
}
ul#people-alumnilist {
/*	list-style:		none;*/
}
ul#people-alumnilist ul {
	list-style:		none;
}

/* people-imagearea-big/people-picandname-big: Variant of people-imagearea with larger photos and less spacing */
div.people-imagearea-big {
	float:			left;
	max-width:		1200px;
}
div.people-imagearea-big div.people-picandname-big {
	float:			left;
	text-align:		center;
	height:			220px; /* height of name+image */
	width: 			170px; /* horizontal space for name+image */
	margin:			0 0.5em 0.5em .5em;
}
div.people-imagearea-big div.people-picandname-big div {
	text-align:		center;
	white-space:		nowrap;
	vertical-align:		bottom;
	display:		table-cell;
	height:			220px; /* repeat height of outer div here */
	width: 			170px; /* repeat height of outer div here */
}
div.people-imagearea-big div img {
	margin-top:		.8em;
	height:			150px;
}

/* Nicer look for time-tables imported from UnivIS (need to be explicitly put
 * into a div.univis-timetable!) */

div.univis-timetable>table {
    border: 1px solid black;
    margin: 2px;
    padding: 5px;
    empty-cells: hide;
}

div.univis-timetable>table th {
    padding: 5px;
    color:              #012e5c;
    background-color:   #F2F2F2;
    border: 0 !important;
}

/* Style for semester schedule table */
div.semester-table {
    border: 1px solid black;
    margin: 2px;
    padding: 5px;
    text-align: center;
}

div.semester-table td,th {
    padding: 5px 10px;
}

div.semester-table th {
    border-right: 2px solid white;
    border-left: 2px solid white;
    color: #012e5c;
    background-color: #F2F2F2;
}

div.semester-table tr.date td {
    border-top: 2px solid #f2f2f2;
    font-size: 90%;
}

div.semester-table tr.nodelimiter td {
    border-top: 0px !important;
}

div.semester-table td.tentative {
    color: #777;
    font-size: small;
}

div.semester-table td.topic {
    font-size: 85%%;
    text-align: left;
    border: 2px solid white !important;
    background-color: #f2f2f2;
}

div.semester-table span.topic {
    font-style: italic;
}

div.semester-table td.ferien {
    background-color:#ccffff;
    font-style:italic;
}

div.semester-table td.abgabe, div.semester-table span.abgabe {
    background-color:#ffcc99;
}

/* Style for Material Tables */
table.material {
    border: 1px solid black;
    padding: 0.2em;
}

table.material th {
    margin: 0.2em;
    padding: 0.5em;
    color: #001a59;
    background-color: #f2f2f2;
}

table.material td {
    margin: 0.2em;
    padding: 0.5em;
}

/* Requires CSS3 for alternating row backgrounds; Fallback to
   light gray if not recongnized by old browsers */
table.material tr {
    background-color: #f2f2f2;
}

table.material tr:nth-child(even) {
    background-color: #fff;
}

/* Highlighting for special messages */

.highlight_new {
    padding: 0.2em;
    background-color: #ccffcc;
}

.highlight_warning {
    padding: 0.2em;
    background-color: #ffcccc;
}