/***********************************************************************
 * Navigation
 */

#navigation {
  /*height: 115px;*/
  clear: both;
  padding-top: 10px;
}

#nav-buttons {
  /*height: 110px;*/
  margin:0;
  padding:0;
  list-style: none;
  text-align: center;
}

#nav-buttons li {
  display: inline;
}

#nav-buttons a {
  display: inline-block;
  text-decoration: none;
  vertical-align: top;
  outline: none;
}

#nav-buttons div.nav-button {
  height: 60px;
  width: 74px;
  margin: 0 8px;
  padding: 0;
  border: solid 1px #FFFFFF;
  background-color: #FFFFFF;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(), to());
  background-image: -moz-linear-gradient(top, #ffffff, #ffffff);
  background-image: -ms-linear-gradient(top, #ffffff, #ffffff);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #ffffff));
  background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
  background-image: -o-linear-gradient(top, #ffffff, #fffff);
  background-image: linear-gradient(top, #ffffff, #ffffff);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

#nav-buttons div.nav-button:hover{
  background-position: 0;
}

#nav-buttons span.nav-text {
  display: block;
  margin: 0 8px;
  width: 75px;
  height: 47px;
  color: #a2a2a2;
  line-height: 15px;
}

#navigation-subbar .divider {
  padding: 0 10px;
  color: #276281;
}

#navigation-subbar {
  margin: 0 auto 0 auto;
  height: 2px;
  width: 100%;
  color: #074261;
  font-weight: bold;
  font-size: 12px;
  text-shadow: none;
  padding: 0 9px;
  background-color: #8c8c8c;
  background-repeat: repeat-x;

  /*TODO:UICONFIG option for nav subbar color*/
  background-image: -khtml-gradient(linear, left top, left bottom, from(), to());
  background-image: -moz-linear-gradient(top, , );
  background-image: -ms-linear-gradient(top, , );
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, ), color-stop(100%, ));
  background-image: -webkit-linear-gradient(top, , );
  background-image: -o-linear-gradient(top, , );
  background-image: linear-gradient(top, , );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='', endColorstr='', GradientType=0);
/*  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); */
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

#navigation-subbar .help-icon img {
  vertical-align: bottom;
  padding-bottom: 12px;
}

.navigation-title {
  line-height: 37px;
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  color: #074261;
  text-shadow: none;
}

#navigation-subbar .subbar-btn {
  float: right;
  margin-top: 5px;
  margin-left: 5px;
  margin-bottom: 4px;
  margin-right: 11px;
  padding: 5px 7px 5px;
  line-height: 14px;
}
#navigation-subbar .subbar-btn:disabled {
  cursor: default
}
#navigation-subbar .subbar-btn i.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}
@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#nav-voicemails a {
    position: relative;
}

#nav-msg-count {
    position: absolute;
    top: -10px;
    right: 0;
    padding: 5px 9px;
    border-radius: 12px;
    font-size: 14px;
}


/***********************************************************************
 background for navigation hyperlinks */

.nav-bg-image {
  /*background-image: url('/portal/img/nav/navigation-background-v2.png');*/
  background-image: url('/myvotacall/img/buttons/votacall-icons-final-v2.png');
  /*background-image: url('/myvotacall/img/buttons/votacall-one-icons-with-blue.png');*/
  position: absolute;
  top: 0px;
  left: 8px;
  height: 62px;
  width: 76px;
  display: block;
  /*background-color: #8c8c8c;*/
}

/*.nav-link-current span.nav-text {*/
/*  background-image: url('/portal/img/nav/arrow-select.png');*/
/*}*/

.nav-link {
  position: relative;
}

.loading .nav-arrow,
.nav-link-current .nav-arrow {
  /*TODO:UICONFIG option to match nav subbar color */
  border-color: transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  bottom: 0;
  left: 34px;
  z-index: 0;
}

#nav-users .nav-bg-image {
        background-position: 0 0;
}

#nav-conferences .nav-bg-image {
        background-position: -74px 0;
}

#nav-attendants .nav-bg-image {
        background-position: -148px 0;
}

#nav-callqueues .nav-bg-image {
        background-position: -222px 0;
}

