GS#14 Ace Attorney - Court Record

GS#14ATC: Ace Attorney - Court Record

CSS

/* Last Update: 07/22/19 */

/* PAGE BACKGROUND AND FONT */
body {
background:#000 url(https://p4ratchet.files.wordpress.com/2016/10/ace-attorney-courtroom1.jpg) center no-repeat fixed;
background-size:cover;
font-family:sans-serif;
font-size:16px;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:#222;
}
::-webkit-scrollbar-thumb {
background-color:#fff;
}

/* IMAGE FIELD BACKGROUND IMAGES */
/* I FOR ITEM AND P FOR PROFILE */
#i1 {
background:#808080 url('https://vignette4.wikia.nocookie.net/aceattorney/images/8/8b/Badge.png/revision/latest?cb=20160127195254') center;
background-size:cover;
}
#i2 {
background:#808080 url('https://vignette2.wikia.nocookie.net/aceattorney/images/b/b7/Maya%27s_Magatama.png/revision/latest?cb=20160128175359') center;
background-size:cover;
}
#i3 {
background:#808080 url('https://vignette3.wikia.nocookie.net/aceattorney/images/5/56/Autopsy_report.png/revision/latest?cb=20160127194837') center;
background-size:cover;
}
#i4 {
background:#808080 url('https://vignette2.wikia.nocookie.net/aceattorney/images/0/02/Envelope.png/revision/latest?cb=20160127202929') center;
background-size:cover;
}
#i5 {
background:#808080 url('https://vignette1.wikia.nocookie.net/aceattorney/images/2/29/Thinker.png/revision/latest?cb=20160129153354') center;
background-size:cover;
}
#i6 {
background:#808080 url('https://vignette1.wikia.nocookie.net/aceattorney/images/c/c6/Generic_Photo.png/revision/latest?cb=20160127203950') center;
background-size:cover;
}
#i7 {
background:#808080 url('https://vignette1.wikia.nocookie.net/aceattorney/images/5/52/Key.png/revision/latest?cb=20160127205453') center;
background-size:cover;
}
#i8 {
background:#808080 url('https://vignette2.wikia.nocookie.net/aceattorney/images/4/46/Grey_Gun.png/revision/latest?cb=20160127204400') center;
background-size:cover;
}
#p1 {
background:#808080 url('https://vignette1.wikia.nocookie.net/aceattorney/images/7/73/Mia-mug.png/revision/latest?cb=20120226023016') center;
background-size:cover;
}
#p2 {
background:#808080 url('https://i.pinimg.com/originals/54/ff/45/54ff459ff86cbb1cf4d096ee4213abf9.png') center;
background-size:cover;
}
#p3 {
background:#808080 url('https://vignette2.wikia.nocookie.net/aceattorney/images/b/b1/Pearl_Fey.png/revision/latest?cb=20120226021150') center;
background-size:cover;
}
#p4 {
background:#808080 url('http://images.wikia.com/aceattorney/images/3/3f/Edgeworth2.png') center;
background-size:cover;
}
#p5 {
background:#808080 url('https://vignette4.wikia.nocookie.net/aceattorney/images/4/45/Larry_Butz_T%26T_Mugshot.png/revision/latest/scale-to-width-down/185?cb=20160321033235') center;
background-size:cover;
}
#p6 {
background:#808080 url('https://vignette1.wikia.nocookie.net/aceattorney/images/4/40/Dick_Gumshoe_Mugshot.png/revision/latest?cb=20160321033423') center;
background-size:cover;
}
#p7 {
background:#808080 url('') center;
background-size:cover;
}
#p8 {
background:#808080 url('') center;
background-size:cover;
}


/* CSS MEAT */
#top, #bottom {
position:fixed;
left:50%;
height:50%;
width:40%;
min-width:450px;
color:#fff;
overflow:hidden;
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}

/* TOP HALF STUFF */
#top {
top:0;
}
#mugshot {
position:absolute;
top:0;
height:100%;
}
#quote {
position:absolute;
bottom:0;
left:0;
right:0;
height:21%;
padding:10px;
background-color:rgba(0,0,0,0.5);
border:2px solid #fff;
border-radius:2px;
overflow-y:auto;
}
#top h2 {
position:absolute;
left:0;
bottom:21%;
margin:0 0 24px 0;
padding:3px 5px;
font-size:20px;
background-color:rgba(0,0,155,0.5);
border:2px solid #fff;
border-radius:5px 5px 2px 2px;
}
#quote, p {
text-indent:5%;
}

