/**
 *  ==================== BOOTSTRAP-EXTEND ====================
 *
 *  [Description]
 *  - Extend css features of Twitter Bootstrap
 *  - Version 3.0 (indicates that it works for Bootstrap v3.x)
 *
 *  [Dependencies]
 *  - Bootstrap 3.x
 *
 *  [Features]
 *  - CONTAINER-NARROW
 *  - MODAL-MAX
 *  - BTN-INVERSE
 *  - TR.INVERSE / TD.INVERSE
 *  - INPUT-XS / INPUT-GROUP-XS
 *  - FORM-CONTROL @ INPUT-GROUP-CONTROL
 *  - VERTICAL TAB NAV
 *
 */




/**
 *  ----------------
 *  CONTAINER NARROW
 *  ----------------
 *
 *
 *  [Example]
 *
 *  <div class="container-narrow"> ... </div>
 *
 **/

.container-narrow {
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: 768px) {
	.container-narrow {
		width: 100%;  /* Must be percentage or pixels for horizontal alignment */
	}
}

@media (min-width: 992px) {
	.container-narrow {
		width: 700px;
	}
}




/**
 *  ---------
 *  MODAL MAX
 *  ---------
 *
 *
 *  [Example]
 *
 *  <div class="modal fade">
 *    <div class="modal-dialog modal-max">
 *      <div class="modal-content"> ... </div>
 *    </div>
 *  </div>
 *
 **/

.modal .modal-dialog.modal-max {
	width: 94%;
}




/**
 *  --------------
 *  BUTTON INVERSE
 *  --------------
 *
 *
 *  [Example]
 *
 *  <a class="btn btn-inverse" href="..."> ... </a>
 *
 *  <button class="btn btn-inverse"> ... </button>
 *
 **/

.btn-inverse {
	color: #fff;
	background-color: #444;
	border-color: #080808;
}

.btn-inverse:hover,
.btn-inverse:focus,
.btn-inverse:active,
.btn-inverse.active,
.open .dropdown-toggle.btn-inverse {
	color: #fff;
	background-color: #080808;
	border-color: #444;
}

.btn-inverse:active,
.btn-inverse.active,
.open .dropdown-toggle.btn-inverse {
	background-image: none;
}

.btn-inverse.disabled,
.btn-inverse[disabled],
fieldset[disabled] .btn-inverse,
.btn-inverse.disabled:hover,
.btn-inverse[disabled]:hover,
fieldset[disabled] .btn-inverse:hover,
.btn-inverse.disabled:focus,
.btn-inverse[disabled]:focus,
fieldset[disabled] .btn-inverse:focus,
.btn-inverse.disabled:active,
.btn-inverse[disabled]:active,
fieldset[disabled] .btn-inverse:active,
.btn-inverse.disabled.active,
.btn-inverse[disabled].active,
fieldset[disabled] .btn-inverse.active {
	background-color: #444;
	border-color: #080808;
}

.btn-inverse .badge {
	color: #444;
	background-color: #fff;
}




/**
 *  -------------
 *  TR/TD INVERSE
 *  -------------
 *
 *
 *  [Example : row]
 *
 *  <tr class="inverse"> ... </tr>
 *
 *
 *  [Example : cell]
 *
 *  <tr>
 *    <th class="inverse"> ... </th>
 *    <td class="inverse"> ... </td>
 *  </tr>
 *
 **/

tr.inverse th,
tr.inverse td,
th.inverse,
td.inverse {
	color: #fff;
	background-color: #444;
	border-color: #080808;
}




/**
 *  --------
 *  INPUT-XS
 *  --------
 *
 *  [Reference]
 *  - https://coderwall.com/p/xpahmg
 *
 *
 *  [Example : input]
 *
 *  <input class="form-control input-xs" type="text" placeholder=".input-xs" />
 *
 *  <select class="form-control input-xs">...</select>
 *
 *
 *  [Example : input-group]
 *
 *  <div class="input-group input-group-xs">
 *    <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
 *    <input type="text" class="form-control" placeholder="Keyword" />
 *    <div class="input-group-btn"><button class="btn btn-default">Go</button></div>
 *  </div>
 *
 **/

