html, body{    
    width: 100%; height: 100%;
    padding: 0; margin: 0;
    position: relative;
    font-size: 62.5%;
    color: #FFF; 
    font-family: Helvetica, Arial, sans-serif;
}
body{ font-size: 1em; }

/**GENERAL BUTTON STYLE**/
.button, .button_rev, .full_story, .play_video{
    float: left; display: block;
    background: #AAA;
    color: #000;
    padding: 2px 8px 2px 8px;
    width: auto;
}

/**Used in newser, and article_header**/
.play_video{ margin-right: 4px;}

.button_rev{ background: #666; color: #FFF;}

.button a, .full_story a, .play_video a{
    color: #000 !important; text-decoration: none;
}
.button_rev a{
    color: #FFF !important; text-decoration: none;
}

div.left{ float: left !important;}
div.right{ float: right !important; }

.z1{ z-index: 1; }
.z2{ z-index: 2; }
.z3{ z-index: 3; }
.hidden{ display: none; }

.clear{ clear: both; height: 1px; }
.center{ text-align: center; }

.pad8-left{ padding-left: 8px; }
.pad8-right{ padding-right: 8px; }
.pad16-left{ padding-left: 16px; }
.pad16-right{ padding-right: 16px; }
.pad32-left{ padding-left: 32px; }
.pad32-right{ padding-right: 32px; }
.pad40-left{ padding-left: 40px; }
.pad40-right{ padding-right: 40px; }
.pad64-left{ padding-left: 64px; }
.pad64-right{ padding-right: 64px; }
.pad100-left{ padding-left: 100px; }
.pad100-right{ padding-right: 100px; }

.no-margin{ margin: 0 !important; } /*sometimes useful for P elements */
.no-pad{ padding: 0 !important; }
                                     
.pad2-all{ padding: 2px; }
.pad4-all{ padding: 4px; }
.pad6-all{ padding: 6px; }

.strong{ font-weight: bold; }

.height_spacer-5 { clear: both; height: 5px;  width: 100%; line-height: 0; }
.height_spacer-10{ clear: both; height: 10px; width: 100%; line-height: 0; }
.height_spacer-20{ clear: both; height: 20px; width: 100%; line-height: 0; }

.divider{ border-top: dotted 2px #AAA; width: 100%; margin: 0.4em 0 0.4em 0; }

.no-back{ background: none !important; }
.light-back{ background: #CCC !important; }
.med-back{ background: #AAA !important; }
.dark-back{ background: #666 !important; color: #FFF; }

ul.flat{ margin: 0; padding: 0; }
ul.flat li{
    display: block;
    float: left;
    margin: 0; padding: 0;
}

.xsmall{ font-size: 0.80em !important; }
.small { font-size: 0.90em !important; }
.med   { font-size: 1.00em !important; }
.large { font-size: 1.20em !important; }
.xlarge{ font-size: 1.25em !important; }

.upper { text-transform: uppercase; }
.lower { text-transform: lowercase; }

.debug{  outline: solid 1px red; }
.debug2{ outline: solid 1px green; }

.header_title{
    width: 150px;
    padding: 2px 2px 2px 16px;
    background: #AAA;
    font-weight: bold;
}

p{
    margin: 0 0 1em 0;
    line-height: 1.5em;
}
img{ vertical-align: bottom; }
img.middle{ vertical-align: text-top; } /*usally does a better job than middle */
img.top{ vertical-align: top; }
a img{ border: 0; }

.body_container{
    float: none;
    width: 978px;
    margin: 0 auto 0 auto;
    background: #EEE;
}


/*****ADS*****/
.ad-sky{
    float: left;
    width: 165px; height: 360px;
}

.ad_header{
    float: left;
    width: 100%;
}

.ad-leaderboard{
    float: left;
    width: 728px;
    outline: solid 1px #444;
}
.ad-promobox{
    float: right;
    width: 240px;
    outline: solid 1px #444;
}

.ad-sidebar-promo{
    margin-left: 10px;
    width: 300px; height: 160px;
    outline: solid 1px #444;
}

.ad-bigbox{
    width: 300px; height: 250px;
    float: right;
    outline: solid 1px #444;
}

/**LEAGUES MENU**/
.leagueNav{
  position: relative; z-index: 12;
  margin: 0 auto;    
  width: 1000px; margin-left: -12px;
  height: 40px;
  border: 1px solid #9f9f9f;
  background: transparent url('http://chl.assets.mrx.ca/league/images/en/wireframe/league-selector-bg.gif') repeat-x scroll left center;
}
.teamSprite_icons{
  float: left;
  width: 740px;
  height: 100%;
  border-left: 1px solid #9F9F9F;
  border-right: 1px solid #9F9F9F;
  background: transparent url('http://chl.assets.mrx.ca/league/images/en/wireframe/league-nav-bg.gif') repeat-x scroll left center;
}

.league_graphic{
  float: left;
  width: 55px;
  height: 100%;
  background: transparent url('http://chl.assets.mrx.ca/league/images/en/wireframe/leagueNav-ohl.jpg') no-repeat center center;
}

.league_graphic a{ text-decoration: none; width: 100%; height: 100%; display: block;}

.chl_graphic{
    position: absolute;
    top: 0; right: 10px; width: 94px; height: 60px;
    background: transparent url('http://chl.assets.mrx.ca/league/images/en/wireframe/leagueNav-chl-logo.png') no-repeat;
}

.chl_graphic a{
    text-decoration: none;
    width: 100%; height: 100%;
    display: block;
}

.leagues_selector{
  float: left;
  position: relative;
  width: 43px;
  height: 37px;
  border-right: 1px solid #9F9F9F;  
}

.leagues_selector .dropdown{
  display: none; position: absolute; float: left;
  top: 38px; right: 0; width: 400px;
  z-index: 1000;
  border: solid 1px #444;
  background: #111;
}

.leagues_selector:hover .dropdown{ display: block; }
.leagues_selector a {
  color: #999;
  text-decoration: none;
  font-size: 1.2em; font-weight: bold;
}
.leagues_selector a:hover {
    text-decoration: underline;
}

.leagueNav div.logos{ height: 34px !important; }


/*** MAIN MENU ***/

.masthead{
    position: relative; z-index: 10;
    float: left;
    width: 100%;
    height: auto;
}

.masthead .nav{
    position: relative; 
    float: left; width: 100%;
}

.masthead .nav .tabs {
  position: relative;
  float: left; width: 100%;
  z-index: 10;
}

.masthead .nav .tabs ul {
  display: block; float: left;
  z-index: 12;
  list-style: none;
  margin: 0; padding: 0;
  width: 100%;
}

.masthead .nav .tabs ul li.toplevel {
  position: relative;
  float: left;
  background: #444;
}

.masthead .nav .tabs ul li a.top {
  display: block;
  float: left;
  height: 32px;
  line-height: 32px;
  padding: 0 10px;
  font-size: 1.6em;
  font-weight: bold;
  color: #FFF;
  text-decoration: none;
}
.masthead .nav .tabs ul li a.top:hover { 
  color: #e00120;
}
.masthead .nav .tabs ul li .dropdown {
  display: none;
  position: absolute;
  left: 0;
  top: 31px;
  width: 165px;
  background-color: #525252;
  border: 2px solid #CE0623;
}
.masthead .nav .tabs ul li .dropdownwide {
  width: 400px;
  float: right;
}


.masthead .nav .tabs ul li:hover .dropdown {
  display: block;
}
.masthead .nav .tabs ul li .dropdown ul {
  position: relative;
  float: right;
  width: 165px;
}
.masthead .nav .tabs ul li .dropdown ul li {
  width: 165px;
}
.masthead .nav .tabs ul li .dropdown ul li a {
  display: block;
  padding: 4px 7px;
  font-size: 1.1em;
  font-weight: bold;
  color: #ffffff;
  text-decoration: none;
}
.masthead .nav .tabs ul li .dropdown ul li a:hover {
  color: #CE0623;
}
.masthead .nav .tabs ul li .dropdown ul li .subsubnav a {
  padding-left: 15px;
  font-size: 1.0em;
}
.masthead .nav .tabs ul li .dropdown .page {
  position: relative;
  float: left;
  padding: 0;
  background-color: #525252;
  color: #FFF;
}

#footer{
    float: left;
    background: #CCC;
    width: 100%; min-height: 200px;
    padding-top: 12px;
}


#split_left{
    float: left;
    width: 640px; background: transparent;
    min-height: 400px;
    margin-left: 10px;
}
#split_right{
    float: right;
    width: 310px; background: transparent;
    min-height: 400px;
    margin-right: 10px;
}

/*********FANZONE*********/

#fanzone{
    position: relative;
    float: left;
    width: 310px; margin: 0 auto 0 auto;
    background: #AAA;
}

#fanzone-padding{
    float: left;
    padding: 0 10px;
    width: 290px;
}

