﻿

#Canvas {
    position: fixed;
    z-index:1;
    top:44px;
    left:0px;
    right:0px;
    bottom:0px;
    background-color:black;

     -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

#Canvas.signage {
    top:43px;
}

.TextSlide
{
	color:white;
	font-weight: bold;
	text-align: center;
	margin: 0 auto;
	padding: 1em;
}

    .TextSlideLogo
    {
        position: absolute;
        left: 8px;
        top: 8px;
        z-index: 1;
        max-height: 100px;
        max-width: 150px;
    }
    
.LoadingMessage
{
    background-color: Black;
}

.LoadingText
{
    font-size: 12px;
    height: 14px;
    line-height: 14px;
    margin-top: 8px;
    margin-left:8px;
    margin-right:8px;    
    font-style: italic;
    text-align:center;
}

.LoadingBlock
{
    width: 350px;
    height: 152px; /* LoadingLogo margins+height + LoadingAnim margins+height */
    margin-left: -175px; /* half width */
    margin-top: -75px; /* half height */

    position: absolute;
    top: 50%;
    left: 50%;
    
    background-color: White;
    box-shadow: 0px 0px 16px #888;
    border-radius: 8px;
}

.LoadingLogo
{
    background-image: url(images/EScreenzLogoWeb.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: 100%;
    height: 90px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.LoadingAnim
{
    background-image: url(images/ajax-loader.gif);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: 100%;
    height: 16px;
    margin-bottom: 8px;
}

.LoadingAnim.nope {
        background-image: url(images/nope.gif);
}

.SlideContent
{
	display:none;
    background:black;
}

/* Image Slide*/
.ImgContainer {
	text-align:center;
}

.LoadingMessage,.SlideContent
{
	width:100%;
	height:100%;
	background:#000;
}

.slide {
      user-select: none;
		position:absolute;
		margin:0;
        width:100%;
		height:100%;
}

/* NEW STUFF */
.slide.image {

        background-repeat:no-repeat;
	    background-position:center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: contain;

		transition: background-position .75s, visibility .76s;
    
    font-size:100%;
	  }

.slide.image.image.left {
/*  margin-left:-110%;
  transition: margin-left 5.2s;    */
 
    background-position: -1000px -0%;
    transition: background-position .75s, visibility .76s;
    visibility:hidden;
}

.slide.text {
    display:table-cell;
    text-align:center;
    text-shadow:none;
    color:white;
    font-size:36pt;
 
    line-height:100%;
    vertical-align:middle;
    background-repeat:no-repeat;
    background-position: 5% 5%;
}

.slide.text .text-wrapper
{
    margin-left:10%;
    margin-right:10%;
    position: relative;
      top: 50%;
  -webkit-transform: scale(1,1) translateY(-50%);
  -ms-transform:scale(1,1) translateY(-50%);
  transform:scale(1,1) translateY(-50%);
}

.slide.text .inner-text
{
    transform-origin: 50% 50%;
}

.button-wrapper {
   text-align:center;
}

.button-wrapper a,.button-wrapper a:active,.button-wrapper a:visited,.button-wrapper a:hover {
    background:#CCC;
    border-radius:38px;
    display:inline-block;
    height:76px;
    line-height:76px;;
    background-image:linear-gradient(rgb(255, 255, 255), rgb(224, 224, 224));
    color:#333;
    text-decoration:none;
    font-size:22pt;
    margin-top:50px;
    border: rgb(150, 150, 150) 2px solid;  
    min-width:250px;
    width:50%;
    max-width:500px;
    text-align:center;
}

.button-wrapper a:hover {
    background-image:linear-gradient(rgb(200, 200, 200), rgb(224, 224, 224));
}


.button-wrapper a span {
    text-align: center;
   text-shadow: rgb(255, 255, 255) 0px 1px 0px;
 
 
}