librecast-live/css/librecast.css

Live Streaming Video Platform with IPv6 Multicast

--link-normal: blue;
--link-hover: red;

* {
	box-sizing: border-box;
	margin: 0;
	padding:0;
}
html {
	background-color: white;
	font-family: sans-serif;
	font-size: 17pt;
	text-align: center;
	height: 100%;
}
body {
	min-height: 100%;
	min-height: 100vh;
}

.menubox nav ul, .loginmenu nav ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	justify-content: space-around;
	list-style: none;
}

.menubox nav li, .loginmenu nav li {
	flex: 1 1 30px;
	padding: 0.5em;
	min-width: 3em;
}

h1 {
	color: #3365a3;
}

a {
	text-decoration: none;
}

nav li a:hover {
	color: grey;
}
/*
nav li a:link {
	color: lightblue;
}
nav li a:visited {
	color: green;
}
nav li a:active {
	color: orange;
}
*/

img.logo {
	float: left;
}

img.logo.small {
	height: 120px;
	width: 120px;
}

img.logo.small.librecast {
	display: none;
}

.productbox img {
	max-height: 250px;
	max-width: 250px;
}

.outerspace {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: stretch;
	min-height: 100vh;
	width: 100%;
}
.header {
	background-color: white;
	flex: 0 0 100px;
	display: flex;
	flex-direction: row;
	max-height: 100px;
}
.middle {
	/*
	background-image: url(/media/polarbear.jpg);
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	*/
	flex: 1 1 100px;
	/*display: flex;
	flex-direction: column;
	*/
}
.footer {
	display: flex;
	flex-direction: column;
	flex: 0 0 100px;
	min-height: 100px;
	width: 100%;
}
footer.links {
	background-color: black;
	flex: 1 0 100px;
	display: none;
}
footer.sponsor {
	background-color: white;
	flex: 1 0 100px;
}
footer.sponsor {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	padding: 0 2em;
	margin-bottom: 1em;
}
.sponsorblurb {
	flex 3 1 200px;
	align-self: center;
	padding-left: 2%;
	padding-right: 2%;
	font-size: 12pt;
	min-width: 30em;
}
@media (max-width: 1000px) {
.sponsorblurb {
	min-width: 20em;
	font-size: 10pt;
}
}
.sponsorlogo {
	flex: 1 1 250px;
	min-height: 100px;
	display: flex;
}
.sponsorlogo > a {
	display: flex;
	flex-direction: row;
}
.logobox {
	flex: 0 0 100px;
}
.logocenter {
	flex: 0 0 250px;
	align-self: center;
}
.projectbox {
	color: #3365a3;
	font-family: sans-serif;
	flex: 1 0 100px;
	display: flex;
}
.menubox {
	flex: 5 0 100px;
	align-self: center;
}
.loginmenu {
	flex: 1 0 100px;
	align-self: center;
}
.projectname {
	align-self: center;
	font-size: 30pt;
	text-transform: uppercase;
	width: 100%;
}
.projectname a {
	color: #3365a3;
}
.latter {
	font-weight: bold;
}
.picbox {
	flex: 1 2 50px;
	display: none;
}
.contentbox {
	flex: 3 2 100px;
	display: none;
}
.products {
	display: flex;
	flex-direction: row;
	flex: 1 0 120px;
	flex-wrap: wrap;
	align-content: center;
	justify-content: space-around;
	height: auto;
	padding: 0;
	margin: 0;
}
.productbox {
	background-color: white;
}
li.benefits, li.productbox {
	list-style: none;
}
.spacer {
	flex: 1 1 0;
}
.prodname {
	font-weight: bold;
}
.prodname:after {
	content: '\A';
	white-space: pre;
}
.prodblurb {
	font-size: 90%;
}
p {
        text-align: justify;
	font-size: 17pt;
}

.middle p, .middle h1, .middle h2, .middle ul, .middle ol {
        margin-left: auto;
        margin-right: auto;
        width: 35rem;
}
.middle p, .middle ul, .middle ol {
        text-align: justify;
}

