/*	cboc-home.css: 2-column layout for conferenceboard.ca home
    Developed by Dan Jones (jonesd@conferenceboard.ca)
	Updated September 2010

	Layout for conferenceboard.ca home page, which has a lot of special
    controls and a particular design. As opposed to previous designs,
    the header and footer divs are not contained within the wrapper div,
    but are contained by the topwrapper div.  There is no leftcol in
    this layout, only the maincol and rightcol.  Within the maincol is
    a table with three columns (defined in the master) each presenting
    a certain amount of info in list form. */

/* OVERALL LAYOUT ********************************************** */

body { 
background: #cdd9e2;                /* light blue */
color: #58595B;                     /* dark grey */
font-family:verdana, helvetica, arial, sans-serif;
font-size:70%;
line-height:130%;
}

div.container {}

    div.container#topwrapper {
    margin:0 auto;
    width:1000px; /* was 100%, but that caused a background display bug */
    background-color: #cdd9e2;      /* light blue */
    background-image: url('../img/cboc/design/bgs/cboc_bkrd.gif')!important; /* 928px bg */
    background-repeat:repeat-y;
    background-position: 50% 0%; }  /* centred on page */

    div.container#header { }    /* placeholder */
    
    div.container#breadcrumb { } 

        div.emailthispage { }
        
            div.btnPrintFriendly { display: none; }
            div#spanPrintButton { display: none; }

    div.lang {                  /* deprecated? if removing this, remove div from master as well */
    display:none;                   /* language link is now in tall-spacer */
    }

    div.container#wrapper {
    /* background: transparent!important; */
    margin-top:0px;
    background-image: url('../img/cboc/design/bgs/cboc_home_bg.gif')!important; /* custom bg to create columns that extend to full height of page */
    background-repeat:repeat-y;
    background-position: 50% 0%;    /* centred */
    }
    div.container#wrapper-bottom {
    height:4px;
    background-color: transparent!important;
    background-image: url('../img/cboc/design/bgs/cboc_home_bottom.gif')!important; /* bottom edge of columns that extend to full height of page; rounded corners (bottom) */
    background-repeat:repeat-y;
    background-position: 50% 0%;    /* centred */
    }

    div.container#body {
    z-index:0;
    float:left;
    width:100%;
    display:inline;
    margin-left:-315px ! important; /* 315px */
    }

    div.container#leftcol {
    float:left;
    display:none ! important;       /* no leftcol on the home page */
    width:18em;
    margin-left:339px ! important;  /* 339px */
    }

    div.container#maincol {
    margin-left:339px ! important;  /* 339px */
    margin-right:0 ! important;
    margin-top:0;
    padding: 10px 3px 10px 10px;
    background-color: transparent!important;
    background-image: url('../img/cboc/design/bgs/cboc_whitebox_top.gif')!important; /* rounded corners (top) */
    background-repeat:no-repeat;
    background-position: 50% 0%;    /* centred, top */
    }
        div.container#maincol table td {
        padding: 6px 8px 14px;
        vertical-align: top;
        }
        div.container#maincol table .special-items td {
        padding: 6px 8px 5px;
        vertical-align: top;
        }

    div.container#rightcol {
    background: #eee;               /* same colour as bg */
    width: 271px;
    float: right;
    margin-right:24px;
    margin-top: 0px;
    padding:0;
    }
        div.container#rightcol * {
        position:relative;
        }
        div.container#rightcol table,
        div.container#rightcol tr,
        div.container#rightcol td {
        padding: 0; margin: 0; border-collapse:collapse;
        }

    div.container#footer {
    background: transparent!important;
    }
    div.container#footer-bottom {
    width:100%;
    height:14px;
    background-color: #cdd9e2;      /* blue bg */
    background-image: url('../img/cboc/design/bgs/cboc_bkrd_bottom.gif')!important; /* bottom edge of page bg  */
    background-repeat:no-repeat;
    background-position: 50% 0%;    /* centred, top */
    }

/* MAIN COLUMN STYLES ****************************************** */

.featured-item { }              /* at top of page, below top menu */

    .featured-item tbody, .featured-item table {
    padding:0; margin:0;
    }
        .featured-image {
        width: 245px;
        height: 245px;
        line-height:0%;             /* IE won't display properly without this, because it won't */
        font-size:0;                 /* ignore the whitespace that sitefinity adds. >:( */
        background: transparent;
        padding:0 0 2px!important;
        }
        .featured-text {
        width: 287px;
        vertical-align: bottom !important;
        /*padding:8px 0px 0px 20px !important;*/
        padding:8px 0px 2px 20px !important;
        }
            .featured-text p { margin: 0; }
            .featured-text ul {
            margin: .1em 0 -.1em 1.4em!important;
            }
            .featured-text li {
            margin: .5em 0 0 0!important;
            list-style: none url('../img/cboc/design/bullets/chevron.png') outside;
            }

