/*************************************************


    CFRT
    Dec 2009
    by 76design


***************************************************
    GENERIC
    */


html{
    font: 62.5%/160% Arial, Helvetica, sans-serif;
    color: #444;
    height: 100%;
    padding-bottom: 1px;
    }

body{
    margin: 0px;
    padding: 0px;
    text-align: center;
    }

table{
    margin-bottom: 15px;
    }


.floatright{
    float: right;
    margin: 0 0 15px 15px;
    }
.floatleft{
    float: left;
    margin: 0 15px 15px 0;
    }
.clearleft{
    clear: left;
    }
.clearright{
    clear: right;
    }

a{
    color: #494949;
    }
a:hover{
    color: #8c0702;
    text-decoration: none;
    }


/**
  * FLASH MESSAGES (success/error)
  */
.flash-msg{

    }
.error{
    color: #b02828;
    font-weight: bold;
    border-bottom: solid 1px #ccc;
    padding-bottom: 6px;
    margin-bottom: 15px;
    }
.success{
    color: #8fbc2d;
    font-weight: bold;
    border-bottom: solid 1px #d5f199;
    padding-bottom: 6px;
    margin-bottom: 15px;
    }


/***************************************************
    WRAPPER
     */

#wrapper {
    width:960px;
    margin: 0px auto;
    text-align:left;
    }

#main{
    font-size: 120%;
    overflow: hidden;
    height: 1%;
    margin: 0 0 15px 0;
    }


/***************************************************
    STRUCTURE
    */

#rightcolumn {
    float:left;
    width:205px;
    }

#leftcolumn {
    float:left;
    width: 740px;
    margin:0 15px 0 0;
    }



/***************************************************
    HEADER
    */



    #header {
        font-size: 140%;
        margin:10px 0 15px 0
        }
    #header-banner{
        height: 119px;
        background: url(../images/header-bg.jpg) 0 0 repeat-x;
        position: relative;
        }

    .fr #header-banner{
        }


    #logo{
        display: block;
        width: 560px;
        height: 65px;
        position: absolute;
        top: 20px;
        left: 30px;
        text-indent: -900em;
        overflow: hidden;
        background: url(../images/logo-en.jpg) 0 0 no-repeat;
        }
    .fr #logo {
        top: 22px;
        left: 31px;
        background: url(../images/logo-fr.jpg) 0 0 no-repeat;
        }


    #choose-timezone{
        position: absolute;
        top: 15px; right: 15px;
        color: #eee;
        background: #717171 url(../images/timezone-bg.jpg) 0 0 repeat-x;
        width: 280px;
        text-align: center;
        padding: 15px;
        }

    #choose-timezone p {
        margin: 0 0 10px 0;
        text-align: left;
        font-weight: bold;
    }

    #choose-timezone ol{
        margin: 0;
        list-style: none;
        }
    #choose-timezone li{
        display: inline;
        }

    #choose-timezone label{
        font-weight: bold;
        margin-right: 5px;
        }

    #choose-timezone,
    #choose-timezone select{
        font-size: 12px;
        font-family: arial, helvetica, sans-serif;

        }
    #choose-timezone select {
        width:189px;
        padding: 4px 0;
        float: left;
        }

    #choose-timezone #timezone_submit-element {
        float: right;

        }

    .logo {
        text-indent:-999em;
        width:100px;
        height:100px;
        display:block;
        background:url(../images/logo.gif) no-repeat;
        }





    /***************************************************
        MAIN MENU
        */

    #top-nav{
        font-size: 95%;
        font-weight: bold;
        background: #b6b6b6 url(../images/nav.gif) 0 0 repeat-x;
        border-top: solid 1px #acacac;
        border-bottom: solid 1px #8f8f8f;
        }
    #top-nav a{
        text-decoration:none;
        }

    #topmenu {
        margin:0 0 0 0;
        padding:0;
        overflow: hidden;
        height: 1%;
        }


    #topmenu LI  {
        list-style:none;
        float:left;
        width:auto;
        }

    #topmenu A {
        display:block;
        padding: 12px 14px;
        margin:0;
        background: url(../images/nav-divider.gif) top right repeat-y;
        }
    #topmenu .selected a{
        color: #333;
        background-color: #ccc;
        }
    #topmenu a:hover{
        background-color: #ddd;
        }


    a#lang{
        float: right;
        display: block;
        height: 32px;
        line-height: 32px;
        margin: 4px 15px 0 0;
        background: url(../images/langbtn-leftside.gif) 0 0 repeat-x;
        color: #980807;
        }
    a#lang span{
        display: block;
        padding: 0 20px;
        background:  url(../images/langbtn-rightside.gif) top right no-repeat;
        }
    a#lang:hover{
        color: #333;
        }




