/*
	Jun 25 2014, the contents of this file is now used in 3 places:
	
		1. the main site (desktop), bundled.
		2. admin, in the CKEditor
		3. template.html, for PDF creation.
	
*/


/*
	May 1 2014, always showing the vertical scrollbar so are calculated width of the CKEditor is always fixed.
	Without this, the available space in the editor gets reduced by the width of the vertical scrollbar when
	it starts to appear. important to use .cke_show_borders or cke_editable, etc, and 
	DO NOT use .item-body since the front end also uses .item-body (one of the reasons we use this CSS
	file since it's shared with both the front end and backend
*/
.cke_show_borders {
	overflow-y: scroll;
	margin: 8px;
	padding: 0;
}


/* intentionally excluding the font-family from ".item-body font". this is because we have tags like this: <font face="symbol">
   and CSS takes precedene over HTML attributes. in this particular case, the symbol font is not used for the content in the font
   tag which leads to the literal character(s) in the font content being displayed rather than the symbol version.
   eventually would be good to replace symbol font with unicode alternatives, e.g. instead of a symbol font of £ which
   in symbol font is the "less than or equal to" character or ≤, would be better to use &le; or &#8804;  */
/* Jan 19 2015, commented this out as part of V3 of the site.  May need to setup differently. */
/*
.item-body, .item-body table, .item-body td, .item-body p, .item-body font { font-size: 13px; line-height: 18px; color: #616161; }
.item-body, .item-body table, .item-body td, .item-body p { font-family: Verdana, sans-serif; }
*/

/* Jan 19 2015, commented these 2 out as part of V3 of the site.  May need to setup differently. */
/*.item-body a { font-size: 13px; font-family: Verdana, sans-serif; line-height: 18px; } */ /* no color enforced. color will be inherited. */
/*.item-body h1 { font-size: 20px; line-height: 26px; font-weight: bold; margin: 0 0 5px 0; padding: 0; } */

/*
.content-sidebar-left, .content-sidebar-right { float: right; width: 290px; background-color: #fbfbfb; border: 1px solid #c0ccd3; margin: 5px 0 12px 12px; padding: 2px 12px; color: #8080C0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; text-align: left; }
.content-sidebar-left { float: left; margin-left: 0; margin-right: 12px; }
.content-sidebar-header { padding: 8px; border-bottom: 1px solid #C7BFBF; text-align: center; color: #6D6B6B; font-weight: bold; }
*/

.content-sidebar-right, .content-sidebar-left {
	width: 290px;
	text-align: left;
	padding: 0 0 0 12px;
	border-radius: 0;
	border: 0;
	color: inherit;

	background: #6f483c; 
}

.content-sidebar-inner {
	background: #f7fbfc;
}

.content-sidebar-right {
	float: right;
	clear: right;
	margin: 5px 0 12px 12px;
}

.content-sidebar-left {
	float: left;
	clear: left;
	margin: 5px 12px 12px 0;
}

.content-sidebar-header {
	padding: 8px;
	color: #6D6B6B;
	font-weight: bold;
	text-align: center;
	background: #F0F0F5;
}
.content-sidebar-content {
    padding: 20px 12px;
    overflow: hidden;
    text-align: center;
}

.cta-full-width-p {
    clear: both;
    text-align: center;
    padding: 1.5em 0.5em 1.5em;
    border-bottom: 1px solid #dcdcdc;
    border-top: 1px solid #d6d6d6;
    background: #f2f2f2;
}

.cta-full-width-image-left {
    width: 50px;
    height: 50px;
    float: left;
    margin-top: -11px;
    margin-left: 10px;
}

.cta-full-width-image-right {
    width: 50px;
    height: 50px;
    float: right;
    margin-top: -11px;
    margin-right: 10px;
}

.content-sidebar-content p { margin-bottom: 0; }
.content-sidebar-content p:first-child { margin-top: 0; }
.content-sidebar-content p:last-child { margin-bottom: 0; }

.content-sidebar-right ul, .content-sidebar-left ul {
	padding-bottom: 6px;
	color: #616161; /* same as regular body text, this was to overwrite the purple */
}

.content-sidebar-right li, .content-sidebar-left li {
	padding-bottom: 4px;
}

@media (max-width: 515px) {
    .content-sidebar-right, .content-sidebar-left {
        float: none;
        width: auto;
        margin: 0 0 25px 0;
    }
}

/* --------------------------------- */

.item-body .content-sidebar-button-a {
    display: inline-block !important;
    background-color: #623B2F !important;
    color: #fff !important;
    text-align: center !important;
    text-decoration: none !important;
    padding: 10px 8% !important;
    width: 100% !important;
    border-radius: 5px !important;
    line-height: 22px !important;
    margin: 12px auto !important;
    box-shadow: 0px 0px 5px 0px #C3BEBE;
}

.item-body .content-sidebar-button-a:hover {
    color: #fff !important;
    background-color: #6F483C !important;
}

/* --------------------------------- */

/* this is used for a paragraph that is inserted into a couple of different article categories. */
.article-category-note { background-color: #f2f2f2; padding: 10px 15px; }

blockquote {
    display: block;
    background: #f7f7f7;
    padding: 25px 50px;
    margin: 13px auto;
    position: relative;
    font-style: italic;
    text-align: left;
    /*
  	need overflow hidden (or another clearing technique) because this is positioned relatively and
  	if there's a floated item next to this, e.g. Related Content,
  	without overflow hidden, this blockquote will overlap
  	the floated Related Content box rather than sitting next to it.
  	if position wasn't relative, this wouldn't be a problem, but it is
  	a problem with position relative.  overflow hidden (or another clearing technique) fixes that.

  	another option is clear: both, but that doesn't look too good in many cases with a big
  	gap of whitespace above the blockquote in some cases.
  */
    overflow: hidden;
    /* applying top/bottom border for LE IE9 in style_lt_ie9.css */
    border-top: none;
    border-bottom: none;
    border-right: none;
    /*Borders - (Optional)*/
    border-left: 10px solid #6f483c;
}

    blockquote::before {
        font-family: Arial;
        content: "\201C";
        color: #6f483c;
        font-size: 4em;
        position: absolute;
        left: 10px;
        top: 37px;
    }

    blockquote::after {
        content: '';
    }

blockquote p:first-child { margin-top: 0; }
blockquote p:last-child { margin-bottom: 0; }

.content-disclaimer-wrap { clear: both; padding-top: 25px; }
.content-disclaimer { background: #F3F3F4; padding: 10px 12px; }