/**************************************************************************
 Style Sheet
 login.css file used to format the opening login screen only.
***************************************************************************/

body {
    margin: 0;
    padding: 0;
    overflow: hidden;  /* to make the background image not scroll */
    font-family: 'PT Sans', Arial, Helvetica, sans-serif;
}




.loginContainer {
	position: absolute;
	background-image: url(consilia.jpg);  /* bright-modern-1698x1131.jpg */
	background-repeat: no-repeat;
	background-position: 0 0;
	vertical-align: top;
    width: 1698px;  /* width and height should be >= the background image */
    height: 1131px;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    overflow: hidden;
}

.loginDialog {
    position: relative;
    top: 100px;
    margin-left: auto;
    margin-right: auto;
    width: 450px;
    color: white;
    background: rgb(86,112,137);  /* #567089; */
    background: rgba(86,112,137, 0.85);
    border: solid 1px #283C59;
    border-radius: 15px;
    -webkit-box-shadow: 6px 6px 10px rgba(0,0,0,.5);
	-moz-box-shadow: 6px 6px 10px rgba(0,0,0,.5);
	box-shadow: 6px 6px 10px rgba(0,0,0,.5);
}

.loginDialog .main {
    margin: 30px 20px 30px 60px;
}

.loginDialog .misc {
    font-size: 13px;
    padding: 0;
    width: 100%;
    background-color: rgb(77,100,118);
    background-color: rgba(77,100,118, 0.6);
    border-radius: 0 0 15px 15px;
}

.loginDialog .misc .misc-inner {
    padding: 20px 30px 20px 60px;
}

.loginForm ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Mixin for dropdown, text fields, and sign-in button */
.loginControl { 
    border: solid 1px #dbdbdb;
    border-radius: 7px;
    font-size: 14px;
    margin-top: 5px;
}

/* Dropdown */
select {
    background: #8298AF;
    color: white;
    width: 303px;
    padding: 5px 4px 4px 5px;
    margin-top: 8px;
    margin-bottom: 20px;
}

/* Text fields */
.loginTextBox {
    background: #364857;
    padding: 10px 15px 8px 36px;
    color: white;
    width: 250px;
    background-repeat: no-repeat;
    background-position: 10px 10px;
}
#username_input {
    background-image: url(icon-head.png);
}
#password_input {
    background-image: url(icon-lock.png);
}
::-webkit-input-placeholder {
    font-style: italic;
    color: #9ba4ab;
}
:-moz-placeholder { /* Firefox 18- */
    font-style: italic;
    color: #9ba4ab;
}
::-moz-placeholder {  /* Firefox 19+ */
    font-style: italic;
    color: #9ba4ab;
}
:-ms-input-placeholder {  
    font-style: italic;
    color: #9ba4ab;
}
input[type=text]:focus, input[type=password]:focus {
    outline: none;
    border: solid 1px #dbdbdb;  /* repeats the default; needed for webkit */
    -webkit-box-shadow: 0px 0px 8px rgba(255,255,255,.8);
	-moz-box-shadow: 0px 0px 8px rgba(255,255,255,.8);
	box-shadow: 0px 0px 8px rgba(255,255,255,.8);
}
.inputHint {
    display: block;
    padding: 0;
    margin: 0;
    font-size: 12px;
    font-style: italic;
    color: #c3cacf;
    visibility: hidden;
}

/* Buttons */

.signInContainer {
    width: 303px;
    height: 50px;
}

