Click on images to see them in full screen
Base CSS
The following lists the Main Door Tablet CSS.
Note the following:
- We also use a Jquery Mobile CSS before adding our own
- Door Tablet use the Base CSS first, then the Theme CSS (
) and finally your own CSS, in that order.
To see where each element is used, we recommend that you open the client in a browser and use an inspector for each element you are interested in. This will show you the name of the element, the selectors and how the styles are made up.
@font-face {
font-family: 'Oswald';
font-weight: 400;
src: local('Oswald'), local('Oswald'), url('../oswald-font.woff') format('woff');
}
/* ============================ Main room display ================================= */
@font-face {
font-family: 'BebasNeueRegular';
src: url('file:///android_asset/fonts/BebasNeue-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
[data-role="popup"] {
font-family: "HelveticaNeue-Roman", "Helvetica Neue", Helvetica,Arial,sans-serif;
}
/* ============================== doors app ======================================= */
body { margin: 0; padding: 0; }
h3 .helpText { font-size: 0.9em; color: #B3B3B3; font-weight: normal; }
html, body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
label img { vertical-align: middle; }
.actionIcons{
position: absolute;
top: 4px;
left: 3px;
width: 62px; /* fixed width */
}
/* ===================== Airport wayfinding arrows ============================== */
.apArrows {
width: 40px;
padding: 0 0px 0 10px;
background-repeat: no-repeat;
}
.apCol, .apMeet td { vertical-align: top; }
.apColSep { width: 15px; }
.apCurrentMeet .apLights {
background-image: url("../img/ap-busy.png");
background-repeat: no-repeat;
background-position: center left;
}
.apCurrentMeet .apTimes { color: #C82B2B; }
.apFreeArrow {
padding: 0;
background-size: 0.7em 0.7em;
background-position: left bottom;
}
.apFutureMeet .apLights {
background-image: url("../img/ap-free.png");
background-repeat: no-repeat;
background-position: center left;
}
.apFutureMeet .apTimes { /* not set */ }
.apLights { width: 40px; }
.apMeet {
width: 100%;
margin-bottom: 6px;
border-top: 1px solid gray;
}
.apMeetRoom {
font-size: 1em;
color: gray;
height: 1em;
overflow-x: hidden;
overflow-y: hidden;
}
.apMeetSubj { font-size: 1.2em; }
.apMeetTxt { height: 1em; overflow-x: hidden; overflow-y: hidden; }
.apPage, #apFreeRooms { margin: 0 14px 0px 14px; }
.apPageIndex {
display: inline-block;
margin-right: 10px;
height: 20px;
width: 22px;
border: 1px solid white;
color: white;
font-size: 18px;
-moz-border-radius: 4px;
border-radius: 4px;
line-height: 1em;
padding-top: 3px;
text-align: center;
}
/* ================ airport meetings classes for coloring etc ======================= */
.apSoonMeet .apLights{
background-image: url("../img/ap-soon.png");
background-repeat: no-repeat;
background-position: center left;
}
.apSoonMeet .apTimes{ color: #FFAC30; }
.apTimes { width: 140px; font-size: 2em; line-height: 1; }
.barFreeFor{ color: #006400; }
.bBarCont { position: relative; }
.bBarTblTimes { border-collapse: separate; border-spacing: 1px 0px; }
.bookingBar { width: 100%; height: 26px; margin-bottom: 5px; }
.bookingBar td {
height: 26px; /*keep this 26 to allow door tablet to automatically set the height */
vertical-align: top;
border-top: 0px;
border-bottom: 0px;
word-wrap: break-word;
}
.bPurpose {
font-size: 0.8em;
line-height: 0.92em;
display: inline-block;
margin: 2px 3px 0px 3px;
}
.bTimeNums {
display: inline-block;
position: relative;
width: 95%;
top: 0px;
right: 4px;
text-align: right;
margin-top: 5px;
margin-right: 5px;
}
.busyTime { overflow: hidden; }
.caption_1, .caption_2, .caption_3, .caption_4 { position: absolute; }
/* =================================== Char pad =================================== */
.charTab { border-spacing: 3px; border-collapse: separate; }
.charTab td, .kbToggle {
height: 26px;
font-size: 16px;
font: "HelveticaNeue-Roman", "Helvetica Neue";
text-align: center;
vertical-align: middle;
border: 0px solid #E9E9E9;
padding: 5px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.checkInCd {
font-size: 4em;
font-weight: bold;
color: #026F90;
vertical-align: top;
}
.cnt {
font-size: 11px;
font-weight: bold;
padding: 2px 5px 2px 5px;
}
.compactTD { text-overflow: hidden; white-space: wrap; }
/* ========================= Progress Coundown Pie ============================ */
.countDown { height: 20px; width: 20px; }
.curAbbrTime { font-size: 0.5em; }
.curentLang{ opacity: 1; }
.current { opacity: 0.7; }
.dispErr, #relErr, #extErr { color: red; }
.dispSchedul, .dispWelcome, .dispCluster, .dispSlideshow, .dispAirport { text-decoration: none; }
.dnBut {
background: #40b1e5; /* Old browsers */
background: -moz-linear-gradient(top, #40b1e5 0%, #185c89 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #40b1e5 0%,#185c89 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(top bottom, #40b1e5 0%,#185c89 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40b1e5', endColorstr='#185c89',GradientType=0 ); /* IE6-9 */
color: white;
font-weight: normal;
}
/* ==================================== buttons ======================================= */
.doorBut {
display: inline-block;
-moz-border-radius: 0.3em;
border-radius: 0.3em;
text-decoration: none;
font-weight: normal;
margin: 2px 2px 2px 4px;
vertical-align: middle;
height: 38px;
}
.doorBut img {
float: left;
width: 24px;
height: 24px;
margin: 6px;
margin-top: 8px;
}
.doorBut span {
display: inline-block;
margin-top: 8px;
margin-right: 10px;
color: #FFFFFF;
font-size: 20px;
font-weight: normal;
}
.facilCompact { position: absolute; top: 22px; left: 3px; z-index: 99; }
.facilCompact .facilTblList .capa { display: none; }
.facilCompact .facilTblList tbody tr td {
line-height: 1em;
font-size: 1em;
background-size: 24px;
height: 20px;
width: 27px;
}
.facilCompact table { border-bottom: 0; }
.facilFields .ui-btn {
padding-top: 0.4em;
padding-right: 1em;
padding-bottom: 0.4em;
}
.facilTblList tbody tr td{
font-family: "HelveticaNeue-Roman", "Helvetica Neue", Helvetica,Arial,sans-serif;
border: 0px;
font-size: 1.5em;
line-height: 1.5em;
font-weight: bold;
}
.facilTblList td{ border: 0px; width: 42px; height: 30px; }
.flag {
position: absolute;
right: 20px;
bottom: 20px;
-webkit-box-shadow: 3px 3px 3px #7C7C7C;
box-shadow: 3px 3px 3px #7C7C7C;
}
.freeRoomDescr { font-size: 0.8em; color: #299A0B; }
.freeTimeBox {
position: relative;
width: 100%;
font-size: 18px;
min-height: 30px;
background-color: white;
opacity: 0.5;
text-align: center;
z-index: 0;
}
.freeTimeBox .curAbbrTime { font-weight: normal; font-size: 0.7em; }
.freeTimeBox span { display: inline-block; line-height: 30px; }
.helpText { font-size: 0.7em; color: #B3B3B3; }
.inDemo {
display: none;
max-width: 80px;
padding: 5px;
text-align: center;
vertical-align: middle;
background: #eaba7e;
-moz-border-radius: 4px;
border-radius: 4px;
background: #fefcea;
background: -moz-linear-gradient(top, #fefcea 0%, #fcef81 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#fcef81));
background: -webkit-linear-gradient(top, #fefcea 0%,#fcef81 100%);
background: -o-linear-gradient(top, #fefcea 0%,#fcef81 100%);
background: -ms-linear-gradient(top, #fefcea 0%,#fcef81 100%);
background: linear-gradient(top bottom, #fefcea 0%,#fcef81 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#fcef81',GradientType=0 );
font-size: 0.8em;
font-family: "HelveticaNeue-Roman", "Helvetica Neue", Helvetica,Arial,sans-serif;
text-transform: none;
}
.kbToggle { display: none; width: 30px; }
/* =============================== lang switcher =============================== */
.langSwitcher {
position: absolute;
width: 360px;
height: 46px;
bottom: 0;
left: 40%;
}
.licPop {
float: right;
position: absolute;
bottom: 7px;
right: 13px;
}
.lockImg, .serverAccesProb { margin-top: 5px; margin-left: 5px; }
.mapphoto { position: absolute; right: 20px; top: 20px; }
.mapphoto img {
max-width: 80px;
max-height: 80px;
vertical-align: text-top;
}
.mChair { font-weight: bold; }
.meetingBox {
position: relative;
width: 100%;
font-size: 18px;
/*min-height: 50px; */
z-index: 0;
}
.meetingDescr {
position: absolute;
float: left;
top: 10px;
left: 10px;
width: 70%;
}
.meetingTime {
position: absolute;
float: right;
top: 10px;
right: 10px;
width: 30%;
text-align: right;
}
.nbrMap {
position: absolute;
top: 30px;
right: 155px;
width: 30px;
height: 30px;
}
.nbrPreImg {
width: 95%;
border: thin solid black;
box-shadow: 3px 3px 3px #888888;
}
.nbrPreLeftCol { width: 35%; }
.nbrPreMidCol { width: 20%; }
.nbrPreRightCol { width: 45%; }
.nbrSchedActions {
position: absolute;
bottom: 10px;
left: 10px;
font-size: 12px;
font-family: "Arial";
-moz-border-radius: 0.4em;
border-radius: 0.4em;
font-weight: normal;
padding: 5px;
margin: 0px 2px 2px 4px;
vertical-align: middle;
z-index: 99;
}
.nbrSchedActions a { text-decoration: none; color: #000000; }
/* =================================== phone pad =================================== */
.padContainer {
width: 300px;
background-color: #DDDDDD;
-moz-border-radius: 6px;
border-radius: 6px;
}
.phoneTab { border-spacing: 5px; border-collapse: separate; }
.phoneTab td {
width: 88px;
height: 40px;
font-size: 32px;
font: "HelveticaNeue-Roman", "Helvetica Neue";
text-align: center;
vertical-align: middle;
border: 0px solid #E9E9E9;
padding: 5px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.phoneTab td img { vertical-align: top; margin-top: 10px; }
.resourceName {
width: 100%;
height: 3em;
background-color: #FAF7E9;
text-align: center;
vertical-align: middle;
line-height: 3em;
-moz-border-radius: 0.8em;
border-radius: 1em;
}
.ResumeSmall { font-size: 0.9em; color: #596A72; line-height: 0.6em; }
/* ================ some style for room list display ====================== */
.roomEntryTbl { table-layout: fixed; }
.roomEntryTbl .firstCol { width: 160px; }
.roomEntryTbl .ui-li-heading { margin-top: 0px; display: inline; white-space: normal; }
.roomEntryTbl td { vertical-align: top; white-space: normal; }
.roomNotes {
font-size: 0.8em;
font-weight: normal;
padding-left: 10px;
}
.roomTbl {
border: 0px solid #CCCCCC;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
padding: 10px;
width: 100%;
}
.roomTbl .midCol { width: 8%; min-height: 40px; }
.roomTbl td { width: 23%; }
/* ============================== Facilities related ======================= */
.schFacil {
margin-top: 10px;
float: right;
font-size: 11px;
margin-right: -10px;
}
.schMeetNext { opacity: 0.7; }
.schRoomInfo { height: 48px; }
.schRoomInfo, .timeBar, .bookingBar {
position: relative;
margin: 0px 14px 0px 14px;
width: 97%;
}
.schRoomName {
margin-top: 14px;
display: inline-block;
font-size: 1.5em;
}
.scrollers { display: inline-block; height: 18px; width: 18px; }
.sDay, .sHours, .sMins, .sSecs {
font-size: 40px;
line-height: 0.9em;
text-indent: right;
}
.sDay, .sSecs { font-size: 26px; }
.serverAccesProb { display: none; }
/* ================================= sliders =============================== */
.slide.in {
-webkit-transform: translateX(0);
-webkit-animation-name: slideinfromright;
}
.slide.out {
-webkit-transform: translateX(-100%);
-webkit-animation-name: slideouttoleft;
}
.startVisible { background: white; opacity: 0.6; }
.stylesDiv {
border: 1px solid #999999;
font-size: 0.8em;
-moz-border-radius: 0.4em;
border-radius: 0.4em;
padding: 10px;
overflow: scroll;
}
.switchLink {
display: inline-block;
vertical-align: middle;
max-height: 38px;
margin-right: 5px;
opacity: 0.5;
}
.tbarTime {
border-left: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
color: #CCCCCC;
font-size: 0.8em;
}
@-webkit-keyframes slideinfromright {
from { -webkit-transform: translateX(100%); }
to { -webkit-transform: translateX(0); }
}
@-webkit-keyframes slideouttoleft {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(-100%); }
}
.slide.in.reverse {
-webkit-transform: translateX(0);
-webkit-animation-name: slideinfromleft;
}
.slide.out.reverse {
-webkit-transform: translateX(100%);
-webkit-animation-name: slideouttoright;
}
@-webkit-keyframes slideinfromleft {
from { -webkit-transform: translateX(-100%); }
to { -webkit-transform: translateX(0); }
}
@-webkit-keyframes slideouttoright {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(100%); }
}
/* ============================== bits required for popups ======================== */
.textmiddle { /* used for icon display */ vertical-align: middle; }
.timeBar table, .bookingBar table {
width: 100%;
border-bottom: 1px solid #CCCCCC;
border-collapse: collapse;
}
.timeBarReqActions { background-color: red; }
.timeBarReqActions .tbarTime { color: white; }
.timeMarker { position: absolute; width: 1px; left: 1px; top: 0px; }
.ui-field-contain, .ui-body, .ui-br { padding: 0px; margin: 0px; }
/* ====================== some style for room list display ========================= */
.ui-input-search input { height: 32px; }
.ui-loader-default { opacity: 0.75; }
/* ================================ phone pad buttons ============================== */
.upBut {
background: #aaaaaa; /* Old browsers */
background: -moz-linear-gradient(top, #aaaaaa 0%, #686868 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #aaaaaa 0%,#686868 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(top bottom, #aaaaaa 0%,#686868 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa', endColorstr='#686868',GradientType=0 ); /* IE6-9 */
color: white;
font-weight: normal;
}
/* ============================= wayfinding arrows ================================ */
.wa , .apFreeArrow {
display: inline-block;
width: 1em;
height: 1em;
background-size: 1em 1em;
background-repeat: no-repeat;
padding-right: 0.5em;
background-position: left center;
}
.wcMeeting {
width: 100%;
border-bottom: 1px solid #C0C0C0;
margin-top: 14px;
}
.wcMsg { font-size: 48px; line-height: 0.9em; }
.wcMsg img { vertical-align: middle; }
.wcRoomInfo { font-size: 24px; line-height: 0.9em; }
#aboutToResume {
width: 400px;
height: 90px;
padding-top: 20px;
margin-left: auto;
margin-right: auto;
background-color: #DEF7F5;
text-align: center;
border: 1px solid #327270;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
display: none;
}
#aboutToResumeBig, #resumeScreen {
color: #545455;
font-family: "BebasNeue", "Bebas Neue", 'BebasNeueRegular', 'Oswald';
font-size: 2.0em;
line-height: 10px;
text-transform: uppercase;
}
#actionButtons { position: absolute; left: 50px; }
#actionButtonsCluser{
position: absolute;
right: 50px;
padding-top: 3px;
padding-right: 3px;
text-align: right;
}
#actionButtonsCluser .dispErr { font-size: 1.2em; display: inline-block; }
#actionButtonsCluser .doorBut span { margin-top: 3px; }
/* ============================ airport display =============================*/
#airportDisp { background-color: black; }
#apFreeRooms > .apPage { margin: 0; font-size: 2em; }
#apPagesIndex {
position: absolute;
left: 15px;
bottom: 10px;
display: inline;
}
/* ================================= end pad ============================== */
#asiCallback, #authorisation, #relCodeInp, #extCodeInp {
width: 290px;
padding-left: 8px;
padding-bottom: 6px;
height: 32px;
font-size: 32px;
font-family: "HelveticaNeue-Roman", "Helvetica Neue";
margin-top: 10px;
margin-bottom: 10px;
-moz-border-radius: 6px;
border-radius: 6px;
}
#asiReq { display: inline-block; width: 300px; }
/* ========= DIVs for customisation in Schedule and welcome ============ */
#brandingSc, #brandingWc, #brandingAp { display: none; }
#checkin {
color: yellow;
/*text-decoration:blink; */
font-weight: bold;
}
#clusterActions { position: relative; direction: ltr; height: 48px; }
/* ========================== Cluster bits ============================= */
#clusterActionsPop .ui-btn { height: 26px; }
#clusterActionsPop .ui-btn img {
float: left;
width: 24px;
height: 24px;
margin-top: 2px;
margin-right: 6px;
margin-bottom: 6px;
margin-left: 0px;
}
#clusterActionsPop .ui-btn span {
text-decoration: none;
display: inline-block;
margin-top: 4px;
padding-bottom: 0px;
font-size: 18px;
font-weight: normal;
}
#clusterDisp .langSwitcher{ left: 30%; margin-left: 0px; }
#clusterNoActions {
color: #CBFF87;
font-size: 1.4em;
display: inline-block;
margin-right: 50px;
}
#clusterTellSelect {
color: white;
font-size: 1.4em;
display: inline-block;
margin-right: 50px;
}
#curDay, #curWeekDay { }
#curDayDisp { font-size: 78px; margin-top: -28px; margin-left: 10px; }
#curHour {
margin-left: 10px; /* somtimes changes to 0 if the time starts with 1 */
}
#curHour, #curMin, #curSec { font-size: 128px; }
#curMeetProgress { font-size: 36px; display: block; margin-top: -20px; }
#curMeetTime { font-size: 72px; text-align: center; }
#curSec { font-size: 64px; }
#displayTypes { text-align: center; width: 100%; }
#doordisp .ui-content, #free .ui-content, #schedule .ui-content, #airport .ui-content,
#slideshow .ui-content, #wcPage .ui-content, #cluster .ui-content
{ padding: 0px; font-weight: normal; text-shadow: none; }
#dummyCB { float: right; bottom: 0px; }
/* ========================== Other branding =========================== */
#facility-icon { }
/* ======================= free time page ============================== */
#freeDisp { width: 100%; }
#freeFoot_up, #freeFoot_dn { height: 16px; width: 16px; }
/* ================== Green and stop light for branding ================ */
#green-light { }
#inDemoRoomDisp, .fixedInDemo {
position: fixed;
margin-top: 5px;
margin-left: 5px;
line-height: 0.9em;
}
#inDemoRoomsDiv { float: left; top: 10px; margin-right: 10px; }
#light { float: left; position: absolute; top: 20px; left: 40px; }
#lightStatus {
float: right;
position: absolute;
top: 24px;
right: 40px;
font-size: 128px;
}
#mapPhotoIcons { width: 175px; }
/* ============================= map photo ============================ */
#mapPhotoIcons img {
max-width: 80px;
max-height: 80px;
vertical-align: text-top;
}
#meetingChair { font-size: 36px; }
#meetingClock { margin: auto; width: 70%; text-align: center; }
#meetingInfo { /* height is calculated needs calc */ }
#meetingList {
float: left;
width: 100%;
height: 100%;
overflow-y: auto;
}
#meetingList .meetingBox { min-height: 60px; }
#meetingOwners, #curMeetTime, #welcome, #meetingSubject {
margin: 0px 14px 0px 14px;
padding-top: 14px;
width: 96%;
font-size: 72px;
padding-bottom: 10px;
}
#meetingOwners, #meetingTime {
margin: 0px 14px 0px 14px;
width: 96%;
font-size: 36px;
padding-bottom: 10px;
}
#meetingSubject {
padding-top: 0.20em;
line-height: 1em;
max-height: 140px;
overflow: hidden;
}
#meetProc {
float: right;
position: absolute;
bottom: 0px;
right: 40px;
height: 48px;
z-index: 100;
}
#meetSummaryRoom { font-size: 1.5em; font-weight: bold; }
#meetSummaryTimes, #slideShowTitle{
margin: auto;
width: 70%;
font-family: "BebasNeue", "Bebas Neue", 'BebasNeueRegular', 'Oswald';
font-size: 2em;
text-align: center;
text-transform: uppercase;
}
#meetSummaryTxt { font-weight: bold; }
#nbrActions {
float: left;
width: 100%;
z-index: 100;
padding: 3px;
/* height: 40px; set programatically */
}
#nbrAirportTimes, .apPage { background-color: black; color: white; }
#nbrClock { }
#nbrDiv #roomsStatus { width: 100%; }
#nbrPreTable td { vertical-align: top; }
#nbrSelector .ui-btn, #roomSelector .ui-btn { height: 18px; font-size: 14px; }
#nbrTimes, #nbrClusterTimes {
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
#noRoomsDisp { float: left; top: 0px; width: 50%; }
#otherMeets {
overflow: auto;
-webkit-overflow-scrolling: touch;
float: left;
width: 100%;
z-index: 0;
}
#otherWidther {
/* write the width in pixels below, door tablet will consider is as % - default 33*/
/*width:33px; */
}
#photoMapPopCont {
width: 100%;
position: absolute;
bottom: 0;
text-align: center;
}
#photoMapPopCont td { height: 82px; }
#pie_bkg {
/*pie starts with this image */
background-image: url("../img/pie_bkg_small.png");
}
#pie_frg {
/*pie ends with this image */
background-image: url("../img/pie_frg_small.png");
}
#progress, #welcome, #branding { width: 96%; margin-left: 14px; margin-right: 14px; }
/* ============================= QR codes =================================== */
#qrcodes { color: ; }
#reservedBy { font-size: 24px; }
#reservePop .ui-body-c, #reservePop .ui-overlay-c { border: 0px; }
#resumeDiv { float: left; top: 20px; }
#resumeScreen {
background: rgb(255,255,255); /* Fall-back for browsers that don'tsupport rgba */
background: rgba(255,255,255, 0.7);
z-index: 5000;
position: absolute;
top: 0;
left: 0;
width: 100%;
font-size: 4.0em;
line-height: 1em;
text-align: center;
padding-top: 2em;
}
#roomActions {
float: left;
width: 100%;
z-index: 100;
position: relative;
}
#roomBar {
border-width: 1px;
/*min-height: 400px; needs calc - total */
}
#roomDisp, #freeDisp, #schedDisp, #airportDisp, #wcDisp, #wcDispEmpty, #doordisp, #clusterDisp {
font-family: "BebasNeue", "Bebas Neue", 'BebasNeueRegular', 'Oswald';
position: relative;
overflow: hidden;
text-transform: uppercase;
}
#roomDispErr {
position: absolute;
bottom: 0;
left: 20px;
width: 70%;
height: 30px;
color: red;
z-index: -10;
}
#roomFacil {
display: none;
height: 30px;
padding-top: 10px;
margin: 0 auto;
font-size: 11px;
}
#roomFacil .facilTblList { margin: 0 auto; }
#roomIcon { width: 100%; height: 200px; position: relative; }
#roomLogo, #clusterLogo { position: absolute; }
#roomName, #nbrName, #schedName, #airportName, #wcHeader, #clusterName, #slideShowTitle {
text-overflow: ellipsis;
height: 94px;
font-size: 76px;
font-weight: normal;
padding: 0px 0px 0px 14px;
vertical-align: bottom;
}
#roomOther { float: left; }
#roomReqAction {
position: absolute;
bottom: 70px;
right: 20px;
width: 100px;
height: 100px;
color: white;
background-color: red;
-moz-border-radius: 0.8em;
border-radius: 0.8em;
padding: 0.7em;
font-size: 1.5em;
opacity: 0.4;
}
/* ============================= slide show features ======================== */
#roomSlides, .slidesDTLogo, #clusterSlides, #slideshowSlides,
#airportSlides, #wcSlides, #scheduleSlides, #resumeScreen { display: none; }
#roomsList { clear: all; }
#roomsSynch { float: right; top: 0px; text-align: right; }
#roomStatus {
float: left;
/*width: 614px; 66%; */
/*min-height: 400px; needs calc - total */
}
/* ============================ rooms function top divs ==================== */
#roomsTopFunc {
position: relative;
left: -8px;
width: 101%;
margin-top: -10px;
min-height: 46px;
}
#roomsTopFunc #inDemoRoomsDiv { margin-top: 13px; width: 80px; }
#schedTimes, #airportTimes, #wcTimes, #freeTimes, #clusterTimes {
position: absolute;
top: 14px;
right: 14px;
height: 60px;
}
#serverListDiv img { margin-top: 20px; margin-left: 20px; }
#stop-light { }
#times { width: 100%; height: 230px; }
#upcoming {
overflow: hidden;
padding: 6px 0px 0px 12px;
height: 42px;
font-size: 32px;
vertical-align: bottom;
}
#wake, #sleep, #offtime, #phone, #email { width: 100%; }
#wcList { padding: 0px 14px 0px 14px; }
#welcome { padding-top: 10px; }
#welcome img { vertical-align: middle; }