/***************************************************
    PAGE TITLE
    */
#page-header{
    overflow: hidden; height: 1%;
    border-bottom: solid 3px #ddd;
    margin: 15px 0 25px 0;
    padding: 0 0 5px 0;
    }
#page-header h1{
    float: left;
    color: #8f8f8f;
    font-weight: bold;
    font-size: 180%;
    margin: 0;
    }
#page-header h1 em{
    font-style: none;
    color: #980807;
    }

#page-header .browse{
    margin-top: 10px;
    float: right;
    color: #c3c3c3;
    }
#page-header .browse a{
    color: #494949;
    }
#page-header .browse a.next {
    display: inline-block;
    background: url(../images/next.gif) 100% 4px no-repeat;
    padding: 0 15px 0 0;
    }
#page-header .browse a.prev {
    display: inline-block;
    background: url(../images/prev.gif) 0 4px no-repeat;
    padding: 0 0 0 15px;
    }


/***************************************************
    Homepage
    */
.box{
    width: 100%;
    background: #ddd;
    border: solid 1px #c3c3c3;
    margin: 0 0 15px 0;
    }

.box ul,
.box ol{
    margin: 0;
    }

.box li{
    position: relative;
    zoom: 1;
    }

.box h2{
    font-size: 120%;
    background: #323232 url(../images/glossy-black.gif) 0 0 repeat-x;
    color: #ddd;
    font-weight: bold;
    padding: 8px 15px;
    width: 175px;
    margin: 8px 0 0 -1px;
    }

#home-3col{
    margin: 19px 0;
    overflow: hidden;
    }

#home-3col .box{
    float: left;
    width: 306px;
    min-height:230px;
    height:auto !important;
    height:230px;
    margin: 0;
    }

/* >> homepage box > available schedules */
#home-3col #box-schedules{
    margin: 0 18px 0 18px;
    }
#box-schedules ol{
    margin: 0;
    }
#home-3col #box-schedules li{
    list-style: none;
    background: url(../images/icon-calendar.gif) 0 4px no-repeat;
    padding: 4px 0 4px 25px;
    margin: 0 0 4px 0;
    }
#home-3col #box-schedules a{
    font-weight: bold;
    font-size: 100%;
    }

.box-content{
    padding: 15px;
    }

/* >> homepage box > notices */
#box-notices ol{
    list-style: none;
    margin: 0;
    }
#box-notices li{
    font-size: 90%;
    background: #fff;
    border-left: solid 4px #8c0702;
    margin: 0 0 4px 0;
    padding: 7px 4px 4px 10px;
    height: 1%;
    }

#box-notices li a{

    display: block;
    text-decoration: none;
    }
#box-notices em{
    font-style: normal;
    font-weight: bold;
    color: #8c0702;
    font-size:120%;
    margin-right: 7px;
    }
#box-notices strong{
    font-size: 120%;
    }
#box-notices li span{
    display: block;
    }

#box-schedules .readmore,
#box-notices .readmore{
    text-align: right;
    margin: 0;
    }

#home-3col #box-schedules .readmore a,
#box-notices .readmore a{
    color: #8c0702;
    font-size: 90%;
    font-weight: bold;
    }

/** >> homepage box > IDC logo */
#home-3col #box-idclogo{
    background: #fff;
    border: none;
    text-align: center;
    padding-top: 60px;
    min-height: 0;
    height:0 !important;
    }

/** >> broadcast sched > featured content */
.video-icons-big{
    list-style: none;
    }
