/*
COLOURS:

BORDERS: #ccc
TEXT: #a6a7ab
EMPHASIS TEXT: #000
LINKS: #C82B72


/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }


/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; box-sizing: border-box; }

html, button, input, select, textarea {font-family: 'Lato', sans-serif; color: #a6a7ab; }

body { margin: 0; font-size: 1em; line-height: 1.4; }

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */

::-moz-selection { background: #7d458e; color: #fff; text-shadow: none; }
::selection { background: #7d458e; color: #fff; text-shadow: none; }


/* =============================================================================
   Links
   ========================================================================== */

a { color: #C82B72; text-decoration:none; }
a:visited {}
a:hover {text-decoration:underline;}

/**
* Address `outline` inconsistency between Chrome and other browsers.
*/

a:focus {
    outline: none;
}

/**
* Improve readability when focused and also mouse hovered in all browsers.
*/

a:active,
a:hover {
    outline: 0;
}


/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: normal; color:#333; }

blockquote {font-size:1.3em; line-height:1.6em; margin:0 0 1.3em 0; font-style:italic;}

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ddd; margin: 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1.3em; }

code {
  display: inline-block;
  padding: 10px 15px;
  white-space: normal;
}

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Tabs
   ========================================================================== */

.tabs { background: none; border:none; padding:0;margin:0;}
.tabs li {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #F9F9F9;
    border: 1px solid #E7E7E7;
  border-bottom: none;
    display: inline-block;
    margin: 0 1px 0 0;
    padding: 0;
    position: relative;
    top: 1px;
    z-index: 2;
     white-space: normal;
   width:80px;
}
.tabs:before {
    display: none;
}
.tabs li a {
    color: #616161;
    display: block;
    font-size: 11px;

    font-weight: 700;
    padding: 7px 17px;
  text-align:center;
  border-bottom: 1px solid #e7e7e7;
  transition:  all 0.2s ease-in-out; /*mozilla firefox*/
-moz-transition:  all 0.2s ease-in-out; /*mozilla firefox*/
  -ms-transition:  all 0.2s ease-in-out;  /* IE9 */
  -webkit-transition:   all 0.2s ease-in-out;
  -o-transition:   all 0.2s ease-in-out; /* opera */

}
.tabs li a.active, .tabs li a:hover {
    color: #C82B72;
  text-decoration:none;
  transition:  all 0.2s ease-in-out; /*mozilla firefox*/
-moz-transition:  all 0.2s ease-in-out; /*mozilla firefox*/
  -ms-transition:  all 0.2s ease-in-out;  /* IE9 */
  -webkit-transition:   all 0.2s ease-in-out;
  -o-transition:   all 0.2s ease-in-out; /* opera */
}
.tabs a.active {
    background: none repeat scroll 0 0 #FFFFFF;
    position: relative;
    z-index: 3;
  border-bottom: 1px solid #fff;
}

.top-tabs { margin:-38px 0 0 20px;}

.tops {padding:40px 0;}

.panel-container {
    border-top: 1px solid #E7E7E7;
    position: relative;
    z-index: 1;
  padding:20px 0;
   color: #616161;
   margin-top:0px;
}

.panel-container ul li:before {
    color: #C82B72;
    content: ">";
    display: inline-block;
    font-family: 'fontello';
    font-size: 13px;
    font-style: normal;
    font-weight: normal;
    padding-right: 8px;
    text-decoration: inherit;
}

.panel-container ul { padding:0; margin:0;}
.panel-container ul li { list-style:none;}



/* =============================================================================
   Chrome Frame Prompt
   ========================================================================== */

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }


/* ==|== primary styles =====================================================
   Author:
   ========================================================================== */

body{font-size:62.5%; color:#333; font-family: 'Open Sans', sans-serif;}
p{font-size:1.2em; line-height:1.8em; margin:0 0 1em 0; letter-spacing: 0.4px; -webkit-font-smoothing:antialiased; color:#a3a4a9}

a, a:hover { color:#34373c;
  transition: all 0.2s ease-in-out;
  -moz-transition:  all 0.2s ease-in-out; /*mozilla firefox*/
  -ms-transition:  all 0.2s ease-in-out;  /* IE9 */
  -webkit-transition:   all 0.2s ease-in-out;
  -o-transition:   all 0.2s ease-in-out; /* opera */}

a:hover { text-decoration:underline;}

h1, h2{font-size:2em; line-height:1em; color:#666b71; font-weight: 300;}
h2{font-size:1.7em; margin-bottom:12px;}
h3{font-size:1.7em; line-height:1em; color:#666b71; margin:0 0 20px 0; font-weight: 300; }
h4{font-size:1.3em; line-height:1.2em; color:#484848; font-weight:normal;}
h5{font-size:1em; line-height:1em; color:#000; font-weight:normal;}

p.emph{font-size:1.5em; color:#000;}

ul, ol{}
ul li, ol li{font-size:1.3em; line-height:1.6em;}
#main ul li, #main ol li{color:#000}
#main ul li span, #main ol li span{color:#333;}

ol ul{margin-bottom:0;}
ol{list-style-type:lower-alpha;}

.clear{clear:both;}

/* For slider */
.slides_container {width:100%!important;}
.slides_control{width:100%!important; display:block;}
.slides_control div{width:100%;}
ul.pagination{list-style:none; padding:0; margin:0 auto;}
ul.pagination li{}
ul.pagination li a{}
ul.pagination li a:hover, ul.pagination li.current a{}

.m10-0{margin:10px 0; overflow:auto;}
.m20-0{margin:20px 0; overflow:auto;}
.m30-0{margin:30px 0; overflow:auto;}
.m40-0{margin:40px 0; overflow:auto;}
.m50-0{margin:50px 0; overflow:auto;}
.m0-10{margin:0 10px;}
.m15{margin:15px;}
.p10-0{padding:10px 0; overflow:auto;}
.p20-0{padding:20px 0; overflow:auto;}
.p30-0{padding:30px 0; overflow:auto;}
.p40-0{padding:40px 0; overflow:auto;}
.p60-0-0-0 {padding:60px 0 0 0;}
.centerh { margin:0 auto; display:block;}

.w10{width:10%;}
.w15{width:15%;}
.w20{width:20%;}
.w30{width:30%;}
.w33{width:33.3%;}
.w40{width:40%;}
.w45{width:45%;}
.w50{width:50%;}
.w60{width:60%;}
.w70{width:70%;}
.w75{width:75%;}
.w80{width:80%;}
.w90{width:90%;}
.w100{width:100%;}

.no-margin{margin:0;}
.no-padding{padding:0;}
.top-margin{margin-top:0;}
.bottom-margin{margin-bottom:0;}
.right-margin{margin-right:0;}
.left-margin{margin-left:0;}
.top-padding{padding-top:0;}
.bottom-padding{padding-bottom:0;}
.right-padding{padding-right:0;}
.left-padding{padding-left:0;}

.half{width:48%;}
.left{float:left;}
.right{float:right;}

.align-right{text-align:right;}
.align-left{text-align:left;}
.align-center{text-align:center;}

.add-relative {position:relative}
.overflow { overflow: hidden;}

.img-bdr{padding:3px; border:1px solid #000;}

span img { width:90%; height:auto; margin:15px 0}

.error, .success { background: #e45643; padding:10px 0; display:block; width:100%; overflow: auto; position:relative; margin-bottom: 15px; }
.error span, .success span { background:url(../images/notification-icons.png) no-repeat -27px 2px; display:block; width:13px; height:14px; position:absolute; top:10px; left:10px;}
.success span  { background:url(../images/notification-icons.png) no-repeat -13px 2px; width:15px;}
.error p, .success p {color:#fff; font-size:1.2em; line-height:1.3em; padding:0; margin:0 12px 0 34px; }
.success { background:#84ca4b;}

.alert-success { background: #8bbe6d}
.alert-success p {  color:#fff;}

.notification {
  padding: 10px 0 10px 0;
  margin-bottom: 20px;
}

.notification .icon{
  display: block;
  width: 16px;
  height: 16px;
  float: left;
  margin-top: 7px;
}
.notification p{
  color: #555555;
  line-height: 16px;
  margin-left: 35px;
  margin-right: 25px;
  margin-top: 8px;
  margin-bottom: 7px;
  padding: 0px !important;
}
.note-info{
   background: #dce6f3 url('../dservercontrol/images/bck_info.png');
   border-color: #50B0EC;
}
.note-info .icon{
   background: url('../dservercontrol/images/ico_info_16.png') top left no-repeat;
   margin-left: 10px;
}

.badge-info {background:#d86155}

.popover { border-radius: 0;}
.popover-title { border-radius:0; background-color: #495561; border-bottom: none; color: #fff;}
.popover p { color:#808085}

/* =============================================================================
   Tables (overrights bootstrap styles)
   ========================================================================== */
  .hidden-phone {display: none;}
  .table th, .table td { border:none; text-overflow: ellipsis; text-overflow: "..."}
  .table thead th { border-bottom: 3px solid #b3b7bc; color:#92979e; font-size:1.2em;}
  .table {width:100%; margin:0; border-radius:0;}
  .table td{font-size:1.4em; line-height:1.8em; position:relative; overflow: hidden;}
  .table td .btn { display:inline-block; font-size:1em; padding:10px; margin-left:20px; margin-top:4px; line-height:1em; text-align: center; float:right;}
  .table tbody tr {}
  .table td .btn-arrow {margin:0; float:left; text-decoration:none; width:25%; line-height:0; border-radius:0px;}
  .table tr.firewallrules {border-bottom: 1px solid #c5c4c4}
  .table td .controlform {width:100%; margin:0;}
  .table td.controlpanel{padding-left:0 !important; padding-right:0 !important;}
  .table tbody tr:nth-child(2n+1){ background:#fff;}
  .table tbody tr.selected { background: #cfdce5}
  .table tbody tr.selected .domain {color:#fff}
  .table tbody .complete {background-color:#D9EEBD}
  .table tbody .running, .table tbody .pending {background-color:#cce6ff}
  .table tbody .warn, .table tbody .failed {background-color:#ff6666}
  /*.table tbody td { display: none;}*/
  .table tbody td a { text-decoration: underline; }
  .table-striped tbody > tr:nth-child(2n+1) > td, .table-striped tbody > tr:nth-child(2n+1) > th { background: none;}
  .table td.domain { width:99%;}
  .table td.server { width:49%;}
  .table td.domain-bulk  {float:left}
  .table td.serverinfo { width:auto; display:table-cell;}
  .table td.controlpanel .controls {width: 100%; text-align: center; overflow: visible; display: flex;}

  #sortmobile_length  {width: 100%;}
  #sortmobile_length select {width: 100%;}
  #sortmobile_filter input[type="text"] { width:100%}
  #sort_info, #sortmobile_info {background-color:rgba(10,10,10,0.08); font-size:1.1em; padding:12px; color: #484848; display:block; text-align:right; margin-top:20px}

.key .icon-info-sign {background: rgba(0,0,0,0.04); cursor: pointer;height: 42px;position: absolute;right: -30px;top: -110px;width: 39px;z-index: 900;}
.key .icon-info-sign:hover, .key .icon-info-sign:active, .key .icon-info-sign:focus {background:#c0c0c0;}
.key .icon-info-sign:before { color: #858585;content: "i";font-family: "Times New Roman",Times,serif;font-size: 22px;font-style: italic;font-weight: 900;line-height: 1.8em;padding: 0 16px;text-align: center;text-transform: lowercase;}
.key .icon-info-sign .popover { position:relative;}
.popover-content .catch { background:url(../images/icons/catch-sm.png) 14px 9px no-repeat; padding:10px 10px 10px 52px}
.popover-content .mail {background:url(../images/icons/mail-sm.png) 16px 9px no-repeat; padding:10px 10px 10px 52px}
.popover-content .list {background:url(../images/icons/list-sm.png) 17px 9px no-repeat; padding:10px 10px 10px 52px}
.popover-content .forward {background:url(../images/icons/forward-sm.png) 17px 9px no-repeat; padding:10px 10px 10px 52px}

/* =============================================================================
   Buttons (overrights bootstrap styles)
   ========================================================================== */

  .title .back { width:100%; display:block; border-radius:0;}
  .btn {display: block;}

  .btn-nav { background:#E5EBEF; color:#787878}
  .btn-inline { margin-bottom:7px; padding:5px 12px;}
  .wrapper{width:80%;}
  .btn-servercontrols{min-width:200px; margin-bottom:0px;}
  .icon-chevron-faded {opacity: 0.2;}
  .updaterbox{border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; width:75% !important;}
  .btn-updater{border-top-left-radius: 0px; border-bottom-left-radius: 0px; display:inline-block !important; width:25% !important;}


/* =============================================================================
   Forms (overrights bootstrap styles)
   ========================================================================== */

  input[type="button"] { width:100%; }
  label p { min-width: 110px; display:inline-block; margin-bottom:2px; font-size:1em; }

  textarea {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}
  select {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

.checkbox input, .radio input {
   display: inline-block;
}

.row-fluid textarea,
.row-fluid input[type="text"],
.row-fluid input[type="password"],
.row-fluid input[type="datetime"],
.row-fluid input[type="datetime-local"],
.row-fluid input[type="date"],
.row-fluid input[type="month"],
.row-fluid input[type="time"],
.row-fluid input[type="week"],
.row-fluid input[type="number"],
.row-fluid input[type="email"],
.row-fluid input[type="url"],
.row-fluid input[type="search"],
.row-fluid input[type="tel"],
.row-fluid input[type="color"],
.row-fluid .uneditable-input {width:100%; }

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
    border-radius: 4px;
  height: 34px;
  line-height:1.2em;
  border-color:#ccc;
  width:100%;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
  padding:2px;
  margin-bottom:7px;}

.input-prepend.input-append input {border-radius: 4px;}

.input-prepend.input-append .add-on:first-child,
.input-prepend.input-append .btn:first-child,
.input-prepend.input-append .add-on:last-child,
.input-prepend.input-append .btn:last-child {
    padding: 3px; text-align: left; word-break:break-all}
.input-prepend .add-on:first-child, .input-prepend .btn:first-child {
    padding: 3px;text-align: left;}

select, input[type="file"] {
    height: 34px;
    line-height: 34px;
}

#domainsearch select {
    display: inherit;
    margin: 0;
    width: 100%;
}

.dataTables_filter { overflow:auto;}

.highlight { background: #efefef; padding:0px; margin-bottom:20px; position:relative;}
.highlight > div {padding: 20px;}
.highlight .important { background: #e3e6e7; padding:30px; margin-bottom:0px; overflow:auto;}
.highlight .important [class^="icon-"], .highlight .important [class*=" icon-"] {vertical-align: sub;}
.highlight .icon-info-sign, .tabbable .icon-info-sign, h3 .icon-info-sign {background: rgba(0, 0, 0, 0.04); height: 39px; position: absolute; right: 0;top: -1px; width: 39px; cursor:pointer;}
.highlight .icon-info-sign:hover, .highlight .icon-info-sign:active, .highlight .icon-info-sign:focus, .tabbable .icon-info-sign:hover, .tabbable .icon-info-sign:focus, .tabbable .icon-info-sign:active, h3 .icon-info-sign:hover,  h3 .icon-info-sign:focus, h3 .icon-info-sign:active { background:rgba(0, 0, 0, 0.15 );}
.highlight .icon-info-sign:before, .tabbable .icon-info-sign:before,h3 .icon-info-sign:before {content:"i"; font-style:italic; font-weight:900; color: #858585; font-size:22px; text-align:center; padding:0 16px; line-height:1.8em; font-family:"Times New Roman", Times, serif; }
.highlight .icon-info-sign .popover, , .tabbable .icon-info-sign .popover, { position:relative;}
.item-block .icon-info-sign:before  { color:#fff;}
.item-block .icon-info-sign {right: -14px;top: -15px; position:relative}
h3 .icon-info-sign { float: right; height: 45px; }
h3 .icon-info-sign:before { line-height: 1.8em; }
.highlight  .btn { padding: 5px 12px; margin-bottom:6px;}
.highlight p { margin:0; background: rgba(10, 10, 10, 0.08); width:100%; color: #484848; text-transform: uppercase;}
.highlight p span { padding:9px 20px; display:block;}
.highlight div p {margin:0; background: none; text-transform: none;}
.highlight div label p  {font-size:0.9em;}
.nohighlight .add-on, .highlight .add-on {font-size:1.2em;}
.highlight div label { font-size:1.2em;}
.highlight input[type="radio"], .highlight input[type="checkbox"] {margin:0;}
.togglebox {margin-bottom:5px !important;}
.highlight span.warning { color:#c6635e; margin-left:12px}
optgroup { font-size:1.1em; color:#666; font-weight:500; font-style:normal; background:#efefef; padding:4px;}

#changepassword  input[type="password"] { display:block; width:100%;}
.minilabel{font-size:1.0em; color: #484848; text-transform: uppercase; font-weight:bold;}
.firewall {width:100%; border-top: 1px solid #cccccc; padding-top:11px; padding-bottom:11px; color: #484848; text-transform: uppercase; font-weight:bold; font-size:1.3em;}

/* =============================================================================
   Header Area (inc Navigation)
   ========================================================================== */

header{clear:both; height:auto; width:100%; z-index:8; top:0; min-height:100px; overflow:auto; float:left;}
header .inner{background: url(../img/layout/header.png) repeat-x #27631F; min-height:62px; height:auto; width:100%;}
header #logo{ text-indent:-9999em; display:block; z-index:10; margin:0; width:100%; height:120px; display:block; background-size:contain; background-color:#5E97BF; background-image: url(../images/icons/default-icon.png); background-repeat: no-repeat; background-position:top center;}
header .title {width:100%; display:none; background: #fff; height:106px; overflow:hidden; }
header .title h1 { padding:20px 40px 20px 90px; font-size:2.2em; color:#555555; font-weight:400; max-width:480px;}
header .notice { text-align:center; position:absolute; top:128px; padding:5px 0 5px 0; width:100%; background:#5E97BF; color:#fff; font-weight:bold; font-size:1.0em; text-transform:uppercase;}
header .notice a { color:#fff; text-decoration: none}


nav {background-color: #293541; position:absolute; left:-220px; top:0px; bottom:0; min-height:200px; width:100%; max-width: 220px; z-index:20;  transition: all 0.2s ease-in-out;
  -moz-transition:  all 0.2s ease-in-out; /*mozilla firefox*/
  -ms-transition:  all 0.2s ease-in-out;  /* IE9 */
  -webkit-transition:   all 0.2s ease-in-out;
  -o-transition:   all 0.2s ease-in-out; /* opera */}

nav ul { margin:0; padding:0;}
nav ul li { list-style: none;  position:relative;}
nav ul li a { display:block; color:#7f8387; font-size:1em; line-height:3.2em; text-decoration:none; padding-left:50px; position:relative;}
nav:hover ul li a, nav.active ul li a { text-indent:0}
nav ul li a:hover, nav ul li a:focus { color:#fff;  text-decoration:none;}
nav ul li a.active { color:#fff;  text-decoration:none; background:#37434e; border-left:2px solid #ec5f19;}
nav ul li ul{ margin:13px;}
nav ul li ul li a {  font-size:0.74em; line-height:2.4em; position:relative; padding-left:35px}
nav ul li ul li a span {background:url(../images/left-icons.png) 0 -56px no-repeat; display:none}
nav ul li ul li a:hover span {background:url(../images/left-icons.png) 0 -56px no-repeat; display:none}
nav ul li ul li a.active span {background:url(../images/left-icons.png) 0 -56px no-repeat; display:none}

nav ul li ul li span {background:url(../images/left-icons.png) 0 -56px no-repeat;}
nav ul li ul li:hover span {background:url(../images/left-icons.png) 0 -56px no-repeat!important;}
nav ul li ul li.active span {background:url(../images/left-icons.png) 0 -56px no-repeat;}

nav ul li span { position:absolute; top:0px; left:18px; background:url(../images/left-icons.png) 0 12px no-repeat; width:30px; height:30px; display:block;}
nav ul li span.domains {background:url(../images/left-icons.png) 0 12px no-repeat;}
nav ul li span.email {background:url(../images/left-icons.png) -144px 16px no-repeat;}
nav ul li span.hosting {background:url(../images/left-icons.png) -228px 12px no-repeat;}
nav ul li span.dashboard {background:url(../images/left-icons.png) -296px 10px no-repeat;}
nav ul li span.server {background:url(../images/left-icons.png) -186px 14px no-repeat;}
nav ul li span.cserver {background:url(../images/left-icons.png) -259px 15px no-repeat;}
nav ul li span.cloud {background:url(../images/left-icons.png) -259px 15px no-repeat;}
nav ul li span.vserver {background:url(/assets/images/icons/vps-icon.png); background-size: 21px; background-repeat: no-repeat; margin-top:12px; opacity: 0.5;}
nav ul li span.shop {background:url(../images/left-icons.png) -104px 10px no-repeat;}
nav ul li span.manage {background:url(../images/left-icons.png) -366px 10px no-repeat;}
nav ul li span.help {background:url(../images/left-icons.png) -332px 12px no-repeat;}
nav ul li span.security {background: url("../images/left-icons.png") no-repeat -395px 10px;}
nav ul li span.yss {background: url("../images/left-icons.png") no-repeat -428px 15px;}
nav ul li span.ssl {background: url(../images/left-icons.png) -394px 11px no-repeat; }
nav ul li span.o365 {background: url(../images/office365.png); background-size: 31px 21px; background-repeat: no-repeat; margin-top:10px; margin-left:-4px;}

nav ul li:hover span.security, nav ul li.active span.security { background: url("../images/left-icons.png") no-repeat scroll -395px -22px;}
nav ul li:hover span.manage, nav ul li.active span.manage {background:url(../images/left-icons.png) -366px -22px no-repeat;}
nav ul li:hover span.help, nav ul li.active span.help {background:url(../images/left-icons.png) -332px -20px no-repeat;}
nav ul li:hover span.domains, nav ul li.active span.domains {background:url(../images/left-icons.png) 0 -22px no-repeat;}
nav ul li:hover span.email, nav ul li.active span.email {background:url(../images/left-icons.png) -144px -18px no-repeat;}
nav ul li:hover span.hosting, nav ul li.active span.hosting {background:url(../images/left-icons.png) -228px -22px  no-repeat;}
nav ul li:hover span.dashboard, nav ul li.active span.dashboard {background:url(../images/left-icons.png) -296px -22px  no-repeat;}
nav ul li:hover span.server, nav ul li.active span.server {background:url(../images/left-icons.png) -186px -20px no-repeat;}
nav ul li:hover span.vserver, nav ul li.active span.vserver {background:url(/assets/images/icons/vps-icon.png); background-size: 21px; background-repeat: no-repeat; opacity: 1.0;}
nav ul li:hover span.cserver, nav ul li.active span.cserver {background:url(../images/left-icons.png) -259px -19px no-repeat;}
nav ul li:hover span.cloud, nav ul li.active span.cloud {background:url(../images/left-icons.png) -259px -19px no-repeat;}
nav ul li:hover span.shop, nav ul li.active span.shop {background:url(../images/left-icons.png) -104px -23px no-repeat;}
nav ul li:hover span.yss, nav ul li.active span.yss  { background: url("../images/left-icons.png") no-repeat scroll -428px -19px;}
nav ul li:hover span.ssl, nav ul li.active span.ssl {background: url(../images/left-icons.png) -394px -21px no-repeat; }
nav ul li:hover span.o365, nav ul li.active span.o365 {background: url(../images/office365hover.png); background-size: 31px 21px; background-repeat: no-repeat; margin-top:10px; margin-left:-4px; }
nav ul li:hover span.emailfilter, nav ul li.active span.emailfilter {background:url(../images/left-icons.png) -28px -21px no-repeat;}


nav ul li a span { position:absolute; top:6px; left:18px; background:url(../images/left-icons.png) 0 12px no-repeat; width:30px; height:30px; display:none;}
nav ul li a span.domains {background:url(../images/left-icons.png) 0 12px no-repeat;}
nav ul li a span.email {background:url(../images/left-icons.png) -144px 16px no-repeat;}
nav ul li a span.hosting {background:url(../images/left-icons.png) -228px 12px no-repeat;}
nav ul li a span.dashboard {background:url(../images/left-icons.png) -296px 10px no-repeat;}
nav ul li a span.server {background:url(../images/left-icons.png) -186px 14px no-repeat;}
nav ul li a span.cserver {background:url(../images/left-icons.png) -259px 15px no-repeat;}
nav ul li a span.vserver {background:url(/assets/images/icons/vps-icon.png); background-size: 21px; background-repeat: no-repeat; opacity: 0.5;}
nav ul li a span.cloud {background:url(../images/left-icons.png) -259px 15px no-repeat;}
nav ul li a span.shop {background:url(../images/left-icons.png) -104px 10px no-repeat;}
nav ul li a span.manage {background:url(../images/left-icons.png) -366px 10px no-repeat;}
nav ul li a span.help {background:url(../images/left-icons.png) -332px 12px no-repeat;}
nav ul li a span.security {background: url("../images/left-icons.png") no-repeat -395px 10px;}
nav ul li a span.yss {background: url("../images/left-icons.png") no-repeat -428px 15px;}
nav ul li a span.ssl {background: url(../images/left-icons.png) -394px 11px no-repeat; }
nav ul li a span.o365 {background: url(../images/office365.png); background-size: 31px 21px; background-repeat: no-repeat; }
nav ul li a span.emailfilter {background: url(../images/left-icons.png) -28px 11px no-repeat; }

nav ul li a:hover span.security, nav ul li a.active span.security { background: url("../images/left-icons.png") no-repeat scroll -395px -22px;}
nav ul li a:hover span.manage, nav ul li a.active span.manage {background:url(../images/left-icons.png) -366px -22px no-repeat;}
nav ul li a:hover span.help, nav ul li a.active span.help {background:url(../images/left-icons.png) -332px -20px no-repeat;}
nav ul li a:hover span, nav ul li a.active span{background:url(../images/left-icons.png) 0 -22px no-repeat;}
nav ul li a:hover span.domains, nav ul li a.active span.domains {background:url(../images/left-icons.png) 0 -22px no-repeat;}
nav ul li a:hover span.email, nav ul li a.active span.email {background:url(../images/left-icons.png) -144px -18px no-repeat;}
nav ul li a:hover span.hosting, nav ul li a.active span.hosting {background:url(../images/left-icons.png) -228px -22px  no-repeat;}
nav ul li a:hover span.dashboard, nav ul li a.active span.dashboard {background:url(../images/left-icons.png) -296px -22px  no-repeat;}
nav ul li a:hover span.cloud, nav ul li a.active span.cloud {background:url(../images/left-icons.png) -259px -19px no-repeat;}
nav ul li a:hover span.vserver, nav ul li a.active span.vserver {background:url(/assets/images/icons/vps-icon.png); background-size: 21px; background-repeat: no-repeat; opacity: 1.0;}
nav ul li a:hover span.server, nav ul li a.active span.server {background:url(../images/left-icons.png) -186px -20px no-repeat;}
nav ul li a:hover span.cserver, nav ul li a.active span.cserver {background:url(../images/left-icons.png) -259px -19px no-repeat;}
nav ul li a:hover span.shop, nav ul li a.active span.shop {background:url(../images/left-icons.png) -104px -23px no-repeat;}
nav ul li a:hover span.yss, nav ul li a.active span.yss  { background: url("../images/left-icons.png") no-repeat scroll -428px -19px;}
nav ul li a:hover span.ssl, nav ul li a.active span.ssl { background: url(../images/left-icons.png) -394px -21px no-repeat; }
nav ul li a:hover span.o365, nav ul li a.active span.o365 {background: url(../images/office365hover.png); background-size: 31px 21px; background-repeat: no-repeat; }
nav ul li a:hover span.emailfilter, nav ul li a.active span.emailfilter {background: url(../images/left-icons.png) -28px -21px no-repeat; }
nav ul li a.multiline { line-height: 2.0em;}

nav ul li ul li ul li { font-size: 1.0em;}

header .welcome {display:block; position:absolute; top:0px; left:0px; width:100%; background: #2f2f2f; text-align:right; line-height: 2.8em;}
header .welcome a { color:#fff; margin-right:12px;}
header .welcome span { display: block; position:relative; font-size: 1.4em; color: #555; right:12px; }

/* =============================================================================
   Main Structure Area
   ========================================================================== */
#outer { position:relative; overflow:auto;}
.main{clear:both; position:relative;}
.container{width:100%; margin:0 auto;  background:#e5ebef; position:relative;}
.content {width:100%; min-height:640px;}
.content .title { background:#fff; position:relative;}
.content .summary { background:#f1f5f7; overflow:auto;}

section { padding:34px 30px 34px 30px; overflow:auto; position:relative;}
section:nth-child(2n+1) {background:#F1F5F7;}

.tab-content > .active { overflow: auto; }

/* Large column on top of small
Swap round the style from small to large if the small columns is to display first */
.small-left-col{padding-top:20px;}
.small-right-col{padding-top:20px; text-align:left;}
.large-left-col{padding-bottom:20px;}
.large-right-col{ padding-bottom:20px;}
.mid-left-col, .left-col-45, .left-col-40{padding-bottom:40px; margin: 0 0 20px 0}
.mid-right-col, .right-col-45, .right-col-40{padding-bottom:40px; margin: 0 0 20px 0}
.three-col{border-bottom:1px solid #ccc; padding-bottom:30px;}


/* =============================================================================
   Content Styles
   ========================================================================== */
.info /*info box*/
{ background: #dcdedf; padding:40px; margin-bottom:20px; overflow:auto;}
.info input[type=text] { width: 97%;}

.content .summary .item1,
.content .summary .item2,
.content .summary .item3 { font-size:4.2em; line-height:0.7em; color:#585d63; padding-left:19px; float:left; margin-right:54px}

.content .summary .item1 span,
.content .summary .item2 span,
.content .summary .item3 span { font-size:0.26em; color:#a3a8af; display:block; margin-top:1px}

.content .summary .item1 { background:url(../images/green-square.png) 0 5px repeat-y}
.content .summary .item2 { background:url(../images/orange-square.png) 0 5px repeat-y}
.content .summary .item3 { background:url(../images/blue-square.png) repeat-y}

ul.breadcrumb { margin-bottom:0; }

.content .accordion {}
.content .accordion .btn {display: block;}
.content .accordion .btn a {color:#fff; display: block;}
.content .accordion .info { background: #dcdedf; padding:40px; overflow:auto;}
.content .accordion .info .dark-block { background: #bdc3c7; padding:40px;}
.content .accordion .info .dark-block p {color:#fff;}

.products-main { margin:20px 0;}
.products-main li { width:100%; margin:0; margin-bottom:16px; color:#fff; margin-bottom:14px; list-style: none}
.products-main li a { color:#fff; background:#7ac3a8; font-size:1.2em; text-align:center; padding:48px 0 40px; display:block; opacity: 0.9}
.products-main li a span { font-size:0.9em; opacity:0.5; padding:3px; display:block;}
.products-main li a:hover, .products-main li a:focus { text-decoration:none;  opacity:1;}

.products-main li a.p1 {background:#C44745}
.products-main li a.p2 {background:#2B99CE}
.products-main li a.p3 {background:#9A639A}
.products-main li a.p4 {background:#24CCCD}
.products-main li a.p5 {background:#CF649A}
.products-main li a.p6 {background:#639999}
.products-main li a.p7 {background:#66669C}
.products-main li a.p8 {background:#7ac3a8}
.products-main li a.p9 {background:#db8f4a}
.products-main li a.p10 {background:#5f6471}


ol.aliascolumn {counter-reset: i 0; list-style: none;     font-size:0.8em; padding:0; margin:0;}
ol.aliascolumn li { padding:0; margin:12px 0;}
ol.aliascolumn li:before {
    content: counter(i);
    counter-increment: i;
    padding: 3px 7px;
    margin-right:10px;
    color: #fff;
    background: #484848;
}

input[type="submit"] { width:100%; margin-bottom:5px;}

.nameserver_edit div { display:inline; margin-right: 12px;}
.nameserver_edit div.domain {}
.nameserver_edit div.ip {}

.progress {margin-top:14px;}

#FTP .item-block .btn { font-size: 1.2em; line-height: 5px; margin: 6px 0 10px 0; padding: 12px;}
#FTP .item-block button.btn { width:100%;}
#FTP .item-block .btn-success { margin: 14px 0 0 14px; width: 91% !important; }
#FTP .item-block input [type="password"] { min-wdth:292px; }

tr.odd.updateerror { background: #F5A9A9 !important }
tr.odd.updateerror:hover td{ background: #F5A9A9 !important }
tr.even.updateerror { background: #FF5959 !important }
tr.even.updateerror:hover td{ background: #FF5959 !important }

b.showpass { margin: 0 10px}

.hero-unit {margin:0 0 0 0; display:block; overflow:auto; padding:30px; background:#47859a; border-radius: 0; position:relative;}
.hero-unit .visible-phone { display: none;}
.hero-unit .hidden-phone  { display: inline-block;}
.hero-unit h2 { color:#fff; display:inline-block; font-size:1.1em; margin:0; word-break:break-all;}
.hero-unit h3 { color:#fff; display:inline-block; font-size:1.1em; margin:0;}
.hero-unit h4 span { color:#c7c7c7;}
.hero-unit p { color:#fff; font-size:1em;}
.hero-unit .btn-success {background: none repeat scroll 0 0 #73b7ce; border:none;}
.hero-unit.successful-setup { background: url("../images/icons/success-white-small.png") no-repeat  right 30px top 57px #84CA4B; padding: 30px 70px 30px 30px; }
.advert {margin:20px 0 0 0; display:block; overflow:auto; padding:22px 40px 22px 40px; background:#efefef; border:1px solid #dfdfdf; border-left: 4px solid #7AC3A8; border-radius: 0; position:relative; min-height:104px;}
.advert h3 { font-size:2.2em; margin:7px 0;}
.advert p { font-size:1.1em;}
.advert img { position:absolute; top:30px; left:30px; display:none; }

.wizard {padding:30px 30px 30px 30px; background:#fff; }
.wizard hr { margin:28px -30px; border-color:#e6e6e6;}
.wizard .success {display: none; float:right; background:url(../images/icons/success-small.png) no-repeat; width:0px; height:0px; margin-top:-4px}
.wizard .important-info {margin-bottom:20px}

.input-append, .input-prepend { display:block; width:98%; margin-bottom:30px}
.input-prepend.input-append input { width:100%;}
.input-append .add-on, .input-prepend .add-on { text-align:left;}
.input-prepend.input-append input[type="checkbox"] {width:auto}
.input-append .add-on, .input-prepend .add-on {
  background: none;
    border:none;
    display: block;
    font-size: 14px;
    font-weight: normal;
    height: 24px;
    line-height: 24px;
    min-width: 16px;
    padding: 8px 10px 8px;
    text-align: center;
    text-shadow: 0 1px 0 #FFFFFF;
    width: auto;}

.input-append input[type="submit"], .input-prepend input[type="submit"]  {
  display:block;
  width:96%;}

button.close { margin-right: 18px;}

.tabbable {margin:0 0 30px 0; position:relative;}
.nav { margin-bottom:0;}
.nav-tabs {border-bottom: 0; background:rgba(10, 10, 10, 0.08);}
.nav-tabs > li > a { color:#999; border-radius: 0; border: 0; padding:10px 10px; text-transform:uppercase; font-weight:600; margin-right:0; }
.nav-tabs > li > a:hover, .nav-tabs > li > a:focus { border: 0;}
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {background: #fff; border: 0;}
.tabbable .tab-content { padding:30px; background:#fff; position:relative; overflow: visible;}
.tabbable .tab-content h3 { margin-bottom:16px;}
.nav-tabs > li { width:100%}

.tab-section {
    background:  #EFEFEF;
    padding: 30px;
    position: relative;
}

.tab-section:nth-child(2n) {
    background:  #FFF;
}

/* ---- 3 col databases ---- */
  .three-col{display:block; padding-bottom:0; padding-top:0;}
  .db-block {margin:0 0 20px 0; background:#fff; position:relative; border:1px solid #dfdfdf;}
  .db-block h4 {color:#fff; padding:12px 0 12px 18px; margin:-1px; font-size:1.6em; background:#47859A; }
  .db-block h4 span { opacity:0.7;}
  .db-block div, .db-block div p { color:#484848;}
  .db-block .btn-danger {position:absolute; top:-1px; right:-1px; display:inline-block; border-radius:0; margin:0; background-color:#73B7CE}
  .db-block .add-on { color:#484848}
  .db-block .updatepassword {margin:0 20px;}
  .db-block .updatepassword .add-on { margin-bottom:10px; display:block;}
  .db-block .updatepassword .span2 { display:block; width:97%;}
  .db-block .update-password {margin:16px;}
  .db-block .update-password:before{content:'Change Password'}
  .db-block div p {padding:14px 0 14px 47px; margin:0; position:relative; border-bottom:1px solid #ececec;}
  .db-block div p span { position:absolute; top:15px; left:18px; display:block; width:18px; height:20px; }
  .db-block div p.user span {background: url(../images/content-icons.png) 0 0 no-repeat; }
  .db-block div p.pass span {background: url(../images/content-icons.png) 0 -32px no-repeat;}
  .db-block div p.host span {background: url(../images/content-icons.png) 0 -60px no-repeat;}
   .db-block .phpmyadmin {margin:16px 16px 16px 16px}


.table thead th, .tables thead th {background-color:rgba(10,10,10,0.08); border:none; padding-top:11px; padding-bottom:11px; color: #484848; text-transform: uppercase;}
.progress-head { background: #fff; padding:30px; margin-bottom:30px;}
.progress-head:after { content: ""; clear: both; display: table; }
.progress-head h4 span { color:#47859A;}
.progress { background:#E5EBEF;}
.progress .bar {background: #8ad045}
.progress .bar-danger {background: #E74C3C;}

.item-block { border:1px solid #dfdfdf; background:#fff; min-height: 322px; width:100%;}
.item-block h3 { background: #47859A; border-bottom:1px solid #ececec; padding:14px; margin:0;}
.item-block h3 a { color:#fff; }
.item-block p { padding:8px 14px; margin:0; border-bottom: 1px solid #ECECEC;/*word-break:break-all;*/}
.item-block p span { display:block; color:#666}

#sort_wrapper {padding-top:20px; overflow:auto;}

.ftpclient { font-size:1.2em; padding:10px 14px;}
.ftpclient span { color:#666; letter-spacing: 0.4px;}



.important-info {
    border: 1px dashed #ccc;
  border-radius: 0;
    margin: 20px 0 0 0;
    padding: 16px 35px 16px 35px;
  min-height:40px;
  overflow:auto;
}
.important-info div { width:63%; display:inline-block;}
.important-info h3 {font-size: 2.2em; margin: 7px 0;}
.important-info p { color:#787878}
.important-info .btn { float:right; display:inline-block; margin-top:20px}

#emailtypebuttons { padding-top: 0px; }
#normalmailboxtype input[type="button"] { margin-bottom: 10px; }
#normalmailboxtype { overflow: auto; }
#normalmailboxtype .active { background: #458EB8  }

/* ---- dns management tab interface ----
.x-tab-strip-wrap {border-bottom: 0; background:rgba(10, 10, 10, 0.08);}
.x-tab-left, .x-tab-right {display:none;}
.x-tab-panel {border: 0 none;}
.x-tab-panel-body-top {border: 0 none;}
.x-tab-strip-spacer { display: none;}
.x-tab-panel-footer { border:0 none;}
.x-tab-panel-header-plain .x-tab-strip-top {border: 0 none;}
.x-tab-strip-top .x-tab-left {padding-right: 0;}
.x-tab-strip-top .x-tab-right {padding: 10px; text-transform: uppercase; color:#999; font-weight:600; }
.x-tab-strip-active { background:#fff; color:#484848;}
.x-panel-tbar, .x-panel-bbar, .x-window-tbar, .x-window-bbar, .x-tab-panel-tbar, .x-tab-panel-bbar, .x-plain-tbar, .x-plain-bbar {background:#484848;}
.x-btn-text-icon .x-btn-icon-small-left .x-btn-text {color: #FFFFFF;}

.x-panel x-panel-noborder x-grid-panel x-border-panel { margin:0; border:0;}
.x-grid3-header { background:#efefef;}
td.x-grid3-hd-over, td.sort-desc, td.sort-asc, td.x-grid3-hd-menu-open {
    border-left: 1px solid;
    border-right: 1px solid;
}
.x-grid3-hd-row td { border:none 0;}
.x-form-field-wrap { padding-top:10px; position:relative;}
.x-form-twin-triggers {postion:absolute; top:0; right:0;}
.x-toolbar-right-row span img { width: auto; height:auto}
.icon-delete { background:url(../images/icons/minus-white-sm.png) no-repeat!important; }
.icon-add { background:url(../images/icons/plus-white-sm.png) no-repeat!important; }*/

.dataTables_paginate { font-size:1.2em; float:left; display:block; width:100%; margin-bottom:48px}
.dataTables_paginate span { background: #dfdfdf; padding:6px;} /* active state */
.dataTables_paginate a { background: #none; padding:6px; cursor:pointer;}

#domainsearch .domainsearchform select { position: inherit; width: auto;}


/* =============================================================================
   Popup (info boxes)
   ========================================================================== */

.popover-content {max-width: 138px;}

/* =============================================================================
   Footer Area
   ========================================================================== */
footer{clear:both; background: none; width:100%; color:#99a4ac; position:relative; margin:20px 0}



.webmail-section  {overflow:auto;}
.webmail-section a.btn {margin:0 0 16px 0; display:block}

.reseller-info { position:absolute; display:block; top:0; left:0; height:30px; width:100%; background:rgba(0, 0, 0, 0.4); line-height:30px; color:#fff; text-align:center}
.reseller-info span {color:#fff; font-size:1.2em;}

.circle { width:20px; height: 20px; border-radius: 50% }

.onfail {
float:left;
margin-left: 10px;
margin-top: 6px;
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ff3019 0%, #990503 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ff3019), color-stop(100%,#990503)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #ff3019 0%,#990503 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #ff3019 0%,#990503 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #ff3019 0%,#990503 100%); /* IE10+ */
background: linear-gradient(135deg, #ff3019 0%,#990503 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#990503',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.onwarn {
float:left;
margin-left: 10px;
margin-top: 6px;
background: #e5e696; /* Old browsers */
background: -moz-linear-gradient(-45deg, #e5e696 0%, #aaa64e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e5e696), color-stop(100%,#aaa64e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #e5e696 0%,#aaa64e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #e5e696 0%,#aaa64e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #e5e696 0%,#aaa64e 100%); /* IE10+ */
background: linear-gradient(135deg, #e5e696 0%,#aaa64e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e696', endColorstr='#aaa64e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

div.new-cert { float: right; }
div.new-cert a{ color: #fff; }

/* ==|== media queries ======================================================
   EXAMPLE Media Query for Responsive Design.
   This example overrides the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

body:after {
  content: "less than 320px";
  font-size: 300%;
  font-weight: bold;
  position: fixed;
  bottom: 60px;
  width: 100%;
  text-align: center;
  background-color: hsla(1,60%,40%,0.7);
  color: #fff;
  display:none;
} /* Media Reporter for testing */

@media screen and (max-width: 1023px){
  div.new-cert{
    float: none;
    margin-top: 20px;
  }
  .table td.controlpanel{padding-bottom:0 !important;}
  .table td.firewallinfo{font-size:1.1em !important;}
  .btn-firewallrule{width:100%; border-radius:0px; margin-left:0px !important;}
  .hiddenrule{display:none;}
  .shownrule{display:block;}
  .btn-servercontrols{width:100%;}
  .table td.hoverbox{
    display:block !important;
    float:right;
    width:20px;
    height:30px;
    position:relative !important;
    padding:0 !important;
    left:0px;
    top:0px;
    z-index:1;
  }
  .table td.firewallinfo input, .table td.firewallinfo select {color:black !important; width:100%;}
  .updaterbox{width:60% !important;}
  .btn-updater{width:40% !important;}
  .config-right, .config-left {float:left; width:100%}
  #friendlyedit{float:none !important;display:flex; width:100%;}
  #friendlyedit input[type='text'] {width:70% !important; float:left !important; height:43px;}
  #friendlyedit .friendlybuttons{width:30%; float:right !important; display:inline-block !important; }
  #friendlyedit .btn-editfriendly{display:inline-block !important; width:50%; padding-left:0px !important; padding-right:0px !important; border-radius:0px;}
  #friendlyedit .icon-white{text-align:center; display:inline-block;}
  #friendlyedit .btn-arrow-right {border-radius:0px 4px 4px 0px;}
}

@media only screen and (min-width: 320px) {
  body:after {
    content: "320 to 480px";
    background-color: hsla(90,60%,40%,0.7);
    display:none;
  } /* Media Reporter for testing */

  .w33 .feature-bullets { width:82%;}
  .tabs li {width:90px;}
  .tabs li a {font-size: 13px;}
  .emaillefthalf, .emailrighthalf{
    float:inherit;
    width:100%;
  }
  .btn-email {
    width:auto;
  }
   .mb-div{
    display:none;
  }
}
@media only screen and (min-width: 480px) {
  body:after {
    content: "480 to 768px";
    background-color: hsla(180,60%,40%,0.7);
  } /* Media Reporter for testing */
  .table td .btn {margin-top:3px;}
  .table td.server { width:75%;}
.popover-content {max-width: 248px;}
}

@media only screen and (min-width: 768px) {
#outer { width:94%; margin:10px auto;}
/* .hero-unit .btn:after { content:" Add New"} */

#domainsearch .domainsearchform select { position: inherit; min-width: 180px;}
  body:after {
    content: "768 to 1024px";
    background-color: hsla(270,60%,40%,0.7);
  } /* Media Reporter for testing */

.products-main li { width:32%; margin-right:1.5%; display:inline-block;}
.products-main li:nth-child(3n) {margin-right:0;}
.content .accordion .btn {display:inline-block; line-height: 1.3em; margin: 0 3px 10px; }
input[type="submit"] {width:auto;}
.btn-sendsettings {width:auto;}
  .hero-unit {padding:30px;}
    #Databases .hero-unit { margin-top: 30px; }
  .hero-unit .btn { float:right; margin:6px 0 0 0; width:auto;}
  .hero-unit form { float:right; margin:6px 0 0 0; width:auto;}


  .advert {padding:22px 40px 22px 138px;}
  .advert img { display: inline-block; }
  .advert > div { float:left; width:58%;}
  .advert form { display:inline-block; float:right; margin:12px 0 0 0}
.important-info {
    padding: 16px 35px 16px 142px;
   min-height:40px;
   background:url(../images/icons/support-services@2x.png) 30px 20px no-repeat #f8f8f8;
}

.input-append .add-on, .input-prepend .add-on {display: inline-block;}
.input-prepend.input-append input { width: auto; display: inline-block;}
select {width: 100%;}
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { width:auto; min-width:210px}
.email-table tr td:first-child{ color:#999; }
  .table td.server {width:86%;}
  .wizard .success {display:inline-block; width:40px; height:40px;}
  .highlight select { width:auto;}
input[type="text"].firewallinput, input[type="number"].firewallinput {width: 100%; min-width:0px;}

#normalmailboxtype input[type="button"] { margin 0 14px 0 0; display: inline-block; width: auto; }
.webmail-section a.btn {float:right; margin:0}
.webmail-section a.btn:nth-child(1){ margin:0 0 0 15px;}
.webmail-section a.btn-back { float:left;  margin-left:0!important}

.emaillefthalf {
  float:left;
  width:83%;
}
.emailrighthalf {
  float:right;
  width:16%;
  text-align:right;
}
  .btn-email {
    width:80%;
  }
  .mb-div{
  display:inline;
}
#quotabox {
  float:right;
}
}


@media only screen and (min-width: 1024px) {

    header .title{ display: block; }

    nav{ left: 0 !important; }
#toggle-nav{ display: none; }

.table td.domain-bulk  {float: none}
#domainsearch select {
    display: inherit;
    margin: 0;
    position: absolute;
    top: 184px;
    width: 40%;
}
#sortmobile_filter { float:right;}
#sortmobile_length { width: 60%;}
#sortmobile_filter input[type="text"] { width: 74%;}

#FTP .item-block button.btn { width: 24%;}
#FTP .item-block button.btn-success { margin-top: 14px; width: 92%;}

#domainsearch select { top: 186px; width: 20%;}
  body:after {
    content: "1024 and up";
    background-color: hsla(360,60%,40%,0.7);
    display:none;
  } /* Media Reporter for testing */

h2{font-size:1.9em; margin-bottom:12px;}
  #outer { width: 1002px; margin-top:50px}
  .container { width:100%;}
  section { padding-left:240px; overflow:auto;}
  header #logo{ text-indent:-9999em; display:inline-block; z-index:10; margin:0; width:21%; height:auto; position:absolute; top:0; bottom:0;}
  header .title {height: auto; position:relative; top:0; bottom:0;}
  header .title h1 {padding:39px 40px 39px 240px;}
  header .notice { text-align:left; top:96px; padding:5px 40px 5px 240px; }
  header .welcome {width:40%; text-align: right; position:absolute; top:36px; left:auto; right:40px; background: none; line-height: 2.0em}
  header .welcome a { color:#34373C; margin-right:0;}
  header .welcome span {right:0; }
  nav {width:21%; top:0}
  nav:hover, nav.active {width:21%}

  nav ul { margin:13px;}
nav ul li a { display:block; color:#7f8387; font-size:1em; line-height:3.2em; text-decoration:none; padding-left:50px; margin-left:0; overflow:hidden; text-indent:0}
nav ul li a:hover, nav ul li a:focus { color:#fff;  text-decoration:none;}
nav ul li a.active { color:#fff;  text-decoration:none; background:#37434e; border-radius:4px; -moz-border-radius:4px;}
nav ul li span {display:none;}
nav ul li a span {display:block;}
nav ul li a span {top:0; left:12px;}

nav ul li ul li a { padding-left: 32px}
nav ul li ul li a span {background:none; display:block}
nav ul li ul li a:hover span {background:none; display:block}
nav ul li ul li a.active span {display:block}

nav ul li ul li span {display:none}
nav ul li ul li:hover span {display:none}
nav ul li ul li.active span {display:none}
nav ul li a.multiline { line-height: 1.6em;}
.db-block:nth-child(5n) { clear:both;}

ul.breadcrumb {display:block;}

    .table .progress { display:none;}
  .table td {line-height:2.4em;}
    .table td.domain { min-width:235px;}
  .table tbody td { display: table-cell;}
  .table td.server { width:auto;}
  .table td.domain { width:auto;}
.email-table tr td { padding-left: 14px;}
/*.email-table tr td:first-child { max-width: 200px;}*/
.email-table tr td form { float:right;}
  #sort_info, #sortmobile_info {margin-top:0px}
  #sortmobile_wrapper {overflow: auto; }

  .small-left-col{float:left;width:33%; display:block; padding-bottom:0; padding-top:0; border:0; margin:0}
  .small-right-col{float:right; width:33%; display:block; padding-bottom:0; padding-top:0; border:0; margin: 0}

   .small-left-col span image { width:100%; height:auto; display:block;}

  .large-right-col{float:right; width:60%; display:block; padding-bottom:0; padding-top:0; border:0; margin: 0}
  .large-left-col{float:left; width:60%; display:block; padding-bottom:0; padding-top:0; border:0; margin: 0}

  .mid-left-col{float:left; width:48%; display:block; padding-bottom:0; padding-top:0; border:0; margin: 0}
  .mid-right-col{float:right; width:48%; display:block; padding-bottom:0; padding-top:0; border:0; margin: 0}
  .three-col{float:left; width:32%; display:block; padding-bottom:0; padding-top:0; margin-right:1%}
  .three-col:nth-child(4n){float:right; margin-right: 0; width:33%;}
  .db-block .update-password {margin:16px 16px 16px 16px;  display:block;}
  .db-block .phpmyadmin {margin:16px 16px 0 16px; display:block;}

    #sortmobile_length select {width: 110px;}

.dataTables_length {float:left;}
.dataTables_filter {float:right;}
  .btn {display:inline-block;}
.visible-phone { display: none;}
.hidden-phone {display: block;}

.hero-unit #sort_wrapper { float:right;}
.hero-unit h2, .hero-unit h3 {font-size:1.7em; margin-top:8px}
.nav-tabs > li { width: auto;}
#FTP .item-block .btn {margin: 0px 0 0 14px; width:auto;}
.item-block p span { display:inline-block;}
.item-block p span.onappinfo {float:right;}
.item-block p span.onappinfotrue {font-weight:bold; color:green;}
.item-block p span.onappinfofalse {font-weight:bold; color:red;}
.key .icon-info-sign { height: 42px; right: -30px; top: -110px; }
.btn-arrow {margin:0; float:left; text-decoration:none; width:25%; line-height:0; border-radius:0px;}
.btn-arrow-left {border-radius:4px 0px 0px 4px;}
.table td .btn-arrow-left {border-radius:4px 0px 0px 4px;}
.table td .btn-arrow-right {border-radius:0px 4px 4px 0px;}
.btn-editfriendly {padding:5px; height:30px;}
.editfriendlybox {height:30px !important; margin-bottom: 0px !important;}
.btn-arrow-right {border-radius:0px 4px 4px 0px;}
.table td.firewallinfo input, .table td.firewallinfo select {color:black !important; margin:0px !important; width:100%;}
.left-text{width:66%; float:left;}
.right-button{float:left !important;}
.p-right-button {display:inline;}
.config-right {float:left;width:50%;}
.config-left{float:left;width:50%;}
#friendlyedit{display:block;}
#friendlyedit input[type='text'] {width:70% !important;}
#friendlyedit .friendlybuttons {width:30% !important;}
#friendlyedit .btn-editfriendly {width:50% !important;}
}

@media only screen and (min-width: 1200px) {
}
@media only screen and (min-width: 1400px) {
  .advert > div { float:left; width:60%;}
}

@media only screen and (min-width: 1600px) {
  .advert > div { float:left; width:70%;}
    nav{max-width: 100%;}
   #domainsearch select { top: 164px; width: 14%;}
  #outer { width: 1400px;}
  header .title h1 { padding-left:324px;}
  section { padding-left:324px}
  header .notice { text-align:left; top:96px; padding:5px 40px 5px 324px; }
nav ul li a.multiline { line-height: 2.4em;}
  .products-main li { width:23.4%; margin-right:1.2%; display:inline-block;}
  .products-main li:nth-child(3n) {margin-right:1.2%;}
  .products-main li:nth-child(4n) {margin-right:0;}
   .three-col{float:left; width:32.2%; display:block; padding-bottom:0; padding-top:0; margin-right:1%}
   .three-col:nth-child(4n){float:right; margin-right: 0; width:33%;}
  .db-block .update-password {margin:16px 0 16px 16px; display:inline-block}
   .db-block .phpmyadmin {margin:16px 16px 0 0; float:right; display:inline-block}
   .left-text{width:75%; float:left;}
}

#toggle-nav{
    background: #293541;
    color: #fff;
    padding: 20px;
    cursor: pointer;
    font-size: 14px;
}

#toggle-nav span{
    position: relative;
    top: 1px;
    left: 10px;
}

@media only screen and (min-width:1024px) {
  .note {
    border-left: 2px solid rgba(0,0,0,0.2);
    padding-left: 20px;
  }

  .o365btn {
    margin-top: 15px;
    margin-left: 45px;
  }
  .firewall, .minilabel {display:none;}
  .btn-arrow {margin:0; float:left; text-decoration:none; width:25%; line-height:0;}
  .table td .btn-arrow {margin:0; float:left; text-decoration:none; width:25%; line-height:0;}
  .hiddenrule{display:none;}
  .shownrule{display:table-row;}
}



@media only screen and (min-width: 1600px) {
  .tenfwdswarning {
    background-color: white;
    padding-bottom:2%;
  }

  .tenfwdswarning .hero-unit {
    background-color: darkred;
  }

  .tenfwdswarning .hero-unit h3 {
    font-size:1.4em;
  }

  .tenfwdswarning .left-text {
    display:inline-block;
    padding:3%;
    width:73%
  }

  .tenfwdswarning .left-text p.warn {
    color: red;
  }

  .tenfwdswarning .right-image {
    display:inline-block;
  }
}


@media only screen and (min-width: 1024px) {
  .tenfwdswarning {
    background-color: white;
    padding-bottom:6%;
  }

  .tenfwdswarning .hero-unit {
    background-color: darkred;
  }

  .tenfwdswarning .hero-unit h3 {
    font-size:1em;
  }

  .tenfwdswarning .left-text {
    display:inline-block;
    padding:3%;
    width:64%
  }

  .tenfwdswarning .left-text p.warn {
    color: red;
  }

  .tenfwdswarning .right-image {
    display:inline-block;
  }
}

@media only screen and (min-width: 801px) {
  .tenfwdswarning {
    background-color: white;
    padding-bottom:6%;
  }

  .tenfwdswarning .hero-unit {
    background-color: darkred;
  }

  .tenfwdswarning .hero-unit h3 {
    font-size:1em;
  }

  .tenfwdswarning .left-text {
    display:inline-block;
    padding:3%;
    width:64%
  }

  .tenfwdswarning .left-text p.warn {
    color: red;
  }

  .tenfwdswarning .right-image {
    display:inline-block;
    vertical-align: text-bottom;
  }
}

@media only screen and (max-width: 800px) and (min-width: 691px) {
  .tenfwdswarning {
    background-color: white;
    padding-bottom:6%;
  }

  .tenfwdswarning .hero-unit {
    background-color: darkred;
  }

  .tenfwdswarning .hero-unit h3 {
    font-size:1em;
  }

  .tenfwdswarning .left-text {
    display:inline-block;
    padding:3%;
    width:59%
  }

  .tenfwdswarning .left-text p.warn {
    color: red;
  }

  .tenfwdswarning .right-image {
    display:inline-block;
    vertical-align: text-bottom;
  }
}

@media only screen and (max-width: 690px){
  .tenfwdswarning {
    background-color: white;
    padding-bottom:6%;
  }

  .tenfwdswarning .hero-unit {
    background-color: darkred;
  }

  .tenfwdswarning .hero-unit h3 {
    font-size:1em;
  }

  .tenfwdswarning .left-text {
    display:inline-block;
    padding:3%;
    width:45%
  }

  .tenfwdswarning .left-text p.warn {
    color: red;
  }

  .tenfwdswarning .right-image {
    display:inline-block;
    vertical-align: text-bottom;
  }
}