/*------bootstrap.css override --------------------------------------------------*/


.tooltip-inner {
  	padding: 12px;
   	-webkit-border-radius: 2px;
       -moz-border-radius: 2px;
          	border-radius: 2px;
  	background-color: #353535;
  	color: #FFFFFF;
}

.tooltip.top .tooltip-arrow {
	margin-left: -10px;
  	border-width: 10px 10px 0;
  	border-top-color: #353535;
}

.tooltip.right .tooltip-arrow {
	margin-top: -10px;
  	border-width: 10px 10px 10px 0;
   	border-right-color: #353535;
}

.tooltip.left .tooltip-arrow {
	margin-top: -10px;
  	border-width: 10px 0 10px 10px;
   	border-left-color: #353535;
}

.tooltip.bottom .tooltip-arrow {
	margin-left: -10px;
  	border-width: 0 10px 10px;
   	border-bottom-color: #353535;
}

/*-----------------------------------------------------------*/
legend {
	font-size:14px;
	font-weight:bold;
}
/*-----------------------------------------------------------*/

.nav-tabs > li > a {
	background-color:#F8F8F8;
	border-bottom:1px solid #DDDDDD;
}

.nav-tabs > li > a:hover {
	background-color:#EEEEEE;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active.open > a,  
.nav-tabs > li.active > a:hover {
	border-top:1px solid #6D6D6D;
	
}

@media (min-width:768px) {
	/* on small screens, gaps aren't worth it*/
	.nav-tabs li.gap {
		background: none;
		border-bottom: 0px;
		padding-left: 25px;
	}
}

/*-----------------------------------------------------------*/
.img-thumbnail-user { /*should always be used in conjunction with img-thumbnail*/
	padding:1px;
	box-shadow:0 5px 5px -5px rgba(0,0,0,0.5);
	height:auto; /*so max-width and responsive layouts will scale images as appropriate to the container*/
}
	.img-thumbnail-user.user-xs {
		width: 30px;
		min-width: 30px;
		/*height:30px; do not specify a height since max-width and responsive layouts will scale images as appropriate to the container*/
		box-shadow: 0 3px 3px -3px rgba(0,0,0,0.5);
	}
	.img-thumbnail-user.user-sm {
		width: 50px;
		min-width: 50px;
		/*height:50px; do not specify a height since max-width and responsive layouts will scale images as appropriate to the container*/
		box-shadow: 0 3px 3px -3px rgba(0,0,0,0.5);
	}
	.img-thumbnail-user.user-md {
		width: 60px;
		min-width: 60px;
	}
	.img-thumbnail-user.user-lg {
		width: 100px;
		min-width: 100px;
	}
	.img-thumbnail-user.user-noshadow {
		box-shadow: none;
	}


/*-----------------------------------------------------------*/
.help-block { font-size:90%;color:#999999; }

/*-----------------------------------------------------------*/
.row-bordered {
	border-bottom:1px solid #EEEEEE;
	padding-bottom:15px;
	margin-bottom:15px;
}
/*-----------------------------------------------------------*/
.caret-up {
	border:0;
	border-bottom: 4px solid;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	vertical-align:bottom;
  
}
/*-----------------------------------------------------------*/
.table TH {
	/*background-image: -moz-linear-gradient(center top , #f6f6f6 0%,  #F2F2F2 100%);*/
	/*background-image: -moz-linear-gradient(center top , rgba(0,0,0,0.05), rgba(0,0,0,0.1)) ;*/
    font-weight: bold;
    font-size: 11px;
    padding:7px 3px;
	/*instead of setting a color, use opacity so table can be rendered on a different color (dark) background*/
	background:none;
	background-color: rgba(180,180,180,0.1);
	color: rgba(0,0,0,0.5);
	border-color:rgba(150,150,150,0.2); 
}

.table.table-striped {
	border-spacing:1px;
	border-collapse:separate;
}
	.table.table-striped th {
		background: none; /*let the striped attributes color show through*/
	}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,0.03); /*instead of setting a color, use opacity so table can be rendered on a different color (dark) background*/
}
.table-striped.table-striped-alt > tbody > tr:nth-of-type(even) {
    background-color: rgba(0,0,0,0.03); /*instead of setting a color, use opacity so table can be rendered on a different color (dark) background*/
}
.table-striped.table-striped-alt > tbody > tr:nth-of-type(odd) {
    background: none; /*clear from base table-striped setting*/
}

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
	border-top: 1px solid rgba(150,150,150,0.1); /*instead of setting a color, use opacity so table can be rendered on a different color (dark) background*/
}

