/*shared*/
/**
 * Create a fully formed type style by passing in a single value, e.g.:
 *
   `@include font-size(10px);`
 *
 * Commandeered from inuit.css
 */
/****
DO NOT EDIT THIS FILE
It comes directly from the normalize.css project and may be replaced at any point.
****/
/* normalize.css v2.1.2 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined in IE 8/9.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block; }

/**
* Correct `inline-block` display not defined in IE 8/9.
*/
audio,
canvas,
video {
  display: inline-block; }

/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
  display: none;
  height: 0; }

/**
* Address styling not present in IE 8/9.
*/
[hidden] {
  display: none; }

/* ==========================================================================
Base
========================================================================== */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
* Remove default margin.
*/
body {
  margin: 0; }

/* ==========================================================================
Links
========================================================================== */
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
  outline: thin dotted; }

/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
  outline: 0; }

/* ==========================================================================
Typography
========================================================================== */
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari 5, and Chrome.
*/
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
* Address styling not present in IE 8/9, Safari 5, and Chrome.
*/
abbr[title] {
  border-bottom: 1px dotted; }

/**
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
*/
b,
strong {
  font-weight: bold; }

/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
  font-style: italic; }

/**
* Address differences between Firefox and other browsers.
*/
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

/**
* Address styling not present in IE 8/9.
*/
mark {
  background: #ff0;
  color: #000; }

/**
* Correct font family set oddly in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em; }

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

/**
* Set consistent quote types.
*/
q {
  quotes: "\201C" "\201D" "\2018" "\2019"; }

/**
* Address inconsistent and variable font size in all browsers.
*/
small {
  font-size: 80%; }

/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* ==========================================================================
Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9.
*/
img {
  border: 0; }

/**
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
  overflow: hidden; }

/* ==========================================================================
Figures
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari 5.
*/
figure {
  margin: 0; }

/* ==========================================================================
Forms
========================================================================== */
/**
* Define consistent border, margin, and padding.
*/
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
* 1. Correct `color` not being inherited in IE 8/9.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
* 1. Correct font family not being inherited in all browsers.
* 2. Correct font size not being inherited in all browsers.
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
*/
button,
input,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
  line-height: normal; }

/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
  text-transform: none; }

/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
  cursor: default; }

/**
* 1. Address box sizing set to `content-box` in IE 8/9.
* 2. Remove excess padding in IE 8/9.
*/
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box; }

/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
* 1. Remove default vertical scrollbar in IE 8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */ }

/* ==========================================================================
Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
  border-collapse: collapse;
  border-spacing: 0; }

/* == PAGE == */
html, body {
  margin: 0;
  padding: 0; }

/* == BASIC ELEMENTS == */
img {
  display: block; }

ul {
  padding-left: 1em; }

/* == TYPOGRAPHY == */
html {
  font: 75%/1.35 arial,helvetica,clean,sans-serif; }

/* 12px as page base font size */
body {
  background: #fff;
  color: black; }

.bodytext {
  font-size: 14px;
  font-size: 1.16667rem; }

.basetext {
  font-size: 12px;
  font-size: 1rem; }

.captiontext, figcaption, .figure-caption {
  font-size: 11px;
  font-size: 0.91667rem; }

small, .small {
  font-size: 10px;
  font-size: 0.83333rem; }

/* == VERTICAL RHYTHM == */
h1, h2, h3, h4, h5, h6, hgroup,
ul, ol, dd,
p, figure,
pre, table, fieldset, hr {
  margin-bottom: 12px;
  margin-bottom: 1rem;
  margin-top: 0; }

