/* less codes */


/*THEME RED (with blue skills)*/
/*
@themeColor1: #ef473c;
@themeColor2: #c93328;
@headerColor: #ffdfdd;
@shadowMeColor: darken(@themeColor1, 36.5%);
@textShadowColor: darken(@themeColor1, 25%);
@themeSecondarycolor: #9acfff;
*/


/*THEME green (with gray skills)*/
/*
@themeColor1: #509b75;
@themeColor2: darken(@themeColor1, 10%);
@headerColor: #ddf2ff;
@shadowMeColor: darken(@themeColor1, 36.5%);
@textShadowColor: darken(@themeColor1, 25%);
@themeSecondarycolor: #bfbfbf;
*/

/*THEME blue (with red skills)*/


/*
@themeColor1: #32A5C2;
@themeColor2: darken(@themeColor1, 10%);
@headerColor: #ddf2ff;
@shadowMeColor: darken(@themeColor1, 36.5%);
@textShadowColor: darken(@themeColor1, 25%);
@themeSecondarycolor: #bfbfbf;

*/

/*Theme purple (with gray skills)*/

/*
@themeColor1: #624f87;
@themeColor2: darken(@themeColor1, 10%);
@headerColor: #ddf2ff;
@shadowMeColor: darken(@themeColor1, 36.5%);
@textShadowColor: darken(@themeColor1, 25%);
@themeSecondarycolor: #bfbfbf;

*/

/*Theme purple lighter (with gray skills)*/


@themeColor1: #9b5081;
@themeColor2: darken(@themeColor1, 10%);
@headerColor: #ddf2ff;
@shadowMeColor: darken(@themeColor1, 36.5%);
@textShadowColor: darken(@themeColor1, 25%);
@themeSecondarycolor: #bfbfbf;







/*Theme pink lighter (with gray skills)*/

/*
@themeColor1: #f160c3;
@themeColor2: darken(@themeColor1, 10%);
@headerColor: #ddf2ff;
@shadowMeColor: darken(@themeColor1, 36.5%);
@textShadowColor: darken(@themeColor1, 25%);
@themeSecondarycolor: #bfbfbf;

*/





/*Theme orange-brown*/

/*
@themeColor1: #87714f;
@themeColor2: darken(@themeColor1, 10%);
@headerColor: #ddf2ff;
@shadowMeColor: darken(@themeColor1, 36.5%);
@textShadowColor: darken(@themeColor1, 25%);
@themeSecondarycolor: #bfbfbf;
*/





/*Theme orange*/


/*
@themeColor1: #9b6050;
@themeColor2: darken(@themeColor1, 10%);
@headerColor: #ddf2ff;
@shadowMeColor: darken(@themeColor1, 36.5%);
@textShadowColor: darken(@themeColor1, 25%);
@themeSecondarycolor: #bfbfbf;
*/








/*helper variables */
@bgColor: #f0f0f0;
@darkBgColor: #dfdfdf;
@lightestBGColor: #ffffff;

@boxBorderColor: #c2c2c2;
@boxBorderShadow: #b2b2b2;

@shadowColor1: #999999;


@textColor: #121212;
@midLightTextColor: #414141;
@lightTextColor: #7b7a7a;
@veryLightTextColor: #bababa;
@lightestTextColor:#fff;

@socialLinksColor: #eeeeee;

@textShadowColor1: #000;





/*helper functions (Called Mixins)*/

.gradient(@color1, @color2){
  background: -moz-linear-gradient(top,  @color1 0%, @color2 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@color1), color-stop(100%,@color2)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  @color1 0%,@color2 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  @color1 0%,@color2 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  @color1 0%,@color2 100%); /* IE10+ */
  background: linear-gradient(to bottom,  @color1 0%,@color2 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=@color1, endColorstr=@color2,GradientType=0 ); /* IE6-8 */  
}



.transitioner(@params){
  transition:@params;
  -moz-transition:@params; /* Firefox 4 */
  -webkit-transition:@params; /* Safari and Chrome */
  -o-transition:color @params; /* Opera */
}


.ellipsify(@height){
  overflow: hidden;
  o-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;  
  text-overflow: ellipsis;
  white-space: nowrap;
  height: @height;
}

.shadowMe(@params){
  box-shadow: @params;
  -webkit-box-shadow: @params;
  -moz-box-shadow: @params;
  -o-box-shadow: @params;
  
}


.borderRadiusMe(@params){
  border-radius: @params;
  -webkit-border-radius: @params;
  -moz-border-radius: @params;
  -o-border-radius: @params;
}


