body{ width: 99%; background-color: #FFF; font-family: "Arial", "Helvetica Neue", "Helvetica", sans-serif; font-weight: 400; margin-left: 1%; } main{ width:100%; height:100%; overflow:scroll; white-space: nowrap; } ul{ text-transform: uppercase; width: 94.5vh; transform: rotate(90deg); transform-origin:top left; -ms-transform: rotate(90deg); /* IE 9 */ -ms-transform-origin:top left; /* IE 9 */ -webkit-transform: rotate(90deg); /* Safari and Chrome */ -webkit-transform-origin:top left; /* Safari and Chrome */ moz-transform: rotate(90deg); /* Firefox */ -moz-transform-origin:top left; /* Firefox */ -o-transform: rotate(90deg); /* Opera */ -o-transform-origin:top left; /* Opera */ position: relative; left: 30px; } li{ font-size: 1.8em; transform: scaleX(0.45); transform-origin: 0 0; } footer{ font-family: "Times New Roman"; position: fixed; bottom: 2vh; right: -75px; text-align: right; font-size: 1.4em; text-transform: uppercase; transform: scaleX(0.6); transform-origin: 0 0; z-index: -1; } header{ font-family: "Times New Roman"; position: fixed; top: 2vh; right: -134px; text-align: right; font-size: 1.4em; text-transform: uppercase; transform: scaleX(0.6); transform-origin: 0 0; z-index: -1; } a{ text-decoration: none; color: #000; } a:hover{ text-decoration: none; color: #e2e3e4; } a.grey:hover, a.aboutmore:hover{ text-decoration: none; color: #eeeff0; } a:visited{ text-decoration: none; } em{ font-style: italic; } .not_mine{ color: #909090; } .open{ display: inline-block; background-color: #eeeff0; height: 94.5vh; padding-top: 10px; margin-top: 2vh; margin-bottom: 2vh; margin-left: 10px; width: 35px; overflow: auto; white-space: normal; } .home{ font-family: "Times New Roman"; display: inline-block; background-color: #FFF; height: 94.5vh; padding-top: 10px; margin-top: 2vh; margin-right: 20px; margin-bottom: 2vh; margin-left: 20px; width: 35px; overflow: auto; white-space: normal; } .popup{ line-height: 120%; display: none; background-color: #e2e3e4; width: 450px; height: 94.5vh; overflow: auto; white-space: normal; vertical-align: top; margin-top: 2vh; padding-top: 10px; } h2{ transform: scaleX(0.7); font-size: 1.6em; line-height: 110%; text-transform: uppercase; transform-origin: 0 0; margin-left: 8px; margin-bottom: 10px; } h1{ transform: scaleX(0.6); font-size: 1.8em; line-height: 110%; text-transform: uppercase; transform-origin: 0 0; margin-left: 8px; margin-bottom: 10px; } .sub_h1{ font-family: "Times New Roman"; } p{ margin-left: 16px; margin-right: 36px; overflow: auto; white-space: normal; padding-bottom: 1em; font-size: 15px; line-height: 120%; } .footnotes{ font-family: "Times New Roman"; transform: scaleX(0.8); transform-origin: 0 0; margin-left: 8px; font-size: 14px; line-height: 120%; } .git{ font-family: "Times New Roman"; transform: scaleX(0.8); transform-origin: 0 0; margin-left: 0px; font-size: 14px; line-height: 120%; padding-top: 8px; } button, input[type="submit"], input[type="reset"] { background: none; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit; } figcaption{ font-family: "Times New Roman"; transform: scaleX(0.8); transform-origin: 0 0; margin-left: 8px; font-size: 14px; line-height: 120%; text-align: justify; text-justify: inter-word; margin-bottom: 12px; } img{ margin-top: 3px; margin-left: 8px; width: 326px; } h3{ transform: scaleX(0.7); font-size: 1.6em; line-height: 110%; text-transform: uppercase; transform-origin: 0 0; margin-left: 8px; margin-bottom: 10px; } .avatar{ width: 125px; padding-top: 10px; } .answer{ background-color: #eeeff0; width: 388px; margin-left: 0; margin-right: 0; margin-bottom: 75px; padding: 8px; padding-left: 36px; padding-right: 26px; } .link{ font-size: 1.6em; line-height: 110%; transform: scaleX(0.6); text-transform: uppercase; transform-origin: 0 0; background-color: #eeeff0; width: 742px; margin-left: 0; margin-right: 0; margin-bottom: 8px; padding: 8px; padding-left: 8px; padding-right: 0px; } #text04 { padding-top: 0px; padding-top: 1vh; } .description{ margin-bottom: 15px; } .name{ display: inline-block; vertical-align: top; padding-top: 10px; } .username{ font-family: "Times New Roman"; transform: scaleX(0.8); transform-origin: 0 0; margin-left: 8px; font-size: 14px; margin-bottom: 6px; } .code{ display: none; } .aboutmore{ font-family: "Times New Roman"; transform: scaleX(0.6); transform-origin: 0 0; font-size: 12px; } @media only screen and (max-width: 700px){ header{ display: none; } ul{ width: 95%; transform: rotate(0deg); transform-origin:top left; -ms-transform: rotate(0deg); /* IE 9 */ -ms-transform-origin:top left; /* IE 9 */ -webkit-transform: rotate(0deg); /* Safari and Chrome */ -webkit-transform-origin:top left; /* Safari and Chrome */ moz-transform: rotate(0deg); /* Firefox */ -moz-transform-origin:top left; /* Firefox */ -o-transform: rotate(0deg); /* Opera */ -o-transform-origin:top left; /* Opera */ position: relative; left: 5px; margin-top: -4px; } li{ margin-top: 5px; font-size: 1.6em; } .open{ display: block; height: 35px; margin-left: 4px; margin-right: 4px; margin-top: 10px; margin-bottom: 0px; width: 95%; } .popup{ background-color: #F5F5F5; margin-left: 4px; margin-right: 4px; margin-top: 0; padding-top: 0; width: 95%; height: 70vh; } h2{ font-size: 1.2em; } h1{ font-size: 1.4em; margin-top: 6px; } p{ margin-left: 12px; margin-right: 20px; padding-bottom: 1em; font-size: 13px; } .footnotes{ font-size: 12px; } figcaption{ font-size: 13px; } img{ width: 90%; } h3{ transform: scaleX(0.7); font-size: 1.4em; } .avatar{ padding-top: 5px; } .answer{ width: 83vw; margin-left: 0; margin-right: 0; margin-bottom: 25px; padding: 0; padding-left: 2vw; padding-right: 8vw; } .link{ font-size: 1.2em; width: 163%; } .instance{ margin-top: 10px; } #text04 { padding-top: 1vh; } #text05 { padding-top: 8px; } .description{ margin-bottom: 50px; } .name{ display: inline-block; vertical-align: top; padding-top: 5px; } footer{ bottom: 8px; left: 8px; text-align: left; font-size: 1.2em; } }