:: Main stylesheet [stylesheet]

body {
	overflow-x: hidden;
}

/* clears SugarCube's default transition */
.passage {
    transition: none;
    -webkit-transition: none;
}

.passage-in {
    opacity: 1 !important;
}


/* default is 54em */
#passages {
    max-width: 100%;
}

/* small trick to hide broken images */
img {
    text-indent: -10000px;
}

.imageRef {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    position: relative;
	background-color: rgba(80, 80, 80, 0.5);
	margin: 2px;
}

.tinyImg {
    height: 120px;
    width: 120px;
    float: left;
}

.smlImg {
    height: 150px;
    width: 150px;
    float: left;
}

.smlImg > img, .smlImg > video {
	height: auto;
}

.medImg {
    height: 300px;
    width: 300px;
    float: right;
}

.medImg > img, .medImg > video {
	height: auto;
}

.lrgRender {
    height: 531px;
    width: 531px;
	margin-right: -50px;
	margin-left: -50px;
    float: right;
	z-index: -1;
}

.lrgVector {
    height: 600px;
    width: 600px;
	margin-right: -125px;
	margin-left: -125px;
    float: right;
	z-index: -1;
}

.lrgRender > div.mask {
	width: 150px;
	height: 100%;
	background: linear-gradient(90deg, rgba(17,17,17,1), rgba(17,17,17,0.8) 60%, rgba(17,17,17,0));
	z-index: 1;
}

.lrgRender > img, .lrgRender > video {
	margin-left: -150px;
	height: 531px;
	width: auto;
}

.lrgVector > div.mask {
	width: 150px;
	height: 100%;
	background: linear-gradient(90deg, rgba(17,17,17,1), rgba(17,17,17,0.8) 60%, rgba(17,17,17,0));
	z-index: 1;
}

.lrgVector > img, .lrgVector > video {
	margin-left: -150px;
	height: 600px;
	width: auto;
}

.lrgVector svg {
    width: 336px;
    height: 600px;
}

object {
    object-fit: scale-down;
    position: absolute;
    top: 0;
	left: 0;
}

img.paperdoll {
    position: absolute;
    top: 0;
	left: 0;
	margin-left: 0;
}

span.plusButton {
	display: inline-block;
	line-height: 25px;
	width: 20px;
	text-align: center;
	border: 1px solid rgba(0, 139, 0, 0.3);
	background: rgba(0, 139, 0, 0.2);
	margin: 2px 0;
}

span.minusButton {
	display: inline-block;
	line-height: 25px;
	width: 20px;
	text-align: center;
	border: 1px solid rgba(184, 0, 0, 0.3);
	background: rgba(184, 0, 0, 0.2);
	margin: 2px 0;
}

span.zeroButton {
	display: inline-block;
	line-height: 25px;
	width: 20px;
	text-align: center;
	border: 1px solid rgba(0, 0, 255, 0.3);
	background: rgba(0, 0, 255, 0.2);
	margin: 2px 0;
}

span.plusButton:hover { background: rgba(0, 139, 0, 0.4); }
span.minusButton:hover { background: rgba(184, 0, 0, 0.4); }
span.zeroButton:hover { background: rgba(0, 0, 255, 0.4); }

span.plusButton > a { display: block; }
span.minusButton > a { display: block; }
span.zeroButton > a { display: block; }

span.plusButton > a:hover { text-decoration: none; }
span.minusButton > a:hover { text-decoration: none; }
span.zeroButton > a:hover { text-decoration: none; }

/* Colors are made as css classes, to allow them to be
   changed for a light color scheme (for example). */