/* BOTTOM HALF STUFF */
#bottom {
top:50%;
background-color:#ccc;
}
.buttons, span {
text-shadow:1px 1px 2px #000;
}
.buttons {
position:absolute;
height:7vh;
width:120px;
overflow:hidden;
text-align:center;
}
.buttons:hover {
color:#808080;
}
.buttons::before {
position:absolute;
top:2px;
right:2px;
left:2px;
bottom:2px;
padding:1vh 0;
font-size:4.2vh;
}
input {
display:none;
}
label {
cursor:pointer;
}
label#reset {
left:0;
bottom:0;
background:linear-gradient(-135deg,transparent 12%,#fff 12%);
background:-o-linear-gradient(-135deg,transparent 12%,#fff 12%);
background:-moz-linear-gradient(-135deg,transparent 12%,#fff 12%);
background:-webkit-linear-gradient(-135deg,transparent 12%,#fff 12%);
}
label#profiles {
top:0;
right:0;
background:linear-gradient(45deg,transparent 12%,#fff 12%);
background:-o-linear-gradient(45deg,transparent 12%,#fff 12%);
background:-moz-linear-gradient(45deg,transparent 12%,#fff 12%);
background:-webkit-linear-gradient(45deg,transparent 12%,#fff 12%);
}
label#reset::before {
content:"Back";
background:linear-gradient(-135deg,transparent 12%,#8b4513 12%);
background:-o-linear-gradient(-135deg,transparent 12%,#8b4513 12%);
background:-moz-linear-gradient(-135deg,transparent 12%,#8b4513 12%);
background:-webkt-linear-gradient(-135deg,transparent 12%,#8b4513 12%);
}
label#profiles::before {
content:"Profiles";
background:linear-gradient(45deg,transparent 12%,#8b4513 12%);
background:-o-linear-gradient(45deg,transparent 12%,#8b4513 12%);
background:-moz-linear-gradient(45deg,transparent 12%,#8b4513 12%);
background:-webkit-linear-gradient(45deg,transparent 12%,#8b4513 12%);
}
.courtrecord {
position:absolute;
top:3.75vh;
left:0;
bottom:3.75vh;
width:100%;
background:#222 url(https://vignette1.wikia.nocookie.net/aceattorney/images/c/c1/Screenshot-court.png/revision/latest?cb=20071215141755) center;
background-size:auto 100%;
border-top:3.75vh solid #696969;
overflow:hidden;
}
.courtrecord + span {
position:absolute;
margin:2vh 0.7vw;
font-size:4.5vh;
}
.record-body, #navbar {
position:absolute;
top:1.75vh;
height:32.25vh;
left:50px;
right:50px;
text-align:center;
}
.tab {
position:absolute;
top:0;
left:100%;
margin:0 50px;
height:100%;
width:100%;
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
.tab h3 {
position:absolute;
top:0;
left:0;
right:0;
height:20px;
margin:0;
background-color:#444;
border:2px inset #fff;
border-top-width:1px;
color:#ffa500;
font-size:18px;
line-height:20px;
}
.itembox, .itembox div {
position:absolute;
height:13vh;
border:2px solid #fff;
border-radius:2px;
}
.itembox {
top:9vh;
left:0;
right:0;
padding:7px 5px;
background-color:#705028;
}
.itembox div {
top:5px;
}
.itembox div:first-child {
left:5px;
width:13vh;
}
.desc {
left:18vh;
right:5px;
padding:0 4px;
background-color:#9cc793;
color:#222;
text-align:left;
overflow-y:auto;
}
#default, #profiles {
background-color:#bdb76b;
}
#default {
top:100%;
left:0;
margin:6vh 0;
}
#reset:checked ~ .record-body #default,
#item01:checked ~ .record-body .t1,
#item02:checked ~ .record-body .t2,
#item03:checked ~ .record-body .t3,
#item04:checked ~ .record-body .t4,
#item05:checked ~ .record-body .t5,
#item06:checked ~ .record-body .t6,
#item07:checked ~ .record-body .t7,
#item08:checked ~ .record-body .t8,
#profiles:checked ~ .record-body #profiles {
top:0;
left:0;
margin:0;
transition:1s 0.8s;
-o-transition:1s 0.8s;
-moz-transition:1s 0.8s;
-webkit-transition:1s 0.8s;
}
#image-field {
position:absolute;
top:6vh;
left:15px;
right:15px;
}
#image-field div, #navbar label, #navbar a {
display:inline-block;
position:relative;
height:10.4vh;
width:10.4vh;
}
#image-field div {
margin:0 2px;
border:2px inset #bdb76b;
}
#navbar {
display:none;
}
#navbar label, #navbar a {
display:inline-block;
top:6vh;
margin:2px;
}
#reset:checked ~ #navbar a,
#profiles:checked ~ #navbar label {
display:none;
}
#reset:checked ~ #navbar,
#profiles:checked ~ #navbar {
display:inline-block;
}
#quote img, .tab img {
max-height:100%;
}
@media only screen and (orientation:portrait) {
	#top, #bottom {
		width:100%;
		font-size:1.1em;
	}
	.buttons::before {
		padding:2vh 0;
		font-size:2.2vh;
	}
}
#credit {
position:fixed;
height:17px;
right:1%;
bottom:0;
background-color:#fff;
border-radius:5px;
}

