// LESS

// VAR
@imgPath: "img/desktop";
@imgMobile: "img/mobile";

// VAR CLASSES
.bg-home(@id) {
    z-index : 10;
    background : url('@{imgPath}/bg/bg@{id}.png') no-repeat center center;
    background-size: 100% 100%;
    background-repeat : no-repeat;
}

// FONTS
@font-face {font-family: Neue;src: url('fonts/HelveticaNeueLTStd-Th.otf');}
@font-face {font-family: Neueitalic;src: url('fonts/HelveticaNeueLTStd-ThIt.otf');}
@font-face {font-family: Neuebold;src: url('fonts/HelveticaNeueLTStd-Md.otf');}

// GLOBAL
a {
    text-decoration : none;
    color : #FFF;
}

a:focus {
    border : 0;
    outline: 0;
    text-decoration : none;
}

.mobileOnly {
    display : none;
}

a.inlink {
    font-family: 'Neue';
    font-weight: 300;
    text-transform: uppercase;
    color: #FFF;
    font-size: 1em !important;
    letter-spacing: 1px;
    margin: 0;
    padding: 0 0 5px 0 !important;
    border : 0 !important;
    border-bottom: 1px dotted #fff !important;
    display: inline-block;
    background : none !important;   
}

// STYLES - DESKTOP
html {

    padding : 0;
    margin : 0;
    width : 100%;
    height : 100%;

     body { 

        padding : 0;
        margin : 0;
        width : 100%;
        min-width : 960px;
        height : 100%;
        min-height : 768px;
        background : #1bbc9b;
        font-family: helvetica, arial, serif;
        color : #FFF;
        font-size : 18px;

        #desktop {

            padding : 0;
            margin : 0;
            width : 100%;
            height : 100%;
            display : table;
            vertical-align : middle;    

            .accessLink {
                position : absolute; top : -9999px;
            }

            .circle {
                font-family: 'Neue';
                text-transform : uppercase;
                position : absolute;
                left : 0;
                top :0;
                z-index : 50;
                padding : 0;
                margin : 10px;
                font-size : 2.1em;
                border-radius : 50%;
                width : 250px;
                height : 250px;
                letter-spacing : 2px;
                text-align : center;

                border : 5px solid #EB344B;
                background : #fff;
                color : #EB344B;

                .taller {
                   font-size : 1.2em;
                }

                .l1 {
                    font-size : 0.9em;
                    padding-top : 70px;
                }

                .l2 {
                    font-size : 1.2em;
                }

                // Transition
                perspective: 1000;
                -moz-transition: all 0.5s ease-in;
                -webkit-transition: all 0.5s ease-in;
                -o-transition: all 0.5s ease-in;
                transition: all 0.5s ease-in;

            }

            .flipin {
                -moz-transition: all 0.5s ease-out;
                -webkit-transition: all 0.5s ease-out;
                -o-transition: all 0.5s ease-out;
                transition: all 0.5s ease-out;
                transform: rotateY(90deg);
                -webkit-transform: rotateY(90deg); /* Safari and Chrome */
                border : 5px solid #ecf0f1;
                background : #02da91;
                color : #FFF;

                div {
                    transform: rotateY(180deg);
                    -webkit-transform: rotateY(180deg); /* Safari and Chrome */
                }

            }

            .flipin.basse {
                background : #66CCFF;
                color : #FFF;
            }
            .flipin.baryton {
                background : #C079CF;
                color : #FFF;
            }
            .flipin.tenor {
                background : #3788AB;
                color : #FFF;
            }
            .flipin.alto {
                background : #ABD372;
                color : #FFF;
            }
            .flipin.mezzo {
                background : #FFFF6F;
                color : #FFF;
            }
            .flipin.soprano {
                background : #EB344B;
                color : #FFF;
            }

            .flipout {
                -moz-transition: all 0.5s ease-out;
                -webkit-transition: all 0.5s ease-out;
                -o-transition: all 0.5s ease-out;
                transition: all 0.5s ease-out;
                transform: rotateY(180deg);
                -webkit-transform: rotateY(180deg); /* Safari and Chrome */
                border : 5px solid #ecf0f1;
                background : #02da91;
                color : #FFF;

                div {
                    transform: rotateY(180deg);
                    -webkit-transform: rotateY(180deg); /* Safari and Chrome */
                }

            }


            .tr {
                padding : 0;
                margin : 0;
                width : 100%;
                height : 100%;
                display : table-row;
                vertical-align : middle;
            }

            .td {
                padding : 0;
                margin : 0;
                width : 100%;
                height : 100%;
                display : table-cell;
                vertical-align : middle;
            }

            .bg {
                position : fixed;
                top : 0;
                left : 0;
                padding : 0;
                margin : 0;
                width : 100%;
                height : 100%;
                min-width : 960px;
            }

            #bg1 {
                .bg-home("1")
            }

            #bg2 {
                .bg-home("2")
            }

            #bg3 {
                .bg-home("3")
            }

            #bg4 {
                .bg-home("4")
            }

            #w960 {
                max-width : 960px;
                min-height : 790px;
                height : 790px;
                margin : 0 auto;
                text-align : left;

                #layer {
                    min-width : 960px;
                }             

                #baryton .avatar {
                    position : absolute;
                    z-index : 20;
                    margin-top : 10px; // ma = Margin top de .avatar                              
                    height : 578px; // ha = Hauteur de .avatar      
                    margin-left : 0;
                }

                #baryton .shadow {
                    position : absolute;
                    z-index : 19;
                    margin-top : (-1024px+578px+10px-10px); // -hs + ha + ma - 10                            
                    width : 546px; // la = Largeur de .avatar
                    height : 1024px; // hs = Hauteur de shadow.png
                    margin-left : 0;
                    display : none;
                }

                #basse .avatar {
                    position : absolute;
                    z-index : 20;
                    margin-top : 74px; // ma = Margin top de .avatar
                    height : 514px; // ha = Hauteur de .avatar      
                    margin-left : 590px;
                }

                #basse .shadow {
                    position : absolute;
                    z-index : 19;
                    margin-top : (-1024px+514px+74px-10px); // -hs + ha + ma - 10               
                    width : 378px; // la = Largeur de .avatar
                    height : 1024px; // hs = Hauteur de shadow.png
                    margin-left : 590px;
                    display : none;
                }

                #tenor .avatar {
                    position : absolute;
                    z-index : 30;
                    margin-top : 315px; // ma = Margin top de .avatar
                    height : 322px; // ha = Hauteur de .avatar      
                    margin-left : 50px;
                }

                #tenor .shadow {
                    position : absolute;
                    z-index : 19;
                    margin-top : (-1024px+322px+315px-10px); // -hs + ha + ma - 10                                  
                    width : 236px; // la = Largeur de .avatar
                    height : 1024px; // hs = Hauteur de shadow.png
                    margin-left : 50px;
                    display : none;
                }

                #alto .avatar {
                    position : absolute;
                    z-index : 30;
                    margin-top : 210px; // ma = Margin top de .avatar
                    height : 425px; // ha = Hauteur de .avatar      
                    margin-left : 370px;
                }

                #alto .shadow {
                    position : absolute;
                    z-index : 19;
                    margin-top : (-1024px+425px+210px-10px); // -hs + ha + ma - 10                                          
                    width : 316px; // la = Largeur de .avatar
                    height : 1024px; // hs = Hauteur de shadow.png
                    margin-left : 370px;
                    display : none;
                }

                #mezzo .avatar {
                    position : absolute;
                    z-index : 40;
                    margin-top : 360px; // ma = Margin top de .avatar
                    height : 353px; // ha = Hauteur de .avatar      
                    margin-left : 260px;
                }

                #mezzo .shadow {
                    position : absolute;
                    z-index : 19;
                    margin-top : (-1024px+353px+360px-10px); // -hs + ha + ma - 10                                      
                    width : 224px; // la = Largeur de .avatar
                    height : 1024px; // hs = Hauteur de shadow.png
                    margin-left : 260px;
                    display : none;
                }

                #soprano .avatar {
                    position : absolute;
                    z-index : 40;
                    margin-top : 448px; // ma = Margin top de .avatar
                    height : 268px; // ha = Hauteur de .avatar      
                    margin-left : 610px;
                }

                #soprano .shadow {
                    position : absolute;
                    z-index : 19;
                    margin-top : (-1024px+268px+448px-10px); // -hs + ha + ma - 10                   
                    width : 210px; // la = Largeur de .avatar
                    height : 1024px; // hs = Hauteur de shadow.png
                    margin-left : 610px;
                    display : none;
                }

            }

            #instructions {

                display : none;

            }

            footer {
                position : relative;
                margin-top : 20px;
                bottom : 0;
                width : 100%;
                z-index : 60;
                padding : 10px 0px;
                font-size : 0.8em;
                letter-spacing : 0.1em;
                background : #228B75;
                font-family: 'Neue';
                font-weight : 300;

                .fleft {
                 float : left;
                 padding-left : 10px;
                 background : #228B75;
                }

                a {
                    font-family: 'Neue';
                    font-weight : 300;
                }

                a:hover {
                    border-bottom : 1px dotted #fff;
                }

                a:focus {
                    border-bottom : 1px dotted #fff;
                }

                center {
                    position : relative;
                    left : -210px;
                    a {
                        background : #228B75;
                        margin : 0 10px;
                    }
                }

            }

        }

    }

}