.table-valign-middle > TBODY > TR > TD { vertical-align:middle }

.table.text-center TH { text-align:center}

.table-no-border > thead > tr > th,
.table-no-border > tbody > tr > th,
.table-no-border > tfoot > tr > th,
.table-no-border > thead > tr > td,
.table-no-border > tbody > tr > td,
.table-no-border > tfoot > tr > td {
	border:0;
}
/*-----------------------------------------------------------*/
/*modal(floating window) standard alert shows directly below the title and is full width, so radius border does not look good. Only modify for that one, not other alerts which appear in modals*/
.modal-backdrop {
	position:fixed; /*changed to absolute and removed bottom in 3.3.1, but I'm not using in traditional BS way so need it fixed*/
	bottom:0;
	z-index:1045; /*BS .modal window is 1050*/
}

.modal-content > .alert { border-radius:0 0 0 0}

/*-----------------------------------------------------------*/
/*Don't remember why I made the popover yellow instead of the default white.  When I do find out, move this into the particular site it was done for
.popover { max-width:350px;background-color:#FFFFE7; }
.popover-title { background-color:#F7F7DF; }
.popover-content { width:auto;color:#404040; }
.popover.bottom .arrow:after {border-bottom-color:#FFFFE7; }
.popover.top .arrow:after  {border-top-color:#FFFFE7; }
.popover.left .arrow:after {border-left-color:#FFFFE7; }
.popover.right .arrow:after {border-right-color:#FFFFE7; }
*/
.popover-icon-info { color:#FF9966; }
	.popover-icon-info:hover,.popover-icon-info:visited, .popover-icon-info:active {
		text-decoration: none;
	}

.popover-icon-note {
	color:#D9CE00;
}
/*-----------------------------------------------------------*/
.form-control,.control-label { font-size:inherit; }  /*bootstrap forces to 14px, but I'd rather inherit from whatever the site uses*/
.form-control-static { font-size:inherit; } /*bootstrap didn't define at all, so we'll keep to same as all other form elements */
@media(max-width:767px) {
	.form-control-static {
		padding-top: 0px; /*bug in BS that misaligns static elements when xs*/
	}
}

.form-condensed .form-group { margin-bottom:3px; } /*sometimes for a static display form (no input fields) it doesn't need to be so spaced out*/

.form-group label .help-block { font-weight:normal}

.popover-label {
	border-bottom: 1px dotted #777777;
	cursor:help;
}

@media (min-width: 768px) {
  .form-horizontal .control-label.text-left { 
    text-align: left; /*sometimes we want the label left aligned. Just adding text-left doesn't do it...needs to have .form-horizontal qualifier*/
  }
}
/*-----------------------------------------------------------*/
.btn {
	border-radius:3px 3px 3px 3px; /*bootstrap default is 6. I like less rounded*/
}
button.btn-lg, .btn-lg { /*I like a larger button area, but not a huge font, so smaller font than BS, and more padding to make up for it*/

	padding: 15px 25px;
}
button.btn-xl, .btn-xl { /*no such thing in BS*/
	font-size: 26px;
	padding: 25px 35px;
	border-radius:5px;
}


/*-----------------------------------------------------------*/

.dropdown-menu > li > a {
	padding:10px 20px; /*looks better with a little more spacing (6px vs 3px)*/
}

/*-----------------------------------------------------------
Row/Col layouts
---------------------------------------------------------------*/

DIV.col-heading {
	background:none;
	border:0;
	font-weight:normal;
	font-size:18px;
	line-height:21px;
	border-bottom:1px solid #DDDDDD;
	
	padding:35px 0 4px 0;
	
	margin-bottom:10px;
	text-transform:uppercase;
	color:#888888;
}
DIV.col-heading.top {
	padding-top:0;
}


/*------bootstrap.css extend --------------------------------------------------*/
hr.hr-sm {
	margin-top: 10px;
	margin-bottom: 10px;
}

/*glyphicon sizes, just like FontAwesome*/
.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}

