/* author: Tim Weyrich
   Image shadows modded from Craig Donner's home page.

   2013-04-04: realised that latest version is converging toward
   Szymon Rusinkiewicz's CSS (great minds think alike ;), so decided
   to plagiarise remaining differences.
 */

/* switch-over points for media queries:
 *
 * Height of menubar, assuming |Home|People|Publications|Contact|
 * (24 px per line)
 *  width < 530: menu bar no longer one line, but two
 *  width < 363: menu bar becomes three lines high
 *  width < 321: menu bar becomes four lines high
 *
 *  width < 750: shave off horizontal spacing
 *
 *  width < 848 (used to be 721): change paperpageteaser and paperpagetitle to narrow layout
 *
 *  width < 445: bibliography year becomes smaller
 *  width < 371: bibliography year becomes even smaller
 *
 *  width < 553: people page switches to single-column
 */


/* unused: */
/*@import url("../fonts/fagono-20130405-052815/FagoNoCustom-tw.css");*/
/*@import url("../fonts/fontin-20130405-080618/FontinCustom.css");*/

/* current production version: */
/* @import url("../fonts/fagono-20130404-tw/FagoNoCustom.css");

/* @import url("../fonts/kievit/Conv_KievitOT/stylesheet.css"); */
/* --- BEGIN COPY-AND-PASTE ----------------------------------------------------------------- */
/* (copied from ../fonts/kievit/Conv_KievitOT/stylesheet.css, with paths suitably replaced, to
 * improve load times; also, only weights "normal" and "500" are retained, as others not used.)
 */
/** Generated by FG; then edited for proper weights **/

/* @font-face {
    font-family: 'Conv_KievitOT';
    src: url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-Bold.eot');
    src: local('☺'), url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-Bold.woff') format('woff'), url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-Bold.ttf') format('truetype'), url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-Bold.svg') format('svg');
    font-weight: bold;
    font-style: normal;
} */

/* @font-face {
    font-family: 'Conv_KievitOT';
    src: url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-BoldItalic.eot');
    src: local('☺'), url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-BoldItalic.woff') format('woff'), url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-BoldItalic.ttf') format('truetype'), url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-BoldItalic.svg') format('svg');
    font-weight: bold;
    font-style: italic;
} */

@font-face {
    font-family: 'Conv_KievitOT';
    src: url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-Italic.eot');
    src: local('☺'), url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-Italic.woff') format('woff'), url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-Italic.ttf') format('truetype'), url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-Italic.svg') format('svg');
    font-weight: normal;
    font-style: italic;
}

/* @font-face {
    font-family: 'Conv_KievitOT';
    src: url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-Light.eot');
    src: local('☺'), url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-Light.woff') format('woff'), url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-Light.ttf') format('truetype'), url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-Light.svg') format('svg');
    font-weight: 300;
    font-style: normal;
} */

/* @font-face {
    font-family: 'Conv_KievitOT';
    src: url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-LightItalic.eot');
    src: local('☺'), url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-LightItalic.woff') format('woff'), url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-LightItalic.ttf') format('truetype'), url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-LightItalic.svg') format('svg');
    font-weight: 300;
    font-style: italic;
} */

