@CHARSET "UTF-8";

#viewportMainPanel-body {
    background: #000 url('/images/layout/bg.png') repeat center top;
}

/**
 *  Global styles
 */
a {
    color: #ac1701;
    text-decoration: none !important;
}

a { outline: none; }

a:hover,
a:focus { color: #000; }
a.button:hover { color: #fff; }

p.instructions { color: #666; margin-bottom: 5px; }
strong { font-weight: bold; }
div#pageContent { padding: 5px; }
.clickable { cursor: pointer; cursor: hand; }

.top { vertical-align: top; }
.right { text-align: right; }
.floatright { float: right; }
.floatleft { float: left; }
.clear { clear: both !important; }
.dialogue { padding: 5px; }

/**
 * Nav bar
 */
 #topNav .container {
    width: 100%;
    background-image: url('/images/logo_header.png');
    background-repeat: no-repeat;
    background-position: 10px 10px;
    padding-left: 45px;
    height: 40px;
}
#topNav ul.nav a {
    font-size: 14px;
}
#headerBrand {
    margin-top: 3px;
}

/**
 * Bootstrap multi-level dropdown
 * http://firdaus.grandexa.com/2013/09/twitter-bootstrap-3-multilevel-dropdown-menu/
 */
.dropdown-submenu{
    position: relative;
}

.dropdown-submenu > .dropdown-menu
{
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu{
    display:block;
}

.dropdown-submenu > a:after{
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}

.dropdown-submenu:hover > a:after{
    border-left-color:#ffffff;
}

.dropdown-submenu .pull-left{
    float:none;
}

.dropdown-submenu.pull-left > .dropdown-menu{
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}

/**
 * Main site panel
 */
div.sitePanel,
div.xPanel .x-border-layout-ct,
div.xPanel > div.x-panel-body-default {
    background-color: transparent !important;
}

div#sitePanel > .x-toolbar-default {
    background-color: transparent !important;
}
div#sitePanel > .x-toolbar-default .x-toolbar-text-default {
    color: #000;
    font-size: 18px;
}

div.x-panel-header a {
    color: #fff;
}

/***
 * Right aligned extjs tab
 */
ul.x-tab-strip li.rightTab { float: right; }

/**
 * generic icons for any use
 */
 .default-icon { background: transparent url('/images/icons/16x16/default.png') no-repeat center left !important; }
.save-icon { background: transparent url('/images/icons/16x16/document-save.png') no-repeat center left !important; }
.delete-icon { background: transparent url('/images/icons/16x16/generic-remove.png') no-repeat center left !important; }
.cancel-icon { background: transparent url('/images/icons/16x16/dialog-cancel.png') no-repeat center left !important; }
.actions-icon { background: transparent url('/images/icons/16x16/get-hot-new-stuff.png') no-repeat center left !important; }
.accept-icon { background: transparent url('/images/icons/16x16/news-subscribe.png') no-repeat center left !important; }
.edit-icon { background: transparent url('/images/icons/16x16/edit-link.png') no-repeat center left !important; }
.rename-icon { background: transparent url('/images/icons/16x16/edit-rename.png') no-repeat center left !important; }
.cut-icon { background: transparent url('/images/icons/16x16/edit-cut.png') no-repeat center left !important; }
.paste-icon { background: transparent url('/images/icons/16x16/edit-paste.png') no-repeat center left !important; }
.duplicate-icon { background: transparent url('/images/icons/16x16/edit-duplicate.png') no-repeat center left !important; }
.new-email-icon { background: transparent url('/images/icons/16x16/mail-message-new.png') no-repeat center left !important; }
.notification-email-icon { background: transparent url('/images/icons/16x16/mail--exclamation.png') no-repeat center left !important; }
.spreadsheet-icon { background: transparent url('/images/icons/16x16/edit-select-all.png') no-repeat center left !important; }
.more-icon { background: transparent url('/images/icons/16x16/view-sort-ascending.png') no-repeat center left !important; }
.less-icon { background: transparent url('/images/icons/16x16/view-sort-descending.png') no-repeat center left !important; }
.currency-icon { background: transparent url('/images/icons/16x16/currency.png') no-repeat center left !important; }
.camera-icon { background: transparent url('/images/icons/16x16/camera-photo.png') no-repeat center left !important; }
.communication-icon { background: transparent url('/images/icons/16x16/communication.png') no-repeat center left !important; }
.multimedia-icon { background: transparent url('/images/icons/16x16/multimedia.png') no-repeat center left !important; }
.search-icon { background: transparent url('/images/icons/16x16/zoom-best-fit.png') no-repeat center left !important; }
.visible-icon { background: transparent url('/images/icons/16x16/eye.png') no-repeat center left !important; }
.hidden-icon { background: transparent url('/images/icons/16x16/eye-cross.png') no-repeat center left !important; }
.import-icon { background: transparent url('/images/icons/16x16/table-import.png') no-repeat center left !important; }
.mailout-send { background: transparent url('/images/icons/16x16/mail-message-new.png') no-repeat center left !important; }
.notify-icon { background: transparent url('/images/icons/16x16/bell.png') no-repeat center left !important; }
.workspace-multi-icon { background: transparent url('/images/icons/16x16/monitor-window-3d.png') no-repeat center left !important; }
.key-icon { background: transparent url('/images/icons/16x16/key.png') no-repeat center left !important; }
.arrow-right-icon { background: transparent url('/images/icons/16x16/arrow.png') no-repeat center left !important; }
.arrow-left-icon { background: transparent url('/images/icons/16x16/arrow-180.png') no-repeat center left !important; }
.product-icon { background: transparent url('/images/icons/16x16/price-tag.png') no-repeat center left !important; }

