/* Author: Louis Holladay
 * Website: AdminDesigns.com
 * Last Updated: 02/01/14 
 * Copyright 2014 Admin Designs
=================================================
   I. Pages - In Order
      A. Dashboard.html
	  B. 404/500.html
	  C. Coming-soon.html
	  D. Screenlock.html
	  E. Login.html
	  F. Profile.html
	  G. Invoice-page.html
	  H. Gallery.html
	  I. Validation.html
	  J. Upload-tools.html
	  K. Index.html
	  L. Sketchpad.html
	  M. Messages.html
	  N. Timeline.html
	  O. "Minimal" Pages

 * This file is reserved for changes done on
 * a per-page basis. To create independent
 * page layouts an additional class was added 
 * to the pages body. For example login.html
 * has an extra body class of ".login-page"
 
 * Note: Pages not listed here were made using
 * 100% reusable styles placed in theme.css
================================================= 
 A. Dashboard.html - Animated Index.html
================================================= */
body.index-load {
  background-color: #FDC162;
  overflow: hidden; }

body.index-load .navbar {
  z-index: 9999; }

body.index-load #main {
  overflow: hidden; }

body.index-load .navbar, body.index-load #main {
  display: none; }

body.index-load #sidebar.refresh {
  background: #FFF; }

body.index-load #content.refresh {
  background-color: #e8e8e8;
  -webkit-box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.33) inset;
  box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.33) inset; }

body.index-load #page-loader {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #FDC162;
  z-index: 9998;
  text-align: center; }

body.index-load #page-loader span {
  position: relative;
  color: rgba(0, 0, 0, 0.1);
  height: auto;
  width: auto;
  top: 35%;
  font-size: 13em; }

body.index-load .sparkline-delay {
  display: none; }

/*===============================================
  B. 404/500.html
================================================= */
/* Error search bar */
body.error-page #search-widget {
  background: #f1f1f1; }

/* Error text */
body.error-page .error-icon {
  color: #ee4e3c;
  font-size: 80px;
  position: relative;
  top: -10px; }

body.error-page .error-text {
  font-size: 120px;
  text-align: center;
  text-shadow: 0 2px #FFF;
  color: #888;
  width: 100%; }

/*===============================================
  C. Coming-soon.html
================================================= */
body.coming-soon-page {
  background: #f6f6f6; }

body.coming-soon-page #main {
  background: url(../img/patterns/coming-soon-bg.jpg) no-repeat center -60px; }

body.coming-soon-page #page-logo {
  width: 250px;
  margin: 50px auto 80px; }

body.coming-soon-page .cntSeparator {
  margin: 27px 18px; }

body.coming-soon-page .panel {
  width: 600px;
  margin: 0 auto;
  position: relative; }

body.coming-soon-page .panel-title {
  font-size: 17px;
  float: none; }

body.coming-soon-page .panel-body {
  padding: 40px 26px; }

/*===============================================
  D. Screenlock.html
================================================= */
body.screenlock-page {
  background: url(../img/patterns/5.png) repeat top left #f6f6f6; }

body.screenlock-page #page-logo {
  width: 250px;
  margin: 50px auto 80px; }

body.screenlock-page .panel {
  width: 500px;
  margin: 0 auto;
  position: relative; }

body.screenlock-page .login-info {
  margin: 20px 0;
  font-size: 13px; }

body.screenlock-page .login-info .login-name b {
  font-size: 14px; }