.research-title { }

    .research-title td {
    padding-top: 0!important; padding-bottom: 0px!important;
    }
        .research-title h1 {    /* main title ("Research Topics") */
        color: #c36a2f;             /* orange */
        margin: 0 ! important;
        }
    
.research-items { }             /* first 3-col row of items */

    .research-items h2 {        /* subtitle ("Economic Trends", etc) */
    color: #c36a2f;                 /* orange */
    border-top: 5px solid #d28f63;  /* darker orange */
    padding-top: 6px;
    padding-bottom: 0;
    }

.prodserv-title { }

    .prodserv-title td {
    padding-top: 0!important; padding-bottom: 0px!important;
    }
        .prodserv-title h1 {    /* main title ("Products and Services") */
        color: #685548;             /* blue */
        margin: 0 ! important;
        }

.prodserv-items { }             /* second and third 3-col row of items */

    .prodserv-items h2 {        /* subtitle ("Publications", etc) */
    color: #685548;                 /* blue */
    border-top: 5px solid #a89191;  /* darker blue */
    padding-top: 6px;
    padding-bottom: 0;
    }
        .prodserv-items h2.subtitle {   /* subtitle without a line ("Webcasts", etc) */
        border-top: 0px none;
        padding-top: 6px;
        }

    .prodserv-items p+h5 {      /* dates */
    margin-top: -.4em;
    }

    .prodserv-items ul {
    margin: 8px 8px 8px 1.4em!important; padding: 0;
    }
        .prodserv-items ul li { /* arrow-bulleted / chevronned items */
        list-style: none url('../img/cboc/design/bullets/chevron.png') outside; padding: 0; margin: 0;
        }
            .prodserv-items ul li.rss { /* rss bullet, for the rss feed item */
            margin-top: 4px!important; list-style: none url('../img/cboc/design/buttons/feed-icon_t_pad.gif') outside; padding: 0; margin: 0;
            }

    .prodserv-items ol {        /* numbered lists */
    margin: 3px 8px 8px 11px!important; padding: 0;
    }
        .prodserv-items ol li {     /* this will line up correctly in IE, but not in firefox; that's intentional */
        list-style: decimal outside; padding: 0; margin: 5px 0 0 0;
        }

    .prodserv-items a.noLink {
        color:#58595b!important;
    }


.special-title { }

    .special-title td {
    padding-top: 0!important; padding-bottom: 0px!important;
    }
        .special-title h1 {     /* main title ("Special Projects") */
        color: #a80533;             /* red */
        padding-top:9px;            /* extra space above (since we have images above this row) */
        margin: 0 ! important;
        }

.special-items { }              /* last 3-col row of items */

    .special-items h2 {         /* subtitle ("CanCompete", etc) */
    color: #a80533;                 /* red */
    border-top: 5px solid #c96e6d;  /* darker red */
    padding-top: 6px;
    padding-bottom: 0;  /* testing out how this logmein thing works */
    }

    .special-items ul {
        margin-left: 1.4em!important;
    }
        .special-items li {     /* arrow-bulleted / chevronned items */
            list-style: none url('../img/cboc/design/bullets/chevron.png') outside;
        }

.TopEventListTable { } /* Top event list */

	.TopEventListTable td {
	padding:0!important;
	margin:0!important;
	}

	.TopEventListTable .eventTitle {
	margin-top:.29em;
	padding: 0;
	color:#58595B;
    font-size:1em;
    line-height:1.18em;
	}

	.TopEventListTable .eventDate {
	margin-top:0.2em;
	margin-bottom:0.7em;
	padding: 0;
	color:#A0A0A0;
    font-size:1em;
    font-weight:normal;
    line-height:1.36em;
	}

/* RIGHT-HAND COLUMN STYLES ************************************ */

