Two different search bars, one stock one custom with bacground img.

I’m trying to create a search bar like the one found on https://sweetopia.net/ However the usual edit your searchform.php doesn’t seem to apply as it makes calls to my style.css..

This is my the relevant part of style.css

form.art-search {

   display:block;
   position: relative;
   width: 98%;
   padding:2px;
   margin:0 auto !important;
   border: none;
   background:url('images/search_bar.gif') center center no-repeat;

}

form.art-search div {
   margin: 0 18px 0 -2px;
}

input.art-search-text {
   display: block;
   margin: 0;
   width: 100%;
   padding-right: 16px;
}

input.art-search-button
{
   display: block;
   position: absolute;
   right: 0;
   top: 0;
   height: 100%;
   padding: 0;
   margin: 0;
   width: 16px;
   background:url('images/search.png') center center no-repeat;
   border: none;
}

and this my Searchform.php

<form class="art-search" method="get" name="searchform" action="<?php bloginfo('url'); ?>/">
  <div><input class="art-search-text" name="s" type="text" value="<?php echo esc_attr(get_search_query()); ?>" /></div>
  <input class="art-search-button" type="submit" value="" />
</form>

Directly edditing the style.css a.doesn’t seem to work i.e bacground:url….etc doesn’t do anything. Even if i were to edit all of it effectively i still wouldn’t want that, i’d like to keep a simple search on the bottom of the site and make the one on the head bar match sweetopias. How and where?