body.screenlock-page .login-info .login-email {
  padding-top: 8px;
  font-size: 12px;
  color: #AAA; }

body.screenlock-page .login-avatar {
  padding: 6px 20px 25px 10px;
  margin-right: 20px;
  border-right: 1px dashed #DDD;
  float: left; }

body.screenlock-page .login-avatar img {
  display: block;
  margin: 0 auto;
  padding: 5px;
  border: 2px solid #DDD; }

body.screenlock-page .login-alert {
  padding-top: 15px;
  margin: 5px 0;
  border-top: 1px dashed #DDD;
  clear: both; }

body.screenlock-page .login-alert .alert {
  font-size: 13px;
  padding: 7px 13px;
  margin-bottom: 0; }

/*===============================================
  E. Login.html
================================================= */
body.login-page {
  background: url(../img/patterns/5.png) repeat top left #f6f6f6; }

body.login-page #page-logo {
  width: 250px;
  margin: 50px auto 80px; }

body.login-page .panel {
  width: 400px;
  margin: 0 auto;
  position: relative; }

body.login-page .login-avatar {
  margin: 15px 20px 25px;
  padding-bottom: 25px;
  border-bottom: 1px dashed #DDD; }

body.login-page .login-avatar img {
  display: block;
  margin: 0 auto;
  padding: 5px;
  border: 2px solid #DDD; }

body.login-page .login-alert {
  font-size: 13px;
  padding: 9px 13px; }

/*===============================================
  F. Profile.html
================================================= */
/* User widget info */
body.profile-page ul.profile-info {
  margin-top: 10px;
  margin-bottom: 20px; }

body.profile-page ul.profile-info li {
  color: #999;
  font-size: 13px; }

body.profile-page ul.profile-info li i.fa {
  padding-right: 12px; }

body.profile-page .console-btn {
  margin-bottom: 0; }

/* User widget */
body.profile-page .profile-data {
  font-size: 13px;
  padding-top: 7px; }

body.profile-page .profile-data .profile-name b {
  font-size: 14px; }

body.profile-page .profile-data .profile-email {
  padding-top: 8px;
  font-size: 12px;
  color: #AAA; }

body.profile-page #profile-avatar {
  border-right: 1px dashed #DDD; }

body.profile-page #profile-avatar img {
  display: block;
  margin: 0 auto;
  padding: 5px;
  border: 2px solid #DDD;
  max-height: 140px; }

/* User widget footer buttons */
body.profile-page .profile-panel .panel-footer {
  padding: 20px 16px 16px;
  text-align: center;
  border-color: #CCC; }

/*===============================================
  G. Invoice.html
================================================= */
/* Invoice title */
body.invoice-page #invoice-title {
  margin-bottom: 60px; }

/* invoice logo */
body.invoice-page #invoice-title .invoice-logo {
  width: 180px;
  margin: 13px auto; }

/* Invoice info boxes */
body.invoice-page #invoice-info {
  border-bottom: 1px dashed #DDD;
  margin-bottom: 30px;
  padding-bottom: 10px; }

body.invoice-page #invoice-info ul {
  margin-bottom: 5px; }

body.invoice-page #invoice-info ul li {
  margin-bottom: 0px; }

/* Invoice table */
body.invoice-page .table-condensed tbody tr td:last-child {
  text-align: right;
  padding-right: 15px; }

/* Summary table */
body.invoice-page #invoice-summary {
  margin: 0; }

/* Summary table header */
body.invoice-page #invoice-summary thead th:first-child {
  text-align: right;
  width: 200px;
  padding-right: 55px; }

body.invoice-page #invoice-summary thead th:last-child {
  width: 50px;
  font-weight: 400; }

/* Summary table rows */
body.invoice-page #invoice-summary tbody tr td {
  border-top: 0; }

body.invoice-page #invoice-summary tbody tr td:first-child {
  text-align: right;
  width: 200px;
  padding-right: 55px; }

/* Summary table last row */
body.invoice-page #invoice-summary tbody tr:last-child td {
  background: #f8f8f8;
  border-top: 1px solid #DDD;
  border-bottom: 1px solid #DDD;
  height: 35px;
  line-height: 35px; }

/* Bottom of page invoice buttons */
body.invoice-page .invoice-buttons {
  position: absolute;
  left: 15px;
  bottom: 10px; }

/* Panel sidemenu overrides */
body.invoice-page .panel-sidemenu {
  width: 18%; }

body.invoice-page .panel-sidemenu + .panel-body {
  width: 75%;
  margin: 40px 3.5% 60px; }

@media (max-width: 1000px) {
  body.invoice-page .panel-sidemenu {
    display: none; }

  body.invoice-page .panel-sidemenu + .panel-body {
    width: 93%;
    margin: 40px 3.5% 100px; } }
/*===============================================
  H. Gallery.html
================================================= */
/* GALLERY.HTML */
body.gallery-page .panel-menu .tab-content {
  padding: 0;
  border: 0;
  min-height: 0;
  background: transparent; }

/* DYNAMIC-GALLERY.HTML */
/* Additional Classes applied to Jquery FileUploader 
 * to enable sorting and filtering on images */
