* {
    font-family:  sans-serif;
    box-sizing: border-box;
}

@font-face {
  font-family:  sans-serif;
  font-style: normal;
  font-weight: 400;
 /* src: local('Patua One'), local('PatuaOne-Regular'), url('../fonts/Patua-One.ttf') format('truetype');*/
}

html, body { height: 100%; font-size: 13pt }

body {
/*    background: url("../images/background4c.jpg") no-repeat fixed center;*/
/*  background: rgba(165,189,222, .55);*/
    background-size: cover;

    color: #000;
    
    margin: 0;
    padding: 0;
    
    text-align: center;
    vertical-align: middle;
    
    display: flex;
    flex-direction: column;
    
    min-height: 100%;
}

h1, h2 {
    font-family: sans-serif, cursive;
}

h1 {
    text-align: center;
    color: #222;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5),
                 0px -1px 0px rgba(255, 255, 255, 0.5);
}

header {	
    border: none;
    /*background: linear-gradient(to bottom, #137, #082B6F);
    background: linear-gradient(to bottom, #efefef, #e0e0e0);*/

    /*box-shadow: 0em .125em 0.25em rgba(0,0,0, 0.5);*/
    
    /*color: white;*/
    color: #24336E; /*#137;*/
    font-weight: bold;
                                
    width: 100%;
    height: 7em;
    min-height: 7em;
    
    margin: 0;
    padding: 1em;
    text-align: center;
    position: relative;
    
    
    z-index: 99;
}

header h1 {	
    color: #24336E; /*#137;		*/
    font-size: 2em;
    font-weight: normal;
    text-shadow: 0px -1px 0px rgba(0,0,0, 0.75),
                    0px 1px 0px rgba(255,255,255, 0.75);
    line-height: 2.5em;
    width: 100%;
    margin: 0;
    padding: 0;
}

header h1 a {
    color: inherit;
    font: inherit;
    text-decoration: none;
}

header #small_logo {
    display: none;
}

header img {
    height: 4em;
    margin: .5em 1em;
    position: absolute;
    top: 1em;
    left: 0;
    z-index: 2;
}

header div {
    text-transform: uppercase;
    margin: 1em;
    position: absolute;
    top: 1em;
    right: 0;
}

header div span {
    font-weight: normal;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    float: right;
    clear: right;
}

main {
    width: 100%;
    
    margin: 0;
    padding: 2em 22.5% 3em;
    
    flex: 1 0 auto;
    
    position: relative;
}

footer {
    background: #24336E; /*#222; */
    border: none;

    box-shadow: 0em .25em .5em rgba(0,0,0, 0.5) inset;

    color: #fff;
    font-size: .8em;
    
    width: 100%;
    margin: 0em;
    padding: 1em;

    text-align: center;
}

footer #elec {
    display: none;
}

footer #copy {
    margin: 0;
    padding: 0;
    display: inline-block;
}

.nw, .ne, .sw, .se {
    color: rgba(0,0,0, .25);
    margin: 0;
    padding: 1em;
    position: absolute;
}

.nw, .ne {
    top: 0;
}

.sw, .se {
    bottom: 0;
}

.nw, .sw {
    left: 0;
}

.ne, .se {
    right: 0;
}

form,
.rules,
.wrapper,
.divTable,
.disclaimer {
    border-radius: .25em;
    padding: .25em;
    margin: 0;
    margin-bottom: 1em;    
}

form,
.wrapper {
    background: rgba(255,255,255, .05);
/*    box-shadow: 0em .125em .125em rgba(0, 0, 0, 0.25),
                0em .075em 0em rgba(255,255,255, 0.25) inset;*/
}

.wrapper a,
.wrapper a:visited {
    text-decoration: none;
    color: #222;
}

.wrapper a:hover {
    text-decoration: underline;
}

.wrapper a.tile:hover {
    text-decoration: none;
}
.divTable {
	background: rgba(255,255,255, .6);
/*	background: url("../images/background1.png") no-repeat center;*/
}

.tile {
 /*   background: rgba(165,189,222, 0.05); */
	border-radius: .25em;
    box-shadow: 0em .075em .075em rgba(0,0,0, 0.75),
                0em .075em 0em rgba(255,255,255, 0.5) inset;
    
    color: #222;
    line-height: 1em;
    
    width: 12em;
    min-height: 12em;
    
    margin: 1em;
    padding: 1em;
    
    text-decoration: none;
    display: inline-block;
    vertical-align: top;
}