.input-xs {
	height: 22px;
	padding: 5px 5px;
	font-size: 12px;
	line-height: 1.5;
	border-radius: 3px;
}
select.input-xs { padding: 2px 5px; }

.input-group-xs>.form-control,
.input-group-xs>.input-group-addon,
.input-group-xs>.input-group-btn>.btn {
	height: 22px;
	padding: 1px 5px;
	font-size: 12px;
	line-height: 1.5;
}




/**
 *  -------------------
 *  INPUT-GROUP-CONTROL
 *  -------------------
 *
 *
 *  [Example]
 *
 *  <div class="input-group">
 *    <div class="input-group-control"><select class="form-control"> ... </select></div>
 *    <input type="text" class="form-control" />
 *    <div class="input-group-btn"><button class="btn btn-default">Go</button></div>
 *  </div>
 *
 **/

.input-group .input-group-control {
	display: table-cell;
	width: 1%;
}
.input-group .input-group-control > .form-control {
	display: block;
}

.input-group-control:first-child > .form-control {
	border-bottom-left-radius: 4px;
	border-top-left-radius: 4px;
	border-right: 0;
	width: auto;
}

.input-group-control:last-child > .form-control {
	border-bottom-right-radius: 4px;
	border-top-right-radius: 4px;
	border-left: 0;
	width: auto;
}

.input-group-control:not(:first-child):not(:last-child) > .form-control {
	border-radius: 0;
	border-left: 0;
	width: auto;
}




/**
 *  ------------
 *  TAB VERTICAL
 *  ------------
 *
 *  Custom inclusion of right, left and below tabs
 *
 *
 *  [Reference]
 *  - http://stackoverflow.com/questions/18432577/stacked-tabs-in-bootstrap-3
 *
 *
 *  [Example]
 *
 *  <div class="tab-left">
 *    <ul class="nav nav-tabs"> ... </ul>
 *  </div>
 *
 *  <div class="tab-right">
 *    <ul class="nav nav-tabs"> ... </ul>
 *  </div>
 *
 *  <div class="tab-below">
 *    <ul class="nav nav-tabs"> ... </ul>
 *  </div>
 *
 **/

.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
	border-bottom: 0;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
	display: none;
}

.tab-content > .active,
.pill-content > .active {
	display: block;
}

.tabs-below > .nav-tabs {
	border-top: 1px solid #ddd;
}

.tabs-below > .nav-tabs > li {
	margin-top: -1px;
	margin-bottom: 0;
}

.tabs-below > .nav-tabs > li > a {
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	border-radius: 0 0 4px 4px;
}

.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
	border-top-color: #ddd;
	border-bottom-color: transparent;
}

.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
	border-color: transparent #ddd #ddd #ddd;
}

.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
	float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
	min-width: 74px;
	margin-right: 0;
	margin-bottom: 3px;
}

.tabs-left > .nav-tabs {
	float: left;
	margin-right: 19px;
	border-right: 1px solid #ddd;
}

.tabs-left > .nav-tabs > li > a {
	margin-right: -1px;
	-webkit-border-radius: 4px 0 0 4px;
	-moz-border-radius: 4px 0 0 4px;
	border-radius: 4px 0 0 4px;
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
	border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
	border-color: #ddd transparent #ddd #ddd;
	*border-right-color: #ffffff;
}

.tabs-right > .nav-tabs {
	float: right;
	margin-left: 19px;
	border-left: 1px solid #ddd;
}

.tabs-right > .nav-tabs > li > a {
	margin-left: -1px;
	-webkit-border-radius: 0 4px 4px 0;
	-moz-border-radius: 0 4px 4px 0;
	border-radius: 0 4px 4px 0;
}

.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
	border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}

.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
	border-color: #ddd #ddd #ddd transparent;
	*border-left-color: #ffffff;
}