michael@0: :root {
michael@0:   font: caption;
michael@0: }
michael@0: 
michael@0: html {
michael@0:   background-color: #111;
michael@0:   background-image: url("chrome://browser/skin/devtools/noise.png");
michael@0: }
michael@0: 
michael@0: body {
michael@0:   font-family: Arial, sans-serif;
michael@0:   color: white;
michael@0:   max-width: 600px;
michael@0:   margin: 30px auto 0;
michael@0:   box-shadow: 0 2px 3px black;
michael@0:   background-color: #3C3E40;
michael@0: }
michael@0: 
michael@0: h1 {
michael@0:   margin: 0;
michael@0:   padding: 20px;
michael@0:   background-color: rgba(0,0,0,0.12);
michael@0:   background-image: radial-gradient(ellipse farthest-corner at center top , rgb(159, 223, 255), rgba(101, 203, 255, 0.3)), radial-gradient(ellipse farthest-side at center top , rgba(101, 203, 255, 0.4), rgba(101, 203, 255, 0));
michael@0:   background-size: 100% 2px, 100% 5px;
michael@0:   background-repeat: no-repeat;
michael@0:   border-bottom: 1px solid rgba(0,0,0,0.1);
michael@0: }
michael@0: 
michael@0: form {
michael@0:   display: inline-block;
michael@0: }
michael@0: 
michael@0: label {
michael@0:   display: block;
michael@0:   margin: 10px;
michael@0: }
michael@0: 
michael@0: label > span {
michael@0:   display: inline-block;
michael@0:   min-width: 150px;
michael@0:   text-align: right;
michael@0:   margin-right: 10px;
michael@0: }
michael@0: 
michael@0: #submit {
michael@0:   float: right;
michael@0: }
michael@0: 
michael@0: input:invalid {
michael@0:   box-shadow: 0 0 2px 2px #F06;
michael@0: }
michael@0: 
michael@0: section {
michael@0:   min-height: 160px;
michael@0:   margin: 60px 20px;
michael@0:   display: none; /* By default, hidden */
michael@0: }
michael@0: 
michael@0: .error-message {
michael@0:   color: red;
michael@0: }
michael@0: 
michael@0: .error-message:not(.active) {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: body:not(.actors-mode):not(.connecting) > #connection-form {
michael@0:   display: block;
michael@0: }
michael@0: 
michael@0: body.actors-mode > #actors-list {
michael@0:   display: block;
michael@0: }
michael@0: 
michael@0: body.connecting > #connecting {
michael@0:   display: block;
michael@0: }
michael@0: 
michael@0: #connecting {
michael@0:   text-align: center;
michael@0: }
michael@0: 
michael@0: #connecting > p > img {
michael@0:   vertical-align: top;
michael@0: }
michael@0: 
michael@0: .actors {
michael@0:   padding-left: 0;
michael@0: }
michael@0: 
michael@0: .actors > a {
michael@0:   display: block;
michael@0:   margin: 5px;
michael@0:   padding: 5px;
michael@0:   color: white;
michael@0: }
michael@0: 
michael@0: .remote-process {
michael@0:   font-style: italic;
michael@0:   opacity: 0.8;
michael@0: }
michael@0: 
michael@0: footer {
michael@0:   padding: 10px;
michael@0:   background-color: rgba(0,0,0,0.12);
michael@0:   border-top: 1px solid rgba(0,0,0,0.1);
michael@0:   font-size: small;
michael@0: }
michael@0: 
michael@0: footer > a,
michael@0: footer > a:visited {
michael@0:   color: white;
michael@0: }