Cara Membuat Form Login Keren Dengan HTML5 dan Bootstrap Css

Cara Membuat Form Login Keren Dengan HTML5 dan Bootstrap Css - Form login adalah form yang digunakan untuk masuk ke dalam akun sebuah website atau aplikasi, form login yang akan kita bahas kali ini akan di buat menggunakan HTML5 dan Bootstrap CSS. dengan html5 dan bootstrap kita dapat menghasilkan form login yang keren serta dinamis.

Baca juga : Cara Membuat Multistep Form Keren Dengan HTML5

CSS

Pertama kita akan membuat file CSS yang akan kita gunakan untuk style form kita nanti.

1. stylesheet

Buatlah sebuah file CSS dengan nama : stylesheet.css

Dengan isi script :

/* Add additional stylesheets below
-------------------------------------------------- */
/*
  Bootstrap's documentation styles
  Special styles for presenting Bootstrap's documentation and examples
*/

@import url('library/jquery-ui-1.10.3.css');
@import url('library/chosen.css');
@import url('library/jqvmap.css');
@import url('library/jquery.dataTables.css');
@import url('library/jquery.mCustomScrollbar.css');
@import url('library/fullcalendar.css');
@import url('library/datetimepicker.css');
@import url('library/datepicker.css');
@import url('library/bootstrap-timepicker.css');
@import url('library/bootstrap-fileupload.css');
@import url('library/jquery.minicolors.css');
@import url('library/footable/footable-0.1.css');
@import url('library/footable/footable.paginate.css');
@import url('library/jquery.fileupload-ui.css');
@import url('library/bootstrapSwitch.css');
@import url('library/bootstrap-select.css');
@import url('library/bootstrap-wysihtml5.css');
@import url('library/bootstrap-modal.css');


/* 1. Body and structure
-------------------------------------------------- */

html {
  height: 100%;
}

body {
  background: #fafafa;
  position: relative;
  min-height: 100%; 
  -ms-overflow-style: scrollbar !important;
  direction: ltr;
  padding: 0;
  margin: 0;
  
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -moz-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
}

.float_left {
  float: left !important;
}

.float_right {
  float: right !important;
}

.no_padding {
  padding: 0 !important;
}

.no-search .chzn-search {
  display: none;
}

.align_center {
  text-align: center !important;
}

.align_left {
  text-align: left !important;
}

.align_right {
  text-align: right !important;
}

label.error {
  margin-left: 6px;
}

#sidebar .chzn-container {
  width: 100% !important;
}

#tooltip {
  z-index: 99;
}

.fixed_container {
  border-left: 1px solid #dedede;
  border-right: 1px solid #dedede;
}
.margin_t10 {
  margin-top: 10px;
}

.margin_t20 {
  margin-top: 20px;
}

.margin_b20 {
  margin-bottom: 20px;
}

.dark_navigation {
  display: block;
  margin-bottom: 4px;
}

.sparkline {
  margin: 0 10px;
}

span.required {
  color: #b94a48;
}

/* Widgets */

.bars_vertical {
  margin: 0 10px;
  padding: 0;
  display: inline-block;
}

.bars_vertical li {
  width: 4px;
  height: 30px;
  display: block;
  margin-left: 2px;
  float: left;
  position: relative;
  background: whiteSmoke;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.075) inset;
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.075) inset;
  -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.075) inset;
}

.bars_vertical li:first-child {
  margin-left: 0;
}

.bars_vertical li span {
  width: 4px;
  display: block;
  height: auto;
  position: absolute;
  left: 0;
  bottom: 0;
}

.bars_vertical li span.orange {
  background: #CF7D51;
}

.bars_vertical li span.green {
  background: #a7c88c;
}

.bars_label span {
  display: block;
  text-align: left;
  line-height: 30px;
  margin-right: 10px;
}

.bars_label span.value {
  font-size: 16px;
}

.bars_label:last-child span {
  margin-right: 0;
}

/* User bar */

.search {
  position: relative;
  text-align: right;
}

.search > input {
  max-width: 260px;
}

.search .square-button {
  position: absolute;
  top: 0;
  right: 0;
}

.search .square-button i {
  font-size: 14px;
  line-height: 30px;
  color: #fff;
  position: relative;
}

/* Square Buttons */

.square-button {
  width: 30px;
  height: 30px;
  border: none;
  position: relative;
}

.square-button:after {
  right: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.square-button:after {
  border-color: rgba(136, 183, 213, 0);
  border-right-color: #a7c88c;
  border-width: 5px;
  top: 50%;
  margin-top: -5px;
}

.square-button:after {
  border-color: rgba(136, 183, 213, 0);
  border-right-color: #a7c88c;
  border-width: 5px;
  top: 50%;
  margin-top: -5px;
}

.color-green {
  background: #a7c88c;
}

/* 2. Header
-------------------------------------------------- */

header {
  min-height: 44px;
  z-index: 99;
  position: fixed;
  margin-bottom: 1px;
  width: 100%;
  z-index: 99;
  top: 0;
  left: 0;
}

header.blue {
  background: #0072c6;
}

header.light_blue {
  background: #5db2ff;
}

header.grey {
  background: #585858;
}

header.dark_grey {
  background: #1f1f1f;
}

header.pink {
  background: #dc4fad;
}

header.red {
  background: #ac193d;
}

header.orange {
  background: #d24726;
}

header.yellow {
  background: #ff8f32;
}

header.dark_green {
  background: #82ba00;
}

header.green {
  background: #a7c88c;
}

header.turq {
  background: #03b3b2;
}

header.dark_turq {
  background: #008299;
}

header.purple {
  background: #4617b4;
}

header.violet {
  background: #8c0095;
}

header.dark_blue {
  background: #001940;
}

header.dark_red {
  background: #570000;
}

header.brown {
  background: #380000;
}

header.black {
  background: #000000;
}

header a.logo_image {
  width: 94px;
  display: block;
  height: 44px;
  float: left;
  line-height: 44px;
  padding-left: 33px;
  font-size: 16px;
  color: #fff;
  font-weight: 300;
  text-transform: uppercase;
  background: url(../img/logo.png) no-repeat left center;
  margin-left: 10px;
}

header .quick_header_actions {
  float: left;
  margin: 0;
}

header .quick_header_actions li {
  display: inline-block;
  list-style: none;
  margin-right: -4px;
}

header .quick_header_actions li a {
  display: block;
  width: 40px;
  height: 44px;
  text-align: center;
  line-height: 45px;
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.08);
     -moz-box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.08);
          box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.08);
}

header .quick_header_actions li:last-child a {
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 1px 0 0 0 rgba(255, 255, 255, 0.08), inset 1px 0 0 0 rgba(255, 255, 255, 0.08);
  -moz-box-shadow: 1px 0 0 0 rgba(255, 255, 255, 0.08), inset 1px 0 0 0 rgba(255, 255, 255, 0.08);
  box-shadow: 1px 0 0 0 rgba(255, 255, 255, 0.08), inset 1px 0 0 0 rgba(255, 255, 255, 0.08);
}

header .quick_header_actions li a i {
  font-size: 14px;
  color: #fff;
}

header ul.header_actions {
  margin: 0;
  float: right;
}

header ul.header_actions > li {
  list-style: none;
  float: left;
  position: relative;
}

header ul.header_actions > li > a {
  display: block;
  height: 44px;
  line-height: 44px;
  padding: 0 15px;
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  color: #fff;
  font-size: 11px;
  -webkit-box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.08);
     -moz-box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.08);
          box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.08);
}

header ul.header_actions > li > a > i {
  font-size: 14px;
  position: relative;
  top: 1px;
  left: 0px;
  margin-left: -2px;
  margin-right: 1px;
}

header ul.header_actions > li.messages > a {
  line-height: 45px;
}

header ul.header_actions > li.messages > a > i {
  margin-right: 4px;
  position: relative;
  top: 0px;
}

header ul.header_actions > li .avatar {
  width: 26px;
  height: 26px;
  margin-right: 9px;
}

header ul.header_actions > li > a.iconic {
  padding: 0 12px 0 13px;
}

header ul.header_actions .iconic i {
  margin-left: 0;
  margin-right: -2px;
}

header ul.header_actions > li.dropdown > i,
header ul.header_actions > li.dropdown > a > i {
  margin-right: -5px;
  margin-left: 4px;
  font-size: 11px;
  position: relative;
  top: 0px;
  display: inline-block;
}

header ul.header_actions > li.responsive_menu {
  display: none;
}

header ul.header_actions > li.responsive_menu > a i {
  font-size: 17px;
  position: relative;
  top: 2px;
  margin-right: 1px;
}

/* Header change color */

header ul.header_actions > li.color_pick > ul {
  position: absolute;
  right: 1px;
  top: 100%;
  width: 140px;
  padding: 10px 10px 3px;
  border-width: 0 1px 1px;
  border-style: solid;
  border-color: #dedede !important;
  background: #fff !important;
  margin-bottom: -5px;
  z-index: 99;
  display: none;
}

header ul.header_actions > li.color_pick > ul > li {
  display: inline-block;
  margin: 0 1px;
}

header ul.header_actions > li.color_pick > ul > li > a {
  width: 18px;
  height: 18px;
  background: #000;
  display: block;
  padding: 0;
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

header ul.header_actions > li.color_pick > ul > li > a.blue {
  background: #0072c6;
}

header ul.header_actions > li.color_pick > ul > li > a.light_blue {
  background: #5db2ff;
}

header ul.header_actions > li.color_pick > ul > li > a.grey {
  background: #585858;
}

header ul.header_actions > li.color_pick > ul > li > a.dark_grey {
  background: #1f1f1f;
}

header ul.header_actions > li.color_pick > ul > li > a.pink {
  background: #dc4fad;
}

header ul.header_actions > li.color_pick > ul > li > a.red {
  background: #ac193d;
}

header ul.header_actions > li.color_pick > ul > li > a.orange {
  background: #d24726;
}

header ul.header_actions > li.color_pick > ul > li > a.yellow {
  background: #ff8f32;
}

header ul.header_actions > li.color_pick > ul > li > a.dark_green {
  background: #82ba00;
}

header ul.header_actions > li.color_pick > ul > li > a.green {
  background: #a7c88c;
}

header ul.header_actions > li.color_pick > ul > li > a.turq {
  background: #03b3b2;
}

header ul.header_actions > li.color_pick > ul > li > a.dark_turq {
  background: #008299;
}

header ul.header_actions > li.color_pick > ul > li > a.purple {
  background: #4617b4;
}

header ul.header_actions > li.color_pick > ul > li > a.violet {
  background: #8c0095;
}

header ul.header_actions > li.color_pick > ul > li > a.dark_blue {
  background: #001940;
}

header ul.header_actions > li.color_pick > ul > li > a.dark_red {
  background: #570000;
}

header ul.header_actions > li.color_pick > ul > li > a.brown {
  background: #380000;
}

header ul.header_actions > li.color_pick > ul > li > a.black {
  background: #000000;
}

/* Dropdown Header */

header ul.header_actions > li > ul {
  position: absolute;
  position: absolute;
  width: 99%;
  left: 0;
  top: 100%;
  margin: 0;
  display: none;
  background: #fff;
}

header.blue ul.header_actions > li > ul {
  border: 1px solid #0072c6;
  border-top: none;
}

header.light_blue ul.header_actions > li > ul {
  border: 1px solid #5db2ff;
  border-top: none;
}

header.grey ul.header_actions > li > ul {
  border: 1px solid #585858;
  border-top: none;
}

header.dark_grey ul.header_actions > li > ul {
  border: 1px solid #1f1f1f;
  border-top: none;
}

header.pink ul.header_actions > li > ul {
  border: 1px solid #dc4fad;
  border-top: none;
}

header.red ul.header_actions > li > ul {
  border: 1px solid #ac193d;
  border-top: none;
}

header.orange ul.header_actions > li > ul {
  border: 1px solid #d24726;
  border-top: none;
}

header.yellow ul.header_actions > li > ul {
  border: 1px solid #ff8f32;
  border-top: none;
}

header.dark_green ul.header_actions > li > ul {
  border: 1px solid #82ba00;
  border-top: none;
}

header.green ul.header_actions > li > ul {
  border: 1px solid #a7c88c;
  border-top: none;
}

header.turq ul.header_actions > li > ul {
  border: 1px solid #03b3b2;
  border-top: none;
}

header.dark_turq ul.header_actions > li > ul {
  border: 1px solid #008299;
  border-top: none;
}

header.purple ul.header_actions > li > ul {
  border: 1px solid #4617b4;
  border-top: none;
}

header.violet ul.header_actions > li > ul {
  border: 1px solid #8c0095;
  border-top: none;
}

header.dark_blue ul.header_actions > li > ul {
  border: 1px solid #001940;
  border-top: none;
}

header.dark_red ul.header_actions > li > ul {
  border: 1px solid #570000;
  border-top: none;
}

header.brown ul.header_actions > li > ul {
  border: 1px solid #380000;
  border-top: none;
}

header.black ul.header_actions > li > ul {
  border: 1px solid #000000;
  border-top: none;
}

header ul.header_actions > li > ul > li {
  list-style: none;
}

header ul.header_actions > li > ul > li > a {
  display: block;
  height: 35px;
  line-height: 34px;
  color: #333;
  padding: 0 9px;
  font-size: 11px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

header ul.header_actions > li > ul > li > a:hover {
  background: #fafafa;
}

header ul.header_actions > li > ul > li > a > i {
  font-size: 14px;
  position: relative;
  top: 1px;
  margin-right: 5px;
  opacity: 1;
}

/* Messages dropdown */

header ul.header_actions > li > ul.messages_dropdown {
  width: 250px !important;
  padding: 0;
}

header ul.header_actions > li > ul.messages_dropdown > li > a {
  padding: 10px ;
  line-height: 19px;
  height: inherit;
}

header ul.header_actions > li > ul.messages_dropdown > li > a:hover {
  background: #fafafa;
}

header ul.header_actions > li > ul.messages_dropdown > li > a:after {
  content: "";
  display: block;
  clear: both;
}

header ul.header_actions > li > ul.messages_dropdown img {
  width: 40px;
  float: left;
}

header ul.header_actions > li > ul.messages_dropdown .details {
  float: left;
  margin-left: 10px;
  max-width: 180px;
  overflow: hidden;
}

header ul.header_actions > li > ul.messages_dropdown > a.button {
  padding: 7px 1px;
  color: #fff;
  display: block;
  width: 100%;
  margin-left: -1px;
  margin-bottom: -1px;
}

header ul.header_actions > li > ul.messages_dropdown > .btn > span {
  padding: 0 10px;
}

/* 3. Top navigation
-------------------------------------------------- */

#top_navigation {
  height: 40px;
  border-bottom: 1px solid #dedede;
  border-right: 1px solid #dedede;
  border-top: 1px solid #dedede;
  margin-bottom: 1px;
  background: #fff;
  position: relative;
  z-index: 98;
}

#top_navigation > ul {
  margin: 0;
}

#top_navigation > ul > li {
  display: inline-block;
  list-style: none;
  position: relative;
}

#top_navigation > ul > li > a {
  display: block;
  height: 40px;
  line-height: 40px;
  padding: 0 15px 0 8px;
  color: #333333;
  border-right: 1px solid #dedede;
}

.fixed_container #top_navigation {
  border-right: none;
}

#top_navigation > ul > li > a > i {
  font-size: 14px;
  position: relative;
  top: 1px;
  margin-right: 4px;
  color: #5c696f;
}

#top_navigation > ul > li > a:hover,
#top_navigation > ul > li > a:hover > i {
  text-decoration: none;
  color: #809097;
}

#top_navigation > ul > li > ul {
  display: none;
  position: absolute;
}

/* 4. Main navigation
-------------------------------------------------- */

#main_navigation {
  width: 217px;
  position: fixed;
  left: 0;
  top: 0;
  background: #fafafa;
  padding: 0 1px;
  border-right: 1px solid #dedede;
  min-height: 100%;
}

#main_navigation.dark_navigation {
  background: #343434;
  border-right: none;
}

#main_navigation .inner_navigation {
  margin-top: 44px;
}

.nav_container {
  border-width: 0;
  border-style: solid;
  border-color: #dedede;
  margin: 1px 0 0 0;
  background: #fafafa;

  -webkit-box-shadow: inset 0 1px 0 #fff;
  -moz-box-shadow: inset 0 1px 0 #fff;
  box-shadow: inset 0 1px 0 #fff;
}

ul.main {
  margin: 0;
}

ul.main > li {
  list-style: none;
  margin-top: 1px;
}

#main_navigation.dark_navigation ul.main > li {
  margin-top: 0;
}

ul.main > li > a {
  display: block;
  height: 40px;
  border: 1px solid #dedede;
  padding: 0 8px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color: #333333;
  font-size: 12px;
  position: relative;

  background: #f9f9f9;
}

#main_navigation.dark_navigation ul.main > li > a {
  background: #343434;
  color: #cacaca;
  border: none;
  border-bottom: 1px solid #595959;
}
header ul.header_actions > li > ul
#main_navigation.dark_navigation ul.main > li:first-child > a {
  border-top: none;
}

ul.main > li > a:hover,
ul.main > li > a:hover > i {
  text-decoration: none;
  color: #809097;
}

ul.main > li > a:active,
ul.main > li.active > a,
ul.main > li > a.subOpened {
  border: 1px solid #585858;
  color: #fff;
  font-weight: 600;

  background: #585858;
}

#main_navigation.blue ul.main > li > a:active,
#main_navigation.blue ul.main > li.active > a,
#main_navigation.blue ul.main > li > a.subOpened {
  background: #0072c6;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  color: #fff;
  border: 1px solid #0072c6;
}

#main_navigation.light_blue ul.main > li > a:active,
#main_navigation.light_blue ul.main > li.active > a,
#main_navigation.light_blue ul.main > li > a.subOpened {
  background: #5db2ff;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  color: #fff;
  border: 1px solid #5db2ff;
}

#main_navigation.grey ul.main > li > a:active,
#main_navigation.grey ul.main > li.active > a,
#main_navigation.grey ul.main > li > a.subOpened {
  background: #585858;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  color: #fff;
  border: 1px solid #585858;
}

#main_navigation.dark_grey ul.main > li > a:active,
#main_navigation.dark_grey ul.main > li.active > a,
#main_navigation.dark_grey ul.main > li > a.subOpened {
  background: #1f1f1f;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  color: #fff;
  border: 1px solid #1f1f1f;
}

#main_navigation.pink ul.main > li > a:active,
#main_navigation.pink ul.main > li.active > a,
#main_navigation.pink ul.main > li > a.subOpened {
  background: #dc4fad;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  color: #fff;
  border: 1px solid #dc4fad;
}

#main_navigation.red ul.main > li > a:active,
#main_navigation.red ul.main > li.active > a,
#main_navigation.red ul.main > li > a.subOpened {
  background: #ac193d;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  color: #fff;
  border: 1px solid #ac193d;
}

#main_navigation.orange ul.main > li > a:active,
#main_navigation.orange ul.main > li.active > a,
#main_navigation.orange ul.main > li > a.subOpened {
  background: #d24726;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  color: #fff;
  border: 1px solid #d24726;
}

#main_navigation.yellow ul.main > li > a:active,
#main_navigation.yellow ul.main > li.active > a,
#main_navigation.yellow ul.main > li > a.subOpened {
  background: #ff8f32;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  color: #fff;
  border: 1px solid #ff8f32;
}

#main_navigation.dark_green ul.main > li > a:active,
#main_navigation.dark_green ul.main > li.active > a,
#main_navigation.dark_green ul.main > li > a.subOpened {
  background: #82ba00;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  color: #fff;
  border: 1px solid #82ba00;
}

#main_navigation.dark_green ul.main > li > a:active,
#main_navigation.dark_green ul.main > li.active > a,
#main_navigation.dark_green ul.main > li > a.subOpened {
  background: #82ba00;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  color: #fff;
  border: 1px solid #82ba00;
}

#main_navigation.green ul.main > li > a:active,
#main_navigation.green ul.main > li.active > a,
#main_navigation.green ul.main > li > a.subOpened {
  background: #a7c88c;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  color: #fff;
  border: 1px solid #a7c88c;
}

#main_navigation.turq ul.main > li > a:active,
#main_navigation.turq ul.main > li.active > a,
#main_navigation.turq ul.main > li > a.subOpened {
  background: #03b3b2;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  color: #fff;
  border: 1px solid #03b3b2;
}

#main_navigation.dark_turq ul.main > li > a:active,
#main_navigation.dark_turq ul.main > li.active > a,
#main_navigation.dark_turq ul.main > li > a.subOpened {
  background: #008299;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  color: #fff;
  border: 1px solid #008299;
}

#main_navigation.purple ul.main > li > a:active,
#main_navigation.purple ul.main > li.active > a,
#main_navigation.purple ul.main > li > a.subOpened {
  background: #4617b4;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  color: #fff;
  border: 1px solid #4617b4;
}

#main_navigation.violet ul.main > li > a:active,
#main_navigation.violet ul.main > li.active > a,
#main_navigation.violet ul.main > li > a.subOpened {
  background: #8c0095;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  color: #fff;
  border: 1px solid #8c0095;
}

#main_navigation.dark_blue ul.main > li > a:active,
#main_navigation.dark_blue ul.main > li.active > a,
#main_navigation.dark_blue ul.main > li > a.subOpened {
  background: #001940;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  color: #fff;
  border: 1px solid #001940;
}

#main_navigation.dark_red ul.main > li > a:active,
#main_navigation.dark_red ul.main > li.active > a,
#main_navigation.dark_red ul.main > li > a.subOpened {
  background: #570000;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  color: #fff;
  border: 1px solid #570000;
}

#main_navigation.brown ul.main > li > a:active,
#main_navigation.brown ul.main > li.active > a,
#main_navigation.brown ul.main > li > a.subOpened {
  background: #380000;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  color: #fff;
  border: 1px solid #380000;
}

#main_navigation.black ul.main > li > a:active,
#main_navigation.black ul.main > li.active > a,
#main_navigation.black ul.main > li > a.subOpened {
  background: #000000;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  color: #fff;
  border: 1px solid #000000;
}