#nav-timeframes .nav-bg-image {
        background-position: -296px 0;
}

#nav-music .nav-bg-image {
        background-position: -370px 0;
}

#nav-callhistory .nav-bg-image {
        background-position: 0 -60px;
}

#nav-inventory .nav-bg-image {
        background-position: -74px -60px;
}

#nav-phones .nav-bg-image {
        background-position: -148px -60px;
}

#nav-answerrules .nav-bg-image {
        background-position: -222px -60px;
}

#nav-contacts .nav-bg-image {
        background-position: -296px -60px;
}

#nav-voicemails .nav-bg-image {
        background-position: -370px -60px;
}

#nav-home .nav-bg-image {
        background-position: 0 -120px;
}

#nav-domains .nav-bg-image {
        background-position: -74px -120px;
}

#nav-settings .nav-bg-image {
        background-position: -148px -120px;
}

#nav-agents .nav-bg-image {
        background-position: -296px -120px;
}

#nav-home-manager .nav-bg-image {
  background-position: -222px -120px;
}


#nav-home-reseller .nav-bg-image {
        background-position: -370px -120px;
}

#nav-home-super .nav-bg-image {
  background-position: -444px -60px;
}

#nav-siptrunks .nav-bg-image {
  background-position: -444px -120px;
}

#nav-phonenumbers .nav-bg-image {
  background-position: -444px 0;
}

#nav-routeprofiles .nav-bg-image {
  background-position: -518px 0;
}

#nav-fax .nav-bg-image {
  background-position: -518px -120px;
}

#nav-resellers .nav-bg-image {
  background-position: -518px -60px;
}



/***********************************************************************
 * navigation icons change on hover
 */

#nav-buttons .loading a.nav-link div.nav-button,
#nav-buttons a.nav-link:hover div.nav-button {
  filter: alpha(opacity=25);
  -khtml-opacity: 0.25;
  -moz-opacity: 0.25;
  opacity: 0.25;
  background-color: ;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(), to());
  background-image: -moz-linear-gradient(top, , );
  background-image: -ms-linear-gradient(top, , );
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, ), color-stop(100%, #ffffff));
  background-image: -webkit-linear-gradient(top, , );
  background-image: -o-linear-gradient(top, , );
  background-image: linear-gradient(top, , );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='', endColorstr='', GradientType=0);
  border-color:   ;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
#nav-buttons a.nav-link:hover span {
  text-shadow: none;
}
#nav-buttons .nav-disabled a.nav-link:hover div.nav-button,
#nav-buttons .nav-disabled a.nav-link:hover span.nav-text{
        cursor: default;
}
#nav-buttons .nav-link-current a.nav-link:hover div.nav-button,
#nav-buttons .nav-link-current a.nav-link:hover span.nav-text {
  filter: alpha(opacity=25);
  -khtml-opacity: .25;
  -moz-opacity: .25;
  opacity: .25;
}

/***********************************************************************
 * navigation icons change on select
 */

#nav-buttons .nav-link-current div.nav-button {
  /*background-color: ;*/

  height: 60px;
  width: 74px;
  margin: 0 8px;
  padding: 0;
  border: solid 1px #ffffff;
  background-color: #FFFFFF;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(), to());
  background-image: -moz-linear-gradient(top, #ffffff, #ffffff);
  background-image: -ms-linear-gradient(top, #ffffff, #ffffff);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #ffffff));
  background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
  background-image: -o-linear-gradient(top, #ffffff, #fffff);
  background-image: linear-gradient(top, #ffffff, #ffffff);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
#nav-buttons .nav-link-current span.nav-text {
  color: #404040;
}

.navigation-title, .navigation-title:hover, .navigation-title:visited {
  color: #074261;
}

#navigation-subbar .subnavigation {
}

/*** expand SMS chat input ***/
.uc-chat-message-box textarea {
    padding-left: 20px;
    width: 224px;
    resize: vertical;
    height: 72px;
    max-height: 280px;
    margin-bottom: 0px;
}

/*** allow Contacts page names to have more width ***/
#contacts-table .contact-name-td {
    max-width: 220px;
}

/*** break-wrap contact names on Contacts page ***/
#contacts-table .contact-name {
    white-space: break-spaces;
}