@import url(https://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic);
@import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700);

@charset "utf-8";

* { font-family: Cantarell, serif;}
tt,pre,textarea.tty,code,address { font-family: Inconsolata, monospace }

html { 
    background-image: url(brp-initials-only-background.svg);
    background-attachment: fixed;
    background-size: cover;
    background-color: #420080;
    background-repeat: both;
}

body { 
    background-color: #dddddddd;
    color: #222; 
    max-width: 56rem;
    min-width: 16rem;
    margin: auto;
    padding: 1rem 2rem 6rem 1rem;
}

body>* { 
    margin-left: 6rem;
    transition: 1s;
}

h1 { 
    padding: 1rem; 
    color: #f0f; 
    background-color: #420080;
    margin: 0;
    transform: rotate(0deg) translate(0,0);
}

h2 {
    padding: 1ex;
    margin-top: 2rem;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    color: #0ff; 
    background-color: #420080;
    text-align: left;
    transform: rotate(0deg) translate(0,0);
}

section>h2 {
    border-radius: 1ex; 
}

h3 { 
    margin-left: 0; 
    font-style: italic; 
    font-weight: normal; 
    color: #420080;
}

section { text-align: justify; margin-bottom: 4rem; }

section>h3 { margin-left: 0 }


dt { color: #420080; font-weight: bold; }

h4 { 
    display: block;
    font-weight: bold; 
    color: #420080;
    margin: 3rem 0 0 0;
}

h5 { 
    color: #420080;
}

small { 
    font-style: italic; 
    color: #666; 
}

small:hover {
    color: #222;
}

.cv>h4+p>small:first-child { 
    padding-right: 1rem; 
    display: inline-block; 
}

p { 
    text-indent: 1rem; 
    text-align: justify;
    margin-top: 0; 
    margin-bottom: 0;
    padding-top: 0; 
    padding-bottom: 0;
}
p:first-child {
    text-indent: 0;
}

dfn { 
    border: 1px dotted #99c; 
}

.inclusion { 
    font-size: 2.25rem;
    padding-top: 1rem;
    padding-left: -1ex; 
    padding-right: -1ex;
    margin: 0;
    font-weight: light;
    color: #420080;
}

video { 
    background-color: #ddd; 
    border: 1pt solid #bbb;
    padding: 1rem;
    border-radius: 1ex;
    margin-left: auto;
    margin-right: auto;
}

blockquote { 
    font-size: smaller; 
    background-color: #ddd; 
    border: 1pt solid #bbb;
    padding: .25rem;
    border-radius: 1rem;
}

blockquote>em {
    display: block;
    right: 0;
    margin-left: 50%;
}

#subhead-table {
    margin-left: 1rem; 
    margin-top: 2rem;
}

#subhead-alt {
    display: none;
}

#portrait {
    height: 50vh;
    margin-top: 0;
    margin-left: 0;
    margin-right: auto;
    margin-bottom: 0;
    position: fixed;
    z-index: -1;
    top: 1em;
    left: 1em;
}

#initials {
    position: fixed;
    height: 4rem;
    width: 6rem;
    bottom: 0;
    right: 0;
    z-index: 1000;
}

nav#main-nav {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 5rem;
    margin: 0; 
    padding: 0;
    background-color: #420080;
}

nav#main-nav>ul,nav#main-nav>ul>li {
    display: block; 
    margin: 0; 
    padding: 0;
}

#nascar { 
    display: block; 
    width: 225px;
    background-color: #420080;
}
#nascar>li { 
    display: block; 
    margin: 0; 
    padding: 0;
}

nav#main-nav a:link,nav#main-nav a:visited,#nascar>li>a:link,#nascar>li>a:visited
                     { 
                         display: block; 
                         color: #0ff;
                         text-decoration: none;
                         padding: 4pt;
                     }

nav#main-nav a:hover,#nascar>li>a:hover { color: white; }


@media screen and (min-width: 30rem) and (max-width: 65rem) {
    body { 
        margin-left: 7rem; 
        margin-right: 1rem
    }
}

