@charset "UTF-8";

:root {
	--dot: 0.0625em;
	--font-size: 2em;

	--padding-ver: 0;
	--padding-hor: 0.5em;
	--margin: 0.75em;
	
    --width: 32em; /* 1024px */
    --height: 24em; /* 768px */
}

@font-face {
	font-family: 'dq';
	src: url("dq.ttf");
}

body {
	background-color: #444;
    color: #000;
    font-family: dq;
    font-size: var(--font-size);
}

main {
    background-color: #000;
    color: #FFF;
    position: relative;
    width: var(--width);
    height: var(--height);
    box-sizing: border-box;
	padding: 0.5em 0.25em;
}

footer {
    background-color: #000;
    color: #FFF;
    position: relative;
    width: var(--width);
    height: 1em;
    box-sizing: border-box;
	padding: 0 0.25em 0.5em 0.25em;
}

footer div {
    text-align: right;
}

aside {
    background-color: #fff;
    color: #000;
    position: relative;
    width: 8em;
    height: 100%;
    box-sizing: border-box;
}

aside .heading {
    position: relative;
    background-color: #1c305c;
    color: #fff;
    height: 5%;
    border: none;
    border-color: rgb(204, 204, 204);
    border-width: 1px;
    padding: 10px;
    box-sizing: border-box;
}

aside .heading span {
    position: absolute;
    white-space: nowrap;
    top: 50%;
    left: 50%;
    font-size: 50%;
    transform: translate(-50%, -50%);
    font-family: Roboto,HelveticaNeue,Arial,sans-serif;
    font-weight: bold;
}

aside .content {
    height: 95%;
}

.parent.column {
    flex-direction: column;
}

aside .content > .parent {
    height: 100%;
}

aside .content > .parent > .child {
    height: 100%;
    border: solid;
    border-color: rgb(204, 204, 204);
    border-width: 0 0 1px 0;
    box-sizing: border-box;
}
aside .content > .parent > .child:last-child {
    border-width: 0;
}
aside .product {
    height: 100%;
}
aside .image {
    width: 25%;
    padding: 10px;
}
aside .text {
    width: 75%;

    color: #2b4c97;
    font-family: Arial, sans-serif;
    font-size: 0.45em;
    font-weight: bold;

    padding: 10px;
    padding-left: 0px;
}

aside img {
    width: 100%;
    height: auto;
}

aside a:hover {
    text-decoration: underline;
}


.holder {
    display: block;
    position: relative;
	padding: var(--padding-ver) var(--padding-hor);
	margin: var(--margin);
	white-space: nowrap;
    z-index: 1;
}

.window div {
    z-index: 1;
}

.parent {
	display: flex;
}

.parent.right {
    justify-content: flex-end;
}

.parent.bottom {
    align-items: flex-end;
}

.parent.hor-center {
    justify-content: center;
}

.parent.ver-center {
    align-items: center;
}

.child {
    position: relative;
}

.window .border {
	position: absolute;
	top: calc(var(--dot) * -9);
	bottom: calc(var(--dot) * -6);
	left: calc(var(--dot) * -8);
	right: calc(var(--dot) * -8);
	outline: #FFF solid calc(var(--dot) * 2);
}

.border:nth-child(1) {
	top: calc(var(--dot) * -8);
	bottom: calc(var(--dot) * -5);
	z-index: -2;
}

.border:nth-child(2) {
	left: calc(var(--dot) * -7);
	right: calc(var(--dot) * -6);
	z-index: -2;
}

.border:nth-child(3) {
	top: calc(var(--dot) * -7);
	bottom: calc(var(--dot) * -4);
	left: calc(var(--dot) * -7);
	right: calc(var(--dot) * -7);
	outline: #000 solid var(--dot);
	z-index: -1;
}

.border:nth-child(4) {
	top: calc(var(--dot) * -8);
	bottom: calc(var(--dot) * -5);
	left: calc(var(--dot) * -6);
	right: calc(var(--dot) * -6);
	outline: #000 solid var(--dot);
	z-index: -1;
}

.child .holder ~ .holder {
	margin-top: calc(var(--margin) * 2);
}

.window .heading {
	position: absolute;
	background-color: #000;
	padding: 0em var(--dot);
    top: 0%;
	left: 50%;
	transform: translateX(-50%) translateY(-1em);
    z-index: 1;
}

.window .pageSwitch[direction="prev"] {
    position: absolute;
	background-color: #000;
    padding-left: calc(var(--dot) + 0.5em);
    padding-right: var(--dot);
    top: 0%;
	left: 0.5em%;
	transform: translateX(-50%) translateY(-1em);
    z-index: 1;
}
.window .pageSwitch[direction="next"] {
    position: absolute;
	background-color: #000;
    padding-left: calc(var(--dot) + 0.5em);
    padding-right: var(--dot);
    top: 0%;
	left: calc(100% - 0.5em);
	transform: translateX(-50%) translateY(-1em);
    z-index: 1;
}


.hidden {
	display: none;
}

.selectable {
    cursor: pointer;
}

.mark:before, .cursor:before {
	position: absolute;
	content: ">";
	transform: translateX(-0.5em);
}

@keyframes blink {
	0% {opacity:1;}
	50% {opacity:1;}
	51% {opacity:0;}
	100% {opacity:0;}
}

.cursor:before {
	animation:blink 0.3s linear infinite alternate;
}

ul.inline li {
    display: inline-block;
}

li.dummy {
    visibility: hidden;
}