body.dynamic-gallery-page .mixitups {
  overflow: auto;
  display: block;
  position: relative; }

body.dynamic-gallery-page #Grid {
  font-size: 0;
  text-align: left; }

/* Image Preview After Upload */
body.dynamic-gallery-page #Grid li.template-download,
body.dynamic-gallery-page #Grid li.template-upload {
  display: inline-block;
  position: relative;
  width: 18%;
  margin: 0 1%;
  height: 160px;
  padding: 0;
  max-height: 160px;
  overflow: hidden;
  margin-bottom: 25px;
  opacity: 1; }

body.dynamic-gallery-page #Grid li.template-download a,
body.dynamic-gallery-page #Grid li.template-upload a {
  display: block; }

body.dynamic-gallery-page #Grid li.template-download a img,
body.dynamic-gallery-page #Grid li.template-upload a img {
  display: block;
  max-width: 100%;
  border: 1px solid #CCC; }

body.dynamic-gallery-page #Grid li.template-download .image-buttons {
  display: none;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  background: rgba(0, 0, 0, 0.55); }

body.dynamic-gallery-page #Grid li.template-download:hover .image-buttons {
  display: block; }

/* Image Preview Before Upload */
body.dynamic-gallery-page #Grid li.template-upload .upload-preview {
  border-top: 2px solid #CCC; }

body.dynamic-gallery-page #Grid li.template-upload canvas {
  max-width: 100%; }

body.dynamic-gallery-page #Grid li.template-upload .preview-progress {
  width: 100%; }

body.dynamic-gallery-page #Grid li.template-upload .preview-progress p.size {
  position: absolute;
  left: 0;
  font-weight: 600;
  width: 100%;
  text-align: center; }

body.dynamic-gallery-page #Grid li.template-upload .preview-progress .progress {
  height: 21px;
  margin: 0; }

body.dynamic-gallery-page #Grid li.template-upload .preview-buttons {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  background: rgba(0, 0, 0, 0.55); }

/* jQuery UI placeholder */
body.dynamic-gallery-page #Grid .placeholder {
  position: relative;
  display: inline-block;
  font-size: 0;
  width: 18%;
  height: 160px;
  padding: 0;
  margin: 0 1%;
  margin-bottom: 25px;
  overflow: hidden;
  background: #DDD; }

/*===============================================
  I. Validation.html
================================================= */
body.validation-page label.error {
  font-weight: 600;
  color: #d9534f;
  font-size: 12px;
  margin: 6px 0 0 2px; }

/*===============================================
  J. Upload-tools.html
================================================= */
body.upload-tools-page #fileupload .progress {
  margin-bottom: 0;
  width: 100%;
  min-width: 75px; }

body.upload-tools-page #fileupload table td {
  vertical-align: middle; }

/* Keeps preview image from becoming to large */
body.upload-tools-page #fileupload table td .preview canvas {
  max-height: 60px; }

/* Aligns action buttons to right */
body.upload-tools-page #fileupload table td:last-child {
  text-align: right; }

