@charset "utf-8";

/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.8.0r4
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th{margin:0;padding:0;}table{}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}


body, html {
    font-family: 'Helvetica' ,'Arial','sans-serif';
    background: #FFF;
    font-size: 12px;

    text-rendering: optimizelegibility;

    -webkit-font-smoothing: always;
    -moz-font-smoothing: always;	
    font-smoothing: always;

    -webkit-text-stroke: 1px

    -moz-font-feature-settings: inherit;
    -moz-font-language-override: inherit;
    border: 0 none;
   

    overflow-x:hidden;


}

a{text-decoration: none; color:#C1C1C1 }
a:hover{ color:#494848; }
.text { color:#000; }

.note {  color:#969696;
  font-size:12px;
  text-shadow:0px 2px 0px rgba(255,255,255,0.7); }


#main-wrap{
  position: relative;
  transition:all 0.4s ease-out;
  -webkit-transition:all 0.4s ease-out;
  -moz-transition:all 0.4s ease-out;
  -o-transition:all 0.4s ease-out;
  -ms-transition:all 0.4s ease-out;
}



.main{width:1140px;margin: 0 auto; }
.mainWidth{width:1140px; }

#top-bar{
  background: #00b9ed;
  height:20px;
  width:100%;
  position: absolute;
  top:0px;
}

#footer{
  background: #00b9ed;
  padding:10px 0;
  width:100%;
  color:#FFF;
}

.logo{
  text-align: center;
}



.mainPadding{padding:100px 0; }


#info{min-height: 450px;border-top:1px solid #dcdcdc; }

h1{color:#00b9ed;font-weight: bold; font-size:45px;text-align: center;max-width: 60%;margin:0 auto 20px; }
h2{color:#787878;font-weight: bold; font-size:23px;text-align: center;margin:0 auto 20px; }


.info-wrap{
  text-align: center;
}


.info-title{margin-top:30px;font-weight: bold;font-size:16px; }
.info-descr{
  margin-top:10px;
  color:#686868;
  line-height: 20px;
  font-size:15px;
}

.info-descr p{
  line-height: 22px;
  margin-bottom:20px;
}



/* SLIDER */

#slider{
  background: #f2f2f2;
  border-top:1px solid #dcdcdc;
  border-bottom:1px solid #dcdcdc;
  padding:30px 0 50px;
}


#slider h1{
  color:#cbcbcb;
  font-size:30px;
  text-shadow:0px 2px 0px rgba(255,255,255,0.7);
}

#slider h2{
  color:#969696;
  font-size:16px;
  text-shadow:0px 2px 0px rgba(255,255,255,0.7);
}

#slider h2 span { font-size:13px; color:#a3a3a3;}
.slider-item{
  /*margin:0 auto;*/
  float: left;
  height:567px;
}

.slider-item-wrap{
  width:100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  padding:10px;
  background: #FFF;

}

.slider-content{
  position: absolute;
  bottom:50px;
  background: #03baed;
  color:#FFF;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 75px;
  padding:10px 20px;
  border-top:2px solid #00a1ce;
  border-bottom:2px solid #00a1ce;
}

.slider-content .slider-title a{
  width:28%;
  font-size:30px;
  text-transform: uppercase;
  font-weight: bold;
  float:left;
  color:#FFF;
  /*padding:13px 0;*/
}

.slider-content .slider-descr{
  width:70%;
  color:#FFF;
  float:right;
  text-align: right;
}

.relative-block{
  width:100%;
  height: 100%;
  position: relative;
}

.slider-btn{
  width:60px;
  height: 60px;
  background:url("../images/slider-btns.png") no-repeat left top;
  position: absolute;
  top:50%;
  margin-top:-30px;  
  cursor: pointer;
  cursor: hand;
  display: block;
  z-index: 99;
}

.slider-btn.next{
  background-position: right top;
  right:20px;
}

.slider-btn.prev{
  background-position: left top;
  left:20px;
}


.slider-shadow{
  width:100%;
  height:16px;
  display: block;
  background: url("../images/slider-bottom-shadow.png") no-repeat center center;
}


.center{text-align: center; }

.right{text-align:right; }
.footer-descr{text-shadow:0px 1px 1px rgba(0,0,0,0.3); }

#footer a { color:#FFF; }



.task .logo{
  margin-top:20px;
  padding:20px 0;
}

.task h1{
  text-align: left;
  font-size: 25px;
  max-width: 100%;
}

.login-form{
    width: 400px;
    margin:0 auto;
    padding:20px;
    margin-top:50px;
    border:3px solid #00B9ED;
    box-shadow: 0px 5px 15px rgba(0,0,0,0.1);
}

