Nivo-slider seems to put an inline css height in header div

Question

I am using a template, called Shinra.

I want to resize the slider ánd the header, which is anthracite of color. However, it seems like the slider is putting inline CSS in the header div for a different height than I want...I have tried the following:

• Search on Google - couldn't find a result, found a tutorial but it didn't explain anything about a height being put into a div.
• Changed the foldername of the nivo-slider so it wouldn't work - the CSS inline height disappeared.
• Changed the name of the header div to headers, which work - the inline CSS disappeared
• Looked into the JavaScript but I don't know much about that and couldn't find any text with the text "header" (name of the div).

So it seems the slider is putting this height into a div called header but I can't find anything about it...anyone know a solution?

HTML part:

 <div id="wrapper">

            <!-- HEADER -->
            <div id="header">
                <a href="index.html"><img id="logo" src="img/logo.png" alt="Nova" /></a>
                <!-- Social -->
                <div id="social-holder">
                    <ul class="social">
                        <li><a href="http://www.facebook.com" class="poshytip facebook" title="Become a fan"></a></li>
                        <li><a href="http://www.twitter.com" class="poshytip twitter" title="Follow our tweets"></a></li>
                        <li><a href="http://www.dribbble.com" class="poshytip dribbble" title="View our work"></a></li>
                        <li><a href="http://www.addthis.com" class="poshytip addthis" title="Tell everybody"></a></li>
                        <li><a href="http://www.vimeo.com" class="poshytip vimeo" title="View our videos"></a></li>
                        <li><a href="http://www.youtube.com" class="poshytip youtube" title="View our videos"></a></li>
                    </ul>
                </div>
                <!-- ENDS Social -->

                <!-- Navigation -->
                <div><ul id="nav" class="sf-menu">
                    <li class="current-menu-item"><a href="index.html">HOME</a></li>
                    <li><a href="features.html">FEATURES</a>
                        <ul>
                            <li><a href="features-appearance.html"><span> Appearance</span></a></li>
                            <li><a href="features-columns.html"><span> Columns layout</span></a></li>
                            <li><a href="features-accordion.html"><span> Accordion</span></a></li>
                            <li><a href="features-toggle.html"><span> Toggle box</span></a></li>
                            <li><a href="features-tabs.html"><span> Tabs</span></a></li>
                            <li><a href="features-infobox.html"><span> Text box</span></a></li>
                            <li><a href="features-monobox.html"><span> Icons</span></a></li>
                        </ul>
                    </li>
                    <li><a href="blog.html">BLOG</a></li>
                    <li><a href="portfolio.html">PORTFOLIO</a></li>
                    <li><a href="gallery.html">GALLERY</a>
                        <ul>
                            <li><a href="gallery.html"><span> Four columns </span></a></li>
                            <li><a href="gallery-3.html"><span> Three columns </span></a></li>
                            <li><a href="gallery-2.html"><span> Two columns </span></a></li>
                            <li><a href="video-gallery.html"><span> Video gallery </span></a></li>
                        </ul>
                    </li>
                    <li><a href="http://luiszuno.com/blog/downloads/shinra-html-template">DOWNLOAD</a></li>
                </ul></div>
                <!-- Navigation --> 


                <!-- search -->
                <div class="top-search">
                    <form  method="get" id="searchform" action="#">
                        <div>
                            <input type="text" value="Search..." name="s" id="s" onfocus="defaultInput(this)" onblur="clearInput(this)" />
                            <input type="submit" id="searchsubmit" value=" " />
                        </div>
                    </form>
                </div>
                <!-- ENDS search -->

                <!-- headline -->
                <div id="headline">
                </div>
                <!-- ENDS headline -->

                <!-- Slider -->
            <div id="slider-block">
                <div id="slider-holder">
                    <div id="slider">
                        <a href="http://www.luiszuno.com"><img src="images/01.jpg" title="Visit my web site regularly and get freebies each week!" alt="" /></a>
                        <a href="http://themeforest.net/user/Ansimuz/portfolio?ref=ansimuz"><img src="images/02.jpg" title="Support the freebies buying high quality premium themes from my portfolio at themeforest" alt="" /></a>
                    </div>
                </div>
            </div>
            <!-- ENDS Slider -->

            </div>
            <!-- ENDS HEADER -->

CSS part:

body {
    line-height: 1;
    color: #696969;
    background: #f1f1f1 url(../img/bg/webtreats/webtreats_blue_creme_pattern_87.jpg);
    font-family: Arial, Helvetica, sans-serif;
    font-size:  100%;
}

#wrapper{
    width: 966px;
    margin: 30px auto;
    background: #363636;
    min-height: 700px;
    font-size: 14px;
    line-height: 1.5em;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

#header{
    height: 200px;
    position: relative;
    z-index: 10;
}

#main{
    background: #ffffff;
    position: relative;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

#content{
    min-height: 400px;
    overflow: hidden;
    margin-bottom: 40px;
}

#footer{
    position: relative;
    color: #fff;
}

#logo{
    position: absolute;
    top: 40px;
    left: 30px;
}

body.home #header{
    height: 170px;
    position: relative;
    z-index: 10;
}

Answer 1

In js/custom.js line 144

$('.home #header').height($('#headline').height() + 430);

This adds an inline style to modify the height of #header.