body {
    margin: 0;
}

/*
  HCL Blue #0066B3 or rgb(0,102,179) 
  See https://www.hcl.com/brand-guidelines
 */

div#pnp-header {
    font-family: Verdana,Arial,sans-serif;
    padding-left: 15px;
    padding-right: 15px;
    background-color : #272727;
    color: white;
    border-bottom : 2px solid #272727;
}

div#pnp-logo-block {
    display: inline-block;
    padding-top: 19px;
    padding-left: 19px;
}

div#pnp-header-nav {
    display: inline-block;
    margin-left: 32px;
}

span.pnp-header-nav-link {
}

span.pnp-header-nav-link a:link,  span.pnp-header-nav-link a:visited {
    background-color: #272727;
    color: white;
    text-decoration : none;
    display: inline-block;
    padding-top: 2px;
    padding-bottom: 11px;
}

span.pnp-header-nav-link a:hover {
    background-color: #272727;
    color: white;
}

span.language-selection-span {
    margin-top : 20px;
    display: inline-block;
    float : right;
}

span.language-selection-span img {
    margin-right : 0.5em;
}
span.language-selection-span option {
    padding-left : 20px;
}

span.language-selection-span option#lang-en {
    background-image: url(/uploadfiles/images/flags/en.png);
}

span.language-selection-span option#lang-fr {
    background-image: url(/uploadfiles/images/flags/fr.png);
}


/* ####################################################################### */
footer {
    background : #272727;
    text-align : center;
}

footer p.footer {
    display: inline;
    box-sizing : border-box;
    color: white;
    font-size : 12px;
    font-family : "OpensansRegular", sans-serif;
    line-height : 20px;
    text-decoration: none;
    
}
footer p.footer.copyright {
    margin-right : 2em;
}

footer p.footer a:link, footer p.footer a:visited  {
    color: rgb(210, 210, 210);
    text-decoration: none;
}

/* ####################################################################### */

/* Welcome message */
h1.welcome-message {
    font-family: "Helvetica Neue", Arial, Verdana, sans-serif;
    color : rgb(0,102,179);
    width : 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    margin-bottom: 1em;
}

/* Upload form */

div.upload-div {
    font-family: "Helvetica Neue", Arial, Verdana, sans-serif;
    width : 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3em;
    box-sizing: border-box
}

div.upload-div label {
    width : 100%;
    display: inline-block;
    margin-top: 8px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box
}

div.upload-div input {
    display: inline-block;
    width : 100%;
    margin-top: 8px;
    margin-left: auto;
    margin-right: auto;
    padding: 12px 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    box-sizing: border-box
}

div.upload-div input[type=file]:focus {
    box-shadow: 0 0 10px rgb(0,102,179);
}

div.upload-div input[type=text]:focus {
    box-shadow: 0 0 10px rgb(0,102,179);
}

div.upload-div input[type=submit]:hover {
    background-color: rgb(190,215,50);
}

div.upload-div input[type=reset]:hover {
    background-color: rgb(245,130,30);
}

div.error {
    color: rgb(245,130,30);
}

div.success {
    color: rgb(0,102,179);
}

div.progress {
    font-family: "Helvetica Neue", Arial, Verdana, sans-serif;
    width : 95%;
    margin-top: 4px;
    display: none;
}

div.progress span {
    display: block;
}
div.progress div {
    padding: 2px 5px;
    border: 1px inset #446;
    border-radius: 5px;
}
		
div.progress div.progress-bar {
    padding: 2px 5px;
    border: 1px inset #446;
    border-radius: 5px;
    box-sizing: border-box;
}
		
div.progress div.progress-indicator {
    position: relative;
    top : 0;
    left : 0;
    height : 16px;
    background-color : rgb(190,215,50);
    width: 0%;
    border : 0;
    box-sizing: border-box
}
		
footer {
    margin-top: 5em;
}