/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::INSTRUCTIONS::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::INSTRUCTIONS::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::INSTRUCTIONS::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
//criei file styles.less (fazer link no html principal) que vai conter todos os css para serem usados pelo less.js, chamado no html também
//usei este compiler para compiliar o styles.less para poder ser lido como .css pelo browser >>>> http://winless.org/

//:::: FONT FAMILY
@fontFamily: 'Raleway', sans-serif;
//:::: COLORS
@color-red: rgba(218, 42, 42,1.00);
@color-gray-dark: rgba(208, 208, 208, 1);
@color-gray-light: rgba(233, 233, 233, 1);
@color-hover-textLinks: rgba(204, 204, 204, 1);
@color-bg-lopperContainer: rgba(255, 255, 255, 0.5);
@color-mainButtons-hover: rgba(111, 226, 255, 1);
@color-mainButtons-info-container-bg: rgba(229,229,229,0.9);
@color-mainButtons-background: rgba(0, 85, 150, 0.9);
@color-curso_details_hovers: rgba(0, 165, 228, 1);
@color-largeButton_particulares: rgba(0,165,228,1);
@color-largeButton_empresas: rgba(0,84,149,1);
@color-largeButtons_borderBottom: rgba(0, 123, 170, 1);
//:::: DIMENSIONS
@main_width: 1000px;
//:::: CURSOR
@cursorPointer: pointer;
//:::: EASE TIME
@easeTime: 0.3s; 

//:::: TRANSITIONS
.mainTransition(@easeTime, @myEase){
    
    -webkit-transition: All @easeTime @myEase;
   -moz-transition: All @easeTime @myEase;
   -o-transition: All @easeTime @myEase;
   -ms-transition: All @easeTime @myEase;
   transition: All @easeTime @myEase;
    
}



/*::::::::::::::::::::::::::geral*/
* {
	margin:0;
    padding:0;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}
body{
    font-family: @fontFamily;
    font-size: 14px;
}
html{
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	background-image:url(bg_entrada.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-color:#000000;
	min-width: @main_width;
	overflow: hidden;
}
/*::::::::::::::::::::::::::top bar*/
#topBar{
	position: absolute;
	width: @main_width + 2;
	height: 102px;
	left: 50%;
	margin-left: -501px;
	top: 0;
	z-index: 5;
}
/*::::::::::::::::::::::::::topImage*/
 #topImage {
     position: absolute;
     width: 1920px;
     height: 500px;
     left: 50%;
     top: 0;
     margin-left: -960px;
     background-image: url(imageTop.jpg);
     z-index: 2;
    
 }
    
/*::::::::::::::::::::::::::login*/
#login{
    position: absolute;
    width: @main_width;
    height: 152px;
    left: 50%;
    top: 510px;
    margin-left: 0px;
    background-image:url(bg_login.png);
    background-repeat: no-repeat;
    z-index: 5;
       
    
}
#login_entrarBtn{
   
   
    background-color: @color-red;   
    cursor: @cursorPointer;
    color: #fff;
    font-size: 1.2em; 
    border:none;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
    text-align: center;
    /*Transition*/
    .mainTransition(@easeTime, ease);
	
    
}

#form_login{
    position: relative; 
    top: 20px;
    left: 20px;
    width: 460px;
    
}
#form_login input{
    
    border:0px solid #444444;
    margin-bottom: 5px;
    width: 260px;
	height: 35px;
    background-repeat: no-repeat;
    padding-left: 10px;
    font-family: @fontFamily;
    font-weight: 600;
   
}
#login_username{
   
	background-image:url(username_bg.png);
 
}

#login_password{
   
	background-image:url(password_bg.png);
	
}


#login_entrarBtn:hover {
     background-color: rgba(112, 26, 30, 1);
    
}
#form_login input:focus{ 
	outline: none;
}
/*::::::::::::::::::::::::::recuperar password btn*/
#recuperar_password_btn {
    position: absolute;
    left: 300px;
    top: 90px;

}
#recuperar_password_btn, #utilizador_registado{
    
    a{
         color: #fff;
        text-decoration: none;
        font-weight: 800;
        /*Transition*/
        .mainTransition(@easeTime, ease);
         
    }
   
}
#recuperar_password_btn, #utilizador_registado {
    
    a:hover{
        
        color: @color-hover-textLinks;
    }
    
    
}  

/*::::::::::::::::::::::::::utilizador registado*/

#utilizador_registado{
    
    position: absolute;
    top: 0;
    left: 280px;
    height: 75px;
    padding-top: 25px;
    color: white;
    text-align: center;
    line-height: 20px;
    border-bottom: solid 1px rgba(204, 204, 204, 0.5);   
    
}

#utilizador_registado {
    
    a{
        
      top: 0; 
      position: absolute; 
      left: 50px; 
        
    }
    
    
}

 
    