small.tiny {
	font-size: 60%;
}

@media (min-width:768px) {
	.dl-horizontal-lg dt {
		width: 250px;
	}

	.dl-horizontal-lg dd {
		margin-left: 270px;
	}
}

/*when columns stack, i want some vertical spacing between them, but restrict to row children so forms that stack will not have spacing*/
@media (max-width: 991px) {
  .row > [class*="col-md"]:not(:last-child) {  margin-bottom: 15px;  }
  .row > [class*="col-lg"]:not(:last-child) {  margin-bottom: 15px;  }
}

@media (max-width: 767px) {
  .row > [class*="col-sm"]:not(:last-child) {  margin-bottom: 15px;  }
  .row > [class*="col-md"]:not(:last-child) {  margin-bottom: 15px;  }
  .row > [class*="col-lg"]:not(:last-child) {  margin-bottom: 15px;  }
}
.row > .no-stack-gap {
	margin-bottom: 0 !important;
}


/*-----------------------------------------------------------*/
.navbar-toggle-left { /*just to have toggle button on left side instead of right*/
	float:left;
	margin-right:0;
	margin-left:15px;
}

.nav > li > a.navbar-static-icon {  /*full nav > li > a qualifier required to override bs default*/
	font-size:24px;
	padding-left:8px;
	padding-right:8px;
}
	.nav > li > a.navbar-static-icon.fa-list-alt,
	.nav > li > a.navbar-static-icon.fa-life-ring,
	.nav > li > a.navbar-static-icon.fa-tags,
	.nav > li > a.navbar-static-icon.fa-address-book-o {
		font-size: 20px;
	}

.navbar a span.desc,
.dropdown-menu a span.desc {
	/*smaller descriptive text underneath normal link text*/
	display: block;
	font-size: smaller;
	text-overflow: ellipsis;
	overflow: hidden;
	color:#aaaaaa;
}
.dropdown-menu a span.desc-inline {
	display: inline;
	padding-left:10px;
}

/* bs defaults to stack form elements on xs, but we want login form to always appear inline in header*/
.navbar-login-form .form-control  {
	width:140px;
}
@media (max-width: 767px) {
	.navbar-login-form.navbar-form {
		width: auto;
		padding-top: 0;
		padding-bottom: 0;
		margin-right: 0;
		margin-left: 0;
		border: 0;
		-webkit-box-shadow: none;
		        box-shadow: none;
	}
	
	.navbar-login-form .form-group,
	.navbar-login-form .form-control,
	.navbar-login-form .radio,
	.navbar-login-form .checkbox { 
		display:inline-block;
	}
	.navbar-login-form.navbar-right {
		float: right !important;
	}
	
	.navbar-login-form .form-control  {
		width:90px;
	}
}
/*-----------------------------------------------------------*/
.navbar-icons {
	float: right !important;
	margin-left:20px;
}
	
.navbar-icons > ul > li {  float: left; }

.navbar-icons .badge {
	font-weight:normal;
	font-size:10px;
	vertical-align:middle;
	padding:4px 5px;
	border-radius:5px;
	margin-left:-15px; /*appear over top the affected icon*/
}

/*-----------------------------------------------------------*/
/*sometimes we want text aligned right normal, but switch to centered when xs, or vice versa */
@media (max-width: 767px) {
	.text-right.text-center-xs,
	.text-center-xs {
		text-align:center;
	}
	
	.text-center.text-right.xs,
	.text-right-xs {
		text-align:right;
	}

	.text-center.text-left.xs,
	.text-left-xs {
		text-align:left;
	}

	.center-block-xs {
	  display: block;
	  margin-right: auto;
	  margin-left: auto;
	}
}