#fanzone .header{
    float: left;
    height: 36px; width: 100%;
    background: #999;
}
#fanzone .header .title{
    float: left;
    font-size: 1.4em; font-weight: bold;
    text-transform: uppercase;
    margin: 11px 0 11px 0;
}

#fanzone .social{
    float: left; 
    margin: 10px 12px 0 0;
}

#fanzone div.underline{
    width: 100%; border-bottom: solid 1px #FFF;
    margin: -4px 0 0 0;
    z-index: 1;
    height: 1px;
}
#fanzone h2.underline{ color: #FFF;  margin: 0; z-index: 2;  }

/****POLL****/
#poll .polltitle{
    font-weight: bold; font-size: 1.2em;
    text-transform: uppercase;
}
#poll .poll { margin-top: 10px; }
#poll .pollbox p { color: red; font-weight: bold; }
#poll .pollbox ul { margin: 0 0 0 20px; padding: 0; }
#poll .pollbox ul li div{ float: none !important; }
#poll .percentbar{ padding: 0.2em; }

#poll .button_rev{
    float: right;
    margin-top: -20px; 
}




/****TWITTER*****/
#twitter_listing{ padding-top: 10px; }
#twitter_listing, #twitter_listing .content{
	position: relative;
	width: 100%;
}
#twitter_listing .content{ margin-bottom: 0.25em; }