/*::::::::::::::::::::::::::bottom bar*/
#footer{
    
	position: absolute;
	width: 1002px;
	height: 62px;
	left: 50%;
    bottom: 0px;
	margin-left: -501px;
	bottom: 0;
    z-index: 3;
}
/*::::::::::::::::::::::::::linksLinguas*/
#linksLinguas{
   position: absolute;
   width: 370px;
   bottom: 10px;
   left: 50%;
   margin-left: 155px;
   z-index: 10;
}
#linksLinguas ul{
   list-style-type: none;
}
#linksLinguas ul li{
   display: inline-block;
	vertical-align:top;
	height:40px;
	width:35px;
   cursor: pointer;
	margin-left:5px;
	margin-right:5px;
   padding-top: 4px; 
}

#linksLinguas ul li img{
   
	height:30px;
	width:30px;
 
}
/*::::::::::::::::::::::::::loopImagesContainer*/
#loopImagesContainer{
    
	position: absolute;
	width: @main_width;
	height: 400px;
	top: 100px;
	left: 50%;
	margin-left: -500px;
    background-color: @color-bg-lopperContainer; 
    z-index: 4; 

}
/*::::::::::::::::::::::::::loopImagesContainer*/
#loopImagesMask{
    
	width: @main_width;
	height: 400px;
}
/*::::::::::::::::::::::::::loopImagesContainer divisoria*/
#divisoria{
    
    height: 10px;
    background-image: url(divisoria.png); 
}

/*::::::::::::::::::::::::::::::::CURSOS BUTTONS::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::CURSOS BUTTONS::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::CURSOS BUTTONS::::::::::::::::::::::::::::::::*/
#buttons_large{
    
    width: @main_width;
    height: 35px;
    position: absolute;
    bottom: 35px;
    font-size:0;
   
   

}
#conteudos_buttons_container{
    
    width: @main_width;
    height: 35px;
    position: absolute;
    bottom: 0;
    font-size:0;
    overflow: hidden;
    background-color: @color-mainButtons-background;

}

#main_buttons_container{
    
    width: @main_width;
    height: 35px;
    position: absolute;
    bottom: 0;
    font-size:0;

}
.large_buttons{
    
    width: 500px;
    font-size: 18px;
     border-bottom: 1px solid @color-largeButtons_borderBottom;
    /*visual*/
    .buttons_normal_notSelected;
   
    
    /*shadow*/
    -webkit-box-shadow: 0px -1px 2px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px -1px 2px 0px rgba(0,0,0,0.75);
    box-shadow: 0px -1px 2px 0px rgba(0,0,0,0.75);
    
     /*Transition*/
    .main_buttons_transition;
    
    
}
.large_buttons_particulares:hover{
    
    .buttons_hover_selected_particulares;

}
.large_buttons_empresas:hover{
    
    .buttons_hover_selected_empresas;

}
//:::: buttons over selected particulares
.buttons_hover_selected_particulares{
    
    background-color: @color-largeButton_particulares;   
    color:  black;
    
     /*Transition*/
    .main_buttons_transition;
    
}
//:::: buttons over selected empresas
.buttons_hover_selected_empresas{
    
    background-color: @color-largeButton_empresas;   
    color:  white;
    
     /*Transition*/
    .main_buttons_transition;
    
}

//:::: buttons over selected
.buttons_normal_notSelected{
    
    height: 35px;
    line-height: 37px;
    text-align: center;
    display: inline-block;
    cursor: @cursorPointer;
    font-weight: 600;
    color: white;
    background-color: @color-mainButtons-background;
    
}
.main_buttons_transition{
    
    /*Transition*/
    -webkit-transition: background-color @easeTime ease-in-out, color @easeTime ease-in-out;
     -moz-transition: background-color @easeTime ease-in-out, color @easeTime ease-in-out;
     -o-transition: background-color @easeTime ease-in-out, color 0.3s ease-in-out;
     -ms-transition: background-color @easeTime ease-in-out, color @easeTime ease-in-out;
      transition: background-color @easeTime ease-in-out, color @easeTime ease-in-out;
    
}
.main_buttons{
    
    width: 142.5px;
    font-size: 12px;
    
    /*visual*/
    .buttons_normal_notSelected;
 
    /*shadow*/
    -webkit-box-shadow: 0px -1px 2px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px -1px 2px 0px rgba(0,0,0,0.75);
    box-shadow: 0px -1px 2px 0px rgba(0,0,0,0.75);
    
     /*Transition*/
    .main_buttons_transition;
    
    
}