@media(max-width: 30rem) {
    nav#main-nav { 
        position: relative; 
        top: 0; 
        left: 0; 
        width: auto; 
        margin: 0;
        padding-top: 0;
        padding-left: 2rem;
        padding-right: 2rem;
        padding-bottom: 0;
        background-color: #420080;
    }
    nav#main-nav>ul, nav#main-nav>ul>li { 
	display: inline; 
	margin: 0; 
	padding: 0; 
    }
    nav#main-nav>ul>li>a:link,nav#main-nav>ul>li>a:visited { 
        display: inline-block; 
        width: 4rem;
        margin: 0;
        height: 100%;
    }
    video,iframe {
        width: 100%;
        padding: 0;
        margin: 0;
    }
    blockquote {
        margin: 0;
        padding: 1ex;
        border-top: 1pt solid #420080;
        border-bottom: 1pt solid #420080;
        border-radius: 0;
	page-break-inside: avoid;
    }
}

@media(max-width: 40rem) {
    #subhead-table { 
        display: none; 
    }
    #subhead-alt { 
        display: block; 
    }
    body>* {
	margin-left: 1rem;
    }
    #initials {
	position: relative;
	align: right;
	top: 0;
	left: 75%;
    }
}


}


@media screen and (max-width: 25rem) {
    p { text-align: left }
}
                                     

@media screen and (max-width: 30rem) {
    body>* { 
        margin-left: 1cm;
    }
    p {
        margin-right: .5rem;
      }
    body { padding: 0; width: 100%; height: 100%; }
    body>h1,body>h2,body>h3 { margin: 0 }
    body>section>h3 { 
        margin-left: 0;
    }
    blockquote { 
        margin-left: 1rem; 
        margin-right: 0
    }
    body>nav#main-nav { margin: 0 }
}


@media print {
    * { 
        background: white !important; 
        color: black;
    }
    html, body { 
        margin: 0; 
        padding: 0;
        background-image: none;
    }
    body { 
        font-size: 10.5pt;
	margin-top: 4rem;
        orphans: 3; 
        widows: 2;
    }
    small { 
        font-size: .8em; 
    }
    big, h1 { 
        font-size: 1.5em;
    }
    h2,section>h3,h3 { 
        text-decoration: underline;
        font-size: 1.18rem;
    }
    h1+h2 {
        text-decoration: none
    }
    body>*, section { 
        margin-left: 6rem;
    }
    h1,h2,h3,h3,section>h3 { 
        margin-left: 0
    }
    #subhead-table {
        border: 1pt solid black;
        border-radius: 1rem;
        padding-left: 2rem;
        padding-right: 2rem;
        width: auto;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1rem;
    }
    nav#main-nav { 
        display: none; 
    }
    dfn { 
        border: none;
        text-decoration: none !important;
        font-style: normal; 
    }
    blockquote { 
        border: 2pt solid black;
        background-color: #ddd;
    }
    blockquote>em {
        text-decoration: none;
        font-style: italic;
    }
    #portrait {
	position: fixed;
	top: auto;
	bottom: 0;
	left: 0;
	width: 10rem;
	z-index: 1;
	filter: grayscale(100%) brightness(400%);
	margin: 0;
	padding: 0;
	opacity: .25;
    }
    #initials {
	filter: grayscale(100%) contrast(100%);
	background-color: transparent !important;
    }
    dfn:after, img:after {
        float: footnote;
        content: " (" attr(title) ") ";
        font-size: 7pt;
    }
    a:link, a:visited { 
        text-decoration: none;
        color: black !important;
    }
    h1 { 
	position: fixed; 
	top: 0;
	left: 0;
	z-index: 200;
	margin: 0;
	padding: 1rem;
	transform: rotate(-90deg) translate(-50%,-6.25rem);
	font-weight: 999;
	color: black;
	border-radius: 0 3rem 0 0 ;
	border-width: 1pt 1pt 0 0;
	border-color: black;
	background-color: transparent !important;
    }
    h1+h2 { 
	position: fixed; 
	top: 1.25rem;
	left: 6rem;
	z-index: 200;
	margin: 0;
	padding: 1rem;
	transform: rotate(-90deg) translate(-50%,-6.25rem);
	font-weight: 999;
	color: #333;
	border: 0;
	background-color: transparent !important;
    }
    #secret-nav { 
	display: none; 
    }
    h2, section>h3, h3 { 
        font-style: normal; 
        font-weight: bold;
        margin-top: 1rem;
        margin-bottom: 0;
        margin-right: 0;
        margin-left: 0;
        page-break-after: avoid;
        color: black;
        padding: 0;
    }
    h4 { 
        font-weight: normal; 
        font-size: 10.5pt; 
        color: black; 
        padding: 0; 
        margin-top: 0;
        margin-left: 0;
        page-break-after: avoid;
        text-decoration: underline;
        width: 100%;
    }
    .cv>h4, .cv>h4+p { 
        display: inline; 
    } 
    section { 
        margin-top: 3rem; 
        padding-top: 2rem;
        border-top: 1pt solid black;
	page-break-before: auto;
	page-break-inside: avoid;
    }
    br.print-break { 
	page-break-before: always; 
	break-before: always; 
    }
    blockquote {
	page-break-inside: never;
	break-inside: never;
    }
    section.cv>section {
        border: 2pt dotted midnight;
    }
    dl { 
        margin: 0; 
        padding: 0
    }
    dt { 
        color: black; 
        font-weight: bold;
        display: inline;
        margin: 0; 
        padding: 0;     
    }
    .cv>h4:before { 
        content: '\a\a'; 
        white-space: pre; 
    }
    dd+dt:before { 
        content: '\a\a'; 
        white-space: pre; 
    }
    dt+dd:before { 
        content: " — "
    }
    textarea.tty { 
	white-space: normal; 
	overflow-x: wrap;
	border: 0;
	height: auto;
	background-color: white;
    }
    dd { 
        display: inline;
        margin: 0; 
        padding: 0;
    }
    strong, em {
        font-weight: normal;
        text-decoration: underline;
    }
    a:link:after, a:visited:after { 
        content: " ("
        attr(title)
        " at: "
        attr(href)
        " )"
        ;
	text-decoration: none;
        font-size: 7pt;
    }
    a:link[href^="mailto:"]:after, a:visited[href^="mailto:"]:after, 
    address>a:link:after, address>a:visited:after {
        content: " (" attr(title) ") ";
        font-size: 7pt;
	text-decoration: none;
    }
    video, iframe { 
        display: none;
    }
    video:after, iframe:after {
	content: "(If you were looking at this online, there'd be a video here.)";	
	font-size: 12pt; 
	font-family: Cantarell, serif;
    }
    #nascar-title,#nascar { 
        display: none
    }
    #history { 
        font-size: 9pt; 
    }
    @top-left {
        content: "Bruce-Robert Fenn Pocock";
    }
    @top-right {
        content: "Résumé / CV"
    }
    @top-center: {
        content: ""
    }
    #eol { 
	display: none
    }
    .inclusion { color: black; }
}


