/* web fonts */
 
/* @import url(http://fonts.googleapis.com/css?family=Ubuntu+Condensed);  */

@font-face {
    font-family: "Ubuntu Condensed";
    src: url("../fonts/UbuntuCondensed-Regular.ttf")
}


/* navigation */

@-o-navigation {
    nav-up: -o-link-rel(index);
}

/* first, describe styling for non-reader devices */
        
html, body, div, h1, h2, h3, p, blockquote, ul, ol, li, pre, article, section, aside, hgroup, nav, header, footer, figure, figcaption { 
    margin: 0; padding: 0 }

li { margin-left: 1.5em }

article, section, aside, hgroup, nav, header, footer, figure, figcaption {
    display: block;
}

body { 
    font: 14px/1.4 "helvetica neue", "helvetica", "arial", sans-serif; 
    max-width: 1300px; 
}

h1, h2, h3, h4 { 
    font-family: Ubuntu Condensed, sans-serif; 
    font-weight: normal;
    break-inside: avoid; 
    break-after: avoid; 
    line-height: 1.2;
}
    
h2, h3, h4 { color: #b50f16; }

h1 { font-size: 4.5em; margin: 0.4em 0 0.2em; }
h2 { font-size: 2.3em; margin: 0.5em 0 0.3em 0; }
h3 { font-size: 1.6em; margin: 0.5em 0 0.3em 0; }
h4 { font-size: 1.3em; margin: 0.4em 0 0.2em; }
    
p, li {
    line-height: 1.4em; 
}
    
p + p, figure + p { text-indent: 2em; }
    
pre { 
    white-space: pre-wrap;
    padding: 1em; margin: 0.5em 0; 
    background-color: #ccc;
    background-image: -ms-linear-gradient(left, #bbb, #ddd);
    background-image: -moz-linear-gradient(left, #bbb, #ddd);
    background-image: -o-linear-gradient(left, #bbb, #ddd);
    background-image: -webkit-linear-gradient(left, #bbb, #ddd);
    background-image: linear-gradient(left, #bbb, #ddd); 
    widows: 3; orphans: 3; 
}
    
p code { color: #b50f16; }
    
a, a:visited { color: #cc0f16; text-decoration: none; }
    
a:focus, a:hover { text-decoration: none; }
    
a:active { color: #cccccc; }

figure.top, figure.bottom { float: right; padding-left: 1em }
        
figcaption { text-align: center; break-before: avoid; font-size: 0.8em }
        
img { border: 1px solid black; max-width: 100%; }
    
#logo {
    height: 12%;
    width: 100%;
    display: block;
    margin: 0 auto;
    background-image: url(../images/opera-logo.svgz);
}
    
article { padding: 1em 2em 3em 14em; }
        
aside { 
    position: absolute; 
    top: 0; left; 0; width: 12em; 
    bottom: 0; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    padding: 1em; 
    background: #242524;
    color: white; 
    text-align: center; 
    background-image: -ms-linear-gradient(left, #222, #aaa);
    background-image: -moz-linear-gradient(left, #222, #aaa);
    background-image: -o-linear-gradient(top, #222, #aaa);
    background-image: -webkit-linear-gradient(top, #222, #aaa);
    background-image: linear-gradient(top, #222, #aaa); 
}

aside h2 { 
    color: white; 
    text-shadow: 2px 2px 2px black; 
}

aside li, aside ul { 
    list-style-type: none; margin: 0; padding: 0;
}

aside a, aside a:visited { color: white; }

p.test { display: none }    

.authors { padding: 2em 0 }

.scrolled { display: block; text-align: center; column-span: all;  }
.paged { display: none }

/* now describe special styling for Opera Reader */

@media -o-paged {

    .paged { display: block; text-align: center; column-span: all;  }
    .scrolled { display: none }

    .hint { display: block;  }
    
    html {
        orphans: 1; widows: 1;
    }

    article { 
        position: absolute;
        top: 1em;
        bottom: 1em;
        left: 14em;
        right: 2em;
        overflow: -o-paged-x;
        padding: 0; margin: 0;
        columns: 20em;
        column-gap: 2em;
        column-fill: auto;
    }

    article h1 {
        column-span: all;
	margin: 0.3em 0 0.3em 0;
    }
    
    .cols p:first-child, h2 + p {
        margin-top: 0;
    }

    figure { padding: 0 !important }

    figure.top {
        float: -o-top;
	margin: 0 0 2em;
    }

    figure.inline {
	margin: 2em 0;
    }

    figure.bottom {
        float: -o-bottom;
	margin: 2em 0 0;
    }

    figure.inline { width: 100%; float: none }

    figure img {
	width: 100%;
    }
}

@media (max-width: 600px) {
    article h1 { font-size: 3em; }
}


            
@media (max-width: 400px) {
    html {
	overflow: -o-paged-x;
	height: 100%;
    }

    aside {
	position: static;
	width: auto;
	text-align: left;
    }
    aside h2, aside li {
	display: inline;
    }
    article {
	position: static;
	width: auto;
	overflow: visible;
	padding: 5px;
    }
    article h1 {
	font-size: 3em;
    }
    article img {
	width: 100%;
    }
}