.link { color: #68D } /* link color */
.aquamarine { color: aquamarine }
.coral { color: coral }
.cyan { color: cyan }
.darkgoldenrod { color: darkgoldenrod }
.darkred { color: darkred }
.darkviolet { color: darkviolet }
.deeppink { color: deeppink }
.deepskyblue { color: deepskyblue }
.gold { color: gold }
.goldenrod { color: goldenrod }
.gray { color: gray }
.green { color: green }
.hotpink { color: hotpink }
.lawngreen { color: lawngreen }
.lightcoral { color: lightcoral }
.lightgreen { color: lightgreen }
.lightpink { color: lightpink }
.lightsalmon { color: lightsalmon }
.lime { color: lime }
.limegreen { color: limegreen }
.magenta { color: magenta }
.mediumaquamarine { color: mediumaquamarine }
.mediumorchid { color: mediumorchid }
.mediumseagreen { color: mediumseagreen }
.orange { color: orange }
.orangered { color: orangered }
.orchid { color: orchid }
.pink { color: pink }
.red { color: red }
.seagreen { color: seagreen }
.springgreen { color: springgreen }
.tan { color: tan }
.yellow { color: yellow }
.yellowgreen { color: yellowgreen }

.link a { color: #68D } /* link color */
.aquamarine a { color: aquamarine }
.coral a { color: coral }
.cyan a { color: cyan }
.darkgoldenrod a { color: darkgoldenrod }
.darkred a { color: darkred }
.darkviolet a { color: darkviolet }
.deeppink a { color: deeppink }
.deepskyblue a { color: deepskyblue }
.gold a { color: gold }
.goldenrod a { color: goldenrod }
.gray a { color: gray }
.green a { color: green }
.hotpink a { color: hotpink }
.lawngreen a { color: lawngreen }
.lightcoral a { color: lightcoral }
.lightgreen a { color: lightgreen }
.lightpink a { color: lightpink }
.lightsalmon a { color: lightsalmon }
.lime a { color: lime }
.limegreen a { color: limegreen }
.magenta a { color: magenta }
.mediumaquamarine a { color: mediumaquamarine }
.mediumorchid a { color: mediumorchid }
.mediumseagreen a { color: mediumseagreen }
.orange a { color: orange }
.orangered a { color: orangered }
.orchid a { color: orchid }
.pink a { color: pink }
.red a { color: red }
.seagreen a { color: seagreen }
.springgreen a { color: springgreen }
.tan a { color: tan }
.yellow a { color: yellow }
.yellowgreen a { color: yellowgreen }

/*! <<checkvars>> macro for SugarCube 2.x */
#ui-dialog-body.checkvars{padding:1em}#ui-dialog-body.checkvars h1{font-size:1em;margin-top:0}#ui-dialog-body.checkvars table{border-collapse:collapse;border-spacing:0}#ui-dialog-body.checkvars thead tr{border-bottom:2px solid #444}#ui-dialog-body.checkvars tr:not(:first-child){border-top:1px solid #444}#ui-dialog-body.checkvars td,#ui-dialog-body.checkvars th{padding:.25em 1em}#ui-dialog-body.checkvars td:first-child,#ui-dialog-body.checkvars th:first-child{padding-left:.5em;border-right:1px solid #444}#ui-dialog-body.checkvars td:last-child,#ui-dialog-body.checkvars th:last-child{padding-right:.5em}#ui-dialog-body.checkvars th:first-child{text-align:center}#ui-dialog-body.checkvars td:first-child{font-weight:700;text-align:right}#ui-dialog-body.checkvars td{font-family:monospace,monospace;vertical-align:top;white-space:pre-wrap}#ui-dialog-body.checkvars .scroll-pad{margin:0;padding:0}

/*! <<bugreport>> macro for SugarCube 2.x */
#ui-dialog-body.bugreport #bugreport-info{margin-bottom:1em}#ui-dialog-body.bugreport #bugreport-data{display:block;overflow:auto;font-family:monospace,monospace;background-color:transparent;border:1px solid #444;margin:0;padding:6px;height:auto;min-height:200px;white-space:normal}#ui-dialog-body.bugreport .scroll-pad{margin:0;padding:0}