@font-face {
    font-family: 'Conv_KievitOT';
    src: url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-Medium.eot');
    src: local('☺'), url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-Medium.woff') format('woff'), url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-Medium.ttf') format('truetype'), url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-Medium.svg') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Conv_KievitOT';
    src: url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-MediumItalic.eot');
    src: local('☺'), url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-MediumItalic.woff') format('woff'), url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-MediumItalic.ttf') format('truetype'), url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-MediumItalic.svg') format('svg');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Conv_KievitOT';
    src: url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-Regular.eot');
    src: local('☺'), url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-Regular.woff') format('woff'), url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-Regular.ttf') format('truetype'), url('../fonts/kievit/Conv_KievitOT/fonts/KievitOT-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* --- END COPY-AND-PASTE ----------------------------------------------------------------- */


/* Remove all margins/padding and start with a clean slate. */
* {
    padding: 0;
    margin: 0;
    font-size: 13px;  /* Fago at 12px renders poorly on Windows */
    line-height: 150%;

    /* last font-family statement counts (this is to hedge against font-face issues) */
    /*font-family: myriad-pro-1, myriad-pro-2, Myriad Pro, Lucida Sans, Lucida Grande, Helvetica, Arial, sans-serif;*/
    
    font-family: Conv_KievitOT !important;
    font-family: Conv_KievitOT, Myriad Pro, Arial, sans-serif;

    -ms-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -o-text-size-adjust: none;
    -webkit-text-size-adjust:none;
}

b /* very rarely used -- try not to use <b> to begin with */ {
    font-weight: 500;
}

body {
    padding: 3em;
}

.twretimg {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.topbanner /* currently not used */ {
    float: right;
    margin: -3em -3em 1em -3em;

    color: red;
    fill: green;
}
.menubar {
    margin: -3em 0 0 -3em;
    padding: 0.5em 1em 0 1em;
                   
    box-sizing: border-box;
    width: 100%;
    position: fixed;
    z-index: 10000;

    /* old version, with UCL logo chopped out of solid bar */
    /*background: url("ucl-alpha-within-gray.png") no-repeat bottom right;*/

    /* new version, with UCL logo simply white on solid, for cleaner scroll effect and consisten shadow */
    background: red url("ucl-white-within-alpha-bottom-right.png") no-repeat bottom right;
    box-shadow: #f4f4f4 0 0 16px;
    moz-box-shadow: #f4f4f4 0 0 16px;
    webkit-box-shadow: #f4f4f4 0 0 16px;
}
.belowmenubarskip {
    height:65px; /* same as (and was) 5em */
}
@media screen and (max-width: 749px) {
    body {
        padding: 1em;
    }
    .topbanner {
        float: right;
        margin: -1em -1em 1em -1em;
    }
    .menubar {
        margin: -1em -1em 0em -1em;
    }
    .belowmenubarskip {
        height:91px;  /* same as 65px + 1em + 1em */
    }
}
@media screen and (max-width: 529px) {
    .belowmenubarskip {
        height:115px;
    }
}
@media screen and (max-width: 362px) {
    .belowmenubarskip {
        height:139px;
    }
}
@media screen and (max-width: 320px) {
    .belowmenubarskip {
        height:163px;
    }
}

#tabbedheader {
    float:left;
    margin-right: 130px;
    width: auto;
    /*font-size: 93%;*/
    font-size: 100%;
    line-height: normal;
    background-color: inherit;
}

#tabbedheader ul {
    margin:0.5em 0 0 0;
    padding:0;
    list-style:none;

    border-style: solid;
    border-width: 0;
    /* display: inline-block;  /* required to have border appear in the right places */
    /* border-width: 0 1px 0 1px; */
    border-color: white;
}

#tabbedheader li {
    float:left;
    /* margin:0px 2px 0px 0px; */
    margin: 0 -1px 0 0;
    padding:0;
    text-indent:0;
    
    border-style: solid;
    border-width: 0 1px 0 1px;
    /*border-color: white;*/
}

#tabbedheader a {
    color:white;
    display:block;
    padding:3px 24px 2px 24px;
    text-decoration: none;
}

#tabbedheader #current {
    color:black;
    background:white;
    padding:3px 24px 2px 24px;
}

.paperpageteaser {
    float: left;
    margin-right: 1.5em;
}

.paperpageteaser img {
	max-width: 100%;
}

.paperpagetitle {
    text-align:right;
}

@media screen and (max-width: 847px) {
    .paperpageteaser {
        width: 100%;
        text-align: center;
        margin: 0 auto 1.25em auto;
    }

    .paperpagetitle {
        text-align:center;
    }
}

small {
    font-size: 11px;  /* Fago at 10px renders poorly on Windows */
}

small a { /* for some reason this is required, lest links are full size */
    font-size: 11px;  /* Fago at 10px renders poorly on Windows */
}