#main_navigation.dark_navigation ul.main > li > a:hover,
#main_navigation.dark_navigation ul.main > li > a:active,
#main_navigation.dark_navigation ul.main > li.active > a,
#main_navigation.dark_navigation ul.main > li > a.subOpened {
  background: rgba(255, 255, 255, 0.05);
  font-weight: normal;
}

ul.main > li > a:active > i,
ul.main > li.active > a > i,
ul.main > li > a.subOpened > i {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.22);
}

ul.main > li > a > i {
  font-size: 14px;
  color: #5c696f;
  line-height: 39px;
  margin-right: 8px;
  position: relative;
  top: 1px;
}

#main_navigation.dark_navigation ul.main > li > a > i {
  color: #808080;
}

ul.main > li > a > span.count {
  position: absolute;
  display: block;
  right: 8px;
  top: 9px;
  line-height: 22px;
  text-align: center;
  font-family: arial, sans-serif;
  font-weight: bold;
  font-size: 10px;
  color: #636363;
  opacity: 0.7;
}

ul.main > li > a:active > span.count,
ul.main > li.active > a > span.count,
ul.main > li > a.subOpened > span.count {
  color: #fff;
}

#main_navigation.dark_navigation ul.main > li > a > span.count {
  color: #fff;
}

/* Submenu */

ul.main > li > ul.sub_main {
  display: none;
  margin: 0;
}

ul.main > li > ul.sub_main > li {
  list-style: none;
  margin: 1px 0 0 0;
  border-width: 1px 0 1px 0;
  border-style: solid;
  border-color: #dedede;
  background: #f9f9f9;
  position: relative;
}

#main_navigation.dark_navigation ul.main > li > ul.sub_main > li {
  background: #343434;
  border: none;
  border-bottom: 1px solid #595959;
  margin: 0;
}

ul.main > li > ul.sub_main > li > a {
  display: block;
  height: 35px;
  line-height: 35px;
  padding: 0 8px;
  font-size: 11px;
  color: #5f5f5f;
  border-width: 0 5px 0 0;
  border-style: solid;
  border-color: transparent;
  margin-top: -1px;
  margin-bottom: -1px;

  -webkit-transition: border-color 0.13s ease-in-out;
  -moz-transition: border-color 0.13s ease-in-out;
  -ms-transition: border-color 0.13s ease-in-out;
  -o-transition: border-color 0.13s ease-in-out;
  transition: border-color 0.13s ease-in-out;
}

#main_navigation.dark_navigation ul.main > li > ul.sub_main > li > a {
  margin: 0;
  color: #9a9a9a;
}

.dark_navigation ul.main > li > ul.sub_main > li.active > a,
.dark_navigation ul.main > li > ul.sub_main > li > a:hover {
  text-decoration: none;
  border-color: #c1c1c1;
}

.blue ul.main > li > ul.sub_main > li.active > a,
.blue ul.main > li > ul.sub_main > li > a:hover {
  text-decoration: none;
  border-color: #0072c6;
}

.light_blue ul.main > li > ul.sub_main > li.active > a,
.light_blue ul.main > li > ul.sub_main > li > a:hover {
  text-decoration: none;
  border-color: #5db2ff;
}

.grey ul.main > li > ul.sub_main > li.active > a,
.grey ul.main > li > ul.sub_main > li > a:hover {
  text-decoration: none;
  border-color: #585858;
}

.dark_grey ul.main > li > ul.sub_main > li.active > a,
.dark_grey ul.main > li > ul.sub_main > li > a:hover {
  text-decoration: none;
  border-color: #1f1f1f;
}

.pink ul.main > li > ul.sub_main > li.active > a,
.pink ul.main > li > ul.sub_main > li > a:hover {
  text-decoration: none;
  border-color: #dc4fad;
}

.red ul.main > li > ul.sub_main > li.active > a,
.red ul.main > li > ul.sub_main > li > a:hover {
  text-decoration: none;
  border-color: #ac193d;
}

.orange ul.main > li > ul.sub_main > li.active > a,
.orange ul.main > li > ul.sub_main > li > a:hover {
  text-decoration: none;
  border-color: #d24726;
}

.yellow ul.main > li > ul.sub_main > li.active > a,
.yellow ul.main > li > ul.sub_main > li > a:hover {
  text-decoration: none;
  border-color: #ff8f32;
}

.dark_green ul.main > li > ul.sub_main > li.active > a,
.dark_green ul.main > li > ul.sub_main > li > a:hover {
  text-decoration: none;
  border-color: #82ba00;
}

.green ul.main > li > ul.sub_main > li.active > a,
.green ul.main > li > ul.sub_main > li > a:hover {
  text-decoration: none;
  border-color: #a7c88c;
}

.turq ul.main > li > ul.sub_main > li.active > a,
.turq ul.main > li > ul.sub_main > li > a:hover {
  text-decoration: none;
  border-color: #03b3b2;
}

.dark_turq ul.main > li > ul.sub_main > li.active > a,
.dark_turq ul.main > li > ul.sub_main > li > a:hover {
  text-decoration: none;
  border-color: #008299;
}

.purple ul.main > li > ul.sub_main > li.active > a,
.purple ul.main > li > ul.sub_main > li > a:hover {
  text-decoration: none;
  border-color: #4617b4;
}

.violet ul.main > li > ul.sub_main > li.active > a,
.violet ul.main > li > ul.sub_main > li > a:hover {
  text-decoration: none;
  border-color: #8c0095;
}

.dark_blue ul.main > li > ul.sub_main > li.active > a,
.dark_blue ul.main > li > ul.sub_main > li > a:hover {
  text-decoration: none;
  border-color: #001940;
}

.dark_red ul.main > li > ul.sub_main > li.active > a,
.dark_red ul.main > li > ul.sub_main > li > a:hover {
  text-decoration: none;
  border-color: #570000;
}

.brown ul.main > li > ul.sub_main > li.active > a,
.brown ul.main > li > ul.sub_main > li > a:hover {
  text-decoration: none;
  border-color: #380000;
}

.black ul.main > li > ul.sub_main > li.active > a,
.black ul.main > li > ul.sub_main > li > a:hover {
  text-decoration: none;
  border-color: #000000;
}

#main_navigation.dark_navigation ul.main > li > ul.sub_main > li > a:hover,
#main_navigation.dark_navigation ul.main > li > ul.sub_main > li.active > a {
  color: #c0c0c0;
}

ul.main > li > ul.sub_main > li > a > span.label {
  position: absolute;
  right: 10px;
  top: 6px;
}

/* 5. Content
-------------------------------------------------- */

#content {
  margin-left: 219px;
  position: relative;
  z-index: 97;
}

#content.sidebar {
  margin-right: 316px;
}

#content .top_bar {
  height: 30px;
  border-width: 1px 1px 1px;
  border-style: solid;
  border-color: #dedede;

  background: #ffffff;
}

#content .inner_content {
  margin: 1px 0 0 0;
  border-width: 1px 1px 0;

  -webkit-box-shadow: inset 0 1px 0 #fff;
  -moz-box-shadow: inset 0 1px 0 #fff;
  box-shadow: inset 0 1px 0 #fff;
}

#content .inner_content .statistic {
  padding: 15px 18px;
  border-bottom: 1px solid #dedede;
  background: #fafafa;
  margin: 1px 1px 0;
  border-top: 1px solid #dedede;

  -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 #fff;
  -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 0 #fff;
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #fff;
}

#content .inner_content .statistic .current_page {
  line-height: 30px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
}

#content .inner_content .statistic .current_page i {
  font-size: 24px;
  color: #636363;
  position: relative;
  top: 4px;
  margin-right: 6px;
}

#content .inner_content .statistic .current_page .quote {
  font-size: 12px;
}

#content .inner_content .statistic .charts {
  text-align: right;
}

#content .inner_content .statistic .sparkline {
  display: inline-block;
  margin-left: 20px;
}

#content .inner_content .statistic .sparkline:first-child {
  margin-left: 0;
} 

#content .user_bar {
  padding: 15px 18px;
  border-width: 1px 0 1px;
  border-style: solid;
  border-color: #dedede;
  margin: 1px 1px 0;

  background: #f9f9f9;
}

#content .user_bar:after {
  content: "";
  display: block;
  clear: both;
}

#content .user_bar  > div > div > span {
  font-size: 11px;
  display: block;
  text-align: center;
  height: 30px;
  line-height: 30px;
  color: #7f7f7f;
}

/* Tab panel */

ul.e-tabs {
  height: 34px;
  border-width: 1px 0 1px;
  border-style: solid;
  border-color: #dedede;
  margin: 1px 1px 0;

  background: #ffffff;
}

ul.e-tabs li {
  list-style: none;
  float: left;
}

ul.e-tabs li a {
  display: block;
  padding: 0 12px;
  height: 34px;
  line-height: 34px;
  border-right: 1px solid #dedede;
  color: #999999;
  font-size: 11px;
}

ul.e-tabs li a:hover {
  text-decoration: none;
}

ul.e-tabs li.active a,
ul.e-tabs li a:active {
  background: #fff;
}

ul.e-tabs li a i {
  font-size: 14px;
  position: relative;
  top: 1px;
  margin-right: 2px;
}

/* Tabs content */

.tabs-content {
  padding: 0;
  border-top: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  margin-top: 1px;
}

#sidebar .tabs-content {
  border-top: none;
  border-bottom: none;
}


  #sidebar .inner_sidebar {
    margin-top: 45px;
  }

.tabs-content .tab-box {
  padding: 20px 20px 0;
}

.tabs-content .tab-box .thumbnails {
  margin-bottom: 20px;
}

.tabs-content .tab-box .statistics-container {
  padding-bottom: 20px;
}

.tabs-content ul {
  margin: 0;
}

#google-map {
  height: 350px;
  width: 100%;
}

/* Status widgets */

.status-widgets {
  padding: 10px 20px;
}

.status-widgets .widget {
  padding: 15px 45px 15px 15px;
  position: relative;
}

.status-widgets .widget .options {
  float: right;
  text-align: right;
}

.status-widgets .widget .options ul {
  margin: 0 0 5px 0;
}

.status-widgets .widget .options ul:after {
  content: "";
  display: block;
  clear: both;
}

.status-widgets .widget .options ul li {
  float: left;
  list-style: none;
  margin-left: 8px;
}

.status-widgets .widget .options ul li a {
  opacity: 0.5;
}

.status-widgets .widget .options ul li a:hover {
  opacity: 1;
}

.status-widgets .widget .options ul li a i {
  font-size: 14px;
  color: #fff;
}

.status-widgets .widget .options > i {
  color: #fff;
  font-size: 24px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  position: relative;
  top: 4px;
}

.status-widgets .widget .details {
  float: left;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.status-widgets .widget .number {
  font-size: 28px;
  text-align: left;
  color: #fff;
  font-weight: 300;
  margin-bottom: 10px;
  margin-top: 4px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.status-widgets .widget .description {
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  text-align: left;
}

.widget.blue {
  background: #0072c6;
}

.widget.light_blue {
  background: #5db2ff;
}

.widget.grey {
  background: #585858;
}

.widget.pink {
  background: #dc4fad;
}

.widget.red {
  background: #ac193d;
}

.widget.orange {
  background: #d24726;
}

.widget.yellow {
  background: #ff8f32;
}

.widget.dark_green {
  background: #82ba00;
}

.widget.green {
  background: #a7c88c;
}

.widget.turq {
  background: #03b3b2;
}

.widget.dark_turq {
  background: #008299;
}

.widget.purple {
  background: #4617b4;
}

.widget.violet {
  background: #8c0095;
}

.widget.dark_blue {
  background: #001940;
}

.widget.dark_red {
  background: #570000;
}

.widget.brown {
  background: #380000;
}

.widget.black {
  background: #000000;
}

/* Report widgets */

.report-widgets {
  padding: 10px 20px;
}

.report-widgets .widget {
  position: relative;
  padding: 15px 45px 17px 15px;
}

.report-widgets .widget .content {
  text-align: center;
}

.report-widgets .widget .content .icon {
  font-size: 13px;
  color: #fff;
  margin-bottom: 8px;
  position: relative;
  top: -2px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.report-widgets .widget .content .value {
  font-size: 28px;
  color: #fff;
  font-weight: 300;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.report-widgets .widget .content .icon i {
  font-size: 20px;
  margin-right: 5px;
  position: relative;
  top: 2px;
}

.widget .more {
  display: block;
  background: rgba(0, 0, 0, 0.45);
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 30px;
}

.widget .more:hover {
  background: rgba(0, 0, 0, 0.25);
}

.widget .more i {
  font-size: 14px;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -6px;
  margin-top: -7px;
}

/* Quick actions */

.quick-actions {
  height: 60px;
  padding: 10px 20px;
  margin: 1px 0 1px 0;
  border-top: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
}

.quick-actions ul {
  margin: 5px 0 0 0;
}

.quick-actions ul:after {
  content: "";
  display: block;
  clear: both;
}

.quick-actions ul li {
  list-style: none;
  float: left;
  margin: 0 10px 0 0;
}

.quick-actions ul li a {
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 60px;
  display: block;
  background: #dedede;
}

.quick-actions ul li a i {
  color: #636363;
  font-size: 24px;
}

.quick-actions ul li a:hover {
  background: #a7c88c;
  text-decoration: none;
}

.quick-actions ul li a:hover i {
  color: #fff;
}

.widgets_area {
  padding: 20px;
}

/* Well header menus */

.well-header > ul {
  float: right;
  margin: 0 0 0 15px;
}

.well-header > ul > li {
  float: left;
  margin: 0;
  list-style: none;
  position: relative;
}

.well-header > ul > li > a {
  display: block;
  height: 40px;
  min-width: 40px;
  line-height: 41px;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.well-header > ul.nav {
  margin: 0;
  padding: 0;
  border-bottom: none;
  background: none;
}

.well-header > ul > li > a:hover {
  text-decoration: none;
}

.well-header > ul > li > a > i {
  font-size: 14px;
  color: #fff;
}

.well-header > ul > li.color_pick > ul {
  position: absolute;
  right: 1px;
  top: 100%;
  max-width: 240px;
  min-width: 140px;
  padding: 10px 10px 3px;
  border-left: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  background: #fff;
  margin-bottom: -5px;
  z-index: 99;
  display: none;
  margin-top: 1px;
}

.well-header > ul > li.color_pick > ul > li {
  display: inline-block;
  margin: 0 1px;
}

.well-header > ul > li.color_pick > ul > li > a {
  width: 18px;
  height: 18px;
  background: #000;
  display: block;
}

.well-header > ul > li.color_pick > ul > li > a.blue {
  background: #0072c6;
}

.well-header > ul > li.color_pick > ul > li > a.light_blue {
  background: #5db2ff;
}

.well-header > ul > li.color_pick > ul > li > a.grey {
  background: #585858;
}

.well-header > ul > li.color_pick > ul > li > a.pink {
  background: #dc4fad;
}

.well-header > ul > li.color_pick > ul > li > a.red {
  background: #ac193d;
}

.well-header > ul > li.color_pick > ul > li > a.orange {
  background: #d24726;
}

.well-header > ul > li.color_pick > ul > li > a.yellow {
  background: #ff8f32;
}

.well-header > ul > li.color_pick > ul > li > a.dark_green {
  background: #82ba00;
}

.well-header > ul > li.color_pick > ul > li > a.green {
  background: #a7c88c;
}

.well-header > ul > li.color_pick > ul > li > a.turq {
  background: #03b3b2;
}

.well-header > ul > li.color_pick > ul > li > a.dark_turq {
  background: #008299;
}

.well-header > ul > li.color_pick > ul > li > a.purple {
  background: #4617b4;
}

.well-header > ul > li.color_pick > ul > li > a.violet {
  background: #8c0095;
}

.well-header > ul > li.color_pick > ul > li > a.dark_blue {
  background: #001940;
}

.well-header > ul > li.color_pick > ul > li > a.dark_red {
  background: #570000;
}

.well-header > ul > li.color_pick > ul > li > a.brown {
  background: #380000;
}

.well-header > ul > li.color_pick > ul > li > a.black {
  background: #000000;
}

/* Header tabs */


.well-header > ul.nav-tabs > li {
  margin: 0;
  padding: 0;
}

.well-header > ul.nav-tabs > li > a {
  padding: 0 10px !important;
  margin: 0 !important;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  line-height: 40px;
}

.well-header > ul.nav-tabs > li > a:hover {
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.15);
} 

.well-header > ul.nav-tabs > li > a:hover > i {
  color: #fff !important;
}

.well-header > ul.nav-tabs > .active > a,
.well-header > ul.nav-tabs > .active > a:hover,
.well-header > ul.nav-tabs > .active > a:focus {
  cursor: default;
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.well-header > ul.pull-left > li > a {
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.well-header > ul.pull-left > li > a:hover {
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
} 

.well-header > ul.pull-left > .active > a,
.well-header > ul.pull-left > .active > a:hover,
.well-header > ul.pull-left > .active > a:focus {
  cursor: default;
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.well-header ul.pull-right > li > a { 
  margin-right: 0 !important;
  border-right: none;
}

.well-header > ul.nav > li > a.icon {
  padding: 0 2px !important;
}

.well-header > ul.nav > li > a.icon > i {
  font-size: 14px;
  position: relative;
  top: 1px;
}

/* Form elements */

.form_row {
  margin-bottom: 15px;
}

.form_row.small_row {
  margin-bottom: 8px;
}

.form_row.element_row {
  margin-top: 20px;
  margin-bottom: 5px;
}

.form_row:last-child {
  margin-bottom: 0;
}

.form_row::after {
  clear: both;
}

.form_row:before,
.form_row:after {
  display: table;
  line-height: 0;
  content: "";
}

.form_row:last-child {
  border-bottom: none;
}

.form_row label.field_name,
.form_row span.field_name {
  display: inline-block;
  float: left;
  padding-top: 5px;
  margin-bottom: 5px;
  width: 18%;
}

.form_row .field_value {
  display: inline-block;
  float: left;
  padding-top: 5px;
  margin-bottom: 5px;
}

.form_row .field {
  position: relative;
  margin-left: 20%;
}

#sidebar .form_row {
  margin-bottom: 5px;
}

#sidebar .form_row label.field_name {
  width: 30%;
}

#sidebar .form_row .field {
  margin-left: 32%;
}

.sidebar_field {
  position: relative;
  margin-bottom: 5px;
}

.form_row .field::after {
  clear: both !important;
}

.form_row label.deep_label {
  margin-right: 10px;
  margin-left: 10px;
}

/* Character count styling */

form .counter{
  display: block;
  text-align: right;
  margin-top: 4px;
  margin-bottom: -5px;
  font-size: 11px;
}

form .warning{
  color: #600;
}  

form .exceeded{
  color: #e00;
}

/* Dual select */

.dualselect .select_arrows {
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
  vertical-align: middle;
  position: relative;
  top: -4px;
}

.dualselect .select_arrows button {
  margin: 4px 0 4px 0;
  padding: 5px 10px 4px 10px;
  border: none;
}

.dualselect .select_arrows button i {
  opacity: 0.6;
  font-size: 14px;
  position: relative;
  top: 1px;
}

/* Uniform elements */

.selector, .radio, .checker { 
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
}

div.selector { 
  background: #ffffff;
  line-height: 28px;
  height: 28px; 
  border: 1px solid #8f8f8f;
  border-right: none;
  box-sizing: content-box; 
  -webkit-box-sizing: content-box; 
  -moz-box-sizing: content-box; 
  -ms-box-sizing: content-box;  
  display: -moz-inline-box; 
  display: inline-block; 
  vertical-align: middle; 
  zoom: 1; 
  cursor: pointer; 
  width: auto;
  max-width: 280px;
  font-size: 12px; 
  position: relative;
}

div.selector span { 
  display: block; 
  text-overflow: ellipsis; 
  white-space: nowrap; 
  color: #333;
  text-decoration: none;
  padding: 0px 25px 0px 8px; 
  margin: -1px 0 0 0; 
  background: url(../img/forms/uniform_select.png) no-repeat 100%; 
  cursor: pointer; 
  font-size: 11px; 
  height: 30px; 
  line-height: 30px; 
  position: relative;
}

div.selector select {
  position: absolute; 
  opacity: 0; 
  filter: alpha(opacity:0); 
  height: 28px; 
  border: none; 
  background: none; 
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 12px; 
  width: 100%;
  top: 0; 
  left: 0;
}

/* Checker */

div.checker {
  position: relative; 
}
  
div.checker, div.checker span, div.checker input {
  width: 14px;
  height: 14px; 
}

div.checker span {
  display: -moz-inline-box;
  display: inline-block;
  zoom: 1;
  text-align: center;
  background: url(../img/forms/uniform_check.png) no-repeat 0 0; 
}

div.checker span.checked {
  background: url(../img/forms/uniform_check.png) no-repeat 100% 0; 
}

div.checker input {
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  border: none;
  background: none;
  display: -moz-inline-box;
  display: inline-block;
  zoom: 1; 
  vertical-align: inherit;
}

/* Radios */

div.radio {
  position: relative; 
}

div.radio, div.radio span, div.radio input {
  width: 14px;
  height: 14px; 
}

div.radio span {
  display: -moz-inline-box;
  display: inline;
  zoom: 1;
  text-align: center;
  background: url(../img/forms/uniform_radio.png) no-repeat 0 0; 
}

div.radio span.checked {
  background: url(../img/forms/uniform_radio.png) no-repeat 100% 0; 
}

div.radio input {
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  border: none;
  background: none;
  display: -moz-inline-box;
  display: inline;
  zoom: 1;
  text-align: center; 
  vertical-align: inherit;
}

/* Checkbox label styling */



/* Draggable */

.sortable .well-header {
  cursor: move;
}

.sortable-box-placeholder {
  background-color: #f5f5f5;
  border: 1px dashed #DDDDDD;
  display: block;
  margin-top: 0px;
  margin-bottom: 24px;
}

.sortable-box-placeholder * {
  visibility:hidden;
}

/* Wizards */

.wizard_buttons {
  padding: 20px 0;
}

.wizard_bar {
  padding: 20px;
}

.wizard_bar .progress {
  margin: 0;
}

.wizard_navigation {
  padding: 20px 20px 0;
}

.wizard_navigation ul {
  margin: 0;
}

.wizard_navigation ul li {
  display: inline-block;
  margin-right: 30px;
}

.wizard_navigation ul li a {
  display: block;
  text-align: center;
  padding: 0;
  color: #333;
  line-height: 32px;
}

.wizard_navigation ul li:hover a,
.wizard_navigation ul li a:hover {
  background: none;
}

.wizard_navigation ul li.active a,
.wizard_navigation ul li.active:hover a,
.wizard_navigation ul li.active a:hover {
  background: none;
  color: #333;
}

.wizard_navigation ul li a span {
  display: block;
  width: 32px;
  height: 32px;
  line-height: 33px;
  float: left;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  background: #dedede;
  margin-right: 7px;
}

.wizard_navigation ul li a span i {
  display: none;
}

.wizard_navigation ul li a span strong {
  display: block;
  font-weight: 400;
}

.wizard_navigation ul li.done a span {
  background: #82ba00;
  color: #fff;
}

.wizard_navigation ul li.done a span i {
  display: block;
  line-height: 32px;
  font-size: 14px;
}

.wizard_navigation ul li.done a span strong {
  display: none;
}

.wizard_navigation ul li.active a span {
  background: #ac193d;
  color: #fff;
}

/* 6. Sidebar
-------------------------------------------------- */

#sidebar {
  width: 314px;
  position: absolute;
  right: 0;
  top: 0;
  background: #fafafa;
  padding: 0 1px;
  min-height: 100%;
  border-left: 1px solid #dedede;
  overflow: auto;
}

#sidebar ul.tabs {
  margin: 0 0 1px 0;
}

#sidebar ul.tabs li {
  list-style: none;
  display: inline-block;
  float: left;
  margin-right: 1px;
}

#sidebar ul.tabs li:last-child {
  margin-right: 0;
}