.video-icons-big li{
    background: url(../images/icon-film-large.gif) 3px 4px no-repeat;
    font-size: 110%;
    font-weight: bold;
    padding: 3px 0 3px 25px;
    border: solid 1px #ddd;
    }

/** >> broadcast sched > a-z */
.video-icons-small{
    list-style: none;
    }
.video-icons-small li{
    background: url(../images/icon-film-small.gif) 3px 6px no-repeat;
    font-size: 90%;
    padding: 2px 0 2px 20px;
    border: solid 1px #ddd;
    }

/** >> broadcast sched > a-z  AND featured content */
.video-icons-small li:hover,
.video-icons-big li:hover,
.video-icons-small li.hover,
.video-icons-big li.hover{
    border: solid 1px #ccc;
    background-color: #fff;
    cursor: pointer;
    }
.video-icons-small li.selected,
.video-icons-big li.selected{
    border: solid 1px #fff6be;
    background-color: #eedd79;
    }
.video-icons-small li.selected{
    background-image: url(../images/icon-film-small-selected.gif);
    }
.video-icons-big li.selected{
    padding: 4px 0 4px 25px;
    background-image: url(../images/icon-film-large-selected.gif);
    }


/** >> broadcast sched > legend */
#box-legend ul{
    list-style: none;
    font-weight: bold;
    }
#box-legend li{
    margin: 0 0 2px 0;
    padding:2px 2px;
    border: solid 1px #DDDDDD;
    }
#box-legend img{
    vertical-align: middle;
    margin: 0 6px 0 0;
    }

#box-legend li:hover{
    border: solid 1px #ccc;
    background-color: #fff;
    cursor: pointer;
    }
#box-legend li.selected{
    background-color:#EEDD79;
    border:1px solid #FFF6BE;
    }

#box-print a {
    width: auto;
    }
#box-print a img {
    vertical-align: middle;
    margin-right: 10px;
    }
    
#box-print-reset span {
    padding: 0 0 0 25px;
    background: url(../images/print-icon.gif) 0 50% no-repeat;
    display: block;
    }   


@media screen {
/***************************************************
    Broadcast Schedule
     */

#broadcast-schedule-table{
    width: 100%;
    font-size: 12px;
    table-layout:fixed;
    }

#broadcast-schedule-table th{
    border: none;
    color: #ccc;
    padding: 4px;
    font-size: 13px;
    vertical-align: middle;
    background: #555 url(../images/table-header-light.gif) 0 0 repeat-x;
    border: solid 1px #333;
    }

#broadcast-schedule-table th{
    width: 110px;
    text-align: center;
    padding-top: 5px;
    }
#broadcast-schedule-table:first-child th{
    width: auto;
    }
#broadcast-schedule-table thead td{
    width: 36px;
    }


#broadcast-schedule-table tbody th{
    text-align: center;
    }

/* Awww, I wish:
#broadcast-schedule-table tbody tr:nth-of-type(even) th,
#broadcast-schedule-table thead th:nth-of-type(even),*/
#broadcast-schedule-table tbody tr.alt th,
#broadcast-schedule-table thead th.alt{
    background: #323232 url(../images/table-header-dark.gif) 0 0 repeat-x;
    }

#broadcast-schedule-table tbody td{
    width: 13%;
    padding: 8px 0px;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    text-align: center;
    vertical-align: middle;
    color: #333;
    }

/* active styles */
#broadcast-schedule-table .news{
    background: #daf398 url(../images/table-news.gif) 0 0 repeat-x;
    }
#broadcast-schedule-table .entertainment{
    background: #b3e4ef url(../images/table-entertainment.gif) 0 0 repeat-x;
    }
#broadcast-schedule-table .sports{
    background: #ffc076 url(../images/table-sports.gif) 0 0 repeat-x;
    }

/* disabled styles */
#broadcast-schedule-table.disabled .news{
    background: #d2d2d2 url(../images/table-news-disabled.gif) 0 0 repeat-x;
    }
#broadcast-schedule-table.disabled .entertainment{
    background: #c5c5c5 url(../images/table-entertainment-disabled.gif) 0 0 repeat-x;
    }
#broadcast-schedule-table.disabled .sports{
    background: #bababa url(../images/table-sports-disabled.gif) 0 0 repeat-x;
    }

