/*   
Website Name: SABC
Description: This is the front-end website styles for SABC.

Version: (1)
*/

/* ============================================================================================ */
/* ! SCC RESETS																					*/
/* ============================================================================================ */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, q, small, strong, sub, sup, dl, dt, dd, ol, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{ border: 0; margin: 0; padding: 0 }

article, aside, figure, figure img, figcaption, hgroup, footer, header, navSABC, section, video, object
{ display: block }

a img
{ border: 0 }

figure
{ position: relative }

figure img
{ width: 100% }


/* ============================================================================================ */
/* ! Cast Members Section				                                                */
/* ============================================================================================ */

div.t3-spotlight.t3-spotlight-2.row{
	display: none;	
}

/* ============================================================================================ */
/* ! Layout for DESKTOP version   				                                                */
/* ============================================================================================ */

/* BODY ----------------------------------------------------------------------------------------*/

body
{
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 62.5%;
    line-height: 1.8em;
}

/* MISC ----------------------------------------------------------------------------------------*/
.clear
{
    clear: both;
}

.clearfix:before,
.clearfix:after
{
    content: " ";
    display: table;
}

.clearfix:after
{
    clear: both;
}

.clearfix
{
    *zoom: 1;
}

.odd
{
    background: #EEEEEE;
    padding: 20px;
}

.even
{
    border-bottom: 1px solid #EEEEEE;
    border-top: 1px solid #EEEEEE;
    padding: 20px;
}

.lazy
{
    display: none;
}

.pullCenter
{
    text-align: center;
}

.pullLeft
{
    float: left;
}

.pullRight
{
    float: right;
}

.leftColumn
{
    float: left;
    width: 47.2440944881890%;
}

.rightColumn
{
    float: right;
    width: 52.755905511811%;
}

.noBtmBorder
{
    margin-bottom: 0 !important;
}

.articleBody
{
    clear: both;
    padding-top: 15px;
    padding-bottom: 15px;
}


/* WEBSITE LOGO --------------------------------------------------------------------------------*/
img.logo-img{
	padding-top: 5px;
}
/* RESPONSIVE GRID -----------------------------------------------------------------------------*/
.containerSABC
{
    padding-left: 45px;
    padding-right: 45px;
}

.rowSABC
{
    width: 100%;
    max-width: 1165px;
    /* min-width: 320px; */
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}



/* MASTER HEADER -------------------------------------------------------------------------------*/
#SABCMasterHeader
{
    background: #000000;
    min-height: 60px;
    padding-right: 20px !important;
    color: #b2b2b2;
    /*margin-bottom: 15px;*/
    font-family: Arial, Helvetica, sans-serif;
}

.MastHeaderLogo
{
    float: left;
    padding: 5px 30px 10px 35px;
}

#SABCMasterHeader ul
{
    list-style-type: none;
}

#SABCMasterHeader li
{
    float: left;
}

#SABCMasterHeader li a:link,
#SABCMasterHeader li a:active,
#SABCMasterHeader li a:visited
{
    color: #aaaaaa;
    text-decoration: none;
    font-size: 0.9em;
    padding: 15px 7px;
    font-weight: bold;
    display: block;
}

#SABCMasterHeader li a:hover
{
    color: #FEBB12;
}

#SABCMasterHeader .SiteSearch
{
    float: right;
    /* width:260px; */
    color: #FFFFFF;
    font-size: 0.8em;
    /* padding-top:15px; */
    /* padding-bottom:15px; */
    text-align: right;
    /* padding-right:15px; */
    display: none;
}

#SABCMasterHeader #s
{
    background: #333333;
    /* border: 1px solid #333; */
    /* padding:4px; */
    margin: 0 0 5px 0;
    /* height: 20px; */
    /* -moz-border-radius: 5px; */
    /* -webkit-border-radius: 5px; */
    /* border-radius: 5px; */
}

#SABCMasterHeader #go_btn
{
    background: #333333;
    border: 1px solid #333333;
    font-weight: bold;
    padding: 3px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #FFFFFF;
}