#sidebar ul.tabs li a {
  display: block;
  min-width: 102px;
  height: 30px;
  border-width: 1px 1px 1px;
  border-style: solid;
  border-color: #dedede;
  white-space: nowrap;
  color: #909090;
  text-align: center;
  line-height: 33px;

  background: #fff;
}

#sidebar ul.tabs li.active a,
#sidebar ul.tabs li a:hover {
  background: #ebebeb;
}

#sidebar ul.tabs li a i {
  font-size: 14px;
}

#sidebar .tabs_container {
  min-height: 100%;
  margin: 0;
  border-width: 1px 1px 0;
  border-style: solid;
  border-color: #dedede;
  background: #fafafa;

  -webkit-box-shadow: inset 0 1px 0 #fff;
  -moz-box-shadow: inset 0 1px 0 #fff;
  box-shadow: inset 0 1px 0 #fff;
}

#sidebar .tabs_container h5 {
  display: block;
  height: 35px;
  padding: 0;
  line-height: 35px;
  border-top: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  margin: 0;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Open Sans', sans-serif;
  color: #999999;

  background: #ffffff;
}

#sidebar .tabs_container .widget_content:first-child h5 {
  border-top: none;
}

#sidebar .tabs_container .widget_content h5 i {
  font-size: 14px;
  margin-right: 8px;
  position: relative;
  top: 1px;
  color: #5f5f5f;
}

#sidebar .tabs_container .sidebar_widget {
  margin: 1px 0;
  border-width: 1px 0 1px;
  border-style: solid;
  border-color: #dedede;
  background: #fafafa;
  padding: 8px;

  -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 #fff;
  -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 0 #fff;
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #fff;
}

#sidebar .tabs_container .sidebar_widget > div:first-child {
  margin-top: 0;
}

.view {
  padding: 1px;
  border: 1px solid #dedede;
  position: relative;
}

.view .image {
  position: relative;
  overflow: hidden;
}

.view .image img {
  position: relative;
  margin-left: 0;
}

.view.view-options .image:hover img {
  position: relative;
}

.view .image .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #777 url(../img/images_zoom.png) no-repeat 50%;
  opacity: 0;
}

.video-play .image .overlay {
  background: #777 url(../img/video_play.png) no-repeat 50%;
}

.view.view-options .image-actions {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 1;
  padding: 3px 7px 7px;
}

.view.view-options:hover .image-actions {
  opacity: 1;
}

.view.view-options .image-actions ul {
  margin: 0 0 6px 0;
  text-align: right;
  display: block;
}

.view.view-options .image-actions ul li {
  display: inline-block;
  list-style: none;
  margin: 4px 0 0 2px;
}

.view.view-options .image-actions ul li a {
  width: 26px;
  height: 26px;
  line-height: 28px;
  background: #dedede;
  display: block;
  text-align: center;
  position: relative;
  padding-left: 1px;
}

.view.view-options .image-actions ul li a:hover {
  background: #cf7d51;
}

.view.view-options .image-actions ul li a:hover {
  text-decoration: none;
}

.view.view-options .image-actions ul li a i {
  font-size: 14px;
  color: #636363;
}

.view.view-options .image-actions ul li a:hover i {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.view .image-actions span {
  display: block;
  text-align: right;
  font-size: 11px;
  color: #858585;
}

.view .image-actions span:first-child {
  margin-top: 4px;
}

#sidebar .tabs_container .sidebar_widget ul.notifications {
  margin: 0;
}

#sidebar .tabs_container .sidebar_widget ul.notifications li {
  display: block;
  height: 40px;
  padding: 1px;
  border-top: 1px solid #dedede;
  list-style: none;
  line-height: 40px;
  color: #5f5f5f;

  background: #ffffff;
}

#sidebar .tabs_container .sidebar_widget ul.notifications li:first-child {
  border-top: none;
}

#sidebar .tabs_container .sidebar_widget ul.notifications li .avatar {
  display: inline-block;
  width: 40px;
  height: 40px;
  float: left;
  margin-right: 8px;
  margin-top: -1px;
}

/* Buttons */

.input_button {
  display: inline-block;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  outline: none;
  text-align: center;
  line-height: 28px;
}

.input_button i {
  font-size: 14px;
  margin-left: 2px;
}

/* Chart tooltip */

.xAxis .tickLabel {
  font-family: Arial, Sans-serif;
  font-size: 11px;
  margin-top: -5px;
}

.chart-tooltip {
  color: #333;
  font-size: 12px;
  min-width: 180px;
}

.chart-tooltip:after, .chart-tooltip:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.chart-tooltip:after {
  border-color: rgba(248, 248, 248, 0);
  border-top-color: #fff;
  border-width: 6px;
  left: 50%;
  margin-left: -6px;
}

.chart-tooltip:before {
  border-color: rgba(210, 210, 210, 0);
  border-top-color: #000;
  border-width: 7px;
  left: 50%;
  margin-left: -7px;
}

.chart-tooltip .date {
  background: #eaeaea; /* Old browsers */
  padding: 8px 10px;
  line-height: normal;
  display: block;
  border-bottom: 1px solid #dedede;
}

.chart-tooltip .clock {
  float: right;
}

.chart-tooltip .percentage {
  display: block;
  float: none !important;
  padding: 6px 10px;
  border-bottom: 1px solid #dedede;
}

.chart-tooltip .visits {
  display: block;
  float: none !important;
  padding: 6px 10px;
}

.chart-tooltip .percentage span,
.chart-tooltip .visits span {
  float: right;
}

/* Tags input */

div.tagsinput { 
  width: 100% !important; 
  min-height: inherit !important;
  overflow-y: auto;
  margin-bottom: -5px;
}

div.tagsinput span.tag { 
  display: block; 
  float: left; 
  padding: 4px 8px; 
  text-decoration: none; 
  background: #585858; 
  color: #fff; 
  margin-right: 5px; 
  margin-bottom:5px;
  font-size: 12px;
  cursor: default;
}

div.tagsinput span.tag a { 
  color: #fff; 
  text-decoration:none; 
  font-size: 11px;  
  opacity: 0.4;
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -ms-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
} 

div.tagsinput span.tag:hover a {
  opacity: 1;
}

div.tagsinput input { 
  width: 80px; 
  margin: 0px; 
  font-family: helvetica; 
  font-size: 12px; 
  border: 1px solid transparent; 
  padding: 5px 1px; 
  background: transparent; 
  color: #000; 
  outline: 0px;  
  margin-right: 5px; 
  margin-bottom: 5px; 
}

div.tagsinput div { 
  display:block; 
  float: left; 
} 

.tags_clear { 
  clear: both; 
  width: 100%; 
  height: 0px; 
}

.not_valid {
  background: #FBD8DB !important; 
  color: #90111A !important;
}

/* Noticifation list */

ul.rows {
  margin: 0;
}

ul.rows li {
  padding: 8px;
  list-style: none;
  border-bottom: 1px solid #dedede;
}

ul.rows li:last-child {
  border-bottom: none;
}

ul.rows li span.icon {
  width: 24px;
  height: 24px;
  color: #fff;
  display: inline-block;
  margin-right: 5px;
  line-height: 24px;
  text-align: center;
}

ul.rows li span.success {
  background: #a7c88c;
}

ul.rows li span.info {
  background: #5db2ff;
}

ul.rows li span.error {
  background: #ac193d;
}

ul.rows li span.warning {
  background: #ff8f32;
}

ul.rows li p {
  display: inline-block;
  font-size: 12px;
  line-height: 24px;
}

ul.user_activity li {
  padding: 8px 12px;
}

ul.user_activity li .avatar {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin-right: 8px;
}

ul.user_activity li span {
  display: inline-block;
  vertical-align: middle;
}

ul.user_activity li .status {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}

ul.user_activity li .label {

}

/* Message system */

.chat_line {
  padding: 15px;
  border-bottom: 1px solid #dedede;
}

.chat_line:after {
  content: "";
  display: block;
  clear: both;
}

.chat_line:last-child {
  border-bottom: none;
}

.chat_line .avatar {
  width: 60px;
  vertical-align: middle;
  display: inline-block;
  float: left;
}

.chat_line.right_side .avatar {
  float: right;
}

.chat_line .avatar img {
  width: 60px;
  height: 60px;
  -webkit-border-radius: 60px;
}

.chat_line .message {
  margin-left: 60px;
  padding: 0 0 0 10px;
}

.chat_line.right_side .message {
  margin-left: 0;
  margin-right: 60px;
  padding: 0 10px 0 0;
}

.type_message {
  padding: 15px;
  position: relative;
}

.type_message .input_button {
  position: absolute;
  top: 15px;
  right: 15px;
}

/* Message center */

.message_center {
  position: relative;
  overflow: hidden;
}

.message_center .tab-list {
  position: absolute;
  top: 0;
  left: 0;
  width: 190px;
  z-index: 99;
}

.message_center .tab-list .create-message {
  padding: 12px;
  border-bottom: 1px solid #dedede;
}


.message_center .tab-list ul {
  margin: 0;
}


.message_center .tab-list ul li {
  list-style: none;
}


.message_center .tab-list li a {
  display: block;
  height: 40px;
  line-height: 40px;
  padding: 0 12px;
  border-bottom: 1px solid #dedede;
  color: #333;
}

.message_center .tab-list li.active a {
  background: #eaeaea;
}

.message_center .tab-list li a i {
  font-size: 14px;
  position: relative;
  top: 1px;
  margin-right: 5px;
  color: #5f5f5f
}

/* List */

.message_center .message_list {
  margin-left: 190px;
  border-left: 1px solid #dedede;
}

.message_center .message_list table tr {
  cursor: pointer;
}

.message_center .message_list span.empty {
  display: block;
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
  margin-top: -5px;
  text-align: center;
}

/* Messages_center_top */

.message_center_top .tab-list {
  padding: 15px;
  border-bottom: 1px solid #dedede;
}

.message_center_top .create-message {
  display: inline-block;
  margin-right: 20px;
}

.message_center_top .tab-list ul {
  display: inline-block;
  margin: 0;
}

.message_center_top .tab-list ul li {
  list-style: none;
  display: inline-block;
}

.message_center_top .empty {
  display: block;
  text-align: center;
  margin-bottom: 30px;
}

/* Tab list */

.tabs-list li a {
  display: block;
  padding: 10px;
  border-bottom: 1px solid #dedede;
}

.tabs-list li.active a,
.tabs-list li:hover a,
.tabs-list li a:hover {
  background: #f1f1f1;
}

/* User profile page */

.user_image {
  margin-bottom: 15px;
}

.friend_list {
  margin-top: 15px;
}

/* Search results */

.search-img {
  width: 113px;
  float: left;
  display: inline-block;
}

.search-content {
  margin-left: 128px;
}

.jobs-search p {
  line-height: 24px;
}

/* Price table */

.price-table {
  padding: 0;
}

.price-table .price {
  font-size: 54px;
  color: #dedede;
  font-weight: 300;
  line-height: normal;
  padding: 10px 0;
  text-align: center;
  margin: 0;
}

.price-table .price:last-child {
  border-bottom: none;
}

.price-table:hover .price {
  color: #333;
}

.price-table .price i {
  font-style: normal;
  font-size: 28px;
  position: relative;
  top: -8px;
}

.price-table .price i:first-child {
  right: -12px;
}

.price-table .price i:last-child {
  left: -12px;
}

.price-table ul {
  margin: 0;
  border-top: 1px solid #dedede;
}

.price-table ul li {
  list-style: none;
  display: block;
  line-height: 32px;
  border-bottom: 1px solid #dedede;
  padding: 0 15px;
}

.price-table ul li i {
  color: #aeaeae;
  margin-right: 5px;
  font-size: 14px;
  position: relative;
  top: 1px;
}

.price-head {
  padding: 10px 0;
}

.price-head h5 {
  line-height: 22px;
  float: none;
}

/* Error pages */

.error_page {
  text-align: center;
  margin-top: 50px;
}

.error_number {
  font-size: 158px;
  letter-spacing: -10px;
  color: #0072c6;
  font-weight: 300;
  display: inline-block;
  text-align: right;
  line-height: 128px;
}

.error_description {
  display: inline-block;
  text-align: left;
  margin-left:40px;
}

.error_description h3 {
  font-weight: 300;
}

.error_description p {
  font-size: 13px;
}

.error_page .buttons {
  float: none;
  display: inline-block;
  margin-top: 30px;
}

/* Login pages */

.dark-login {
  background: #1f1f1f;
}

.blue-login {
  background: #0072c6;
}

.light-login .login-container {
  border: 1px solid #5c5c5c;
}

.login-container {
  width: 290px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -175px;
  padding: 15px 30px;
  background: #fff;
  margin-top: -200px;
}

.login-container.opacity {
  background: rgba(255, 255, 255, 0.35)
}

.login-header {
  padding: 10px 0;
  margin-bottom: 5px;
}

.login-header.blue {
  background: #0072c6;
  text-align: center;
  color: #fff;
  margin-top: 15px;
  margin-bottom: 15px;
}

.login-header.bordered {
  text-align: left;
  border-left: 4px solid #0072c6;
  padding-left: 15px;
  margin-top: 10px;
  margin-bottom: 15px;
}

.login-field {
  margin-bottom: 10px;
  position: relative;
}

.login-field input {
  width: 100%;
}

.login-field i {
  font-size: 14px;
  position: absolute;
  right: 10px;
  top: 34px;
  color: #7b7b7b;
}

.login-button {
  margin-top: 20px;
  margin-bottom: 10px;
  position: relative;
}

.login-button .btn i {
  position: relative;
  top: 0;
}

.login-button .btn-block i {
  position: absolute;
  right: 10px;
  top: 9px;
}

.forgot-password {
  margin: 15px 0 5px;
}

/* Timeline */

.timeline {
  width: 100%;
  position: relative;
  margin-top: 30px;
  padding: 20px 0;
}

.timeline:after {
  content: "";
  display: block;
  width: 4px;
  position: absolute;
  height: 100%;
  left: 25px;
  top: 0;
  background: #0072c6;
}

.timeline-box {
  position: relative;
  z-index: 99;
  margin-bottom: 25px;
}

.timeline-box:after {
  display: block;
  content: "";
  clear: both;
}

.timeline-box .icon {
  margin-left: 9px;
  width: 30px;
  height: 30px;
  line-height: 32px;
  text-align: center;
  background: #fff;
  border: 3px solid #0072c6;
  -webkit-border-radius: 30px;
  -webkit-box-shadow: 0 0 0 2px #fff;
  float: left;
  display: inline-block;
}

.timeline-box .icon i {
  font-size: 14px;
  color: #979797;
}

.timeline-box:hover .icon i {
  color: #0072c6;
}

.timeline-content {
  margin-left: 65px;
  border: 1px solid #8f8f8f;
  padding: 15px;
  position: relative;
}

.timeline-content:after, .timeline-content:before {
  right: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.timeline-content:after {
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 9px;
  top: 8px;
}

.timeline-content:before {
  border-color: rgba(222, 222, 222, 0);
  border-right-color: #575757;
  border-width: 10px;
  top: 7px;
}

.timeline-content .user-info {
  margin-bottom: 15px;
}

.timeline-content .user-info .avatar {
  width: 70px;
  display: inline-block;
  margin-right: 15px;
}

.timeline-content .user-info h5 {
  display: inline-block;
}

.timeline-box ul.options {
  margin: 0;
  position: absolute;
  right: 15px;
  top: 13px;
}

.timeline-box ul li {
  display: inline-block;
  margin-left: 5px;
}

.timeline-box ul li a {
  color: #979797;
}

.timeline-box ul li a:hover {
  color: #0072c6;
}

.timeline-box ul li a i {
  font-size: 14px;
}

/* Charts and statistics */

.legendColorBox div > div {
  width: 4px;
  height: 4px;
}

.legend > div {
  padding: 8px 10px;
}

.legend > table {
  margin: 8px 10px 0 0;
}

.legendLabel span {
  margin: 0 0 0 5px;
}

/* Junk code - only for demo */

#colorSelector {
  position: relative;
  width: 36px;
  height: 36px;
  background: url(../js/library/colorpicker/images/select.png);
}

#colorSelector div {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 30px;
  height: 30px;
  background: url(../js/library/colorpicker/images/select.png) center;
}

/* Footer */

footer {
  position: relative;
  z-index: 99;
  height: 40px;
  padding: 0 0 0 10px;
  background: #fff;
  border-top: 1px solid #dedede;
  background: #f8f8f8; /* Old browsers */
}

footer span {
  color: #333;
  font-size: 12px;
  line-height: 40px;
  display: block;
  float: left;
}

footer ul {
  margin: 0;
  float: right;
}

footer ul li {
  float: left;
  list-style: none;
}

footer ul li a {
  display: block;
  height: 40px;
  line-height: 40px;
  padding: 0 12px;
  border-left: 1px solid #dedede;
  background: #fff;
}

/* Responsive
-------------------------------------------------- */

/* Desktop large
------------------------- */
@media (min-width: 1400px) {
  #main_navigation > div {
    display: block !important;
  }

  #top_navigation {
    display: block !important;
  }
}

@media (min-width: 1200px) and (max-width: 1400px) {
  #content .inner_content .widgets_area .row-fluid > div {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .description {
    font-size: 13px !important;
  }

  #main_navigation > div {
    display: block !important;
  }

  #top_navigation {
    display: block !important;
  }
}

/* Desktop
------------------------- */
@media (min-width: 980px) and (max-width: 1199px) {
  body {
    padding: 0;
  }

  header a.logo_image {
    display: none;
  }

  header ul.quick_header_actions {
    display: none;
  }

  .bars_vertical:first-child {
    display: none;
  }

  .first_label.first_label {
    display: none;
  }

  .status-widgets {
    margin-top: -8px;
  }

  .status-widgets .widget {
    margin-top: 8px;
  }

  #sidebar {
    display: none;
  }

  #main_navigation > div {
    display: block !important;
  }

  #content {
    margin-right: 0 !important;
  }

  #content .inner_content .widgets_area .row-fluid > div {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  #top_navigation {
    display: block !important;
  }
}

/* Tablet to desktop
------------------------- */
@media (min-width: 768px) and (max-width: 979px) {
  body {
    padding: 0;
  }

  header ul.quick_header_actions {
    display: none;
  }

  .current_page span.quote {
    display: none;
  }

  .status-widgets {
    margin-top: -8px;
  }

  .status-widgets .widget {
    margin-top: 8px;
  }

  #sidebar {
    display: none;
  }

  #content {
    margin-right: 0 !important;
  }

  #content .row-fluid > div {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  #main_navigation > div {
    display: block !important;
  }

  .chzn-container {
    min-width: 100%;
    margin-bottom: 8px;
  }

  .user_bar > div > div > span {
    margin-bottom: 8px;
  }

  .user_bar > div > div > div > input {
    max-width: 100% !important;
    width: 100% !important;
  }

  .report-widgets {
    display: none;
  }

  #top_navigation {
    display: block !important;
  }
}

/* Tablet
------------------------- */
@media (max-width: 767px) {
  body {
    padding: 0;
  }

  header ul.quick_header_actions {
    display: none;
  }

  .bars_vertical:first-child {
    display: none;
  }

  .first_label.first_label {
    display: none;
  }

  .status-widgets {
    margin-top: -8px;
  }

  .status-widgets .widget {
    margin-top: 8px;
  }

  #sidebar {
    display: none;
  }

  .responsive_menu {
    display: block !important;
  }

  #main_navigation {
    display: block;
    position: relative;
    width: inherit;
    margin-top: 44px;
    margin-bottom: 1px;
  }

  #main_navigation > div {
    display: none;
    overflow: hidden;
  }

  #content {
    margin: 0 !important;
    padding-top: 0 !important;
  }

  .hidden-768 {
    display: none !important;
  }

  .chzn-container {
    min-width: 100%;
    margin-bottom: 8px;
  }

  .user_bar > div > div > span {
    margin-bottom: 8px;
  }

  #sparkline:first-child {
    display: none;
  }

  .user_bar > div > div > div > input {
    max-width: 100% !important;
    width: 100% !important;
  }

  .top_navigation_only,
  .fixed_container {
    padding-top: 45px;
  }

  #top_navigation {
    height: inherit;
    display: none;
  }

  #top_navigation > ul {
    margin: 0;
  }

  #top_navigation > ul > li {
    display: block;
  }

  #top_navigation > ul > li > a {
    border-bottom: 1px solid #dedede;
  }

  #top_navigation > ul > li:last-child > a {
    border-bottom: none;
  }

  footer {
    margin-left: 0 !important;
  }
}

