/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 28 juil. 2015, 18: 59: 49
    Author     : Gedicom-La-Rochelle
*/

/* ***** Global ***** */
.placeholder { 
    color: #aaa; 
}

a {
    text-decoration: none;  
    color: #aaaaaa;
}

table {    
    width: 100%;
}

a img {
    border: none;
}

/* **** Header **** */ 
#header {
    text-align: center;
    border-bottom: 1px solid #aaaaaa;    
    width: 100%;
    top: 0px;
    position: fixed;
    position: absolute;
    background-color: white;  
    padding-bottom: 20px;    
}


#header table {
    margin-left: auto;
    margin-right: auto;
    text-align: center;    
    width: 100%;
}

#header > label {
    font-size: 200%;/*to un-use Hx (not good with tomcat error css) */
    font-weight: 500;/*bootstrap cancel*/
}

#logout a img {
    margin-top: 10px; /* 20px/2 */
    width: 40px;
}

#welcome, #logo {
    padding-top: 20px;
    width: 33%;
}

#logo img {
    width: 128px;
}

#logout {
    width: 5%;
}

#files {
    width: 80px;
}

#files div {
    width: 400px; 
    /*height: 100px;*/
/*    height: 80%;
    width: 80%;*/
    overflow: auto;
}

.fileExport {
    padding-right: 15px;
}

/* **** Footer **** */ 
#footer {
    border-top: 1px solid #aaaaaa;
    width: 100%;
/*    bottom: 0;
    position: fixed !important;
    position: absolute ie6 and above;*/
    position: fixed !important;
    position: absolute; /*ie6 and above*/
    bottom: 0;
    /* IE6 */
    top: expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
    background-color: white;    
    text-align: right;
    line-height: 300%;
}


#footer a {
    margin-left: 2%;
    float: left;
}

#footer b {
    margin-right: 1%;
    font-size: 11px;
}


/* **** Index **** */
.formLogin {
    background-color: #cccccc;
    display: inline-block;
    width: 100%;
}

.formLogin form input {
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    display: block;
    width: 80%;
}

.formLogin .formIndex {
    margin: 15px;
}


#main div.accueil {    
    width: 450px;
    padding-top: 30px;/* + #main padding */
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#main .sessionTitle:hover, #main .sessionTitle a:hover, img.reload:hover, .clickableLink:hover, a:hover, a > label:hover {
    cursor: pointer;    
}

/* **** Campagne **** */
/* *** Général *** */
html, body, #main .ui-widget button {    
    font-family: Verdana,Arial,Sans,sans-serif;
    margin: 0;
    background-color: #eeeeee;
}

img { 
    vertical-align: middle;
}

td p {    
    padding-left: 1%;
}

.clickable {
    width: 38px;
    height: 18px;
    text-align: center;
    background: #cccccc;
}

/* *** Liste des campagnes *** */
#main {
    margin: 0;
    padding-bottom: 100px;
    padding-top: 200px;
    width: 60%;    
    min-width: 800px;/*See width: 800px; in campagne.jsp. IE 6*/
    margin-left: auto;
    margin-right: auto;
}

#main .ui-accordion, #main .ui-accordion-content {
    padding: 0px;
    /* if hour text is over */
    overflow: visible;
}

#main .ui-state-default {
    color: black;
}

#main .ui-corner-top, #main .ui-corner-bottom, #main .ui-corner-all {
    border-radius: 0px;
}

#main .ui-accordion-header {    
    margin: 0px;
}


/* *** Ligne dans une campagne *** */
/* ** titre ** */
#main .sessionTitle {
    background: #aadada;
    /*text-align: left;*/
    /*height: 40px;*/  
    padding-left: 30px;
    /*border: 0px solid #aaaaaa;*/    
    /*height: 50px;*/
    /*line-height: 50px;*/
    margin-top: 10px;
}

#main .sessionTitle label {
    float: right;
    font-size: 0.75em;
    margin-top: -15px;
}

#main .answered, #main .pending {
    background-color: #ddfdfd;
}

#main .ui-icon.iconOpen {
    background: url('/GedFeedback/SharedGedMin/Common/Design/arrowUp.gif') no-repeat -1px;
    background-size: 10px;
    width: 10px;
    height: 10px;
    padding-top: 8px;
    margin-left: 10px;
}

#main .ui-icon.iconClosed {
    background: url('/GedFeedback/SharedGedMin/Common/Design/arrowDown.gif') no-repeat -1px;
    background-size: 10px;
    width: 10px;
    height: 10px;
    padding-top: 8px;
    margin-left: 10px;
}

#main .sessionTitle a {
    color: black;
    margin-left: 10px;
    line-height: 50px;
}

/* ** contenu ** */
.sessionMessages {
    border-collapse: collapse;
}

.sessionMessages tr td {
    background-color: #ffffff;
    padding: 5px;
}

audio { 
    width: 90%;
    min-width: 130px;
}

#jquery_jplayer_, jp_container_ {
    display: none;
}

.rowSpan {
    border-right: 1px solid #aaaaaa;    
    width: 25%
}

/*because > tr > td not working of IE 6*/
table.sessionMessages tr td, table.sessionMessages tr th {
    border-top: 1px solid #aaaaaa;
}

table.sessionMessages tr td.hide {
    border: none;
    height: 0px;
    visibility: hidden;    
}

table.noBorder tr td, table.noBorder tr th {
    border-top: none;
}

.messagesTypes {
    text-align: center;
    border-right: 1px solid #aaaaaa;
    width: 4%
}

.messagesAction {
    text-align: center;
    border-right: 1px solid #aaaaaa;
    width: 7%;
}