/*
* old icons replaced with font awesome ones
*
.create-icon { background: transparent url('/images/icons/16x16/generic-add.png') no-repeat center left !important; } 
.refresh-icon { background: transparent url('/images/icons/16x16/view-refresh.png') no-repeat center left !important; }
.reset-icon { background: transparent url('/images/icons/16x16/view-refresh.png') no-repeat center left !important; }
.help-icon { background: transparent url('/images/icons/16x16/question.png') no-repeat center left !important; }
.download-icon { background: transparent url('/images/icons/16x16/folder-download.png') no-repeat center left !important; }
.copy-icon { background: transparent url('/images/icons/16x16/edit-copy.png') no-repeat center left !important; }
*/

.edit-cancel-button { width: 100%; }
.edit-cancel-button table { float: right; }

/**
 * main menu specific icons
 */
.site-icon { background: transparent url('/images/icons/16x16/site.png') no-repeat center left !important; }
.my-account-icon { background: transparent url('/images/icons/16x16/my-account.png') no-repeat center left !important; }
.workspace-icon { background: transparent url('/images/icons/16x16/desktop.png') no-repeat center left !important; }
.site-users-icon { background: transparent url('/images/icons/16x16/site-users.png') no-repeat center left !important; }
.users-icon { background: transparent url('/images/icons/16x16/users.png') no-repeat center left !important; }
.old-cms-icon { background: transparent url('/images/icons/16x16/document.png') no-repeat center left !important; }
.blogs-icon { background: transparent url('/images/icons/16x16/blogs.png') no-repeat center left !important; }
.widget-icon { background: transparent url('/images/icons/16x16/widget.png') no-repeat center left !important; }
.online-marketing-icon { background: transparent url('/images/icons/16x16/mail-message-new.png') no-repeat center left !important; }
.ratings-icon { background: transparent url('/images/icons/16x16/star.png') no-repeat center left !important; }

/**
 * Extjs / Bootstrap img css fix
 */
img.x-tool-img {
    vertical-align: initial;
} 

#header-logo {
    color: #fff !important;
}

/**
 * form styles
 */
div.formBlock {
    background-color: #efefef;
    margin: 10px;
    padding: 10px;
}
input[type="text"],
input[type="email"],
textarea,
select,
input[type="password"] {
    display:block;
    width: 300px;
    height: 34px;
    padding: 6px;
    background-color: #fff;
    border: 1px solid rgb(204, 204, 204);
}
textarea {
    height: 80px;
}
input[type="text"]:disabled,
textarea:disabled,
select:disabled,
input[type="password"]:disabled {
    background-color: #ddd;
}

.has-error {
    border-color: #ac1701;
}

input[type="submit"],
a.button {
    display: inline-block;
    padding: 0 14px;
    height: 40px;
    text-transform: uppercase;
    background-color: #ac1701;
    color: #fff;
    font-size: 93%;
    font-weight: normal;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    line-height: 40px;
}

input[type="submit"].alt,
a.button.alt {
    color: #333 !important;
    background-color: #b2b2b2 !important;
    cursor: default;
}

.edit, .datePicker { cursor: pointer; }

/*input[readonly] { background-color: #EFEFEF; }*/

select.yesNo { width: 60px; }

