transparent.css

/* ===== BASIC STUFF ===== */

* {
	font-family: 'Open Sans Condensed', sans-serif;
	    text-shadow:  1px  1px 1px black,
                  1px -1px 1px black,
                 -1px  1px 1px black,
                 -1px -1px 1px black;
}
a {
	color: white;
}
body, html {
	padding: 0px;
	margin: 0px;
	cursor: crosshair;
	color: white;
}
body {
	padding-bottom: 90px;
	background: url("images/transparent.jpg") no-repeat center center fixed;

	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
h2 {
	font-size: 50px;
	margin: 0px;
	font-weight: 400;
}
h2 span.fa {
	margin: 0px 30px;
	width: 60px;
	text-align: center;
}

/* ===== LINES ===== */
.box {
	line-height: 90px;
}

/* ===== CONTROL AREA ===== */

.controls {
	float: right;
	height: 80px;
	padding-right: 30px;
}
.controls li {
	cursor: pointer;
	font-size: 40px;
	line-height: 90px;
	padding: 0px 10px;
	list-style: none;
}

/* ===== FOOTER ===== */

footer {
	height: 90px;
	color: #FFFFFF;
	background: rgba(0,0,0,.7);
	position: fixed;
	bottom: 0px;
	width: 100%;
	line-height: 90px;
}
footer li {
	font-size: 40px;
	font-family: 'Open Sans Condensed', sans-serif;
	list-style: none;
}
footer ul {
	padding: 0px;
	margin: 0px 20px;
}
footer .footerleft {
	float: left;

}

footer .footerright {
	float: right;

}
footer a {
	color: white;
	text-decoration: none;
}



.subwaynum {
	border: 2px solid white;
	display: inline-block;
	line-height: 30px;
	height: 30px;
	padding: 5px 20px 7px;
	border-radius: 10px;


}

/* ===== CONTENT AREA ===== */

.contentbox_1,
.contentbox_2,
.contentbox_3 {
	height: 500px;
	float: left;
}

.contentbox_1 {
	width: 33.3%;
}
.contentbox_2 {
	width: 66.6%;
}
.contentbox_3 {
	width: 100%;
}
.contentbox {
	overflow: hidden;
	padding: 0 5px;
    transition: height 1s ease;
}
.active .contentbox {
	height: 500px;
	margin-top: 0px;

}
.inactive .contentbox {
	height: 0px;
}

.contentbox_3.tiles li {
	width: 16.666%;
}
.contentbox_2.tiles li {
	width: 25%;
}
.contentbox_1.tiles li {
	width: 50%;
}

.contentbox ul {
	padding: 0px;
	margin: 0px;
}
.contentbox .tiles li {
	line-height: 75px;
	list-style: none;
	display: block;
	padding: 10px 0px 0px;
	margin: 0px;
	float:left;
	overflow: hidden;
}
.contentbox .tiles a {
	border: transparent 5px;
	border-collapse: none;
	text-align: center;
	font-size: 20px;
	line-height: 75px;
	margin: 0px 5px;
	background: rgba(0,0,0,.4);
	display: block;
	text-decoration: none;
}
.contentbox .cameraimage img {
	width:100%;
}

/* ===== TABLES ===== */
.contentbox table {
	width: 100%;
	font-size: 40px;
}


/* ===== COLORS ===== */
.box h2 {
	background: rgba(0,0,0,.4);

	backdrop-filter: blur(5px);
}

.box-helloworld h2 {
	background: rgba(0,0,0,.7);
}

.box-motd h2 {
	background: rgba(0,0,0,.7);

}
li .active {
	background: rgba(0,0,0,.6);
	padding: 0px 15px;
	border-radius: 30px;
}