/*end mixins*/







/*general css */

::selection
{
background-color: @themeColor1;
color:#fff;
}
::-moz-selection
{
background-color: @themeColor1;
color:#fff;
}




h1,h2,h3,h4,h5,h6,ul,li,p{
  margin: 0;
  padding: 0;
}

ul, li{
  list-style: none;
}

a, a:active, a:visited, a:focus, a:hover{
  text-decoration: none;
  color: @textColor;
}

input[type="text"], input[type="email"], input[type="tel"], select, textarea{
  background: #f9f9f9;
  border: 1px solid #DFDFDF;
  padding: 2%;
    box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 100%;
  font-size: 11px;
  .borderRadiusMe(0);
}


 input.invalid, textarea.invalid{
  border: 1px solid red;
}




























/*this is useless, useful if using a background image for full website*/
/*
#bgImage{
  display: none;
  opacity: 0.02;
  filter: alpha(opacity=2);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  z-index: -1;
}
*/

#header, #footer{
  color: @headerColor;
  text-shadow: 1px 1px 1px @textShadowColor;
  background: @themeColor1; /* Old browsers */
  .gradient(@themeColor1, @themeColor2);
}



.homeButton{
  position: absolute;
  left: 0px;
  top: 0px;
  background: url(../img/icon-home.png) no-repeat center center;
  width: 44px;
  height: 44px;
  color: @headerColor !important;

}


.backButton{
  position: absolute;
  left: 0px;
  top: 0;
  width: 44px;
  text-align: center;
  line-height: 42px;
  font-size: 22px;
  color: @headerColor !important;

}


.nextButton{
  position: absolute;
  right: 0px;
  top: 0;
  width: 44px;
  text-align: center;
  
  line-height: 42px;
  font-size: 22px;
  color: @headerColor !important;

}


#header{
  height: 44px;
  text-align: center;
  position: fixed;
  width: 100%;
  top:0;
  z-index: 999999;
  .shadowMe(1px 1px 3px 0px @shadowMeColor);
  
  
  h1, h2{
    margin: 0;
    font-weight: normal;    
  }
  h1{
    font-size: 16px;
    padding: 5px 0 0;
  }
  h2{
    font-size: 11px;
    padding: 1px 0 0;
    text-transform: capitalize;
    span{
      text-transform: lowercase;
    }
  }
}
  
#footer{
    
  
  padding: 0 2%;
  position: relative;
  
  height: 23px;
  color: #fff;
  font-size: 10px;
  line-height: 23px;
  
  a.html5{
    position: absolute;
    right: 4px;
    top: -2px;
    display: block;
    img{
      height: 21px;
    }
  }
  
}




body{
  font-family: 'Source Sans Pro', sans-serif;
  background: @bgColor !important;
  color: @textColor;
  font-size: 11px;
  padding: 46px 0 0;
  overflow-y: scroll !important;
}
  
.content{
  margin: 2%;
}

.innerContent{
  padding: 2%;
}
  

/*
 if you want custom top bar and bottom bar background color for the gallery (portfolio page)
.ps-caption, .ps-toolbar{
  .gradient(@themeColor1, @themeColor2);
}
*/



/*General 1 column, 2 column and 3 column container css*/
/*page example "page1.html"*/

.columnContainer{
  .column{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100%;
    padding: 0 2%;
    font-size: 13px;
  }
  
  &.column-1{
    .column{
    text-align: justify;
    }
  }
  
  &.column-2{
    .column{
      width: 50%;
      float: left;
    }
  }
  
  &.column-3{
    .column{
      width: 33%;
      float: left;
    }
  }
  
}




.successMessage{
  display: none;
}

#buttons{
  .ui-button{
    margin: 3px;
  }
}

.left{
  float: left;
}
.right{
  float: right;
}


.alpha{
  margin-left: 0 !important;
}
.omega{
  margin-right: 0 !important;
}




/*
 BUTTONS
*/

.button{
  border: 1px solid #b3b3b3;
}

.buttonStrong{
  color: #fff;
  font-size: 11px;
  padding: 4px 20px;
  width: auto;
  margin: 2%;
  .gradient(@themeColor1, @themeColor2);
}
















