body,
html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    font-size: 12px;
    background-color: #E6E6E6
}

img[title]:hover {
    color: red
}

noscript {
    display: block;
    color: #fff;
    font-size: 2em;
    margin: 20px
}

noscript a {
    color: #5AB3E5;
    text-decoration: underline
}

@-webkit-keyframes initializing {
    0% {
        color: #5AB3E5
    }
    100% {
        color: #002266
    }
}

@keyframes initializing {
    0% {
        color: #5AB3E5
    }
    100% {
        color: #002266
    }
}

.helpManualLink {
    text-decoration: none;
    font-size: 1.4em
}

.helpManualLink:hover {
    color: #002266!important
}

helpmanuals table {
    padding: 10px
}

usbdrivemessagewrapper {
    display: block;
    text-align: center;
    padding: 20px;
    color: #002266;
    font-size: 2em
}

wrapper {
    position: relative;
    margin: 0 auto;
    display: table;
    width: 100%
}

controllericon {
    display: none;
    cursor: pointer;
    float: left
}

controllerimg {
    position: absolute;
    background: url(../img/Aegis-II-Icon.png) no-repeat;
    width: 100%;
    height: 100%;
    background-size: 90%;
    background-position: center;
    z-index: 0
}

networkerrorimg {
    position: absolute;
    display: none;
    background: url(../img/network-error.gif) no-repeat;
    width: 100%;
    height: 100%;
    background-size: 40%;
    top: 20px;
    z-index: 1
}

networkerror {
    display: block;
    position: fixed;
    border: 1px solid #5AB3E5;
    text-align: center;
    padding: 3px;
    background-color: rgba(222, 28, 28, .54);
    color: #fff;
    font-weight: 700;
    z-index: 999
}

stoppedimg {
    position: absolute;
    display: none;
    background: url(../img/stop-ani.gif) no-repeat;
    width: 100%;
    height: 100%;
    background-size: 40%;
    background-position: center;
    z-index: 1
}

group2wrapper h1,
header {
    background-color: #5AB3E5;
    padding: 0;
    background-image: -webkit-linear-gradient(#5AB3E5, #002266);
    background-image: linear-gradient(#5AB3E5, #002266);
    border: 1px solid #999
}

header {
    height: 75px;
    display: table-header-group
}

login {
    position: relative;
    display: none;
    float: right;
    margin: 1px;
    width: 264px;
    text-align: right
}

loginstatus {
    display: none;
    position: absolute;
    color: #fff;
    background-color: #5AB3E5;
    border: 1px solid #002266;
    padding: 10px;
    margin: 0 auto;
    z-index: 9999;
    text-align: center;
    font-size: 1.4em;
    float: right;
    top: 82px;
    right: 10px;
    width: 250px
}

button:disabled {
    color: #ccc;
    cursor: default
}

login button,
login input[type=password],
login input[type=text],
login select {
    display: inline-block;
    color: #fff;
    box-shadow: 2px 3px 3px rgba(0, 0, 0, .1);
    width: 144px;
    height: 33px;
    padding: 2px 20px 2px 26px;
    margin: 1px;
    border-radius: 4px;
    border: 1px solid #FFFFFF;
    font-family: Arial, sans-serif;
    background-color: #002266;
    background-color: -webkit-linear-gradient(#5AB3E5, #002266);
    background-color: linear-gradient(#5AB3E5, #002266);
    font-weight: 700;
    cursor: pointer
}

login select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none
}

login select::-ms-expand {
    display: none
}

login input[type=password],
login input[type=text] {
    width: 67px;
    height: 27px;
    cursor: text
}

login input[type=text]#loginUserId {
    width: 96px
}

login input[type=password].caps-on {
    background-image: url(../img/capslock.png);
    background-repeat: no-repeat;
    background-position: 95% center;
    background-size: 16px
}

login button {
    width: 99%;
    background-position: 5px center;
    background-repeat: no-repeat
}

login button:hover,
login select:focus,
login select:hover {
    background-color: #002266;
    color: #FFFFFF
}

login button.locked {
    background-image: url(../img/padlock-locked.png);
    width: 190px;
    height: 45px
}

login button.unlocked {
    background-image: url(../img/padlock-unlocked.png)
}

nav {
    display: block;
    position: relative;
    background-color: #fff;
    border: 1px solid #999;
    padding: 5px;
    color: #002587
}

nav>span {
    display: inline-block
}

nav>span>img {
    cursor: pointer;
    width: 2em;
    margin: .1em;
    padding: .3em;
    border: 1px solid #fff
}

nav>span>img:hover {
    border: 1px solid #002857;
    background-image: -webkit-linear-gradient(#5AB3E5, #002266);
    background-image: linear-gradient(#5AB3E5, #002266)
}

nav span alarmbadge {
    display: inline-block;
    position: relative;
    top: -20px;
    right: 20px;
    padding: 2px 4px;
    border: 1px solid #073569;
    border-radius: 100px;
    background-color: red;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 4px rgba(0, 0, 0, .4), 0 0 1px rgba(0, 0, 0, .7) inset, 0 10px 0 rgba(255, 255, 255, .11) inset;
    font: bold 12px/18px "Helvetica Neue", sans-serif;
    color: #fff;
    width: 15px;
    cursor: pointer;
    text-align: center
}

nav #helpbutton {
    display: none
}

nav #clock {
    text-align: right;
    float: right;
    margin: 5px;
    cursor: pointer;
    font-size: 1.7em
}

nav #clock #date:after {
    content: ", "
}

nav #date {
    display: none
}