/* Restore other margins */
h1, h2, h3, h4, h5, h6, p, blockquote, dd, li,
form, label, fieldset, address {
    margin: 1ex 0;
}
blockquote {
    margin-left: 1.5em;
    margin-right: 1.5em;
}
ol, ul, dd {
    margin: 1ex 0em 1ex 1.5em;
}
li p /* what for again? */ {
    text-indent: 1.5em;
    margin: 0;
}
ul {
    list-style: square;
    text-indent: 0em;
    margin-left: 2em;
}

/* links */
a {
    color: #55a;
    background: inherit;
    text-decoration: none;
/*    border-bottom: 1px dotted #448;
    border-collapse: collapse;  /* not sure it does anything */
}
a:hover {
    color: #6C757A;
    background: inherit;
    text-decoration: none; /* underline is one pixel above border */
/*   border-bottom: 1px solid #6C757A;
    border-collapse: collapse;  /* not sure it does anything */
}

.nounderline {
    border-bottom: 0px none white;
}

.img-shadow {
    float:left;
    background: url(shadow.png) no-repeat bottom right !important;
    background: url(shadow.gif) no-repeat bottom right;
    margin: 5px -5px 0 5px;
}

.img-shadow img {
    display: block;
    position: relative;
    background-color: #fff;
    margin: -5px 5px 5px -5px;
}

/* domCollapse (http://www.onlinetools.org/tools/domcollapse/) */

.trigger{
    color: #55a;
    cursor:pointer;
}       
.trigger:hover{
    cursor:pointer;
    color: #6C757A;
    /*background:#888;*/
}       
.expanded{
    color: #55a;
    /*background:#ccf;*/
    cursor:pointer;
}
.expanded:hover{
    /*background:#888;*/
    color: #6C757A;
    cursor:pointer;
}
.show{
    position:static;
    display: table;
}
.hide{
    position:absolute;
    left:-999em;
    height:1px;
    width:100px;
    overflow:hidden;
}

/* Top-level blocks */
.blockframe /* block wrapper required to assign net width (incl. padding) */ {
    margin: 3ex 0 0 0;  /* 3ex appears to be 18.72px, i.e., 1ex=6.24px */
    /*  border: 1px solid #d8d8d8; */
    border: 1px solid #e4e4e4;
    border-spacing: 0 0;
    border-collapse: collapse;
    padding: 0.25ex 0.5em;  /* p, h2, table: add another 0.25 horizontally */
    /*   box-shadow: #d8d8d8 2px 2px 8px; */
    /*   moz-box-shadow: #d8d8d8 2px 2px 8px; */
    /*   webkit-box-shadow: #d8d8d8 2px 2px 8px; */
    box-shadow: #f4f4f4 2px 2px 32px;
    moz-box-shadow: #f4f4f4 2px 2px 32px;
    webkit-box-shadow: #f4f4f4 2px 2px 32px;
    overflow:hidden;
}
.block {
    width: 100%;
    text-align: justify;
}
.block table {
    margin: 0.25em 0;
    border-width: 0;
    width: 100%;
}
.block tr {
    background-color: #ffffff;
}
.block tr.t2 {
    background-color: #f8f8f8;
    /*background-color: #fffaf7;*/
    /*background-color: #fffcfa;*/
}

.block h2 {
    font-size: 16px; /*131%;*/  /* Fago Regular: okay at 16px on Windows; Fago Medium only at 17px acceptable on Windows */
    line-height: 150%;
    font-weight: 500;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-left: 0.45em;
    margin-right: 0.45em;
}

.block h3 {
    font-size: 16px; /*131%;*/  /* Fago Regular: okay at 16px on Windows; Fago Medium only at 17px acceptable on Windows */
    line-height: 150%;
    font-weight: normal;
    text-align: left;
    margin-left: 0.4em;
    margin-right: 0.4em;
    margin-bottom: -0.5ex;
}

.block>p, .block>span>p, .block>div>p, .block td {
    padding: 0.25ex 0.5em;
    text-align: justify;
}

.block>p.nopad, .block td.nopad {
    padding: 0;
    text-align: justify;
}

/* ------------------------------------------- */

#erdoes {
    float: right;
    text-transform:none;
    font-weight:normal;
    letter-spacing:0;
    margin-left:1em;
}