@media (min-width:768px)  and (max-width:991px) {
	.text-left-sm {
		text-align: left;
	}
	.text-center-sm {
		text-align: center;
	}
	.text-right-sm {
		text-align: right;
	}
}

/*-------------------------------------------------------------
All this for the little caret to show between the dropdown menu and navbar. Only shows when the navbar is not collapsed*/

@media (min-width:768px) {
	.navbar:not(.navbar-fixed-bottom) .navbar-nav > li.dropdown-onhover:hover:not(.disabled) > a:after,
	.navbar.dropdown-onhover:not(.navbar-fixed-bottom) .navbar-nav > li:hover:not(.disabled) > a:after,
	.navbar:not(.navbar-fixed-bottom) .navbar-nav.dropdown-onhover > li:hover:not(.disabled) > a:after,
	.navbar:not(.navbar-fixed-bottom) .navbar-nav > .open > a:after {
		bottom: -2px;
		border-width: 0px 8px 8px;
	}

	.navbar.dropdown-onhover:not(.no-open-arrow) .navbar-nav > li:hover:not(.disabled) > a.dropdown-toggle:after,
	.navbar.dropdown-onhover:not(.no-border):not(.no-open-arrow) .navbar-nav > li:hover:not(.disabled) > a.dropdown-toggle:before,
	.navbar:not(.no-open-arrow) .navbar-nav.dropdown-onhover > li:hover > a.dropdown-toggle:after,
	.navbar:not(.no-border):not(.no-open-arrow) .navbar-nav.dropdown-onhover > li:hover > a.dropdown-toggle:before,
	.navbar:not(.no-open-arrow) .navbar-nav > li.dropdown-onhover:hover > a.dropdown-toggle:after,
	.navbar:not(.no-border):not(.no-open-arrow) .navbar-nav > li.dropdown-onhover:hover > a.dropdown-toggle:before,
	.navbar:not(.no-active-arrow) .navbar-nav > .active > a:after,
	.navbar:not(.no-border):not(.no-active-arrow) .navbar-nav > .active > a:before,
	.navbar:not(.no-open-arrow) .navbar-nav > .open > a.dropdown-toggle:after,
	.navbar:not(.no-border):not(.no-open-arrow) .navbar-nav > .open > a.dropdown-toggle:before {
		content: " ";
		position: absolute;
		left: 50%;
		width: 0px;
		height: 0px;
		border-style: solid;
		line-height: 0px;
		margin-left: -8px;
		border-color: transparent;
		z-index: 1001;
	}

	.navbar.navbar-inverse:not(.navbar-fixed-bottom) .navbar-nav > .open > a:after,
	.navbar.navbar-inverse:not(.navbar-fixed-bottom) .navbar-nav > li.dropdown-onhover:hover:not(.disabled) > a:after,
	.navbar.navbar-inverse:not(.navbar-fixed-bottom) .navbar-nav.dropdown-onhover > li:hover:not(.disabled) > a:after {
		border-bottom-color: #ffffff;
	}

	.navbar.navbar-default:not(.navbar-fixed-bottom) .navbar-nav > .open > a:after,
	.navbar.navbar-default:not(.navbar-fixed-bottom) .navbar-nav > li.dropdown-onhover:hover:not(.disabled) > a:after,
	.navbar.navbar-default:not(.navbar-fixed-bottom) .navbar-nav.dropdown-onhover > li:hover:not(.disabled) > a:after {
		border-bottom-color: #ffffff;
	}

	.navbar-nav > li > .dropdown-menu {
		margin-top: 1px;
	}
}
/*-----------------------------------------------------------*/