controllerinfo {
    display: block;
    position: absolute;
    right: 10px;
    bottom: 5px
}

controllernamewrapper {
    font-size: 1.3em;
    display: block;
    color: #073569;
    text-shadow: 1px 1px 5px #fff;
    height: 100%;
    overflow: hidden;
    padding: 10px
}

sitename,
system1name,
system2name {
    display: inline;
    white-space: nowrap;
    padding: 2px
}

controllermodel {
    padding: 2px
    visibility: hide;
}

@-webkit-keyframes alarmBlink {
    0% {
        background-color: red
    }
    100% {
        background-color: rgba(255, 0, 0, .45)
    }
}

@keyframes alarmBlink {
    0% {
        background-color: red
    }
    100% {
        background-color: rgba(255, 0, 0, .45)
    }
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(359deg)
    }
}

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

@-webkit-keyframes blink-alarm-text {
    from {
        color: red
    }
    to {
        color: #fff
    }
}

@keyframes blink-alarm-text {
    from {
        color: red
    }
    to {
        color: #fff
    }
}

@-webkit-keyframes blink-alarm-text-meters {
    from {
        color: red
    }
    to {
        color: #ccc
    }
}

@keyframes blink-alarm-text-meters {
    from {
        color: red
    }
    to {
        color: #ccc
    }
}

contacts,
io,
maoutputs,
meters,
pulseOutputs,
relayOutputs {
    display: block;
    position: relative
}