hr {
  border: 0;
  border-top: solid 1px #cbcbcb; }

li {
  margin-bottom: 0.5em; }

/* == LINKS == */
a {
  color: #115278;
  text-decoration: none; }

a:hover,
a:active,
a:focus {
  text-decoration: underline; }

.complexlink {
  color: black; }

.complexlink .complexlink-target {
  color: #115278; }

/* == RESET == */
/* == GRID == */
.wrap1, .col1, .wrap2, .col2, .wrap3, .col3, .wrap4, .col4, .wrap5, .col5, .wrap6, .col6, .wrap7, .col7, .wrap8, .col8, .wrap9, .col9, .wrap10, .col10, .wrap11, .col11, .wrap12, .col12 {
  display: inline;
  float: left; }

.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .colfull {
  margin-left: 10px;
  margin-right: 10px; }

.wrap1 {
  width: 80px; }

.col1width, .col1 {
  width: 60px; }

.wrap2 {
  width: 160px; }

.col2width, .col2 {
  width: 140px; }

.wrap3 {
  width: 240px; }

.col3width, .col3 {
  width: 220px; }

.wrap4 {
  width: 320px; }

.col4width, .col4 {
  width: 300px; }

.wrap5 {
  width: 400px; }

.col5width, .col5 {
  width: 380px; }

.wrap6 {
  width: 480px; }

.col6width, .col6 {
  width: 460px; }

.wrap7 {
  width: 560px; }

.col7width, .col7 {
  width: 540px; }

.wrap8 {
  width: 640px; }

.col8width, .col8 {
  width: 620px; }

.wrap9 {
  width: 720px; }

.col9width, .col9 {
  width: 700px; }

.wrap10 {
  width: 800px; }

.col10width, .col10 {
  width: 780px; }

.wrap11 {
  width: 880px; }

.col11width, .col11 {
  width: 860px; }

.wrap12 {
  width: 960px; }

.col12width, .col12 {
  width: 940px; }

.colfull {
  clear: both;
  display: block; }

.sep1, .sep2, .sep3, .sep4, .sep5, .sep6, .sep7, .sep8, .sep9, .sep10, .sep11, .sep12 {
  background-image: url("http://www.cbc.ca/i/gfx/colsep.gif");
  background-repeat: repeat-y;
  margin-bottom: 20px; }

.sep1.join, .sep2.join, .sep3.join, .sep4.join, .sep5.join, .sep6.join, .sep7.join, .sep8.join, .sep9.join, .sep10.join, .sep11.join, .sep12.join {
  margin-bottom: 0; }

.sep1 {
  background-position: 80px top; }

.sep2 {
  background-position: 160px top; }

.sep3 {
  background-position: 240px top; }

.sep4 {
  background-position: 320px top; }

.sep5 {
  background-position: 400px top; }

.sep6 {
  background-position: 480px top; }

.sep7 {
  background-position: 560px top; }

.sep8 {
  background-position: 640px top; }

.sep9 {
  background-position: 720px top; }

.sep10 {
  background-position: 800px top; }

.sep11 {
  background-position: 880px top; }

/* == WIDTHS == */
/*
Use .pagewidth to center an element and give it the standard width for a CBC.ca page
*/
.pagewidth, .pagewidth_padded {
  display: block;
  float: none;
  margin: 0 auto;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 986px; }

/*
.pagewidth_padded gives the element the same total width as .pagewidth but pads the interior to leave a
usable content area equal to the width of 12 grid columns.
*/
.pagewidth_padded {
  padding: 0 13px;
  width: 960px; }

/* == HEIGHTS == */
.col1.aspectratio16x9,
.col1width.aspectratio16x9,
.aspectratio16x9.col1 {
  height: 34px; }

.col2.aspectratio16x9,
.col2width.aspectratio16x9,
.aspectratio16x9.col2 {
  height: 79px; }

.col3.aspectratio16x9,
.col3width.aspectratio16x9,
.aspectratio16x9.col3 {
  height: 124px; }

.col4.aspectratio16x9,
.col4width.aspectratio16x9,
.aspectratio16x9.col4 {
  height: 169px; }

.col5.aspectratio16x9,
.col5width.aspectratio16x9,
.aspectratio16x9.col5 {
  height: 214px; }

.col6.aspectratio16x9,
.col6width.aspectratio16x9,
.aspectratio16x9.col6 {
  height: 259px; }

.col7.aspectratio16x9,
.col7width.aspectratio16x9,
.aspectratio16x9.col7 {
  height: 304px; }

.col8.aspectratio16x9,
.col8width.aspectratio16x9,
.aspectratio16x9.col8 {
  height: 349px; }

.col9.aspectratio16x9,
.col9width.aspectratio16x9,
.aspectratio16x9.col9 {
  height: 394px; }

.col10.aspectratio16x9,
.col10width.aspectratio16x9,
.aspectratio16x9.col10 {
  height: 439px; }

.col11.aspectratio16x9,
.col11width.aspectratio16x9,
.aspectratio16x9.col11 {
  height: 484px; }

.col12.aspectratio16x9,
.col12width.aspectratio16x9,
.aspectratio16x9.col12 {
  height: 529px; }

/* == LAYOUT OBJECTS == */
/*
.module represents a contained block of content, normally seen on a side rail or used to populate a landing page. It
has an optional .module-head and .module-foot but requires a .module-body wrapper around the module content.
*/
.module, .ticker,
.module_contained {
  margin-bottom: 24px;
  margin-bottom: 2rem;
  padding-bottom: 0; }

.module-body p {
  margin-bottom: 0.5em; }

.module-foot {
  margin: 0;
  padding: 8px; }

/*
.module_contained pads the inside of the module. This is normally used with a background colour on the module.
*/
.module_contained > .module-head,
.module_contained > .module-body,
.module_contained > .module-foot {
  margin-left: 10px;
  margin-right: 10px; }

.module_contained > ul, .module_contained > ol {
  margin-left: 15px;
  margin-right: 0; }

/*
.nav is a modifier for a list of links to provide a horizontal orientation
*/
.nav,
.nav_separated {
  list-style: none;
  margin: 0 0 1em;
  padding: 0; }

.nav > li,
.nav_separated > li {
  display: inline-block;
  *display: inline;
  zoom: 1; }

.nav a,
.nav_separated a {
  display: inline-block;
  *display: inline;
  zoom: 1; }

/*
.nav_separated adds a separating line between items
*/
.nav_separated > li {
  border-left: 1px solid #333333;
  margin-left: 0.4em;
  padding-left: 0.5em; }

.nav_separated > li:first-child {
  border-width: 0;
  margin-left: 0;
  padding-left: 0; }

/*
.contentlist is a modifier for ul and ol lists to be used when the list items are content blocks
*/
.contentlist,
.contentlist_separated,
.contentlist_spaced,
.contentlist_grid {
  margin: 0;
  padding: 0; }

.contentlist > li,
.contentlist_separated > li,
.contentlist_grid > li,
.contentlist_spaced > li {
  list-style: none outside none;
  margin-bottom: 1em; }

/*
.contentlist_separated adds a separating line between items
*/
.contentlist_separated > li {
  border-bottom: 1px solid #cbcbcb;
  margin-bottom: 0.7em;
  padding-bottom: 0.5em; }

/*
.contentlist_spaced adds further spacing between items
*/
.contentlist_spaced > li {
  margin-bottom: 20px; }

/*
The .contentlist_grid extension of .contentlist is used when the content blocks should display in a grid structure,
i.e. 4 col2 blocks per row in a wrap8 container. The .contentlist_grid element should have a .col# class and the
child li elements should have .col# classes to indicate the overall grid layout.

The use of letter-spacing and word-spacing is based on the implementation YUI Grids - http://yuilibrary.com/yui/docs/cssgrids/
*/
.contentlist_grid {
  margin-left: -10px;
  margin-right: -10px;
  letter-spacing: -0.31em;
  /* Webkit: collapse white-space between units */
  *letter-spacing: normal;
  /* reset IE < 8 */
  *word-spacing: -0.43em;
  /* IE < 8: collapse white-space between units */
  text-rendering: optimizespeed;
  /* Webkit: fixes text-rendering: optimizeLegibility */ }

.opera-only :-o-prefocus,
.contentlist_grid {
  word-spacing: -0.43em; }

.contentlist_grid > li {
  display: inline-block;
  float: none;
  zoom: 1;
  *display: inline;
  /* IE < 8: fake inline-block */
  letter-spacing: normal;
  word-spacing: normal;
  vertical-align: top;
  text-rendering: auto; }

/*
.media is used to set up a fixed width item alongside a variable width item. The fixed width item is normally an
image but it is not required to be. .media places the fixed element to the left while .media_rev places it to the right.
More info here: http://stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
*/
.media,
.media_reversed {
  display: block;
  overflow: hidden;
  margin-bottom: 12px;
  margin-bottom: 1rem; }

.media-side {
  float: left;
  margin-right: 10px;
  /*base-spacing-unit*/ }

.media-body {
  display: block;
  overflow: hidden; }

.media-body,
.media-body > :last-child {
  margin-bottom: 0; }

.media img,
.media_reversed img {
  display: block; }

/*
.media_reversed places the fixed width child to the right of the variable width content instead of to the left
*/
.media_reversed .media-side {
  float: right;
  margin-left: 10px;
  /*base-spacing-unit*/ }

/*
.overlay is used to place one item on top of another. An example would be a play button overlayed on top of a
video thumbnail. The .overlay-under child is placed beneath the .overlay-over* child with the last two characters
of the .overlay-over* class indicating the position, e.g. .overlay-overtl would be placed in the top left corner
while .overlay-overbr would be placed in the bottom right corner.
*/
.overlay {
  position: relative;
  zoom: 1; }

.overlay-under {
  display: block; }

.overlay-overtl,
.overlay-overtr,
.overlay-overbl,
.overlay-overbr {
  position: absolute; }

.overlay-overtl {
  left: 0;
  top: 0; }

.overlay-overtr {
  right: 0;
  top: 0; }

.overlay-overbl {
  bottom: 0;
  left: 0; }

.overlay-overbr {
  bottom: 0;
  right: 0; }

/*
.repel is used to send two items in opposite directions: one left with text aligned left (.repel-left) and one right
with text aligned right (.repel-right).
*/
.repel {
  overflow: hidden; }

.repel-left {
  float: left;
  text-align: left; }

.repel-right {
  float: right;
  text-align: right; }

/* callout/callout_full editor styling */
.callout,
.callout_full {
  color: #333333;
  background-color: #f1f1f1;
  border-top: 1px solid #cbcbcb;
  border-bottom: 1px solid #cbcbcb;
  float: right;
  font-size: 0.857em;
  margin: 5px 0 5px 10px;
  padding: 12px 10px 0;
  width: 35%; }

.callout_full {
  float: none;
  margin-left: 0;
  width: auto; }

/* */
.pullquote {
  border-top: 1px solid #cbcbcb;
  float: right;
  margin: 10px 0 10px 10px;
  padding-bottom: 15px;
  width: 60%; }

.pullquote-quotation {
  display: block;
  font-size: 1.429em;
  /* 20/14 */
  font-weight: normal;
  margin: 8px 8px 0; }

.pullquote-source {
  border-bottom: 1px solid #cbcbcb;
  color: #595959;
  display: block;
  font-size: 0.786em;
  /* 11/14 */
  font-style: normal;
  padding: 6px 8px 8px; }

/*
<div class="figure">
	<img />
	<p class="figure-caption">...</p>
</div>
*/
figure, .figure {
  border-bottom: 1px solid #cbcbcb;
  display: block;
  margin-bottom: 12px;
  margin-bottom: 1rem; }

figure > img, .figure > img {
  display: block;
  height: auto; }

figcaption, .figure-caption {
  color: #595959;
  margin-bottom: 0.5em;
  margin-bottom: 0.5rem;
  padding-top: 0.5em;
  padding-top: 0.5rem; }

figcaption strong, .figure-caption strong {
  color: #333333; }

/*
A .complexlink is used for an <a> tag that contains multiple child elements when only certain ones should
be underlined for the hover state. Use the .complexlink-target class on the child elements that should
get the hover style.
<a class="complexlink">
    <img src="/image/path/src.jpg" />
    <p><span class="complexlink-target">This is the link text</span> <span>(this doesn't get underlined)</span></p>
</a>
*/
.complexlink,
.complexlink:hover,
.complexlink:active,
.complexlink:focus {
  text-decoration: none; }

.complexlink:hover .complexlink-target,
.complexlink:active .complexlink-target,
.complexlink:focus .complexlink-target {
  text-decoration: underline; }

.gothere:after {
  content: " \00BB";
  /* &raquo; */ }

/*
.flag and .label are both small phrases that normally accompany a headline or promo to indicate a status or
categorization. .flag is the inline case (e.g. directly preceding a headline) while .label is the block case
(e.g. displaying under an image).
*/
.flag, .flag_thick,
.label,
.label_full {
  line-height: 1.2; }

.flag, .flag_thick {
  border-right: 1px solid #000;
  display: inline-block;
  margin-bottom: 0.05em;
  margin-right: 2px;
  padding-right: 5px;
  vertical-align: text-bottom; }

.flag_thick {
  border-right-width: 2px; }

.label,
.label_full {
  display: block;
  padding: 3px 1px 1px 10px; }

.label_full {
  padding-left: 0;
  padding-right: 0;
  text-align: center; }

/*
*/
.layoutcontext {
  overflow: hidden;
  position: relative;
  zoom: 1; }

/*
.offscreen hides the text of an element on screen but leaves it available for accessibility purposes. 
*/
.offscreen {
  position: absolute;
  left: -99999px; }

[dir=rtl] .offscreen {
  left: auto;
  right: -99999px; }

/* */
.floatleft {
  clear: left;
  float: left;
  margin-right: 20px; }

.floatright {
  clear: right;
  float: right;
  margin-left: 20px; }

/* */
.if-altered, .is-altered .ifnot-altered {
  display: none; }

.is-altered .if-altered, .ifnot-altered {
  display: block; }

/* == OBJECT SPECIFIC DESIGNS == */
/* icons */
/*
* icons use H5BP method image replacement:
* github.com/h5bp/html5-boilerplate/commit/adecc5da035d6d76b77e3fa95c6abde841073da2
*/
.icon, .icon_audio, .icon_video, .icon_comments {
  display: inline-block;
  font-style: normal;
  height: 16px;
  overflow: hidden;
  position: relative;
  text-align: center;
  *text-indent: -9999px;
  top: -1px;
  vertical-align: middle;
  width: 16px;
  zoom: 1; }

.icon:before, .icon_audio:before, .icon_video:before, .icon_comments:before {
  content: "";
  display: block;
  width: 0;
  height: 100%; }

.icon_audio, .icon_video {
  background-image: url("http://www.cbc.ca/i/news/v10/gfx/icon_a-v.png");
  height: 15px;
  width: 14px; }

.icon_audio {
  background-position: 0 2px; }

.icon_video {
  background-position: 0 -17px; }

.icon_comments {
  background: transparent url("http://www.cbc.ca/i/o/sm/v10/gfx/sprite.png") no-repeat scroll left -126px !important;
  /* otherwise being overwritten by viafoura */ }

/* link designs */
.videolink-thumbnail {
  display: block;
  overflow: hidden;
  position: relative; }

.videolink-thumbnail img {
  display: block; }

.videolink-thumbnail:after {
  bottom: -1px;
  content: url("http://www.cbc.ca/i/news/v11/gfx/play.png");
  height: 32px;
  left: -1px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  opacity: 0.6;
  position: absolute;
  width: 32px; }

.videolink:hover .videolink-thumbnail:after {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1; }

/* heading designs */
.reversed {
  /* original Sports definition */
  /*
	background: #000 url(http://www.cbc.ca/i/sports/v11/gfx/gradientbg.png) repeat top left;
	background: -moz-linear-gradient(top center, rgba(100, 100, 100, 0.3), rgba(0, 0, 0, 0.9)),#000 url(http://www.cbc.ca/i/sports/v11/gfx/gradientbg.png) repeat top left;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(100, 100, 100, 0.3)), to(rgba(0, 0, 0, 0.9))), #000 url(http://www.cbc.ca/i/sports/v11/gfx/gradientbg.png) repeat top left;
	background: -o-linear-gradient(top, rgba(100, 100, 100, 0.3) 0%, rgba(0, 0, 0, 0.9) 100%), #000 url(http://www.cbc.ca/i/sports/v11/gfx/gradientbg.png) repeat top left;
	background: -ms-linear-gradient(top, rgba(100, 100, 100, 0.3) 0%, rgba(0, 0, 0, 0.9) 100%), #000 url(http://www.cbc.ca/i/sports/v11/gfx/gradientbg.png) repeat top left;
	background: linear-gradient(top, rgba(100, 100, 100, 0.3) 0%, rgba(0, 0, 0, 0.9) 100%), #000 url(http://www.cbc.ca/i/sports/v11/gfx/gradientbg.png) repeat top left;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1f79b9', endColorstr='#002854',GradientType=0);
*/
  background: #63666b;
  background: -moz-linear-gradient(top, #63666b 0%, black 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #63666b), color-stop(100%, black));
  background: -webkit-linear-gradient(top, #63666b 0%, black 100%);
  background: -o-linear-gradient(top, #63666b 0%, black 100%);
  background: -ms-linear-gradient(top, #63666b 0%, black 100%);
  background: linear-gradient(to bottom, #63666b 0%, black 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#63666b', endColorstr='#000000',GradientType=0 ); }

.reversed, .reversed a {
  color: #fff; }

/* footer designs */
.gradient_black {
  background: #1E1E1E;
  /* fallback */
  background: -webkit-linear-gradient(left, black 0%, #1e1e1e 10%, #1e1e1e 90%, black 100%) repeat scroll 0 0 transparent;
  background: -moz-linear-gradient(left, black 0%, #1e1e1e 10%, #1e1e1e 90%, black 100%) repeat scroll 0 0 transparent;
  background: -o-linear-gradient(left, black 0%, #1e1e1e 10%, #1e1e1e 90%, black 100%) repeat scroll 0 0 transparent;
  background: -ms-linear-gradient(left, black 0%, #1e1e1e 10%, #1e1e1e 90%, black 100%) repeat scroll 0 0 transparent;
  background: linear-gradient(left, black 0%, #1e1e1e 10%, #1e1e1e 90%, black 100%) repeat scroll 0 0 transparent; }

/* .module designs */
.distinct,
.distinct_black,
.distinct_blue,
.distinct_red,
.distinct_darkgrey {
  border-top: 5px solid #cbcbcb;
  padding-top: 8px; }

.distinct_black {
  border-top-color: #000; }

.distinct_blue {
  border-top-color: #2692b3; }

.distinct_red {
  border-top-color: #e21a21; }

.distinct_darkgrey {
  border-top-color: #595959; }

.squared, .rounded, .button, .button_block {
  border: 1px solid #cbcbcb; }

.rounded, .button, .button_block, a.button {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px; }

/* == GENERAL == */
.bulleted, .bulleted_red, ul.bulletedlist_red > li, .bulleted_grey, ul.bulletedlist_grey > li, ul.bulletedlist > li {
  padding-left: 0.75em;
  position: relative; }

.bulleted:before, .bulleted_red:before, ul.bulletedlist_red > li:before, .bulleted_grey:before, ul.bulletedlist_grey > li:before, ul.bulletedlist > li:before {
  color: #115278;
  content: "\25A0";
  font-size: 0.8em;
  text-indent: -1em;
  position: absolute; }

.bulleted_red:before, ul.bulletedlist_red > li:before {
  color: #e21a21; }

.bulleted_grey:before, ul.bulletedlist_grey > li:before {
  color: #999999; }

ul.bulletedlist > li, ul.bulletedlist_red > li, ul.bulletedlist_grey > li {
  margin-left: -1em;
  list-style: none outside none; }

.separated {
  border-bottom: 1px solid #c4c4c4; }

.major {
  border-bottom: 2px solid #e21a21;
  border-top: 5px solid #e21a21;
  padding-top: 8px; }

.shadowed {
  -webkit-box-shadow: 0 2px 6px 0 #888;
  box-shadow: 0 2px 6px 0 #888; }

.delimited:after {
  content: "|";
  font-size: 1.2em;
  margin-right: 0.833em;
  /* 10px (for base 12px) */
  margin-left: 0.833em;
  /* 10px (for base 12px) */ }

.spaced {
  margin-right: 1em; }

.lighttext {
  color: #595959; }

.button, .button:hover, a.button:hover, .button_block, a.button_block, .button_block:hover, a.button_block:hover, a.button, a.button:hover, a.button_block, a.button_block:hover {
  background-color: #115278;
  text-align: center;
  color: #FFF;
  border: 0;
  padding: 6px 12px;
  display: inline-block; }

.button:hover, a.button:hover, .button_block:hover, a.button:hover, a.button_block:hover {
  background: #595959;
  cursor: pointer; }

/* button_block allows the button to span the width of the container */
.button_block, a.button_block, .button_block:hover, a.button_block:hover {
  display: block; }

.ticker {
  width: 100%;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  height: 0;
  background-color: transparent;
  position: relative;
  font-size: 12px;
  line-height: 16px;
  font-family: arial;
  text-align: left;
  -webkit-transition: height 0.5s ease-in-out;
  -moz-transition: height 0.5s ease-in-out;
  -ms-transition: height 0.5s ease-in-out;
  -o-transition: height 0.5s ease-in-out;
  transition: height 0.5s ease-in-out;
  overflow: hidden; }

.ticker.show {
  height: 25px;
  background: transparent; }

.ticker-wrap, .ticker ul {
  height: 100%;
  margin: 0;
  padding: 0; }

.ticker-item {
  width: 100%;
  height: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
  z-index: 1;
  display: none;
  background-color: transparent; }

.ticker .ticker-prev, .ticker .ticker-next {
  display: block; }

.ticker-current {
  opacity: 1;
  z-index: 2;
  display: block; }

.ticker-item-label {
  float: left;
  line-height: 25px;
  display: block;
  width: 15%;
  min-width: 140px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  font-size: 1.2em; }

.ticker-item-body {
  white-space: nowrap; }

.ticker-item-expiry {
  height: 0;
  width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: absolute; }

.ticker-item-body em {
  font-style: normal;
  display: block;
  text-indent: 1em;
  font-size: 1.2em;
  font-weight: bold;
  height: 100%;
  line-height: 1.6em; }

.ticker-item-body a {
  text-decoration: none;
  display: block;
  text-indent: 1em;
  font-size: 1.2em;
  font-weight: bold;
  height: 100%;
  line-height: 1.6em; }

.ticker-item-body a:hover, .ticker-item-body a:focus, .ticker-item-body a:active {
  text-decoration: underline; }

.ticker-ctrls {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  line-height: 100%;
  z-index: 10;
  background: transparent;
  padding: 0;
  height: 100%; }

.ticker-ctrls a {
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  float: left;
  display: block;
  font-size: 1.8em;
  padding: 0 0.5em;
  color: #115278;
  line-height: 100%; }

.ticker-pause, .ticker-play {
  line-height: 65%;
  padding: 0.5em 0.3em;
  font-weight: bold;
  font-size: 1.35em; }

.ticker.auto .ticker-play, .ticker .ticker-pause {
  display: none; }

.ticker.auto .ticker-pause, .ticker .ticker-play {
  display: block; }

.ticker.stop .ticker-ctrls a {
  color: #fff; }

.ticker.show.alter {
  height: 70px; }

.ticker.show.alter ul {
  height: auto; }

.ticker.show.alter .ticker-item-label {
  display: block;
  width: 100%; }

.ticker.show.alter .ticker-item-body {
  white-space: normal; }

.ticker.show.alter .ticker-item-body a, .ticker.show.alter .ticker-item-body em {
  text-align: center;
  display: block;
  text-indent: 0; }

.scroller {
  width: 100%;
  position: relative;
  height: 100%;
  overflow: hidden; }

.scroller.hide {
  display: none; }

.scroller .scroller-wrapper {
  width: 100%;
  height: 100%;
  margin: 0; }

.scroller img {
  border: none; }

.scroller.vertical .scroller-wrapper img {
  width: 100%; }

.scroller a:hover img, .scroller a:focus img {
  border: none; }

.scroller-wrapper ul {
  width: 199999px;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin: 0;
  padding: 0; }

.scroller.vertical .scroller-wrapper ul {
  width: auto; }

.scroller li {
  display: block;
  float: left;
  padding: 0;
  position: relative; }

.scroller .loading {
  background: url("/img/cbc/scroller/loading.gif") no-repeat center; }

.scroller.vertical .scroller-wrapper li {
  float: none; }

.scroller li a {
  display: block; }

.scroller a img {
  display: block;
  text-align: center;
  margin: 0 auto; }

.scroller .arrow {
  position: static;
  height: 15px;
  width: 15px;
  line-height: 15px;
  display: inline-block;
  margin: 0 12px;
  text-indent: -9999px;
  direction: ltr;
  cursor: pointer;
  background: url(/img/cbc/scroller/previous.png) no-repeat 2px 2px;
  -webkit-transition: background-position .3s ease;
  -moz-transition: background-position .3s ease;
  -o-transition: background-position .3s ease;
  transition: background-position .3s ease; }

.scroller .arrow.forward {
  background-image: url(/img/cbc/scroller/next.png); }

.scroller .arrow:hover, .scroller .arrow:focus {
  background-position: 2px -11px; }

.scroller-nav .hide {
  display: none; }

.scroller-nav {
  background: transparent;
  left: auto;
  top: auto;
  height: auto;
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 0; }

.scroller-nav ul {
  width: auto;
  display: inline-block;
  padding: 0;
  margin: 0;
  height: 15px;
  overflow: hidden; }

.scroller-nav li {
  margin: 0;
  padding: 0;
  float: none;
  width: 15px;
  height: 15px;
  display: inline-block;
  overflow: hidden;
  position: static; }

.scroller-nav a {
  float: left;
  padding: 0;
  margin: 0;
  width: 15px;
  height: 15px;
  line-height: 15px;
  overflow: hidden;
  text-indent: -99999px;
  direction: ltr;
  display: block;
  background: url(/img/cbc/scroller/buttons.png) no-repeat 2px 2px;
  -webkit-transition: background-position .3s ease;
  -moz-transition: background-position .3s ease;
  -o-transition: background-position .3s ease;
  transition: background-position .3s ease; }

.scroller-nav a:hover, .scroller-nav a:focus {
  background-position: 2px -11px; }

.scroller-nav .onpage {
  background-position: 2px -24px; }

.scroller .topleft {
  top: 20%;
  left: 0; }

.scroller .topright {
  left: auto;
  right: 0;
  top: 20%; }

.scroller .botright {
  left: auto;
  right: 0; }

/*fullscreen*/
.scroller.fullscreen {
  position: absolute;
  z-index: 99; }

.scroller.fullscreen .scroller-wrapper ul, .scroller.oneperpage .scroller-wrapper ul {
  height: 100%;
  /*width:auto;*/ }

.scroller.fullscreen .scroller-wrapper li {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75); }

.scroller.fullscreen .scroller-wrapper a, .scroller.oneperpage .scroller-wrapper a {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%; }

/* fit image */
.scroller.fit .scroller-wrapper img {
  width: auto;
  height: 100%; }

.scroller.fit.vertical .scroller-wrapper img {
  height: auto;
  width: 100%; }

.scroller.fit .scroller-wrapper li {
  overflow: hidden; }

.carousel .scroller {
  padding-bottom: 20px; }

.carousel .scroller-outside-arrows {
  padding-left: 30px;
  padding-right: 30px; }

.carousel .scroller .arrow {
  width: 30px; }

.carousel .label {
  background: transparent;
  padding-top: 6px;
  color: #9dd0ea; }

.carousel .promo-title {
  display: block;
  position: static;
  padding: 0 9px 5px;
  background: transparent;
  color: #cbcbcb;
  height: 96px;
  font-weight: normal;
  margin: 0; }

.carousel .scroller-wrapper li {
  border: solid 1px #595959;
  border-left: none;
  height: 185px;
  padding: 0;
  margin: 0;
  overflow: hidden; }

.carousel .arrow {
  position: absolute;
  top: 0;
  height: 187px;
  display: block;
  background: url("http://www.cbc.ca/i/o/carousel/v11/sprite.png") no-repeat scroll left -320px;
  border-radius: 5px;
  -moz-transition: none;
  -webkit-transition: none;
  transition: none;
  margin: 0; }

.carousel .arrow.back {
  left: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0; }

.carousel .arrow.forward {
  right: 0;
  background: url("http://www.cbc.ca/i/o/carousel/v11/sprite.png") no-repeat scroll left -694px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0; }

.carousel .arrow.back:hover, .carousel .arrow.back:focus {
  background-position: left -506px; }

.carousel .arrow.forward:hover, .carousel .arrow.forward:focus {
  background-position: left -881px; }

.carousel .scroller-wrapper a {
  background: #333333;
  color: #cbcbcb;
  text-decoration: none; }

.carousel .flag, .carousel .flag_thick {
  display: block;
  margin-bottom: 10px;
  color: #9dd0ea;
  text-transform: uppercase;
  font-size: 11px; }

.carousel .promo-title {
  display: block;
  font-style: normal;
  font-size: 11px; }

.carousel .scroller-wrapper a:hover, .carousel .scroller-wrapper a:focus {
  background-color: #1e1e1e; }

.carousel .scroller-nav li {
  margin-top: 5px; }

.carousel .scroller-nav a {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
  background: url("http://www.cbc.ca/i/o/carousel/v11/sprite.png") no-repeat scroll right -80px; }

.carousel .scroller-nav .onpage {
  background-position: right -100px; }

.carousel .scroller-nav a:hover, .carousel .scroller-nav a:focus {
  background-position: right -90px; }

.advert {
  padding: 13px 0 0;
  background: url("data:image/gif;base64,R0lGODlhVQAJAIABAKqqqv///yH5BAEAAAEALAAAAABVAAkAAAJZjI+py+0Po5y0WgTyyTqAbXCfx4ViaHbn6KUfO4psAqNo3WKgfSuzpsLEdA0Z77UruYg2JWmIfPZ+Dpw1hz3ueE3mMEktgjvcExZ3c67G0ezsAo/L5/S6pQAAOw==") no-repeat center top; }