/* Landscape phones
------------------------- */
@media (max-width: 480px) {
  body {
    padding: 0;
  }

  header a.logo_image {
    width: 24px;
    padding: 0;
  }

  header ul.quick_header_actions {
    display: none;
  }

  .bars_vertical:first-child {
    display: none;
  }

  .first_label.first_label {
    display: none;
  }

  .status-widgets {
    margin-top: -8px;
  }

  .status-widgets .widget {
    margin-top: 8px;
  }

  #sidebar {
    display: none;
  }

  .responsive_menu {
    display: block !important;
  }

  #main_navigation {
    display: block;
    position: relative;
    width: inherit;
    margin-top: 44px;
    margin-bottom: 1px;
  }

  #main_navigation > div {
    display: none;
    overflow: hidden;
  }

  #content {
    margin: 0 !important;
    padding-top: 0 !important;
  }

  #top_navigation {
    display: none;
  }

  .tab-container ul li {
    width: 25%;
  }

  .tab-container ul li a {
    text-align: center;
  }

  .tab-container ul li:last-child a {
    border-right: none;
  }

  .chzn-container {
    min-width: 100%;
    margin-bottom: 8px;
  }

  .user_bar > div > div > span {
    margin-bottom: 8px;
  }

  .bars_vertical:first-child {
    margin: 0;
  }

  .tabs-content {
    padding: 20px 20px 20px;
  }

  /* Messages center */

  .hidden-480 {
    display: none !important;
  }

  .table_options {
    display: none;
  }

  .table td.table-fixed-medium {
    width: inherit;
  }

  .message_center .tab-list {
    display: none;
  }

  .message_center .message_list {
    margin-left: 0;
  }

  footer {
    display: none;
  }

}

/* http://jintoples.blogspot.com */

2. Bootsrap

 Anda dapat mengunduh bootstrap dari website resminya di sini. pada kali ini saya menggunakan Bootstrap v2.3.2 atau anda dapat menuliskan script di bawah ini kemudian simpan dengan nama : bootstrap.css

/*!
 * Bootstrap v2.3.2
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

audio:not([controls]) {
  display: none;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

a:hover,
a:active {
  outline: 0;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  width: auto;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

#map_canvas img,
#google-map img {
  max-width: inherit !important;
}

button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}

button,
input {
  *overflow: visible;
  line-height: normal;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}

label,
select,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
  cursor: pointer;
}

input[type="search"] {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

@media print {
  * {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page  {
    margin: 0.5cm;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}

body {
  margin: 0;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 20px;
  color: #333;
  background-color: #ffffff;
}

a {
  color: #0088cc;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #005580;
  text-decoration: none;
}

.img-rounded {
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.img-polaroid {
  padding: 4px;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.img-circle {
  -webkit-border-radius: 500px;
     -moz-border-radius: 500px;
          border-radius: 500px;
}

.row {
  margin-left: -20px;
  *zoom: 1;
}

.row:before,
.row:after {
  display: table;
  line-height: 0;
  content: "";
}

.row:after {
  clear: both;
}

[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 20px;
}

.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
  width: 940px;
}

.span12 {
  width: 940px;
}

.span11 {
  width: 860px;
}

.span10 {
  width: 780px;
}

.span9 {
  width: 700px;
}

.span8 {
  width: 620px;
}

.span7 {
  width: 540px;
}

.span6 {
  width: 460px;
}

.span5 {
  width: 380px;
}

.span4 {
  width: 300px;
}

.span3 {
  width: 220px;
}

.span2 {
  width: 140px;
}

.span1 {
  width: 60px;
}

.offset12 {
  margin-left: 980px;
}

.offset11 {
  margin-left: 900px;
}

.offset10 {
  margin-left: 820px;
}

.offset9 {
  margin-left: 740px;
}

.offset8 {
  margin-left: 660px;
}

.offset7 {
  margin-left: 580px;
}

.offset6 {
  margin-left: 500px;
}

.offset5 {
  margin-left: 420px;
}

.offset4 {
  margin-left: 340px;
}

.offset3 {
  margin-left: 260px;
}

.offset2 {
  margin-left: 180px;
}

.offset1 {
  margin-left: 100px;
}

.row-fluid {
  width: 100%;
  *zoom: 1;
}

.row-fluid:before,
.row-fluid:after {
  display: table;
  line-height: 0;
  content: "";
}

.row-fluid:after {
  clear: both;
}

.row-fluid [class*="span"] {
  display: block;
  float: left;
  width: 100%;
  min-height: 30px;
  margin-left: 2.127659574468085%;
  *margin-left: 2.074468085106383%;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.row-fluid [class*="span"]:first-child {
  margin-left: 0;
}

.row-fluid .controls-row [class*="span"] + [class*="span"] {
  margin-left: 2.127659574468085%;
}

.row-fluid .span12 {
  width: 100%;
  *width: 99.94680851063829%;
}

.row-fluid .span11 {
  width: 91.48936170212765%;
  *width: 91.43617021276594%;
}

.row-fluid .span10 {
  width: 82.97872340425532%;
  *width: 82.92553191489361%;
}

.row-fluid .span9 {
  width: 74.46808510638297%;
  *width: 74.41489361702126%;
}

.row-fluid .span8 {
  width: 65.95744680851064%;
  *width: 65.90425531914893%;
}

.row-fluid .span7 {
  width: 57.44680851063829%;
  *width: 57.39361702127659%;
}

.row-fluid .span6 {
  width: 48.93617021276595%;
  *width: 48.88297872340425%;
}

.row-fluid .span5 {
  width: 40.42553191489362%;
  *width: 40.37234042553192%;
}

.row-fluid .span4 {
  width: 31.914893617021278%;
  *width: 31.861702127659576%;
}

.row-fluid .span3 {
  width: 23.404255319148934%;
  *width: 23.351063829787233%;
}

.row-fluid .span2 {
  width: 14.893617021276595%;
  *width: 14.840425531914894%;
}

.row-fluid .span1 {
  width: 6.382978723404255%;
  *width: 6.329787234042553%;
}

.row-fluid .offset12 {
  margin-left: 104.25531914893617%;
  *margin-left: 104.14893617021275%;
}

.row-fluid .offset12:first-child {
  margin-left: 102.12765957446808%;
  *margin-left: 102.02127659574467%;
}

.row-fluid .offset11 {
  margin-left: 95.74468085106382%;
  *margin-left: 95.6382978723404%;
}

.row-fluid .offset11:first-child {
  margin-left: 93.61702127659574%;
  *margin-left: 93.51063829787232%;
}

.row-fluid .offset10 {
  margin-left: 87.23404255319149%;
  *margin-left: 87.12765957446807%;
}

.row-fluid .offset10:first-child {
  margin-left: 85.1063829787234%;
  *margin-left: 84.99999999999999%;
}

.row-fluid .offset9 {
  margin-left: 78.72340425531914%;
  *margin-left: 78.61702127659572%;
}

.row-fluid .offset9:first-child {
  margin-left: 76.59574468085106%;
  *margin-left: 76.48936170212764%;
}

.row-fluid .offset8 {
  margin-left: 70.2127659574468%;
  *margin-left: 70.10638297872339%;
}

.row-fluid .offset8:first-child {
  margin-left: 68.08510638297872%;
  *margin-left: 67.9787234042553%;
}

.row-fluid .offset7 {
  margin-left: 61.70212765957446%;
  *margin-left: 61.59574468085106%;
}

.row-fluid .offset7:first-child {
  margin-left: 59.574468085106375%;
  *margin-left: 59.46808510638297%;
}

.row-fluid .offset6 {
  margin-left: 53.191489361702125%;
  *margin-left: 53.085106382978715%;
}

.row-fluid .offset6:first-child {
  margin-left: 51.063829787234035%;
  *margin-left: 50.95744680851063%;
}

.row-fluid .offset5 {
  margin-left: 44.68085106382979%;
  *margin-left: 44.57446808510638%;
}

.row-fluid .offset5:first-child {
  margin-left: 42.5531914893617%;
  *margin-left: 42.4468085106383%;
}

.row-fluid .offset4 {
  margin-left: 36.170212765957444%;
  *margin-left: 36.06382978723405%;
}

.row-fluid .offset4:first-child {
  margin-left: 34.04255319148936%;
  *margin-left: 33.93617021276596%;
}

.row-fluid .offset3 {
  margin-left: 27.659574468085104%;
  *margin-left: 27.5531914893617%;
}

.row-fluid .offset3:first-child {
  margin-left: 25.53191489361702%;
  *margin-left: 25.425531914893618%;
}

.row-fluid .offset2 {
  margin-left: 19.148936170212764%;
  *margin-left: 19.04255319148936%;
}

.row-fluid .offset2:first-child {
  margin-left: 17.02127659574468%;
  *margin-left: 16.914893617021278%;
}

.row-fluid .offset1 {
  margin-left: 10.638297872340425%;
  *margin-left: 10.53191489361702%;
}

.row-fluid .offset1:first-child {
  margin-left: 8.51063829787234%;
  *margin-left: 8.404255319148938%;
}

[class*="span"].hide,
.row-fluid [class*="span"].hide {
  display: none;
}

[class*="span"].pull-right,
.row-fluid [class*="span"].pull-right {
  float: right;
}

.container {
  margin-right: auto;
  margin-left: auto;
  *zoom: 1;
}

.container:before,
.container:after {
  display: table;
  line-height: 0;
  content: "";
}

.container:after {
  clear: both;
}

.container-fluid {
  padding-right: 20px;
  padding-left: 20px;
  *zoom: 1;
}

.container-fluid:before,
.container-fluid:after {
  display: table;
  line-height: 0;
  content: "";
}

.container-fluid:after {
  clear: both;
}

p {
  margin: 0 0 10px;
}

p:last-child {
  margin: 0;
}

.lead {
  margin-bottom: 20px;
  font-size: 21px;
  font-weight: 200;
  line-height: 30px;
}

small {
  font-size: 85%;
}

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

cite {
  font-style: normal;
}

.muted {
  color: #999999;
}

a.muted:hover,
a.muted:focus {
  color: #808080;
}

.text-warning {
  color: #c09853;
}

a.text-warning:hover,
a.text-warning:focus {
  color: #a47e3c;
}

.text-error {
  color: #b94a48;
}

a.text-error:hover,
a.text-error:focus {
  color: #953b39;
}

.text-info {
  color: #3a87ad;
}

a.text-info:hover,
a.text-info:focus {
  color: #2d6987;
}

.text-success {
  color: #468847;
}

a.text-success:hover,
a.text-success:focus {
  color: #356635;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 10px 0;
  font-family: inherit;
  font-weight: 300;
  line-height: 20px;
  color: inherit;
  text-rendering: optimizelegibility;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  margin-top: 0;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
  margin-bottom: 0;
}

h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
  font-weight: normal;
  line-height: 1;
  color: #999999;
}

h1,
h2,
h3 {
  line-height: 40px;
}

h1 {
  font-size:38.5px
}

h2 {
  font-size:31.5px
}

h3 {
  font-size:24.5px
}

h4 {
  font-size:17.5px
}

h5 {
  font-size:14px
}

h6 {
  font-size:11.9px
}

h1 small {
  font-size: 24.5px;
}

h2 small {
  font-size: 17.5px;
}

h3 small {
  font-size: 14px;
}

h4 small {
  font-size: 14px;
}

.page-header {
  padding-bottom: 9px;
  margin: 20px 0 30px;
  border-bottom: 1px solid #eeeeee;
}

ul,
ol {
  padding: 0;
  margin: 0 0 0 25px;
}

ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}

li {
  line-height: 22px;
}

ul.unstyled,
ol.unstyled {
  margin-left: 0;
  list-style: none;
}

ul.inline,
ol.inline {
  margin-left: 0;
  list-style: none;
}

ul.inline > li,
ol.inline > li {
  display: inline-block;
  *display: inline;
  padding-right: 5px;
  padding-left: 5px;
  *zoom: 1;
}

dl {
  margin-bottom: 20px;
}

dt,
dd {
  line-height: 20px;
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 10px;
}

.dl-horizontal {
  *zoom: 1;
}

.dl-horizontal:before,
.dl-horizontal:after {
  display: table;
  line-height: 0;
  content: "";
}

.dl-horizontal:after {
  clear: both;
}

.dl-horizontal dt {
  float: left;
  width: 160px;
  overflow: hidden;
  clear: left;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #ffffff;
}

abbr[title],
abbr[data-original-title] {
  cursor: help;
  border-bottom: 1px dotted #999999;
}

abbr.initialism {
  font-size: 90%;
  text-transform: uppercase;
}

blockquote {
  padding: 0 0 0 15px;
  margin: 0 0 20px;
  border-left: 5px solid #eeeeee;
}

blockquote p {
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
}

blockquote small {
  display: block;
  line-height: 20px;
  color: #999999;
}

blockquote small:before {
  content: '\2014 \00A0';
}

blockquote.pull-right {
  float: right;
  padding-right: 15px;
  padding-left: 0;
  border-right: 5px solid #eeeeee;
  border-left: 0;
}

blockquote.pull-right p,
blockquote.pull-right small {
  text-align: right;
}

blockquote.pull-right small:before {
  content: '';
}

blockquote.pull-right small:after {
  content: '\00A0 \2014';
}

q:before,
q:after,
blockquote:before,
blockquote:after {
  content: "";
}

address {
  display: block;
  margin-bottom: 20px;
  font-style: normal;
  line-height: 20px;
}

code,
pre {
  padding: 0 3px 2px;
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  font-size: 12px;
  color: #333333;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

code {
  padding: 2px 4px;
  color: #d14;
  white-space: nowrap;
  background-color: #f7f7f9;
  border: 1px solid #e1e1e8;
}

pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 20px;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre;
  white-space: pre-wrap;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

pre.prettyprint {
  margin-bottom: 20px;
}

pre code {
  padding: 0;
  color: inherit;
  white-space: pre;
  white-space: pre-wrap;
  background-color: transparent;
  border: 0;
}

.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll;
}

form {
  margin: 0;
}

form + form {
  margin: 0 0 20px 0;
}

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

legend { 
  display: block; 
  width: 100%; 
  padding: 0; 
  font-size: 14px; 
  line-height: 30px; 
  color: #5F5F5F; 
  border: 0; 
  border-bottom: 1px solid #dedede; 
  font-weight: 600; 
}

legend small { 
  font-size: 15px; 
  color: #999999; 
}

label,
button {
  font-size: 12px;
  font-weight: normal;
  line-height: 20px;
}

label { 
  margin-bottom: 4px; 
  display: inline-block; 
}

label.form-button {
  margin-right: 14px;
}

select, 
textarea, 
input[type="text"], 
input[type="password"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="date"], 
input[type="month"], 
input[type="time"], 
input[type="week"], 
input[type="number"], 
input[type="email"], 
input[type="url"], 
input[type="search"], 
input[type="tel"], 
input[type="color"], 
.uneditable-input  { 
  display: inline-block; 
  padding: 8px 7px 8px 7px; 
  font-size: 12px; 
  color: #5F5F5F; 
  font-family: Arial, Helvetica, sans-serif;
}

select:focus, 
textarea:focus, 
input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="datetime"]:focus, 
input[type="datetime-local"]:focus, 
input[type="date"]:focus, 
input[type="month"]:focus, 
input[type="time"]:focus, 
input[type="week"]:focus, 
input[type="number"]:focus, 
input[type="email"]:focus, 
input[type="url"]:focus, 
input[type="search"]:focus, 
input[type="tel"]:focus, 
input[type="color"]:focus, 
.uneditable-input  { 
  outline: none;
  border: 1px solid #5c5c5c;
}

input[type="search"] { 
  -webkit-border-radius: 0; 
  -moz-border-radius: 0; 
  -webkit-appearance: none; 
}

input[disabled], 
select[disabled], 
textarea[disabled], 
input[readonly], 
select[readonly], 
textarea[readonly] { 
  cursor: not-allowed; 
  background-color: #f5f5f5; 
  color: #999999; 
}

input[type=submit][disabled], input[type=button][disabled] { 
  color: #fff; 
}

input[type="radio"][disabled], 
input[type="checkbox"][disabled], 
input[type="radio"][readonly], 
input[type="checkbox"][readonly] { 
  background-color: transparent; 
}

textarea { 
  max-width: 100%;
  -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
          box-sizing: border-box; 
      -ms-box-sizing: border-box; 
}

select { 
  width: 220px; 
  height: 30px; 
  padding: 5px; 
  border: 1px solid #d2d2d2; 
  background-color: #ffffff; 
}

.dual_select select {
  width: 40%;
}

select:focus { 
  box-shadow: none; 
  -webkit-box-shadow: none; 
  -moz-box-shadow: none; 
}

select[multiple] {
  height: auto;
}

textarea {
  min-height: 75px;
}

textarea, 
input[type="text"], 
input[type="password"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="date"], 
input[type="month"], 
input[type="time"], 
input[type="week"], 
input[type="number"], 
input[type="email"], 
input[type="url"], 
input[type="search"], 
input[type="tel"], 
input[type="color"], 
.uneditable-input  { 
  border: 1px solid #8f8f8f; 
  background: #ffffff; 
}

input[type="text"], 
input[type="password"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="date"], 
input[type="month"], 
input[type="time"], 
input[type="week"], 
input[type="number"], 
input[type="email"], 
input[type="url"], 
input[type="search"], 
input[type="tel"], 
input[type="color"] { 
  height: 30px; 
  -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
          box-sizing: border-box; 
      -ms-box-sizing: border-box; 
}

input[class*="span"], 
select[class*="span"], 
textarea[class*="span"], 
.uneditable-input[class*="span"], 
.row-fluid input[class*="span"], 
.row-fluid select[class*="span"], 
.row-fluid textarea[class*="span"], 
.row-fluid .uneditable-input[class*="span"] { 
  float: none; 
  margin-left: 0; 
}

.input-append input[class*="span"], 
.input-append .uneditable-input[class*="span"], 
.input-prepend input[class*="span"], 
.input-prepend .uneditable-input[class*="span"], 
.row-fluid input[class*="span"], 
.row-fluid select[class*="span"], 
.row-fluid textarea[class*="span"], 
.row-fluid .uneditable-input[class*="span"], 
.row-fluid .input-prepend [class*="span"], 
.row-fluid .input-append [class*="span"] { 
  display: inline-block; 
}

input[type="radio"], input[type="checkbox"] { 
  *margin-top: 0; 
  margin-top: 1px \9; 
  line-height: normal; 
  cursor: pointer; 
}

input[type="file"], 
input[type="image"], 
input[type="submit"], 
input[type="reset"], 
input[type="button"], 
input[type="radio"], 
input[type="checkbox"] { 
  width: auto;
  text-decoration: none;
  float: none !important;
}

.uneditable-input, .uneditable-textarea { 
  color: #999999; 
  background-color: #fcfcfc; 
  border-color: #dedede; 
  cursor: not-allowed; 
}

.uneditable-input { 
  overflow: hidden; 
  white-space: nowrap; 
}

.uneditable-textarea { 
  width: auto; 
  height: auto; 
}

input:-moz-placeholder, 
textarea:-moz-placeholder { 
  color: #999999; 
  text-decoration: none;
}

input:-ms-input-placeholder, 
textarea:-ms-input-placeholder { 
  color: #999999;
  text-decoration: none;
}

input::-webkit-input-placeholder, 
textarea::-webkit-input-placeholder { 
  color: #999999;
  text-decoration: none;
}

label.radio,
label.checkbox {
  min-height: 20px;
  margin-right: 15px;
  margin-top: 5px;
}

label.radio input[type="radio"],
label.checkbox input[type="checkbox"] {
  float: left;
}

label.radio .radio {
  margin-top: -4px !important;
  margin-right: 3px !important;
}

label.checkbox .checker {
  margin-top: -2px !important;
  margin-right: 3px !important;
}

.controls > .radio:first-child,
.controls > .checkbox:first-child {
  padding-top: 5px;
}

.radio.inline,
.checkbox.inline {
  display: inline-block;
  padding-top: 5px;
  margin-bottom: 0;
  vertical-align: middle;
}

.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
  margin-left: 10px;
}

.input-mini {
  width: 60px;
}

.input-small {
  width: 90px;
}

.input-medium {
  width: 150px;
}

.input-large {
  width: 210px;
}

.input-xlarge {
  width: 270px;
}

.input-xxlarge {
  width: 530px;
}

input[class*="span"],
select[class*="span"],
textarea[class*="span"],
.uneditable-input[class*="span"],
.row-fluid input[class*="span"],
.row-fluid select[class*="span"],
.row-fluid textarea[class*="span"],
.row-fluid .uneditable-input[class*="span"] {
  float: none;
  margin-left: 0;
}

.input-append input[class*="span"],
.input-append .uneditable-input[class*="span"],
.input-prepend input[class*="span"],
.input-prepend .uneditable-input[class*="span"],
.row-fluid input[class*="span"],
.row-fluid select[class*="span"],
.row-fluid textarea[class*="span"],
.row-fluid .uneditable-input[class*="span"],
.row-fluid .input-prepend [class*="span"],
.row-fluid .input-append [class*="span"] {
  display: inline-block;
}

input,
textarea,
.uneditable-input {
  margin-left: 0;
}

.controls-row [class*="span"] + [class*="span"] {
  margin-left: 20px;
}

input.span12,
textarea.span12,
.uneditable-input.span12 {
  width: 926px;
}

input.span11,
textarea.span11,
.uneditable-input.span11 {
  width: 846px;
}

input.span10,
textarea.span10,
.uneditable-input.span10 {
  width: 766px;
}

input.span9,
textarea.span9,
.uneditable-input.span9 {
  width: 686px;
}

input.span8,
textarea.span8,
.uneditable-input.span8 {
  width: 606px;
}

input.span7,
textarea.span7,
.uneditable-input.span7 {
  width: 526px;
}

input.span6,
textarea.span6,
.uneditable-input.span6 {
  width: 446px;
}

input.span5,
textarea.span5,
.uneditable-input.span5 {
  width: 366px;
}

input.span4,
textarea.span4,
.uneditable-input.span4 {
  width: 286px;
}

input.span3,
textarea.span3,
.uneditable-input.span3 {
  width: 206px;
}

input.span2,
textarea.span2,
.uneditable-input.span2 {
  width: 126px;
}

input.span1,
textarea.span1,
.uneditable-input.span1 {
  width: 46px;
}

.controls-row {
  *zoom: 1;
}

.controls-row:before,
.controls-row:after {
  display: table;
  line-height: 0;
  content: "";
}

.controls-row:after {
  clear: both;
}

.controls-row [class*="span"],
.row-fluid .controls-row [class*="span"] {
  float: left;
}

.controls-row .checkbox[class*="span"],
.controls-row .radio[class*="span"] {
  padding-top: 5px;
}

input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
  cursor: default;
  background-color: #fff;
}

input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
  background-color: transparent;
}

.control-group.warning .control-label,
.control-group.warning .help-block,
.control-group.warning .help-inline {
  color: #c09853;
}

.control-group.warning .checkbox,
.control-group.warning .radio,
.control-group.warning input,
.control-group.warning select,
.control-group.warning textarea {
  color: #c09853;
}

.control-group.warning input,
.control-group.warning select,
.control-group.warning textarea,
input.warning  {
  border-color: #c09853;
}

.control-group.warning input:focus,
.control-group.warning select:focus,
.control-group.warning textarea:focus,
input.warning:focus {
  border-color: #c09853;
  background: #fff;
}

.control-group.warning .input-prepend .add-on,
.control-group.warning .input-append .add-on {
  color: #c09853;
  background-color: #fcf8e3;
  border-color: #c09853;
}

.control-group.error .control-label,
.control-group.error .help-block,
.control-group.error .help-inline {
  color: #b94a48;
}

.control-group.error .checkbox,
.control-group.error .radio,
.control-group.error input,
.control-group.error select,
.control-group.error textarea {
  color: #b94a48;
}

.control-group.error input,
.control-group.error select,
.control-group.error textarea,
input.error {
  border-color: #b94a48;
}

.control-group.error input:focus,
.control-group.error select:focus,
.control-group.error textarea:focus,
input.error:focus {
  border-color: #b94a48;
}

.control-group.error .input-prepend .add-on,
.control-group.error .input-append .add-on {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #b94a48;
}

.control-group.success .control-label,
.control-group.success .help-block,
.control-group.success .help-inline {
  color: #468847;
}

.control-group.success .checkbox,
.control-group.success .radio,
.control-group.success input,
.control-group.success select,
.control-group.success textarea {
  color: #468847;
}

.control-group.success input,
.control-group.success select,
.control-group.success textarea,
input.valid {
  border-color: #468847;
}

.control-group.success input:focus,
.control-group.success select:focus,
.control-group.success textarea:focus {
  border-color: #468847;
}

.control-group.success .input-prepend .add-on,
.control-group.success .input-append .add-on {
  color: #468847;
  background-color: #dff0d8;
  border-color: #468847;
}

.control-group.info .control-label,
.control-group.info .help-block,
.control-group.info .help-inline {
  color: #3a87ad;
}

.control-group.info .checkbox,
.control-group.info .radio,
.control-group.info input,
.control-group.info select,
.control-group.info textarea {
  color: #3a87ad;
}

.control-group.info input,
.control-group.info select,
.control-group.info textarea {
  border-color: #3a87ad;
}

.control-group.info input:focus,
.control-group.info select:focus,
.control-group.info textarea:focus {
  border-color: #3a87ad;
}

.control-group.info .input-prepend .add-on,
.control-group.info .input-append .add-on {
  color: #3a87ad;
  background-color: #d9edf7;
  border-color: #3a87ad;
}

input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
  color: #b94a48;
  border-color: #ee5f5b;
}

input:focus:invalid:focus,
textarea:focus:invalid:focus,
select:focus:invalid:focus {
  border-color: #e9322d;
}

.form-actions {
  padding: 19px 20px 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border-top: 1px solid #e5e5e5;
  *zoom: 1;
}

.form-actions:before,
.form-actions:after {
  display: table;
  line-height: 0;
  content: "";
}

.form-actions:after {
  clear: both;
}

.help-block,
.help-inline {
  color: #595959;
}

.help-block {
  display: block;
  margin-bottom: 10px;
}

.help-inline {
  display: inline-block;
  *display: inline;
  padding-left: 5px;
  vertical-align: middle;
  *zoom: 1;
}

.input-append,
.input-prepend {
  display: inline-block;
  font-size: 0;
  white-space: nowrap;
  vertical-align: middle;
}

.input-append input,
.input-prepend input,
.input-append select,
.input-prepend select,
.input-append .uneditable-input,
.input-prepend .uneditable-input,
.input-append .dropdown-menu,
.input-prepend .dropdown-menu,
.input-append .popover,
.input-prepend .popover {
  font-size: 12px;
}

.input-append input,
.input-prepend input,
.input-append select,
.input-prepend select,
.input-append .uneditable-input,
.input-prepend .uneditable-input {
  position: relative;
  margin-bottom: 0;
  *margin-left: 0;
  vertical-align: top;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.input-append input:focus,
.input-prepend input:focus,
.input-append select:focus,
.input-prepend select:focus,
.input-append .uneditable-input:focus,
.input-prepend .uneditable-input:focus {
  z-index: 2;
}

.input-append .add-on,
.input-prepend .add-on {
  display: inline-block;
  width: auto;
  height: 20px;
  min-width: 16px;
  padding: 4px 5px;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  text-align: center;
  text-shadow: 0 1px 0 #ffffff;
  background-color: #eeeeee;
  border: 1px solid #8f8f8f;
}

.input-append .add-on,
.input-prepend .add-on,
.input-append .btn,
.input-prepend .btn,
.input-append .btn-group > .dropdown-toggle,
.input-prepend .btn-group > .dropdown-toggle {
  vertical-align: top;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.input-append .active,
.input-prepend .active {
  background-color: #a9dba9;
  border-color: #46a546;
}

.input-prepend .add-on,
.input-prepend .btn {
  margin-right: -1px;
}

.input-prepend .add-on:first-child,
.input-prepend .btn:first-child {
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.input-append input,
.input-append select,
.input-append .uneditable-input {
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.input-append input + .btn-group .btn:last-child,
.input-append select + .btn-group .btn:last-child,
.input-append .uneditable-input + .btn-group .btn:last-child {
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.input-append .add-on,
.input-append .btn,
.input-append .btn-group {
  margin-left: -1px;
}

.input-append .add-on:last-child,
.input-append .btn:last-child,
.input-append .btn-group:last-child > .dropdown-toggle {
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.input-prepend.input-append input,
.input-prepend.input-append select,
.input-prepend.input-append .uneditable-input {
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.input-prepend.input-append input + .btn-group .btn,
.input-prepend.input-append select + .btn-group .btn,
.input-prepend.input-append .uneditable-input + .btn-group .btn {
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.input-prepend.input-append .add-on:first-child,
.input-prepend.input-append .btn:first-child {
  margin-right: -1px;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.input-prepend.input-append .add-on:last-child,
.input-prepend.input-append .btn:last-child {
  margin-left: -1px;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.input-prepend.input-append .btn-group:first-child {
  margin-left: 0;
}

/* Allow for input prepend/append in search forms */