input.multiCheckbox { margin: 0 5px 5px 0; vertical-align:middle;  }
dd.multiCheckbox {
    background-color: #fff; 
    border: 1px #aaa9a9 solid;
    padding: 5px;
    width: 300px;
    height: 50px;
    overflow:auto;
}
.zend_form .x-form-trigger-wrap .x-form-text {
    height: 30px;
    padding: 5px;
    border: 1px solid #aaa9a9;
}
.zend_form .x-trigger-cell {
    background-color: transparent;
}
.zend_form .x-form-trigger {
    margin-top: 4px;
}
dl.zend_form {
    margin-bottom: 0 !important;
}

dl.zend_form dd {
    margin-bottom: 5px !important;
}
a.saveButton,
a.saveButton.x-btn-over {
    background-color: #35aa47 !important;
    background-image: none !important;
}
a.saveButton .x-btn-inner {
    color: #fff !important;
}

/**
 * Some styles for Ovoyo View Helper created components
 */
.ovoyoAssignableSelect button {
    margin: 5px 10px;
}
.ovoyoAssignableSelect select {
    width: 250px; height: 200px;
}

/**
 * system notification & progress
 */
div#systemNotification {
    visibility: hidden;
    position: fixed;
    z-index: 999;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    top: 150px;
    width: 52%;
    left: 24% !important;
    background: #F7F5E6 url('/images/icons/32x32/exclamation.png') no-repeat 8px 10px !important;
    border: 5px solid #DB0000;
    border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    -o-border-radius: 0 0 4px 4px;
}

div#systemNotification div.title {
    line-height: 60px;
    font-size: 123.1%;
    font-weight: bold;
    margin-left: 50px;
    margin-bottom: 10px; 
}
div#systemNotification div.notification {
    padding: 0 20px 20px 20px;
}

div#systemNotification .confirmation { 
    position: relative;
    display: block; 
    clear: left; 
    float: left;
    border-top: 1px solid #000;
    background-color: #3F3F3F; 
    font-weight: bold;
    width: 100%;
    padding: 7px 0px 7px 0px;
    *display: inline-block;
}

div#systemNotification .confirmation label { color: #F7F5E6; display: block; text-align: left; margin-left: 10px; line-height: 21px; }

div#systemNotification .confirmation input.notification {
    vertical-align: middle;
    margin-right: 10px;
    height: 14px; 
}

div#systemNotification .confirmation #dismiss {
    float: right;
    vertical-align: bottom;
    width: 60px;
    margin-right: 8px;
}

/**
 *  Login layout
 */
div#loginContainer {
    padding-top: 127px;
    width: 600px;
    margin: 0 auto !important;
    box-shadow: -10px 40px 10px -30px rgba(0, 0, 0, 0.3);
}
div#loginContainer div.logo {
    width: 600px;
    text-align: center;
}
div#loginContainer div.messages {
    width: 600px;
}
div#loginContainer img#loginLogo {
    margin-bottom: 20px;
}
div#login {
    position: relative;
    z-index: 20;
    width: 600px;
    padding: 40px 100px 22px 100px;
    background-color: #fff;
    border-radius: 3px;
}

div#loginContainer h2 {
    margin: 0px 0 20px 0;
    color: #666;
    font-size: 200%;
    font-weight: normal;
}

div#loginContainer .input-group {
    margin-bottom: 15px;
}

div#loginContainer button {
    float: right;
}

div#login span#forgot-password-button {
    float: left;
    display: block;
    clear: left;
    cursor: pointer;
    color: #ac1701;
    font-size: 116%;
    padding-top: 10px;
}

div#loginContainer div#forgot-password {
    position: relative;
    width: 600px;
    margin: -15px 0 0 0;
    padding: 40px 100px 22px 100px;
    border-radius: 3px;
    background-color: rgba(234, 233, 233, 0.5);
    box-shadow: 0 25px 10px -10px rgba(0, 0, 0, 0.2) inset;
}

div#loginContainer div#forgot-password #_resetPassword-label { display: none; }

div#loginContainer div#forgot-password #reset-password-text {
    float: left;
    width: 270px;
    font-size: 93%;
    line-height: 1.5em;
    color: #666;
}

/**
 * Publishing notification & progress
 */
div.navbar-fixed-bottom {
    height: 50px;
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    
    border: 1px #f1c1c1 solid;
}

div#publishingNotificationContainer.minimised {
    margin-bottom: -22px;
}
div#publishingNotification {
    padding: 4px 20px 0 20px;
    height: 50px;
    text-align: center;
    font-size: 14px;
    z-index: 100000;
    
    background-color: #ffe1e1;
    
}

