/* vim: set expandtab tabstop=4 shiftwidth=4 foldmethod=marker: */

html, body {
    font: normal 11px tahoma,arial,verdana,sans-serif;
    text-align: left;
    color: #183d46;
}

h1 {
    color: #89b941;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 5px;
}

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

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

/***
 * 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; }
.create-icon { background: transparent url('/images/icons/16x16/generic-add.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; }
.copy-icon { background: transparent url('/images/icons/16x16/edit-copy.png') no-repeat center left !important; }
.duplicate-icon { background: transparent url('/images/icons/16x16/edit-duplicate.png') no-repeat center left !important; }
.refresh-icon { background: transparent url('/images/icons/16x16/view-refresh.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; }
.download-icon { background: transparent url('/images/icons/16x16/folder-download.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; }
.help-icon { background: transparent url('/images/icons/16x16/question.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; }
.reset-icon { background: transparent url('/images/icons/16x16/view-refresh.png') no-repeat center left !important; }
.product-icon { background: transparent url('/images/icons/16x16/price-tag.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; }

div.mainMenu .x-panel-header-noborder { display: none; }

/**
 * form styles
 */
form {
    color: #183d46;
}

form a {
    color: #183d46;
    text-decoration: none;
}

form td.label,
form td.element {
    padding: 0.2em;
}

form td.label {
    width: 100px;
    color: #333;
    text-align: right;
    vertical-align: top;
    padding-top: 0.6em;
    padding-left: 5px;
    padding-right: 5px;
}

.formBlock {
    background-color: #dfe8f6;
    border: 1px #a3c8ec solid;
    color: #183d46;
    margin-bottom: 5px;
    padding: 5px;
    z-index: 99999;
}

.formBlock p.instructions {
    padding-left: 5px;
    color: #333;
    margin: 10px 0;
}

.formBlock h2 {
    font-size: 12px;
    font-weight: bold;
    padding-bottom: 0.2em;
    margin: 2px 0 5px 5px;
}

form div.separator {
    height: 0px;
    line-height: 0px;
    border-bottom: 1px #CCC solid;
    margin: 10px 0;
}

form table.ovoyoButtonSet {
    margin-top: 5px;
}

/*
form tr.buttonSet {
    width: 100%;
    padding: 5px;
}

/*form tr.buttonSet td {
    padding-top: 5px;
    padding-bottom: 5px;
    vertical-align: middle;
}*/

form tr.spacer td {
    height: 5px;
    line-height: 5px;
}

form span.textAction {
    cursor: pointer; cursor: hand;
}

fieldset {
    border: 1px #a3c8ec solid;
    text-align: left;
    padding: 4px 5px;
}

form .secondary {
    background-color: transparent;
    border: none;
    cursor: pointer; cursor: hand;
    padding: auto 0px;
}

button {
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
    margin:0;
    padding:0;
    cursor: pointer; cursor: hand;
}


.edit, .datePicker { cursor: pointer; }

input[type="text"],
input[type="password"],
select,
textarea {
    border: 1px solid #A3C8EC; 
    padding: 2px;
    font-size: 1.0em; 
}

input[type="text"],
input[type="password"] {
	width: 200px;
}

input[type=text]:focus, 
input[type=password]:focus, 
textarea:focus, select:focus { 
    border-color:#666; 
}

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


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

/**
 * Header
 */
div#header {
	height: 40px;
    background:  #172E37 url('/images/logo.png') 4px 4px no-repeat;
    /*background-color: #337ca9;*/
    text-align: left;
    font-size: 20px;
    font-weight: bold;
    color: #FFF;
    padding: 0px 2px 0px 40px;
}

div#header a {
    color: #FFF;
}

div#headerNav {
    float: right;
    font-size: 10px;
    margin-top: 3px;
    text-align: right;
    line-height: 31px;
    vertical-align: bottom;
}

div#headerNav .loggedInAs {
	float: left;
	font-family: Arial;
	margin-left: 5px;
}
div#headerNav .loggedInAs a { color: #7ebe38; }

div#headerNav .loggedInAs .left {
	float: left;
    background: url(/images/user_info_sprite.png) no-repeat 0 2px;
	width: 15px;
    height: 32px;
}
div#headerNav .loggedInAs .right {
    float: left;
    background: url(/images/user_info_sprite.png) no-repeat 0 -33px;
    width: 12px;
    height: 32px;
}
div#headerNav .loggedInAs .main {
    float: left;
    background: url(/images/user_info_sprite.png) repeat-x 0 -71px;
    padding: 0 5px;
}

div#headerNav ul {
    float: left;
}

div#headerNav ul li {
	float: left;
	padding-left: 5px;
}

div#headerNav ul li a { text-decoration: none; }

/**
 * system notification & progress
 */
div#systemNotification {
    visibility: hidden;
    position: fixed;
    z-index: 999;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    top: 0;
    width: 52%;
    left: 24% !important;
    background: #F7F5E6 url('/images/icons/32x32/exclamation.png') no-repeat 8px 10px !important;
    border: 5px solid #DB0000;
    border-top-width: 0px;
    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 h2 {
    float: left;
    display: block;
    font-size: 123.1%;
    margin-bottom: 0.5em; 
    font-weight: bold;
    padding: 10px 20px 0px 55px;
}

div#systemNotification ul { 
    float: left;
    clear: left;
    padding: 0px 10px 15px 55px; 
}