.badge.badge-danger { background-color: #d9534f; }
.badge.badge-info { background-color: #5bc0de;}
.badge.badge-success {background-color: #5cb85c; }
/*-----------------------------------------------------------*/
.panel-footer.panel-actions { 
	background-color: #f5f5f5; 
	border-top:1px solid #EEEEEE;
}
.panel-footer button { margin-right:2px;margin-left:2px; }

.panel.panel-condensed { 
	/*ajax list returns typically have single panel-actions, but host page may have instructions or description with panel body. This is applied to the host panel so the list panel-actions appears to be attached*/
	margin-bottom:0;
	border-bottom-right-radius:0;
	border-bottom-left-radius:0;
	border-bottom:0;
	box-shadow:none;
}
.panel > .alert {
	/*for when the alert (info primarily) is displayed at the bottom of the panel, below the panel-actions footer */
	margin-bottom:0; 
}

.panel-default.panel-notebook { 
	background:url("../../../../../_ckcommon/images/backgrounds/notebook.png") transparent repeat-y;
	border-left:0;
}
.panel-default.panel-notebook .panel-body { padding:40px; }
/*-----------------------------------------------------------*/
.alert-sm {
  padding: 2px 5px;
  margin-bottom: 2px;
  border-radius: 2px;
}
.alert-waiting {
	background:url("../../../../../_ckcommon/images/loading_16x16.gif") no-repeat;
	background-position:10px 50%;
	background-color:#EFEFEF;
	color:#666666;
	padding-left:40px;
	border:1px solid #E0E0E0;
}
.alert-faint {
	background-color:rgba(0,0,0,0.05);
	color:rgba(0,0,0,0.4);
	border:1px solid rgba(0,0,0,0.1);
}
.alert-more {
	color: #8a6d3b;
	background-color: #fcf8e3;
	border-color: #faebcc;
	
	text-align:center;
	cursor:pointer;
}
.alert-more i { opacity:0.5 }
.alert-more:hover { color: #66512c; }
.alert-more:hover i { opacity:1.0 }

.alert-warning { background-color: #fcf8da;}

/*-----------------------------------------------------------*/
.text-faint {
	color: rgba(0,0,0,0.25);
}
.text-faint-inverted {
	color: rgba(255,255,255,0.25);
}
/*-----------------------------------------------------------*/
.row-striped-group > .row:nth-of-type(even) {
	background-color: rgba(0,0,0,0.03); /*instead of setting a color, use opacity so still looks good rendered on a different color (dark) background*/
}
.row-striped-group > .row {
	padding-top: 15px;
	padding-bottom: 15px;
}
	.row-striped-group > .row:nth-child(1) {
		padding-top: 0px;
	}
.form-group .row-striped-group > .row:nth-child(1) {
	padding-top: 7px;
}

.row-form-group {
}
	.row-form-group > .row {
		background-color: #F5F5F5;
		border-bottom: 1px solid #CCCCCC;
	}
	
		.row-form-group > .row > div .group-heading {
			padding-left:10px; /*so when on own row (usually when xs) the text isn't flush left on shaded column*/
		}
			.row-form-group > .row > div .group-heading i.fa {
				padding-left: 10px;
			}
		.row-form-group > .row:first-child > div:first-child {
			border-top: 0px solid #CCCCCC;
		}
		
		.row-form-group > .row > div:nth-child(1) {
			color: #AFAFAF;
			font-size: 14px;
			line-height: 17px;
			text-align: right;
			padding-top: 25px; /* do not add left or right padding on these col elements*/
			padding-bottom:15px;
		}

		.row-form-group > .row > div:nth-child(2) {
			background-color: #ffffff;
			padding-top: 25px;
			padding-bottom:15px; /*less on bottom because typical for elements within to already have a bottom margin*/
		}
		.row-form-group > .row > div:nth-child(3) { /*usually help block style. See article properties. Do not make different bg color because content in this area may not be same size as other col*/
			color: #AFAFAF;
			font-size: 13px;
			text-align: justify;
			padding-top:25px;
			padding-bottom:15px;
			padding-right:35px; /*because bgcolor placed on .row, but .row has margin, so text needs additional pad or else it will go to extreme end of bgcolor*/
		}
	.row-form-group .well-inline-form {
		box-shadow: inset 0px 5px 4px -5px rgba(50, 50, 50, 0.5), inset 0px -5px 4px -5px rgba(50, 50, 50, 0.5);
		background-color: #eeeeee;
		border: 1px solid #eeeeee;
		border-top: 1px solid #bbbbbb;
		border-bottom: 1px solid #bbbbbb;
		border-radius: 0;
	}

	.row-form-group .action-row {
		background-color: rgba(200,200,200,0.1);
		padding: 10px;
	}

		.row-form-group .action-row.action-top {
			margin-bottom: 10px;
			margin-top:-25px; /*overcome the padding added to the row-form-group column*/
		}
		.row-form-group .action-row.action-bottom {
			margin-top: 10px;
			margin-bottom:-15px; /*overcome the padding added to the row-form-group column*/
		}
	.row-form-group .form-group.action-row {
		/*when combining with form-group class, padding adjusts to overcome negative margins BS puts on form-group*/
		padding-right: 25px;
		padding-left: 25px;
	}
@media (max-width: 767px) {
	/*in most cases, the row form group will collapse when xs, so left align title in that case */
	.row-form-group > .row {
		border: 0px;
	}
	.row-form-group > .row > div:nth-child(1) {
		border:0px;
	}
	.row-form-group > .row > div:nth-child(1) {
		text-align: left;
	}
}

@media(min-width:768px) {
	/*only for widths greater than xs should the transparent mod be active.  On xs, the row-form-group typically is set to stack, so we want the color separation*/
	.row-form-group.transparent > .row,
	.row-form-group.transparent > .row > div:nth-child(2) {
		background: none;
	}
}
/*-----------------------------------------------------------*/
/*Phase out table-form-group in favor of the responsive row-form-group above*/

.table-form-group > thead > tr > th,
.table-form-group > tbody > tr > th,
.table-form-group > tfoot > tr > th,
.table-form-group > thead > tr > td,
.table-form-group > tbody > tr > td,
.table-form-group > tfoot > tr > td {
  padding: 25px 25px 15px 25px; /*less on bottom because typical for elements within to already have a bottom margin*/
}
.table-form-group > tbody > tr > TD:nth-child(3) {
	width:25%; 
	background-color:#FAFAFA;
	color:#aaaaaa;
	font-size:11px;
	line-height:12px;
	text-align:justify;
}
.table-form-group > tbody > tr > TD:first-child {
	width:15%;
	background-color:#F5F5F5;
	color:#AFAFAF;
	font-size:14px;
	line-height:17px;
	text-align:right;
}



/*-----------------------------------------------------------*/

.btn-group .btn-icononly { padding:2px 8px } /*slightly thinner and shorter, but only when displayed in the group (actions)*/

/*btn-group will collapse on table-responsive if screen too small, so this avoids that, but only use for "action" column type situations with simple buttons (https://github.com/twbs/bootstrap/issues/9939) */
.btn-group.btn-group-nowrap {
	white-space: nowrap;
}

	.btn-group.btn-group-nowrap .btn {
		float: none;
		display: inline-block;
	}



/*use important since the female/male attribute is the most important if placed on a button. Otherwise, changing the default button style in a local stylesheet will override*/
.btn.btn-female.active,.btn.btn-female:active, .btn.btn-female:focus {	background-color:#FADBEC !important;color:#FA41AF !important;}
.btn.btn-male.active,.btn.btn-male:active, .btn.btn-male:focus {	background-color:#E4F5FC !important;color:#0E98F8 !important; }
.btn.btn-radio.active { 
	background-color: #58B058;
    background-image: -moz-linear-gradient(center top , #51A351, #62C462);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.icon-edit				{ color:#C69E00; }
.icon-info				{ color:#0000CC; }

.icon-spoof				{ color:#707070;}

.icon-approve,
.icon-activate 			{ color:#468847; }

.icon-delete,
.icon-remove,
.icon-user-times,
.icon-deactivate,
.icon-inactive,
.icon-decline,
.icon-error				{ color:#b94a48; }

.icon-rss				{ color: #FF9326;}

.icon-settings, .icon-properties {
	color: #666666;
}


/*-----------------------------------------------------------*/
.fa-rotate-45 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.fa-rotate-315 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3.5);
  -webkit-transform: rotate(315deg);
  -moz-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  -o-transform: rotate(315deg);
  transform: rotate(315deg);
}


.fa-btn { 
	/* a fa icon acting like a button, but must use bootstrap btn class as well. button identifier required in declaration so padding will be enforced on .close */
	/*padding: 0 0.15em 0.15em;*/
	background:none;
	color:inherit;
}
.fa-btn:hover {
	color:#000000;
	background-color:#F6F6F6;
}

.fa-danger-hover,
.fa-success-hover,
.fa-warning-hover {
	color: rgba(0,0,0,0.1);
}
	.fa-danger-hover:hover {
		color: #ffffff;
		background-color: #d9534f;
	}
	.fa-success-hover:hover {
		color: #fff;
		background-color:#5cb85c;
	}
	.fa-warning-hover:hover {
		color:#fff;
		background-color:#f0ad4e;

	}

.fa-ul { /*base fa icon list classes have no padding or margins. Usually used where that is expected*/
	padding-left: 25px;
}
	.fa-ul > li {
		margin-bottom: 15px;
	}
	.fa-ul .fa-li {
		top: 0.202857em; /*base class setting has icons appear a little too high*/
	}
	.fa-ul.fa-ul-condensed > li { /*  for the occasions where we don't want a margin*/
		margin-bottom: 1px;
	}
	.fa-ul.fa-ul-flush { /*important that the fa-li class is used on each icon within an li for this to appear properly*/
		padding-left:0;
	}

/*-----------------------------------------------------------------------------------*/
/*Toggle icon on accordion(collapse). Base class accordion-toggle placed on panel-group class container. Each anchor tag needs "accordion-toggle collapsed" */

.accordion-toggle .panel-heading .accordion-toggle {
	display: block; /*make entire header clickable*/
	text-decoration:none;
}
	.accordion-toggle .panel-heading .accordion-toggle:before {
		font-family: 'FontAwesome';
		padding-right: 10px;
		color: #666666;
	}

.accordion-toggle.toggle-chevron .panel-heading .accordion-toggle:before {
	content: "\f078";
}
.accordion-toggle.toggle-chevron .panel-heading .accordion-toggle.collapsed:before {
	content: "\f054";
}

.accordion-toggle.toggle-plusMinus .panel-heading .accordion-toggle:before {
	content: "\f068";
}
.accordion-toggle.toggle-plusMinus .panel-heading .accordion-toggle.collapsed:before{
	content: "\f067"
}

.accordion-toggle.toggle-plusMinusCircle .panel-heading .accordion-toggle:before {
	content: "\f056";
}
.accordion-toggle.toggle-plusMinusCircle .panel-heading .accordion-toggle.collapsed:before{
	content: "\f055"
}
	

/*--------------------------------------*/
.media-list li.divider { /*originally written to separate trending articles on NASP*/
	height: 1px;
	margin: 20px 0px;
	overflow: hidden;
	background-color: #eeeeee;
}


/*
  Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
  Inspired from:  http://codepen.io/Rowno/pen/Afykb 
*/

.carousel-fade .carousel-inner .item {
	opacity: 0;
	transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
	opacity: 1;
}

	.carousel-fade .carousel-inner .active.left,
	.carousel-fade .carousel-inner .active.right {
		left: 0;
		opacity: 0;
		z-index: 1;
	}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
	opacity: 1;
}

.carousel-fade .carousel-control {
	z-index: 2;
}

/*
  WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
  Need to override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
	.carousel-fade .carousel-inner > .item.next,
	.carousel-fade .carousel-inner > .item.active.right {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	.carousel-fade .carousel-inner > .item.prev,
	.carousel-fade .carousel-inner > .item.active.left {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

		.carousel-fade .carousel-inner > .item.next.left,
		.carousel-fade .carousel-inner > .item.prev.right,
		.carousel-fade .carousel-inner > .item.active {
			opacity: 1;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
}