/*start profile area - contact card */
  
  .profileArea{
    .profilePicAreaContainer{
      background: #f2f2f2;
      padding: 3px;
      border: 1px solid #e0e0e0;
      .shadow{
        position:absolute;
        width:84px;
        height: 84px;
        opacity: 0.5;
        filter: alpha(opacity=50);
      }
    }
    
    .profilePicAreaContainer, .profilePicArea{
      width: 84px;
      height: 84px;
      overflow: hidden;
      margin-right: 7px;
      .borderRadiusMe(42px);
      img{
        width: 100%;
      }
    }
    
    .profileInfoArea{
      margin-top: 6px;
      font-size: 13px;
      .location{
        margin: 2px 0 4px;
        color: @lightTextColor;
      }
      .social{
        img{
          height: 16px;
        }
      }
    }
    
  }
  /*end profile area */
  
  
  
  .separator{
    background: url(../img/separator-line.png) repeat-x;
    height: 2px;
    width: 100%;
    margin: 2% 0;
  }
  
  















  #pageHome{
    .pagesMenu{
      margin: 0 2%;
    }
    .pageLink{
      background: @lightestBGColor;
      .shadowMe(1px 1px 2px 0px @shadowColor1);
      float: left;
      display:block;
      overflow: hidden;
      padding: 2px;
      color: #4d4d4d;
      
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      
      margin: 0 5% 5% 0;
      width: 30%;
      
      &:nth-child(3n+3){
        margin-right: 0;
      }
      
      
      
      .iconBox{
        width: 100%;
        background: @darkBgColor;
        overflow: hidden;

        text-align: center;
        img{
          width: 100%;
        }
      }
      
      
      .titleBox{
        height: 20px;
        text-align: center;
        font-weight: 200;
        font-weight: 400;
        text-transform: uppercase;
        line-height: 23px;
        
      }
    }
    
    @colorY5: #ffffff;
    @colorX5: darken(@colorY5, 20%);
    
    
    #linkExtra2 .iconBox{
      .gradient(@colorX5, @colorY5);
      
    }
    
    @colorY6: #b40395;
    @colorX6: darken(@colorY6, 0%);
    #linkExtra1 .iconBox{
      .gradient(@colorX5, @colorY5);
      
    }
    
    /*
     will provide this later - custom box sizes
    .pageLink-1-1{
      width: 92px;
      height: 92px;
    }
    .pageLink-1-2{
      width: 92px;
      height: 196px;
    }
    .pageLink-1-3{
      width: 92px;
      height: 300px;
    }
    
    .pageLink-2-1{
      width: 196px;
      height: 92px;
    }
    .pageLink-3-1{
      width: 300px;
      height: 92px;
    }
    */
    
    
  }












  .groupBox{
    background: @lightestBGColor;
    border: 1px solid @darkBgColor;
    
    &.rounded{
      .borderRadiusMe(4px);
    }
    
    ul{
      &.spacious{
        li{
          padding: 10px;
        }
      }
      
      
        .icon{
          display: block;
          padding-right: 32px;
          background-position: right center;
          background-repeat: no-repeat;
        }
        
        .iconEmail{
          background-image: url(../img/icon-email.png);
        }
        .iconTel{
          background-image: url(../img/icon-tel.png);
        }
        
      li{
        line-height: 16px;
        padding: 2%;
        border-bottom: 1px solid @darkBgColor;
        .value{
          font-weight: 600;
          font-size: 13px;
        }
        .key{
          font-weight: normal;
          font-size: 11px;
          color: @lightTextColor;
          text-transform: uppercase;
        }
        
        &.last{
          border: 0px;
        }
      }
      /*end li*/
    }
    /*end ul*/
    
  }
  
  












#pageContact{
  
  textarea{
    height: 100px;
  }
  form .groupBox{
    li{
      border-bottom: 0 !important;
      padding-bottom: 0 !important;
    }
  }
  
  #map{
    iframe{
      width: 100%;
      height: 150px;
    }
  }
  
  .pivotTab{
    margin-top: -10px;
  }
}









#pageResume{
  
}






