/* ================================================================================= */
/* ================================================================================= */
/* ================================================================================= */
/* ======================== Mobile ================================================= */
@media only screen /*and (min-width:200px)*/ and (max-width:480px)
{

    /* body#home_page*/    /* Min=height is used to place the footer on the mobile homepage */
    /* {
                                                min-height:470px;
                                            }*/

    #wrapper
    {
        position: relative;
    }

    .site_header /*This makes the content butt agains the header bar. It is reversed in Desktop media query. */
    {
        height: 48px;
    }

    /*Component: Header bar ........... */




    #utility_nav .container
    {
        height: 47px;
    }

    #utility_nav /*6 Aug - from above*/
    {
        text-align: right;
        height: 47px; /* Changed from 32 to 48 */
        width: 100%;
        position: absolute /*fixed*/;
        top: 0px;
        left: 0px;
        z-index: 300 /*60*/;
        background: url("../images/backgrounds/site_footer.jpg") no-repeat scroll left bottom;
    }

    #utility_nav ul /* Removes top bar of navigation except search */
    {
        display: none;
    }

    /*#footer_nav a,*/    #utility_nav a
    {
        padding: 0 0px 0 0px; /* Reduced padding from legacy css file */
    }

    /* #search_form*/    /* 6 Aug - from above*/
    /*  {
                            margin: 0;
                            padding: 12px 5px 0 0;*/    /*top & ;right margins increased */
    /* clear: both;
                        }*/

    /* Component: Slide down search input ............ */
    div#search_form
    {
        background-color: /*#330804*/white;
        border-bottom: 1px solid rgb(153, 153, 153);
        border-top: 1px solid rgb(255, 255, 255);
        width: 100%;
        display: none;
        height: 47px;
        position: absolute;
        top: 47px;
        margin: 0px;
        /*margin:47px */
        padding: 9px 12px 0px 12px;
    }
    
    div#search_form.show
    {display:block;}

    div#search_invocation
    {
        width: 30px;
        height: 40px;
        position: absolute; /*left: 90%;*/
        right: 11px;
        top: 4px; /*float: right;*/
        cursor: hand;
        cursor: pointer;
    }

    .magnifying_glass /*jQuery places magnifying_class icon on upper-right of header */
    {
        background-image: url(../images/stylesheet/icon-search2.png);
        background-repeat: no-repeat;
        background-position: center center;
    }

    .xx /*jQuery places X on hamburger menu dt where down-arrow had been */
    {
        background-image: url('../images/stylesheet/icon_dropdown_x.png');
        background-repeat: no-repeat;
        background-position: center center;
    }

 /*   input#TopUtilityMenu1_q
    {
        background-color: #3b1100;
        width: 100%;*/
       /* border:none;*//*1px solid rgb(186, 180, 171)*/
        /*width: 50%;*/
        /*border-bottom: 1px solid rgb(186, 180, 171);
        border-top: 1px solid rgb(186, 180, 171);*/
       /* display: inline;
        float: left;
        height: 28px;
        line-height: 28px;
        margin: 0px;
    }*/

 /*   #TopUtilityMenu1_btnSearch
    {
        height: 28px;
        width: 28px;
    }*/
    
    .search_terms
    {
        color:Black;
        background:url(../images/SearchLabelDark2.gif) 6px 7px no-repeat;
        width:100%;
        margin-right:-22px
        }
        
 /*   .SearchPanel
    {
        border:none;
        }*/

/* .search_terms.search_element {
                    border-bottom: 1px solid rgb(186, 180, 171);
                    border-top: 1px solid rgb(186, 180, 171);
                    display: inline;
                    float: left;
                    height: 24px;
                    line-height: 24px;
                    margin: 0px;
                    width:50%
                }*/



    /* Component: #bottom_nav for hamburger menu ........... */    /* max-height is set in both Mobile and Tablet media queries for "overflow:scfoll" purposes */
    /*  #bottom_nav
                        {
                            max-height: 300px;
                        } */

    /*   #bottom_nav .container ul li dl dt*/    /* this is the block that contains the major menu items - where the <a> has been disabled */
    /*  {
                            height: 32px;*/    /* Reduced for mobile so entire menu shows at one time */
    /* border-top: 1px solid #ababab;
                        }
                    */







    /* Re-formatting: Width ........... */

    section img /* for all images but those in the right rail */
    {
        margin: 0 /*38px 0 10px*/;
        width: 100%;
        height: auto;
    }

    #main_sidebar img /* for imaages in right rail */
    {
        margin: 0 10px 0 0px;
        width: auto;
        height: auto;
        clear: both;
    }
    /* Width - END */



    #main_nav img /* img[src="/images/logo.png"]*/ /* Prevents large (desktop) logo from appearing */
    {
        display: none;
    }

    /* Component: Slideshow ........... */
    #slideshow
    {
        margin-top: 47px;
        width: 100%; /*position: relative;         top: 47px;*/
        height: auto; /* top:-48px;*/
        left: auto;
        background-color: #dddddd; /* min-height:585px;*/
    }

    #slideshow a
    {
        background-image: none;
        font-size: 0.8rem;
        color: #333333;
        font-weight: normal;
        line-height: 0.95rem;
        padding: 0px 10px 10px 140px;
        display: block;
    }

    .slide /* This is the class for hero_2 - hero_4 */
    {
        color: #ffffff;
        margin: 0; /*padding:10px;*/
        padding: 0;
        top: auto;
        left: auto;
        position: relative; /* max-height:100px;*/ /*height: 95px;*/
        cursor: hand;
        cursor: pointer; /* set cursor to show that the whole div is clickable for the mobile version */
    }

    .slide h2
    {
        font-size: 0.8rem;
        color: #333333;
        font-weight: bold;
        line-height: 0.95rem;
        padding: 15px 10px 10px 140px;
        margin: 0px; /*position:relative;         top:10px;         left:140px;*/
    }

    .slide h3
    {
        display: none;
    }
    /*   .slide a
                                    {
                                        border: 2px solid #ffffff;
                                        margin: 12px 0 12px 12px;
                                        padding: 0;
                                        position: relative;
                                        top: 065px;
                                    }*/
    /* NOTE: Footer for mobile homepage is adjusted in Home.aspx at <footer id="site_footer" style="position:absolute;left:0px;bottom:-25px;"> */

    div#hero_1
    {
        width: 100%; /*min-width: 320px;         min-height: 225px;*/
        margin-top: 0;
        padding: 0;
        position: relative; /* top: 75px;*/
        background-color: rgb(41,6,3);
    }

    div#hero_1 h2
    {
        color: #ffffff;
        font-size: 1.1rem;
        line-height: normal;
        font-weight: 200;
        text-transform: uppercase; /*position: absolute;         top: 80%;         left: -0px;*/
        display: block;
        margin-left: 0;
        margin-top: 0px;
        padding: 10px 37px 10px 10px; /*5px 20% 0 5px*/
        width: 80%;
        background: url('/images/stylesheet/homepage_banner_link_arrow_mobile_first.png') no-repeat right center; /*homepage_banner_link_arrow.png*/
        border-right: 10px solid transparent; /* tkm - trick to get the background arrow image 10px from the right*/
        background-color: rgba(0,0,0,0.3);
        position: absolute;
        bottom: 20px;
    }

    div#hero_1 a
    {
        display: none; /*font-size: 0.9rem;         display: inline-block;         font-size: 5px;*/ /* Text is not seen, just fills out block */ /*color: rgba(255,0,0,0.0);*/ /* Text is made transparent */ /* line-height: 6px;         width: 100px;         height: 50px;         position: absolute;         top: 170px;         left: 60%;         margin: 0;*/
    }

    /*  div#hero_1 a:after
                                {
                                    content: "<br>";
                                    content: url('icon-hero1-arrow.png');
                                    display: inline-block;
                                    width: 20px;
                                    height: 18px;
                                    margin-bottom: 7px;
                                    padding: 6px 0 4px 5px;
                                    border-left: 1px solid black;
                                }

                                div#hero_1 a:hover
                                {
                                    color: rgba(0,0,0,0.0);
                                } */

    /*    div#hero_2, div#hero_3, div#hero_4
                                            {
                                                width:115px;
                                                height:75px;
                                                border:2px solid #ffffff;
                                                margin:12px 0 12px 12px;
                                                padding:0;
                                                position:relative;
                                                top:065px;
                                            }*/

    /*   div#hero_2 h2, div#hero_3 h2, div#hero_4 h2
                                            {
                                                font-size:0.8rem;
                                                color:#333333;
                                                font-weight:200;
                                                text-transform:uppercase;
                                                position:relative;
                                                left:110%;
                                                top:-0px;
                                                display:inline-block;
                                                width:168px;
                                                line-height:0.95rem;*/    /* Keep the same line-height for the <a> */
    /*}*/

    div#hero_2 a:hover, div#hero_3 a:hover, div#hero_4 a:hover
    {
        color: #333333;
    }

    /*    div#hero_2 a, div#hero_3 a, div#hero_4 a
                                        {
                                            font-size:0.8rem;
                                            display:inline-block;
                                            position:absolute;
                                            left:-144px;
                                            top:-0px;
                                            min-width:310px;*/
    /* width:100%;*/
    /* height:80px;
                                            padding-left:140px;
                                            padding-top:40px;
                                            color:#333333;
                                            border-bottom:2px groove #eeeeee;
                                            line-height:0.95rem;*/    /* Keep the same line-height for the h2 */
    /*  }*/

    /*  div#hero_1 h3, div#hero_2 h3, div#hero_3 h3, div#hero_4 h3*/



    #slide_pager
    {
        display: none;
    }


    /*   #home_page #site_footer
                        {
                            margin: 0;
                            clear: both;
                        } */

    #home_wrapper
    {
        position: static;
    }

    /* Component: News ticker ........... */
    #news_ticker /* Not shown on mobile devices */
    {
        display: none;
    }

    /* Component: Mobile-only structure ........... */
    .mobile_only
    {
        width: 100%;
        max-width: 480px;
        min-width: 320px;
        margin: auto;
    }
    .mobile_only h1
    {
        width: inherit;
        font-family: arial,verdana,sans-serif;
        font-family: 'CabinRegular';
        src: url('../type/Cabin-Regular-webfont.eot');
        src: url('../type/Cabin-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../type/Cabin-Regular-webfont.woff') format('woff'), url('../type/Cabin-Regular-webfont.ttf') format('truetype'), url('../type/Cabin-Regular-webfont.svg#CabinRegular') format('svg');
        color: #fed203;
        font-size: 1.2rem;
        font-weight: bold;
        text-transform: uppercase;
        text-align: center;
        letter-spacing: 0.1rem;
        padding: 8px 0 8px 0;
    }

    section.sidebox
    {
        margin: 0 0 12px 0px; /*width: 244px;*/
    }
    h1 ul li .content
    {
        font-family: 'CabinMedium';
        font-size: 1.8rem;
    }

    h1 li.PBItem div.content /* Page titles */
    {
        font-size: 1.8rem; /* Reduces size from ~32px */
    }



    /*Component: Tab (button) navigation for product pages on mobile ........... */
    /* From Kirk Franklin of Comrade, August 28, 2013 */
    #content ul.tabnav /* Check */
    {
        width: inherit;
        padding: /*0 10px 0 10px*/ 0px;
    }

    div.content ul.tabnav_lines
    {
        margin: 0px 0px 10px 0px;
    }

    div.content ul.tabnav_lines li
    {
        display: block;
        width: /*090*/ 100%;
        padding: 0;
        margin: /*0 0 0 10px*/ 0px;
        color: #fdd649;
        background: #444;
        font-family: CabinBold,Helvetica,sans-serif;
        letter-spacing: 0.05em;
        position: relative;
    }

    div.content ul.tabnav_lines li a
    {
        display: none;
        width: 100%; /*height: 48px;*/ /*line-height: 48px;*/
        height: auto;
        font-size: 1.1rem;
        font-weight: bold;
        padding: 10px 40px 10px 12px;
        color: #fdd649;
        background: #444;
        border-bottom: 1px solid #222;
    }

    div.content ul.tabnav_lines li a:hover
    {
        text-decoration: none;
        border: none;
        border-bottom: 1px solid transparent;
        background: #555;
    }

    div.content ul.tabnav_lines li a.active
    {
        color: #fff;
        display: block;
        background: #a21e20 url(icon-menu-arrow.png) right center no-repeat;
        background: -moz-linear-gradient(top, rgba(185,35,36,1) 0%, rgba(173,33,34,1) 34%, rgba(151,27,30,1) 72%, rgba(143,26,27,1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(185,35,36,1)), color-stop(34%,rgba(173,33,34,1)), color-stop(72%,rgba(151,27,30,1)), color-stop(100%,rgba(143,26,27,1)));
        background: -webkit-linear-gradient(top, rgba(185,35,36,1) 0%,rgba(173,33,34,1) 34%,rgba(151,27,30,1) 72%,rgba(143,26,27,1) 100%);
        background: -o-linear-gradient(top, rgba(185,35,36,1) 0%,rgba(173,33,34,1) 34%,rgba(151,27,30,1) 72%,rgba(143,26,27,1) 100%);
        background: -ms-linear-gradient(top, rgba(185,35,36,1) 0%,rgba(173,33,34,1) 34%,rgba(151,27,30,1) 72%,rgba(143,26,27,1) 100%);
        background: linear-gradient(to bottom, rgba(185,35,36,1) 0%,rgba(173,33,34,1) 34%,rgba(151,27,30,1) 72%,rgba(143,26,27,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b92324', endColorstr='#8f1a1b',GradientType=0 );
        border: none;
        border-bottom: 1px solid transparent;
    }

    div.content ul.tabnav_lines li a.active span
    {
        display: block;
        width: 16px;
        height: 25px; /*float: right;*/
        position: absolute;
        top: 7px;
        right: 12px; /*margin: -9px 0 0 18px;*/
        background: transparent url(../images/stylesheet/tabnav_lines_active_arrow2.png) 0 0 no-repeat; /*/images/icon_hamburger_menu_small.gif*/
    }

    div.content ul.tabnav_lines li a.expanded
    {
        display: block;
    }

    div.content ul.tabnav_lines li a.active:hover
    {
        color: #fdd649;
    }

    div.content ul.tabnav_lines li a.active img
    {
        display: block;
        width: 23px;
        height: 36px;
        float: right;
        margin: 6px 0 0 0;
    }


    .column
    {
        width: 100%;
    }

    .left_column
    {
        margin: 0 2% 0 0;
    }

    .column h3
    {
        margin-top: 5px;
    }

    /* Page: Company........... */
    #company_overview td
    {
        font-size: 1.2rem;
    }
    #company_overview th
    {
        font-size: 0.80rem;
    }

    #company_info div
    {
        width: 100%;
        min-height: 175px;
        height: auto;
        margin: 0 /*0 0 3%*/;
        padding: 0;
    }

    /* Page: Contact Us ............ */
    #address_phone_numbers
    {
        margin: 0 0 30px 0;
        padding: 0 0 30px 0;
        border-bottom: 1px solid #dbdad5;
    }
    #contact_locations .tab li /* For mobile, the <li>s are vertical */
    {
        width: 100%;
        display: block;
        padding-bottom: 10px;
    }

    div#sales_offices.tab, div#media_contacts.tab, div#research_dev_design.tab
    {
        font-size: 0.9rem;
        line-height: normal;
    }

    #distributors_manufacturers th, #distributors_manufacturers th a, #distributors_manufacturers td, #distributors_manufacturers td a, #distributors_manufacturers td b
    {
        font-size: 0.9rem; /* Size increased for mobile because it is a stacked one-column of output */
    }

    div#north_america.tab, div.tabnav_bars_content /* THIS IS VERY GENERAL ( .tabnav_bars_content) and may be a problem eslewhere */
    {
        padding: 0;
    }

    div#distributors_manufacturers div.tabnav_bars-content, div#distributors_manufacturers div.tabnav_bars_content table
    {
        width: 98%;
        padding: 0;
        margin: 0;
    }

    div#distributors_manufacturers th /* Stacks the <td> atop one-another form compact display */
    {
        display: inline-block;
        width: 100%;
        padding: 10px 10px 10px 10px;
        vertical-align: top;
    }

    div#distributors_manufacturers td
    {
        display: inline-block;
        width: 100%;
        padding: 0px 0px 10px 10px;
        vertical-align: top;
        font-family: arial,helvetica,sans-serif;
    }

    /* Page: InstaPrevue ............ */
    img[title="Instaprevue-logo[1]"]
    {
        margin: 0;
        padding: 0;
    }

    /* Page: Corporate Citizenship ........... */
    /* #ctl00_MainContentPlaceHolder_MainContent_columnDisplay_ctl00_controlcolumn_ctl00_WidgetHost_updatepanel > div:nth-child(1) > img:nth-child(2)
            {
                padding-left: 50px;
            }*/

    /* Page: Management ........... */
    .bio figure
    {
        float: none;
        margin: 0 0 1% 0;
        padding: 0;
    }

    div.bio > figure > img
    {
        width: auto;
        height: auto;
        margin-bottom: 10px;
    }

    /* Page: Careers ............ */
    img[alt="careers_textbox2"]
    {
        display: none;
    }

    /*Page: Upcoming Events ........... */

    div#tab-events.tabnav_bars_tab
    {
        margin: 0px 0px 50px;
        padding: 0px 0px 0px;
    }

    .tabnav_bars_tab ul
    {
        margin: 0px 0px 20px 0px;
        padding: 0px;
    }



    ul#upcoming_events li a img
    {
        /*width: 35%;*/
        width: 100px;
    }

    .tabnav_bars_tab ul#upcoming_events li
    {
        /*margin: 0px 0px 30px;*/
        margin: 0px 0px 30px 0px;
        padding: 0px 0px 0px 128px;
        position: relative;
        min-height: 114px;
    }

    /*Page: Compliance and Interoperability Testing ........... */
    img[alt="Simplay_banner"]
    {
        width: 85%;
    }



    /* .video_outer_frame
        {
            height: 500px;
        }*/

    h1#mobile_tablet_only
    {
        padding-top: 60px;
        font-size: 1.8rem;
    }

    .fadein
    {
        clear: both;
        width: 100%;
        margin: auto auto 63px;
        padding: 10px 0px 0px;
        text-align: center;
    }


    .fadein a
    {
        /*  display: block;         margin: 0px 30px 10px 0px;         padding: 5px 5px 5px 20px;         border: 3px solid rgba(255, 255, 255, 0.2);         width: auto;         max-width: 250px;         color: rgba(255, 255, 255, 0.8);*/
        font-size: 16px;
        font-family: CabinBold; /* background: url("../images/backgrounds/fadein_arrow.png") no-repeat scroll 5px 50% transparent;         transition: border 0.25s linear 0s;*/
    }

    #video_wrapper #BCLbodyContent
    {
        margin-left: /*50*/ 12px;
        margin-right: /*50*/ 12px;
        margin-top: 20px;
    }

    .BCLvideoWrapper div, .BCLvideoWrapper embed, .BCLvideoWrapper object, .BrightcoveExperience
    {
        /*position: absolute;*/
        width: 100%;
        max-height: 250px;
    }

#factsheet_top
{padding:0px 12px;}

    #factsheet_top div
    {
        margin: 0px 0px 20px 0px;
        width: 100%;        
    }

#factsheet_note
{font-size: 80%; float: left; clear: both;margin-left:12px;}



#forms > div.left_side
{width:100%;
 float:none;}
 
#forms > div.right_side
{width:100%;
 float:none;}


#forms > div > div#opt_in
{
    float:left;
    display:block;
    width:100%;  
}


div.howtobuyleft, div.howtobuyright {width: 100%; padding-bottom:10px;min-width:230px;margin-right:0px;}

a.button.more_button_howtobuy {
    width: 100%;
    max-width: 300px;
}

.more_button_howtobuy span
{
    display: inline-block;
    width: 100%;
    height: inherit;
    line-height: inherit;
    background: transparent url(../images/backgrounds/more_arrow.png) 100% 1px no-repeat; /*transparent url(../images/backgrounds/more_arrow.png) 289px 1px no-repeat;*/
}
div.onlinecampaign_keyfeatures img
{
   width:100%;
}

/*Changes for the Lattice announcement*/
#LSCCmessage {font-size:14px;height:55px;padding:5px 40px;}

a.LSCCbutton, #home_header a.LSCCbutton 
{   padding:3px 7px;    
    margin:4px auto 0px auto;}

#utility_nav {top:55px;}

.site_header {
    height: 100px;}
/*End changes for the Lattice announcement*/

}
/* End media query for Mobile */