@font-face{font-family:osw;font-style:normal;font-weight:normal;src:url('../fonts/oswald300.woff') format('woff');}
@font-face{font-family:fnt;font-style:normal;font-weight:normal;src:url('../fonts/openr.woff') format('woff');}
@font-face{font-family:fnt;font-style:normal;font-weight:bold;src:url('../fonts/openb.woff') format('woff');}
@font-face{font-family:fnt;font-style:italic;font-weight:normal;src:url('../fonts/openi.woff') format('woff');}
@font-face{font-family:fnt;font-style:italic;font-weight:bold;src:url('../fonts/openbi.woff') format('woff');}
*{margin:0;padding:0;}
*,*:before,*:after{box-sizing:border-box;}
body{font-family:fnt,sans-serif;font-size:100%;background-color:#fff;}
/*END_SHARED_STYLES*/

summary{font-family:osw,sans-serif; font-size:1.3em; position:relative; display:block; padding:0 0 0 1em; color:#fff; line-height:2; cursor:pointer;margin-bottom:5px;}

h1{font-family:osw,sans-serif;font-size:180%;margin-bottom:1em;text-align:center;}
h2{font-family:osw,sans-serif;font-size:130%;margin-bottom:1em;margin-left:1em;text-align:left;font-weight:lighter;}
h3{font-family:osw,sans-serif;font-size:120%;margin-bottom:.3em;margin-left:1em;text-align:left;font-weight:800;color:#000;}
h5{font-family:osw,sans-serif;text-align:center;font-weight:lighter;font-size:100%;}

/* both of these solutions gets rid of the small amount of white space
under images (which is because <img> is 'inline' - effectively text - by default, and the space is to allow for any descenders). The 'display:block' solution works, but the 'vertical-align' approach is more efficient and has fewer side effects */

.roma {color:#a93d14;}
.britannia {color:#648e67;}
.lusitania {color:#EE7800;}

/*img{display:block;}*/
img{vertical-align:top; width:100%;}
.pic2 {width:30%;margin:0 auto;}
.pic3 {display: block;margin:0 auto;width: 50%;}
/* pic3 is used to center images in interactive diagram labels —— Barnaby*/
.pic4 {display: block;margin:0 auto;width: 40%;}
.pic5 {width:50%;margin:0 auto;}
.pic9 {display: block;margin:0 auto;width: 90%;}

.flexcenter1{display: flex;align-items: center;justify-content: center;}
.flexcenter2{flex-grow: 1;margin-left:1em;height:100%;align-items:center}

#header {position:fixed;width:100%; height:3rem; background-color:#EE5736; margin-bottom:1em;text-align:center;}
#suburani-logo {width:12.5em; padding-left:1em;float:left;}
#signout{position:absolute;top:.5em;right:.5em;display:none;}

button{
	font-family:fnt, sans-serif;
	font-size:1em;
	background-color: #ddd;
	color: #000;
	display: inline-block;
	padding: 2px 5px;
	text-align: center;
	width: auto;
	margin-left: 8px;
	cursor:pointer;
}

button:hover{
	background-color: #000;
	color: #fff;
}

.story{background:#EE5736;}
.civ{background:#011E62;}
.lang{background:#49AFB8;}
.langprac{background:#F7B532;}
.history{background:#4BA151;}
.myth{background:#671679;}
.gallery{background:#018b6f;}

.nogap{margin:1em;}
.smallgap{margin:.3em 1em;}
.gap{margin:.5em 1em;}

#ctrls{position:absolute;top:3rem;left:0;right:0;text-align:center;}
#content{position:absolute;top:4.5rem;left:0;right:0;bottom:0;overflow-y:scroll;}
#activebook{max-width:45.9em;margin:0 auto;padding:.5em;position:relative;}

.latin{color:#aa4016;font-weight:bold;}
.latinb{color:#000;font-weight:bold;}
.latinital{color:#aa4016;font-weight:bold;font-style:italic;}
.latinred{color:#aa4016;font-weight:bold;}
.latinteal{color:#00607d;font-weight:bold;}
.latin-brit{color:#648e67;font-weight:bold;font-style:italic;}
.latin-lus{color:#EE7800;font-weight:bold;font-style:italic;}
.box{margin:.5em auto;max-width:27em;background-color:#eed8d0;padding:.3em 0;}
.box-brit{margin:.5em auto;max-width:27em;background-color:#e0e9e0;padding:.3em 0;}
.box-lus{margin:.5em auto;max-width:27em;background-color:#EE7800;padding:.3em 0;}
.box1{margin:.5em auto;max-width:27em;background-color:#d8e3df;padding:.3em 0;}
.box1-lus{margin:.5em auto;max-width:27em;background-color:#ee7800;padding:.3em 0;}
.box2{margin:.5em auto;max-width:27em;background-color:#aa4016;padding:.3em 0;color:#ffffff;}
.box2 .latin{color:#ffffff;font-weight:bold;}
.box2 h2{color:#ffffff;}
.box2-brit{margin:.5em auto;max-width:27em;background-color:#648e67;padding:.3em 0;color:#ffffff}
.box2-brit .latin{color:#ffffff;font-weight:bold;}
.box2-brit h2{color:#ffffff;}
.box2-lus{margin:.5em auto;max-width:27em;background-color:#EE7800;padding:.3em 0;color:#ffffff}
.box2-lus .latin{color:#ffffff;font-weight:bold;}
.box2-lus h2{color:#ffffff;}
.box3{margin:.5em auto;max-width:27em;background-color:#d4a08b;padding:.3em 0;}
.box3-lus{margin:.5em auto;max-width:27em;background-color:#F0CB9F;padding:.3em 0;}
.box4{margin:.5em auto;max-width:27em;background-color:#f4eddf;padding:.3em 0;}
.box5{margin:1em auto;max-width:32em;border: 2px solid #aa4016;padding:0;background-color:#ffffff}
.box5 .header {background-color:#aa4016;}
.box5 h4{font-family:osw,sans-serif;font-size:100%;margin-bottom:.2em;margin-left:.8em;text-align:left;font-weight:lighter;color:#ffffff;padding: 0.3em;}
.box5 li {margin-left: 0.5em;}
.box5 ol, ul {margin-bottom: 0.3em;}
.box5 p {margin: 0.3em;}
.box5-brit{margin:1em auto;max-width:26em;border: 2px solid #648e67;padding:0;background-color:#ffffff}
.box5-brit .header {background-color:#648e67;}
.box5-brit h4{font-family:osw,sans-serif;font-size:100%;margin-bottom:.2em;margin-left:.8em;text-align:left;font-weight:lighter;color:#ffffff;}
.box5-brit li {margin: .3em 0 .3em .5em;}
.box5-brit ol, ul {margin: 0 1.5em .3em 1.5em;}
.box5-brit p {margin: 0.3em;}
.box5-lus{margin:1em auto;max-width:26em;border: 2px solid #EE7800;padding:0;background-color:#ffffff}
.box5-lus .header {background-color:#EE7800;}
.box5-lus h4{font-family:osw,sans-serif;font-size:100%;margin-bottom:.2em;margin-left:.8em;text-align:left;font-weight:lighter;color:#ffffff;}
.box5-lus li {margin: .3em 0 .3em .5em;}
.box5-lus ol, ul {margin: 0 1.5em .3em 1.5em;}
.box5-lus p {margin: 0.3em;}
.num-qu {max-width: 30em;padding: .5em 1em .5em 2em;}
.box6{margin:.5em auto;max-width:27em;padding:.3em 0;}
.box7{margin:1em auto;max-width:26em;border: 2px solid #d8e3df;padding:0;background-color:#d8e3df;}
.box7 .header {background-color:#648e67;}
.box7 h4{font-family:osw,sans-serif;font-size:100%;margin-bottom:.2em;margin-left:.8em;text-align:left;font-weight:lighter;color:#ffffff;}
.box7 li {margin: .3em 0 .3em .5em;}
.box7 ol, ul {margin: 0 1.5em .3em 1.5em;}
.box7 p {margin: 0.3em;}
.box8 {
	margin-top: -1.25em;
	margin-left: 0.5em;
	padding:0.5em;
	background-color: #aa4016;
	float: left;
	margin-right:0.3em;
}

.box8 h2 {
	margin: 0em auto;
	color: #fff;
}
.box8-brit {
	margin-top: -1.25em;
	margin-left: 0.5em;
	padding:0.5em;
	background-color: #648e67;
	float: left;
	margin-right:0.3em;
}

.box8-brit h2 {
	margin: 0em auto;
	color: #fff;
}
.box8-lus {
	margin-top: -1.25em;
	margin-left: 0.5em;
	padding:0.5em;
	background-color: #EE7800;
	float: left;
	margin-right:0.3em;
}

.box8-lus h2 {
	margin: 0em auto;
	color: #fff;
}
/*For 'QUESTIONS' and 'RESEARCH' boxes ——— Barnaby */
.caption{background-color:#d9d8ff;color:#4d4d5a;font-style:italic;font-size:.9em;padding:.4em 0;margin:.2em 0;text-align:center;}
.caption em{font-style:normal;}
.caption .latin{font-size:1em;color:#4d4d5a;}
.attribution{text-align: right; font-style: italic; margin:1em;}
.attribution em{font-style:normal;}
.question{margin:.5em auto;max-width:27em;padding:.3em 0;}
/* explorer */
.bordered {border-collapse: collapse;}
.bordered td{border: 2px solid #000;border-collapse:collapse;vertical-align: baseline;padding: 0.2em;}
.bordered-grey {border-collapse: collapse;}
.bordered-grey td{border: 2px solid #c1c1c1;border-collapse:collapse;vertical-align: baseline;padding: 0.5em;}
.borderless td {border: none; padding-left: 2em; padding-bottom: 0.5em;}
.borderlessi {font-style: italic;}
.borderless em {font-style: normal;}
.borderless .red {color:#aa4016; font-size:100%;}
.borderless .latin {font-style: normal;}
.nospace td {padding-bottom: 0px;}
.fixwid2{width:2em;display:inline-block;}
.fixwid4{width:4em;display:inline-block;text-align:center;}
.fixwid15{width:15em;}
.wordchoicelist{background-color:#eed8d0;padding:.3em;display:inline-block;margin:1em 0 1em 3em;}

.questionbox{width:70%;margin:1em auto;padding-bottom:.5em;border:1px solid #aa4016;}
.questionttl{font-family:osw;font-size:.95em;padding:.5em 1em;color:#fff;background-color:#aa4016;}

/* For borderless tables in language note sections. */
.langlist .latin {color:#000; font-size: 100%; font-weight: bold;}
.langlist .latin .colour{color:#aa4016;font-weight:bold; font-size: 100%;}
.langlist li {font-weight:bold !important;padding-inline-start:1em;margin-left: 2em;}
.langlist li > *, .langlist li > * > * {font-weight:normal;}
.langprac .langlist {padding-bottom: 1em;}
.list-left{display:inline-block; width:15em;}
.letters {list-style-type:lower-alpha;line-height:1.5; font-weight: bold;}
.letters li {padding-bottom: 0.8em; margin-left: 3.5em; padding-left: 0.3em;}
.letters-normal {list-style-type:lower-alpha;line-height:1.5;}
.letters-normal li {padding-bottom: 0.8em; margin-left: 3.5em; padding-left: 0.3em;}
.letters-normal .norm {font-weight: normal;} 
.boldnumber li {font-weight:bold;padding-inline-start:1em;margin-left: 2.5em;}
.boldnumber li > *, .boldnumber li > * > * {font-weight:normal;}
.boldnumber .latin{color:#aa4016;font-weight:bold;}
.boldnumber .bolden {font-weight:bold;}
/* All these relate to lists: langlist is used in language note sections and boldnumber outside of them. */
.grammar td {background-color: #f9f3e5;border: 1px solid #bcbcb9;padding-left: 0.5em;padding-right: 2em;padding-top: 0.2em;padding-bottom: 0.2em;}
.grammar {border-collapse: collapse; margin-left:2em;}
.grammar .heading {background-color: #e7c495;}
.grammar .heading2 {background-color: #f0e1bd; font-style:italic;}
/* For grammar-related tables ——— Barnaby */
.smallbullet {margin-left: 30px;margin-top:0px;list-style-type: disc;font-size: 50%;}
.smallbullet span {font-size: 200%;}
.indent{display: inline-block; margin-left: 2em;}


.ttlin{margin:0 0 .3em 0;font-weight:bold;text-align:center;}
.lat{margin:1em 1em .5em 1em;font-size:110%;}
.spacer{margin-top:.5em;}
.reg{margin:0;text-indent:0;}
.w{text-decoration:none;outline:none;padding:0;cursor:pointer;}
.wpers{text-decoration:none;outline:none;padding:0;color:#955144;cursor:pointer;}
.wlo{text-decoration:none;outline:none;padding:0;color:#333;cursor:auto;}
.whi{text-decoration:none;outline:none;padding:0;color:#b62432;cursor:pointer;}
.wlnk{text-decoration:underline;outline:none;padding:0;color:#b62432;cursor:pointer;}
.llnum{color:#111;float:right;font-size:.9em;display:inline-block;width:1em;}
.ln{color:#aaa;font-size:.7em;}
.person{display:inline-block;width:6em;font-style:italic;color:#a3462c;margin-left:0em;}
.spkr{font-style:italic;color:#a3462c;}
/*.selwd{border-bottom:1px solid #c40;background:#fee;}*/
.selwd{border-bottom:2px solid #c40;}
.deriv{font-size:1em;margin:.5em 0 0 0;}
.rootlang{font-style:italic;color:#04c;display:inline-block;width:2.5em;}
.ulin{border-bottom:1px dotted #04c;}
.lathwd{color:#c40;}
.pars{color:#088;}
.phrase{color:#04c;}
.audio{width:1.7em;float:left;}
.engdescr{margin:0 0 .25em 0;}
.smcap{font-size:85%;}

.chbox{font-family:fnt,sans-serif;font-size:1rem;}
.chkboxlab{font-family:fnt,sans-serif;font-size:1rem;margin:0 .25rem 0 1.25rem;font-variant:small-caps;}
#ctrlprompt{font-variant:small-caps;}

.bubble{
	position:absolute;
	top:0;
	left:0;
	margin:0 auto;
	cursor:pointer;
	background-color:#f8f8f8;
	padding:.2em .5em;
	border:1px solid #ccc;
	border-radius:.25rem;
	text-align:left;
	box-shadow:5px 5px 5px #888;
	/*font-size:110%;
	font-size:2.15vw;*/
	/*max-width:38rem;*/
	max-width:90%;
	display:none;
}

#xboxtxt {margin:0 auto;display:inline-block;}

.bub1{font-size:2.15vw;}
.bub2{font-size:110%;}

.link{color:#c40;}

.popup-label {
	position: absolute;
	text-align: center;
	padding: 0.5em;
	background-color: #011E62;
	color: #fff;
	font-size:90%;
	cursor:pointer;
}

.pic .popcaption {
	display:none;
	position: absolute; /* Position the background text */
	background: rgb(0, 0, 0); /* Fallback color */
	background: rgba(0, 0, 0, 0.6); /* Black background with 0.5 opacity */
	color: #fff; /* Grey text #f1f1f1 */
	width: 100%; /* Full width */
	padding: 1em; /* Some padding */
}

.pic {position:relative;width:100%;}
.cap {position:relative; font-size:3vw;padding:.5em;color:#222;background:#eee;margin-bottom:1em;}
.bub {position:absolute; color:#222; font-size:3vw; padding:.5em .75em; background:#fff; border:1px solid #ccc; border-radius:1.2em;}

.lang-prac {margin:2em}
.lang-para {margin-bottom:.7em;}
.letter-list  {margin-left:2em; list-style-type:lower-alpha;}
.letter-list li::before {color:red;}

/* illustrated stories */
/*.picbox {position: relative; color:#4d4d4d; line-height:1.5; text-align:left;width:100%; font-size:92%;}*/
.picbox {position: relative; color:#4d4d4d; line-height:1.5; text-align:left;width:100%; font-size:2vw;}
.picbg{vertical-align:baseline}
.lab {position:absolute; padding:0;color:#222;}

ul li {
	margin-left: 2em;
}

@media screen and (min-width: 740px) {
	.picbox{font-size:15px;}
	.bub1{font-size:16px;}
	.bub2{font-size:110%;}
/*	.bubble{font-size:16px;}*/
}