@font-face {
	font-family: 'Avenir';
	src: url('fonts/Avenir.eot');
	src: local('☺'), url('fonts/Avenir.woff') format('woff'), 
		url('fonts/Avenir.ttf') format('truetype'), 
		url('fonts/Avenir.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Avenir Black';
	src: url('fonts/avenir-black-webfont.eot');
	src: local('☺'), url('fonts/avenir-black-webfont.woff') format('woff'), 
		url('fonts/avenir-black-webfont.ttf') format('truetype'), 
		url('fonts/avenir-black-webfont.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Avenir Heavy';
	src: url('fonts/avenir-heavy-webfont.eot');
	src: local('☺'), url('fonts/avenir-heavy-webfont.woff') format('woff'), 
		url('fonts/avenir-heavy-webfont.ttf') format('truetype'), 
		url('fonts/avenir-heavy-webfont.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Avenir Light';
	src: url('fonts/avenir-light-webfont.eot');
	src: local('☺'), url('fonts/avenir-light-webfont.woff') format('woff'), 
		url('fonts/avenir-light-webfont.ttf') format('truetype'), 
		url('fonts/avenir-light-webfont.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Avenir Medium';
	src: url('fonts/avenir-medium-webfont.eot');
	src: local('☺'), url('fonts/avenir-medium-webfont.woff') format('woff'), 
		url('fonts/avenir-black-medium.ttf') format('truetype'), 
		url('fonts/avenir-black-medium.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'Avenir95Black';
    src: url('fonts/avenir95black.eot');
    src: url('fonts/avenir95black.eot') format('embedded-opentype'),
         url('fonts/avenir95black.woff') format('woff'),
         url('fonts/avenir95black.ttf') format('truetype'),
         url('fonts/avenir95black.svg#Avenir95Black') format('svg');
}


html,body {overflow:hidden;height:100%;-webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;}

.wrapper .dir-bg .keyboard {position:absolute;bottom:620px;left:0px;background:url(../img/keyboard.jpg) 0px 0px no-repeat;width:1080px;height:449px;z-index:2000;display:none}
.wrapper .dir-bg .keyboard .inputs {position:absolute;top:47px;left:124px}
.wrapper .dir-bg .keyboard .inputs .active {background:url(../img/keyboard-press.png) 0px 0px no-repeat;position:absolute;display:none}

.wrapper .dir-bg {position:absolute;top:234px;left:0px;width:1080px;height:1920px;background:url(../img/dir-bg.jpg) 0px 0px no-repeat;z-index:20;display:none}
.wrapper .dir-bg #search-field {font-family:'Avenir95Black';color:#919387;position:absolute;top:90px;left:165px;font-size:37px}
.wrapper .dir-bg #letter {font-family:'Avenir95Black';color:white;position:absolute;top:205px;left:84px;font-size:72px;border-bottom:4px solid white;width:793px}
.wrapper .dir-bg #letter span {padding-left:20px;line-height:100px}

.wrapper #weather-na  {position:absolute;bottom:0px;left:0px;z-index:10001;width:1080px;height:156px;background:url(../img/weather-bg.png) 0px 0px repeat-x;display:none}
.wrapper #weather-container {position:absolute;bottom:0px;left:0px;z-index:10000;width:1080px;height:156px}
.wrapper #tmp-container {position:absolute;bottom:0px;left:0px;z-index:5000;width:1080px;height:156px;}

.wrapper .dir-bg .dir-holder {position:absolute;top:310px;left:84px;font-family: 'Avenir';color:white;width:850px;height:986px;font-size:47px;line-height:1.3em;overflow:hidden;}
.wrapper .dir-bg .dir-holder ul {position:absolute;top:0px;left:0px;width:793px;margin-top:0;;padding-left:0;}
.wrapper .dir-bg .dir-holder ul li {list-style:none;;border-bottom:2px dashed white;padding-top:50px;padding-bottom:20px;clear:both;width:100%}
.wrapper .dir-bg .dir-holder ul li .tenant {float:left;width:75%;padding-left:20px;}
.wrapper .dir-bg .dir-holder ul li .suit {float:right;width:17%;text-align:right;padding-right:20px;}

.wrapper .dir-bg .dir-holder ul li .suit .shade3,
.wrapper .dir-bg .dir-holder ul li .suit .shade2,
.wrapper .dir-bg .dir-holder ul li .suit .shade1 {float:right;padding-left:15px;padding-right:15px;font-size:24px;line-height:1.9em;height:40px;text-align:center;text-transform:uppercase;border-radius: 99px;background-color:#343333;letter-spacing:1px}
.wrapper .dir-bg .dir-holder ul li .suit .shade2 {background-color:#FFFFFF;color:#343333;}
.wrapper .dir-bg .dir-holder ul li .suit .shade3 {background-color:#3f5364;color:#FFFFFF;}


.wrapper .dir-bg .more-arrow {width:69px;height:93px;position:absolute;top:1088px;left:8px;display:none}
.wrapper .dir-bg .more-arrow #btn-up {cursor:pointer;background:url(../img/arrow-more-off.png) 0px 0px no-repeat;width:69px;height:38px;position:absolute;top:0px;left:0px;opacity:.1}
.wrapper .dir-bg .more-arrow #btn-down {cursor:pointer;background:url(../img/arrow-more-off.png) 0px -55px no-repeat;bottom:0px;width:69px;height:38px;position:absolute;left:0px;;opacity:.1}

.wrapper .dir-bg .letter-area {position:absolute;top:201px;right:0px;width:114px;height:1066px;z-index:20}
.wrapper .dir-bg .letter-area .alpha {position:absolute;left:0px;width:54px;height:41px;cursor:pointer;z-index:2}

.wrapper .dir-bg .letter-area .letter-inactive {background:url(../img/dir-inactive.png) 0px 0px no-repeat;width:114px;height:41px;position:absolute;top:0px;left:0px;z-index:6}
.wrapper .dir-bg .letter-area #letter-selected {background:url(../img/dir-active.png) 0px 0px no-repeat;width:114px;height:41px;position:absolute;top:0px;left:0px;z-index:5}
.wrapper .dir-bg .letter-area #letter-selected #letter-pt {background:url(../img/btn-arrow.png) 0px 0px no-repeat;width:41px;height:56px;position:absolute;top:-6px;left:54px}
 

.wrapper #dir-btn {position:absolute;top:0px;left:0px;width:1080px;height:1920px;z-index:1000}
/*
http://thecodeplayer.com/walkthrough/animating-css3-gradients
.wrapper .touch-nfo {position:absolute;top:1200px;left:0px;background:url(../img/touch-nfo.png) 0px 0px no-repeat;width:379px;height:179px;z-index:10}
*/

.wrapper .touch-nfo {
position:absolute;top:1200px;left:0px;z-index:10;
width:379px;height:179px;
background: -webkit-linear-gradient(top,  rgba(82,82,76,1) 0%,rgba(145,147,135,1) 100%); /* Chrome10+,Safari5.1+ */
webkit-border-radius: 0px 50px 50px 0px;-moz-border-radius: 0px 50px 50px 0px;border-radius: 0px 50px 50px 0px;
text-align:right;
color:white;
letter-spacing:1px;
overflow:hidden;
z-index:11;
}

.wrapper .touch-nfo .shine {
	position:absolute;top:0px;left:0px;
	opacity:.25;
	width:100%;height:100%;webkit-border-radius: 0px 50px 50px 0px;
	-moz-border-radius: 0px 50px 50px 0px;border-radius: 0px 50px 50px 0px;
  -webkit-animation-name: MOVE-SHINY;
	-webkit-animation-duration: 5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes MOVE-SHINY {
    from {-webkit-transform: translateX(400%);}
    to {-webkit-transform: translateX(-400%);}
}

.wrapper .touch-nfo .line1 {font-family: 'Avenir Heavy';font-size:28px;padding-right:45px;padding-top:48px}
.wrapper .touch-nfo .line2 {font-family: 'Avenir Light';font-size:22px;padding-right:45px;line-height:1.4em}

.wrapper {width:1080px;height:1920px;overflow:hidden;position:relative}
.wrapper .header {position:absolute;top:0px;left:0px;z-index:100;width:1080px;height:234px;background-color:#3f5364}
.wrapper .header .title {position:absolute;top:47px;left:0px;background:url(../img/header.png) 0px 0px no-repeat;width:1080px;height:140px;}
.wrapper .footer {position:absolute;bottom:0px;left:0px;z-index:100;background:url(../img/footer.png) 0px 0px no-repeat;width:1080px;height:390px}

.wrapper .main {position:absolute;top:234px;left:0px}
.wrapper .main img {position:absolute;top:0px;left:0px;display:none;z-index:10}

.wrapper .footer #line {position:absolute;top:18px;left:500px;border-left:2px solid white;width:2;height:116px;overflow:hidden}
.wrapper .footer #date {position:absolute;top:31px;left:550px;font-family:'Avenir';color:white;font-size:50px;letter-spacing:1px;text-transform:uppercase}
.wrapper .footer #date strong {font-family: 'Avenir95Black';font-weight:normal;font-size:50px;letter-spacing:5px}
.wrapper .footer #date sup { vertical-align: super;font-size: 20px;padding-left:2px;text-transform:none}

.wrapper .footer #time {position:absolute;top:53px;left:200px;font-family:'Avenir';font-size:60px;color:white;;width:300px;letter-spacing:1px;z-index:1}

.wrapper .footer .gauge-na {font-family:'Avenir';font-size:60px;position:absolute;top:60px;left:825px;text-align:center;width:200px;z-index:100;display:none}

.wrapper .footer #clock {position: absolute;top:14px;left:99px;width: 83px;height: 83px;margin: 20px auto 0 auto;list-style: none;}

.wrapper .footer #clock #pin {position:absolute;z-index:5;top:36px;left:-3px;background:url(../img/clock-pin.png);width:11px;height:10px;}
.wrapper .footer #clock #min, 
.wrapper .footer #clock #hour {position: absolute;width: 6px;height: 83px;top: 0px;left: 0px;}
.wrapper .footer #clock #min {background: url(../img/minhand.png);z-index: 2;opacity:.7}
.wrapper .footer #clock #hour {background: url(../img/hourhand.png);z-index: 1;opacity:.7}

.wrapper .footer .gauge-title {position:absolute;top:45px;left:450px;font-family: 'Avenir95Black';font-size:34px;color:white;text-transform:uppercase;letter-spacing:1px}
.wrapper .footer .gauge-border {position:absolute;top:8px;right:10px;background:url(../img/gauge-box.png) 0px 0px no-repeat;width:298px;height:144px;z-index:10}
.wrapper .footer .bg-white {position:absolute;top:8px;right:10px;width:298px;height:144px;background-color:white;display:block;overflow:hidden;z-index:4}
.wrapper .footer .zerofootprint {position:absolute;top:135px;right:75px;background:url(../img/zerofootprint.png) 0px 0px no-repeat;width:165px;height:15px;z-index:8}
.wrapper .footer .gauge {position:absolute;right:-13px;top:-5px;width:350px;height:165px;overflow:hidden;background-color:white;    transform: scale(.72,.72);z-index:5} 
.wrapper .footer .gauge iframe {position:absolute;top:-20px;left:-65px;z-index:5;overflow:hidden;}
.wrapper .footer .gauge .blank {position:absolute;bottom:-10px;right:0px;width:300px;height:25px;background-color:red;display:none;overflow:hidden;z-index:10}

.wrapper .weather {float:left;height:228px;width:354px;font-family: 'Avenir Heavy';color:white;font-size:20px;letter-spacing:1px;margin-right:4px}
.wrapper .weather .icon {position:absolute;top:27px;left:10px;}
.wrapper .weather .descr {float:right;text-transform:uppercase;width:200px;height:156px;display: table;line-height:1.2em}
.wrapper .weather .descr div {vertical-align:middle;  display: table-cell; }
.wrapper .weather .descr div span {font-size:18px}


.wrapper .forecast {float:left;height:228px;width:180px;color:white;padding-top:14px;}
.wrapper .forecast .day {font-family: 'Avenir';text-align:center;font-size:16px;text-transform:uppercase;letter-spacing:1px;}
.wrapper .forecast .icon {text-align:center;}
.wrapper .forecast .highlow {font-family: 'Avenir Light';text-align:center;font-size:13px;text-transform:uppercase;letter-spacing:1px}
.wrapper .forecast .highlow span {font-family: 'Avenir Heavy';font-size:14px}
.wrapper .forecast .descr {font-family: 'Avenir Heavy';text-align:center;font-size:12px;text-transform:uppercase;margin-top:8px;letter-spacing:1px;height:35px}

.sponsor {font-size:10px;color:#817F7F;text-align:right;padding-right:10px;line-height:23px;border-top:1px solid #BABABA;}
.sponsor a {text-decoration:none;color:#E0E0E0}

.announcement-holder {position: absolute;bottom:0px;left:0px;height:50px;width:100%;border-top:1px solid white;background-color:#676767;line-height:55px;display:none}
.news-holder {position: absolute;top:1687px;left:0px;z-index:10000;overflow:hidden;background-color:#333;height:72px;width:100%;line-height:72px}

.announcmentticker{ -webkit-transition: all 0s linear;-moz-transition: all 0s linear;-o-transition: all 0s linear;transition: all 0s linear;position: relative;list-style-type: none;margin: 0;padding: 0;}
.announcmentticker li {float: left;margin: 0;padding: 0 50px;box-sizing:border-box;text-transform:uppercase;font-family: 'Avenir Medium';font-size:30px; color: white; }


.tickercontainer {width:100%;height:100%}
.tickercontainer .mask { position: relative;top: 0px;height:100%;overflow: hidden;height:100%}

.newsticker { -webkit-transition: all 0s linear;-moz-transition: all 0s linear;-o-transition: all 0s linear;transition: all 0s linear;position: relative;list-style-type: none;margin: 0;padding: 0}
.newsticker li {float: left;margin: 0;padding: 0 50px;box-sizing:border-box;text-transform:uppercase;font-family: 'Avenir Medium';font-size:30px; color: white; }