/*
* critical.css
* ============
* Inline this in
* — OR —
*
*/
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);
/*!
* AdminLTE v2.3.8
* Author: Almsaeed Studio
* Website: Almsaeed Studio
* License: Open source - MIT
* Please visit http://opensource.org/licenses/MIT for more information
!*/
/*
* Core: General Layout Style
* -------------------------
*/
html,
body {
height: 100%;
font-size: 14px;
margin: 0;
padding: 0;
}
.layout-boxed html,
.layout-boxed body {
height: 100%;
}
body {
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 400;
overflow-x: hidden;
overflow-y: auto;
}
/* Layout */
/* Content area */
.main-content, .box-body, .content-wrapper {
font-size: 14px;
}
.wrapper {
height: 100%;
position: relative;
overflow-x: hidden;
overflow-y: auto;
margin-top: 0;
padding-top: 0;
}
.wrapper:before,
.wrapper:after {
content: " ";
display: table;
}
.wrapper:after {
clear: both;
}
.layout-boxed .wrapper {
max-width: 1250px;
margin: 0 auto;
min-height: 100%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
position: relative;
}
.layout-boxed {
background: url('../img/boxed-bg.jpg') repeat fixed;
}
/*
* Content Wrapper - contains the main content
* ```.right-side has been deprecated as of v2.0.0 in favor of .content-wrapper ```
*/
.content-wrapper,
.right-side,
.main-footer {
-webkit-transition: -webkit-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
margin-left: 230px;
z-index: 820;
}
.layout-top-nav .content-wrapper,
.layout-top-nav .right-side,
.layout-top-nav .main-footer {
margin-left: 0;
}
@media (max-width: 767px) {
.content-wrapper,
.right-side,
.main-footer {
margin-left: 0;
}
}
@media (min-width: 768px) {
.sidebar-collapse .content-wrapper,
.sidebar-collapse .right-side,
.sidebar-collapse .main-footer {
margin-left: 0;
}
}
@media (max-width: 767px) {
.sidebar-open .content-wrapper,
.sidebar-open .right-side,
.sidebar-open .main-footer {
-webkit-transform: translate(230px, 0);
-ms-transform: translate(230px, 0);
-o-transform: translate(230px, 0);
transform: translate(230px, 0);
}
}
.content-wrapper,
.right-side {
min-height: 100%;
background-color: #ecf0f5;
z-index: 800;
}
.main-footer {
background: #fff;
padding: 15px;
color: #444;
border-top: 1px solid #d2d6de;
}
/* Fixed layout */
.fixed .main-header,
.fixed .main-sidebar,
.fixed .left-side {
position: fixed;
}
.fixed .main-header {
top: 0;
right: 0;
left: 0;
}
.fixed .content-wrapper,
.fixed .right-side {
padding-top: 50px;
}
@media (max-width: 767px) {
.fixed .content-wrapper,
.fixed .right-side {
padding-top: 100px;
}
}
.fixed.layout-boxed .wrapper {
max-width: 100%;
}
body.hold-transition .content-wrapper,
body.hold-transition .right-side,
body.hold-transition .main-footer,
body.hold-transition .main-sidebar,
body.hold-transition .left-side,
body.hold-transition .main-header .navbar,
body.hold-transition .main-header .logo {
/* Fix for IE */
-webkit-transition: none;
-o-transition: none;
transition: none;
}
/* Content */
.content {
min-height: 250px;
padding: 15px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
/* H1 - H6 font */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-family: 'Source Sans Pro', sans-serif;
}
/* General Links */
a {
color: #3f8e92;
}
a:hover,
a:active,
a:focus {
outline: none;
text-decoration: none;
color: #00AEEF;
}
/* Page Header */
.page-header {
margin: 10px 0 20px 0;
font-size: 22px;
}
.page-header > small {
color: #666;
display: block;
margin-top: 5px;
}
/*--Component: Main Header--*/
.main-header {
position: relative;
max-height: 100px;
z-index: 1030;
}
.main-header .navbar {
-webkit-transition: margin-left 0.3s ease-in-out;
-o-transition: margin-left 0.3s ease-in-out;
transition: margin-left 0.3s ease-in-out;
margin-bottom: 0;
margin-left: 230px;
border: none;
min-height: 50px;
border-radius: 0;
}
.layout-top-nav .main-header .navbar {
margin-left: 0;
}
.main-header #navbar-search-input.form-control {
background: rgba(255, 255, 255, 0.2);
border-color: transparent;
}
.main-header #navbar-search-input.form-control:focus,
.main-header #navbar-search-input.form-control:active {
border-color: rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.9);
}
.main-header #navbar-search-input.form-control::-moz-placeholder {
color: #ccc;
opacity: 1;
}
.main-header #navbar-search-input.form-control:-ms-input-placeholder {
color: #ccc;
}
.main-header #navbar-search-input.form-control::-webkit-input-placeholder {
color: #ccc;
}
.main-header .navbar-custom-menu,
.main-header .navbar-right {
float: right;
}
@media (max-width: 991px) {
.main-header .navbar-custom-menu a,
.main-header .navbar-right a {
color: inherit;
background: transparent;
}
}
@media (max-width: 767px) {
.main-header .navbar-right {
float: none;
}
.navbar-collapse .main-header .navbar-right {
margin: 7.5px -15px;
}
.main-header .navbar-right > li {
color: inherit;
border: 0;
}
}
.main-header .sidebar-toggle {
float: left;
background-color: transparent;
background-image: none;
padding: 15px 15px;
/*font-family: fontAwesome;*/ /* Step 1: FA removed — using IcoFont */
font-family: 'IcoFont' !important;
font-weight: normal !important;
}
.main-header .sidebar-toggle:before {
/*content: "\f0c9";*/ /* Step 1: FA hamburger removed */
content: "\efa2"; /* icofont-navigation-menu */
}
.main-header .sidebar-toggle:hover {
color: #fff;
}
.main-header .sidebar-toggle:focus,
.main-header .sidebar-toggle:active {
background: transparent;
}
.main-header .sidebar-toggle .icon-bar {
display: none;
}
.main-header .navbar .nav > li.user > a > .fa,
.main-header .navbar .nav > li.user > a > .glyphicon,
.main-header .navbar .nav > li.user > a > .ion {
margin-right: 5px;
}
.main-header .navbar .nav > li > a > .label {
position: absolute;
top: 9px;
right: 7px;
text-align: center;
font-size: 9px;
padding: 2px 3px;
line-height: .9;
}
.main-header .logo {
-webkit-transition: width 0.3s ease-in-out;
-o-transition: width 0.3s ease-in-out;
transition: width 0.3s ease-in-out;
display: block;
float: left;
height: 50px;
font-size: 20px;
line-height: 50px;
text-align: center;
width: 230px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: 0 15px;
font-weight: 300;
overflow: hidden;
}
.main-header .logo .logo-lg {
display: block;
}
.main-header .logo .logo-mini {
display: none;
}
.main-header .navbar-brand {
color: #fff;
}
.content-header {
position: relative;
padding: 15px 15px 0 15px;
}
.content-header > h1 {
margin: 0;
font-size: 18px;
font-variant:small-caps;
}
.content-header > h1 > small {
font-size: 15px;
display: inline-block;
padding-left: 4px;
font-weight: 300;
}
.content-header > .breadcrumb {
float: right;
background: transparent;
margin-top: 0;
margin-bottom: 0;
font-size: 12px;
padding: 7px 5px;
position: absolute;
top: 10px;
right: 10px;
border-radius: 2px;
}
.content-header > .breadcrumb > li > a {
color: #444;
text-decoration: none;
display: inline-block;
}
.content-header > .breadcrumb > li > a > .fa,
.content-header > .breadcrumb > li > a > .glyphicon,
.content-header > .breadcrumb > li > a > .ion {
margin-right: 5px;
}
.content-header > .breadcrumb > li + li:before {
content: '>\00a0';
}
@media (max-width: 991px) {
.content-header > .breadcrumb {
position: relative;
margin-top: 5px;
top: 0;
right: 0;
float: none;
background: #d2d6de;
padding-left: 10px;
}
.content-header > .breadcrumb li:before {
color: #97a0b3;
}
}
.navbar-toggle {
color: #fff;
border: 0;
margin: 0;
padding: 15px 15px;
}
@media (max-width: 991px) {
.navbar-custom-menu .navbar-nav > li {
float: left;
}
.navbar-custom-menu .navbar-nav {
margin: 0;
float: left;
}
.navbar-custom-menu .navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
line-height: 20px;
}
}
@media (max-width: 767px) {
.main-header {
position: relative;
}
.main-header .logo,
.main-header .navbar {
width: 100%;
float: none;
}
.main-header .navbar {
margin: 0;
}
.main-header .navbar-custom-menu {
float: right;
}
}
@media (max-width: 991px) {
.navbar-collapse.pull-left {
float: none !important;
}
.navbar-collapse.pull-left + .navbar-custom-menu {
display: block;
position: absolute;
top: 0;
right: 40px;
}
}
/* === CustomLTE: Critical === */
/* Checkbox emergency override */
input[type="checkbox"],
input[type="radio"] {
opacity: 1 !important;
position: relative !important;
width: auto !important;
height: auto !important;
visibility: visible !important;
}
.icheck-primary > input:first-child { transform: scale(1.4); margin-right: 8px; }
.icheck-primary > label { cursor: pointer; padding-left: 0 !important; }
/* Layout padding helpers */
.no-pad-l { padding-left: 0px; }
.no-pad-r { padding-right: 0px; }
.pad-sm { padding: 3px; }
.pad-md { padding: 5px; }
.pad-lg { padding: 7px; }
/* Text utilities */
.sm-caps { font-variant: small-caps; font-weight: 700; }
.text-shadow { text-shadow: -1px 1px #ccc; }
.box-shadow { box-shadow: -2px 2px #ccc; }
.text-gray { color: #1A1A1A; }
.text-white { color: white; }
.text-lg { font-size: 1.2em; }
.text-xl { font-size: 1.5em; }
.text-teal { color: #3f8e92; }
.text-blue-dark { color: #002354; }
.text-gold { color: #ffd000; }
/* Background color utilities */
.bg-aqua-light { background-color: #c7f1ff; }
.bg-purple { background-color: #4B0082; }
.bg-purple-light { background-color: #e8ddf4; }
.bg-soft-blue { background-color: #4a90e2; }
.bg-soft-red { background-color: #e74c3c; }
.bg-soft-green { background-color: #2ecc71; }
.bg-blue-dark { background-color: #143957; }
.bg-amber { background-color: #FFB800; }
.bg-emerald { background-color: #004B23; }
.bg-emerald-green { background-color: #006747; }
.bg-digital-blue { background-color: #00A3E0; }
.bg-med-cyan { background-color: #00AEEF; }
/* Fade-in animation (used on page load) */
.fade-in { opacity: 0; animation: fadeInSmooth 1.5s ease-out forwards; }
@keyframes fadeInSmooth {
0% { opacity: 0; transform: translateY(25px); }
100% { opacity: 1; transform: translateY(0); }
}
.delay-1 { animation-delay: 0.5s; }
.delay-2 { animation-delay: 0.9s; }
.delay-3 { animation-delay: 1.5s; }
/* Link overrides */
a { color: #004e98; }
a:hover, a:active, a:focus { outline: none; text-decoration: none; color: #83abde; }
/* Responsive visibility */
@media (max-width: 767px) { .mob-hide { display: none; } }
@media (min-width: 768px) { .pc-hide { display: none; } }
/* Dropdown animation (layout-critical) */
.dropdown-menu {
display: block; visibility: hidden; opacity: 0;
transform: translateY(-20px);
transition: all 0.3s ease-in-out;
}
.dropdown.open .dropdown-menu { visibility: visible; opacity: 1; transform: translateY(0); }
.btn-group .dropdown-menu {
display: block; visibility: hidden; opacity: 0;
transform: translateY(-20px);
transition: all 0.3s ease-in-out;
}
.btn-group.open .dropdown-menu { visibility: visible; opacity: 1; transform: translateY(0); }
/* Advertiser menu icons color */
#ADVERTISER .icofont-megaphone-alt {
color: #FFD700;
}
#ADWALLET .icofont-wallet {
color: #FFB800;
}
#ADSTATS .icofont-chart-line {
color: #00A3E0;
}
/* Wallet badge in header */
#topAdBalanceHeader {
background-color: #FFB800;
color: #1A1A1A;
font-weight: bold;
margin-left: 5px;
padding: 2px 8px;
border-radius: 20px;
}
/* Menu divider */
.dropdown-menu .divider {
height: 1px;
margin: 5px 0;
overflow: hidden;
background-color: #e5e5e5;
}
/* Stats numbers alignment */
.dropdown-menu .menu li a .pull-right {
float: right;
font-weight: bold;
color: #004e98;
}
/* Hover effects */
#ADVERTISER:hover .dropdown-toggle,
#ADWALLET:hover .dropdown-toggle,
#ADSTATS:hover .dropdown-toggle {
background-color: rgba(0,0,0,0.1);
border-radius: 4px;
}
/* ============================================
ZONE-SPECIFIC AD SIZES
============================================ */
/* Header Zone - 728x90 */
.ad-zone-header .ad-container img,
.ad-zone-header .ad-banner {
max-width: 728px !important;
width: 100% !important;
height: auto !important;
max-height: 90px !important;
object-fit: contain;
}
/* Sidebar Zone - 300x250 */
.ad-zone-sidebar .ad-container img,
.ad-zone-sidebar .ad-banner {
max-width: 300px !important;
width: 100% !important;
height: auto !important;
max-height: 250px !important;
object-fit: contain;
}
/* In-Content Zone - 468x60 or 300x250 */
.ad-zone-in-content .ad-container img,
.ad-zone-in-content .ad-banner {
max-width: 468px !important;
width: 100% !important;
height: auto !important;
max-height: 60px !important;
object-fit: contain;
}
/* For responsive: on small screens, allow larger relative size */
@media (max-width: 768px) {
.ad-zone-in-content .ad-container img {
max-height: none;
max-width: 100%;
}
}
/* Footer Zone - 728x90 */
.ad-zone-footer .ad-container img,
.ad-zone-footer .ad-banner {
max-width: 728px !important;
width: 100% !important;
height: auto !important;
max-height: 90px !important;
object-fit: contain;
}
/* Directory Top - 728x90 */
.ad-zone-directory-top .ad-container img,
.ad-zone-directory-top .ad-banner {
max-width: 728px !important;
width: 100% !important;
height: auto !important;
max-height: 90px !important;
object-fit: contain;
}
/* General ad container */
.ad-container {
margin: 10px 0;
text-align: center;
overflow: hidden;
}
.ad-container img {
border-radius: 4px;
transition: transform 0.2s ease;
}
.ad-container img:hover {
transform: scale(1.01);
}
/* Force all ad images to respect container width */
.ad-container .ad-banner,
.ad-container img {
max-width: 100% !important;
height: auto !important;
display: block;
margin-left: auto;
margin-right: auto;
}
/* Specific max-height per zone (already defined above, but enforce) */
.ad-zone-header .ad-container img { max-height: 90px !important; }
.ad-zone-sidebar .ad-container img { max-height: 250px !important; }
.ad-zone-in-content .ad-container img { max-height: 60px !important; }
.ad-zone-footer .ad-container img { max-height: 90px !important; }
.ad-zone-directory-top .ad-container img { max-height: 90px !important; }
/* On very small screens, allow full width but maintain aspect ratio */
@media (max-width: 480px) {
.ad-zone-in-content .ad-container img {
max-height: none;
width: 100%;
}
}
/* ============================================
MOBILE RESPONSIVE AD ZONES
============================================ */
/* Base ad container styles */
.ad-container {
margin: 10px 0;
text-align: center;
overflow: hidden;
}
.ad-container img {
max-width: 100%;
height: auto;
border-radius: 4px;
transition: transform 0.2s ease;
}
.ad-container img:hover {
transform: scale(1.01);
}
/* ============================================
ZONE-SPECIFIC SIZES
============================================ */
/* Header Zone - 728x90 */
.ad-zone-header .ad-container img {
max-width: 728px;
width: 100%;
max-height: 90px;
object-fit: contain;
}
/* Sidebar Zone - 300x250 */
.ad-zone-sidebar .ad-container img {
max-width: 300px;
width: 100%;
max-height: 250px;
object-fit: contain;
}
/* In-Content Zone - 468x60 */
.ad-zone-in-content .ad-container img {
max-width: 468px;
width: 100%;
max-height: 60px;
object-fit: contain;
}
/* Footer Zone - 728x90 */
.ad-zone-footer .ad-container img {
max-width: 728px;
width: 100%;
max-height: 90px;
object-fit: contain;
}
/* Directory Top - 728x90 */
.ad-zone-directory-top .ad-container img {
max-width: 728px;
width: 100%;
max-height: 90px;
object-fit: contain;
}
/* ============================================
MOBILE BREAKPOINTS (max-width: 768px)
============================================ */
@media (max-width: 768px) {
/* Header Zone - Mobile */
.ad-zone-header .ad-container img {
max-height: 60px;
}
/* Sidebar Zone - Mobile (full width) */
.ad-zone-sidebar .ad-container img {
max-width: 100%;
max-height: none;
width: 100%;
}
/* In-Content Zone - Mobile (full width, flexible height) */
.ad-zone-in-content .ad-container img {
max-width: 100%;
max-height: none;
width: 100%;
}
/* Footer Zone - Mobile */
.ad-zone-footer .ad-container img {
max-height: 60px;
}
/* Directory Top - Mobile */
.ad-zone-directory-top .ad-container img {
max-height: 60px;
}
/* Reduce padding on mobile */
.ad-container {
margin: 5px 0;
}
}
/* ============================================
EXTRA SMALL DEVICES (max-width: 480px)
============================================ */
@media (max-width: 480px) {
/* Header Zone - Very small */
.ad-zone-header .ad-container img {
max-height: 50px;
}
/* Footer Zone - Very small */
.ad-zone-footer .ad-container img {
max-height: 50px;
}
/* Text ads - Mobile */
.ad-container.ad-text {
padding: 8px;
font-size: 12px;
}
.ad-container.ad-text a {
font-size: 12px;
}
}
/* ============================================
TABLET DEVICES (max-width: 1024px)
============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
/* Sidebar Zone - Tablet */
.ad-zone-sidebar .ad-container img {
max-width: 250px;
max-height: 208px;
}
}
/* ============================================
LANDSCAPE MODE
============================================ */
@media (orientation: landscape) and (max-height: 500px) {
.ad-zone-header .ad-container img {
max-height: 40px;
}
.ad-zone-footer .ad-container img {
max-height: 40px;
}
}
/* ============================================
PRINT STYLES
============================================ */
@media print {
.ad-container {
display: none !important;
}
}
/* ============================================
SIDEBAR AD SPECIFIC
============================================ */
.sidebar-ad {
text-align: center;
padding: 10px 5px;
}
.vertical-ad {
text-align: center;
padding: 10px 5px;
}
.vertical-ad img {
max-width: 160px;
width: 100%;
height: auto;
}
@media (max-width: 768px) {
.vertical-ad img {
max-width: 120px;
}
}
/* Responsive Ad Zones */
.ad-container {
margin: 10px 0;
text-align: center;
overflow: hidden;
}
.ad-container img {
max-width: 100%;
height: auto;
border-radius: 4px;
}
/* Header Zone */
.ad-zone-header .ad-container img {
max-width: 728px;
max-height: 90px;
object-fit: contain;
}
/* Sidebar Zone */
.ad-zone-sidebar .ad-container img {
max-width: 300px;
max-height: 250px;
object-fit: contain;
}
/* In-Content Zone */
.ad-zone-in-content .ad-container img {
max-width: 468px;
max-height: 60px;
object-fit: contain;
}
/* Footer Zone */
.ad-zone-footer .ad-container img {
max-width: 728px;
max-height: 90px;
object-fit: contain;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.ad-zone-header .ad-container img { max-height: 60px; }
.ad-zone-sidebar .ad-container img { max-width: 100%; max-height: none; }
.ad-zone-in-content .ad-container img { max-width: 100%; max-height: none; }
.ad-zone-footer .ad-container img { max-height: 60px; }
}
@media (max-width: 480px) {
.ad-zone-header .ad-container img { max-height: 50px; }
.ad-zone-footer .ad-container img { max-height: 50px; }
}