.finebuttons {
    display: inline-block;
}

.finebuttons input {
    display: none;
}

.finebuttons label {
    font-size: 11px;
    
    /* "green" will be overridden via PHP; that way I also define hover and selected appearances: */
    border: 1px solid green;  
    border-radius: 2px;
    background-color: inherit;

    padding: 0 4px 0 4px;

/*    -webkit-transition-duration: 0.25s;
    transition-duration: 0.25s;  */
}
.finebuttons label:hover {
    color: white;
}
.finebuttons input[type=radio]:checked + label {
    color: white;
}

.bibtable * {
    line-height: 141%;
    margin-top: 7px;
    margin-bottom: 3px;
}

.bibvenue {
    font-style:italic;
}

.bibauthors {
    font-weight:500;
    /*font-weight:bold;*/
}

.bibstylevariant {
    display:none;
}
.bibstyleselector[value=bibstyleloose] ~ .bibstylevariant[value=bibstyleloose] {
    display:inline;
}
.bibstyleselector[value=bibstylealpha] ~ .bibstylevariant[value=bibstylealpha] {
    display:inline;
}
.bibstyleselector[value=bibstyleacmsiggraph] ~ .bibstylevariant[value=bibstyleacmsiggraph] {
    display:inline;
}
.bibstyleselector[value=bibstyleIEEEtran] ~ .bibstylevariant[value=bibstyleIEEEtran] {
    display:inline;
}

.bibyeartitlewrapper {
    text-align:right; /* needed? */
    overflow:visible;
    width:0px;
    margin-left:auto;
    margin-right:5%;
    height:64px;          /* use 48px for 100px font */
    margin-top:-64px;
    pointer-events: none;
    /* IE11 hack to implement "pointer-events:none": */
    background: none !important;
}
.bibyeartitle {
    float:right;
    text-align:right;
    width:300px;
    height:0px;
    margin-left:-300px;

    color:#f8f8f8;
    letter-spacing: 4px;
    font-size:128px;
    font-weight:500;
}
/* originally using :after, but this made year hover on top */
.bibyeartitleeffect {
    float:right;
    width:300px;
    height:300px;
    margin-left:-300px;
    margin-bottom:-300px;
    background-image: url("bot-fade-96.png");
    background-repeat:repeat-x;
    background-position:0px 80px;   /* use fade 64 and 64px for 100px font */
}

@media screen and (max-width: 444px) {
    .bibyeartitlewrapper {
        margin-right:3.333%;
        height:48px;          /* use 48px for 100px font */
        margin-top:-48px;
    }
    .bibyeartitle {
        float:right;
        text-align:right;
        width:225px;
        height:0px;
        margin-left:-225px;

        letter-spacing: 2px;
        font-size:96px;
    }
    /* originally using :after, but this made year hover on top */
    .bibyeartitleeffect {
        width:225px;
        height:225px;
        margin-left:-225px;
        margin-bottom:-225px;
        background-image: url("bot-fade-64.png");
        background-position:0px 60px;   /* use fade 64 and 64px for 100px font */
    }
}

@media screen and (max-width: 370px) {
    .bibyeartitlewrapper {
        margin-right:2.5%;
        height:32px;          /* use 48px for 100px font */
        margin-top:-32px;
    }
    .bibyeartitle {
        float:right;
        text-align:right;
        width:150px;
        height:0px;
        margin-left:-150px;

        letter-spacing: 2px;
        font-size:64px;
    }
    /* originally using :after, but this made year hover on top */
    .bibyeartitleeffect {
        width:150px;
        height:150px;
        margin-left:-150px;
        margin-bottom:-150px;
        background-image: url("bot-fade-48.png");
        background-position:0px 40px;   /* use fade 64 and 64px for 100px font */
    }
}


.topname {
    text-transform:uppercase;
    letter-spacing:5px;
    font-size:240%;
    font-weight:500;
}

h1 {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 240%;
    font-weight: 500;
}

h1.nopad {
    margin: 0 -6px 0 0;
}

.twlabel {
    font-weight:500;
}