span#publishingNotificationToggle {
    float: right;
    margin-right: 5px;
    font-size: 18px;
    opacity: 0.5;
    color: #f00;
}
div#publishingNotification .label { font-weight: bold; font-size: 13px; color: #000; }
div#publishingNotification a { color: #000; }
div#publishingNotification .number { color: #ac1701 }

#publishStatus.hidden { display: none; }
#publishStatus.publishing { 
    background: url(/images/loading.gif) no-repeat 10px 0;
    padding-left: 30px;
}

#batchSelectorLabel.hidden, 
#batchSelector.hidden { display: none; }
.pubishingConfirmServer { 
    color: #f00; 
    font-weight: bold;
}

.publish-icon { background-image: url('/images/icons/16x16/publish.png') !important; }
.close-batch-icon { background: transparent url('/images/icons/16x16/close-batch.png') no-repeat 0 0 !important; }
.reopen-batch-icon { background: transparent url('/images/icons/16x16/reopen-batch.png') no-repeat 0 0 !important; }
.add-to-batch-icon { background: transparent url('/images/icons/16x16/add-to-batch.png') no-repeat 0 0 !important; }
.move-out-of-batch-icon { background: transparent url('/images/icons/16x16/move-out-of-batch.png') no-repeat 0 0 !important; }


#addToBatchSelect,
#actionSelect {
    margin-top: -2px;
}


/**
 * Main Menu
 */
.mainMenu .x-panel-header-text {
    font-weight: bold;
}   

.mainMenu div.mainMenuItem {
    padding: 5px;
    text-align: left;
}
ul.menu {
    padding-left: 5px;
}
ul.menu li.menuItem {
    list-style: none;
    font-size: 116%;
    line-height: 1.4em;
}

ul.menu li.menuItem a {
    text-decoration: none;
}

ul.menu li.selected a {
    color: #ac1701;
    font-weight: bold;
}

ul.menu li.separator {
    border-bottom: 1px #333 dotted;
    line-height: 0px;
    margin: 5px 5px 7px 0;
}

div.nowrap {
    display: inline;
    white-space: nowrap;
}

/**
 * Some extjs overrides
 */
.x-panel-header a {
	text-decoration: none;
}

.x-tbar-page-number {
    width: 25px !important
}

.x-tab-bar-strip-default {
    background: -webkit-linear-gradient(#e0dfd6, #ffffff); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#e0dfd6, #ffffff); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#e0dfd6, #ffffff); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#e0dfd6, #ffffff); /* Standard syntax */
}

tr.hiddenItem .x-grid-cell-inner { color: #f00 !important; }

.row-error .x-grid-cell-inner { color: #CD0101 !important; }

/**
 * Drag and drop
 */
.draggable {
    cursor: pointer; cursor: hand;
}

img.draggable_image{
    margin: 5px 0px 5px 5px;
    border: 1px solid #CCC;
}

.droppable-hover {
    background-color: #F00;
}


/**
 * Success, info, warning and error styles
 */
div.x-message-box table { width: 100%; }

div.messages span {
    float: left;
    margin-right: 10px;
}
div.messages ul {
    padding: 0 0 0 20px;
}
div.messages li { list-style: none; }

/**
 * Some extjs styles
 */
.x-grid3-col {
    cursor: pointer; cursor: hand;
}

/**
 * Assignable divs
 */
.assignable {
    background-color: #FFF;
    border: 1px #999 solid;
    width: 150px; 
    min-height: 150px;
    height:auto !important;
    height: 150px;
}

.assignable li {
    /*border-top: 1px #a3c8ec dashed; 
    border-bottom: 1px #a3c8ec dotted; */
    line-height: 1.4em;
    cursor: pointer; cursor: hand;
    padding: 0.2em 0.4em;
}

/**
 * date picker
 */
img.ui-datepicker-trigger {
    vertical-align: middle;
    cursor: pointer; cursor: hand;
    margin-top: -3px;
    margin-left: 2px;
}

/**
 * TinyMce custom link selector
 */
form#tinyMceLinkEditor #linkEditorLinkDisplay { float: left; }
form#tinyMceLinkEditor dt#linkEditorOpenInNewWindow-label { clear: both; }
img#tinyLinkSelectorFileBrowser { padding: 1px 0 0 3px; }

/**
 * workspace admin
 */
#workspaceModules {
   padding: 10px;
}

#workspaceModules h2 {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 3px;
}

#workspaceModules .description {
    clear: both;
    border-top: 1px #999 solid;
	font-size: 11px;
    margin-top: 5px;
    padding-top: 0.2em;
}
#workspaceModules .module { margin-bottom: 20px; }

