@charset "utf-8";

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}

/*** Start Vanilla CSS 1.0.2 */ body{font:9pt/1.5em sans-serif;}pre,code,tt{font:1em/1.5em 'Andale Mono','Lucida Console',monospace;}h1,h2,h3,h4,h5,h6,b,strong{font-weight:bold;}em,i,dfn{font-style:italic;}dfn{font-weight:bold;}p,code,pre,kbd{margin:0 0 1.5em 0;}blockquote{margin:0 1.5em 1.5em 1.5em;}cite{font-style:italic;}li ul,li ol{margin:0 1.5em;}ul,ol{margin:0 1.5em 1.5em 1.5em;}ul{list-style-type:disc;}ol{list-style-type:decimal;}ol ol{list-style:upper-alpha;}ol ol ol{list-style:lower-roman;}ol ol ol ol{list-style:lower-alpha;}dl{margin:0 0 1.5em 0;}dl dt{font-weight:bold;}dd{margin-left:1.5em;}table{margin-bottom:1.4em;width:100%;}th{font-weight:bold;}th,td,caption{padding:4px 10px 4px 5px;}tfoot{font-style:italic;}sup,sub{line-height:0;}abbr,acronym{border-bottom:1px dotted;}address{margin:0 0 1.5em;font-style:italic;}del{text-decoration:line-through;}pre{margin:1.5em 0;white-space:pre;}img.centered,.aligncenter,div.aligncenter{display:block;margin-left:auto;margin-right:auto;}img.alignright{display:inline;}img.alignleft{display:inline;}.alignright{float:right;margin-left:10px;}.alignleft{float:left;margin-right:10px;}img { max-width: 100%; }* html .clearfix{height:1%;}*+html .clearfix{display:inline-block;}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}* html .group{height:1%;}*+html .group{display:inline-block;}.group:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

h1 {
    position: absolute;
    top: 1vh;
    left: 0;
    right: 0;
    text-align: center;
    display: block;
    font-size: 6vh;
    line-height: 1.2;
}

#about h1, #privacy h1 {
    position: static;
}

#aboutText {
    position: absolute;
    top: 10vh;
    left: 10vw;
    right: 10vw;
    padding-top: 10vh;
    font-size: 1rem;
    line-height: 1.5;
}

#privacy {
    font-size: 1rem;
}

#privacyText {
    max-width: 50em;
    margin: 3em auto;
    line-height: 1.5;
}

#about img {
    float: right;
    width: 40vw;
    margin-left: 5vw;
    margin-bottom: 5vw;
}

a:link {
    color: #0000a0;
}

a:visited {
    color: #000080;
}

a:hover, a:active {
    color: #0000e0;
}

#login {
    position: absolute;
    display: block;
    text-align: center;
    font-size: 3vh;
    line-height: 1.2;
    background: rgba(255, 255, 255, 0.75);
    top: 30vh;
    left: 0;
    right: 0;
}

#loginbg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #9bbcdb url("hivemind.jpg") no-repeat;
    background-size: 100%;
}

@media screen and (max-width: 1000px) {
    #loginbg {
        background: #9bbcdb url("hivemind_1000.jpg") no-repeat;
        background-size: 100%;
    }
}

#login h1 {
    position: static;
    font-size: 10vh;
}

#login p {
    margin: 0 5vw;
}

.error {
    color: #800000;
    font-weight: bold;
}

#login form input, .button {
    font-size: 5vh;
    margin: 3vh 0;
    padding: 0 1vw;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid black;
	color: black;
}

#login form input.button, .button {
	-moz-border-radius:2vh;
	-webkit-border-radius:2vh;
	border-radius:2vh;
}

a.button {
    display: inline-block;
    text-decoration: none;
    font-size: 3vh;
    margin: 2vh;
}

#credits .button {
    display: block;
    float: right;
    margin: 0.5vh;
}

#login form input:hover {
    background: rgba(255, 255, 255, 1);
}

#credits {
    position: absolute;
    display: block;
    font-size: 2vh;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1vh;
    text-align: center;
    line-height: 1.2;
    background: rgba(180, 180, 180, 1);
    opacity: 0.75;
}

#credits p {
    margin: 0;
}

#hivemind {
    width: 100vw;
    height: 75vw;
    max-height: 100vh;
    max-width: 133.33vh;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#hivemind img, #hivemind canvas {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

#hivemind canvas {
    pointer-events: none;
}

#hivemind p {
    line-height: 1;
    position: absolute;
    display: block;
    text-align: center;
    padding: 5vh 2vw;
    margin: 0;
    font-size: 6vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid red;
    background: rgba(255, 255, 255, 0.75);
}

#hivemind .noslides {
    display: block;
    background: #9bbcdb url("hivemind.jpg") no-repeat;
    background-size: 100%;
    height: 100%;
    width: 100%;
}

@media screen and (max-width: 1000px) {
    #hivemind .noslides {
        background: #9bbcdb url("hivemind_1000.jpg") no-repeat;
        background-size: 100%;
    }
}