/*===============================================
  K. Index.html
================================================= */
.console-btn {
  text-shadow: 0 1px #ffffff;
  border-color: #cccccc rgba(0, 0, 0, 0.19) rgba(0, 0, 0, 0.18);
  background-color: #f0f0f0;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.1) 100%);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff',endColorstr='#00ffffff',GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  margin-bottom: 20px;
  padding: 10px 10px 10px 15px;
  display: inline-block;
  width: 100%;
  cursor: pointer;
  border-radius: 3px;
  text-shadow: 0 1px #fff;
  border: 1px solid #d2d2d2; }

.console-btn:hover .console-icon {
  color: #d9534f; }

.console-btn .console-icon {
  height: 40px;
  display: inline-block;
  vertical-align: top;
  font-size: 30px; }

.console-btn .console-text {
  display: inline-block;
  padding-top: 3px; }

.console-btn .console-title {
  font-size: 17px;
  line-height: 20px;
  font-weight: 500;
  color: #555; }

.console-btn .console-subtitle {
  font-size: 12px;
  color: #888; }

.console-filter {
  float: right;
  width: 77%;
  padding-top: 4px;
  margin-right: 5%; }

/* Dividers for console icons - Options: Left, right, Bottom */
.console-btn .console-icon.divider-right {
  padding-right: 10px;
  margin-right: 10px;
  border-right: 1px solid #DDD;
  position: relative; }

.console-btn .console-icon.divider-right:after {
  content: "";
  margin-right: -2px;
  border-right: 1px solid #fff;
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%; }

.console-btn .console-icon.divider-left {
  padding-left: 10px;
  margin-left: 10px;
  border-left: 1px solid #DDD; }

.console-btn .console-icon.divider-bottom {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #DDD; }

/* Console Button Alt Style - Block Icon, best used without divider */
.console-btn.console-block .console-icon {
  display: block;
  height: auto; }

.console-btn.console-block .console-text {
  display: block;
  padding: 0; }

/* Console Button Alt Style - No BG */
.console-btn.console-alt {
  border: 0;
  background: none;
  box-shadow: none;
  padding: 5px 8px; }

.console-btn.console-alt .console-icon {
  font-size: 20px; }

.console-btn.console-alt .console-text {
  padding: 0; }

.console-btn.console-alt .console-title {
  font-size: 14px; }

.console-btn.console-alt .console-badge .badge {
  position: absolute;
  top: -5px;
  right: 20px;
  text-shadow: none; }

/* CHART ICONS */
.chart-btn {
  padding-top: 8px; }

.chart-btn .chart-icon {
  display: inline-block;
  vertical-align: top;
  width: 100px;
  height: 40px;
  margin-bottom: 10px; }

.chart-btn .chart-text {
  display: inline-block;
  vertical-align: top; }

.chart-btn .chart-title {
  font-size: 24px;
  line-height: 24px;
  font-weight: 500;
  color: #555; }

.chart-btn .chart-subtitle {
  font-size: 15px;
  color: #888;
  text-align: left; }

/* MESSAGE WIDGET */
body.dashboard .message-widget {
  margin-top: 20px; }

/*===============================================
  L. Sketchpad.html
================================================= */
body.sketchpad-page .wPaint-menu-holder {
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.45); }

body.sketchpad-page .chat-panel .media-img img {
  max-width: 50px;
  margin-right: 6px; }

body.sketchpad-page .chat-panel .media-content {
  padding: 6px 12px; }

body.sketchpad-page .chat-panel .media-timestamp {
  margin-bottom: 5px; }

/*===============================================
  M. Messages.html
================================================= */
body.messages-page .panel-menu {
  padding: 10px 20px; }

body.messages-page .panel-menu button {
  margin-right: 8px; }

body.messages-page .panel-menu button:last-child {
  margin-right: 0px; }

body.messages-page .messenger-header-actions .search-bar {
  max-width: 150px;
  position: relative;
  top: 2px;
  margin-right: 4px; }

body.messages-page .email-menu .table tbody > tr > td {
  padding: 10px 8px;
  border-top: 1px dashed #c9c9c9;
  vertical-align: middle; }

body.messages-page .email-menu .table tbody > tr:first-child > td {
  border-top: 0; }

body.messages-page .email-menu .table-striped > tbody > tr:nth-child(even) > td {
  background: #f8f8f8; }

body.messages-page .email-menu .table-striped > tbody > tr:nth-child(odd) > td {
  background: white; }

body.messages-page .email-menu-avatar {
  width: 15%; }

body.messages-page .email-menu-avatar img {
  min-width: 50px;
  max-width: 50px; }

body.messages-page .email-menu-message {
  color: #555;
  font-size: 13px;
  line-height: 17px; }

body.messages-page .email-menu-date {
  font-size: 11px;
  text-align: right; }

body.messages-page .email-date {
  color: #888;
  font-size: 11px; }

body.messages-page .email-message {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #c9c9c9; }

body.messages-page .email-message p {
  font-size: 15px; }

body.messages-page .email-avatar {
  max-width: 70px;
  margin-top: 12px;
  margin-right: 20px;
  border: 2px solid #CCC; }

/*===============================================
  N. Timeline.html
================================================= */
body.timeline-page #main {
  min-height: 1400px; }

#timeline {
  position: relative; }

/* Timeline Spine */
#timeline:after {
  position: absolute;
  top: 0;
  left: 50%;
  width: 8px;
  height: 100%;
  content: "";
  background: #ddd;
  -webkit-box-shadow: 1px 0 1px #AAA inset,-1px 0 1px #f5f5f5 inset;
  box-shadow: 1px 0 1px #AAA inset,-1px 0 1px #f5f5f5 inset; }

/* Timeline Date Button/Label */
.timeline-divider {
  position: relative;
  margin: 10px 0 45px;
  z-index: 3; }

.timeline-divider .divider-label {
  text-shadow: 0 1px #ffffff;
  border-color: #cccccc rgba(0, 0, 0, 0.19) rgba(0, 0, 0, 0.18);
  background-color: #f0f0f0;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.1) 100%);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff',endColorstr='#00ffffff',GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  min-width: 100px;
  width: 10%;
  margin: 0 auto;
  padding: 5px 5px;
  text-align: center;
  border: 1px solid #CCC;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }

/* Timeline Content Panels */
#timeline .panel {
  position: relative;
  cursor: move;
  z-index: 11;
  overflow: visible; }

/* Timeline Spine Circle */
#timeline > .row .panel:before {
  position: absolute;
  top: 16px;
  right: -64px;
  width: 26px;
  height: 26px;
  content: "";
  z-index: 3;
  border-radius: 50%;
  background: #d2d2d2;
  -webkit-box-shadow: 1px 0 1px #999 inset,-1px 0 1px #ffffff inset;
  box-shadow: 1px 0 1px #999 inset,-1px 0 1px #ffffff inset; }

#timeline > .row .panel:after {
  text-shadow: 0 1px #ffffff;
  border-color: #cccccc rgba(0, 0, 0, 0.19) rgba(0, 0, 0, 0.18);
  background-color: #f0f0f0;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.1) 100%);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff',endColorstr='#00ffffff',GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  position: absolute;
  top: 22px;
  right: -57px;
  width: 14px;
  height: 14px;
  content: "";
  z-index: 4;
  border-radius: 50%;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }

#timeline > .row > .right-column .panel:before {
  top: 14px;
  left: -57px; }

#timeline > .row > .right-column .panel:after {
  top: 20px;
  left: -52px; }

#timeline > .row > .right-column .panel .panel-heading:before {
  left: -23px; }

#timeline > .row > .right-column .panel .panel-heading:after {
  left: -19px; }

#timeline > .row > .left-column .panel.dragging:before,
#timeline > .row > .left-column .panel.dragging:after,
#timeline > .row > .right-column .panel.dragging:before,
#timeline > .row > .right-column .panel.dragging:after {
  display: none; }

/* Timeline Panel Positioning */
#timeline > .row > .left-column .panel {
  margin-right: 32px; }

