/**
 * CSS for compatibility for Bootstrap 1.4->2.0.3
 */
@baseline:          @baseLineHeight;
@basefont:			@baseFontSize;

.ccm-ui {
  margin: 0;
  #font > .sans-serif();
  color: @grayDark;
}

.ccm-ui {
	a {
		color: @linkColor;
		text-decoration: none;
		line-height: inherit;
		font-weight: inherit;
		&:hover {
			color: @linkColorHover;
			text-decoration: underline;
		}
	}
	
	.actions {
		.ccm-ui.form-actions;
		.ccm-ui.form-horizontal.form-actions;
	}
	
	div.clearfix > label {
		padding-top: 6px;
		font-size: @basefont;
		line-height: @baseline;
		float: left;
		width: 140px;
		text-align: right;
		color: @grayDark;
	}
	
	
	form .input {
		margin-left: 160px;
	}

	
	table td img {
		max-width: none;
	}
	
	.zebra-striped {
		.ccm-ui.table-striped;
	}

	legend + div.clearfix {
		padding-top: 18px;
	}
	
	div.clearfix {padding-bottom: 18px;}
	
// Stacked options for forms (radio buttons or checkboxes)
.inputs-list {
  margin: 0 0 5px;
  width: 100%;
  li {
    display: block;
    padding: 0;
    width: 100%;
  }
  label {
    display: block !important;
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    line-height: @baseline !important;
    text-align: left !important;
    white-space: normal;
    strong {
      color: @gray;
    }
    small {
      font-size: @basefont - 2;
      font-weight: normal;
    }
  }
  .inputs-list {
    margin-left: 25px;
    margin-bottom: 10px;
    padding-top: 0;
  }
  &:first-child {
    padding-top: 6px;
  }
  li + li {
    padding-top: 2px;
  }
  input[type=radio],
  input[type=checkbox] {
    margin-bottom: 0;
    vertical-align: top;
    display: inline-block;
  }
}
	
	.popover {
		&.below { margin-top: -5px; }
		&.above { margin-top: 5px; }
		&.above .arrow    { #popoverArrow > .top(); }
  		&.below .arrow { #popoverArrow > .bottom(); }
  		
  		.title {
			.ccm-ui.popover-title;
		}
		
  		.content {
			.ccm-ui.popover-content;
		}
		
		.inner {
			.ccm-ui.popover-inner;
		}
	}
	
	.btn {
		&.primary {
			.ccm-ui.btn-primary;
		}
		
		&.warning {
			.ccm-ui.btn-warning;
		}
		
		&.danger, &.error {
			.ccm-ui.btn-danger;
		}
		
		&.success {
			.ccm-ui.btn-success;
		}
		
		&.info {
			.ccm-ui.btn-info;
		}
		
		&.inverse {
			.ccm-ui.btn-inverse;
		}
		
		&.primary,
		&.primary:hover,
		&.warning,
		&.warning:hover,
		&.danger,
		&.danger:hover,
		&.error,
		&.error:hover,
		&.success,
		&.success:hover,
		&.info,
		&.info:hover,
		&.inverse,
		&.inverse:hover {
		  color: @white;
		  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
		}
		
		&.primary.active,
		&.warning.active,
		&.danger.active,
		&.error.active,
		&.success.active,
		&.info.active,
		&.inverse.active {
		  color: rgba(255,255,255,.75);
		}
	}
	
	.alert-message {
		.ccm-ui.alert;
		&.info {
			.ccm-ui.alert-info;
		}
		
		&.success {
			.ccm-ui.alert-success;
		}
		
		&.error {
			.ccm-ui.alert-error;
		}
		
		&.notice {
			.ccm-ui.alert-block;
		}
	}
	
	ul.pills {
		.ccm-ui.nav;
		.ccm-ui.nav-pills;
	}

	ul.tabs,
	ul.pills {
		.clearfix();
	}
	ul.tabs > li,
	ul.pills > li {
		float: left;
	}
	ul.tabs > li > a,
	ul.pills > li > a {
		padding-right: 12px;
		padding-left: 12px;
		margin-right: 2px;
		line-height: 18px; // keeps the overall height an even number
	}

	.tabs > li > a {
		display: block;
	}

	.tabs > li > a:hover {
		text-decoration: none;
		background-color: @grayLighter;
	}
	
	ul.tabs {
		.ccm-ui.nav;
		.ccm-ui.nav-tabs;
	}
	
	// Make the list-items overlay the bottom border
	.tabs > li {
	  margin-bottom: -1px;
	}
	// Actual tabs (as links)
	.tabs > li > a {
	  padding-top: 8px;
	  padding-bottom: 8px;
	  line-height: @baseLineHeight;
	  border: 1px solid transparent;
	  .border-radius(4px 4px 0 0);
	  &:hover {
		border-color: @grayLighter @grayLighter #ddd;
	  }
	}

	ul.tabs > .active > a,
	ul.tabs > .active > a:hover {
		color: @gray;
		background-color: @white;
		border: 1px solid #ddd;
		border-bottom-color: transparent;
		cursor: default;
	}
	
	ul.pills > li > a {
		padding-top: 8px;
		padding-bottom: 8px;
		margin-top: 2px;
		margin-bottom: 2px;
		.border-radius(5px);
	}
	
	// Active state
	ul.pills > .active > a,
	ul.pills > .active > a:hover {
		color: @white;
		background-color: @linkColor;
	}
	
	ul.pills > li > a:hover {
		background: @linkColorHover;
		color: @white;
		text-decoration: none;
		text-shadow: 0 1px 1px rgba(0,0,0,0.25);
	}
	
}
/** 
 * CSS we put in place to not completely break items that have been built prior to 5.5
 */
 
.ccm-dialog-tabs {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  .clearfix();
  > li {
    float: left;
    > a {
      display: block;
    }
  }
}

// Basic Tabs
.ccm-dialog-tabs {
  float: left;
  width: 100%;
  margin: 0px 0px 20px 0px;
  border-bottom: 1px solid #ddd !important;
  > li {
	list-style-type: none;
    margin: 0px;
    position: relative; // For the dropdowns mostly
    top: 1px;
    > a {
      padding: 0 15px;
      margin-right: 2px;
      line-height: @baseline * 2;
      color: @linkColor;
      text-decoration: none;
      border: 1px solid transparent;
      .border-radius(4px 4px 0 0);
      &:hover {
        text-decoration: none;
        background-color: #eee;
        border-color: #eee #eee #ddd;
      }
    }
    &.ccm-nav-active > a {
      color: @gray;
      outline: none;
      background-color: @white;
      border: 1px solid #ddd;
      border-bottom-color: transparent;
    }
    &.current > a {
      color: @gray;
      outline: none;
      background-color: @white;
      border: 1px solid #ddd;
      border-bottom-color: transparent;
    }

  }
  // first one for backwards compatibility
  .menu-dropdown,
  .dropdown-menu {
    top: 35px;
    border-width: 1px;
    .border-radius(0 6px 6px 6px);
  }
  // first one for backwards compatibility
  a.menu:after,
  .dropdown-toggle:after {
    border-top-color: #999;
    margin-top: 15px;
    margin-left: 5px;
  }
  // first one for backwards compatibility
  li.open.menu .menu,
  .open.dropdown .dropdown-toggle {
    border-color: #999;
  }
  // first one for backwards compatibility
  li.open a.menu:after,
  .dropdown.open .dropdown-toggle:after {
    border-top-color: #555;
  }
}

/* Dashboard Header Option - for things like attributes. We don't use this anymore */
.ccm-dashboard-header-option {
	color: #333;
	#font > .sans-serif();
	z-index: 5;
	text-decoration: none;
	position: absolute;
	top: 0px;
	right: 10px;
	top: 9px;
	line-height: 14px;
	padding-bottom: 2px;
	.ccm-ui .btn-small
}

/* legacy ccm-grid */
table.ccm-grid {border-left: 1px solid #D4D4D4; border-top: 1px solid #D4D4D4; font-size: 12px; }
table.ccm-grid th, table.ccm-grid > tbody > tr > td {border-right: 1px solid #D4D4D4; border-bottom: 1px solid #D4D4D4; font-size: 12px; padding: 7px; background: #fff}
table.ccm-grid tr.ccm-row-alt td {background-color: #F0F5FF !important}
table.ccm-grid th {font-weight: bold; color: #999999; background-color: #efefef; text-align: center;}
table.ccm-grid tr.version-active td, table.ccm-grid tr.active td {font-weight: bold; font-size: 13px}
table.ccm-grid td.actor img {float: right}
table.ccm-grid td.ccm-grid-cb {text-align: center}
table.ccm-grid img {border: 0px}