/* active styles */
#broadcast-schedule-table.disabled .highlight,
#broadcast-schedule-table .highlight{
    background: #f1da49 url(../images/table-highlighted.gif) 0 0 repeat-x;
    }


/* Sidebar */
#rightcolumn .box{
    position: relative;
    }
#rightcolumn .box h2{
    width: 150px;
    }
.box .reset{
    display: none; /* other fn doesn't work w js disabled, so hide this button right off the bat */
    position: absolute;
    top: 14px;
    right: 10px;
    }

} /* @media END */

/***************************************************
    FORMS
     */

form{

    }

form ol{
    list-style: none;
    text-align: left;
    }

form label{
    font-size: 90%;
    font-weight: bold;
    }

form input,
form select{
    font-family: helvetica, arial, sans-serif;
    }

#cboxWrapper{
    font-size: 120%;
    }
#cboxWrapper form label{
    font-size: 90%;
    }

 /* add something new to the sched */
#scheduleitemform{
    font-size: 120%
    }
#scheduleitemform li{
    padding: 4px 0;
    }


/* preview box in right column */
#copyforwardlink,
.button,
button.button{
    font: 11px arial, helvetica, sans-serif;
    cursor: pointer;
    text-decoration: none;
    background:#666;
    border: solid 1px #222;
    color: #fff;
    padding: 4px 6px;
    display: block;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
#copyforwardlink:hover,
.button:hover{
    color: #980807;
    background: #eee;
    border-color: #666;
    }

#copyforwardlink{
    background: #666 url(../images/icon-copyforward.gif) 5px 50% no-repeat;
    padding-left: 27px;
    }
#copyforwardlink:hover{
    background: #fff url(../images/icon-copyforward-red.gif) 5px 50% no-repeat;
    }
#schedulepublishform form{
    margin: 15px 0 0 0;
    }


/***************************************************
    PROGRAM LISTING
     */

.program-listing-list{
    margin: 0;
    list-style: none;
    padding:15px;
    background: #ddd;
    border:1px solid #C3C3C3;
    }

.program-listing-list li{
    background: #fff;
    padding: 7px 4px 4px 10px;
    border-left: 4px solid #8C0702;
    margin: 0 0 10px 0;
    }

#program-listing #content .times ul.timelist {
    padding:0;
    margin:0;
    }
#program-listing #content .times ul.timelist li {
    border-left: none;
    padding: 0px 0px 0px 0px;
    margin: 4px 18px 2px 0;
    float:left;
    width:150px;
    display:inline;
    list-style:none;
    }



.program-listing-list .title{
    font-size: 140%;
    font-weight: bold;
    margin: 0 0 4px 0;
    }

.program-listing-list .description{
    font-size: 90%;
    }

.program-listing-list .times{
    color: #666;
    margin: 0 0 5px 0;
    font-size: 90%;
    }


#program-listing #content form ol{
    margin: 0 0 15px 0;
    overflow: hidden;
    }
#program-listing #content form li{
    float: left;
    }
#program-listing #content form button{
    display: inline-block;
    margin-left: 5px;
    }


.program-listing-filters {
    margin:0 24px 0 0;
    float:left;
    }

.program-listing-filters li {
    display:inline;
    float:left;
    width:90px;
    list-style:none;
    border:solid 1px #c3c3c3;
    background-color:#dddddd;
    padding:4px 8px;
    margin:0 4px 4px 0;
    text-align:center;
    }
.program-listing-filters li.selected {
    background-color:#F1DA49;
    border:1px solid #FFF6BE;
    }
.program-list-week-form {
        float:right;

    }
/***************************************************
    FOOTER
     */

#footer {
    clear:both;
    border-top: solid 2px #b8b8b8;
    padding: 10px 0 0 0;
    font-size: 110%;
    color: #ccc;
    }
#footer a{
    color: #a6a6a6;
    }
#footer a:hover{
    color: #8c0702;
    }



/***************************************************
    CONTACT US FORM
     */

#moduleid-Contact-index label {
    vertical-align: top;
    width: 100px;
    display: inline-block;
    }

#moduleid-Contact-index textarea {
    width: 75%;
    }