.toplogo {
    float:right;
    padding-top: 24px;
    padding-left: 16px;
    padding-right: 0px;
}

.legend {
    font-size: 11px;  /* "small" would be 10 px, but Fago at that size renders poorly on Windows */
    color:#888;
}

.teammugshot {
    float: left;
    /* display: inline-block; vertical-align: top; */
    text-align: center;
    padding: 0.25ex 0.5em;
}

.teamitem {
    float: left;
    
    margin:0;
    padding: 0.25ex 0.5em;
	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
    width:50%;
    min-width:256px;
	
    list-style:none;
	word-wrap: 	break-word; /* required? */
	/* display: inline-block;  /* required to have border appear in the right places */
}

.teamnameheader {
    font-size: 16px; /*131%;*/  /* Fago Regular: okay at 16px on Windows; Fago Medium only at 17px acceptable on Windows */
}
.teamnameheader a {
    font-size: 16px; /*131%;*/  /* Fago Regular: okay at 16px on Windows; Fago Medium only at 17px acceptable on Windows */
    font-weight: 500;
}

/* Here's what I'd like to achieve. I'd like to set the width 
 * of .teamitem ul to be:
 *  width = 100% - 128px; if (width < 256px) width = 100%;
 * or, in other words:
 *  width = 100%; if (width > 384) width -= 128;
 * that is:
 *  if (100% < 384px) width = 100% else width = 100% - 128px;
 * to complicate matters, "100%" is column width, and number of
 * columns changes with screen width... Is there a way to avoid
 * complex media queries or JavaScript?
 */

.teamitem img {
    float: left;
    margin: 0.25em 0.75em 0.25em 0;
}
.teamitem ul {
    list-style:none;
    margin: 0 1em 0.5em 0;
    padding: 0;
    text-align: left;
}
.teamitem ul:before {
	display: inline-block;
	width:256px;
	height:0;
	content:" ";
}
@media screen and (max-width: 552px) {
    .teamitem {
        width:100%;
    }
}
.teamitem ul li {
    margin:0;
}
.teamitem ul li.teamitemlistlabel {
    margin-top:1ex;
}
.teamitemlabel {
    font-weight:500;
}

code, tt {
    font-family: Consolas, Hack, monospace, Lucida Console, Courier New !important;  /* needed !important to override rule for "*" */
    font-family: Consolas, Hack, monospace, Lucida Console, Courier New;
    /*font-weight: bold; /* has an effect when turned on */
    /*font-weight: normal;*/
}

.codewrapper { 
    background-colour: #eee
}

.bibtexSc {
    font-variant: small-caps;
}

.bibtexIt, .bibtexEm {
    font-style: italic;
}

.assetpreview {
    float: left;
    width: 148px;
    margin-right: 1em;
    text-align: center;
    /*overflow: hidden;*/
}

.assetpreview * { margin-bottom:0; }  /* because .bibtable is still active */

.assetpreview > a > img {
    border-style: solid;
    border-color: magenta; /* colour will be overwritten by colour style */
    border-width: 0 0 1px 0;
}

.assetpreview div {
    width: 148px;
    overflow: hidden;
    
    border-style: solid;
    border-color: magenta; /* colour will be overwritten by colour style */
    border-width: 0 0 1px 0;
}
.assetpreview div > img {
    margin-top: 10px;
    
    box-shadow: #d5d5d5 0 0 10px;
    moz-box-shadow: #d5d5d5 0 0 10px;
    webkit-box-shadow: #d5d5d5 0 0 10px;

    outline: 1px solid rgba(0,0,0,0.1);
    /* unfortunately, minimum unit, so no easy upgrade for retina (which
       would require scaling whole elements); in fact, there is no way to
       make outline look seamless on retina displays: */
    outline-offset: -1px;
}

.assetpreview a {
    text-align: center;
}

/* manualSC currently not use; do enable bold font variant above when using with H1 */
.manualSC {
    font-size: 72%;
    text-transform: uppercase;
    font-weight: 500;
}

h1 .manualSC {
    font-size: 78%;
    font-weight: bold;
}