/* Individual tiles */
.tileCRS {
/*    background: linear-gradient(rgba(164, 4, 41, 0.9), rgba(255,255,255, .6));
	background: rgba(164, 4, 41, 0.5);
	background: rgba(36, 51, 110, 0.75);*/
	background: rgba(255, 255, 255, 0.75);
	border-radius: .25em;
    box-shadow: 0em .075em .075em rgba(0,0,0, 0.75),
                0em .075em 0em rgba(255,255,255, 0.5) inset;
     
    color: #222;
    line-height: 1em;
    
    width: 12em;
    min-height: 12em;
    
    margin: 1em;
    padding: 1em;
    
    text-decoration: none;
    display: inline-block;
    vertical-align: top;
}
.tileDVS {
/*    background: linear-gradient(rgba(12, 5, 152, 0.9), rgba(255,255,255, .4)); 
	background: rgba(12, 5, 152, 0.5);*/
	background: rgba(255, 255, 255, 0.75);
	border-radius: .25em;
    box-shadow: 0em .075em .075em rgba(0,0,0, 0.75),
                0em .075em 0em rgba(255,255,255, 0.5) inset;
    
    color: #222;
    line-height: 1em;
    
    width: 12em;
    min-height: 12em;
    
    margin: 1em;
    padding: 1em;
    
    text-decoration: none;
    display: inline-block;
    vertical-align: top;
}
.tileHWY {
/*	background: linear-gradient(rgba(54, 123, 19, 0.9), rgba(255,255,255, .4));
	background: rgba(54, 123, 19, 0.5);*/
	background: rgba(255, 255, 255, 0.75);
	border-radius: .25em;
    box-shadow: 0em .075em .075em rgba(0,0,0, 0.75),
                0em .075em 0em rgba(255,255,255, 0.5) inset;
    
    color: #222;
    line-height: 1em;
    
    width: 12em;
    min-height: 12em;
    
    margin: 1em;
    padding: 1em;
    
    text-decoration: none;
    display: inline-block;
    vertical-align: top;
}
.tileHR {
/*    background: linear-gradient(rgba(210, 220, 24, 0.9), rgba(255,255,255, .4));
	background: rgba(210, 220, 24, 0.5);*/
	background: rgba(255, 255, 255, 0.75);
	border-radius: .25em;
    box-shadow: 0em .075em .075em rgba(0,0,0, 0.75),
                0em .075em 0em rgba(255,255,255, 0.5) inset;
    
    color: #222;
    line-height: 1em;
    
    width: 12em;
    min-height: 12em;
    
    margin: 1em;
    padding: 1em;
    
    text-decoration: none;
    display: inline-block;
    vertical-align: top;
}
.tileLGL {
/*    background: linear-gradient(rgba(738, 114, 114, 0.9), rgba(255,255,255, .4)); 
	background: rgba(38, 114, 114, 0.5);*/
	background: rgba(255, 255, 255, 0.75);
	border-radius: .25em;
    box-shadow: 0em .075em .075em rgba(0,0,0, 0.75),
                0em .075em 0em rgba(255,255,255, 0.5) inset;
    
    color: #222;
    line-height: 1em;
    
    width: 12em;
    min-height: 12em;
    
    margin: 1em;
    padding: 1em;
    
    text-decoration: none;
    display: inline-block;
    vertical-align: top;
}
.tileADM {
/*    background: linear-gradient(rgba(242, 140, 7, 0.6), rgba(255,255,255, .4));
	background: rgba(242, 140, 7, 0.5);*/
	background: rgba(255, 255, 255, 0.75);
	border-radius: .25em;
    box-shadow: 0em .075em .075em rgba(0,0,0, 0.75),
                0em .075em 0em rgba(255,255,255, 0.5) inset;
    
    color: #222;
    line-height: 1em;
    
    width: 12em;
    min-height: 12em;
    
    margin: 1em;
    padding: 1em;
    
    text-decoration: none;
    display: inline-block;
    vertical-align: top;
}
.tile:hover {
    background: linear-gradient(rgba(12, 5, 152, 0.4), rgba(255,255,255, .4));
    box-shadow: 0em .075em 0.075em rgba(0,0,0, 0.75) inset,
                0em -.075em 0.075em rgba(255,255,255, 0.25) inset;  
}