.form-search .input-append .search-query,
.form-search .input-prepend .search-query {
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.form-search input,
.form-inline input,
.form-horizontal input,
.form-search textarea,
.form-inline textarea,
.form-horizontal textarea,
.form-search select,
.form-inline select,
.form-horizontal select,
.form-search .help-inline,
.form-inline .help-inline,
.form-horizontal .help-inline,
.form-search .uneditable-input,
.form-inline .uneditable-input,
.form-horizontal .uneditable-input,
.form-search .input-prepend,
.form-inline .input-prepend,
.form-horizontal .input-prepend,
.form-search .input-append,
.form-inline .input-append,
.form-horizontal .input-append {
  display: inline-block;
  *display: inline;
  margin-bottom: 0;
  vertical-align: middle;
  *zoom: 1;
}

.form-search .hide,
.form-inline .hide,
.form-horizontal .hide {
  display: none;
}

.form-search label,
.form-inline label,
.form-search .btn-group,
.form-inline .btn-group {
  display: inline-block;
}

.form-search .input-append,
.form-inline .input-append,
.form-search .input-prepend,
.form-inline .input-prepend {
  margin-bottom: 0;
}

.form-search .radio,
.form-search .checkbox,
.form-inline .radio,
.form-inline .checkbox {
  padding-left: 0;
  margin-bottom: 0;
  vertical-align: middle;
}

.form-search .radio input[type="radio"],
.form-search .checkbox input[type="checkbox"],
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
  float: left;
  margin-right: 3px;
  margin-left: 0;
}

.control-group {
  margin-bottom: 10px;
}

legend + .control-group {
  margin-top: 20px;
  -webkit-margin-top-collapse: separate;
}

.form-horizontal .control-group {
  margin-bottom: 20px;
  *zoom: 1;
}

.form-horizontal .control-group:before,
.form-horizontal .control-group:after {
  display: table;
  line-height: 0;
  content: "";
}

.form-horizontal .control-group:after {
  clear: both;
}

.form-horizontal .control-label {
  float: left;
  width: 160px;
  padding-top: 5px;
  text-align: right;
}

.form-horizontal .controls {
  *display: inline-block;
  *padding-left: 20px;
  margin-left: 180px;
  *margin-left: 0;
}

.form-horizontal .controls:first-child {
  *padding-left: 180px;
}

.form-horizontal .help-block {
  margin-bottom: 0;
}

.form-horizontal input + .help-block,
.form-horizontal select + .help-block,
.form-horizontal textarea + .help-block,
.form-horizontal .uneditable-input + .help-block,
.form-horizontal .input-prepend + .help-block,
.form-horizontal .input-append + .help-block {
  margin-top: 10px;
}

.form-horizontal .form-actions {
  padding-left: 180px;
}

table {
  max-width: 100%;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
}

.no_padding .table_options {
  padding: 12px;
}

.top_options {
  margin-bottom: 10px;
}

.bottom_options {
  margin-top: 15px;
}

.table_options:after {
  content: "";
  display: block;
  clear: both;
}

.table_options > div > span {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: 1px;
  margin-right: 4px;
}

.table {
  width: 100%;
}

.table.multimedia img {
  width: 30px;
}

.table th,
.table td {
  padding: 8px;
  line-height: 20px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #dedede;
  vertical-align: middle;
}

.table th {
  font-weight: 600;
  font-size: 13px;
  vertical-align: middle;
}

.table th.table-check,
.table td.table-check {
  width: 15px;
}

.table th.table-icon,
.table td.table-icon {
  width: 20px;
}

.table th.table-icon i,
.table td.table-icon i {
  font-size: 13px;
  color: #aaaaaa;
  position: relative;
  top: 1px;
  cursor: pointer;
}

.table td.table-icon.active i {
  color: #f8a31f;
}

.table td.table-fixed-medium {
  width: 200px;
}

.table tr.active td,
.table tr.active {
  background: #deecfa !important;
}

.table caption + thead tr:first-child th,
.table caption + thead tr:first-child td,
.table colgroup + thead tr:first-child th,
.table colgroup + thead tr:first-child td,
.table thead:first-child tr:first-child th,
.table thead:first-child tr:first-child td {
  border-top: 0;
}

.table tbody + tbody {
  border-top: 2px solid #dedede;
}

.table .table {
  background-color: #ffffff;
}

.table-condensed th,
.table-condensed td {
  padding: 4px 5px;
}

.table-bordered {
  border: 1px solid #dedede;
  border-collapse: separate;
  *border-collapse: collapse;
  border-left: 0;
}

.table-bordered th,
.table-bordered td {
  border-left: 1px solid #dedede;
}

.table-bordered caption + thead tr:first-child th,
.table-bordered caption + tbody tr:first-child th,
.table-bordered caption + tbody tr:first-child td,
.table-bordered colgroup + thead tr:first-child th,
.table-bordered colgroup + tbody tr:first-child th,
.table-bordered colgroup + tbody tr:first-child td,
.table-bordered thead:first-child tr:first-child th,
.table-bordered tbody:first-child tr:first-child th,
.table-bordered tbody:first-child tr:first-child td {
  border-top: 0;
}

.table-bordered thead:first-child tr:first-child > th:first-child,
.table-bordered tbody:first-child tr:first-child > td:first-child,
.table-bordered tbody:first-child tr:first-child > th:first-child {
  -webkit-border-top-left-radius: 0;
          border-top-left-radius: 0;
  -moz-border-radius-topleft: 0;
}

.table-bordered thead:first-child tr:first-child > th:last-child,
.table-bordered tbody:first-child tr:first-child > td:last-child,
.table-bordered tbody:first-child tr:first-child > th:last-child {
  -webkit-border-top-right-radius: 0;
          border-top-right-radius: 0;
  -moz-border-radius-topright: 0;
}

.table-bordered thead:last-child tr:last-child > th:first-child,
.table-bordered tbody:last-child tr:last-child > td:first-child,
.table-bordered tbody:last-child tr:last-child > th:first-child,
.table-bordered tfoot:last-child tr:last-child > td:first-child,
.table-bordered tfoot:last-child tr:last-child > th:first-child {
  -webkit-border-bottom-left-radius: 0;
          border-bottom-left-radius: 0;
  -moz-border-radius-bottomleft: 0;
}

.table-bordered thead:last-child tr:last-child > th:last-child,
.table-bordered tbody:last-child tr:last-child > td:last-child,
.table-bordered tbody:last-child tr:last-child > th:last-child,
.table-bordered tfoot:last-child tr:last-child > td:last-child,
.table-bordered tfoot:last-child tr:last-child > th:last-child {
  -webkit-border-bottom-right-radius: 0;
          border-bottom-right-radius: 0;
  -moz-border-radius-bottomright: 0;
}

.table-bordered tfoot + tbody:last-child tr:last-child td:first-child {
  -webkit-border-bottom-left-radius: 0;
          border-bottom-left-radius: 0;
  -moz-border-radius-bottomleft: 0;
}

.table-bordered tfoot + tbody:last-child tr:last-child td:last-child {
  -webkit-border-bottom-right-radius: 0;
          border-bottom-right-radius: 0;
  -moz-border-radius-bottomright: 0;
}

.table-bordered caption + thead tr:first-child th:first-child,
.table-bordered caption + tbody tr:first-child td:first-child,
.table-bordered colgroup + thead tr:first-child th:first-child,
.table-bordered colgroup + tbody tr:first-child td:first-child {
  -webkit-border-top-left-radius: 4px;
          border-top-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
}

.table-bordered caption + thead tr:first-child th:last-child,
.table-bordered caption + tbody tr:first-child td:last-child,
.table-bordered colgroup + thead tr:first-child th:last-child,
.table-bordered colgroup + tbody tr:first-child td:last-child {
  -webkit-border-top-right-radius: 0;
          border-top-right-radius: 0;
  -moz-border-radius-topright: 0;
}

.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
}

.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
  background-color: #f5f5f5;
}

table td[class*="span"],
table th[class*="span"],
.row-fluid table td[class*="span"],
.row-fluid table th[class*="span"] {
  display: table-cell;
  float: none;
  margin-left: 0;
}

.table td.span1,
.table th.span1 {
  float: none;
  width: 44px;
  margin-left: 0;
}

.table td.span2,
.table th.span2 {
  float: none;
  width: 124px;
  margin-left: 0;
}

.table td.span3,
.table th.span3 {
  float: none;
  width: 204px;
  margin-left: 0;
}

.table td.span4,
.table th.span4 {
  float: none;
  width: 284px;
  margin-left: 0;
}

.table td.span5,
.table th.span5 {
  float: none;
  width: 364px;
  margin-left: 0;
}

.table td.span6,
.table th.span6 {
  float: none;
  width: 444px;
  margin-left: 0;
}

.table td.span7,
.table th.span7 {
  float: none;
  width: 524px;
  margin-left: 0;
}

.table td.span8,
.table th.span8 {
  float: none;
  width: 604px;
  margin-left: 0;
}

.table td.span9,
.table th.span9 {
  float: none;
  width: 684px;
  margin-left: 0;
}

.table td.span10,
.table th.span10 {
  float: none;
  width: 764px;
  margin-left: 0;
}

.table td.span11,
.table th.span11 {
  float: none;
  width: 844px;
  margin-left: 0;
}

.table td.span12,
.table th.span12 {
  float: none;
  width: 924px;
  margin-left: 0;
}

.table tbody tr.success > td {
  background-color: #dff0d8;
}

.table tbody tr.error > td {
  background-color: #f2dede;
}

.table tbody tr.warning > td {
  background-color: #fcf8e3;
}

.table tbody tr.info > td {
  background-color: #d9edf7;
}

.table-hover tbody tr.success:hover > td {
  background-color: #d0e9c6;
}

.table-hover tbody tr.error:hover > td {
  background-color: #ebcccc;
}

.table-hover tbody tr.warning:hover > td {
  background-color: #faf2cc;
}

.table-hover tbody tr.info:hover > td {
  background-color: #c4e3f3;
}

[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("../img/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}

/* White icons with optional class, or on hover/focus/active states of certain elements */

.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:focus > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > li > a:focus > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:focus > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"],
.dropdown-submenu:focus > a > [class*=" icon-"] {
  background-image: url("../img/glyphicons-halflings-white.png");
}

.icon-glass {
  background-position: 0      0;
}

.icon-music {
  background-position: -24px 0;
}

.icon-search {
  background-position: -48px 0;
}

.icon-envelope {
  background-position: -72px 0;
}

.icon-heart {
  background-position: -96px 0;
}

.icon-star {
  background-position: -120px 0;
}

.icon-star-empty {
  background-position: -144px 0;
}

.icon-user {
  background-position: -168px 0;
}

.icon-film {
  background-position: -192px 0;
}

.icon-th-large {
  background-position: -216px 0;
}

.icon-th {
  background-position: -240px 0;
}

.icon-th-list {
  background-position: -264px 0;
}

.icon-ok {
  background-position: -288px 0;
}

.icon-remove {
  background-position: -312px 0;
}

.icon-zoom-in {
  background-position: -336px 0;
}

.icon-zoom-out {
  background-position: -360px 0;
}

.icon-off {
  background-position: -384px 0;
}

.icon-signal {
  background-position: -408px 0;
}

.icon-cog {
  background-position: -432px 0;
}

.icon-trash {
  background-position: -456px 0;
}

.icon-home {
  background-position: 0 -24px;
}

.icon-file {
  background-position: -24px -24px;
}

.icon-time {
  background-position: -48px -24px;
}

.icon-road {
  background-position: -72px -24px;
}

.icon-download-alt {
  background-position: -96px -24px;
}

.icon-download {
  background-position: -120px -24px;
}

.icon-upload {
  background-position: -144px -24px;
}

.icon-inbox {
  background-position: -168px -24px;
}

.icon-play-circle {
  background-position: -192px -24px;
}

.icon-repeat {
  background-position: -216px -24px;
}

.icon-refresh {
  background-position: -240px -24px;
}

.icon-list-alt {
  background-position: -264px -24px;
}

.icon-lock {
  background-position: -287px -24px;
}

.icon-flag {
  background-position: -312px -24px;
}

.icon-headphones {
  background-position: -336px -24px;
}

.icon-volume-off {
  background-position: -360px -24px;
}

.icon-volume-down {
  background-position: -384px -24px;
}

.icon-volume-up {
  background-position: -408px -24px;
}

.icon-qrcode {
  background-position: -432px -24px;
}

.icon-barcode {
  background-position: -456px -24px;
}

.icon-tag {
  background-position: 0 -48px;
}

.icon-tags {
  background-position: -25px -48px;
}

.icon-book {
  background-position: -48px -48px;
}

.icon-bookmark {
  background-position: -72px -48px;
}

.icon-print {
  background-position: -96px -48px;
}

.icon-camera {
  background-position: -120px -48px;
}

.icon-font {
  background-position: -144px -48px;
}

.icon-bold {
  background-position: -167px -48px;
}

.icon-italic {
  background-position: -192px -48px;
}

.icon-text-height {
  background-position: -216px -48px;
}

.icon-text-width {
  background-position: -240px -48px;
}

.icon-align-left {
  background-position: -264px -48px;
}

.icon-align-center {
  background-position: -288px -48px;
}

.icon-align-right {
  background-position: -312px -48px;
}

.icon-align-justify {
  background-position: -336px -48px;
}

.icon-list {
  background-position: -360px -48px;
}

.icon-indent-left {
  background-position: -384px -48px;
}

.icon-indent-right {
  background-position: -408px -48px;
}

.icon-facetime-video {
  background-position: -432px -48px;
}

.icon-picture {
  background-position: -456px -48px;
}

.icon-pencil {
  background-position: 0 -72px;
}

.icon-map-marker {
  background-position: -24px -72px;
}

.icon-adjust {
  background-position: -48px -72px;
}

.icon-tint {
  background-position: -72px -72px;
}

.icon-edit {
  background-position: -96px -72px;
}

.icon-share {
  background-position: -120px -72px;
}

.icon-check {
  background-position: -144px -72px;
}

.icon-move {
  background-position: -168px -72px;
}

.icon-step-backward {
  background-position: -192px -72px;
}

.icon-fast-backward {
  background-position: -216px -72px;
}

.icon-backward {
  background-position: -240px -72px;
}

.icon-play {
  background-position: -264px -72px;
}

.icon-pause {
  background-position: -288px -72px;
}

.icon-stop {
  background-position: -312px -72px;
}

.icon-forward {
  background-position: -336px -72px;
}

.icon-fast-forward {
  background-position: -360px -72px;
}

.icon-step-forward {
  background-position: -384px -72px;
}

.icon-eject {
  background-position: -408px -72px;
}

.icon-chevron-left {
  background-position: -432px -72px;
}

.icon-chevron-right {
  background-position: -456px -72px;
}

.icon-plus-sign {
  background-position: 0 -96px;
}

.icon-minus-sign {
  background-position: -24px -96px;
}

.icon-remove-sign {
  background-position: -48px -96px;
}

.icon-ok-sign {
  background-position: -72px -96px;
}

.icon-question-sign {
  background-position: -96px -96px;
}

.icon-info-sign {
  background-position: -120px -96px;
}

.icon-screenshot {
  background-position: -144px -96px;
}

.icon-remove-circle {
  background-position: -168px -96px;
}

.icon-ok-circle {
  background-position: -192px -96px;
}

.icon-ban-circle {
  background-position: -216px -96px;
}

.icon-arrow-left {
  background-position: -240px -96px;
}

.icon-arrow-right {
  background-position: -264px -96px;
}

.icon-arrow-up {
  background-position: -289px -96px;
}

.icon-arrow-down {
  background-position: -312px -96px;
}

.icon-share-alt {
  background-position: -336px -96px;
}

.icon-resize-full {
  background-position: -360px -96px;
}

.icon-resize-small {
  background-position: -384px -96px;
}

.icon-plus {
  background-position: -408px -96px;
}

.icon-minus {
  background-position: -433px -96px;
}

.icon-asterisk {
  background-position: -456px -96px;
}

.icon-exclamation-sign {
  background-position: 0 -120px;
}

.icon-gift {
  background-position: -24px -120px;
}

.icon-leaf {
  background-position: -48px -120px;
}

.icon-fire {
  background-position: -72px -120px;
}

.icon-eye-open {
  background-position: -96px -120px;
}

.icon-eye-close {
  background-position: -120px -120px;
}

.icon-warning-sign {
  background-position: -144px -120px;
}

.icon-plane {
  background-position: -168px -120px;
}

.icon-calendar {
  background-position: -192px -120px;
}

.icon-random {
  width: 16px;
  background-position: -216px -120px;
}

.icon-comment {
  background-position: -240px -120px;
}

.icon-magnet {
  background-position: -264px -120px;
}

.icon-chevron-up {
  background-position: -288px -120px;
}

.icon-chevron-down {
  background-position: -313px -119px;
}

.icon-retweet {
  background-position: -336px -120px;
}

.icon-shopping-cart {
  background-position: -360px -120px;
}

.icon-folder-close {
  width: 16px;
  background-position: -384px -120px;
}

.icon-folder-open {
  width: 16px;
  background-position: -408px -120px;
}

.icon-resize-vertical {
  background-position: -432px -119px;
}

.icon-resize-horizontal {
  background-position: -456px -118px;
}

.icon-hdd {
  background-position: 0 -144px;
}

.icon-bullhorn {
  background-position: -24px -144px;
}

.icon-bell {
  background-position: -48px -144px;
}

.icon-certificate {
  background-position: -72px -144px;
}

.icon-thumbs-up {
  background-position: -96px -144px;
}

.icon-thumbs-down {
  background-position: -120px -144px;
}

.icon-hand-right {
  background-position: -144px -144px;
}

.icon-hand-left {
  background-position: -168px -144px;
}

.icon-hand-up {
  background-position: -192px -144px;
}

.icon-hand-down {
  background-position: -216px -144px;
}

.icon-circle-arrow-right {
  background-position: -240px -144px;
}

.icon-circle-arrow-left {
  background-position: -264px -144px;
}

.icon-circle-arrow-up {
  background-position: -288px -144px;
}

.icon-circle-arrow-down {
  background-position: -312px -144px;
}

.icon-globe {
  background-position: -336px -144px;
}

.icon-wrench {
  background-position: -360px -144px;
}

.icon-tasks {
  background-position: -384px -144px;
}

.icon-filter {
  background-position: -408px -144px;
}

.icon-briefcase {
  background-position: -432px -144px;
}

.icon-fullscreen {
  background-position: -456px -144px;
}

.dropup,
.dropdown {
  position: relative;
}

.dropdown-toggle {
  *margin-bottom: -3px;
}

.dropdown-toggle:active,
.open .dropdown-toggle {
  outline: 0;
}

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: top;
  border-top: 4px solid #000000;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
}

.dropdown .caret {
  margin-top: 8px;
  margin-left: 2px;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 200px;
  padding: 6px 0;
  margin: 2px 0 0 1px;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #333;
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}

.dropdown-menu .divider {
  *width: 100%;
  height: 1px;
  margin: 9px 1px;
  *margin: -5px 0 5px;
  overflow: hidden;
  background-color: #e5e5e5;
  border-bottom: 1px solid #ffffff;
}

.dropdown-menu > li > a {
  line-height: 32px;
  display: block;
  height: 32px;
  padding: 0 7px;
  list-style: none;
  text-align: left;
  font-size: 11px;
  color: #333;
  clear: both;
  white-space: nowrap;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
  text-decoration: none;
  background: #e7e7e7;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #ffffff;
  text-decoration: none;
  background: #e7e7e7;
}

.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  color: #999999;
}