.login-form h1{
    border-bottom: 2px dotted #00B9ED;
    padding-bottom:5px;
    background: url("../images/skin/default/login_icon.png") no-repeat left 4px;
    padding-left:30px;
}

.field_row label{
    color:#494848;
    font-weight: bold;
    display: inline-block;
    width: 120px;
}

.field_row input{
    border: 1px solid #ccc;
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.1);
    padding:5px;
    border-radius: 3px;
    display: inline-block;
    width: 164px;
}

.field_row{margin-bottom:10px; }

.field_row button{
    background: #00B9ED;
    border:1px solid #00B9ED;
    box-shadow: inset 0px 0px 1px rgba(255,255,255,0.4);
    padding:5px 10px;
    border-radius: 5px;
    color:#FFF;
    font-size:16px;
    text-shadow:0px 1px 2px rgba(0,0,0,0.4);
}

.errorForm{
    background: #c54242;
    color:#FFF;
    padding:10px;
    margin-bottom:10px;
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.2);
    text-shadow:0px 1px 2px rgba(0,0,0,0.3);
    font-size:13px;
    font-weight: bold;
}

.field_row input.error{
    border:1px solid #c54242;
}

.errorForm li{
    margin-top:10px;
    font-weight: normal;
    font-size:11px;
}

.client #top-bar{
    background: #00b9ed;
    width:100%;
    position: fixed; 
    top:0px;
    height: auto;
    z-index: 99999;
}

.client #top-bar .logo{
    padding:10px 0;
}
#nav{margin-left:20px; }
#nav li{float:left; }
#nav li:first-child a{
    border-left:1px solid #FFF;
}
#nav li a{
    display: block;
    color:#FFF;
    font-size:16px;
    padding:26px 30px;
    border-right:1px solid #FFF;
    text-shadow:0px 1px 2px rgba(0,0,0,0.3);
}

#nav li.active a,
#nav li:hover a{
    text-shadow:0px 1px 2px rgba(0,0,0,0.3);
    color:#00a1ce;
    background: #FFF;
    text-shadow:none;
}

.login-info{
    padding:27px 10px; 
    margin-left:20px;
    color:#FFF;
}

.login-info a{
    color:#FFF;
}


.client h1{
    margin:0;
    max-width: auto;
}

.client input{
    padding:6px;
}

.thead{
    background: #00B9ED;
    color:#FFF;
    padding:10px 0;
}

.row{
    padding:15px 0;
    transition:all 0.1s ease-out;
    -webkit-transition:all 0.1s ease-out;
    -moz-transition:all 0.1s ease-out;
    -ms-transition:all 0.1s ease-out;
    -o-transition:all 0.1s ease-out;
    box-shadow: 0px 0px 3px rgba(0,0,0,0);
    border:1px solid #FFF;
}
.row:nth-child(even){
    background: #e3f9ff;
}

.row.highlight{
    background: #ff6c00;
}
.row.highlight .td span{color:#FFF; }

.row:hover{
    transform: scale(1.01,1.01);
    -ms-transform: scale(1.01,1.01);
    -webkit-transform: scale(1.01,1.01);
    box-shadow: 0px 0px 6px rgba(0,0,0,0.1);
    border:1px solid #00B9ED;
}

.times .row:hover{
    transform: none;
    -ms-transform: none;
    -webkit-transform: none;
    box-shadow: 0px 0px 3px rgba(0,0,0,0);
    border:1px solid #FFF;   
}

.td{
    float:left;
    font-size:15px;
}

.td span{
    display: block;
    padding:0 10px;
    font-size:15px;
    /*border-right: 1px dotted #FFF;*/
}

.row .td span{padding-top:10px; }
.row .td span.noTop{padding-top:0px; }

.td span a{color:#000;font-weight: bold;text-decoration: underline; }

.thead .td{
    font-weight: bold;
}

.td.xsmall{width: 5%; }
.td.small{width: 10%; }
.td.medium{width: 20%; }
.td.large{width: 25%; }


.td a.approval-btn{
  display: inline-block;
  border-radius: 5px;
  background: #ff6c00 url("../images/skin/default/icon_approval.png") no-repeat 10px center;
  padding:10px 15px;
  padding-left:35px;
  font-size:12px;
  font-weight: bold;
  text-transform: uppercase;
  color:#FFF;
  text-decoration: none;
  transition:all 0.2s ease-out;
  -webkit-transition:all 0.2s ease-out;
  -moz-transition:all 0.2s ease-out;
  -ms-transition:all 0.2s ease-out;
  -o-transition:all 0.2s ease-out;

      transform: scale(1,1);
    -ms-transform: scale(1,1);
    -webkit-transform: scale(1,1); 


}

.td a.approval-btn:hover{
    color:#FFF; 
    transform: scale(1.05,1.05);
    -ms-transform: scale(1.05,1.05);
    -webkit-transform: scale(1.05,1.05);  

}


#taskDetail h1{
  font-size:30px;
  max-width: 100%;
  margin-bottom: 10px;
}

#taskDetail h1.big{
    color:#FF6C00;
    font-size:40px;
}

