/************************************************
    POSITIONS (MODULES LOCATION) 
    and MAIN COMPONENT
    styling 
(THEME GENERIC)
*************************************************/

/************************************************
  HEADER
************************************************/


#header{
    height: auto;
    overflow:visible;
    padding-top:32px;
    
}


#main{
    overflow:auto;
    /*border:solid 3px blue;*/
    min-height: 400px;
    width:100%;
    
}


/* 
<jdoc:include type="component" /> 
*/
.main-component{
    float:left;
    margin-left:10%;
    width:80%;
    /*min-height:600px;*/
}

span.dbg-pos-name{
    height:1px;
    display:block;
    /*display:none;*/ /* TEM DE ESTAR AQUI! */
}

/* HeaderTop */
.header-top{
    display:block;
    width:100%;
    margin:0;
    padding:0;
    
    text-align: right;

}


/* HeaderLeft */
.header-left{
    float:left;
    margin:0;
    padding:0;
    display:block;
    background:url(../../images/topLogo.png) no-repeat right top;
    background-size: 90%;
    /*width:400px;*/
    width:20%;
    min-width:300px;
    cursor: pointer;
    height:122px;
    
}

/* HeaderCenter */
.header-center{
     float:right;
}

/* HeaderRight */
.header-right{
    float: right;
    /*width:78%;*/
    /*width:700px;*/
    margin:0;
    padding:0;
   /* max-width:200px ;*/
    text-align: right;
    
}

.header-right.small{
    width:100% !important;
    /*display:none;*/
    height:0 ;
}
.header-right.small.expanded{
    display:block;
    height: auto;
}

/* HeaderBottom */
.header-bottom{
    float: left;
    /*position:relative;*/
    width:100%;
    /*min-height:30px;*/
    margin:0;
    padding:0;
    margin-top:150px;
    
}


/************************************************
  MAIN
************************************************/

.main-top{
    float:left;
    /*margin-left:10%;
    margin-right:10%;*/
    width:100%;
    min-height: 1px;
}

.main-bottom{
    /*float:left;*/
    /*margin-left:10%;
    margin-right:10%;*/
    width:100%;
    min-height: 1px;
}


/************************************************
  FOOTER
************************************************/


/* FooterTop */
.footer-top{
    display:block;
    width:100%;
    min-height:1px;
    margin:0;
    padding:0;
    
    /*max-width:600px; */
}
.footer-middle{
    padding-top:30px;
    width:100%;
    /*margin: 10px auto;*/
    /*overflow-y: auto;*/
    text-align: center;
    background-color: #444444;
    min-height:400px;    
}


.foot{
    min-width:200px;
    overflow:visible !important;
    margin:0 auto;
    display:inline-block;
    vertical-align:top;
    /*border:solid 1px #555;*/
    background-color: #444444;
}
.footer1{
    width:20%;
    overflow: auto;
    background-color: #444444;
    height:240px;    
    
}
.footer2{
    width: 20%;
    height:120px;
    overflow: auto;
    background-color: #444444;
    
}
.footer3{
    width:25%;
    overflow: auto;
    height:120px;
    background-color: #444444;
    
}
.footer4{
    width:33%;
    overflow: auto;
    background-color: #444444;
    min-height:340px;
    
    
}

.footer-bottom{
    width:100%;
    /*height:100px;
    background-color: #000;*/
    padding-top:10px;
    padding-bottom:10px;
    color:#fff;
}






/********************************************************************************/
/* Custom, iPhone Retina */ 
/********************************************************************************/
@media only screen and (min-width : 280px) {
   
    /*.header-left{
        width:300px;
        height:92px;
    }
    */
    .footer1, .footer2, .footer3, .footer4,.footer5{
        width:100%;
    }
}

/********************************************************************************/
/* Extra Small Devices, Phones */ 
/********************************************************************************/
@media only screen and (min-width : 480px) {
    /*
    .header-left{
        width:300px;
        height:92px;
    }*/
    
    .footer1{
        width:50%;
        /*padding-left: 10%;*/
    }
    .footer2{
        width: 20%;
    }
    .footer3{
        width:20%;
    }
    .footer4{
        width:100%;
    }
    div.item-page-homepage>div>table>tbody>tr>td{
        width:120px !important;
    }
    
    .module-plform-momentos {
        margin-left: 8%;
        width:84%;
    }
    
    .pl-form-momentos.detail section,
    .pl-form-momentos.detail aside{
        width:100%;
    }
 
}

/********************************************************************************/
/* Medium Devices, Desktops */
/********************************************************************************/
@media only screen and (min-width : 992px) {
/*
    .header-left{
        width:300px;
        height:92px;
    }*/
   
    .footer1{
        width:40%;
        /*padding-left: 1%;*/
    }
    .footer2{
        width: 20%;
    }
    .footer3{
        width:20%;
    }
    .footer4{
        width:100%;
    }

    div.item-page-homepage>div>table>tbody>tr>td{
        width:130px !important;
    }
    
    .module-plform-momentos {
        margin-left: 10%;
        width:80%;
    }
    
    .pl-form-momentos.detail section,
    .pl-form-momentos.detail aside{
        width:48%;
    }
    
}

/********************************************************************************/
/* Large Devices, Wide Screens */
/********************************************************************************/
@media only screen and (min-width : 1200px) {
   /*
    .header-left{
        width:400px;
        height:122px;
    }
   */
    .footer1{
        width:30%;
        /*padding-left: 1%;*/
    }
    .footer2{
        width: 20%;
    }
    .footer3{
        width:20%;
    }
    .footer4{
        width:25%;
    }
   
}

/********************************************************************************/
/* EXTRA Large Devices, Wide Screens */
/********************************************************************************/
@media only screen and (min-width : 1600px) {
   /**
    .header-left{
        width:400px;
        height:122px;
    }*/
    
    .footer1{
        width:15%;

    }
    .footer2{
        width: 25%;
    }
    .footer3{
        width:25%;
    }
    .footer4{
        width:20%;
    }
    .footer5{
        width:15%;
    }
   
}