#twitter_listing .header{ float: left; padding: 0.5em; }

/****FAN PHOTOS***/
#fanphotos .pageblock h2{ display: none; }
#fanphotos .highslide-gallery{ float: left; }
#fanphotos .highslide-pic-info{ float: left; }
#fanphotos .highslide-pic{ width: 60px; height: 60px; float: left; margin-right: 5px; }
#fanphotos .pageblock{
    width: 100%; height: 75px; overflow: hidden;
}

/****STORE***/

#store .pageblock h2{ display: none; }
#store .highslide-gallery{ float: left; }
#store .highslide-pic-info{ float: left; }
#store .highslide-pic{ width: 55px; height: 55px; float: left; margin-right: 5px; }
#store .pageblock{
    width: 195px; height: 69px; overflow: hidden;
}

#store .getyours { padding-top: 8px; }
#store .getyours h1, #store .getyours h2, #store .getyours h3{
    text-align:center; text-transform: uppercase;
}

/********SKED*********/

#sked{
    float: right;
    width: 310px; height: 330px;
}

#sked .header{
    float: left;
    width: 100%; height: 36px;
    background: #AAA;
}
#sked .header .title{
    float: left;
    font-size: 1.4em; font-weight: bold;
    text-transform: uppercase;
    margin: 10px 0 10px 0;
}

#sked .games{ float: left; width: 100%; }

#sked .game, #sked .game-next{
    float: left; position: relative;
    width: 100%; height: 43px;
    border-bottom: solid 1px #999;
}
#sked .games .left, #sked .games .right { padding-top: 10px;}
#sked .game-next{ height: 80px; }

#sked .logo{
    float: left;
    width: 57px; height: 100%;    
}
#sked .game-next .logo{ width: 80px; }

#sked .where, #sked .win_lost{
    font-weight: bold; color: #666;
}
#sked .team_name, #sked .score{
    font-size: 1.2em;
    font-weight: bold;
}
#sked .watch{
    font-size: 0.8em;
}
#sked .watch{ padding-top: 3px; text-align: right; }

#sked .right{ text-align: right; }

/***SKED DROPDOWNS***/

#tv_coverage, #radio_coverage{
    position: absolute;
    background: #CCC; color: #000;
    padding: 8px 5px; min-width: 80px;
    z-index: 10;
}

#tv_coverage ul, #radio_coverage ul{
    margin: 0; padding: 0;
}

/***SKED COUNTDOWN***/
#sked .countdown{
    position: absolute; top: 5px; right: 5px;
    background: url('http://chl.assets.mrx.ca/league/images/en/wireframe/b-80.png') repeat;
    color: #FFF; padding: 0.5em;
    text-align: center;
    width: 90px;
}