#taskDetail h1 span{
  font-size:20px;
  font-weight: normal;
}


#taskDetail h2{
  font-size:20px;
  max-width: 100%;
  text-align: left;
  color:#333333;
}

#taskDetail h3{
  background: #00B9ED;
  font-size:18px;
  color:#FFF;
  padding:10px;
  font-weight: bold;
}

#taskDetail h4{
  font-size:16px;
  color:#333333;
  font-weight: bold;
  text-transform: uppercase;
  margin:10px 0 0;
  border-bottom:1px dotted #333333;
  padding-bottom:5px;
  margin-bottom:5px;
}

#taskDetail h4.task{
  background: url("../images/skin/default/task-icon.png") no-repeat left top;
  padding-left:20px;
}


#taskDetail .client h4.task{
  background: url("../images/skin/default/task-client-icon.png") no-repeat left top;
  padding-left:20px;
}

#taskDetail h4.time{
  background: url("../images/skin/default/time-icon.png") no-repeat left top;
  padding-left:20px;

}

#taskDetail h4 span{
    font-size:14px;
    font-weight: normal;
    color:#5d5d5d;
}

.backBtn{
    color:#00B9ED;
    font-size:16px;
}
.backBtn:hover{
    color:#FF6C00;
}

.approval-content{
  line-height: 20px;
  font-size:14px;
}

.task-container{
    background: #e3f9ff;
    border:1px solid #00B9ED;
    padding:20px;
    position: static;
    visibility: visible;
    opacity: 1;
    height: auto;
    transition:all 0.3s ease-out;
    -webkit-transition:all 0.3s ease-out;
    -ms-transition:all 0.3s ease-out;
    -o-transition:all 0.3s ease-out;
    -moz-transition:all 0.3s ease-out;
    overflow: hidden;
}



.task-container.inactive{
    height: 0;
    opacity: 0;
    visibility: hidden;
    position: absolute;
}

.task-container.inactive.active{
    position: static;
    visibility: visible;
    opacity: 1;
    height: auto;
}