div#systemNotification ul li {
    float: left;
    clear: left;
    display: block;
    font-weight: normal;
}

div#systemNotification a { color: blue; }

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;
}

/**
 * Publishing notification & progress
 */
div#publishingNotification {
    float: left;
    font-size: 10px;
    color: #000;
    margin-left: 200px;
    margin-top: -30px;
}

div#publishingNotification .left {
    float: left;
    background: url(/images/publishing_notification_sprite.png) no-repeat 0 0;
    width: 22px;
    height: 28px;
}
div#publishingNotification .right {
    float: left;
    background: url(/images/publishing_notification_sprite.png) no-repeat 0 -68px;
    width: 24px;
    height: 28px;
}
div#publishingNotification .main {
    float: left;
    background: url(/images/publishing_notification_sprite.png) repeat-x 0 -32px;
    line-height: 22px;
    height: 28px;
    padding: 0 5px;
}
div#publishingNotification .publishIcon {
    float: left;
    background: url(/images/icons/22x22/publish.png) repeat-x 0 0;
    width: 22px;
    height: 22px;
    margin: 0 7px 0 -7px;
}

div#publishingNotification a { color: #000; }
div#publishingNotification .number { color: #7ebe38 }

#publishStatus {
    display: block;
    float: left;
    background: url('/images/icons/16x16/tick.png') no-repeat 0 0;
    line-height: 16px;
    padding-left: 20px;
}
#publishStatus.hidden { display: none; }
#publishStatus.publishing { 
    background: url(/images/loading.gif) no-repeat 0 0;
}

#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;
}   

ul.menu {
    padding: 5px;
}
ul.menu li.menuItem {
    text-align: left;
    color: #183d46;
    font-size: 11px;
    line-height: 18px;
}

ul.menu li.menuItem a {
    color: #183d46;
    text-decoration: none;
}

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

ul.menu li.separator {
    border-bottom: 1px #89b941 dotted;
    line-height: 0px;
    margin-bottom: 2px;
}

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

/**
 * Login/change password
 */
form#login td.label {
    width: 150px;
}

form#changePassword td.label {
    width: 150px;
}

/*div#login {
    position: absolute;
    top: 40%;
    left: 50%;
    margin-left: -175px;
    margin-top: -80px;
    width: 350px;
}*/

div#login td.label {
    width: auto;
}

div#login div.formBlock {
    padding: 20px;
}

div#login table.ovoyoForm input[type="text"],
div#login table.ovoyoForm input[type="password"] {
    width: 200px;
    height: 15px; 
}

.forgot-password { float: right; text-decoration: underline; cursor: pointer; color: #000 !important; font-size: 93%; }
.forgot-password-container { margin-top: 15px; padding-top: 10px; border-top: 1px dashed #A3C8EC; clear: right; float: left; font-size: 93%; }
.forgot-password-container td.label { width: 50px !important; }
#forgotPasswordForm { font-size: 108%; } 

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

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

.x-grid3-body .hiddenItem { color: #f00; }

.row-error .x-grid3-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
 */

ul.success,
ul.info,
ul.warning,
div.errors ul {
    padding: 10px;
    padding-left: 35px;
    margin-bottom: 10px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
}

ul.success {
    background: #e0fccf url('/images/icons/22x22/dialog-success.png') no-repeat 7px 7px;
    border: 1px solid #00D100;
}

ul.info {
    background: #FBF5D0 url('/images/icons/22x22/dialog-information.png') no-repeat 7px 7px;
    border: 1px solid #FAD42E;
}

ul.warning {
    background: #FBEC88 url('/images/icons/22x22/dialog-warning.png') no-repeat 7px 7px;
    border: 1px solid #FAD42E;
}

div.errors ul {
    background: #FEF1EC url('/images/icons/22x22/dialog-error.png') no-repeat 7px 7px;
    border: 1px solid #CD0A0A;
}

/**
 * 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; }

.reservedRow { background-color: #FEEFEF; }

#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 {
	/* Text color for the standard text.  Our additional text is styled separately,
	 * below.
	 */
    color: #9B3836;
	
	/* Set a border-color to match the main border-color, above.  This is used
	 * only for the bottom-border, which separates it from the panel body.
	 */
    border-color: #CC0000;

	/* This image is a red version of the standard blue panel gradient. */
    background-image: url('/images/white-top-bottom-red.gif');
}

/* 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 {
    float: right;

    margin: 0 0.5em 0 1em;
    padding: 2px 4px 3px 0.5em;

    color: #FFFF00;
    background-color: #CC0000;

    border-radius: 3px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
}

/* lockInformation contains the details about the current lock holder. */
.lockInformation {
    background-color: #FFFFFF;

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

    color: #996666;
    font-size: 0.8em;
    font-weight: normal;

    border-radius: 2px;
    -moz-border-radius: 2px;
    -khtml-border-radius: 2px;
    -webkit-border-radius: 2px;
    -o-border-radius: 2px;    
}

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

/* Style the 'steal' link. */

.lockedNotice a {
    color: #FFFF00;
    font-size: 0.8em;
    padding: 1px 0.5em;
    
    border: 1px solid #CC0000;
}

.lockedNotice a:hover {
    border: 1px solid #CCC0C0;
    background-color: #E00000;

    border-radius: 2px;
    -moz-border-radius: 2px;
    -khtml-border-radius: 2px;
    -webkit-border-radius: 2px;
    -o-border-radius: 2px;    
}

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