#pagePortfolio{
  margin-top: 10px;
  .tabsPortfolio{
    position: relative;
    height: 30px;
    
    .instruction{
      position: absolute;
      display: none;
      padding-right: 20px;
      background: url(../img/icon-finger.png) no-repeat right center;
      height: 32px;
      line-height: 32px;
      font-size: 12px;
      color: @lightTextColor;
      &.lefter{
        left: 3%;
      }
      .transitioner(all 0.4s);
    }
    
    ul{
      display: block;
      text-align: center;
      
      li{
        display: inline-block;
        &.second{
          margin-left: -7px;
        }
        
        a{
          font-size: 22px;
          color: @veryLightTextColor;
          &.active{
            color: @midLightTextColor;
            position: relative;
            text-shadow: 1px 1px 1px #fff;
          }
        }
        
      }
    }
    /*end ul*/
  }
  /*end tabsPortfolio*/
  
  
  .portfolioProjects{
    display: none;
    opacity: 0;
    filter: alpha(opacity=0);
    
    li{
      .shadowMe(0 0 1px #999);
      a.thumb{
        display: block;
        .borderRadiusMe(3px);
        
        /*
        width: 77px;
        height: 67px;
        */
        
        overflow: hidden;
        img{
          width: 100%;
        }
      }
    }
    /*end li*/
  }
  
  
  .list{
    margin: 0 2%;
    li {
      margin: 0 0 2% 0;
      .thumb{
        float: left;
        width: 26%;

      }
      .groupBox{
        border-right: 2px solid @themeColor1;
      }
      .description{
        position: relative;
        float: left;
        width: 74%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;

        padding: 2px 18px 0 2%;
        .title{
          font-size: 14px;
          line-height: 16px;
          max-height: 32px;
          overflow: hidden;
          padding-bottom: 4px;
          color: @textColor;
        }
        .about{
          font-size: 12px;
          color: @lightTextColor;
          max-height: 28px;
          overflow: hidden;
        }
        
        .website{
          position: absolute;
          right: -10px;
          top: 0;
          color: @themeColor1;
          padding: 0 10px 0 10px;
          font-size: 20px;
          height: 100%;
          display: block;
          line-height: 66px;
        }
      }
    }
  }
  
  .grid{
    margin: 0 0 0 4%;
    li{
      float: left;
      /*margin: 0 22px 22px 0;*/
      border: 1px solid #ddd;
      width: 29%;
      margin: 0 3% 3% 0;
    }
    .description{
      display: none;
    }
    .groupBox{
      background: none !important;
      border: 0 !important;
    }
    .innerContent{
      padding: 0 !important;
    }
    
    /*end thumb*/
  }
  
}
























.skills{
  color: @lightTextColor;
  .value{
    margin-bottom: 4px;
  }
  .skillBar{
    background: @bgColor;
    width: 100%;
    height: 17px;
    .skillCount{
      height: 17px;
      line-height: 17px;
      
      background: @themeSecondarycolor;
      color: #fff;
      font-size: 15px;
      font-weight: 600;
      text-align:right;
      position: relative;
      .text{
        position: absolute;
        right: 3px;
      }
    }
    
    .skillCount1{
      width: 10%;
    }
    
    .skillCount2{
      width: 20%;
    }
    
    .skillCount3{
      width: 30%;
    }
    
    .skillCount4{
      width: 40%;
    }

    .skillCount5{
      width: 50%;
    }

    .skillCount6{
      width: 60%;
    }
    
    .skillCount7{
      width: 70%;
    }
    
    .skillCount8{
      width: 80%;
    }
    
    .skillCount9{
      width: 90%;
    }

    .skillCount10{
      width: 100%;
    }
  }
  
}


.pivotTab{
  display: none;
}

#skillsTab{
  margin-top: -10px;
}

#pivotTabs{
  
  width:100%;
  overflow:auto;
  
  #scroller {
    width:4040px;
    float:left;
    padding:0;
    
    ul {
      list-style:none;
      display:block;
      float:left;
      width:100%;
      padding:0;
      margin:0;
      text-align:left;
      
      li{
        float: left;
        a{
          display: block;
          font-size: 22px;
          line-height: 22px;
          text-decoration: none;
          padding: 10px 32px 10px 0;
          text-transform: lowercase;
          color: lighten(@midLightTextColor, 40%);
          
          &.goToFirst{
            /*background:url(../img/icon-tab-first.png) no-repeat 0 center;*/
          }
          &.active{
            color: @midLightTextColor;
            text-shadow: 1px 1px 1px #fff;
          }
        }
      }
    }
    /*end ul*/
    
  }
  /*end scroller*/
  
}
/*end pivotTabs*/




.sectionTitle{
  color: #7b7b7b;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: normal;
  margin-top: 10px;
  padding: 12px 0 7px 0;
  text-shadow: 1px 1px 1px #fff;
}



.qtipLinks{
  display: none;
}

.socialLinks{
  margin-top: 2px;
  a{
    display: block;
    padding: 7px;
    text-align: center;
    background: @socialLinksColor;
    color: @textColor;
    font-size: 14px;
    margin-bottom: 4px;
    width: 130px;
    .borderRadiusMe(4px);
  }
}