.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  text-decoration: none;
  cursor: default;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.open {
  *z-index: 1000;
}

.open > .dropdown-menu {
  display: block;
}

.dropdown-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 990;
}

.pull-right > .dropdown-menu {
  right: 0;
  left: auto;
}

.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
  border-top: 0;
  border-bottom: 4px solid #000000;
  content: "";
}

.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: 1px;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

.dropup .dropdown-submenu > .dropdown-menu {
  top: auto;
  bottom: 0;
  margin-top: 0;
  margin-bottom: -2px;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.dropdown-submenu > a:after {
  display: block;
  float: right;
  width: 0;
  height: 0;
  margin-top: 5px;
  margin-right: -10px;
  border-color: transparent;
  border-left-color: #cccccc;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  content: " ";
}

.dropdown-submenu:hover > a:after {
  border-left-color: #ffffff;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.dropdown .dropdown-menu .nav-header {
  padding-right: 20px;
  padding-left: 20px;
}

.typeahead {
  z-index: 1051;
  margin-top: 2px;
}

.well {
  position: relative;
  min-height: 20px;
  padding: 0px;
  margin-bottom: 20px;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.well blockquote {
  border-color: #ddd;
  border-color: rgba(0, 0, 0, 0.15);
}

.well-large {
  padding: 24px;
}

.well-small {
  padding: 0;
}

.well-header {
  min-height: 40px;
  background: #0072c6;
  padding: 0;
}

.well.blue .well-header {
  background: #0072c6;
}

.well.blue .well-content {
  border-top: 1px solid #0072c6;
  border-left: 1px solid #0072c6;
  border-right: 1px solid #0072c6;
  border-bottom: 1px solid #0072c6;
}

.well.light_blue .well-header {
  background: #5db2ff;
}

.well.light_blue .well-content {
  border-top: 1px solid #5db2ff;
  border-left: 1px solid #5db2ff;
  border-right: 1px solid #5db2ff;
  border-bottom: 1px solid #5db2ff;
}

.well.grey .well-header {
  background: #585858;
}

.well.grey .well-content {
  border-top: 1px solid #585858;
  border-left: 1px solid #585858;
  border-right: 1px solid #585858;
  border-bottom: 1px solid #585858;
}

.well.pink .well-header {
  background: #dc4fad;
}

.well.pink .well-content {
  border-top: 1px solid #dc4fad;
  border-left: 1px solid #dc4fad;
  border-right: 1px solid #dc4fad;
  border-bottom: 1px solid #dc4fad;
}

.well.red .well-header {
  background: #ac193d;
}

.well.red .well-content {
  border-top: 1px solid #ac193d;
  border-left: 1px solid #ac193d;
  border-right: 1px solid #ac193d;
  border-bottom: 1px solid #ac193d;
}

.well.orange .well-header {
  background: #d24726;
}

.well.orange .well-content {
  border-top: 1px solid #d24726;
  border-left: 1px solid #d24726;
  border-right: 1px solid #d24726;
  border-bottom: 1px solid #d24726;
}

.well.yellow .well-header {
  background: #ff8f32;
}

.well.yellow .well-content {
  border-top: 1px solid #ff8f32;
  border-left: 1px solid #ff8f32;
  border-right: 1px solid #ff8f32;
  border-bottom: 1px solid #ff8f32;
}

.well.dark_green .well-header {
  background: #82ba00;
}

.well.dark_green .well-content {
  border-top: 1px solid #82ba00;
  border-left: 1px solid #82ba00;
  border-right: 1px solid #82ba00;
  border-bottom: 1px solid #82ba00;
}

.well.green .well-header {
  background: #a7c88c;
}

.well.green .well-content {
  border-top: 1px solid #a7c88c;
  border-left: 1px solid #a7c88c;
  border-right: 1px solid #a7c88c;
  border-bottom: 1px solid #a7c88c;
}

.well.turq .well-header {
  background: #03b3b2;
}

.well.turq .well-content {
  border-top: 1px solid #03b3b2;
  border-left: 1px solid #03b3b2;
  border-right: 1px solid #03b3b2;
  border-bottom: 1px solid #03b3b2;
}

.well.dark_turq .well-header {
  background: #008299;
}

.well.dark_turq .well-content {
  border-top: 1px solid #008299;
  border-left: 1px solid #008299;
  border-right: 1px solid #008299;
  border-bottom: 1px solid #008299;
}

.well.purple .well-header {
  background: #4617b4;
}

.well.purple .well-content {
  border-top: 1px solid #4617b4;
  border-left: 1px solid #4617b4;
  border-right: 1px solid #4617b4;
  border-bottom: 1px solid #4617b4;
}

.well.violet .well-header {
  background: #8c0095;
}

.well.violet .well-content {
  border-top: 1px solid #8c0095;
  border-left: 1px solid #8c0095;
  border-right: 1px solid #8c0095;
  border-bottom: 1px solid #8c0095;
}

.well.dark_blue .well-header {
  background: #001940;
}

.well.dark_blue .well-content {
  border-top: 1px solid #001940;
  border-left: 1px solid #001940;
  border-right: 1px solid #001940;
  border-bottom: 1px solid #001940;
}

.well.dark_red .well-header {
  background: #570000;
}

.well.dark_red .well-content {
  border-top: 1px solid #570000;
  border-left: 1px solid #570000;
  border-right: 1px solid #570000;
  border-bottom: 1px solid #570000;
}

.well.brown .well-header {
  background: #380000;
}

.well.brown .well-content {
  border-top: 1px solid #380000;
  border-left: 1px solid #380000;
  border-right: 1px solid #380000;
  border-bottom: 1px solid #380000;
}

.well.black .well-header {
  background: #000000;
}

.well.black .well-content {
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

.well-header h5 {
  min-height: 40px;
  line-height: 40px;
  color: #fff;
  font-size: 13px;
  display: block;
  margin: 0 0 0 15px;
  float: left;
}

.well-header h5.center {
  margin-left: 0;
  text-align: center;
}

.well-header .button {
  margin-top: 7px;
}

.well-content {
  padding: 15px;
  background: #fff;
  border-top: 1px solid #dedede;
  border-left: 1px solid #dedede;
  border-right: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
}

.well-small .well-content {
  padding: 9px;
}

.well-head {
  margin-bottom: 10px;
}

.well-content.well-head {
  padding: 0;
  border: 1px solid #dedede;
}

.well-content.well-head h5 {
  padding: 7px 9px;
  background: #f1f1f1;
  display: block;
  font-size: 13px;
}

.well-content > .no-search {
  margin-bottom: 20px;
}

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
     -moz-transition: opacity 0.15s linear;
       -o-transition: opacity 0.15s linear;
          transition: opacity 0.15s linear;
}

.fade.in {
  opacity: 1;
}

.collapse {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.35s ease;
     -moz-transition: height 0.35s ease;
       -o-transition: height 0.35s ease;
          transition: height 0.35s ease;
}

.collapse.in {
  height: auto;
}

.close {
  float: right;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  color: #333;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.5;
  filter: alpha(opacity=20);
}

.close:hover,
.close:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.8;
  filter: alpha(opacity=40);
}

button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}

.dismiss {
  font-weight: 300;
  border: none;
  outline: none;
  background: none;
  font-size: 14px;
  opacity: 0.5;
}

.dismiss:hover {
  opacity: 0.8;
} 

.btn {
  display: inline-block;
  *display: inline;
  padding: 5px 10px;
  margin-bottom: 0;
  *margin-left: .3em;
  font-size: 12px;
  line-height: 20px;
  color: #333;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-color: #e5e5e5;
  background-repeat: repeat-x;
  border: none !important;
  outline: none !important;
}

.btn [class^="icon-"] {
  font-size: 14px;
  position: relative;
  top: 1px;
  margin-right: 2px;
  margin-left: 2px;
}

.btn.disabled,
.btn[disabled] {
  cursor: default;
  background-image: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
}

.btn-xlarge {
  padding: 9px 14px 8px 14px;
  font-size: 14px;
}

.btn-xlarge [class^="icon-"],
.btn-xlarge [class*=" icon-"] {
  margin-top: 4px;
  position: relative;
  top: 0px;
}

.btn-large {
  padding: 7px 12px 6px 12px;
  font-size: 13px;
}

.btn-large [class^="icon-"],
.btn-large [class*=" icon-"] {
  margin-top: 4px;
}

.btn-small {
  padding: 3px 8px 2px 8px;
  font-size: 11px;
}

.btn-small [class^="icon-"],
.btn-small [class*=" icon-"] {
  margin-top: 0;
}

.btn-mini [class^="icon-"],
.btn-mini [class*=" icon-"] {
  margin-top: -1px;
}

.btn-mini {
  padding: 0 6px;
  font-size: 10.5px;
}

.btn-block {
  display: block;
  text-align: center;
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.btn-block + .btn-block {
  margin-top: 5px;
}

input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%;
}

.btn.blue {
  background: #0072c6;
  color: #fff;
}

.btn.blue:hover {
  background: #0065af;
  color: #fff;
}

.btn.light_blue {
  background: #5db2ff;
  color: #fff;
}

.btn.light_blue:hover {
  background: #339eff;
  color: #fff;
}

.btn.grey {
  background: #585858;
  color: #fff;
}

.btn.grey:hover {
  background: #424242;
  color: #fff;
}

.btn.pink {
  background: #dc4fad;
  color: #fff;
}

.btn.pink:hover {
  background: #c33e97;
  color: #fff;
}

.btn.red {
  background: #ac193d;
  color: #fff;
}

.btn.red:hover {
  background: #8f1432;
  color: #fff;
}

.btn.orange {
  background: #d24726;
  color: #fff;
}

.btn.orange:hover {
  background: #bf3f20;
  color: #fff;
}

.btn.yellow {
  background: #ff8f32;
  color: #fff;
}

.btn.yellow:hover {
  background: #e47a23;
  color: #fff;
}

.btn.dark_green {
  background: #82ba00;
  color: #fff;
}

.btn.dark_green:hover {
  background: #679301;
  color: #fff;
}

.btn.green {
  background: #a7c88c;
  color: #fff;
}

.btn.green:hover {
  background: #8db26f;
  color: #fff;
}

.btn.turq {
  background: #03b3b2;
  color: #fff;
}

.btn.turq:hover {
  background: #039a99;
}

.btn.turq_dark {
  background: #008299;
  color: #fff;
}

.btn.turq_dark:hover {
  background: #00697c;
  color: #fff;
}

.btn.purple {
  background: #4617b4;
  color: #fff;
}

.btn.purple:hover {
  background: #391295;
  color: #fff;
}

.btn.violet {
  background: #8c0095;
  color: #fff;
}

.btn.violet:hover {
  background: #700077;
  color: #fff;
}

.btn.dark_blue {
  background: #001940;
  color: #fff;
}

.btn.dark_blue:hover {
  background: #00112c;
  color: #fff;
}

.btn.dark_red {
  background: #570000;
  color: #fff;
}

.btn.dark_red:hover {
  background: #460000;
  color: #fff;
}

.btn.brown {
  background: #380000;
  color: #fff;
}

.btn.brown:hover {
  background: #260000;
  color: #fff;
}

.btn.black {
  background: #000000;
  color: #fff;
}

button.btn,
input[type="submit"].btn {
  *padding-top: 3px;
  *padding-bottom: 3px;
  outline: none;
}

button.btn::-moz-focus-inner,
input[type="submit"].btn::-moz-focus-inner {
  padding: 0;
  border: 0;
  outline: none;
}

button.btn.btn-large,
input[type="submit"].btn.btn-large {
  *padding-top: 7px;
  *padding-bottom: 7px;
}

button.btn.btn-small,
input[type="submit"].btn.btn-small {
  *padding-top: 3px;
  *padding-bottom: 3px;
}

button.btn.btn-mini,
input[type="submit"].btn.btn-mini {
  *padding-top: 1px;
  *padding-bottom: 1px;
}

.btn-link,
.btn-link:active,
.btn-link[disabled] {
  background-color: transparent;
  background-image: none;
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
}

