html{
    width:100%;
    height:100%;    
}
body{
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}
form{
    padding:15px;
}
input{
    width:100%;
}
aside{
    background: #1f8dd6;
    margin: 1em;
    padding: 1em;
    border-radius: 3px;
    color: #fff;
    font-size: 1.5em;
}
aside.GREENMessage{
    background: rgb(28, 184, 65);
}
aside.REDMessage{
    background: rgb(202, 60, 60);
}
#participants{
    margin:0;
    padding:0;
    max-width:100%;
    overflow:hidden;
}
ul li{
    list-style-type:none;
    padding:15px;
}
ol li{
    padding:10px;
}
h1{
    text-align:center;
    font-size:1em;
    color:#FFF;
    background:#CA498C;
    padding: .67em;
    margin: 0;
    text-align:left;
}
.header{
    text-align:center;
    font-size:1em;
    color:#FFF;
    background:#CA498C;
}
.email,.mobile,.table{
    font-size:0.8em;
}
.participant i{
    font-style:normal;
    float:right;
    font-size:1.5em;
    color:#338833;
}
.participant{
    border-top:1px solid #EEE;
    overflow:hidden;
    font-size:1.2em;
}
.checked{
    background:#AAFFAA;
}
.checkedin{
    background:#AAFFAA;
    text-align:center;
    margin:15px;
    padding:15px;
    border-radius:5px;
}
.checkedin i{
    font-style:normal;
    float:right;
    font-size:1.3em;
    color:#338833;
    line-height: 20px;
}
.participant strong{
    text-transform:uppercase;
}
.participant span.givenName{
    text-transform:ucwords;
}
.participantphoto{
    margin:auto;
    width:30vw;
    height:30vw;
    border-radius:50%;
    background-position:center center;
    background-size:cover;
    background-color:#CCC;
}
.pure-button{
    max-width: 300px;
    margin: auto;
    display: block;
    margin:1em auto;
}
.pure-button-xsmall {
    font-size: 70%;
}

.pure-button-small {
    font-size: 85%;
}

.pure-button-large {
    font-size: 110%;
}

.pure-button-xlarge {
    font-size: 125%;
}
.pure-button-success,
.pure-button-error,
.pure-button-warning,
.pure-button-secondary {
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.pure-button-success {
    background: rgb(28, 184, 65); /* this is a green */
}

.pure-button-error {
    background: rgb(202, 60, 60); /* this is a maroon */
}

.pure-button-warning {
    background: rgb(223, 117, 20); /* this is an orange */
}

.pure-button-secondary {
    background: rgb(66, 184, 221); /* this is a light blue */
}
.red{
    color:#FF0000;
}