modules/addons/spamexperts/core/assets/css/template-styles.css
/* WHMCS */
.contentarea > h1
{
display: none;
}
.contentarea > div > h1:first-child {
display: none;
}
/*********/
#mg-wrapper * {
margin: 0;
padding: 0;
}
#mg-wrapper {
margin: 0 0 40px 0;
color: #4c4c4c;
font-family: 'Arial', Helvetica, sans-serif !important;
font-size: 12px;
line-height: 18px;
position: relative;
}
#mg-wrapper *{
font-family: 'Arial', Helvetica, sans-serif !important;
}
#mg-wrapper a {
color: #4caef1;
text-decoration: none;
}
#mg-wrapper a.nocolor {
color: #4C4C4C;
text-decoration: none;
}
#mg-wrapper .nblue-box, #mg-wrapper #mg-sidebar .mg-sidebar-nav li a.active, #mg-wrapper #top-nav li.open > a{
background-color: #1c4b8c;
}
#mg-wrapper .clear {
clear: both;
}
#mg-wrapper section ul {
margin: 0 0 20px 35px;
}
#mg-wrapper section > ul > li {
margin: 0 0 5px 0;
}
#mg-wrapper section {
padding: 0 0 20px 20px;
}
#mg-wrapper .right {
float: right;
}
#mg-wrapper .left {
float: left;
}
#mg-wrapper .per-page {
margin: 0 10px 0 0;
}
#mg-wrapper .affix {
top: 0;
}
#mg-wrapper .affix-bottom {
bottom: 0;
position: absolute;
top: auto;
}
/* =================================================
-------------------- CSS3 -------------------
==================================================== */
#mg-wrapper .color-trans, #mg-wrapper i{
-webkit-transition: color linear 0.1s;
-moz-transition: color linear 0.1s;
transition: color linear 0.1s;
}
#mg-wrapper .bg-color-trans {
-webkit-transition: background-color linear 0.1s;
-moz-transition: background-color linear 0.1s;
transition: background-color linear 0.1s;
}
.radius2px, #mg-wrapper #mg-sidebar .mg-sidebar-nav li a, #mg-wrapper .nblue-box, #mg-wrapper #top-nav > li > a, #mg-wrapper .dropdown-menu a:hover, #mg-wrapper .border-box, #mg-wrapper .info-box {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
#mg-wrapper .shadow-inset, #mg-wrapper .slogan {
-webkit-box-shadow: 0 -2px 0 rgba(0,0,0, 0.3)inset;
-moz-box-shadow: 0 -2px 0 rgba(0,0,0, 0.3)inset;
box-shadow: 0 -2px 0 rgba(0,0,0, 0.3)inset;
}
/* =================================================
----------------- TYPOGRAPHY -----------------
==================================================== */
#mg-wrapper h2.section-heading {
line-height: 1;
padding: 0 0 10px 0;
margin: 0 0 40px 0;
color: #333333;
font-size: 22px;
font-weight: normal;
border-bottom: 1px solid rgba(0,0,0, 0.05)
}
#mg-wrapper h2.section-heading i {
height: 24px;
width: 40px;
line-height: 1;
margin: 0;
color: #d6d6d6;
font-size: 26px;
vertical-align: middle;
}
#mg-wrapper section h3 {
margin: 20px 0;
padding: 10px 0 0 0;
color: #4c4c4c;
font-size: 20px;
}
#mg-wrapper section h4 {
margin: 20px 0;
font-size: 18px;
font-weight: normal
}
#mg-wrapper .body {
position: relative;
}
/* =================================================
------------------- mg-sidebar -------------------
==================================================== */
#mg-wrapper #mg-sidebar {
width: 220px;
top: 0;
position: absolute;
}
#mg-wrapper #mg-sidebar .mg-sidebar-nav {
margin: 0 0 30px 0;
list-style: none;
}
#mg-wrapper #mg-sidebar .mg-sidebar-nav > li {
min-height: 14px;
width: 100%;
border-bottom: 1px solid rgba(0,0,0, 0.05);
}
#mg-wrapper #mg-sidebar .mg-sidebar-nav > li:first-child {
border-top: 1px solid rgba(0,0,0, 0.05);
}
#mg-wrapper #mg-sidebar .mg-sidebar-nav > li > a {
display: block;
width: 100%;
padding: 5px 0;
margin: 5px 0;
color: #4c4c4c;
font-size: 13px;
}
#mg-wrapper #mg-sidebar .mg-sidebar-nav li a i, #mg-wrapper #top-nav li a i, #mg-wrapper a:not(.btn) i {
line-height: 18px;
font-size: 16px;
color: #d6d6d6;
margin: 0 10px 0 5px ;
}
#mg-wrapper #top-nav li a i.icon-caret-down {
margin: 0 0 0 10px ;
font-size: 10px;
}
/* hover */
#mg-wrapper #mg-sidebar .nav-dropdown li a:hover:not(.active), #mg-wrapper #top-nav > li:not(.open) > a:hover, #mg-wrapper #mg-sidebar .mg-sidebar-nav li a:hover:not(.active), #mg-wrapper .dropdown-menu a:hover {
color: #333;
}
#mg-wrapper #mg-sidebar .mg-sidebar-nav li a:hover:not(.active) i, #mg-wrapper a:hover:not(.btn) i, #mg-wrapper #mg-sidebar .nav-dropdown li:hover:before, #mg-wrapper #top-nav li a:hover i {
color: #296dcc;
}
#mg-wrapper #mg-sidebar .mg-sidebar-nav li a:hover:not(.active), #mg-wrapper #top-nav > li:not(.open) > a:hover, #mg-wrapper .dropdown-menu a:hover {
background-color: rgba(0,0,0, 0.05);
}
/* active */
#mg-sidebar .mg-sidebar-nav li a.active, #mg-wrapper #mg-sidebar .mg-sidebar-nav li a.active i, #mg-wrapper #top-nav li.open > a, #mg-wrapper #top-nav li.open > a i {
color: #fff;
}
/* dropdown */
#mg-wrapper #mg-sidebar .nav-dropdown {
margin: 10px 0 10px 12px;
list-style: none;
}
#mg-wrapper #mg-sidebar .nav-dropdown li:before {
float: left;
content: "\f054";
color: #D6D6D6;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 8px;
display: inline-block;
text-decoration: inherit;
margin: 4px 10px 0 10px;
}
#mg-wrapper #mg-sidebar .nav-dropdown li a {
display: block;
color: #808080;
padding: 2px 0 2px 10px;
}
/* ---- SLOGAN ----- */
#mg-wrapper .slogan {
display: block;
width: 200px;
height: auto;
padding: 3px;
text-align: center;
position: absolute;
right: 8px;
top: 8px;
}
#mg-wrapper .slogan span, #mg-wrapper .slogan small, #mg-wrapper .slogan .mg-logo {
display: inline-block;
color: #fff;
}
#mg-wrapper .mg-logo {
height: 27px;
width: 160px;
margin: 10px 0 0 0;
background: url(../img/mg-logo.png) no-repeat;
}
/* =================================================
------------------ CONTENT ----------------
==================================================== */
#mg-wrapper #mg-content {
position: relative;
background-color: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0, 0.2);
-moz-box-shadow: 0 1px 4px rgba(0,0,0, 0.2);
box-shadow: 0 1px 4px rgba(0,0,0, 0.2);
}
#mg-wrapper #mg-content .inner {
padding: 30px;
}
#mg-wrapper #mg-content > .overlay
{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url('../img/overlay.png');
}
/* =================================================
----------------- TOP BAR -------------------
==================================================== */
#mg-wrapper #top-bar {
position: relative;
padding: 20px;
background-color: rgba(0,0,0,0.01);
border-bottom: 1px solid rgba(0,0,0, 0.05);
min-height: 36px;
}
/* --- MODULE NAME --- */
#mg-wrapper #module-name h4, #module-name h2 {
line-height: 1;
margin: 0;
}
#mg-wrapper #module-name h2 {
color: #1c4b8c;
font-size: 22px;
}
#module-name h4 {
font-size: 14px;
font-weight: normal;
}
/* --- TOP NAV --- */
#mg-wrapper #top-nav > li {
position: relative;
border-right: 1px solid rgba(0,0,0, 0.05);
list-style: none;
}
#mg-wrapper #top-nav > li > a {
display: block;
height: 26px;
line-height: 24px;
color: #4c4c4c;
}
#mg-wrapper #top-nav li a i {
margin: 0 10px 0 0;
}
#mg-wrapper #top-nav .nav-dropdown, #mg-wrapper #top-bar .btn-navbar {
display: none;
}
/* --- DROP DOWN --- */
#mg-wrapper .dropdown-menu {
display: none;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
background-color: #ffffff;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
#mg-wrapper .dropdown-menu li {
width: 100%;
margin: 0 0 2px 0;
}
#mg-wrapper .dropdown-menu a {
display: block;
padding: 2px 10px;
margin: 0 10px;
clear: both;
font-weight: normal;
line-height: 20px;
color: #808080;
white-space: nowrap;
}
#mg-wrapper .dropdown-menu .disabled > a:hover {
text-decoration: none;
cursor: default;
background-color: transparent;
}
/* =================================================
----------------- BOXES -------------------
==================================================== */
#mg-wrapper .border-box{
padding: 20px 20px 10px 20px;
margin: 20px 0;
overflow: auto;
}
#mg-wrapper .border-box {
border: 1px solid rgba(0,0,0, 0.05);
}
#mg-wrapper .input-sizes select,
#mg-wrapper .input-sizes input[type=text] {
display: block!important;
}
#mg-wrapper .input-sizes-low input[type=text], #mg-wrapper
#mg-wrapper .input-sizes-low select {
display: block;
height: 16px;
}
#mg-wrapper .form-low input[type=text] {
height: 16px;
}
#mg-wrapper .input-sizes-low select, #mg-wrapper
#mg-wrapper .form-low select {
height: 26px;
padding: 2px;
}
#mg-wrapper .form-low .help-inline, #mg-wrapper .form-low .help-block {
font-size: 10px;
margin: 0!important;
}
#mg-wrapper .form-low label {
line-height: 16px;
}
#mg-wrapper .form-low .control-group {
margin-bottom: 10px!important;
}
/* ================================================
------------- RESPONSIVE STYLES -------------
=================================================== */
@media (min-width: 767px) {
#mg-wrapper #mg-content.right {
float: none;
margin: 0 20px 0 00px;
}
#mg-wrapper #mg-sidebar.left {
}
#mg-wrapper #mg-sidebar.left.affix {
left: 34px;
}
#mg-wrapper #top-nav li {
float: left;
}
#mg-wrapper #top-nav > li > a {
padding: 0 10px;
margin: 0 10px;
}
#mg-wrapper #top-nav .nav-dropdown {
position: absolute;
top: 20px;
right: 0;
}
#mg-wrapper #top-nav li:hover .nav-dropdown {
display: block;
}
#mg-wrapper .dropdown-menu {
position: absolute;
top: 100%;
right: 10px;
z-index: 1000;
float: left;
-webkit-border-radius: 2px 0 2px 2px;
-moz-border-radius: 2px 0 2px 2px;
border-radius: 2px 0 2px 2px;
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
#mg-wrapper #top-nav li.open > a i.icon-caret-down {
height: 30px;
line-height: 28px;
width: 32px;
color: #1C4B8C;
background: #fff;
margin: -5px -10px 0 0;
-webkit-border-radius: 1px 1px 0 0;
-moz-border-radius: 1px 1px 0 0;
border-radius: 1px 1px 0 0;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
}
table.configtable tr td{
height: 30px;
}
table.configtable tr td:first-child{
width: 350px;
}
/* Desktop large
------------------------- */
@media (min-width: 1200px) {
#mg-wrapper #top-nav {
margin: 6px 0 0 230px;
}
#mg-wrapper #module-name {
width: 200px;
position: absolute;
left: 30px;
}
}
/* Desktop large
------------------------- */
@media (min-width: 767px) and (max-width: 1200px) {
#mg-wrapper #top-nav li a {
padding: 0 5px;
margin: 0 5px;
}
#mg-wrapper #top-nav li .dropdown-menu{
right: 0;
}
}
/* Desktop
------------------------- */
@media (max-width: 980px) {
#mg-wrapper table .form-horizontal label.control-label, #mg-wrapper
#mg-wrapper table .form-horizontal .controls {
width: 100%;
float: none;
}
#mg-wrapper table .form-horizontal .controls {
margin: 0;
}
#mg-wrapper #module-name {
width: 100%;
text-align: center;
}
}
@media (max-width: 1200px) {
#mg-wrapper #module-name {
width: 100%;
text-align: center;
}
}
/* Tablet to desktop
------------------------- */
@media (min-width: 768px) and (max-width: 1200px) {
#mg-wrapper #top-nav {
margin: 20px 0;
padding: 10px 0 0 0 ;
border-top: 1px solid rgba(0,0,0, 0.05);
}
}
/* Landscape phones
------------------------- */
@media (max-width: 767px) {
#mg-wrapper #mg-sidebar.left {
display: none;
}
#mg-wrapper #top-bar .btn-navbar {
display: block;
float: right;
}
#mg-wrapper #top-nav {
display: block;
}
#mg-wrapper #mg-content.right {
float: none;
}
#mg-wrapper #mg-content.right, #mg-wrapper #top-nav {
margin: 0;
}
#mg-wrapper #top-nav li{
padding: 0;
border-right: none;
}
#mg-wrapper #module-name {
margin: 0 0 20px 0;
}
#mg-wrapper #module-name, #mg-wrapper #top-nav li, #mg-wrapper #top-nav > li > a {
width: 100%;
}
#mg-wrapper .dropdown-menu {
margin: 2px 0 2px 10px
}
#mg-wrapper .contentarea {
min-width: 0;
width: auto;
}
}