#timeline > .row > .right-column .panel {
  margin-left: 32px; }

#timeline > .row > .right-column {
  margin-top: 60px; }

#timeline .ui-sortable-disabled .panel {
  cursor: auto; }

/* Timeline Responsive Styles */
@media (max-width: 770px) {
  #timeline > .row > .left-column .panel {
    margin-right: 0; }

  #timeline > .row > .right-column .panel {
    margin-left: 0; }

  #timeline > .row .panel:before {
    display: none; }

  #timeline > .row .panel:after {
    display: none; } }
#timeline .tab-content {
  min-height: 0; }

/* form creation styles */
#timeline .map {
  width: 100%;
  height: 300px;
  border: 1px solid #AAA; }

#timeline-image-form .fileupload-preview {
  text-align: center; }

#timeline-image-form .fileupload-preview img {
  max-height: 200px; }

#timeline div.checker input {
  vertical-align: top; }

/* JQuery sortable placeholder */
#timeline .ui-sortable {
  min-height: 150px;
  min-width: 300px; }

#timeline .ui-sortable-placeholder {
  visibility: visible !important;
  margin-bottom: 35px;
  background: #DDD;
  border: 1px solid #bbb;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 3px #BBB inset, 1px 1px 0px #fff;
  box-shadow: 0 1px 3px #BBB inset, 1px 1px 0px #fff; }

#timeline .ui-sortable-placeholder * {
  visibility: hidden; }

/*===============================================
  O. "Minimal" Pages
 ------------------------------------------------
  * Pages classified as "minimal" are those
  * which do not have sidebar or header. 
  * This simply adjusts the background.
================================================= */
body.minimal {
  background: #f4f4f4; }