#hostControl {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    height: 46px;
    overflow: hidden;
    background: black;
    color: white;
    font-size: 15px;
    text-align: right;
}

#code {
    display: block;
    font-size: 46px;
    height: 46px;
    line-height: 1;
    position: absolute;
    top: 0;
    left: 5px;
    color: white;
}

#hostControl .control {
    display: inline-block;
    padding: 2px 5px;
    vertical-align: middle;
    text-align: left;
}

#screenCaptureControl button {
    background: rgba(255, 255, 255, 0.5);
    border: none;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	color: black;
	text-decoration:none;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    height: 19px;
    font-size: 15px;
}

.uploadControl:hover, #screenCaptureControl button:hover {
    background: rgba(255, 255, 255, 0.8);
}

.uploadControl input {
    position: absolute;
    opacity: 0;
    margin-left: -20px;
}

.uploadControl span {
    display: inline-block;
    margin-top: 1px;
}

.uploadControl {
    display: inline-block;
    background: rgba(255, 255, 255, 0.5);
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	cursor:pointer;
	color: black;
	text-decoration:none;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    position: relative;
    overflow: hidden;
    width: 60px;
    height: 19px;
    margin: 0;
    text-align: center;
}

#hostControl .control label, #hostControl .control input {
    vertical-align: baseline;
}

#hostControlAdvanced {
    position: absolute;
    display: block;
    opacity: 0;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    top: 10px;
    right: 46px;
    background: white;
    border: 1px solid black;
    border-top: none;
    padding: 5px;
    -webkit-box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
    box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
    font-size: 15px;
    color: black;
}

#hostControlAdvanced:hover {
    opacity: 1;
    top: 46px;
}

#hostControlAdvanced button {
    background: rgba(180, 180, 180, 1);
    display: block;
    border: none;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	color: black;
	text-decoration:none;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    height: 19px;
    font-size: 15px;
}

#hostControlAdvanced button:hover {
    background: rgba(220, 220, 220, 1);
}

#participation {
    display: inline-block;
    font-size: 31px;
}

#hostOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#nextButton, #prevButton {
    background: rgba(255, 255, 255, 0.5);
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	border: 1px solid black;
	cursor:pointer;
	color: black;
	font-size:20vh;
	text-decoration:none;
    top: 20vh;
    bottom: 20vh;
    padding: 1vh;
    opacity: 0;
    transition: 1s;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
}

#nextButton:hover, #nextButton:active, #prevButton:hover, #prevButton:active {
    opacity: 1;
}

#nextButton {
    position: absolute;
    right: 1vw;
}

#prevButton {
    position: absolute;
    left: 1vw;
}

#hostView {
    position: absolute;
    top: 46px;
    left: 0;
    right: 0;
    bottom: 0;
    background: black;
}

#hostView.topBarOverlap {
    top: 0;
}

#hostView img, #hostView canvas {
    height: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

#hostView.fillScreen img, #hostView.fillScreen canvas {
    width: 100%;
    height: 100%;
    margin: 0;
}

#hostView:empty {
    background: black;
    color: white;
    font-size: 10vh;
    padding-top: 45vh;
    text-align: center;
}

#hostView:empty:after {
    content: "[no slide]";
}

#videoBuffer {
    display: none;
}

#canvasBuffer {
    display: none;
}

#sessionTitle {
    display: inline-block;
    font-size: 3vh;
    text-align: center;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid black;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	cursor:pointer;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    padding: 0.5vh 1vw;
    margin: 0.5vh 0.5vw;
}

#slideList {
    position: absolute;
    bottom: -15vh;
    min-height: 20vh;
    left: 0;
    right: 0;
    opacity: 0;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    text-align: center;
}

#slideList:hover {
    bottom: 0;
    opacity: 1;
}

#slideList ul {
    display: block;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.75);
    border-top: 1px solid black;
    margin: 0;
}

#slideList li {
    display: inline-block;
    position: relative;
}

#slideList img {
    height: 13vh;
    margin: 1vh;
	cursor:pointer;
    border: 1px solid black;
}

#slideList .deleteSlide {
    position: absolute;
    top: 1.5vh;
    right: 2vh;
    color: red;
    font-size: 2vh;
    width: 2vh;
    height: 2vh;
    overflow: hidden;
    text-align: center;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid black;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	cursor:pointer;
	border-radius:4px;
    opacity: 0.5;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
}

#slideList .deleteSlide:hover {
    opacity: 1;
}

#hostLogin {
    width: 100%;
    height: 100%;
    text-align: center;
}

#hostLogin input {
    font-size: 2vh;
}

#hostLogin select {
    width: 50%;
    height: 75%;
    margin: 1vh auto 1vh auto;
    display: block;
    font-size: 2vh;
}

#newSession input{
    font-size: 4vh;
    margin: 10vh;
}

#deleteSession {
    display: inline;
}

#deleteSession p {
    margin: 1vh 0;
    font-size: 2vh;
    color: #800000;
}