HTML

<link href="https://dl.dropbox.com/s/w6ty46lyhcwxp2q/gs14-extra-decoration.css" rel="stylesheet">

<div id="top">
<img src="http://img14.deviantart.net/7d0a/i/2010/357/4/f/phoenix_wright___vector_by_honokawa-d35h44y.png" alt="Image of Phoenis Wright the defense attorney" id="mugshot"/>
<h2>Phoenix</h2>
<div id="quote">
"Why did I become a lawyer in the first place...? Because someone has to look out for the people who have no one on their side."
</div>
</div>


<div id="bottom">

<!-- THIS NEXT HUGE CHUNK IS MOSTLY DECORATIVE OR FUNCTION RELATED, DO NOT TOUCH! -->

<div id="grayline"></div><div class="courtrecord">
<input type="radio" name="selection" id="reset" checked="checked"/><input type="radio" name="selection" id="profiles"/>
<input type="radio" name="selection" id="item01"/><input type="radio" name="selection" id="item02"/><input type="radio" name="selection" id="item03"/><input type="radio" name="selection" id="item04"/><input type="radio" name="selection" id="item05"/><input type="radio" name="selection" id="item06"/><input type="radio" name="selection" id="item07"/><input type="radio" name="selection" id="item08"/>
<div class="record-body" id="main">
<div class="tab" id="profiles">
<h3>Friends</h3>
<div id="image-field">
<div id="p1"></div><div id="p2"></div><div id="p3"></div><div id="p4"></div>
<br/>
<div id="p5"></div><div id="p6"></div><div id="p7"></div><div id="p8"></div>
</div></div>
<div class="tab" id="default">
<h3>Information</h3>
<div id="image-field">
<div id="i1"></div><div id="i2"></div><div id="i3"></div><div id="i4"></div>
<br/>
<div id="i5"></div><div id="i6"></div><div id="i7"></div><div id="i8"></div>
</div></div></div>
<div id="gradientfilm"></div>


<!-- Okay now you can touch stuff. -->

<div class="record-body">
<div class="tab t1">
<h3>Attorney's Badge</h3>
<div class="itembox">
<div id="i1"></div>
<div class="desc">
<p>
Information and stuffity stuff stuff stufff. More stuuuufff. AND. MORE STUFF! Bippity boop bop biddly beep squap. Anyways, what do I usually do for examples when I need to fill space? OH YEAH! *ahem* Hello, people of Earth, I have come to devour you. Do not fear for it shall be a quick and painless death as I intake your entire planet. The sudden loss of atmospheric pressure and its protections will either freeze you in a millisecond or cause all of your blood to boil out of your body in a single instant. Hmm. I suppose that last one doesn't quite sound painless, but nonetheless it should be instantaneous.
</p>
</div>
</div>
</div>

<div class="tab t2">
<h3>Maya's Magatama</h3>
<div class="itembox">
<div id="i2"></div>
<div class="desc">
<p>
Paragraph.
</p>
</div>
</div>
</div>

<div class="tab t3">
<h3>Autopsy Report</h3>
<div class="itembox">
<div id="i3"></div>
<div class="desc">
<p>
Paragraph.
</p>
</div>
</div>
</div>

<div class="tab t4">
<h3>Envelope</h3>
<div class="itembox">
<div id="i4"></div>
<div class="desc">
<p>
Paragraph.
</p>
</div>
</div>
</div>

<div class="tab t5">
<h3>Thinker</h3>
<div class="itembox">
<div id="i5"></div>
<div class="desc">
<p>
Paragraph.
</p>
</div>
</div>
</div>

<div class="tab t6">
<h3>Photo</h3>
<div class="itembox">
<div id="i6"></div>
<div class="desc">
<p>
Paragraph.
</p>
</div>
</div>
</div>

<div class="tab t7">
<h3>Key</h3>
<div class="itembox">
<div id="i7"></div>
<div class="desc">
<p>
Paragraph.
</p>
</div>
</div>
</div>

<div class="tab t8">
<h3>Gun</h3>
<div class="itembox">
<div id="i8"></div>
<div class="desc">
<p>
Paragraph.
</p>
</div>
</div>
</div>

</div>

<!-- FRIEND PROFILE LINKS FOUND BELOW -->

<div id="navbar">
<label for="item01"></label>
<label for="item02"></label>
<label for="item03"></label>
<label for="item04"></label>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<br/>
<label for="item05"></label>
<label for="item06"></label>
<label for="item07"></label>
<label for="item08"></label>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
</div>

</div>

<span>Evidence</span>
<label for="profiles" class="buttons" id="profiles"></label>
<label for="reset" class="buttons" id="reset"></label>
</div>

<a href="http://bit.do/eePwi" target="_blank" title="GS#14">
<img src="https://i.imgur.com/loleTtJ.png" id="credit"/>
</a>