| a:link { color: #FFFFFF; } |
| a:visited {color: #FFFFFF; } |
| html, body { |
| background-color: #000000; |
| height: 100%; |
| font-family: Verdana, Arial, Helvetica, sans-serif; |
| } |
| body { |
| margin: 0; |
| padding: 0; |
| } |
| footer { |
| position: absolute; |
| bottom: 0; |
| width: 100%; |
| height: 28px; |
| background-color: #3F3F3F; |
| color: #FFFFFF; |
| font-size: 13px; font-weight: bold; |
| line-height: 28px; |
| text-align: center; |
| } |
| #container { |
| background-color: #000000; |
| position: absolute; |
| height: 100%; |
| width: 100%; |
| margin: 0px auto; |
| -webkit-perspective: 1000; |
| } |
| #card { |
| -webkit-transition-duration: 2s; |
| -webkit-transform-style: preserve-3d; |
| } |
| #local { |
| position: absolute; |
| width: 100%; |
| transform: scale(-1, 1); |
| -webkit-transform: scale(-1, 1); |
| -webkit-backface-visibility: hidden; |
| } |
| #remote { |
| position: absolute; |
| width: 100%; |
| -webkit-transform: rotateY(180deg); |
| -webkit-backface-visibility: hidden; |
| } |
| #mini { |
| position: absolute; |
| height: 30%; |
| width: 30%; |
| bottom: 32px; |
| right: 4px; |
| opacity: 1.0; |
| transform: scale(-1, 1); |
| -webkit-transform: scale(-1, 1); |
| } |
| #localVideo { |
| width: 100%; |
| height: 100%; |
| opacity: 0; |
| -webkit-transition-property: opacity; |
| -webkit-transition-duration: 2s; |
| } |
| #remoteVideo { |
| width: 100%; |
| height: 100%; |
| opacity: 0; |
| -webkit-transition-property: opacity; |
| -webkit-transition-duration: 2s; |
| } |
| #miniVideo { |
| width: 100%; |
| height: 100%; |
| opacity: 0; |
| -webkit-transition-property: opacity; |
| -webkit-transition-duration: 2s; |
| } |
| #hangup { |
| font-size: 13px; font-weight: bold; |
| color: #FFFFFF; |
| width: 128px; |
| height: 24px; |
| background-color: #808080; |
| border-style: solid; |
| border-color: #FFFFFF; |
| margin: 2px; |
| } |
| #infoDiv { |
| position: absolute; |
| float: right; |
| background-color: grey; |
| margin: 2px; |
| display: none; |
| } |