.btn-link {
  color: #0088cc;
  cursor: pointer;
  border-color: transparent;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.btn-link:hover,
.btn-link:focus {
  color: #005580;
  text-decoration: underline;
  background-color: transparent;
}

.btn-link[disabled]:hover,
.btn-link[disabled]:focus {
  color: #333333;
  text-decoration: none;
}

.btn-group {
  position: relative;
  display: inline-block;
  *display: inline;
  *margin-left: .3em;
  font-size: 0;
  white-space: nowrap;
  vertical-align: middle;
  *zoom: 1;
}

.btn-group:first-child {
  *margin-left: 0;
}

.btn-group + .btn-group {
  margin-left: 5px;
}

.btn-toolbar {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 0;
}

.btn-toolbar > .btn + .btn,
.btn-toolbar > .btn-group + .btn,
.btn-toolbar > .btn + .btn-group {
  margin-left: 5px;
}

.btn-group > .btn {
  position: relative;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.btn-group > .btn + .btn {
  margin-left: -1px;
}

.btn-group > .btn,
.btn-group > .dropdown-menu,
.btn-group > .popover {
  font-size: 12px;
}

.btn-group > .btn-mini {
  font-size: 10.5px;
}

.btn-group > .btn-small {
  font-size: 11.9px;
}

.btn-group > .btn-large {
  font-size: 17.5px;
}

.btn-group > .btn:first-child {
  margin-left: 0;
  -webkit-border-bottom-left-radius: 0;
          border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 0;
          border-top-left-radius: 0;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 0;
}

.btn-group > .btn:last-child,
.btn-group > .dropdown-toggle {
  -webkit-border-top-right-radius: 0;
          border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
          border-bottom-right-radius: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 0;
}

.btn-group > .btn.large:first-child {
  margin-left: 0;
  -webkit-border-bottom-left-radius: 0;
          border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 0;
          border-top-left-radius: 0;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 0;
}

.btn-group > .btn.large:last-child,
.btn-group > .large.dropdown-toggle {
  -webkit-border-top-right-radius: 0;
          border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
          border-bottom-right-radius: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 0;
}

.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active {
  z-index: 2;
}

.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
  outline: 0;
}

.btn-group > .btn-mini + .dropdown-toggle {
  *padding-top: 2px;
  padding-right: 5px;
  *padding-bottom: 2px;
  padding-left: 5px;
}

.btn-group > .btn-small + .dropdown-toggle {
  *padding-top: 5px;
  *padding-bottom: 4px;
}

.btn-group > .btn-large + .dropdown-toggle {
  *padding-top: 7px;
  padding-right: 12px;
  *padding-bottom: 7px;
  padding-left: 12px;
}

.btn .caret {
  margin-top: 8px;
  margin-left: 8px;
}

.btn-large .caret {
  margin-top: 6px;
}

.btn-large .caret {
  border-top-width: 5px;
  border-right-width: 5px;
  border-left-width: 5px;
}

.btn-mini .caret,
.btn-small .caret {
  margin-top: 8px;
}

.dropup .btn-large .caret {
  border-bottom-width: 5px;
}

.btn.blue .caret,
.btn.light_blue .caret,
.btn.grey .caret,
.btn.dark_grey .caret,
.btn.pink .caret,
.btn.red .caret,
.btn.orange .caret,
.btn.yellow .caret,
.btn.green .caret,
.btn.dark_green .caret,
.btn.turq .caret,
.btn.turq_dark .caret,
.btn.purple .caret,
.btn.violet .caret,
.btn.dark_blue .caret,
.btn.dark_red .caret,
.btn.brown .caret,
.btn.black .caret {
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
}

.btn-group-vertical {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */

  *zoom: 1;
}

.btn-group-vertical > .btn {
  display: block;
  float: none;
  max-width: 100%;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.btn-group-vertical > .btn + .btn {
  margin-top: -1px;
  margin-left: 0;
}

.btn-group-vertical > .btn:first-child {
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.btn-group-vertical > .btn:last-child {
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.btn-group-vertical > .btn-large:first-child {
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.btn-group-vertical > .btn-large:last-child {
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.alert {
  padding: 8px 35px 8px 14px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #f6edba;
  border: 1px solid #9e703c;
  margin-bottom: 8px;
  position: relative;
}

#content > .alert {
  margin-bottom: 1px;
  margin-top: 1px;
}

.well .alert {
  margin-bottom: 15px;
}

#sidebar .alert:last-child {
  margin-bottom: 0;
}

.alert,
.alert h4 {
  color: #9e703c;
}

.alert h4 {
  margin: 0;
}

.alert .close {
  position: relative;
  right: -20px;
  line-height: 20px;
  top: 2px;
}

.alert-success {
  color: #468847;
  background-color: #dff0d8;
  border-color: #46886a;
}

.alert-success h4 {
  color: #468847;
}

.alert-danger,
.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #b94a48;
}

.alert-danger h4,
.alert-error h4 {
  color: #b94a48;
}

.alert-info {
  color: #3a87ad;
  background-color: #d9edf7;
  border-color: #3a87ad;
}

.alert-info h4 {
  color: #3a87ad;
}

.alert-block {
  padding-top: 14px;
  padding-bottom: 14px;
}

.alert-block > p,
.alert-block > ul {
  margin-bottom: 0;
}

.alert-block p + p {
  margin-top: 5px;
}

.nav {
  margin-bottom: 0;
  margin-left: 0;
  list-style: none;
}

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

.nav > li > a > i {
  font-size: 14px;
  position: relative;
  top: 1px;
  margin-right: 4px;
}

.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #e7e7e7;
}

.nav > li > a > img {
  max-width: none;
}

.nav > .pull-right {
  float: right;
}

.nav-header {
  display: block;
  padding: 3px 15px;
  font-size: 11px;
  font-weight: bold;
  line-height: 20px;
  color: #999999;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

.nav li + .nav-header {
  margin-top: 9px;
}

.nav-list {
  padding-right: 15px;
  padding-left: 15px;
  margin-bottom: 0;
}

.nav-list > li > a,
.nav-list .nav-header {
  margin-right: -15px;
  margin-left: -15px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.nav-list > li > a {
  padding: 3px 15px;
}

.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  background-color: #0088cc;
}

.nav-list [class^="icon-"],
.nav-list [class*=" icon-"] {
  margin-right: 2px;
}

.nav-list .divider {
  *width: 100%;
  height: 1px;
  margin: 9px 1px;
  *margin: -5px 0 5px;
  overflow: hidden;
  background-color: #e5e5e5;
  border-bottom: 1px solid #ffffff;
}

.nav-tabs,
.nav-pills {
  *zoom: 1;
}

.nav-tabs:before,
.nav-pills:before,
.nav-tabs:after,
.nav-pills:after {
  display: table;
  line-height: 0;
  content: "";
}

.nav-tabs:after,
.nav-pills:after {
  clear: both;
}

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

.nav-tabs > li > a,
.nav-pills > li > a {
  padding-right: 12px;
  padding-left: 12px;
  margin-right: 2px;
  line-height: 14px;
}

.nav-tabs {
  margin: 0;
  background: #eaeaea;
}

.nav-tabs > li {
  margin-bottom: -1px;
  margin-right: -1px;
}

.nav-tabs > li > a {
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 20px;
  border-top: 3px solid #ac193d
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  background-color: #fafafa;
  color: #333;
  border-bottom: 1px solid transparent;
}

.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
  cursor: default;
  background-color: #fff;
  color: #333;
  border-bottom: 1px solid transparent;
  border-top: 3px solid #0072c6
}

.nav-pills > li > a {
  padding-top: 8px;
  padding-bottom: 8px;
}

.wizard .nav-pills > li > a {
  padding-top: 7px;
  padding-bottom: 7px;
}

.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.nav-pills > .active > a:focus {
  color: #ffffff;
  background-color: #0088cc;
}

.wizard .nav-pills > .active > a,
.wizard .nav-pills > .active > a:hover,
.wizard .nav-pills > .active > a:focus {
  color: #ffffff;
  background-color: #fff!important;
  border-top: 3px solid #ac193d;
  padding-top: 5px;
}

.nav-stacked > li {
  float: none;
}

.nav-stacked > li > a {
  margin-right: 0;
}

.nav-tabs.nav-stacked {
  border-bottom: 0;
}

.nav-tabs.nav-stacked > li > a {
  border: 1px solid #ddd;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.nav-tabs.nav-stacked > li:first-child > a {
  -webkit-border-top-right-radius: 0;
          border-top-right-radius: 0;
  -webkit-border-top-left-radius: 0;
          border-top-left-radius: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-topleft: 0;
}

.nav-tabs.nav-stacked > li:last-child > a {
  -webkit-border-bottom-right-radius: 0;
          border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
          border-bottom-left-radius: 0;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
}

.nav-tabs.nav-stacked > li > a:hover,
.nav-tabs.nav-stacked > li > a:focus {
  z-index: 2;
  border-color: #ddd;
}

.nav-pills.nav-stacked > li > a {
  margin-bottom: 3px;
}

.nav-pills.nav-stacked > li:last-child > a {
  margin-bottom: 1px;
}

.nav-tabs .dropdown-menu {
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.nav-pills .dropdown-menu {
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.nav .dropdown-toggle .caret {
  margin-top: 6px;
  border-top-color: #0088cc;
  border-bottom-color: #0088cc;
}

.nav .dropdown-toggle:hover .caret,
.nav .dropdown-toggle:focus .caret {
  border-top-color: #005580;
  border-bottom-color: #005580;
}

/* move down carets for tabs */

.nav-tabs .dropdown-toggle .caret {
  margin-top: 8px;
}

.nav .active .dropdown-toggle .caret {
  border-top-color: #fff;
  border-bottom-color: #fff;
}

.nav-tabs .active .dropdown-toggle .caret {
  border-top-color: #555555;
  border-bottom-color: #555555;
}

.nav > .dropdown.active > a:hover,
.nav > .dropdown.active > a:focus {
  cursor: pointer;
}

.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
.nav > li.dropdown.open.active > a:hover,
.nav > li.dropdown.open.active > a:focus {
  color: #ffffff;
  background-color: #999999;
  border-color: #999999;
}

.nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret,
.nav li.dropdown.open a:hover .caret,
.nav li.dropdown.open a:focus .caret {
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
  opacity: 1;
  filter: alpha(opacity=100);
}

.tabs-stacked .open > a:hover,
.tabs-stacked .open > a:focus {
  border-color: #999999;
}

.tabbable {
  *zoom: 1;
}

.tabbable:before,
.tabbable:after {
  display: table;
  line-height: 0;
  content: "";
}

.tabbable:after {
  clear: both;
}

.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;
  padding: 12px;
}

.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;
     -moz-border-radius: 0;
          border-radius: 0;
}

.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: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.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;
     -moz-border-radius: 0;
          border-radius: 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;
}

.nav > .disabled > a {
  color: #999999;
}

.nav > .disabled > a:hover,
.nav > .disabled > a:focus {
  text-decoration: none;
  cursor: default;
  background-color: transparent;
}

.navbar {
  *position: relative;
  *z-index: 2;
  overflow: visible;
  margin-bottom: 15px;
}

.navbar:last-child {
  margin-bottom: 0;
}

.navbar-inner {
  padding: 0;
  background: #e7e7e7;
}

.navbar-parent {
  margin-bottom: 20px;
}

.navbar-inner.red {
  border: 1px solid #ac193d;
}

.well .navbar-inner {
  border: none;
  min-height: 38px;
  padding: 1px 1px 1px;
}

.navbar-inner:before,
.navbar-inner:after {
  display: table;
  line-height: 0;
  content: "";
}

.navbar-inner:after {
  clear: both;
}

.navbar .container {
  width: auto;
}

.nav-collapse.collapse {
  height: auto;
  overflow: visible;
}

.navbar .brand {
  display: block;
  float: left;
  padding: 10px 10px 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  text-shadow: 0 1px 0 #ffffff;
}

.navbar .brand:hover,
.navbar .brand:focus {
  text-decoration: none;
}

.navbar-text {
  margin-bottom: 0;
  line-height: 40px;
  color: #777777;
}

.navbar-link {
  color: #777777;
}

.navbar-link:hover,
.navbar-link:focus {
  color: #333333;
}

.navbar .divider-vertical {
  height: 40px;
  margin: 0 9px;
  border-right: 1px solid #ffffff;
  border-left: 1px solid #c1c1c1;
}

.navbar .btn,
.navbar .btn-group,
.navbar .button {
  margin-top: 3px;
}

.navbar .btn-group .btn,
.navbar .input-prepend .btn,
.navbar .input-append .btn,
.navbar .input-prepend .btn-group,
.navbar .input-append .btn-group {
  margin-top: 0;
}

.navbar-form {
  margin-bottom: 10px;
  margin-top: 6px;
  *zoom: 1;
}

.navbar-form:before,
.navbar-form:after {
  display: table;
  line-height: 0;
  content: "";
}

.navbar-form:after {
  clear: both;
}

.navbar-form input,
.navbar-form select,
.navbar-form .radio,
.navbar-form .checkbox {
  margin-top: 4px;
}

.navbar-form input,
.navbar-form select,
.navbar-form .btn {
  display: inline-block;
  margin-bottom: 0;
}

.navbar-form input[type="image"],
.navbar-form input[type="checkbox"],
.navbar-form input[type="radio"] {
  margin-top: 3px;
}

.navbar-form .input-append,
.navbar-form .input-prepend {
  margin-top: 5px;
  white-space: nowrap;
}

.navbar-form .input-append input,
.navbar-form .input-prepend input {
  margin-top: 0;
}

.navbar-search {
  position: relative;
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
}

.navbar-search .search-query {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: normal;
}

.navbar-static-top {
  position: static;
  margin-bottom: 0;
}

.navbar-static-top .navbar-inner {
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
  margin-bottom: 0;
}

.navbar-fixed-top .navbar-inner,
.navbar-static-top .navbar-inner {
  border-width: 0 0 1px;
}

.navbar-fixed-bottom .navbar-inner {
  border-width: 1px 0 0;
}

.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
  padding-right: 0;
  padding-left: 0;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
  width: 940px;
}

.navbar-fixed-top {
  top: 0;
}

.navbar-fixed-top .navbar-inner,
.navbar-static-top .navbar-inner {
  -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
     -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}

.navbar-fixed-bottom {
  bottom: 0;
}

.navbar-fixed-bottom .navbar-inner {
  -webkit-box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
     -moz-box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
}

.navbar .nav {
  position: relative;
  left: 0;
  display: block;
  float: left;
  margin: 0 10px 0 0;
}

.navbar .nav.pull-right {
  float: right;
  margin-right: 0;
}

.navbar .nav > li {
  float: left;
}

.navbar .nav > li > a {
  float: none;
  padding: 8px 12px 8px;
  line-height: 24px;
  color: #333;
  text-decoration: none;
}

.navbar .nav-tabs > li > a {
  border-top: 3px solid #ac193d;
}

.navbar .nav .dropdown-toggle .caret {
  margin-top: 8px;
}

.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
  color: #333333;
  text-decoration: none;
  background-color: transparent;
}

.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
  color: #333;
  text-decoration: none;
  background-color: #e5e5e5;
}

