/* INFO Animations */

@-webkit-keyframes Spin
{
    from {-webkit-transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);}
}
@keyframes Spin
{
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

@-webkit-keyframes ShakeNBrake {
    0% { -webkit-transform: translate(0em, 0em); }
    10% { -webkit-transform: translate(-1em, 0em); }
    30% { -webkit-transform: translate(1em, 0em); }
    50% { -webkit-transform: translate(-1em, 0em); }
    70% { -webkit-transform: translate(1em, 0em); }
    90% { -webkit-transform: translate(-1em, 0em); }
    100% { -webkit-transform: translate(0em, 0em); }
}
@keyframes ShakeNBrake {
    0% { transform: translate(0em, 0em); }
    10% { transform: translate(-1em, 0em); }
    30% { transform: translate(1em, 0em); }
    50% { transform: translate(-1em, 0em); }
    70% { transform: translate(1em, 0em); }
    90% { transform: translate(-1em, 0em); }
    100% { transform: translate(0em, 0em); }
}

/* INFO Heads up display */

.Hud> * {
    position: fixed;
    width: 100%;
    /* NOTE This is the max z-index value in most browsers minus 1 (!) */
    z-index: 2147483646;
}

.Hud> .top {
    top: 0;
    bottom: auto;
}
.Hud> .middle {
    top: 50%;
    bottom: auto;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);

}
.Hud> .bottom {
    top: auto;
    bottom: 0;
}

.Hud> .left {
    left: 0;
    right: auto;
    width: auto;
}
.Hud> .right {
    left: auto;
    right: 0;
    width: auto;
}

.Hud> .Flapbar,
.Hud> .Toolbar {
    display: inline-table;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    list-style: none;
    position: fixed;
}
.Hud> .Toolbar {
    padding: 0.5rem;
}

.Hud> .Flapbar> *,
.Hud> .Toolbar> * {
    display: table-cell;
    text-align: center;
    vertical-align: center;
}
.Hud> .Toolbar> * {
    padding: 0.5rem;
}

.Hud> .Toolbar button img,
.Hud> .Toolbar .Button img {
    width: 3em;
    height: 3em;
}

.Hud> .Flapbar.middle button img,
.Hud> .Flapbar.middle .Button img {
    width: 1.5em;
    height: auto;
}

.Hud> .Notifications li {
    /* NOTE Kanu Center light green */
    background: #d5efb1;
    color: #444440;
    border-bottom: 0.0625rem solid rgba(0,0,0,0.1);
    padding: 0.25em 1em;
}
.Hud> .Notifications li.Warning {
    /* NOTE Kanu Center medium orange */
    background: #ffd687;
}
.Hud> .Notifications li.Error {
    /* NOTE Kanu Center medium yellow */
    background: #f69b8a;
}

.Hud> .Notifications li button {
    float: right;
    padding: 0.25em 0.5em;
    margin: -0.25em -0.5em -0.25em 0.5em;
}

/* INFO Dialogs */

.Dialog {
    display: none;
    background: rgba(0, 0, 0, 0.1) !important;
    cursor: not-allowed;
    position:fixed;
    width: 100%;
    height: 100%;
    /* NOTE This is the max z-index value in most browsers minus 1 (!) */
    z-index: 2147483646;
}
.Dialog.dialogActive {
    display: block;
}

.Dialog .DialogWindow {
    box-shadow: 0 0 0.5rem #000;
    border-radius: 0.1825rem;
    box-shadow: 0 0 0.75rem #000;
    cursor: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    min-height: 5em;
    width: 36em;
    max-width: 90% !important;
    max-height:100%;
    overflow: auto;
    background-color: #fff9e6;
    opacity: 1;
}

.Dialog .DialogWindow > div {
    width: 32em;
    margin: 0 auto;
    padding: 1.5em;
}
.Dialog .DialogWindow div input,
.Dialog .DialogWindow div p,
.Dialog .DialogWindow div div {
    width: 100%;
    margin-bottom:0.5em;
}

.Dialog .DialogWindow div.Clear {
    clear:both;
}

.Dialog .DialogWindow div input {
    background: white;
    border: 0 solid rgba(0,0,0,0.25);
    border-width: 0.0625rem;
    border-radius: 0.1825em;
    margin-left: -0.125rem;
}
.Dialog .DialogWindow div input[type="checkbox"] {
    width: 20px;
    height: 1em;
    padding: 0;
    margin:0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
    *overflow: hidden;
}
.Dialog .DialogWindow div label[for] {
    font-size:0.75em;
    width:100%;
    text-indent: -15px;
}

.Dialog .DialogWindow .dialogButtons {
    float:left;
    margin-top: 0.5em;
    margin-bottom: 0;
    width: 100%;
    list-style:none;
}
.Dialog .DialogWindow .dialogButtons li {
    width: auto;
}
.Dialog .DialogWindow .dialogButtons li.left {
    float:left;
}
.Dialog .DialogWindow .dialogButtons li.left * {
    margin-right: 0.5em;
}

.Dialog .DialogWindow .dialogButtons li.right {
    float:right;
}
.Dialog .DialogWindow .dialogButtons li.right * {
    margin-left: 0.5em;
}

.Dialog .DialogWindow .dialogButtons img {
    display: inline-block !important;
    vertical-align: top;
    margin-left: 0.5em;
    margin-top: 0.125em;
}

.Dialog .DialogWindow .dialogButtons button:disabled {
    cursor: auto;
    opacity: 0.5;	
}

/* INFO Panel */

.Panel {
    display: table;
    text-align: center;
    position: relative;
    height: 100%;
    width: 100%;
}
.Panel> header,
.Panel> footer {
    display: table-row;
    height: 1px;
}
.Panel> div,
.Panel> form {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}

.Panel> header> .Toolbar {
    font-family: 'CallunaLight-Regular';
    font-size: 1.5em;
    padding: 0.75rem 1rem;
}
.Panel> header> .Toolbar.left {
    position: absolute;
    left: 0;
    top: 0
}
.Panel> header> .Toolbar.right {
    position: absolute;
    right: 0;
    top: 0
}

.Panel> footer> p {
    text-align: center;
    margin: 1em 0;
}

/* INFO Grid */

.Grid> .listItem {
    display: inline-block;
}
.Grid> .listItem.transition {
    opacity: 0.5;
}

.Grid> .Placeholder {
    display: none;
}

.Grid> .Placeholder h2 {
    font-size: 2em;
    margin-bottom: 0.5em;
}

.Grid> .Placeholder img {
    width: 1em;
    height: 1em;
}

/* INFO Application viewport */

.Application {
    height: 100%;
}

.Application> * {
    background: #bfe7f5;
}

.Application> footer {
    margin: 0 auto;
    padding: 2em 5%;
    text-align: center;
    position: relative;
    min-width: 53rem;
}

.Application> footer .Contact {
    font-size: 0.75em;
    list-style: none;
}
.Application> footer .Contact li {
    display: inline-block;
    margin: 0 0.5em 0 0;
}
.Application> footer .Contact li:first-child {
    margin: 0 3em 0 0;
}

.Application> footer .Contact .E:after {
    content: "";
}

.Application footer .Languages {
    font-size: 0.865em;
    list-style: none;
    position: fixed;
    top: 0;
    right: 0;
}

.Application footer .Languages li {
    display: inline-block;
    margin: 0.5em 0.5em 0 0;
}