/* Animated fade-in effect */

section {
    animation: fadein 5s once;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


h1,h2,nav#main-nav,nascar {
    animation: fadein-bg 6s once;
}

@keyframes fadein-bg {
    from { background-color: transparent; }
    to   { background-image: #420080; }
}


textarea.tty {
    display: block; 
    border: 2pt solid black; 
    background: ivory; 
    color: black;
    padding: .5em;
    width: 100%;
    height: 8em;
    overflow-x: wrap;
    overflow-wrap: break-word;
}

#splainer {
    position: fixed; 
    margin-left: 25vw; 
    margin-right: 25vw; 
    width: 50vw; 
    margin-top: 25vh; 
    height: auto; 
    border: 2pt solid black; 
    background-color: rgba(255, 255, 255, 0.8); 
    vertical-align: middle; 
    opacity: 0; 
    transition: all 0.75s ease 0s;
    top: 0;
    left: 0;
    padding: 1.5rem;
}

body.short h1,body.short h2,body.short h3,body.short h4,body.short h5,body.short h6 {
    color: #420080;
    background-color: transparent;
    margin-top: .5rem;
    padding: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 1rem;
}

body.short section {
    margin-bottom: 0;
}

@media print {
    body.short #portrait, body.short #initials
    { 
	display: none; 
    }
    body.short h1, body.short h1+h2 {
	display: inline-block; 
	transform: none; 
	position: relative; 
	top: 0; 
	left: 0;
    }
    body.short big { 
	font-size: 1.2em; 
    }
}

#print-preview-only { 
    display: none; 
    position: fixed;
    top: 0;
    right: 0;
    padding: .5rem;
}

#print-preview-only>button {
    border: 2pt solid black;
    background-color: #420080 !important;
    padding: .5rem;
    font-weight: bold;
    color: white !important;
    border-radius: .5em;
    margin-bottom: .5rem;
    cursor: pointer;
}