ul.benefits, ul.products {
        text-align: center;
	margin-left: 0;
	margin-right: 0;
        width: 100vw;
}

h1.maintitle {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
        width: 100vw;
}

.middle li, .middle ol {
	/*text-align: left;*/
}

div.vidouter {
        margin-left: auto;
        margin-right: auto;
        width: 35rem;
}
div.vid {
        position: relative;
        margin: auto;
        height: 0;
        padding-bottom: 56.25%;
        width: 100%;
}
.vid iframe {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
}
div.montage {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
}
div.montile {
	flex: 1 0 315px;
	display: flex;
	flex-direction: flex-column;
}
div.montile video.fosdem {
	height: 315px;
	width: 560px;
}
.vidtitle {
	font-size: 12pt;
}

p.bigbreak {
        margin-bottom: 2em;
}

.benefits {
	height: 300px;
	display: flex;
	padding: 0;
	margin: 0;
	margin-bottom: 0.5em;
}
.benefit {
	flex: 1 1 250px;
	display: flex;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.benefit.environmental {
	background-color: #e6eaf1;
	background-image: url(/media/polarbear-x300.jpg);
}
.benefit.environmental.wide {
	background-image: url(/media/polarbear-1200x300.jpg);
}
.benefit.financial {
	background-color: #0c205d;
	background-image: url(/media/globe-x300.jpg);
	opacity: 0.9;
}
.benefit.financial.wide {
	background-image: url(/media/globe-1600x300-1.jpg);
}
.benefit.rights {
	background-color: #a5a5a5;
	background-image: url(/media/udr-x300.jpg);
}
.benefit.rights.wide {
	background-image: url(/media/udr.jpg);
}
.invisible {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute;
	color: transparent;
	overflow: hidden;
}
.screenwipe {
	background-color: #3365a3;
	color: white;
	align-self: start;
	/*opacity: 0.5;*/
	height: 1.2em;
	width: 100%;
}
.equation {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	margin-left: auto;
	margin-right: auto;
	width: 38rem;
}
.equation img {
	height: 10%;
	width: 10%;
}

.equation img:nth-last-child(1) {
	height: 15%;
	width: 15%;
}
.bios {
	display: flex;
	flex-wrap: wrap;
	margin-left: 2rem;
	margin-right: 2rem;
}
.bio {
	flex: 1 1 450px;
}
.bio p {
	width: 90%;
}
.bio h2 {
	font-size: 95%;
}
.bio .avatar {
	float: right;
	margin-top: 0.5em;
	margin-left: 1em;
	margin-right: 5%;
	height: 200px;
	width: 200px;
}
div.vid-outer {
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 2em;
 width: 100%;
}
div.vid-inner {
 position: relative;
 margin: auto;
 height: 0;
 padding-bottom: 56.25%;
 width: 100%;
}
div.vid-inner > iframe {
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
}

video.fosdem {
 background-image: url("/media/iotsplash.png");
 background-size: 100%;
 border: solid 1px black;
 margin-bottom: 2em;
 width: 35rem;
}
.clear {
	clear: both;
}

ul.roadmap {
	width: 45rem;
}
.roadmap > li {
	border: 3px dashed black;
	border-radius: 15px;
	list-style: none;
	padding: 0em 1em 1em 1em;
	margin-bottom: 1em;
}
.roadmap li.inprogress {
	background-color: #fed8b1;
}
.roadmap li.inprogress h3:after {
	content: " (in progress)"
}
.roadmap li.complete {
	background-color: lightgreen;
}
.roadmap li.complete h3:after {
	content: " (completed)"
}
.invisible {
	visibility: none;
}
table.codetable {
	margin-left: auto;
	margin-right: auto;
	width: 35rem;
}
table.codetable td {
	text-align: left;
}

.middle ol li {
	margin-left: 1em;
}