/* Headings */ h1, h2, h3, .h1, .h2, .h3 { letter-spacing: -1px; } h1, .h1 { font-size: 36px; font-size: 3.6rem; } h2, .h2 { font-size: 30px; font-size: 3rem; } h3, .h3 { font-size: 24px; font-size: 2.4rem; } h4, .h4 { font-size: 18px; font-size: 1.8rem; } h5, .h5 { font-size: 14px; font-size: 1.4rem; } h6, .h6 { font-size: 12px; font-size: 1.2rem; letter-spacing: 0; } /* Alternative Font Style */ .alternative-font { color: #cccccc; font-family: "Shadows Into Light", cursive; font-size: 1.6em; } /* Drop Caps */ p.drop-caps:first-child:first-letter { float: left; font-size: 75px; line-height: 60px; padding: 4px; margin-right: 5px; margin-top: 5px; font-family: Georgia; color: #171717; } p.drop-caps.secundary:first-child:first-letter { background-color: #171717; color: #FFF; padding: 6px; margin-right: 5px; border-radius: 4px; } p.drop-caps.colored:first-child:first-letter { color: #cccccc; } p.drop-caps.colored.secundary:first-child:first-letter { background-color: #cccccc; color: #FFF; } /* Blockquote */ blockquote { font-size: 1em; } /* Hightlight */ .highlight { background-color: #cccccc; color: #FFF; padding: 3px 6px; } /* Divider Line */ hr { border: 0; height: 1px; background-image: -webkit-linear-gradient(left, transparent, rgba(0, 0, 0, 0.2), transparent); background-image: -moz-linear-gradient(left, transparent, rgba(0, 0, 0, 0.2), transparent); background-image: -ms-linear-gradient(left, transparent, rgba(0, 0, 0, 0.2), transparent); background-image: -o-linear-gradient(left, transparent, rgba(0, 0, 0, 0.2), transparent); margin: 22px 0 22px 0; } hr.short { margin: 11px 0 11px 0; } hr.tall { margin: 44px 0 44px 0; } hr.taller { margin: 66px 0 66px 0; } hr.light { background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); } hr.dotted { height: 0; border-bottom: 1px dotted #ddd; } hr.solid { height: 0; border-bottom: 1px solid #ddd; } /* Buttons Icon */ .btn-icon i { margin-right: 10px; } .btn-icon-right i { margin-right: 0; margin-left: 10px; } /* Form Elements */ input { outline: none; } label { font-weight: normal; } textarea { resize: vertical; } textarea[data-toggle=autosize] { -webkit-transition: height 0.15s ease-in; -moz-transition: height 0.15s ease-in; transition: height 0.15s ease-in; } select { border: 1px solid #E5E7E9; border-radius: 6px; height: 46px; padding: 12px; outline: none; } /* Forms Validations */ label.valid { display: inline-block; text-indent: -9999px; } label.error { color: #C10000; font-size: 0.9em; margin-top: -5px; padding: 0; } /* Miscellaneous */ body a, body a:focus, body a:hover, body a:active, body a:visited { outline: none !important; } .center { text-align: center; } ul, ol { margin-bottom: 0; padding-left: 27px; } blockquote.primary { border-color: #cccccc; } blockquote.success { border-color: #47a447; } blockquote.warning { border-color: #ed9c28; } blockquote.danger { border-color: #d2322d; } blockquote.info { border-color: #5bc0de; } blockquote.dark { border-color: #171717; } .well.primary { background: #cccccc; border-color: #b3b3b3; color: white; } .well.success { background: #47a447; border-color: #388038; color: white; } .well.warning { background: #ed9c28; border-color: #d18211; color: white; } .well.danger { background: #d2322d; border-color: #a82824; color: white; } .well.info { background: #5bc0de; border-color: #31b0d5; color: white; } .well.dark { background: #171717; border-color: black; color: white; } /* Arrows */ .arrow { background: transparent url(../images/arrows.png) no-repeat 0 0; width: 47px; height: 120px; display: inline-block; position: relative; } .arrow.vtl { background-position: 0 0; width: 47px; height: 96px; } .arrow.vtr { background-position: -101px 0; width: 47px; height: 96px; } .arrow.vbl { background-position: 0 -144px; width: 47px; height: 96px; } .arrow.vbr { background-position: -101px -144px; width: 47px; height: 96px; } .arrow.hlt { background-position: -209px 0; width: 120px; height: 47px; } .arrow.hlb { background-position: -209px -101px; width: 120px; height: 47px; } .arrow.hrt { background-position: -353px 0; width: 120px; height: 47px; } .arrow.hrb { background-position: -353px -101px; width: 120px; height: 47px; } .img-thumbnail { border-radius: 8px; position: relative; } .img-thumbnail .zoom { display: block; position: absolute; right: 8px; bottom: 8px; height: 30px; width: 30px; padding: 6px; font-size: 14px; line-height: 18px; background: #CCC; border-radius: 100%; color: #FFF; text-align: center; } .img-thumbnail .zoom i { position: relative; top: -1px; left: -1px; } /* Thumbnail Gallery */ .thumbnail-gallery { list-style: none; margin: 10px 0; padding: 0; } .thumbnail-gallery .img-thumbnail, .thumbnail-gallery .thumbnail { margin: 10px 10px 0 0; } /* Navs */ ul.nav-list.primary > li { margin: 0; padding: 0; } ul.nav-list.primary > li:last-child a { border-bottom: transparent !important; } ul.nav-list.primary > li a { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; background-position: 9px 16px; background-repeat: no-repeat; border-bottom: 1px solid #EDEDDE; padding: 8px 20px; } /* Tables - Basic */ .table { width: 100%; } .table .table { background: transparent; } /* Bootstrap uses important, we need to force it here */ .table.mb-none { margin-bottom: 0 !important; } /* In case you dont want a border in some row */ .table .b-top-none td { border-top: none; } /* Tables - Actions */ .table .actions, .table .actions-hover { vertical-align: middle; } .table .actions a, .table .actions-hover a { display: inline-block; margin-right: 5px; color: #666; } .table .actions a:last-child, .table .actions-hover a:last-child { margin-right: 0; } .table .actions a:hover, .table .actions-hover a:hover { color: #333; } .table .actions-hover a { opacity: 0; } .table tr:hover .actions-hover a { opacity: 1; } .table .actions-fade a { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; } /* Tables - No More Tables technique (991px is the bootstrap SM max-width) */ @media only screen and (max-width: 991px) { .table.table-no-more, .table.table-no-more thead, .table.table-no-more tbody, .table.table-no-more tr, .table.table-no-more th, .table.table-no-more td { display: block; } .table.table-no-more thead tr { left: -9999px; position: absolute; top: -9999px; } .table.table-no-more tr { border-bottom: 1px solid #DDD; } .table.table-no-more td { border: none; position: relative; padding-left: 50%; text-align: left; white-space: normal; } .table.table-no-more td:before { content: attr(data-title); font-weight: bold; left: 6px; padding-right: 10px; position: absolute; text-align: left; top: 8px; white-space: nowrap; width: 45%; } .table.table-no-more.table-bordered td { border-bottom: 1px solid #EFEFEF; } .table.table-no-more.table-condensed td:before { top: 5px; } } /* Dark - Tables */ html.dark .table > thead > tr > th, html.dark .table > tbody > tr > th, html.dark .table > tfoot > tr > th, html.dark .table > thead > tr > td, html.dark .table > tbody > tr > td, html.dark .table > tfoot > tr > td, html.dark .table-bordered { border-color: #262b33; } html.dark .table-striped > tbody > tr:nth-child(2n+1) > td, html.dark .table-striped > tbody > tr:nth-child(2n+1) > th { background-color: #282d36; } html.dark .table-hover > tbody > tr:hover > td, html.dark .table-hover > tbody > tr:hover > th { background-color: #272c34; } html.dark .table .actions a, html.dark .table .actions-hover a { color: #808697; } @media screen and (max-width: 991px) { html.dark .table-responsive { border-color: #262b33; } } @media only screen and (max-width: 991px) { html.dark .table.table-no-more tr, html.dark .table.table-no-more.table-bordered td { border-bottom-color: #262b33; } } /* Tables - States */ .table > thead > tr > td.primary, .table > tbody > tr > td.primary, .table > tfoot > tr > td.primary, .table > thead > tr > th.primary, .table > tbody > tr > th.primary, .table > tfoot > tr > th.primary, .table > thead > tr.primary > td, .table > tbody > tr.primary > td, .table > tfoot > tr.primary > td, .table > thead > tr.primary > th, .table > tbody > tr.primary > th, .table > tfoot > tr.primary > th { color: #FFF; background-color: #cccccc; } .table > thead > tr > td.success, .table > tbody > tr > td.success, .table > tfoot > tr > td.success, .table > thead > tr > th.success, .table > tbody > tr > th.success, .table > tfoot > tr > th.success, .table > thead > tr.success > td, .table > tbody > tr.success > td, .table > tfoot > tr.success > td, .table > thead > tr.success > th, .table > tbody > tr.success > th, .table > tfoot > tr.success > th { color: #FFF; background-color: #47a447; } .table > thead > tr > td.warning, .table > tbody > tr > td.warning, .table > tfoot > tr > td.warning, .table > thead > tr > th.warning, .table > tbody > tr > th.warning, .table > tfoot > tr > th.warning, .table > thead > tr.warning > td, .table > tbody > tr.warning > td, .table > tfoot > tr.warning > td, .table > thead > tr.warning > th, .table > tbody > tr.warning > th, .table > tfoot > tr.warning > th { color: #FFF; background-color: #ed9c28; } .table > thead > tr > td.danger, .table > tbody > tr > td.danger, .table > tfoot > tr > td.danger, .table > thead > tr > th.danger, .table > tbody > tr > th.danger, .table > tfoot > tr > th.danger, .table > thead > tr.danger > td, .table > tbody > tr.danger > td, .table > tfoot > tr.danger > td, .table > thead > tr.danger > th, .table > tbody > tr.danger > th, .table > tfoot > tr.danger > th { color: #FFF; background-color: #d2322d; } .table > thead > tr > td.info, .table > tbody > tr > td.info, .table > tfoot > tr > td.info, .table > thead > tr > th.info, .table > tbody > tr > th.info, .table > tfoot > tr > th.info, .table > thead > tr.info > td, .table > tbody > tr.info > td, .table > tfoot > tr.info > td, .table > thead > tr.info > th, .table > tbody > tr.info > th, .table > tfoot > tr.info > th { color: #FFF; background-color: #5bc0de; } .table > thead > tr > td.dark, .table > tbody > tr > td.dark, .table > tfoot > tr > td.dark, .table > thead > tr > th.dark, .table > tbody > tr > th.dark, .table > tfoot > tr > th.dark, .table > thead > tr.dark > td, .table > tbody > tr.dark > td, .table > tfoot > tr.dark > td, .table > thead > tr.dark > th, .table > tbody > tr.dark > th, .table > tfoot > tr.dark > th { color: #FFF; background-color: #171717; } .table > thead > tr > td.dark, .table > tbody > tr > td.dark, .table > tfoot > tr > td.dark, .table > thead > tr > th.dark, .table > tbody > tr > th.dark, .table > tfoot > tr > th.dark, .table > thead > tr.dark > td, .table > tbody > tr.dark > td, .table > tfoot > tr.dark > td, .table > thead > tr.dark > th, .table > tbody > tr.dark > th, .table > tfoot > tr.dark > th { background-color: #4a4a4a; color: white; } /* Invoice */ .invoice { padding: 0 15px 15px; } /* Invoice Address Tag */ .invoice address { color: #7F8597; line-height: 1.5em; } /* Invoice header */ .invoice header { border-bottom: 1px solid #DADADA; margin-bottom: 15px; } .invoice header .h2, .invoice header .h4 { letter-spacing: 0; } /* Invoice Billing Information */ .invoice .bill-to, .invoice .bill-data { padding: 15px 0; } .invoice .bill-data .value { display: inline-block; margin-left: 10px; width: 90px; } /* Invoice table */ .invoice table.table { table-layout: fixed; } .invoice table.table > thead:first-child > tr > th { background-color: #F8F8F8; border-bottom: 1px solid #DADADA; border-top: 1px solid #DADADA; } .invoice table.table > tbody tr > td { border-color: #DADADA; } /* Invoice table items */ .invoice .invoice-items > tbody tr:last-child > td { border-bottom: 1px solid #DADADA; } .invoice .invoice-items #cell-id { width: 10%; } .invoice .invoice-items #cell-item { width: 20%; } .invoice .invoice-items #cell-desc { width: 20%; } .invoice .invoice-items #cell-price { width: 10%; } .invoice .invoice-items #cell-qty { width: 10%; } .invoice .invoice-items #cell-total { width: 10%; } /* Invoice summary */ .invoice-summary .col-sm-4 { padding-left: 0; } /* Invoice Responsiveness */ @media only screen and (max-width: 991px) { .invoice .table-responsive > table.table { table-layout: auto; } .invoice-summary .col-sm-4 { padding-left: 15px; } } /* Invoice Print */ @media print { .invoice .table-responsive { border: none !important; overflow: visible !important; width: auto !important; } .invoice table.table.invoice-items { table-layout: auto; } .invoice header .col-sm-6:first-child, .invoice header .col-sm-6:last-child, .invoice .bill-info .col-md-6 { float: left !important; } .invoice header .col-sm-6:first-child { width: 25% !important; } .invoice header .col-sm-6:last-child { width: 75% !important; } .invoice .bill-info .col-md-6 { width: 50% !important; } .invoice .invoice-summary .col-sm-4 { float: right; padding: 0; width: 40%; } } /* dark */ html.dark .invoice header { border-bottom-color: #282d36; } html.dark .invoice table.table > thead:first-child > tr > th { background-color: #282d36; border-bottom-color: #282d36; border-top-color: #282d36; } html.dark .invoice table.table > tbody tr > td { border-color: #282d36; }