.loginDialogButton {
    margin-right: 8px;
    padding: 5px 25px 5px 25px;
    font-family: inherit;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    color: #364857;
    white-space: nowrap;
    display: inline-block;
    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    background: #bfced5; /* Old browsers */
background: -moz-linear-gradient(top,  #e7f0f4 0%, #bfced5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e7f0f4), color-stop(100%,#bfced5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #e7f0f4 0%,#bfced5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e7f0f4 0%,#bfced5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e7f0f4 0%,#bfced5 100%); /* IE10+ */
background: linear-gradient(to bottom,  #e7f0f4 0%,#bfced5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7f0f4', endColorstr='#bfced5',GradientType=0 ); /* IE6-9 */
}

.loginDialogButton:hover {
    border-color: white;
    color: black;
}

.loginDialogButton:active {
    background: #e7f0f4; /* Old browsers */
background: -moz-linear-gradient(top,  #bfced5 0%, #e7f0f4 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bfced5), color-stop(100%,#e7f0f4)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #bfced5 0%,#e7f0f4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #bfced5 0%,#e7f0f4 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #bfced5 0%,#e7f0f4 100%); /* IE10+ */
background: linear-gradient(to bottom,  #bfced5 0%,#e7f0f4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfced5', endColorstr='#e7f0f4',GradientType=0 ); /* IE6-9 */
}

#signin_button {
    float: right;
    margin-right: 0;
}


/* Controls below the "fold" */

a {
    color: #e6e9eb;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
a:link,
a:visited,
a:active { color: #e6e9eb; } 
a:hover { color: white; } 

.misc-inner a {
    display: block;
    padding-bottom: 8px;
}

.misc-inner .left-side {
    float: left;
    width: 200px;
}
.misc-inner .right-side {
    float: right;
    padding-bottom: 8px;
}
.misc-inner .bottom {
    padding-top: 10px;
    font-style: italic;
    color: #c3cacf;
}
.localizeLink span {
    vertical-align: 6px;
}
.localizeFlag {
    margin-right: 5px;
}

.callout {
    visibility: hidden;
    position: absolute;
    top: auto;
    left: -250px;
    background: #91a8bc;
    border-radius: 10px;
    -webkit-box-shadow: 6px 6px 10px rgba(0,0,0,.5);
	-moz-box-shadow: 6px 6px 10px rgba(0,0,0,.5);
	box-shadow: 6px 6px 10px rgba(0,0,0,.5);
    font-size: 14px;
    width: 250px;  /* if you change this, you'll need to change other numbers as well */
    z-index: 100;
    padding: 20px 20px 10px 20px;
    margin-right: 20px;
    margin-top: -60px;
}
.calloutTriangle {
    position: absolute;
    top: 35px;
    left: 290px;
    width: 10px;
    height: 12px; 
    background: url(callout-triangle.png) no-repeat;
}
.callout .loginDialogButton {
    padding: 4px 15px 3px 15px;
    font-size: 15px;
}
.callout .closeX {
    position: absolute;
    top: 5px;
    left: 270px;  /* callout width + 20 */
}
.callout .closeX a {
    padding: 0;
    margin: 0;
    border-radius: 13px;
    height: 16px;
}
.callout .closeX a:hover {
    background: #567089;
}
.callout .closeX a img {
    vertical-align: top;
    padding: 3px;
}

/* Special-case this because it's bigger than the other dialog */
#changeLanguageCallout {
    margin-top: -200px;  /* unlikely to work well on IE */
    font-style: italic;
    color: #dee9ec;
}
#changeLanguageCallout .calloutTriangle {
    top: 170px;
}

#changeLanguageCallout .localizeLink {
    padding: 2px 0px 0px 5px;
    font-weight: normal;
    font-style: normal;
    color: white;
}
#changeLanguageCallout .localizeLink:hover { 
    background: #567089;
}

/* Override styles for smartphones. */
@media only screen
       and (max-device-width : 640px) {
    .loginContainer {
	    background-image: none;
    }

    .loginDialog {
        width: 400px;
        top: 40px;
        left: 0px;
        border-radius: 0;
    }

    .loginDialog .main {
        margin: 10px;
    }

    .loginDialog .misc .misc-inner {
        padding: 10px;
    }

    .logo {
        position: absolute;
        left: -10px;
        top: -5px;
    }

    select {
        margin-bottom: 10px;
        width: 253px;
    }

    .loginTextBox {
        width: 200px;
    }

    .signInContainer {
        width: 253px;
    }

    .callout {
        left: 0;
    }

    .misc-inner .left-side {
        clear: left;
    }

    .misc-inner .right-side {
        float: left;
    }
}