group1wrapper iowrapper {
    border: 1px solid #000;
    width: 99%;
    margin: 1px;
    display: block;
    position: relative;
    height: 140px;
    background-image: -webkit-linear-gradient(left, #002857, #7C93A9);
    background: -ms-linear-gradient(left, #002857, #7C93A9)
}

group1wrapper iowrapper:nth-child(2n) {
    background-image: -webkit-linear-gradient(right, #002857, #7C93A9);
    background: -ms-linear-gradient(right, #002857, #7C93A9)
}

group1wrapper,
group2wrapper {
    padding: 0;
    margin: 0;
    background-color: #073569;
    color: #fff;
    border: 1px solid #000
}

group1wrapper {
    border: 0;
    display: table-row-group;
    padding: 5px
}

group2wrapper {
    display: table-footer-group
}

group1wrapper io {
    width: 100%;
    display: inline-block;
    height: 120px
}

group2wrapper h1 {
    text-align: center;
    margin: 0;
    font-size: 1.6em;
    padding: .1em
}

controlstatuswrapper.alarmed controldescriptor,
controlstatuswrapper.alarmed controlstatusvalue,
io.alarmed descriptor,
io.alarmed livevalue,
io.alarmed livevalue span,
io.alarmed uom {
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-name: blink-alarm-text;
    animation-name: blink-alarm-text;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate
}

io.alarmed livevalue span {
    -webkit-animation-name: blink-alarm-text-meters;
    animation-name: blink-alarm-text-meters
}

statuswrapper {
    position: relative;
    display: block;
    padding: 0;
    margin: 0;
    height: 100%
}

statuswrapper>* {
    display: block;
    margin: .3%
}

sensorvaluewrapper {
    overflow: hidden;
    text-align: center
}

settingswrapper {
    float: right;
    position: relative;
    height: 100%
}

cal {
    display: block;
    position: absolute;
    background-color: #5AB3E5;
    border: 1px solid #7C93A9;
    border-radius: 3px;
    height: 14px;
    line-height: 14px;
    width: 20px;
    bottom: 40px;
    cursor: pointer;
    padding: 2px;
    color: #002857;
    font-size: 10px;
    text-align: center;
    font-weight: 700
}

cal:after {
    content: "CAL"
}

maoutputs cal {
    display: inline-block;
    position: relative;
    margin: 4px;
    bottom: 0;
    float: left;
    clear: left;
    font-size: 10px
}

bargraphwrapper {
    display: none
}

bargraph {
    text-align: left;
    width: 97.4%;
    background-image: -webkit-linear-gradient(90deg, #ededed, #fff);
    background-image: -webkit-linear-gradient(bottom, #ededed, #fff);
    background-image: linear-gradient(0deg, #ededed, #fff);
    border: 1px solid #c1c1c1;
    padding: 0 6px 6px 6px;
    border-radius: 4px;
    display: block
}

alarmspectrumwrapper {
    width: 100%;
    height: 4px;
    padding: 1px;
    position: relative;
    display: block;
    background-image: -webkit-linear-gradient(90deg, #bababa, #efefef);
    background-image: -webkit-linear-gradient(bottom, #bababa, #efefef);
    background-image: linear-gradient(0deg, #bababa, #efefef);
    border: 1px solid #fff
}

alarmspectrumwrapper alarm {
    position: absolute;
    top: 0;
    width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    display: block;
    cursor: pointer;
    background-color: #7C93A9;
    background-image: -webkit-linear-gradient(90deg, #002266, #5AB3E5);
    background-image: -webkit-linear-gradient(bottom, #002266, #5AB3E5);
    background-image: linear-gradient(0deg, #002266, #5AB3E5)
}

alarmspectrumwrapper alarm.low {
    left: 0;
    text-align: right
}

alarmspectrumwrapper alarm.low alarmvalue {
    right: 7px
}

alarmspectrumwrapper alarm.high alarmvalue {
    left: 7px
}

alarmspectrumwrapper alarm alarmvalue {
    display: inline-block;
    position: relative;
    top: -17px;
    color: #827d7d;
    font-size: .9em
}

alarmspectrumwrapper alarm.high {
    right: 0
}

alarmspectrumwrapper alarm.low alarmpointer {
    right: -7px
}

alarmspectrumwrapper alarm.high alarmpointer {
    left: -7px
}

alarmpointer {
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-top-color: #c11616;
    z-index: 99;
    top: -7px
}

tickerwrapper {
    display: block;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0
}

tickerwrapper>legend {
    display: none;
    position: absolute;
    font-size: .9em;
    color: #cbcbcb;
    top: 12px;
    right: 0;
    text-align: right;
    cursor: default
}

tickerwrapper>legend>legenduom {
    margin-left: 1px
}

ticks {
    display: block;
    position: relative
}

tick {
    display: block;
    position: absolute;
    width: 1px;
    background-color: #cbcbcb
}

tick.major {
    height: 17px
}

tick.minor {
    height: 10px
}

tick.semi {
    height: 5px
}

tickvalue {
    display: inline-block;
    position: absolute;
    font-size: .9em;
    bottom: -27px;
    color: #827d7d;
    cursor: pointer
}

group1wrapper livevalue,
group1wrapper uom {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: 3.5em;
    text-decoration: none;
    color: #fff;
    width: 100%;
    position: relative;
    text-align: center
}

group1wrapper uom {
    font-size: 1.3em
}

group1wrapper descriptor {
    display: block;
    margin: 0;
    padding: .3em;
    font-size: 2em;
    text-decoration: none;
    color: #fff;
    position: relative;
    text-align: center
}

systemmember {
    display: block;
    font-size: .8em;
    color: #ccc
}

meters systemmember {
    text-align: center;
    padding: 1px
}

group2wrapper io {
    display: block;
    vertical-align: middle;
    padding: 3px;
    border-top: 1px solid #000
}

group2wrapper ioid {
    float: left;
    margin: 3px
}

contacts descriptor,
contacts livevalue,
maoutputs descriptor,
maoutputs livevalue,
pulseoutputs descriptor,
pulseoutputs livevalue,
relayoutputs descriptor,
relayoutputs livevalue {
    display: block;
    width: 110px;
    float: left;
    margin: 3px;
    vertical-align: middle;
    padding: 5px;
    background-color: #002849;
    overflow: hidden
}

group2wrapper livevalue {
    float: none;
    overflow: hidden;
    width: auto
}

controlstatusvalue {
    display: block;
    position: relative;
    text-align: center
}

frequency-icons {
    display: block;
    width: 50px;
    height: 50px;
    position: relative;
    margin: 0 auto
}

io.frequency frequency-icons {
    display: inline-block;
    height: 25px;
    width: 25px;
    bottom: -8px
}

frequency-icon-off,
frequency-icon-on {
    background-repeat: no-repeat;
    position: absolute;
    background-size: 50px;
    height: 100%;
    width: 100%
}

io.frequency frequency-icon-off,
io.frequency frequency-icon-on {
    background-size: 25px
}

frequency-icon-off {
    background-image: url(../img/pulse-off.png);
    z-index: 0
}

frequency-icon-on {
    background-image: url(../img/pulse-on.png);
    z-index: 1;
    width: 0
}

controlstatuswrapper {
    display: block;
    position: relative;
    visibility: visible;
    cursor: pointer;
    background-color: rgba(160, 160, 160, .12);
    border: 1px solid rgba(0, 0, 0, .36);
    border-top: 0;
    border-left: 0;
    border-radius: 0 0 5px 0;
    font-size: .9em;
    padding: 2px;
    width: 105px;
    float: left;
    top: -2px;
    left: -2px;
    word-wrap: break-word
}

discreet-icon {
    display: block;
    position: relative;
    border: 3px solid rgba(0, 174, 239, .09);
    margin: 0 auto;
    width: 3em;
    height: 3em;
    background-color: rgba(0, 174, 239, .1);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -ms-border-radius: 50%;
    text-align: center;
    line-height: 3em
}

discreet-icon.stopped,
frequency-icon-off.stopped {
    width: 50px;
    height: 50px;
    border: 0;
    border-radius: 0;
    background: url(../img/stop-ani.gif);
    background-repeat: no-repeat;
    background-size: 100%;
    -webkit-animation: none;
    animation: none
}

io[data-commontype=output].stopped ioid,
io[data-ioproper=maOutput].stopped ioid {
    background: url(../img/stop-notext.png);
    background-repeat: no-repeat;
    background-size: 100%;
    text-align: center;
    border-radius: 0;
    border: 1px solid transparent
}

io.alarmed io.stopped {
    -webkit-animation: initial;
    animation: initial
}

controlstatuswrapper img {
    width: 50%;
    margin: 0 auto;
    position: relative;
    display: block;
    vertical-align: middle
}

controldescriptor {
    display: block;
    position: relative;
    font-size: 1.2em;
    text-align: center;
    padding: 0;
    font-weight: 600
}

controlstatuswrapper.alarmed discreet-icon,
io.alarmed ioid {
    -webkit-animation: alarmBlink .8s infinite ease;
    animation: alarmBlink .8s infinite ease
}

discreet-icon.on,
discreet-icon.priming,
io.on ioid,
io.priming ioid,
io.testing ioid {
    border-radius: 100%;
    border-color: rgba(0, 128, 0, 1);
    background-color: #7ecc07
}

controlstatuswrapper.alarmed ioid,
io.alarmed ioid {
    -webkit-animation: alarmBlink .8s infinite normal;
    animation: alarmBlink .8s infinite normal
}

ioid {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    font-weight: 800;
    text-align: center;
    border-radius: 50%;
    border: 2px solid #5AB3E5;
    color: #fff;
    cursor: pointer;
    font-size: 1.1em;
    line-height: 20px;
    padding: 2px
}

valuebarwrapper {
    position: relative;
    margin: 0;
    height: 22px;
    border: 1px solid #c1c1c1;
    padding: 1px;
    background-color: #fff;
    display: block
}

alarmspectrumwrapper,
valuebarwrapper {
    width: 99.1%
}

valuebar {
    margin: 0;
    width: 0;
    height: 100%;
    background-image: -webkit-linear-gradient(90deg, #002849, #5AB3E5);
    background-image: -webkit-linear-gradient(bottom, #002849, #5AB3E5);
    background-image: linear-gradient(0deg, #002849, #5AB3E5);
    border: 0;
    display: block;
    overflow: visible!important
}

setpointmarker {
    position: absolute;
    width: 13px;
    height: 32px;
    background: url(../img/cons.png) no-repeat 0 0;
    display: none;
    cursor: pointer
}

setpointmarker.lower,
setpointmarker.upper {
    top: -1px;
    margin-left: -6px
}

setpointvalue {
    position: absolute;
    bottom: -14px;
    font-family: arial;
    color: #7cfc00;
    display: inline-block
}

setpointmarker.lower>setpointvalue {
    right: .7em
}

setpointmarker.upper>setpointvalue {
    left: .7em
}

ioid:active,
ioid:hover {
    background: transparent -webkit-linear-gradient(#7C93A9, #5AB3E5);
    background: transparent linear-gradient(#7C93A9, #5AB3E5)
}

meters>io {
    border: 0;
    border-top: 1px solid #000;
    background-color: #002849;
    padding: 2px;
    overflow: hidden
}

meters .center-column,
meters .left-column,
meters .right-column {
    display: block;
    vertical-align: top
}

meters .left-column {
    width: 65px
}

meters .center-column {
    overflow: hidden;
    margin: 10px
}

meters .right-column {
    float: right;
    text-align: center
}

meters livevalue span {
    color: #000;
    background-color: #dbdbdb;
    margin: 1px;
    padding: 2px
}

meters livevalue {
    padding: 0;
    margin: 0;
    border: 0;
    text-decoration: none;
    color: #fff;
    left: 22%;
    text-align: center;
    font-size: 2em;
    display: block
}

meters .uom {
    font-size: 18px;
    background-color: transparent;
    color: #fff
}

meters descriptor {
    display: block;
    font-size: 1.4em;
    text-align: center;
    margin: 0;
    overflow: hidden
}

meters discreet-icon,
meters discreet-icon.stopped,
meters frequency-icon-off.stopped,
meters frequency-icons {
    left: 2px
}

percentbarwrapper {
    display: inline-block;
    position: relative;
    border: 1px solid #002266;
    padding: 1px;
    background-color: #fff;
    margin: 3px;
    height: 20px;
    width: 80%
}

percentbarwrapper>percentbar {
    display: block;
    background-color: #002266;
    text-align: right;
    color: #0b4283;
    font-weight: 800;
    font-size: 1.1em;
    height: 100%
}

percentbarwrapper>percentbar:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    z-index: 1;
    background-size: 50px 50px;
    -webkit-animation: barberpost 2s linear infinite;
    animation: barberpost 2s linear infinite;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden
}

@-webkit-keyframes barberpost {
    0% {
        background-position: 0 0
    }
    100% {
        background-position: 50px 50px
    }
}

@keyframes barberpost {
    0% {
        background-position: 0 0
    }
    100% {
        background-position: 50px 50px
    }
}

alarms {
    display: none
}

alarms h1 {
    color: #002958;
    padding: 10px;
    text-align: center;
    background: url(../img/thumbsup.png) left center no-repeat;
    margin: 20px;
    background-size: 50px;
    height: 35px
}

alarms table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 1.3em;
    width: 100%;
    color: #002958;
    margin: 0;
    padding: 0
}

alarms th {
    background-color: #5AB3E5;
    color: #fff;
    font-size: 1.1em;
    border: 1px solid #002958;
    padding: .5em
}

alarms td,
alarms th {
    padding: 7px;
    border: 1px solid #7C93A9
}

alarms .clear-alarm {
    cursor: pointer
}

iframe {
    width: 100%!important;
    margin: 5px!important
}

csvdownloadwrapper {
    display: block
}

@media only screen and (max-width:499px) {
    alarms table,
    alarms tbody,
    alarms td,
    alarms th,
    alarms thead,
    alarms tr {
        display: block
    }
    alarms thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px
    }
    alarms tr {
        border-bottom: 3px solid #5AB3E5
    }
    alarms td {
        border: none;
        border-bottom: 1px solid #7C93A9;
        position: relative;
        padding-left: 50%
    }
    alarms td:before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap
    }
    alarms td:nth-of-type(1):before {
        content: "Clear Alarm";
        font-weight: 700
    }
    alarms td:nth-of-type(2):before {
        content: "Descriptor";
        font-weight: 700
    }
    alarms td:nth-of-type(3):before {
        content: "Description";
        font-weight: 700
    }
    alarms td:nth-of-type(4):before {
        content: "Date";
        font-weight: 700
    }
    alarms td:nth-of-type(5):before {
        content: "Time";
        font-weight: 700
    }
    alarms td:nth-of-type(6):before {
        content: "ID";
        font-weight: 700
    }
}

@media only screen and (min-width:320px) {
    controllericon {
        margin: 0;
        display: inline-block;
        box-sizing: border-box;
        position: relative;
        height: 100%;
        width: 54px
    }
    bargraphwrapper {
        display: block;
        position: relative;
        width: 75%;
        margin: 0 auto;
        top: 3px
    }
    group1wrapper iowrapper {
        height: 180px
    }
}

@media only screen and (min-width:375px) {
    controllericon {
        width: 107px
    }
}

@media only screen and (min-width:390px) {
    controllericon {
        width: 110px
    }
    networkerrorimg {
        top: 5px
    }
}

@media only screen and (min-width:400px) {
    nav #helpbutton {
        display: initial
    }
}

@media only screen and (min-width:500px) {
    nav #date {
        display: inline-block
    }
}

@media only screen and (min-width:480px) {
    login {
        display: block
    }
}

@media only screen and (min-width:640px) {
    group1wrapper,
    group2wrapper,
    header,
    wrapper {
        display: block
    }
    group1wrapper {
        overflow: hidden
    }
    group2wrapper {
        width: 310px;
        float: right
    }
}

@media only screen and (min-width:800px) {
    controllernamewrapper {
        font-size: 2.5vw
    }
}

@media only screen and (min-width:1000px) {
    group1wrapper iowrapper {
        width: 49.4%;
        float: left
    }
}

@media only screen and (min-width:1400px) {
    controllernamewrapper {
        font-size: 35px
    }
}

@media only screen and (min-width:1550px) {
    group1wrapper iowrapper {
        width: 33%
    }
}