.messageContent {
    border-right: 1px solid #aaaaaa;
    width: 49%
}

.messageContent span {
    display: inline-block;
    margin: 1%;
}

.messageRep {
    width: 40%;
}

.audio {
    padding-bottom: 5px;
}

.audio img, .poplightMail img {
   width: 40px;
   margin: 5px;
   
}

.audio_img:hover, .poplightMail img:hover, .audio a {
    /*max-width: calc(110%);*/
    /*max-width: 50px;*/
    cursor: pointer;    
    -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
         -o-transform: scale(1.1);
            /*transform: scale(1.1);*/
}

.audioPlayer {
    height: 82px;
}

.noDisplay {
    display: none;
}

#main .pending {
    height: 40px;
    width: 40px;
    background-image: url(../img/pending.gif);
    background-color: inherit;
    display: inline-block;
    margin-top: 5px;
    margin-left: 10px;
}

/*#main .sessionTitle a {
    vertical-align: top;
}*/

/*#main .sessionTitle, #main .sessionTitle a {
    height: 50px;
}*/

.passed {
    /* unused, but you can ! */ 
}

.future {
    /* unused, but you can ! */
}

.noSession {
    text-align: center;
    padding-top: 50px;
}

/* ** formulaire d'envoi ** */
input.hiddenParameters {
    position: absolute;
    visibility: hidden;
}

.acquit, .messText {
    margin: 1%;
    display: block;    
}

.formSendFeedback {
    display: inline;
}

input.fullWidth, textArea.fullWidth {
    width: 90%;
}

#popCode_feedbackDataKeyCode, #popCode_feedbackData, #popChoice_feedbackData {
    width: 90%; 
}

.popupForm {
    margin: 5px;
}

.popMail_fromAddress {
    color: #aaaaaa;
}

.popMail_sub {
    font-weight: 600;
}

.mailFromObject {
    border-bottom: 1px solid #aaaaaa; 
}

.mailFromObject, .mailContent {
    padding: 20px;
}
/*Taken from http: //sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/*/

#fade { /*--Masque opaque noir de fond--*/
    display: none; /*--masqué par défaut--*/
    background: #000;    
    position: fixed !important;
    position: absolute; /*ie6 and above*/
    left: 0; top: 0;
    width: 100%; height: 100%;
    opacity: .60;
    z-index: 9999;
}

.popup_blockMail {
    display: none; /*--masqué par défaut--*/
    background: #ffffff;
    float: left;
    position: fixed !important;
    position: absolute; /*ie6 and above*/
    top: 50%; left: 50%;
    z-index: 99999;
    /*--Les différentes définitions de Box Shadow en CSS3--*/
    -webkit-box-shadow: 0px 0px 20px #000000;
    -moz-box-shadow: 0px 0px 20px #000000;
    box-shadow: 0px 0px 20px #000000;
    overflow: auto;
}

.popup_block {
    display: none; /*--masqué par défaut--*/
    background: #ffffff;
    padding: 20px;
    border: 20px solid #dddddd;
    float: left;
    position: fixed !important;
    position: absolute; /*ie6 and above*/
    top: 50%; left: 50%;
    z-index: 99999;
    /*--Les différentes définitions de Box Shadow en CSS3--*/
    -webkit-box-shadow: 0px 0px 20px #000000;
    -moz-box-shadow: 0px 0px 20px #000000;
    box-shadow: 0px 0px 20px #000000;
    /*--Coins arrondis en CSS3--*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

img.btn_close {
    float: right;
    margin: -55px -55px 0 0;
    height: 32px;
}

img.btn_closeMail {
    float: right;
    margin: -15px;
    height: 32px;
}

/*--Gérer la position fixed pour IE6--*/
*html #fade {
    position: absolute;
}

*html .popup_block {
    position: absolute;
}


/* TODO : hauteur logo en fonction total (% marche pas en hauteur) */

@media (orientation:portrait) {    
    html, body, #main .ui-widget button, .formLogin form input, .keyFeedback button, #main .popupForm, #main .jp-current-time, #main .jp-duration  {    
        font-size: 1.4em;
    }
    #footer b {
        font-size: 0.8em;
    }
    .formLogin form input {
        height: 1%; /* not realy 1% but it reset height to use the right height in relation with font-size */
    }
    #main {
        width: 100%;    
        min-width: 0px;
    }
    #main div.accueil {
        width: 100%;
    }
    .audio img, .poplightMail img, #main .pending, #logout a img, img.btn_closeMail, img.btn_close {
        width: 96px;
    }
    img.btn_close {
        margin: -80px;
        height: 96px;
    }
    img.btn_closeMail {
        margin: -50px;
        height: 100px;
    }
    .messagesTypes img {
        width: 32px;
    }
    .audioPlayer {
        padding-top: 46px;
        padding-bottom: 46px;
        /*height: 182px;*/
    }
/*    #main .jp-audio {
        width: 60%; 
    }*/
    #main .jp-audio .jp-controls {
        width: 250px; 
    }
    .messageContent {
        width: 20%; 
    }
    .jp-volume-controls {
        display: none;
    }
}

/* loader */
.loader{
    position: relative;
    padding: 40px;
    text-align: center;
    float: left;
    width: 40px;
    height: 40px;
}

.loader.micro {
    padding: 0;
}

.loading_spinner{
    position: relative;
    width: 30px;
    height: 30px;
}

/*.loading_spinner:before,*/
.loading_spinner:after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 50%;
    border: solid 2px transparent;
    border-right: solid 2px #acacac;
    animation: spinanim infinite .7s linear;
}

@keyframes spinanim {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}