div.infoBox { padding: 10px; border: 1px dashed #333; margin: 10px 0px 10px 0px; background-color: #fff; }

.paymentWindowMain { font-size: 128%; margin-bottom: 5px;  }
.paymentWindowMain td { padding: 5px;  }
.paymentWindowMain td.label { font-weight: bold; text-align: right; width: 150px; }

.paymentWindow td { padding: 5px; }
.paymentWindow td.label { font-weight: bold; text-align: right; width: 80px;  }

#paymentDetails hr { border: none; border-top: 2px solid #B2B2B2; }

tr.reservedRow td { background-color: #FEEFEF !important; }

#searchFields label, 
#searchFields input { margin: 5px 3px 0 0; vertical-align: middle; }

/* TinyMCE custom plugins - button styling in toolbar.
 * Styling of the dialog box itself is stored within the plugin's folder,
 * but the main Tiny editor styling is external to that, so we need to
 * style the buttons here.
 */
.defaultSkin span.mce_custom_advlink {
    background-position: -500px 0
}

.x-grid3-cell-inner b { font-family: tahoma,arial,helvetica,sans-serif; font-weight: bold !important; }

/********************************* LOCKING *********************************/
/* Styling of the editor panel when an item is locked and uneditable.
 * The editorPanelLocked class is applied to the card panel that contains all
 * editor panels (and removed when you move away) so we can apply styling to all
 * elements.  It needed to be applied this high so that we can style the borders
 * but it also happened to be easier to reference, as it is always accessible via
 * Site.editorPanel.
 */

/* Set the border color for the panel. */
.editorPanelLocked > .x-panel-bwrap > .x-panel-body {
    border-color: #CC0000;
}

/* Set the background color which affects the padding between the panel border and
 * its contents.
 */
.editorPanelLocked .x-panel-body.x-border-layout-ct {
    background-color: #FFF0F0;
}

/* Set a dark red background to the main editor panel (i.e. the part of the panel
 * that contains everything but the title) and give all its children a slight
 * opacity.  This is the simplest way of tinting the panel - much easier than
 * trying to style all potential elements that it may contain.
 */
.editorPanelLocked > .x-panel-bwrap > .x-panel-body > .x-panel > .x-panel-bwrap > .x-panel-body > .x-panel > .x-panel-bwrap {
    background-color: #990000;
}
.editorPanelLocked .x-panel .x-panel .x-panel-bwrap > * {
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";

    /* IE 5-7 */
    filter: alpha(opacity=95);

    /* Netscape */
    -moz-opacity: 0.95;

    /* Safari 1.x */
    -khtml-opacity: 0.95;

    /* Good browsers */
    opacity: 0.95;
}

/* Style the panel header so it is coloured differently to usual. */
.editorPanelLocked .x-panel-header {
    background-color: #c00;
}

/* Ensure text is vertically aligned when our lock notification panel is present. */
.editorPanelLocked .x-panel-header .x-panel-header-text {
    vertical-align: text-top;
}

/* Set a hover color for links in the new panel.  The old rule wasn't firing due
 * to the more specific rules, above, plus the old colour doesn't really work against
 * the new background.
 */
.editorPanelLocked .x-panel-header a:hover,
.editorPanelLocked .x-panel-header .clickable:hover {
    color: #FFFFFF;
}

/* Style the lock notice, which contains all our additional information about the
 * lock.
 */
.lockedNotice {

    margin: 0 0 0 20px;

    color: #ffff00;
}

/* lockInformation contains the details about the current lock holder. */
.lockInformation {

    padding: 1px 0.5em;
    margin-left: 1em;

    color: #fff;
    font-size: 0.8em;
    font-weight: normal;
}

/* Make the more important information more prominent. */
.lockInformationUsername,
.lockInformationSince {
    color: #fff;
    font-weight: bold;
}

/* Style the 'steal' link. */

.lockedNotice a {
    color: #000 !important;
    font-size: 0.8em;
    padding: 1px 0.5em;
    
    border: 1px solid #ff0000;
    background-color: #fff;
}

/********************************* END LOCKING *********************************/

#createUserForm td.label, #updateUserForm td.label, #loginInfoTab-body td.label {
    color: #000;
    font-size: 100%;
}