.more-tasks .task-container{border-bottom:none; }
.more-tasks .task-container.forceActive,
.more-tasks .task-container:last-child{border-bottom:1px solid #00B9ED; }

.task-container.client{background: #FFF; }

.task-user{
  color:#a8a8a8;
  font-style: italic;
  font-size:12px;
}
.approval-time{
  padding:20px;
}

.approval-time-header{
  font-weight: bold;
  text-transform: uppercase;
  font-size:15px;
  padding-bottom:10px;
}

.approval-time-content{
  text-transform: uppercase;
  font-weight: bold;
  font-size:50px;
  color:#ff6c00;
}

.approval-time-content.variable{
  font-size:40px;
}
.approval-time-content span{font-size:15px;color:#333333; }


.task-confirm-container{
  border:1px solid #00B9ED;
  border-top:none;
  margin-bottom:50px;
  height: 120px;
  position: relative;
  overflow: hidden;
}

.task-confirm-wrap{
  position: absolute;
  top:0;
  left:0;
  right:0;
  height: 100%;
  transition:all 0.3s ease-out;
  -webkit-transition:all 0.3s ease-out;
  -moz-transition:all 0.3s ease-out;
  -ms-transition:all 0.3s ease-out;
  -o-transition:all 0.3s ease-out;
}

.task-confirm-wrap.active{
  top:-109px;
}

.task-confirm{
  padding:20px;
  text-align:center; 
}
.task-confirm.more{padding-top:32px;}

.confirm-btn:hover{
  color:#FFF; 
  transform: scale(1.05,1.05);
  -ms-transform: scale(1.05,1.05);
  -webkit-transform: scale(1.05,1.05);
}

.confirm-btn{
  display: inline-block;
  background: #ff6c00 url("../images/skin/default/approve-icon.png") no-repeat 20px center;
  color:#FFF;
  font-weight: bold;
  font-size:25px;
  padding:15px 50px 15px 65px;
  border-radius: 5px;
  transition:all 0.1s ease-out;
  -webkit-transition:all 0.1s ease-out;
  -moz-transition:all 0.1s ease-out;
  -ms-transition:all 0.1s ease-out;
  -o-transition:all 0.1s ease-out;
}

.task-confirm-content{
  font-size:16px;
  color:#0081a6;
  margin-bottom:10px;
}

.confirm-loading.loading{
  background: url("../images/skin/default/confirm_loading.gif") no-repeat left top;
  width: 100px;
  height: 20px;
  display: inline-block;
  margin-top:20px;
}

.confirm-big-icon{
    background: url("../images/skin/default/confirm-big-icon.png") no-repeat left top;
    width: 71px;
    height: 57px;
    display: inline-block;
    margin-top:0px;
    opacity: 0;
    transition:all 0.2s ease-out;
    -webkit-transition:all 0.2s ease-out;
    -moz-transition:all 0.2s ease-out;
    -ms-transition:all 0.2s ease-out;
    -o-transition:all 0.2s ease-out;
    
    transform: scale(0.5,0.5);
    -ms-transform: scale(0.5,0.5);
    -webkit-transform: scale(0.5,0.5);
    position: absolute;
    visibility: hidden;
}

.confirm-big-icon.active{
    position: static;
    visibility: visible;
    margin-top:5px;
    transform: scale(1,1);
    -ms-transform: scale(1,1);
    -webkit-transform: scale(1,1);      
    opacity: 1;
}

.task-container-wrap .task-container{
    margin-bottom:10px;
}

.task-container-wrap .task-container:last-child{
    margin-bottom:50px;
}

span.status_done,
span.status_pending,
span.status_progress,
span.status_feedback,
span.status_support{
    background: #ff6c00;
    display: inline-block;
    padding:5px 10px;
    color:#FFF;
    border-radius: 3px;
}

.row .td span.status_done,
.row .td span.status_pending,
.row .td span.status_progress,
.row .td span.status_feedback{
    padding-top:5px;
    margin-top:5px;
    vertical-align: bottom;
}

span.status_done{background: #3a9719;}
span.status_progress{background: #fad731;}
span.status_support{background:#4ab148;font-size:16px;padding:10px 20px;}
span.status_feedback{background: #408DCE;}

.addComment:hover,
.btnMore:hover{color:#FFF; }

.addComment,
.btnMore{
    display: none;
    padding:10px 20px;
    color:#FFF;
    background: #ff6c00;
    margin:10px 0;
    border-radius: 5px;
    font-size:14px;
    font-weight: bold;
    cursor: pointer;
    cursor: hand;
    transition:all 0.2s ease-out;
    -webkit-transition:all 0.2s ease-out;
    -ms-transition:all 0.2s ease-out;
    -o-transition:all 0.2s ease-out;
    -moz-transition:all 0.2s ease-out;

    transform: scale(1,1);
    -ms-transform: scale(1,1);
    -webkit-transform: scale(1,1); 

}
.addComment:hover,
.btnMore:hover{
    transform: scale(1.05,1.05);
    -ms-transform: scale(1.05,1.05);
    -webkit-transform: scale(1.05,1.05);  
}
.btnMore.forceActive{display: inline-block; }

.addComment{
    font-size:16px;
    display: inline-block;
    border: none;
    margin:0;
    background: #ff6c00 url("../images/skin/default/add-comment-icon.png") no-repeat 10px center;
    padding-left:40px;
}

.comment-text{
    margin-bottom:10px;
    box-shadow: none;
}

.add-comment-container{
    padding:20px;
    background: #FFF;
    border:1px solid #00B9ED;

}

#pagination a:hover{color:#FFF; }
#pagination a{
    display: inline-block;
    padding:5px 8px;
    background: #00B9ED;
    color:#FFF;
    margin:0 5px;
    border-radius: 3px;
    transition:all 0.2s ease-out;
    -webkit-transition:all 0.2s ease-out;
    -ms-transition:all 0.2s ease-out;
    -o-transition:all 0.2s ease-out;
    -moz-transition:all 0.2s ease-out;
}
#pagination a:hover,
#pagination a.active{background: #ff6c00; }

input.error{background:none; }

.new_indicator{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 20px;
  background: #00b9ed;
  margin-top:13px;
  opacity: 0;
}

.row.new .new_indicator{opacity: 1; }



.row.new .new_indicator_container{
  position: relative;
  width: 100%;
  height: 100%;
  display: block;

}

.new_indicator_help{
  padding:5px 10px;
  background: #0097c2;
  border-radius: 3px;
  color:#FFF;
  position: absolute;
  width: 130%;
  top:-33px;
  left: -20px;
  opacity: 0;
  
  transition:all 0.3s ease-out; 
  -webkit-transition:all 0.3s ease-out; 
  -moz-transition:all 0.3s ease-out; 
  -ms-transition:all 0.3s ease-out; 
  -o-transition:all 0.3s ease-out; 

}

.row.new .new_indicator_container:hover .new_indicator_help{

  opacity: 1;
}