/* Start: Main Rulez */
body {background-color: #5a5a5a; font-size: 16px}
.asterisk {font-size: 30px; color: #d20707; position: absolute; right: 30px; top: 8px} /* class asterisk was created using jQuery. The first positioned-parent is .form-control */
.nice-message {padding: 10px; background-color: #fff; margin: 10px 0; border-left: 5px solid #080}
/* End: Main Rulez */


/* Start: Login Form */
.login {width: 300px; margin: 100px auto}
.login h4 {color: #fff}
.login input {margin-bottom: 10px}
.login .form-control {background-color: #eaeaea}
.login .btn {background-color: #008dde}
/* End: Login Form */

/* Start: Bootstrap edits */
.navbar {border-radius: 0; margin-bottom: 0}
.nav>li>a, .navbar-brand {padding: 15px 12px}
.navbar-brand {font-size: 1em} /* from body font-size */
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover, .dropdown-menu {background-color: #3498db}
.dropdown-menu {min-width: 180px; padding: 0; font-size: 1em; border: none; border-radius: 0}
.dropdown-menu>li>a {color: #fff; padding: 10px 15px}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {color: #fff; background-color: #8e44ad}
.form-control {position: relative} /* to enable me to position the asterisk I made using jQuery in the Form Validation section */
/* End: Bootstrap edits */

/* Start: Dashboard Page */
.home-stats .stat {padding: 20px; font-size: 15px; color: #fff; border-radius: 10px; position: relative; overflow: hidden}
.home-stats .stat i {position: absolute; font-size: 80px; top: 35px; left: 30px}
.home-stats .stat .info {float: right}
.home-stats .stat a {color: #fff}
.home-stats .stat a:hover {text-decoration: none}
.home-stats .stat span {display: block; font-size: 60px}
.home-stats .st-members {background-color: #3498db}
.home-stats .st-pending {background-color: #c0392b}
.home-stats .st-items {background-color: #d35400}
.home-stats .st-comments {background-color: #8e44ad}
.latest {margin-top: 40px}
.latest .toggle-info {color: #999}
.latest .toggle-info:hover {color: #444; cursor: pointer}
.latest-users {margin-bottom: 0}
.latest-users li {padding: 10px; overflow: hidden}
.latest-users li:nth-child(odd) {background-color: #eee}
.latest-users .btn-success, .latest-users .btn-info {padding: 2px 8px}
.latest-users .btn-info {margin-right: 5px}
.latest .comment-box {margin: 5px 0 10px}
.latest .comment-box .member-n, .latest .comment-box .member-c {float: left}
.latest .comment-box .member-n {margin-right: 20px; width: 80px; text-align: center; position: relative; top: 10px}
.latest .comment-box .member-c {width: calc(100% - 100px); position: relative; background-color: #efefef; padding: 10px} /* the sum of the width of .member-n */
.latest .comment-box .member-c::before {content: ""; display: block; position: absolute; left: -28px; top: 5px; width: 0px; height: 0; border-style: solid; border-color: transparent #efefef transparent transparent; border-width: 15px} /* to make a triangle */
/* End: Dashboard Page */

/* Start: Members Page */
h1 {font-size: 55px; margin: 40px 0; font-weight: bold; color: #fff}
.show-pass {position: absolute; top: 6px; right: -30px}
.manage-members img {width: 50px; height: 50px}
.main-table {box-shadow: 0 3px 10px #ccc; -webkit-box-shadow: 0 3px 10px #ccc; -moz-box-shadow: 0 3px 10px #ccc}
.main-table td {background-color: #fff; vertical-align: middle !important}
.main-table tr:first-child td {background-color:#333; color: #fff} /* You can use <thead> instead of tr:first-child */
.main-table .btn {padding: 3px 10px}
/* .activate {margin-left: 5px} */
/* .activate {margin-left: 5px; margin-top: 1px} */
/* End: Members Page */

/* Start: Categories Page */
.categories .panel-heading {color: #959595; font-weight: bold}
.categories .panel-heading i {position: relative; top: 1px}
.categories .panel-body {padding: 0}
.categories .option a {color: #888; text-decoration: none}
.categories .option span {color: #888; cursor: pointer}
.categories .option .active {color: #f00; font-weight: bold} /* Check backend.js file */
.categories hr {margin-top: 0; margin-bottom: 0}
.categories .cat {padding: 15px; position: relative; overflow: hidden}
.categories .cat:hover {background-color: #eee}
.categories .cat:hover .hidden-buttons {right: 10px}
.categories .cat .hidden-buttons {position: absolute; right: -120px; top: 15px; transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out}
.categories .cat .hidden-buttons a {margin-right: 5px}
.categories .cat h3 {margin: 0; cursor: pointer; font-weight: bold; color: #6a6a6a}
.categories .cat .full-view p {margin: 10px 0; color: #707070}
.categories .cat:last-of-type ~ hr {display: none}
.categories .cat .visibility {background-color: #d35400; color: #fff; padding: 4px 6px; margin-right: 6px; border-radius: 6px}
.categories .cat .commenting {background-color: #2c3e50; color: #fff; padding: 4px 6px; margin-right: 6px; border-radius: 6px}
.categories .cat .advertises {background-color: #c0392b; color: #fff; padding: 4px 6px; margin-right: 6px; border-radius: 6px}
.categories .add-category {margin-bottom: 30px; margin-top: -10px}
.categories .child-head {margin: 15px 0 10px; font-weight: bold; font-size: 16px; color: #22ab79}
.categories .child-cats {margin: 0}
.categories .child-cats li {margin-left: 15px}
.categories .child-cats li::before {content: '- '}
.categories .show-delete {color: #f00; display: none}
/* End: Categories Page */