.commentary-box {               /* commentary box; first box from top in rightcol */
width:271px;
background-color: #e1eef4;          /* light blue */
background-image: url('../img/cboc/design/bgs/cboc_bluebox_bg.gif')!important;  /* rounded corner at bottom */
background-repeat:no-repeat;
background-position: bottom right;
}
    .commentary-title {         /* top of commentary box (title) */
    margin:0; padding:0 0 0 10px!important;
    height: 30px;
    background-color: #416f91;      /* dark blue */
    background-image: url('../img/cboc/design/bgs/cboc_bluebox_top.gif')!important; /* rounded corners at top */
    background-repeat:no-repeat;
    background-position: top left;
    }
        .commentary-title h2,
        .commentary-title h1 {  /* commentary box heading - should be h1; h2 incl. temporarily for backwards-compat */
        margin:0!important; padding:0!important;
        border: 0px none;           /* important, as long as the regular h2 tag has a top-border */
        font-size: 1.18em!important;
        line-height:30px;
        color: #fff!important;      /* white */
        }

    .commentary-image {
    width:77px;                     
    line-height:0%;                 /* IE won't display properly without this, because it won't */
    font-size:0;                    /* ignore the whitespace that sitefinity adds. >:( */
    }
    
    .commentary-text {
    width:194px;
    vertical-align: middle;
    padding: 6px 12px 4px 16px!important;   /* this spacing is pretty darn precarious */
    }
        .commentary-text p {
        margin: 0;
        padding-top:0;
        }
            .commentary-text p+p {
            margin: 0; padding: 0;  
            }
        .commentary-text h4 {
        margin: 0;
        }
    .commentary-more {
    height:36px;
    }
        .commentary-more ul {
        margin:0;
        padding-left:2.8em;
        padding-top:10px;
        }
            .commentary-more li {
            list-style:none outside url("../img/cboc/design/bullets/chevron.png");
            }

.insights-box {                 /* insights box; second box from top in rightcol, extends all the way down the page */
width:271px;
margin-top:21px!important;
/* background-color: #eae7d8; */    /* deprecated */
}
    .insights-title {
    margin:0; padding:0 0 0 10px!important;
    height: 30px;
    background-color: #c97944;      /* orange */
    background-image: url('../img/cboc/design/bgs/cboc_orangebox_top.gif')!important;   /* rounded corners */
    background-repeat:no-repeat;
    background-position: top left;
    }
        .insights-title h2,
        .insights-title h1 {    /* commentary box heading - should be h1; h2 incl. temporarily for backwards-compat */
        margin:0!important; padding:0!important;
        border: 0px none;
        font-size: 1.18em!important;
        line-height:30px;
        color: #fff!important;      /* white */
        }

    .insights-body {
    background-color: #e4dcca;      /* lighter orange */
    background-image: url('../img/cboc/design/bgs/cboc_orangebox_bg.gif')!important;    /* bg w/ borders */
    background-repeat:repeat-y;
    background-position: top left;
    padding-bottom:15px!important;  /* breathing room */
    }

    .insights-itemtop {         /* top of box w/ round corners */
    margin:12px 12px 0!important;
    height:4px;
    background: #f5f3ec;            /* very light orange */
    background-image: url('../img/cboc/design/bgs/cboc_sub-box_top.gif')!important;     /* rounded corners */
    background-repeat:repeat-y;
    background-position: top left;
    }
    .insights-item {
    margin: 0 12px!important;
    padding: 2px 9px 5px!important;
    background: #f5f3ec;            /* very light orange */
    }
        .insights-item h3,
        .insights-item h2 {     /* commentary box heading - should be h2; h3 incl. temporarily for backwards-compat */
        font-size: 1.18em;          /*13pt*/
        line-height:1.1em;          /*12pt*/
        color:#C36A2F;              /* orange (same as research-title h2) */
        margin:2px 0 .8em;
        padding-top: 0;
        padding-bottom: 0;
        border: 0 none;
        text-transform: none;
        font-weight: normal;
        }
            .insights-item h3.tight,  /* commentary box heading with subtitle following */
            .insights-item h2.tight { /* should be h2; h3 incl. temporarily for backwards-compat */
            margin:2px 0 0.6em;
            }
            
        .insights-item p {
        margin:0 0 0.3em; 
        padding-top: 0;
        }
        
        .insights-item .videos {
		margin:0 0 0.5em!important;
		}
        
        .insights-item .thumb {
        padding-right: 16px!important;
        padding-top: 3px!important;
        width: 55px;                /* all images in insights boxes should be 55px wide, except for charts */
        vertical-align: top;
        }
        .insights-item .caption {
        vertical-align: top;
        }
        
			.insights-item tr+tr .thumb {
            padding-top: 1em!important;
            }
			
			.insights-item tr+tr .caption {
            padding-top: 0.8em!important;
            }
            
        .insights-item .small_text {
        margin:-0.6em 0 .3em!important;
        }
        
        .insights-item ul {
            margin:0;
            padding-left:1.5em;
        }
            .insights-item li { /* arrow-bulleted / chevronned items */
                list-style: none url('../img/cboc/design/bullets/chevron.png') outside;
            }
            .insights-item ul.default {
                margin-left: 0!important;
                padding-left:auto;
            }
                .insights-item ul.default li { /* regular list items */
                    list-style: disc outside;
                }

    .insights-itembottom {      /* bottom of box w/ round corners */
    margin: 0 12px!important;
    height:4px;
    background: #f5f3ec;            /* very light orange */
    background-image: url('../img/cboc/design/bgs/cboc_sub-box_bottom.gif')!important;  /* round corners */
    background-repeat:repeat-y;
    background-position: top left;
    }
    .insights-bottom {          /* deprecated */
    height: 5px;
    background-color: #eae7d8;
    background-image: url('../img/cboc/design/bgs/cboc_orangebox_bottom.gif')!important;
    background-repeat:no-repeat;
    background-position: top left;
    }