.navbar .btn-navbar {
  display: none;
  float: right;
  padding: 7px 10px;
  margin-right: 5px;
  margin-left: 5px;
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #ededed;
  *background-color: #e5e5e5;
  background-image: -moz-linear-gradient(top, #f2f2f2, #e5e5e5);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#e5e5e5));
  background-image: -webkit-linear-gradient(top, #f2f2f2, #e5e5e5);
  background-image: -o-linear-gradient(top, #f2f2f2, #e5e5e5);
  background-image: linear-gradient(to bottom, #f2f2f2, #e5e5e5);
  background-repeat: repeat-x;
  border-color: #e5e5e5 #e5e5e5 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffe5e5e5', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
}

.navbar .btn-navbar:hover,
.navbar .btn-navbar:focus,
.navbar .btn-navbar:active,
.navbar .btn-navbar.active,
.navbar .btn-navbar.disabled,
.navbar .btn-navbar[disabled] {
  color: #ffffff;
  background-color: #e5e5e5;
  *background-color: #d9d9d9;
}

.navbar .btn-navbar:active,
.navbar .btn-navbar.active {
  background-color: #cccccc \9;
}

.navbar .btn-navbar .icon-bar {
  display: block;
  width: 18px;
  height: 2px;
  background-color: #f5f5f5;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.btn-navbar .icon-bar + .icon-bar {
  margin-top: 3px;
}

.navbar .nav > li > .dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.navbar .nav > li > .dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: '';
}

.navbar-fixed-bottom .nav > li > .dropdown-menu:before {
  top: auto;
  bottom: -7px;
  border-top: 7px solid #ccc;
  border-bottom: 0;
  border-top-color: rgba(0, 0, 0, 0.2);
}

.navbar-fixed-bottom .nav > li > .dropdown-menu:after {
  top: auto;
  bottom: -6px;
  border-top: 6px solid #ffffff;
  border-bottom: 0;
}

.navbar .nav li.dropdown > a:hover .caret,
.navbar .nav li.dropdown > a:focus .caret {
  border-top-color: #333333;
  border-bottom-color: #333333;
}

.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
  color: #555555;
  background-color: #e5e5e5;
}

.navbar .nav li.dropdown > .dropdown-toggle .caret {
  border-top-color: #777777;
  border-bottom-color: #777777;
}

.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
  border-top-color: #555555;
  border-bottom-color: #555555;
}

.navbar .pull-right > li > .dropdown-menu,
.navbar .nav > li > .dropdown-menu.pull-right {
  right: 0;
  left: auto;
}

.navbar .pull-right > li > .dropdown-menu:before,
.navbar .nav > li > .dropdown-menu.pull-right:before {
  right: 12px;
  left: auto;
}

.navbar .pull-right > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu.pull-right:after {
  right: 13px;
  left: auto;
}

.navbar .pull-right > li > .dropdown-menu .dropdown-menu,
.navbar .nav > li > .dropdown-menu.pull-right .dropdown-menu {
  right: 100%;
  left: auto;
  margin-right: -1px;
  margin-left: 0;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.navbar-inverse .navbar-inner {
  background: #1f1f1f;
}

.navbar-inverse .brand,
.navbar-inverse .nav > li > a {
  color: #999999;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.navbar-inverse .brand:hover,
.navbar-inverse .nav > li > a:hover,
.navbar-inverse .brand:focus,
.navbar-inverse .nav > li > a:focus {
  color: #ffffff;
}

.navbar-inverse .brand {
  color: #999999;
}

.navbar-inverse .navbar-text {
  color: #999999;
}

.navbar-inverse .nav > li > a:focus,
.navbar-inverse .nav > li > a:hover {
  color: #ffffff;
  background-color: transparent;
}

.navbar-inverse .nav .active > a,
.navbar-inverse .nav .active > a:hover,
.navbar-inverse .nav .active > a:focus {
  color: #ffffff;
  background-color: #111111;
}

.navbar-inverse .navbar-link {
  color: #999999;
}

.navbar-inverse .navbar-link:hover,
.navbar-inverse .navbar-link:focus {
  color: #ffffff;
}

.navbar-inverse .divider-vertical {
  border-right-color: #222222;
  border-left-color: #111111;
}

.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
  color: #ffffff;
  background-color: #111111;
}

.navbar-inverse .nav li.dropdown > a:hover .caret,
.navbar-inverse .nav li.dropdown > a:focus .caret {
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
}

.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret {
  border-top-color: #999999;
  border-bottom-color: #999999;
}

.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle .caret {
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
}

.navbar-inverse .navbar-search .search-query {
  color: #ffffff;
  background-color: #515151;
  border-color: #111111;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
     -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
  -webkit-transition: none;
     -moz-transition: none;
       -o-transition: none;
          transition: none;
}

.navbar-inverse .navbar-search .search-query:-moz-placeholder {
  color: #cccccc;
}

.navbar-inverse .navbar-search .search-query:-ms-input-placeholder {
  color: #cccccc;
}

.navbar-inverse .navbar-search .search-query::-webkit-input-placeholder {
  color: #cccccc;
}

.navbar-inverse .navbar-search .search-query:focus,
.navbar-inverse .navbar-search .search-query.focused {
  padding: 5px 15px;
  color: #333333;
  text-shadow: 0 1px 0 #ffffff;
  background-color: #ffffff;
  border: 0;
  outline: 0;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
     -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}

.navbar-inverse .btn-navbar {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #0e0e0e;
  *background-color: #040404;
  background-image: -moz-linear-gradient(top, #151515, #040404);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404));
  background-image: -webkit-linear-gradient(top, #151515, #040404);
  background-image: -o-linear-gradient(top, #151515, #040404);
  background-image: linear-gradient(to bottom, #151515, #040404);
  background-repeat: repeat-x;
  border-color: #040404 #040404 #000000;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff151515', endColorstr='#ff040404', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.navbar-inverse .btn-navbar:hover,
.navbar-inverse .btn-navbar:focus,
.navbar-inverse .btn-navbar:active,
.navbar-inverse .btn-navbar.active,
.navbar-inverse .btn-navbar.disabled,
.navbar-inverse .btn-navbar[disabled] {
  color: #ffffff;
  background-color: #040404;
  *background-color: #000000;
}

.navbar-inverse .btn-navbar:active,
.navbar-inverse .btn-navbar.active {
  background-color: #000000 \9;
}

.breadcrumb {
  margin: 0;
  padding: 0 0 0 15px;
  list-style: none;
  background-color: #fafafa;
}

.breadcrumb > li {
  display: inline-block;
  *display: inline;
  text-shadow: 0 1px 0 #ffffff;
  *zoom: 1;
  line-height: 29px;
  font-size: 11px;
}

.breadcrumb > li > .divider {
  padding: 0 5px;
  color: #333;
}

.breadcrumb > li i {
  font-size: 14px;
  position: relative;
  top: 1px;
  margin-right: -2px;
  opacity: 0.7;
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -ms-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

.breadcrumb > li:hover i {
  opacity: 1;
}

.breadcrumb > li > a {
  color: #636363;
}

.breadcrumb > .active {
  color: #999999;
}

.pagination {
  margin: 0 0 -7px 0;
}

.pagination ul {
  display: inline-block;
  *display: inline;
  margin-bottom: 0;
  margin-left: 0;

  *zoom: 1;
}

.pagination ul > li {
  display: inline;
}

.pagination ul > li > a,
.pagination ul > li > span {
  float: left;
  padding: 4px 12px 3px;
  line-height: 20px;
  text-decoration: none;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-left-width: 0;
}

.pagination ul > li > a:hover,
.pagination ul > li > a:focus,
.pagination ul > .active > a,
.pagination ul > .active > span {
  background-color: #f5f5f5;
}

.pagination ul > .active > a,
.pagination ul > .active > span {
  color: #999999;
  cursor: default;
}

.pagination ul > .disabled > span,
.pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover,
.pagination ul > .disabled > a:focus {
  color: #999999;
  cursor: default;
  background-color: transparent;
}

.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
  border-left-width: 1px;
}

.pagination-centered {
  text-align: center;
}

.pagination-right {
  text-align: right;
}

.pagination-large ul > li > a,
.pagination-large ul > li > span {
  padding: 5px 13px;
  font-size: 14px;
}

.pagination-small ul > li > a,
.pagination-small ul > li > span {
  padding: 3px 10px 2px;
  font-size: 11px;
}

.pagination-mini ul > li > a,
.pagination-mini ul > li > span {
  padding: 0 6px;
  font-size: 10.5px;
}

.pager {
  margin: 20px 0;
  text-align: center;
  list-style: none;
  *zoom: 1;
}

.pager:before,
.pager:after {
  display: table;
  line-height: 0;
  content: "";
}

.pager:after {
  clear: both;
}

.pager li {
  display: inline;
}

.pager li > a,
.pager li > span {
  display: inline-block;
  padding: 5px 14px;
  background-color: #fff;
  border: 1px solid #ddd;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.pager li > a:hover,
.pager li > a:focus {
  text-decoration: none;
  background-color: #f5f5f5;
}

.pager .next > a,
.pager .next > span {
  float: right;
}

.pager .previous > a,
.pager .previous > span {
  float: left;
}

.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span {
  color: #999999;
  cursor: default;
  background-color: #fff;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000000;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop,
.modal-backdrop.fade.in {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.modal {
  position: fixed;
  top: 10%;
  left: 50%;
  z-index: 1050;
  width: 560px;
  margin-left: -280px;
  background-color: #ffffff;
  border: 1px solid #5c5c5c;
  outline: none;
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding-box;
          background-clip: padding-box;
}

.modal-open {
  overflow: hidden;
  padding-right: 17px !important;
}

.modal-open header ul.header_actions {
  margin-right: 17px;
}

.modal.fade {
  top: -25%;
  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
       -o-transition: opacity 0.3s linear, top 0.3s ease-out;
          transition: opacity 0.3s linear, top 0.3s ease-out;
}

.modal.fade.in {
  top: 10%;
}

.modal-header {
  padding: 12px 15px;
  border-bottom: 1px solid #dedede;
  position: relative;
}

.modal-header .close {
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -9px;
}

.modal-header .dismiss:hover {
  opacity: 0.8;
}

.modal-header h3 {
  margin: 0;
  line-height: 30px;
  font-size: 18px;
}

.modal-body {
  position: relative;
  max-height: 400px;
  padding: 15px;
  overflow-y: auto;
}

.modal-form {
  margin-bottom: 0;
}

.modal-footer {
  padding: 14px 15px 14px;
  margin-bottom: 0;
  text-align: right;
  background-color: #f5f5f5;
  border-top: 1px solid #dedede;
  *zoom: 1;
}

.modal-footer:before,
.modal-footer:after {
  display: table;
  line-height: 0;
  content: "";
}

.modal-footer:after {
  clear: both;
}

.modal-footer .btn + .btn {
  margin-bottom: 0;
  margin-left: 5px;
}

.modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}

.modal-footer .btn-block + .btn-block {
  margin-left: 0;
}

.tooltip {
  position: absolute;
  z-index: 1030;
  display: block;
  font-size: 11px;
  line-height: 1.4;
  opacity: 0;
  filter: alpha(opacity=0);
  visibility: visible;
}

.tooltip.in {
  opacity: 0.9;
  filter: alpha(opacity=90);
}

.tooltip.top {
  padding: 5px 0;
  margin-top: -3px;
}

.tooltip.right {
  padding: 0 5px;
  margin-left: 3px;
}

.tooltip.bottom {
  padding: 5px 0;
  margin-top: 3px;
}

.tooltip.left {
  padding: 0 5px;
  margin-left: -3px;
}

.tooltip-inner {
  max-width: 200px;
  padding: 10px;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  background-color: #000000;
}

.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-top-color: #000000;
  border-width: 5px 5px 0;
}

.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-right-color: #000000;
  border-width: 5px 5px 5px 0;
}

.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-left-color: #000000;
  border-width: 5px 0 5px 5px;
}

.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-bottom-color: #000000;
  border-width: 0 5px 5px;
}

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1010;
  display: none;
  max-width: 276px;
  padding: 1px;
  text-align: left;
  white-space: normal;
  background-color: #ffffff;
  border: 1px solid #5c5c5c;
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

.popover.top {
  margin-top: -10px;
}

.popover.right {
  margin-left: 10px;
}

.popover.bottom {
  margin-top: 10px;
}

.popover.left {
  margin-left: -10px;
}

.popover-title {
  padding: 8px 12px;
  margin: 0;
  font-size: 12px;
  font-weight: normal;
  line-height: 18px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #dedede;
}

.popover-title:empty {
  display: none;
}

.popover-content {
  padding: 9px 14px;
}

.popover .arrow,
.popover .arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.popover .arrow {
  border-width: 7px;
}

.popover .arrow:after {
  border-width: 6px;
  content: "";
}

.popover.top .arrow {
  bottom: -7px;
  left: 50%;
  margin-left: -7px;
  border-top-color: #000;
  border-bottom-width: 0;
}

.popover.top .arrow:after {
  bottom: 1px;
  margin-left: -6px;
  border-top-color: #ffffff;
  border-bottom-width: 0;
}

.popover.right .arrow {
  top: 50%;
  left: -7px;
  margin-top: -7px;
  border-right-color: #000;
  border-left-width: 0;
}

.popover.right .arrow:after {
  bottom: -6px;
  left: 1px;
  border-right-color: #ffffff;
  border-left-width: 0;
}

.popover.bottom .arrow {
  top: -7px;
  left: 50%;
  margin-left: -7px;
  border-bottom-color: #000;
  border-top-width: 0;
}

.popover.bottom .arrow:after {
  top: 1px;
  margin-left: -6px;
  border-bottom-color: #ffffff;
  border-top-width: 0;
}

.popover.left .arrow {
  top: 50%;
  right: -7px;
  margin-top: -7px;
  border-left-color: #000;
  border-right-width: 0;
}

.popover.left .arrow:after {
  right: 1px;
  bottom: -6px;
  border-left-color: #ffffff;
  border-right-width: 0;
}

.thumbnails {
  margin-left: -20px;
  list-style: none;
  *zoom: 1;
}

.thumbnails:before,
.thumbnails:after {
  display: table;
  line-height: 0;
  content: "";
}

.thumbnails:after {
  clear: both;
}

.row-fluid .thumbnails {
  margin-left: 0;
  margin-bottom: 10px;
}

.thumbnails > li {
  float: left;
  margin-left: 20px;
}

.thumbnail {
  display: block;
  padding: 2px;
  line-height: 20px;
  border: 1px solid #ddd;
}

a.thumbnail:hover,
a.thumbnail:focus {
  border-color: #0072c6;
}

.thumbnail > img {
  display: block;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.thumbnail h5 {
  margin: 10px 0 5px 10px;
  color: #333;
}

.thumbnail .caption {
  padding: 0 10px 10px;
  color: #333;
}

.thumbnail .buttons {
  margin-top: -13px;
  margin-left: 10px;
  margin-bottom: 8px;
}

.media,
.media-body {
  overflow: hidden;
  *overflow: visible;
  zoom: 1;
}

.media,
.media .media {
  margin-top: 15px;
}

.media:first-child {
  margin-top: 0;
}

.media-object {
  display: block;
}

.media-heading {
  margin: 0 0 5px;
}

.media > .pull-left {
  margin-right: 10px;
}

.media > .pull-right {
  margin-left: 10px;
}

.media-list {
  margin-left: 0;
  list-style: none;
}

.label,
.badge {
  display: inline-block;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 300x;
  line-height: 14px;
  margin-right: 3px;
  color: #ffffff;
  white-space: nowrap;
  vertical-align: baseline;
  background-color: #585858;
}

.label:empty,
.badge:empty {
  display: none;
}

a.label:hover,
a.label:focus,
a.badge:hover,
a.badge:focus {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

.label-important,
.badge-important {
  background-color: #ac193d;
}

.label-important[href],
.badge-important[href] {
  background-color: #ac193d;
}

.label-warning,
.badge-warning {
  background-color: #ff8f32;
}

.label-warning[href],
.badge-warning[href] {
  background-color: #ff8f32;
}

.label-success,
.badge-success {
  background-color: #82ba00;
}

.label-success[href],
.badge-success[href] {
  background-color: #82ba00;
}

.label-info,
.badge-info {
  background-color: #0072c6;
}

.label-info[href],
.badge-info[href] {
  background-color: #0072c6;
}

.label-inverse,
.badge-inverse {
  background-color: #1f1f1f;
}

.label-inverse[href],
.badge-inverse[href] {
  background-color: #1f1f1f;
}

.btn .label,
.btn .badge {
  position: relative;
  top: -1px;
}

.btn-mini .label,
.btn-mini .badge {
  top: 0;
}

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-moz-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-ms-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-o-keyframes progress-bar-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 40px 0;
  }
}

@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

.progress {
  margin-bottom: 15px;
  height: 12px;
  overflow: hidden;
  background-color: #ececec;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
  -webkit-box-shadow: inset 0 0px 0px 1px rgba(0, 0, 0, 0.08);
     -moz-box-shadow: inset 0 0px 0px 1px rgba(0, 0, 0, 0.08);
          box-shadow: inset 0 0px 0px 1px rgba(0, 0, 0, 0.08);
}

.progress:last-child {
  margin-bottom: 0;
}

.mainNavigation .progress {
  background-color: #d0d0d0;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
  -webkit-box-shadow: inset 0 0px 0px 1px rgba(0, 0, 0, 0.08);
     -moz-box-shadow: inset 0 0px 0px 1px rgba(0, 0, 0, 0.08);
          box-shadow: inset 0 0px 0px 1px rgba(0, 0, 0, 0.08);
}

.progress.thin {
  height: 6px;
}

.progress .bar {
  float: left;
  width: 0;
  height: 100%;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background: #0072c6; /* Old browsers */
}

.right .bar {
  float: right;
}

.progress .bar + .bar {
  -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
     -moz-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
          box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.progress-striped .bar {
  background: url(../img/progress-pattern.png), #0072c6;
}

.progress-danger .bar,
.progress .bar-danger {
  background: #ac193d;
}

.progress-danger.progress-striped .bar,
.progress-striped .bar-danger {
  background: url(../img/progress-pattern.png), #ac193d;
}

.progress-success .bar,
.progress .bar-success {
  background: #82ba00;

}

.progress-success.progress-striped .bar,
.progress-striped .bar-success {
  background: url(../img/progress-pattern.png), #82ba00;
}

.progress-info .bar,
.progress .bar-info {
  background: #5db2ff;
}

.progress-info.progress-striped .bar,
.progress-striped .bar-info {
  background: url(../img/progress-pattern.png), #5db2ff;
}

.progress-warning .bar,
.progress .bar-warning {
  background: #ff8f32;
}

.progress-warning.progress-striped .bar,
.progress-striped .bar-warning {
  background: url(../img/progress-pattern.png), #ff8f32;
}

.accordion {
  margin-bottom: 20px;
}

.accordion-group {
  margin-bottom: 2px;
  border: 1px solid #dedede;
}

.accordion-heading {
  border-bottom: 0;
}

.accordion-heading .accordion-toggle {
  display: block;
  padding: 8px 15px;
  background: #f1f1f1;
}

.accordion-toggle {
  cursor: pointer;
}

.accordion-inner {
  padding: 9px 15px;
  border-top: 1px solid #e5e5e5;
}

.carousel {
  position: relative;
  margin-bottom: 20px;
  line-height: 1;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-inner > .item {
  position: relative;
  display: none;
  -webkit-transition: 0.6s ease-in-out left;
     -moz-transition: 0.6s ease-in-out left;
       -o-transition: 0.6s ease-in-out left;
          transition: 0.6s ease-in-out left;
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  line-height: 1;
}

.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}

.carousel-inner > .active {
  left: 0;
}

.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}

.carousel-inner > .next {
  left: 100%;
}

.carousel-inner > .prev {
  left: -100%;
}

.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  left: 0;
}

.carousel-inner > .active.left {
  left: -100%;
}

.carousel-inner > .active.right {
  left: 100%;
}

.carousel-control {
  position: absolute;
  top: 40%;
  left: 15px;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  font-size: 60px;
  font-weight: 100;
  line-height: 30px;
  color: #ffffff;
  text-align: center;
  background: #222222;
  border: 3px solid #ffffff;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

.carousel-control.right {
  right: 15px;
  left: auto;
}

.carousel-control:hover,
.carousel-control:focus {
  color: #ffffff;
  text-decoration: none;
  opacity: 0.9;
  filter: alpha(opacity=90);
}

.carousel-indicators {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 5;
  margin: 0;
  list-style: none;
}

.carousel-indicators li {
  display: block;
  float: left;
  width: 10px;
  height: 10px;
  margin-left: 5px;
  text-indent: -999px;
  background-color: #ccc;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 0;
}

.carousel-indicators .active {
  background-color: #fff;
}

.carousel-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 15px;
  background: #333333;
  background: rgba(0, 0, 0, 0.75);
}

.carousel-caption h4,
.carousel-caption p {
  line-height: 20px;
  color: #ffffff;
}

.carousel-caption h4 {
  margin: 0 0 5px;
}

.carousel-caption p {
  margin-bottom: 0;
}

.hero-unit {
  padding: 60px;
  margin-bottom: 30px;
  font-size: 18px;
  font-weight: 200;
  line-height: 30px;
  color: inherit;
  background-color: #eeeeee;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.hero-unit h1 {
  margin-bottom: 0;
  font-size: 60px;
  line-height: 1;
  letter-spacing: -1px;
  color: inherit;
}

.hero-unit li {
  line-height: 30px;
}

.pull-right {
  float: right;
}

.pull-left {
  float: left !important;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.invisible {
  visibility: hidden;
}

.affix {
  position: fixed;
}

HTML

Sekarang untuk formnya buat sebuah file html baru dengan nama : login.html

<!DOCTYPE html>
<html> 
 <title>Form Login Jin Toples</title>
    <link href="bootstrap.css" rel="stylesheet">
    <link href="stylesheet.css" rel="stylesheet">
    <style>
  body { 
    background: url(1.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
 </style>
    <body  style="">
 <div class="login-container">
        <div class="login-header bordered">
            <h4>Sign in</h4>
        </div>
        <hr>
        <form>
            <div class="login-field">
                <label for="username">Username</label>
                <input type="text" name="username" id="username" placeholder="Username">
                <i class="icon-user"></i>
            </div>
            <div class="login-field">
                <label for="password">Password</label>
                <input type="password" name="password" id="password" placeholder="Password">
                <i class="icon-lock"></i>
            </div>
            <div class="login-button clearfix">
                <label class="checkbox pull-left">
                    <div class="checker"><span><input type="checkbox" class="uniform" name="checkbox1"></span></div> Remember me
                </label>
                <button type="submit" class="pull-right btn btn-large blue">SIGN IN </button>
            </div>
            <div class="forgot-password">
                <a href="http://localhost/hris_kaltim_dev/login-v4.html#forgot-pw" role="button" data-toggle="modal">Forgot password?</a>
            </div>
        </form>
    </div>

    <div id="forgot-pw" class="modal hide fade" tabindex="-1" data-width="760">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></button>
            <h3>Forgot your password?</h3>
        </div>
        <div class="modal-body">
            <div class="row-fluid">
                <div class="span12">
                    <div class="form_row">
                        <label class="field_name">Email address</label>
                        <div class="field">
                            <div class="row-fluid">
                                <div class="span8">
                                    <input type="text" class="span12" name="email" placeholder="example@domain.com">
                                </div>
                                <div class="span4">
                                    <a href="http://localhost/hris_kaltim_dev/login-v4.html#" class="btn btn-block blue">Reset password</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body></html>

Background

Terakhir agar lebih keren tambahkan sebuah background dengan nama : 1.jpg

background form

Simpan semuanya dalam satu folder, kemudian coba anda buka file login.html.

Source code program yang sudah jadi anda dapat unduh di sini : Download

Read More

Cara Membuat Loading Game Dengan Game Maker

Cara Membuat Loading Game Dengan Game Maker - Loading adalah waktu atau durasi dari sebuah aplikasi atau sistem untuk memuat atau mengumpulkan bagian - bagian program. Dalam game kita sering jumpai loading ini, loading progress berfungsi apabila game yang dimuat besar atau proses memuatnya lama sehingga di butuhkan waktu untuk meloadnya, dengan progress bar loading kita dapat mengetahui informasi progress load dari game apakah akan selelsai di load atau belum.

Sekarang kita akan membuat loading sederhana untuk game anda dengan menggunakan game maker.

Baca juga : Membuat Health Bar SAO Dengan Game Maker

BACKGROUND

Karna disini kita tidak membutuhkan sprites langsung saja kita masuk ke background. buatlah sebuah background sederhana hanya untuk menandakan bahwa kita telah berpindah room.

sebagai contoh gambar background berikut :

background game

buat background dengan cara klik Resources > Create Background. berinama : back_room

membuat background game

OBJECT

Sekarang buatlah sebuah objek dengan cara klik Resources > Create Object. dengan nama object : obj_loading

membuat object loading

Sekarang tambahkan event pada objek tersebut :

Klik Add Event > Create > Pada tab kanan pilih Control > Execute Code > Isi dengan script berikut

loading=0
max_loading=100
loading_dev=max_loading/100

Klik Add Event > Step > Step > Pada tab kanan pilih Control > Execute Code > Isi dengan script berikut

loading+=0.5 //kecepatan loading
if loading >100{transition_kind=5 room_goto_next()} //tansisi room
x=room_width/2 //membuat posisi di tengah room
y=room_height/2 //membuat posisi di tengah room

//tutorial by Jin Toples
//http://jintoples.blogspot.com

Klik Add Event > Draw > Draw > Pada tab kanan pilih Control > Execute Code > Isi dengan script berikut

draw_healthbar(x-100,y-16,x+100,y+16,loading/loading_dev,c_green,c_lime,c_lime,0,1,1)
draw_set_halign(fa_center)
draw_text(x,y-8,"Loading") // membuat tulisan loading di tengah progresbar
draw_set_halign(fa_left)
//by Jin Toples
//http://jintoples.blogspot.com

ROOM

Buatlah room dengan nama : room_loading Room ini yang kita gunakan sebagai room loading progress bar.

room loading game

Letakan obj_loading pada room seperti pada gambar di atas.

Terakhir buatlah room untuk room selanjutnya dengan nama : room_game

room setelah loading game

Klik pada tab Titles > Klik pada gambar background > letakan di dalam room seperti gambar di atas.

Sekarang jalankan loading anda dengan cara tekan F5 atau klik Run > Run Normaly.

proses loading game

Maka proses loading akan berjalan seperti di atas.

*Notes Tutorial ini dibuat dan sudah di coba pada Game Maker 8.0 Full Version

Read More

Membuat Health Bar SAO Dengan Game Maker

Membuat Health Bar SAO Dengan Game Maker - Health Bar merupakan salah satu komponen yang penting dalam game, health bar berfungsi sebagai petunjuk nyawa atau darah player dalam game, yah yang sering main game pasti mengerti lah maslah heath bar ini. nah, kali ini kita akan belajar membuat sebuah heath bar untuk game yang anda buat dengan menggunakan game maker.

Baca juga : Membuat Menu Game Maker

Kita akan membuat ini menjadi bergaya seperti di dalam anime Sword Art Online ( SAO ). Sao menceritakan tentang sebuah game virtual MMORPG yang membuat player dapat masuk ke dalam dunia game, wuih keren !!!. alan tetapi tanpa sebab yang jelas sang GM membuat player terjebak di dalam dunia game dan tidak bisa keluar kecuali mereka menyelesaikan game tesebut. nah, unutuk lebih jelasnya tonton saja animenya heheh.

Sprites

Pertama siapkan terlebih dahulu sprites yang akan kita gunakan nanti.

1. spr_sao

Buatlah sebuah sprites baru dengan nama : spr_sao dengan menggunakan gambar di atas.

Scripts

Sekarang buatlah sebuah scripts baru dengan cara klik Resources > Create Script.

1. script_draw

Buat sebuah script dengan nama : script_draw dengan isi script :

draw_healthbar(view_xview+((92)*view_wview/600),view_yview+((20)*view_hview/480),view_xview+((353)*view_wview/640),view_yview+((38)*view_hview/480), hp/ hp_devide,hp_back,hp_front,hp_front,0,1,0);

draw_sprite_ext(spr_sao,0,view_xview+(5)*view_wview/640,view_yview+(5)*view_hview/480,(view_wview/640)*1,(view_hview/480)*1,0,c_white,1);

draw_text(243,40,hp);

draw_text(280,40,max_hp);

1. script_variable

Buat sebuah script dengan nama : script_variable dengan isi script :

hp=100
max_hp=100
hp_devide=max_hp/100

hp_back=make_color_rgb(0,24,0)
hp_front=make_color_rgb(0,244,0)

e_back=make_color_rgb(64,0,0)
e_front=make_color_rgb(255,0,0)

Font

Sekarang siapkan sebuah font, pertama anda harus mengunduh terlebih dahulu font SAO yang akan anda gunakan anda dapat mengunduhnya di sini : DeviantArt

Sekarang buatlah sebuah font baru klik Resources > Create Font,  dengan nama : sao_font

Ubah pilihan fontnya menjadi : SAO UI dan ubah sizenya menjadi : 14

Objek

Sekarang kita buat objek dengan cara klik Resources > Create Object

1. obj_helath

Buat objek dengan nama : obj_health

Sekarang tambah event pada objek tersebut :

Klik Add Event > Create > Pada tab kanan pilih Control > Execute Script

Dengan properties :

Applies to : Self
Script : script_variable
Argument 0 - 4 : 0

Pada tab kanan pilih Draw > Set Font

Dengan properties :

Font : Sao_font
align : left

Pada tab kanan pilih Draw > Set Color

Dengan properties :

Color : ( Pilih warna putih )

Klik Add Event > Step > Step > Pada tab kanan pilih Control > Execute Code > Isi dengan script berikut

if keyboard_check(ord('S')){hp+=1}
if keyboard_check(ord('A')){hp-=1}

if hp > max_hp{hp=max_hp}

if hp > max_hp/3 and hp < max_hp/2 {
    hp_front=make_color_rgb(255,208,0);
}

if hp < max_hp/4{
    hp_front=make_color_rgb(244,0,0);
}   


if hp > max_hp/2{
hp_front=make_color_rgb(0,244,0);
}

if hp < 0{hp=0}

Klik Add Event > Draw > Draw > Pada tab kanan pilih Control > Execute Script

Dengan properties :

Applies to : Self
Script : script_draw
Argument 0 - 4 : 0

2.obj_text

Klik Add Event > Draw > Draw > Pada tab kanan pilih Control > Execute Code > Kemudian isi dengan script

draw_text(x,y,"Tekan tombol S untuk menambah darah#Tekan tombol A untuk mengurangi darah #By: Jin Toples #Http://jintoples.blogspot.com")

Room

Sekarang buatlah sebuah room dengan nama : Main

Dengan ukuran room Width : 400 dan Height : 200

Letakan obj_health pada bagian atas dan obj_text pada baigan bawah.

Sekarang jalankan dengan cara tekan F5 atau klik Run > Run Normaly.

*Notes Tutorial ini dibuat dan sudah di coba pada Game Maker Studio Full Version dan Game Maker 8.0 Full Version

Health Bar SAO Dengan Game Maker  sekarang sudah selesai, baca juga tutorial game maker lainnya.

Read More

Membuat Menu Game Maker

Membuat Menu Game Maker - Menu adalah salah satu bagian yang paling penting dalam game, dengan menu pemain bisa melakukan kontrol terhadap game, mengganti settingan game, dan juga masuk keluar game. Jika sebelumnya kita sudah pernah membuat bermacam - macam game kali ini kita akan membuat menu yang akan kita gunakan dalam game dengan game maker kita nantinya.

Background

Pertama siapkan sebuah background atau anda dapat membuatnya sendiri, cukup background sederhana saja yang memunculkan sebuah pesan kalau kita sudah berpindah room. 

Klik Resources > Create Background

Objek

Sekarang buatlah sebuah objek dengan nama : menu_game

Klik Add Event > Create > Pada tab kanan pilih Control > Execute Code > Isi dengan script berikut

menu=1

// menu = 1 >> Play
// menu = 2 >> Save
// menu = 3 >> Load
// menu = 4 >> Help/Instruksi
// menu = 5 >> Exit

//membuat tulisan-tulisan ini berada ditengah room
x=room_width/2
y=room_height/2

Klik Add Event > Draw > Pada tab kanan pilih Draw > Set Font > Font : no font dan Align : center

Klik Add Event > Create > Pada tab kanan pilih Control > Execute Code > Isi dengan script berikut

if menu=1{draw_text(x,y-64,"> Play <")}else{draw_text(x,y-64,"Play")}
if menu=2{draw_text(x,y-32,"> Save <")}else{draw_text(x,y-32,"Save")}
if menu=3{draw_text(x,y,"> Load <")}else{draw_text(x,y,"Load")}
if menu=4{draw_text(x,y+32,"> Instruksi <")}else{draw_text(x,y+32,"Instruksi")}
if menu=5{draw_text(x,y+64,"> Exit <")}else{draw_text(x,y+64,"Exit")}

Klik Add Event > Draw > Pada tab kanan pilih Draw > Set Font > Font : no font dan Align : left

Klik Add Event > Key Press > Enter > Pada tab kanan pilih Control > Execute Code > Isi dengan script berikut

if menu=1{transition_kind=21 room_goto_next()}
if menu=2{show_message("Game Saved")}
if menu=3{show_message("Game Loaded")}
if menu=4{show_info()}
if menu=5{if show_question("Apakah anda yakin??"){game_end()}}

Klik Add Event > Key Press > Up > Pada tab kanan pilih Control > Execute Code > Isi dengan script berikut

menu-=1
if menu<1{menu=5}

Klik Add Event > Key Press > Down > Pada tab kanan pilih Control > Execute Code > Isi dengan script berikut

menu+=1
if menu>5{menu=1}

Room

Sekarang buatlah sebuah room baru dengan cara klik Resources > Create Room, Kemudian masukan objek Menu.

Buat sebuah room baru lagi dengan background yang sebelumnya sudah di buat.

Game Information

Sekarang terakhir untuk instruksi dalam game klik Resource > Change Game Information

Sekarang jalankan gamenya dengan cara klik F5.

*Notes Tutorial ini dibuat dengan menggunakan Game Maker 8.0 Full Version

Menu Game Maker sekarang sudah selesai, baca juga tutorial game maker lainnya.

Read More