* { margin: 0; }    

    html, body { height: 100%; }
    
    * html body {  text-align: center; }
    
    object, embed { outline: none !important; } 
    
    .outerWrapper {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -100px auto; /* the bottom margin is the negative value of the footer's height */
        }
    .innerWrapper {
        width:1024px;
        height: 100%;
        margin: 0 auto;     
        overflow:hidden;
        /*background-color: #000;*/
        background-color: transparent;
        }
        
        
/*  --------- MEM ---------  */
        
    .mem .innerWrapper { 
        text-align: left; 
        position:relative; 
        overflow:visible;
        }
    
    .lights{
        display: none;
        width:100%;
        height:576px;
        background:url("http://a.espncdn.com/30for30/prod/assets/overlay_black.png") repeat;
        position:absolute;
        top:0px;
        pointer-events:none;
        }       
    .lights2{
        display: none;      
        height:0px;
        width:100%;
        background:url("http://a.espncdn.com/30for30/prod/assets/gradient.png") repeat-x;
        position:absolute;
        top:607px;
        pointer-events:none;
        z-index:1000;
        }       
        
    /*  --------- VIDEO PLAYER ---------  */
        #videoPlayer {
            display:block;
            z-index:0;
            margin:0px;
            padding:0px;
            width:1024px;
            height:576px;
            position:absolute;
            top:0px;
            }
            
    /*  --------- BRAND & NAV ---------  */
        .brand{
            z-index:99;
            background: url('http://a.espncdn.com/30for30/prod/assets/brand/brand.png') top center no-repeat;
            width:140px;
            height:230px;
            position:absolute;
            top:0px;
            left: -58px;
            padding: 8px 0 0 50px;
            }
        .brand span { display:block; }
        .brand span:hover { cursor: pointer; }  
        .brand .active span:hover { cursor: default;}
        
        .brand .espnFilms span { margin-top: 2px; width: 89px; height: 24px; background:url('http://a.espncdn.com/30for30/prod/assets/brand/brand_sprite.jpg') top left no-repeat; background-position:0 0; }
        .brand .espnFilms span:hover { background-position: -89px 0; }      
        
        .brand .thirty4thirty span { margin: 8px 0px 0px 0px; width: 89px; height: 35px; background:url('http://a.espncdn.com/30for30/prod/assets/brand/brand_sprite.jpg') top left no-repeat; background-position: 0 -24px; }
        .brand .thirty4thirty span:hover, .brand .thirty4thirty.active span { background-position: -89px -24px; }   
            
        .brand .buick span { margin: 2px 0px 0px 0px; width: 89px; height: 27px; background:url('http://a.espncdn.com/30for30/prod/assets/brand/brand_sprite.jpg') top left no-repeat; background-position: 0 -59px; }
        .brand .buick span:hover { background-position: -89px -59px; }      
            
        .brand .volume1 span { margin-top: 6px; width: 89px; height: 15px; background:url('http://a.espncdn.com/30for30/prod/assets/brand/brand_sprite2.jpg') top left no-repeat; background-position: 0 -86px; }
        .brand .volume1 span:hover, .brand .volume1.active span { background-position: -89px -86px; }       
        
        .brand .volume2 span { margin-top: 5px; width: 89px; height: 16px; background:url('http://a.espncdn.com/30for30/prod/assets/brand/brand_sprite2.jpg') top left no-repeat; background-position: 0 -100px; }
        .brand .volume2 span:hover, .brand .volume2.active span { background-position: -89px -100px; }

		.brand .volume3 span { margin-top: 7px; width: 89px; height: 15px; background:url('http://a.espncdn.com/30for30/prod/assets/brand/brand_sprite2.jpg') top left no-repeat; background-position: 0 -116px; }
		.brand .volume3 span:hover, .brand .volume3.active span { background-position: -89px -116px; }
            
        .brand .shorts span { margin-top:7px; width: 89px; height: 15px; background:url('http://a.espncdn.com/30for30/prod/assets/brand/brand_sprite2.jpg') top left no-repeat; background-position: 0 -131px; }
        .brand .shorts span:hover, .brand .shorts.active span { background-position: -89px -131px; }
        
        .brand .soccer span { margin-top:7px; width: 89px; height: 15px; background:url('http://a.espncdn.com/30for30/prod/assets/brand/brand_sprite2.jpg') top left no-repeat; background-position: 0 -131px; }
        .brand .soccer span:hover, .brand .soccer.active span { background-position: -89px -131px; }
        
        .brand-presby {margin-bottom:5px; padding:5px 0px 0px 22px; width:120px; height:45px; background:url('http://a.espncdn.com/30for30/prod/assets/brand/presby_bg.png'); background-repeat:no-repeat; position:absolute; top:209px; left:25px;}
      
        /*  --------- BONUS CLIPS ---------  */
        .nav {
            background: url("http://a.espncdn.com/30for30/prod/assets/overlay_none.png") repeat scroll 0 0 transparent;
            height: 125px;
            left: 102px;
            position: absolute;
            top: 0;
            z-index: 100;
        }

        .nav .wrap {
            margin:0px;
            padding:0px;
            width:100%;
            height:107px;
            position:relative;
            top:-88px;          
            background: url("http://a.espncdn.com/30for30/prod/assets/item_repeat.png") repeat-x;
            cursor: pointer;
            }
        * html .wrap { padding: 0px; }          
        .item {
            height:97px;
            width: 130px;
            margin: 0 0 0 2px;
            float: left;
            background-color: #c2bfb6;
            position:relative;
            }
        .item:first-child { margin-left: 0px; } 
        .item h4 { padding: 5px; }  
        .item a img {
            border: none;
            display:block;
            position:relative;
            z-index:100;
            }
        .item.active { background-color: #a9342d; }
        .item.active a img { opacity: 0.4; filter:alpha(opacity=40); /* For IE */ }         
        .item a:hover .overlay_item { display:block; }
        .item.active a:hover .overlay_item { display:none; }
        .item .overlay_item{
            display:none;
            background:url("http://a.espncdn.com/30for30/prod/assets/overlay_black.png") repeat;
            position:absolute;
            top:0; 
            left:0;
            width:100%; 
            height:90px;
            z-index:110;                
            }   
            
    /*  --------- CAPTION OVERLAY ---------  */
        .gradient{
            cursor: pointer;
            width:1024px;
            height:540px;
            background:url("http://a.espncdn.com/30for30/prod/assets/gradient_reverse.png") repeat;
            display:none;
            z-index:40;
            position:absolute;
            bottom:35px;
            }
        .headline {  
            z-index:50;
            text-align:left;
            padding:20px 10px 20px 20px;
            width:43%;
            overflow:hidden;
            position:absolute;
            bottom:50px;
            }           
        .headline h1 { margin:0px; padding:0px; }
        .headline h2, .headline h4 { margin-left: 2px; }    
        .headline h4 { padding-bottom: 8px; }
        .headline p { border-top: #c2bfb6 solid 1px; margin-left: 2px; margin-top: 8px; padding-top: 5px; } 
            
            
/*  --------- TONIGHT STRIP ---------  */   
    .tonight { height: 40px; overflow:hidden; background:url("http://a.espncdn.com/30for30/prod/assets/tonight_repeat.jpg") repeat-x; }
    .tonight .innerWrapper {        
        text-align:center;
        width: 1200px;
        height: 20px;
        background-color: #c2bfb6;
        text-transform:uppercase;
        margin: 0px auto 0px auto;
        padding: 5px 0px 0px 0px;
        } 
    .tonight h5 { margin: 0px 20px 0px 0px; display:inline; }
    

    .tonight  span { display:inline-block; vertical-align:middle; margin: 3px 0 0 5px; border-style: none; }

    .tonight span.espn { width: 55px; height: 20px; background: url('http://a.espncdn.com/30for30/prod/assets/channel_sprite.png') top left no-repeat; background-position: 0 0; }
    .tonight span.espn:hover { background-position: -63px 0px; cursor: pointer; }
    
    .tonight span.espn2 { width: 55px; height: 20px; background: url('http://a.espncdn.com/30for30/prod/assets/channel_sprite.png') top left no-repeat; background-position: 0 -35px; }
    .tonight span.espn2:hover { background-position: -63px -35px; cursor: pointer; }
    
    .tonight span.espn3 { width: 55px; height: 20px; background: url('http://a.espncdn.com/30for30/prod/assets/channel_sprite.png') top left no-repeat; background-position: 0 -70px; }
    .tonight span.espn3:hover { background-position: -63px -70px; cursor: pointer; }    
    
    .tonight span.espnNews { width: 63px; height: 20px; background: url('http://a.espncdn.com/30for30/prod/assets/channel_sprite.png') top left no-repeat; background-position: 0 -105px; }
    .tonight span.espnNews:hover { background-position: -63px -105px; cursor: pointer; }
    
    .tonight span.classic { width: 50px; height: 20px; background: url('http://a.espncdn.com/30for30/prod/assets/channel_sprite.png') top left no-repeat; background-position: 0 -139px; }
    .tonight span.classic:hover { background-position: -63px -139px; cursor: pointer; }
    
    .tonight span.watch { width: 63px; height: 20px; background: url('http://a.espncdn.com/30for30/prod/assets/channel_sprite.png') top left no-repeat; background-position: 0 -175px; }
    .tonight span.watch:hover { background-position: -63px -175px; cursor: pointer; }
    
    .tonight span.espnU { width: 20px; height: 20px; background: url('http://a.espncdn.com/30for30/prod/assets/channel_sprite.png') top left no-repeat; background-position: 0 -210px; }
    .tonight span.espnU:hover { background-position: -63px -210px; cursor: pointer; }
    
    .tonight span.abc { width: 20px; height: 20px; background: url('http://a.espncdn.com/30for30/prod/assets/channel_sprite.png') top left no-repeat; background-position: 0 -245px; }
    .tonight span.abc:hover { background-position: -63px -245px; cursor: pointer; }

    
    
/*  --------- CONTENT AREA ---------  */    
    .content{   
        background-color: #fff;
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto;
        }
    .content .innerWrapper{ background-color: #fff; text-align: center; overflow: visible; }        
    .banner { margin: 10px 0 10px 0; }                  
                
                
            /*  --------- LEFT COLUMN ---------  */
                .left { float:left; margin: 15px 20px 0 0; width: 502px; text-align: left;}
                .left.series { width: 384px; } 
                
                .contentBlock{ overflow:hidden; padding: 10px 3px 10px 3px; }   
                .leftFloat { float:left; margin: 0px 15px 5px 0;}
                .rightFloat { float:right; margin: 5px 0 15px 15px;}
                
                    
                /* about */
                .left .about { 
                    height: 543px;
                    border-top: #999 solid 1px;
                    border-bottom: #999 solid 1px;
                    overflow:hidden;                    
                    margin: 0px 0px 20px 0;
                    }
                    .left .about p a {font-weight: bold; }
                 
                .left.series .about { max-height: 450px; }
                .left.series .about.soccer {max-height: 600px;}                       
                
                
                .left.film .about { height: 100%; border-bottom: none;}
                .left.film .about .contentBlock { padding: 20px 5px 10px 5px; border-bottom: #999 solid 1px; }  
                .left.film .about .contentBlock.first { padding-top: 10px; }
                .left.film .about .contentBlock.last { border-bottom: none; }
                .left.film .about img { border-top: none; width:134px;  }   
                .left.film .about img:hover{ border-top: none; }    
                
                .left.film h4 { padding-bottom: 5px; font-size: 15px;}
                
                .left.film .modHead { float:left; } 
                .left.film .presby { float:right; margin: 5px 0px 0px 0px; }        
                .left.film .presby img { border-top: none; height:40px; width: 175px; border-style: none; }
                .left.film .presby img:hover{ border-top: none;}
                
                
                    
                /*  --------- FB STREAM ---------  */       
                .filmStream { float: left; margin: 0px 0px 20px 0; }
                .filmStream .comments { width: 1024px; }                
                .comments { float: left; width: 502px; height: 797px; background:url("http://a.espncdn.com/30for30/prod/assets/fb_502.jpg") no-repeat; }    
                    
                    
            /*  --------- MIDDLE COLUMN ---------  */           
                .middle { float:left; margin: 15px 20px 0 0; overflow:hidden;  text-align: left;}
                .middle.home, .middle.film { width: 182px; }
                .middle.series { width: 300px; }
                                    
                    /* shorts */
                    .middle .shorts { 
                        background:url("http://a.espncdn.com/30for30/prod/assets/film_repeat.jpg") repeat-y;
                        /* border-bottom: #a9342d solid 5px; */
                        height: 843px;
                        margin: 0px 0px 20px 0;
                        overflow:hidden;
                        background-color: #000;
                        border-style: none; 
                        }   
                    .shorts .header a img{ border-style: none;}
                    .shorts .header { padding-bottom: 15px; }
                    .shorts .tile.small { margin-bottom: 10px; margin-left: 8px;}

                    /* soccer */
                    .middle.series.soccer {
                        border-top: #999 solid 1px;
                        border-bottom: #999 solid 1px;
                    }

                    /* director */      
                    .director {
                        background:url("http://a.espncdn.com/30for30/prod/assets/directorCred_repeat.jpg") repeat-y;
                        height: 100%;
                        margin: 0px 0px 20px 0;
                        overflow:hidden;                                
                        background-color: #000;                             
                        }   
                    .director .header { border-bottom: #a9342d solid 5px;}
                    .director .contentBlock { height: 100%; margin: 0px 10px 0 10px; }                              
                    .director h2 { padding: 3px 0 2px 0; }
                    .director h5 { padding: 0px 0 3px 0; }
                    .director h5 img { margin-left: -7px; }
                                                
                    /* credits - headlines */   
                    .credits {
                        background:url("http://a.espncdn.com/30for30/prod/assets/directorCred_repeat.jpg") repeat-y;
                        height: 100%;
                        padding: 0px 10px 10px 10px;
                        overflow:hidden;                    
                        background-color: #000;
                        }   
                    .credits h5 { padding: 2px 0 2px 0; }           
                    .credits p { margin-bottom: 7px; }  
                    .credits h3 img { margin: -7px 0 0 -7px; }
                    
                    
                        
                    /* social */        
                    .middle .social {   
                        height: 450px;              
                        border-top: #999 solid 1px;
                        border-bottom: #999 solid 1px;
                        overflow:hidden;
                        }
                    /* bird */
                    .mod-header img { border-style: none; margin: 16px 12px 0px 3px !important; }
                    .middle .social .mod-header img { margin: 16px 12px 0px 3px !important; }

                    .mod-open-list .mod-content ul li { background-color: #f0efeb; padding: 3px 0 3px 0 !important; }
                    .mod-open-list .mod-content ul li.alt { background-color: #fff; padding: 3px 0 3px 0 !important; }

                    .mod-content { margin: 10px 3px 5px 3px !important; }   
                    .mod-content ul {
                        width: 100% !important;
                        list-style-type: none;
                        padding: 0px !important;
                        height: 294px !important;
                        overflow:hidden !important;
                        overflow:scroll !important;
                        overflow-y: scroll !important;
                        overflow-x: hidden !important;      
                        border-top: #999 solid 1px;
                        border-bottom: #999 solid 1px;
                        }
                        .middle .social .mod-content ul {   
                            height: 375px !important;
                            }
                    .mod-content ul li.first.ad { display: none !important; }
                    .mod-content img { float:left; padding: 14px 10px 14px 0 !important; border-style: none; }
                    .mod-footer { float:right; padding: 0px 5px 0 0 !important; }

                        
                            
            /*  --------- RIGHT COLUMN ---------  */
                .right { float:left; margin: 15px 0 0 0; width: 300px; text-align: left;}                   
                
                    /* purchase */
                    .converse .social {     
                        border-top: #999 solid 1px;                             
                        height: 35px;   
                        margin: 0px 0px 10px 0;     
                        
                        }       
                    .converse .modHead { float:left; margin-right: 10px; }
                    
                    .converse .social .fb-like {
                        border-style: none;
                        padding: 12px 10px 0px 0px;
                    }
                    .converse .social .twitter-share-button {
                        border-style: none;
                        padding: 12px 10px 0px 0px;
                    }

                
        
                    /* purchase */
                    .purchase {                                 
                        height: 133px;  
                        margin: 0px 0px 20px 0;         
                        border-top: #999 solid 1px;
                        border-bottom: #999 solid 1px;
                        overflow:hidden;
                        position:relative;
                        }
                    .purchase .contentBlock{ overflow:visible; padding-top: 5px;}
                    .purchase img { float:right; margin: -30px 0 0 15px; }
                    .purchase .purchaseLinks { position: absolute; bottom: 0px; }
                    .purchase p a { margin-right: 15px;}
                    
                    /* ad */    
                    .right .ad { height: 250px; margin: 0px 0px 20px 0; }
                        
                    /* extra */ 
                    .right .extra {                             
                        height: 370px;              
                        border-top: #999 solid 1px;
                        border-bottom: #999 solid 1px;
                        overflow:hidden;
                        }                       
                    .right .twitter ul { height: 295px; }
                        
                    /*repeat texture on film index */
                    .texture { margin-top: 20px; float: right; width: 502px; height: 400px; display: none; background:url("http://a.espncdn.com/30for30/prod/assets/fb_repeat.png") repeat;}
                        
            /*  --------- TILES ---------  */
                .tile { 
                    text-align: left;
                    float: left;
                    width: 154px;
                    height: 250px;
                    margin: 0px 20px 20px 0;
                    position:relative;
                    overflow:hidden;
                    background:url("http://a.espncdn.com/30for30/prod/assets/overlay_none.png") repeat;
                    }
                    .tile.small {
                        width: 134px;
                        height: 170px;
                        margin: 10px 20px 10px 0;
                        left: 24px;
                        }
                        .tile.small img { border-bottom: #a9342d solid 5px; }
                        .tile.small img:hover { border-bottom: #86a2a6 solid 5px; }
                        
                .tile.last { margin-right: 0px; }               
                .tileContainer {
                    position: absolute; 
                    bottom: 25px;
                    width:154px;
                    height:225px;
                    overflow:hidden; 
                    }   
                    .tile.small .tileContainer {
                        bottom: 0px;
                        width:134px;
                        height: 100px;
                        }   
/*changed */    .tileOver { 
                    border-top: #a9342d solid 5px;
                    background:url("http://a.espncdn.com/30for30/prod/assets/overlay_black.png") repeat;
                    width:154px;
                    height: 150px;
                    position: absolute; 
                    bottom: -110px;         
                        }   
                    .tile.small .tileOver { 
                        border: none;
                        width:134px;
                        height: 100px; 
                        top: 10px;          
                        }   
/*changed */    .tileOver h4 { margin: 5px 10px 0px 10px; position: absolute; bottom: 113px; }
                    .tile.small h4 { position: relative; top: 0px; margin: 5px 5px 0px 5px;}
                    
                .tileOver p { padding: 0 10px; position: absolute; top: 45px; } 
                    .tile.small p { position: relative; top: 2px;  padding: 0 5px;}
                    
                
                /* SOCIAL */        
                .tileSocial {
                    position: absolute;  
                    bottom: 0px;
                    background:url("http://a.espncdn.com/30for30/prod/assets/overlay_black.png") repeat;
                    width: 154px;
                    height: 25px;                   
                    }   
                .tile.comingSoon .tileSocial { background-color: #000000; }                
                .tileSocial span { display:block; }
                .tileSocial .fb, .tileSocial .twitter { float:right; height: 15px; margin:5px 5px 5px 0px; }
                
                /* facebook */
                .tileSocial .fb span { width: 16px; height: 15px; background:url('http://a.espncdn.com/30for30/prod/assets/film-tile-social.jpg') top left no-repeat; background-position: 0 0; }
                .tileSocial .fb span:hover { background-position: 0 -15px; cursor: pointer; }
                
                /* twitter */
                .tileSocial .twitter span { width: 16px; height: 15px; background:url('http://a.espncdn.com/30for30/prod/assets/film-tile-social.jpg') top left no-repeat; background-position: 0 -30px; }
                .tileSocial .twitter span:hover { background-position: 0 -45px; cursor: pointer; }  
                    
                /* Coming Soon */
                .tile.comingSoon .tileContainer { background:url("http://a.espncdn.com/30for30/prod/assets/overlay_black.png") repeat; }
                .tile.comingSoon .tileContainer .releaseState { text-align: center; position:relative; top:70px; }
                .tile.small .releaseState { position:relative; top: 30px; left: 15px; }
    
                                        
        
                
                
                
            
/*  --------- FOOTER ---------  */  
    .push { height: 100px; }
    .footer{
        background:url("http://a.espncdn.com/30for30/prod/assets/footer_repeat.jpg") repeat-x;
        height: 375px;
        width:100%;
        background-color: #000;
        margin: 50px 0px 0px 0px;
        padding-top:20px;
        text-align: center;
        }
    .footer .innerWrapper { overflow:visible; position:relative; }          
    
    .footer .logo span{ 
        background: url('http://a.espncdn.com/30for30/prod/assets/footer_logo.jpg') top center no-repeat; background-position: 0 0;
        height:85px;
        width:110px;
        position:absolute;
        top: 15px;
        left: 470px;
        }
        .footer .logo span:hover { background: url('http://a.espncdn.com/30for30/prod/assets/footer_logo_hover.jpg') top center no-repeat; background-position: 0 0; cursor: pointer;  }
        
    .footer .returnUp  span { height:40px; width:110px; position:absolute; top: -4px; right: 0px; background: url('http://a.espncdn.com/30for30/prod/assets/footer_rtt.jpg') top center no-repeat; background-position: 0 0;}
    .footer .returnUp span:hover { background: url('http://a.espncdn.com/30for30/prod/assets/footer_rtt_hover.jpg') top center no-repeat; background-position: 0 0;}
    
    
    .footer .moreContent { border-top: 1px solid #262626;border-bottom: 1px solid #262626;
        overflow:hidden;
        height: 160px;
        width: 1024px;
        position:absolute;
        top: 120px;
        padding: 20px 0 0 20px;
        margin-bottom: 15px;
        }
    .footer .contentBlock  {
        float:left;
        width: 220px;
        margin-bottom: 20px;
        text-align: left;
        }
    .footer .contentBlock img { width: 145px; height: 20px; padding-bottom: 8px; }
    .footer .contentBlock.first { padding: 0 20px 0 20px; }
    .footer .contentBlock.second { padding: 0 25px 0 0; }
    .footer .contentBlock.third { border-left: 1px solid #262626;  padding: 0 20px 0 40px; }
    .footer .contentBlock.fourth { width: 150px; padding: 0 0 0 40px; }
    
    
    
    .footer .contentBlock a, .footer .contentBlock .current { display:block; margin: 0 0 1px 4px;}
    
    .footer .fLine {    
        width:100%;
        /*border-top: #333 solid 1px;*/
        padding: 15px;  
        position:absolute;
        bottom: 20px;
        right: 0px;
        }
        
                    
/*  --------- GLOBAL text-formatting ---------  */

    h1 { 
        font: 40px/42px 'JosefinSansStdLight', Arial, sans-serif;
        letter-spacing: 0px;
        color:#c2bfb6; 
        text-shadow: 2px 2px 5px #000; 
        }
    
    * html h1 {  padding-bottom: 2px; color: #000; zoom: 1; filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=4); }
     h1 span { color:#86a2a6; }     
    
    
    h2 { font: 13px/16px  'Karla', Arial, sans-serif; font-weight: bold; letter-spacing:Â 1px; color:#86a2a6; }
    .director h2 { font: 16px/19px 'Karla', arial, sans-serif; }
    
    h3, .mod-header h4 { font: 20px/22px 'KarlaBold', arial, sans-serif;  color: #333; padding: 15px 2px 0px 0; color: #333333 !important; }
    .mod-header h4 { padding: 0px; }
    .modHead.open { margin: -17px 0 8px 0; text-align: left; float:left;}
    .credits h3 { color: #fff; padding-bottom: 3px;}
    
    h4 { font: 13px/15px 'KarlaBold', arial, sans-serif; color: #86a2a6; }
    
    h5 { font: 11px/11px Arial,sans-serif; font-weight: bold; color: #333; }
    h5.header, .middle h5, .releaseState h5 { font: 12px/12px Arial,sans-serif; font-weight: bold; letter-spacing:Â 1px; color:#666; }
    .releaseState h5 { color: #666; }
    .director h5 { color: #fff; padding-bottom: 8px; }
    
    .contentBlock .caption { font: 12px/13px  'Karla', Arial, sans-serif; color: #999; width: 250px;}
    .contentBlock .credit { text-align:right; font: 9px/10px  Arial, sans-serif; color: #999; margin: 5px 0 5px 0; }
    
    .footer { color: #343434; font: 12px/16px 'Karla', arial, sans-serif; }
    .footer .fLine { font: 10px/10px Arial, sans-serif; }   
    
    
    /*  --- body ---  */
    p, li { font: 12px/15px 'Karla', Arial, sans-serif; color: #333; margin-bottom:10px; }  
    .headline p, .tile p, .shorts p { color: #c2bfb6; } 
    .shorts p { padding-top: 2px; }
    .footer p { color: #E1E0DC; }
    .credits p, .director p { color: #c2bfb6; font: 11px/15px 'Karla', Arial, sans-serif;}  
    .credits h5 { color: #86a2a6; font: 11px/15px 'Karla', Arial, sans-serif;font-weight: bold; }
                            
    /*  --- links ---  */
    a:hover, .tile a, .director a, .director p a:hover { color: #86a2a6 !important; }
    a, .modHead a:hover, .mod-header a:hover, .tile a:hover, .footer .fLine a:hover, .director a:hover, .director p a { color: #a9342d !important; text-decoration: none;}
    .footer .fLine a { color: #561b17 !important; }
    .modHead a, .mod-header h4 a { color: #333 !important; text-decoration: none; }

.videoplayer {
    height: 576px;
    width: 1024px;
    position: absolute;
    display: block;
    overflow: hidden;
}
.videoplayer-show {
    height: 576px;
    position: inherit;
}
                
                

/*----media queries----*/



/* DESKTOP RESPONSE */  

    /* large */     
    @media all and (min-width: 728px) {
        .innerWrapper { width: 1024px; }
        .mem, .lights {height: 576px; width: 100%;} 
        #videoPlayer, .videoplayer {width: 1024px;}
        #videoPlayer, .videoplayer-show { height: 576px;  }     
        }
        
    /* medium */
    @media all and (max-width: 727px) and (min-width: 481px) {
        .innerWrapper { width: 100%; }
        .content .innerWrapper { width: 535px;}
        .tonight .innerWrapper { width: 100%; }
        .tonight h5.header, .tonight h5.thirdAir{ display: none; }
        .tonight h5 { margin-right: 7px; }      
        #videoPlayer, .videoplayer {width: 688px;}
        #videoPlayer, .videoplayer-show { height: 387px; width: 688px; }
        .mem, .lights {height: 387px;  width: 688px;}
        .mem { background-size: 100% auto; }
        .headline p, .headline h4 { display: none; }
        .headline h1 { font: 30px/32px 'JosefinSansStdLight', Arial, sans-serif; }
        .headline { bottom: 200px;}
        .lights2 {top: 418px; width: 688px;}
        .brand {left: -30px; }
        .nav {left: 130px;  } 
        .nav .wrap { width: 394px; overflow:hidden; height:97px; }
        .banner { display: none; }
        .left, .middle, .right { margin-left: 20px; }
        .left.series, .middle.series, .right { width: 502px; }
        .left.series .about { border-bottom: none;  height: 100%;}
        .right .converse .social { border-top: none; }
        .right .ad { margin-left: 20%; }        
        .tile, .modHead.open { margin-left: 20px;  margin-right: 0px; }
        .left .tile { margin-left: 0px;  margin-right: 20px;}
        .left .tile.last { margin-right: 0px; }
        .middle.home { width: 500px; height: 270px;}
        .middle.film { width: 500px; }
        .director, .credits { background: #000; }
        .director .header { text-align: center; }
        .footer { height: 530px; width: 100%;}
        .footer .innerWrapper { width:535px; }  
        .footer .logo span { left: 180px;  top: 20px;}
        .footer .returnUp  span  {right: 10px;}
        .footer .moreContent {width: 480px; height: 310px;  padding-left: 50px;}
        .footer .contentBlock.first { padding: 0 10px 0 10px; height: 150px;}
        .footer .contentBlock.second { padding: 0 0 0 10px; height: 150px; }
        .footer .contentBlock.third { border-left: none;  padding: 0 10px 0 10px; height: 150px; }
        .footer .contentBlock.fourth { padding: 0 0 0 10px; height: 150px; }        
        .footer .fLine { width: 90%;  }
        }   
        
    /* small */ 
    @media all and (max-width: 480px) {
        .gradient {height: 220px;}
        .content .innerWrapper, .innerWrapper { width: 100%; }
        .tonight .innerWrapper { width: 100%; }
        .tonight h5.header, .tonight h5.secondAir, .tonight h5.thirdAir{ display: none; }
        .tonight h5 { margin-right: 7px; }
        #videoPlayer, .videoplayer {width: 100%;  }
        #videoPlayer, .videoplayer-show { height: 220px; width: 100%; }
        .mem, .lights {height: 220px; width: 100%;}
        .mem { background-size: 100% auto; }        
        .headline p, .headline h4 { display: none; }
        .headline h1 { font: 16px/18px 'JosefinSansStd', Arial, sans-serif; }
        .headline h2 { font: 10px/12px  'Karla', Arial, sans-serif; font-weight: bold; letter-spacing:Â 1px; color:#86a2a6; }
        .headline { right: 75px; width: 40%; bottom: 380px; position:relative;} 
        .lights2 {top: 251px; width: 100%;}     
        .brand { left: -3px; height: 176px; width: 107px; padding: 8px 0 0 0px; background: url('http://a.espncdn.com/30for30/prod/assets/brand_small.png') top center no-repeat;}                        
        .brand .espnFilms span { margin: 2px 0 0 18px; width: 68px; height: 16px; background:url('http://a.espncdn.com/30for30/prod/assets/brand_sprite_small.jpg') top left no-repeat;  background-position: 0 -3px;}
        .brand .espnFilms span:hover { background-position: -70px -3px; }                                      
        .brand .thirty4thirty span { margin: 6px 0px 3px 18px; width: 68px; height: 25px; background:url('http://a.espncdn.com/30for30/prod/assets/brand_sprite_small.jpg') top left no-repeat;  background-position: 0 -20px;}
        .brand .thirty4thirty span:hover, .brand .thirty4thirty.active span { background-position: -70px -20px;}                 
        .brand .buick span { margin: 0 0px 7px 19px; width: 68px; height: 18px; background:url('http://a.espncdn.com/30for30/prod/assets/brand_sprite_small.jpg') top left no-repeat;  background-position: 0 -47px;}
        .brand .buick span:hover { background-position: -70px -47px; }                                            
        .brand .volume1 span { margin: 0 0 5px 19px; width: 68px; height: 12px; background:url('http://a.espncdn.com/30for30/prod/assets/brand_sprite_small.jpg') top left no-repeat;  background-position: 0 -67px; }
        .brand .volume1 span:hover, .brand .volume1.active span { background-position: -70px -67px; }                              
        .brand .volume2 span { margin: 0 0 4px 19px; width: 68px; height: 12px;  background:url('http://a.espncdn.com/30for30/prod/assets/brand_sprite_small.jpg') top left no-repeat;  background-position: 0 -80px; }
        .brand .volume2 span:hover, .brand .volume2.active span { background-position: -70px -80px; }                                              
        .brand .shorts span { margin: 0 0 7px 19px; width: 68px; height: 12px;  background:url('http://a.espncdn.com/30for30/prod/assets//brand_sprite_small.jpg') top left no-repeat;  background-position: 0 -92px;}
        .brand .shorts span:hover, .brand .shorts.active span { background-position: -70px -92px; }     
        .brand .soccer span { margin: 0 0 7px 19px; width: 68px; height: 12px;  background:url('http://a.espncdn.com/30for30/prod/assets/brand_sprite_small.jpg') top left no-repeat;  background-position: 0 -104px;}
        .brand .soccer span:hover, .brand .soccer.active span { background-position: -70px -104px; }  
        
        .brand-presby {display:none; margin-bottom:5px; padding:5px 0px 0px 22px; width:120px; height:45px; background:url('http://a.espncdn.com/30for30/prod/assets/brand/presby_bg.png'); background-repeat:no-repeat; position:absolute; top:209px; left:25px;}
     
        
        .nav {left: 130px; display: none;} 
        .nav .wrap { width: 262px; overflow:hidden; height:97px; }
        .banner { display: none; }      
        .filmStream  { display: none; }
        .left, .left.series, .middle.series, .right { width: 348px;}
        .left.series .about { border-bottom: none; height: 100%;}
        .right .converse .social { border-top: none; }
        .rightFloat { display:none; }
        .middle.home { width: 348px; height: 470px;}
        .shorts {width: 368px;}
        .middle.film { width: 348px; }      
        .director, .credits { background: #000; }
        .director .header { text-align: center; }       
        .left .about { width: 348px; height: 100%;}
        .left .caption {padding-bottom: 10px;}
        .tile, .modHead.open { margin-left: 20px;  margin-right: 0px; }
        .left .tile.last { display: none; }
        .left.home .about, .left.film, .left.series { margin-left: 20px; }
        .middle { margin-left: 20px;}
        .right { margin-left: 20px;}
        .right .ad { margin-left: 7%; }     
        .footer { height: 770px; width: 100%;}
        .footer .innerWrapper {width:360px;}
        .footer .logo span { left: 80px;  top: 20px;}
        .footer .returnUp  span  {right: 5px;}
        .footer .moreContent {width: 300px; height: 550px; }
        .footer .contentBlock.first { padding: 0 20px 0 30px; }
        .footer .contentBlock.second { padding: 0 20px 0 30px; }
        .footer .contentBlock.third { border-left: none;  padding: 0 20px 0 30px; }
        .footer .contentBlock.fourth { padding: 0 20px 0 30px; }
        .footer .fLine { width: 90%; text-align: left; }
        }
        
/* MOBILE RESPONSE */

    /* iPad */  
    @media screen and (max-device-width: 1024px) and (min-device-width: 728px) {
        .content .innerWrapper, .innerWrapper { width: 1024px; }
        .left { padding-left: 10px; margin-right: 10px; }
        .middle { margin-right: 10px; }
        .right {padding-right: 10px; }
        .tonight { width: 1024px; }
        #videoPlayer, .videoplayer {width: 1024px; }
        .mem, .lights {  padding: 0px;}
        .lights2 { width: 1024px;}      
        .banner { width: 502px; overflow:hidden;}
        .brand {left: -30px; }  
        .nav {left: 130px; }        
        .modHead.open { margin-left: 10px; } 
        .tile { margin: 0 5px 20px 10px; }      
        .left .modHead.open { margin-left: 0px; } 
        .left .tile { margin: 0 20px 20px 0px; }
        .left .tile.last { margin-right: 0px; }     
        .footer, .footer .innerWrapper {width:1024px; } 
        .footer .moreContent { padding: 20px 0px; }     
        }       
        
    /* iPhone */    
    @media screen and (max-device-width: 480px) {
        .gradient {height: 270px;}
        .outerWrapper { width: 480px; }
        .tonight .innerWrapper { width: 100%; }
        .tonight h5.header, .tonight h5.secondAir, .tonight h5.thirdAir{ display: none; }
        .tonight h5 { margin-right: 7px; }
        .filmStream  { display: none; }
        #videoPlayer, .videoplayer {width: 480px;  height: 270px; }
        #videoPlayer, .videoplayer-show { height: 270px; width: 480px; }
        .mem, .lights {height: 270px; width: 480px;}
        .mem { background-size: 100% auto; }
        .headline p, .headline h4 { display: none; }
        .headline h1 { font: 25px/27px 'JosefinSansStdLight', Arial, sans-serif; }
        .headline { right: 10px; width: 40%; padding: 190px 3px 20px 5px; bottom: 10px; left: 10px; position:relative;}           
        .lights2 {top: 251px; width: 480px;}
        .lights, .lights2 { display: none; } 
        .brand { left: -3px; height: 160px; width: 107px; padding: 8px 0 0 0px; background: url('http://a.espncdn.com/30for30/prod/assets/brand_small.png') top center no-repeat;}                        
        .brand .espnFilms span { margin: 2px 0 0 18px; width: 68px; height: 16px; background:url('http://a.espncdn.com/30for30/prod/assets/brand_sprite_small.jpg') top left no-repeat;  background-position: 0 -3px;}
        .brand .espnFilms span:hover { background-position: -70px -3px; }                                      
        .brand .thirty4thirty span { margin: 6px 0px 3px 18px; width: 68px; height: 25px; background:url('http://a.espncdn.com/30for30/prod/assets/brand_sprite_small.jpg') top left no-repeat;  background-position: 0 -20px;}
        .brand .thirty4thirty span:hover, .brand .thirty4thirty.active span { background-position: -70px -20px;}                 
        .brand .buick span { margin: 0 0px 7px 19px; width: 68px; height: 18px; background:url('http://a.espncdn.com/30for30/prod/assets/brand_sprite_small.jpg') top left no-repeat;  background-position: 0 -47px;}
        .brand .buick span:hover { background-position: -70px -47px; }                                            
        .brand .volume1 span { margin: 0 0 5px 19px; width: 68px; height: 12px; background:url('http://a.espncdn.com/30for30/prod/assets/brand_sprite_small.jpg') top left no-repeat;  background-position: 0 -67px; }
        .brand .volume1 span:hover, .brand .volume1.active span { background-position: -70px -67px; }                              
        .brand .volume2 span { margin: 0 0 4px 19px; width: 68px; height: 12px;  background:url('http://a.espncdn.com/30for30/prod/assets/brand_sprite_small.jpg') top left no-repeat;  background-position: 0 -80px; }
        .brand .volume2 span:hover, .brand .volume2.active span { background-position: -70px -80px; }                                              
        .brand .shorts span { margin: 0 0 7px 19px; width: 68px; height: 12px;  background:url('http://a.espncdn.com/30for30/prod/assets/brand_sprite_small.jpg') top left no-repeat;  background-position: 0 -92px;}
        .brand .shorts span:hover, .brand .shorts.active span { background-position: -70px -92px; }      
        .nav {left: 130px; display: none;} 
        .nav .wrap { width: 262px; overflow:hidden; height:97px; }
        .banner { display: none; }
        .left, .left.series, .middle.series, .right, .left .about { width: 440px;}
        .left.series .about { border-bottom: none;  height: 100%;}
        .right .converse .social { border-top: none; }
        .rightFloat { display:none; }
        .middle.home { width: 440px; height: 470px;}
        .shorts .tile.small { margin-left: 35px; }
        .middle.film { width: 440px; }      
        .director, .credits { background: #000; }
        .director .header { text-align: center; }   
        .tile, .modHead.open { margin-left: 20px;  margin-right: 0px; }
        .left .tile.last { display: none; }
        .left.home .about, .left.film, .left.series { margin-left: 20px; }
        .middle { margin-left: 20px;}
        .right { margin-left: 20px;}
        .right .ad { margin-left: 0px; }
        .footer { height: 770px; width: 480px;}
        .footer .innerWrapper {width:440px;}
        .footer .logo span { left: 120px;  top: 20px;}
        .footer .returnUp  span  {right: 0px;}
        .footer .moreContent {width: 440px; height: 550px; }
        .footer .contentBlock.first { padding: 0 20px 0 80px; }
        .footer .contentBlock.second { padding: 0 20px 0 80px; }
        .footer .contentBlock.third { border-left: none;  padding: 0 20px 0 80px; }
        .footer .contentBlock.fourth { padding: 0 20px 0 80px; }
        .footer .fLine { width: 90%; text-align: left; }
        }