/* Custom tile hover configs */
.tileCRS:hover {
    background: linear-gradient(rgba(36, 51, 110, 1), rgba(255,255,255, .4));
    box-shadow: 0em .075em 0.075em rgba(0,0,0, 0.75) inset,
                0em -.075em 0.075em rgba(255,255,255, 0.25) inset;
}
.tileDVS:hover {
    background: linear-gradient(rgba(36, 51, 110, 1), rgba(255,255,255, .4));
    box-shadow: 0em .075em 0.075em rgba(0,0,0, 0.75) inset,
                0em -.075em 0.075em rgba(255,255,255, 0.25) inset;  
}
.tileHWY:hover {
    background: linear-gradient(rgba(36, 51, 110, 1), rgba(255,255,255, .4));
    box-shadow: 0em .075em 0.075em rgba(0,0,0, 0.75) inset,
                0em -.075em 0.075em rgba(255,255,255, 0.25) inset;  
}
.tileHR:hover {
    background: linear-gradient(rgba(36, 51, 110, 1), rgba(255,255,255, .4));
    box-shadow: 0em .075em 0.075em rgba(0,0,0, 0.75) inset,
                0em -.075em 0.075em rgba(255,255,255, 0.25) inset;  
}
.tileLGL:hover {
    background: linear-gradient(rgba(36, 51, 110, 1), rgba(255,255,255, .4));
    box-shadow: 0em .075em 0.075em rgba(0,0,0, 0.75) inset,
                0em -.075em 0.075em rgba(255,255,255, 0.25) inset;  
}
.tileADM:hover {
    background: linear-gradient(rgba(36, 51, 110, 1), rgba(255,255,255, .4));
    box-shadow: 0em .075em 0.075em rgba(0,0,0, 0.75) inset,
                0em -.075em 0.075em rgba(255,255,255, 0.25) inset;  
}

.tileCRS:active {
	text-decoration: none;
}

.tile h1 {
    font-size: 1em;
}
/* Individual tile fonts */
.tileCRS h1 {
    font-size: 1em;
}
.tileDVS h1 {
    font-size: 1em;
}
.tileHWY h1 {
    font-size: 1em;
}
.tileHR h1 {
    font-size: 1em;
}
.tileLGL h1 {
    font-size: 1em;
}
.tileADM h1 {
    font-size: 1em;
}

.tile .imgWrap {
    
    width: 10em;
    height: 5em;
    max-width: 10em;
    max-height: 5em;
    line-height: 5em;
    background: linear-gradient(rgba(12, 5, 152, 0.4), rgba(255,255,255, .4));
    margin: 0;
    padding: 0;
}

/*   Configurations for individual tiles */
.tileCRS .imgWrapCRS {
    
    width: 10em;
    height: 5em;
    max-width: 10em;
    max-height: 5em;
    line-height: 5em;
/*    background: linear-gradient(rgba(164, 4, 41, 0.4), rgba(255,255,255, .4));*/
    margin: 0;
    padding: 0;
}
.tileADM .imgWrapADM {
    
    width: 10em;
    height: 5em;
    max-width: 10em;
    max-height: 5em;
    line-height: 5em;
/*    background: linear-gradient(rgba(242, 140, 7, 0.4), rgba(255,255,255, .4));*/
    margin: 0;
    padding: 0;
}
.tileDVS .imgWrapDVS {
    
    width: 10em;
    height: 5em;
    max-width: 10em;
    max-height: 5em;
    line-height: 5em;
/*    background: linear-gradient(rgba(12, 5, 152, 0.4), rgba(255,255,255, .4));*/
    margin: 0;
    padding: 0;
}
.tileHWY .imgWrapHWY {
    
    width: 10em;
    height: 5em;
    max-width: 10em;
    max-height: 5em;
    line-height: 5em;
/*    background: linear-gradient(rgba(54, 123, 19, 0.4), rgba(255,255,255, .4));*/
    margin: 0;
    padding: 0;
}
.tileLGL .imgWrapLGL {
    
    width: 10em;
    height: 5em;
    max-width: 10em;
    max-height: 5em;
    line-height: 5em;
/*    background: linear-gradient(rgba(77, 15, 106, 0.4), rgba(255,255,255, .4));*/
    margin: 0;
    padding: 0;
}
.tileHR .imgWrapHR {
    
    width: 10em;
    height: 5em;
    max-width: 10em;
    max-height: 5em;
    line-height: 5em;
/*    background: linear-gradient(rgba(210, 220, 24, 0.4), rgba(255,255,255, .4));*/
    margin: 0;
    padding: 0;
}

.tile img, .tile svg {
    vertical-align: middle;
    max-width: 100%;
    max-height: 100%;
}