#topScore {
    position : relative;
    z-index : 100;
    left : 0;
    top : 0;                
    font-family: "Neue";
    text-transform : uppercase;
    font-size : 1em;
    width : 100%;
    height : 100%;
    display : table;
    text-align : center;
    transition: top 0.3s ease-in;
    overflow : hidden;

    table {
        margin : 40px auto;
        font-family: "Lucida Console", Monaco, monospace;
        background : #228B75;
        border : 30px solid #228B75;

        thead {
            text-transform: lowercase;
            border-bottom : 1px solid #FFF;
        }

        tr.myScore {
            background : #01da90;

            input[type="text"]{                            
                width : 45px;
                text-align : right;
                font-family: "Lucida Console", Monaco, monospace;
                text-transform : uppercase;
                color : #2c3e50;
                border : 3px solid #f1c40f;
                background : #ecf0f1;
                padding : 5px 10px;
                margin-right : -12px;
            }

            #tooltip{  
                position: absolute; 
                border : 5px solid #FFF; 
                background : #228B75; 
                text-align: center; 
                padding : 8px 10px; 
                margin-left : -260px;

                .arrow {
                        position: absolute; 
                        display : inline-block;
                        width: 0;
                        height: 0;
                        margin-left : 10px;
                        border-top: 11px solid transparent;
                        border-left: 15px solid #FFF;
                        border-bottom: 11px solid transparent;
                }

            }
        }

        td {
            text-align : right;
            padding : 2px 40px;
            margin : 0;
            font-size: 1.4em;

            .avatarMin {                            
                border-radius : 50%;
                width : 40px;
                height : 40px;
                margin : 0 0 0 10px;
                border-bottom : 0;
                display : block;
            }

            .avatarMin.basse { 
                border : 5px solid #58AFE1;
                background : #66ccff url('@{imgMobile}/avatars/basse/50.gif') no-repeat center center;
                background-size : contain;
            }

            .avatarMin.baryton { 
                border : 5px solid #BF78CE;
                background : #d79ae5 url('@{imgMobile}/avatars/baryton/50.gif') no-repeat center center;
                background-size : contain;
            }

            .avatarMin.tenor {
                border : 5px solid #81D4F8;
                background : #abfed8 url('@{imgMobile}/avatars/tenor/50.gif') no-repeat center center;
                background-size : contain;
            }

            .avatarMin.alto {  
                border : 5px solid #149E80;
                background : #abd372 url('@{imgMobile}/avatars/alto/50.gif') no-repeat center center;
                background-size : contain;
            }

            .avatarMin.mezzo {  
                border : 5px solid #D6AA1A;
                background : #ffff6f url('@{imgMobile}/avatars/mezzo/50.gif') no-repeat center center;
                background-size : contain;
            }

            .avatarMin.soprano {  
                border : 5px solid #EB344B;
                background : #eb344b url('@{imgMobile}/avatars/soprano/50.gif') no-repeat center center;
                background-size : contain;
            }

        }

        td.noPadding {
            padding : 2px 0;
        }

    }

    a, input[type="submit"] {
        background: #EB344B;
        border: 1px solid #FFF;
        padding: 15px 20px;
        font-size: 2em;
        letter-spacing: 3px;
        text-decoration : none;
        color : #FFF;
        text-transform : uppercase;
    }

    a:hover, input[type="submit"]:hover {
        border : 1px dotted #FFF;
    }

}

// STYLES - MOBILE
@media screen and (max-width: 960px) {
    html, body {min-width : 100% !important;}
    #h1, #instructions, .fleft {display:none;}
    #topScore, footer {position : relative !important;}
    table {background : none !important; border : 0 !important;}
    center {left : 0 !important;}
    .bg{min-width : 100% !important;}
    .mobileOnly {
        display : inline;
    }
}