//:::: buttons PARTICULARES
.main_buttons.main_button_particulares{
  
    background-color: @color-largeButton_particulares;   
    color:  black;

}
/*
.main_buttons.main_button_particulares:hover {
    
    background-color: rgba(30, 74, 100, 1);
    color: white;
     //::Transition
    .main_buttons_transition;
    
}*/
//:::: buttons EMPRESAS
.main_buttons.main_button_empresas{
  
    background-color: @color-largeButton_empresas;   
    color:  white;

}
/*
.main_buttons.main_button_empresas:hover {
    
    background-color: rgba(13, 98, 251, 1);
    color: black;
    //::Transition
    .main_buttons_transition;
    
}*/
#main_buttons_info_container{
    width: @main_width;
    height: 365px;
    position: absolute;
    top: 0;
    background-color: @color-mainButtons-info-container-bg;
    padding: 20px;
    overflow-y: scroll;
    display: none;

}
/*::::::::::::::::::::::::close button:::::::::::::::::::::::*/
.close_info_buttons{
    cursor: @cursorPointer;
    position: absolute;
    top: 0;
    right: 0;
    
}
/*::::::::::::::::::::::::main div info:::::::::::::::::::::::*/
.infos{
    font-size: 1.1em;
}
.infos {
    
        h2{
             border-bottom-width: 1px;
             border-bottom-style: solid;
             border-bottom-color: rgba(43,43,43,0.35); 

        }
        
        ul{
            padding: 10px 10px 10px 30px;
            font-weight: 400;
        }
     
        
    }
    
/*::::::::::::::::::::::::curso_list divs:::::::::::::::::::::::*/
.curso_list{
    
    
    li{
        cursor: @cursorPointer;
        background-color: @color-gray-dark;;
        line-height: 25px;
        font-weight: 600;
    }
    li:nth-child(odd) { 
     background-color: @color-gray-light;;

    }   
    
}
  
hr{
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0,0,0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        
}
/*::::::::::::::::::::::::h3:::::::::::::::::::::::*/
.infos {
    
    
    h3{
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-bottom-color: rgba(43,43,43,0.35);
     padding: 10px 0 5px 10px;
        
    }
    
    div:nth-child(even) {
    background: @color-gray-dark;;
    }
    
    div:nth-child(odd) {
    background: @color-gray-light;;
}
    
}

/*::::::::::::::::::::::::curso_details_info divs:::::::::::::::::::::::*/
.curso_details_info_divs_h3{
    
        cursor: @cursorPointer;
        color:  rgba(0, 0, 0, 1);
    
        /*Transition*/
        .mainTransition(@easeTime, ease);
    
}
.curso_details_info{
    background-color: rgba(199,230,255,0.25);
    
}

.curso_details_info{
    
    p{
        padding: 10px 10px 5px 20px;
    }
    
    h3{
        
        .curso_details_info_divs_h3;
    }
    
}
/*::::::::::::::::::::::::curso_details_info h3 && curso_list li:::::::::::::::::::::::*/

.curso_details_hovers{
    
     background-color: @color-curso_details_hovers;
     color:  rgba(255, 255, 255, 1);
    
    /*Transition*/
    .mainTransition(0.4s, ease);
  
}


.curso_list {
    
    li{
        .curso_details_info_divs_h3; 
    }
      
}

.curso_details_info h3:hover, .curso_list li:hover{
    
    .curso_details_hovers;
    
}
/*::::::::::::::::::::::::aviso_title:::::::::::::::::::::::*/ 
.aviso_title{
    color: rgba(218, 42, 42, 1); 
    font-size: 0.7em;
    padding-left: 5px;
    line-height: 25px;
}
/*::::::::::::::::::::::::::avisoF11*/
#avisoF11{
	position: absolute;
	width: 501px;
	height: 210px;
	top: 100px;
	left: 50%;
	margin-left: -250.5px;
	background-image: url(avisoF11.png);
	background-repeat: no-repeat;
	z-index: 10;
}
/*::::::::::::::::::::::::::::::::MEDIA QUERY::::::::::::::::::::::::::::*/
/*::reposiciona o login::::*/ 
@media screen and (max-width: 700px), screen and (max-height: 700px){ 
    
                   /*::::::::::::::::::::::::::login*/
                #login{
                    position: absolute;
                    width: 1002px;
                    height: 152px;
                    left: 50%;
                    margin-left: -501px;
                    background-image:url(bg_login_horizontal.png);
                    background-repeat: no-repeat;

                }
               
                
                #login_password{
                    position: absolute;
                    top: 0;
                    left: 160px;
                

                }
                #form_login input{
                    position: absolute;
                    top: -10px;
                    width: 150px;

                }
        
    /*::::::::::::::::::::::::::recuperar password btn*/
                #recuperar_password_btn {
                    position: absolute;
                    left: 800px;
                    top: 0px;
                    width: 110px;
                  

                }
                #recuperar_password_btn a {
                
                     font-weight: 400;
                     font-size: .8em;
                    

                }
                #login_entrarBtn{


               left: 320px;
                text-align: center;


            }
                /*::::::::::::::::::::::::::utilizador registado*/

                #utilizador_registado{

                    top: -35px;
                    left: 500px;
                    height: 50px; 
                    width: 250px;
                    font-size: 0.9em;
                    border-bottom: none; 
                    text-align:center;

                }
                #utilizador_registado {

                    a{

                      top: 45px; 
                      position: absolute; 
                      left: 85px; 
                     

                    }


                }



 }