.rules,
.disclaimer {
    background: linear-gradient(#24336E,#24336E); /*(#222, #2a2a2a);*/
    box-shadow: 0em .125em .125em rgba(0,0,0, .5) inset,
                0em -.075em 0em rgba(255,255,255, .75) inset;
    
    color: #ddd;
    
    margin-top: 1em;
}

.disclaimer h3 {
    text-shadow: 0px -1px 0px rgba(0,0,0, .50),
                 0px 1px 0px rgba(255,255,255, .50);
    font-weight: normal;
}

.disclaimer a {
    border-radius: 100%;
    width: auto;
    height: auto;
    line-height: .5em;
    margin: .5em;
    padding: none;
    display: inline-block;
}

.disclaimer a img {
    width: 3em;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.disclaimer a:hover {
    box-shadow: 0em 0em 1em rgba(255,255,255, .75),
                0em 0em 1em rgba(255,255,255, .75) inset;
}

.formWrapper {
    width: 100%;
    overflow: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.rules {
    width: auto;
    height: auto;
    margin: 0em 1em;
}

.rules h2 {
    color: #ee3;
    font-weight: normal;
    text-shadow: none;
}

.rules ul {
    text-align: left;
}

.error {
    background: #e77;
    border: 1px solid #c00;
    border-radius: 3px;

    color: #c00;

    width: 70%;
    margin: 0 auto;
    margin-bottom: 1em;
    padding: 1em;
}

.rules ul li {
    margin: .5em 0em;
}

form {  
    text-align: left;    
    width: 25em;
    padding: 2em;
    display: block;
}

label {
    color: #333;
    font-size: 1.1em;
    font-weight: bold;
                    
    text-align: left;
    
    margin: 0em;
    margin-bottom: .5em;
    padding: 0em;
}

input {
    border: 1px solid #aaa;
    border-radius: .25em;
    
    box-shadow: 0em .075em .125em rgba(0,0,0, 0.5) inset;
    
    font-size: 1.25em;
    width: 100%;
    line-height: 1.5em;
    
    margin: 0;
    margin-bottom: 1em;
    padding: .25em;
    
    display: inline-block;
}

input[type="checkbox"] {
    width: 1em;
    height: 1em;
    float: right;
    clear: none;
}

input[type="submit"],
input[type="button"],
input[type="reset"] {
    cursor: pointer;
    
    border: none;
    background-color: #002868;
    background: linear-gradient(#0a3272, #002868);
    
    box-shadow: none;
    
    color: white;			
    font-weight: bold;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5),
                 0px 1px 0px rgba(255, 255, 255, .5);
                    
    height: auto;
    
    margin-top: .5em;
    margin-bottom: 0;
    padding: 1em;
}

input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
    background-color: #002060;
    background: linear-gradient(#002868, #001C5C);
}

.buttonGroup {
    width: 100%;
    clear: left;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.buttonGroup input {
    font-size: 10pt;

    width: auto;
    height: auto;

    padding: .5em 1em;

    flex: none;
}

#formMessage {
    margin-bottom: 2em;
}

#remindMe {
    margin-top: .5em;
    clear: left;
    float: right;
    display: block;
}

#remindMe:hover {
    cursor: pointer;
    text-decoration: underline;
}

template {
    display: none;
}

@media screen and (orientation: portrait) {
    header #big_logo {
        display: none;
    }
    
    header #small_logo {
        display: block;
    }
    
    header div {
        display: none;
    }

    main {
        padding-left: 0;
        padding-right: 0;
    }
    
    form,
    .rules,
    .wrapper,
    .disclaimer {
        margin: 1em auto;
        width: 95%;
        max-width: 95%;
    }

    .formWrapper {
        flex-direction: column;
    }

    input[type='checkbox'] {
        width: 2em;
        height: 2em;
        margin-bottom: .5em;
    }

    #systemPinRequestLabel {
        line-height: 2em;
    }

    .buttonGroup {
        flex-direction: column;
    }

    .buttonGroup input[type='button'],
    .buttonGroup input[type='reset'] {
        font-size: 1.25em;
        
        margin-top: .5em;
        margin-bottom: 0;
        padding: 1em;
    }

    footer #elec {
        display: block;
        float: right;
    }
    
    footer #copy {
        float: left;
    }

    .tile {
        width: 95%;
        height: auto;
        min-height: 0;
    }
    
    .tile h1 {
        font-size: 1.25em;
    }
    
    .tile .imgWrap {
        float: left;
    }
	
	

}