#spf-popup {
	margin-top:21px;
	padding:0;
	border:0px none;
	width:271px;
	height:110px;
}


/* TEXT ******************************************************** */

h1 {
display:block;
font-size: 1.64em;      /* 18pt */
font-weight:normal;
line-height:1.2em;
color:#C36A2F;          /* orange */
margin: 0 0 .6em;    /* 11pt */
text-transform: none;
richness:90; /* audio settings for screen readers */
speak:normal; /* audio */
stress:30; /* audio */
}

h2 {
border:0px none;
display:block;
font-size: 1.18em;      /* 13pt */
font-weight:normal;
line-height:1.1em; 
color:#C36A2F;          /* orange */
margin:0 0 .8em;
text-transform: none;
richness:90; /* audio settings for screen readers */
speak:normal; /* audio */
stress:30; /* audio */
}

h3 {
font-size:1em;
line-height:1.18em;     /* 15pt */
color: #58595B;         /* dark grey */
font-weight:bold;
margin-bottom:0 0 .18em;    /* 2pt */
text-transform: none
richness:90; /* audio settings for screen readers */
speak:normal; /* audio */
stress:30; /* audio */
}

h4 {
font-size:.8em;         /* 9pt */
line-height:1.36em;     /* 15pt */
color: #898A90;         /* lighter grey */
margin:0 0 1.4em 0;     /* 15pt */
font-weight: normal;
richness:90; /* audio settings for screen readers */
speak:normal; /* audio */
stress:30; /* audio */
}

h5 {
font-size:1em;          /* 11pt */
line-height:1.36em;     /* 15pt */
color: #A0A0A0;         /* lightest grey */
margin:0 0 1em 0;       /* 15pt */
font-weight: normal;
richness:90; /* audio settings for screen readers */
speak:normal; /* audio */
stress:30; /* audio */
}

p {
margin: 0;
font-size:1em; /*11pt*/
line-height:1.36em; /*15pt*/
margin:0 0 .5em 0; /*4pt*/
color: #58595B; /*dark grey*/
padding: 0!important;
}

ul { }

ol { margin:0; }

#wrapper a { color: #416f91; text-decoration:none; } /* dark blue */

    #wrapper a:visited { color: #5f5f8f; text-decoration:none; }   /* purple */

    #wrapper a:hover { color:#416f91; text-decoration:underline; }
    
.datelocation {
font-size:1em; /*11pt*/
line-height:1.36em; /*15pt*/
color: #A0A0A0; /*lightest grey*/
margin:0 0 1.4em 0; /*15pt*/
}
.small {
color:#000;
font-family:verdana, arial, helvetica, sans-serif;
font-size:85%;
line-height:125%;
}
.small_text {
font-size:.8em; /*9pt*/
line-height:1.36em; /*15pt*/
color: #898A90; /*lighter grey*/
margin:0 0 1.4em 0; /*15pt*/
}
.aboutCBOC {
font-size:.8em; /*9pt*/
line-height:1.36em; /*15pt*/
color: #58595B /*dark grey*/;
}	

.text {
font-family:verdana, arial, helvetica, sans-serif;
font-size:100%;
font-weight:normal;
margin-left:3px;
richness:50;
speak:normal;
stress:50;
}

.pOrange {
color:#E19764;
font-size:1em;
line-height:1.36em;
margin:0 0 0.5em 0.4em;
padding: 0 !important;
}

.pGreen {
color:#89A17A;
font-size:1em;
line-height:1.36em;
margin:0 0 0.5em 0.4em;
padding: 0 !important;
}