/* SOCIAL BUTTONS -------------------------------------------------------------------------------------*/

div.leftmainfooterBtns
{
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 40px;
    float: left;
    width: 120px;
}

.buttonmainfooter1,
.buttonmainfooter1:link,
.buttonmainfooter1:active,
.buttonmainfooter1:visited
{
    display: inline-block !important;
    padding: 0 3px;
    text-transform: uppercase;
    color: #60171A !important;
    line-height: 2em;
    margin: 0 1px 4px;
    border: 2px solid #FFFFFF;
    cursor: pointer;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.buttonmainfooter1:hover
{
    border: 2px solid #FFFFFF;
    color: #FFFFFF !important;
}

a.buttonmainfooter1
{
    color: #FFFFFF;
}

.buttonmainfooter1 span
{
    width: 17px;
    display: inline-block;
    background-position: center center;
    background-repeat: no-repeat;
}

.buttonmainfooter1.large
{
    font-size: 1.5em;
}

.buttonmainfooter1.large span
{
    width: 30px;
    height: 35px;
    display: inline-block;
    background-size: 80%;
}

.buttonmainfooter1 .twitter
{
    background-image: url(../Home_files/buttonsocial-icon-twitter-small.png);
}

.buttonmainfooter1 .facebook
{
    background-image: url(../Home_files/buttonsocial-icon-facebook-small.png);
}

.buttonmainfooter1 .email
{
    background-image: url(../../images/buttonsocial-icon-email-small.png);
}

.buttonmainfooter1 .bbm
{
    background-image: url(../../images/buttonsocial-icon-bbm-small.png);
}

.buttonmainfooter1 .mxit
{
    background-image: url(../../images/buttonsocial-icon-mxit-small.png);
}

.buttonmainfooter1 .instagram
{
    background-image: url(../../images/buttonsocial-icon-instagram-small.png);
}

.buttonmainfooter1 .youtube
{
    background-image: url(../Home_files/buttonsocial-icon-youtube-small.png);
}

.buttonmainfooter1 .wechat
{
    background-image: url(../../images/buttonsocial-icon-wechat-small.png);
}

.buttonmainfooter1 .text
{
    padding: 0 3px;
    width: auto;
}

/* MASTER FOOTER -------------------------------------------------------------------------------*/
#SABCMasterFooter
{
    background: #000000;
    color: #FFFFFF;
    min-height: 90px;
    font-size: 0.8em;
    font-family: Arial, Helvetica, sans-serif;
}

#SABCMasterFooter a:link,
#SABCMasterFooter a:active,
#SABCMasterFooter a:visited
{
    color: #FFFFFF;
    text-decoration: none;
}

#SABCMasterFooter a:hover
{
    text-decoration: underline;
}

#SABCMasterFooter .sabclogo
{
    width: 12%;
    float: left;
    padding-top: 26px;
    padding-right: 10px;
    padding-left: 10px;
}

#SABCMasterFooter .nav
{
    width: 50%;
    margin-left: 30%;
    padding-top: 40px;
    margin-bottom: 0px !important;
}

#SABCMasterFooter .dmma
{
    width: 12%;
    float: right;
    padding-right: 30px;
    padding-top: 8px;
    text-align: right;
}

#SABCMasterFooter .dmma img
{
    padding-bottom: 0px;
}

#SABCMasterFooter .nav ul
{
    display: table;
    list-style-type: none;
    width: 100%;
}

#SABCMasterFooter .nav li
{
    display: table-cell;
    width: 30%;
}

/* ADVERTISING ---------------------------------------------------------------------------------*/
#LeaderboardAdvertising
{
    background: #000000;
    padding: 10px;
}

.LeaderboardContainer
{
    width: 728px;
    height: 90px;
    margin: 0 auto;
}

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

/* ============================================================================================ */
/* ! 5th BREAK POINT - Change Main Navigation						                                */
/* ============================================================================================ */

@media handheld, only screen and (max-width: 990px)
{

}

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

/* ============================================================================================ */
/* ! FIRST BREAK POINT - Layout for SMALLER SCREENS & TABLETS LANDSCAPE                         */
/* ============================================================================================ */

@media handheld, only screen and (max-width: 960px)
{

    .container
    {
        padding-left: 20px;
        padding-right: 45px;
    }

    #SABCMasterHeader .SiteSearch
    {
        padding-right: 0;
    }

    #SABCMasterHeader
    {
        padding-right: 0 !important;
    }

    /* ============================================================================================ */
    /* ! SECOND BREAK POINT - Layout for SMALLER SCREEN & TABLETS PORTRAIT                          */
    /* ============================================================================================ */
    @media handheld, only screen and (max-width: 767px)
    {

        /* BODY ----------------------------------------------------------------------------------------*/
        body
        {
            font-size: 62.5%;
            line-height: 1.8em;
            background-position: center 15px !important;
        }

        /* RESPONSIVE GRID -----------------------------------------------------------------------------*/
        .container
        {
            padding: 0;
        }

        #SABCMasterHeader li a:link,
        #SABCMasterHeader li a:active,
        #SABCMasterHeader li a:visited
        {
            color: #FFFFFF;
            text-decoration: none;
            font-size: 0.8em;
            padding: 28px 7px;
            font-weight: bold;
            display: block;
        }

        div.navSABC
        {
            display: block;
            background: #FFFFFF url(../images/mastfooter-mobile-nav-bg.jpg) repeat-x center center;
            float: none;
        }

        /* MASTER HEADER -------------------------------------------------------------------------------*/
        #SABCMasterHeader .SiteSearch
        {
            display: none;
        }

        #SABCMasterHeader
        {
            min-height: 75px;
            padding: 0 !important;
        }

        .MastHeaderLogo
        {
            float: none;
            padding: 15px;
            display: block;
        }

        #SABCMasterHeader .nav
        {
            display: block;
            background-color: #FFFFFF;
            float: none;
        }

        #SABCMasterHeader ul
        {
            display: table;
            margin: 0.0em 0;
            width: 100%;
        }

        #SABCMasterHeader li
        {
            float: none;
            display: table-cell;
            text-align: center;
            border-right: 1px solid #737373;
        }

        #SABCMasterHeader li a:link,
        #SABCMasterHeader li a:active,
        #SABCMasterHeader li a:visited
        {
            padding: 4px 1px;
            color: #000000;
        }

        #SABCMasterHeader li a:hover
        {
            background-image: url(../images/mastfooter-mobile-nav-bg-hover.jpg);
            color: #FFFFFF;
        }

        /* MASTER FOOTER -------------------------------------------------------------------------------*/
        #SABCMasterFooter
        {
            min-height: 50px;
        }

        #SABCMasterFooter .sabclogo
        {
            width: 16%;
            padding: 2%;
        }

        #SABCMasterFooter .dmma
        {
            width: 36%;
            padding: 2%;
        }

        #SABCMasterFooter .nav
        {
            width: 100%;
            clear: both;
            margin: 0;
            padding: 10px;
            background: #0F0E0E;
        }

        /* ADVERTISING ---------------------------------------------------------------------------------*/
        #LeaderboardAdvertising
        {
            padding: 0;
            text-align: center;
        }

        .LeaderboardContainer
        {
            width: auto;
            height: auto;
            max-width: 728px;
            min-width: 320px;
        }

    }


    /* ============================================================================================ */
    /* ! THIRD BREAK POINT - Layout for MOBILE LANDSCAPE & PORTRAIT                                 */
    /* ============================================================================================ */
    @media handheld, only screen and (max-width: 630px)
    {

        /* BODY ----------------------------------------------------------------------------------------*/
        body
        {
            font-size: 55%;
            line-height: 1.6em;
            background-position: center -1px !important;
        }
    }

    /* ============================================================================================ */
    /* ! FORTH BREAK POINT - Layout for MOBILE 320 ONLY				                                */
    /* ============================================================================================ */
    @media handheld, only screen and (max-width: 320px)
    {

        /* BODY ----------------------------------------------------------------------------------------*/
        body
        {
            background-position: center -15px !important;
        }

    }