#sked .countdown .centre{
    font-weight: bold; font-size: 1.5em;
}

/*****VIDEO PAGE****/
a.rating_star{
  display: block;
  float: left;
  width: 15px;
  height: 14px;
  background: transparent url(http://ohl.assets.mrx.ca/guelph/images/stars.png) no-repeat 0 0; 
}

a.rating_star_1:hover { background-position: -15px 0; }
a.rating_star_2:hover { background-position: -30px 0; }
a.rating_star_3:hover { background-position: -45px 0; }
a.rating_star_4:hover { background-position: -60px 0; }
a.rating_star_5:hover { background-position: -75px 0; }


/***FOOTER***/
#footer_logo{
    float: left;
    width: 20%;
}

#footer .footer_menu{
    float: left;
    width: 80%;
    text-transform: uppercase;
    line-height: 2;
    color: #7C7C7C;
}

#footer .footer_menu h3{ font-size: 1.2em; color: #FFF; }


#footer .disclaimer{    
    color: #FFF; font-size: 0.9em;
    padding-left: 20%;
    width: 60%;
}

/***FOOTER ADS & PROMOS***/

#footerPromo{ float: left; width: 100%; margin: 10px 0 0 10px;  }
#footerPromo div{ outline: solid 1px #999;}

#footerPromo .promo{
    float: left;
    width: 182px; height: 60px;
    margin-right: 10px;
}

#footerAds{
    float: left; width: 960px;
    margin: 10px 0 10px 10px;
}

#footerAds .footer-ad{
    float: left;
    margin-right: 10px;
    width: 313px; /*height: 128px;*/    
}

#footerAds .footer-ad.last{ margin-right: 0;}

/**ROUNDED**/
.rounded{
    -webkit-border-radius: 5px;    /* for Safari */
    -moz-border-radius: 5px;       /* for Firefox */
    border-radius: 5px;
}

/**ROSTER STUFF - Some things are on homepage, some on layout***/

/*** MINI ROSTER / PLAYER SPOTLIGHT***/
#mini_roster{ float: left; width: 100%; background: #DDD; }

#mini_roster .header{
    float: left;
    width: 100%; height: 36px;
    background: #999;
}

#mini_roster .header .title{
    float: left;
    margin: 11px 0 11px 0px;
    font-size: 1.4em; font-weight: bold;
    text-transform: uppercase;
}

#mini_roster .header .button_rev{
    margin: 11px 10px 11px 0px;
    float: right;
}


#mini_roster table{ width: 200px; }

#mini_roster table td{ width: 25px; padding: 0.25em 0 0.25em 0; }
#mini_roster table td.name{ width: 100px; font-weight: bold; }

#mini_roster table.tbl-header td{ font-weight: bold; }

#mini_roster #mini_roster_player{    
    float: left;
}

#mini_roster .mugshot{
    float: left;
    width: 248px; height: 320px;
}
#mini_roster .profile{ float: left; width: 190px;}

#mini_roster .number, #roster_player .number, {
    font-size: 4em; font-weight: bold;
    color: #444;
}

#mini_roster .details, #roster_player .details{ float: left; width: 100%; }

#mini_roster .details .title, #roster_player .details .title{ font-weight: bold; }
#mini_roster .details .value, #roster_player .details .value{ }

/***FOOTER***/
#footer_logo{ text-align: center; }

#footer .footer_links{
    float: left; width: 20%;
}
#footer h2{ text-transform: uppercase; }

#footer ul, #footer ul li{
    list-style: none; padding: 0; margin: 0 0 5px 0;
    text-transform: uppercase;
    color: #858585;
}
#footer ul li a{ color: #858585; }
#footer ul { margin-top: 10px; }
#footer .pagetitle{ display: none; }
#footer .sectiontitle{
    margin: 0;
    text-transform: uppercase; font-size: 1.2em;
    color: #FFF;
}

#footer .disclaimer .pageblock{
    margin-top: 20px;
    width: 100%; font-size: 1em;
    color: #ccc;
}

/***SEARCH***/
.search .search-input{
    float: left;
    height: 12px;
}
.search .search-button{
    float: left;
}

/***INSIDER***/
.insider-form .form_title, .insider label{ display: none !important; }
.insider-form .clear{ display: none; }
.insider-form form, .insider input, insider .submit{ float: left; }

/**STATS**/
.stats table{ width: 100%; }