CSS Override Issue with Stylesheet - html

Question

I am a newbie at this so please excuse me if this doesn't make sense. In the #topbar2 section of this CSS Style-sheet I want the image NAFF_webtracker_logo.gif to appear. I believe I need to override just this section of the document since this is inherting from defaultstyle.css. This is in an application where I cannot edit defaultstylesheet.css. Is there a way I can override just this section to get my logo to appear? My coding seems correct but the image does not display.
Any help is appreciated.
Colin
/*
This file inherits all the styles from DefaultStyle.css
Please make sure that the following import link is present if you want to inherit default styles.
Any changes in fonts, colours, layout, etc. can be done via overriding CSS style elements after the import statement.
Good CSS guide is located at
http://www.htmlhelp.com/reference/css/
*/
#import url(DefaultStyle.css);
/* put your changes below this comment */
body
{
background-image: url(images/BG.gif);
background-color: none;
background-position: left top;
background-repeat: no-repeat;
color: #666666;
padding: 0;
margin: 0;
font-size: 11px;
}
#OuterContentPane
{
padding: 15px 30px 20px 30px;
background: none;
border-left: 0px solid;
border-left-color: #ffffff;
border-right: 0px solid;
border-right-color: #ffffff;
}
#pagehead
{
height: 204px;
border-bottom: 0px solid #000000;
background: #fff !important;
}
#topbar1
{
color: #ffffff;
/*background: none url(images/TopR.gif) no-repeat top left;*/
height: 204px;
}
#topbar2
{
color: #ffffff;
background: url(images/NAFF_webtracker_logo.gif) no-repeat top left;
height: 204px;
}
.loginBox
{
border: 1px solid #dfdfdf;
background: #ddedf5 url(images/Boxag.gif) repeat-x top left;
color: #666666;
padding: 10px 10px 10px 10px;
width: 170px;
}
.loginBox input[type="text"], .loginBox input[type="password"]
{
width: 169px;
}
.loginBox a, .loginBox a:visited
{
color: #666666;
}
.loginBox a:hover
{
color: #000000;
}
.LoginInstruction
{
position: absolute;
border: 1px solid #dfdfdf;
background: url(images/BoxBg.gif) repeat-x top left;
color: #666666;
padding: 15px;
left: 264px;
top: 220px;
right: 16px;
height: 322px;
}
#LoginStatusString
{
text-align: right;
color: #00A4E4;
background: none;
top: 113px;
right: 0px;
}
#menu
{
text-decoration: none;
font-weight: normal;
background: none;
text-align: center;
font-size: 9pt;
left: 231px;
top: 149px;
font-variant: normal;
line-height: 26px;
/*text-transform: uppercase;*/
}
#menu li
{
width: 124px;
height: 26px;
color: #00a4e4;
text-decoration: none;
background: url(images/MButtH.gif) no-repeat top left;
border: 0px solid;
}
#menu a, #menu a:visited
{
color: #005596;
background: url(images/MButt.gif) no-repeat top left;
text-decoration: none;
display: inline-block;
}
#menu a:hover
{
color: #00a4e4;
text-decoration: none;
background: url(images/MButtH.gif) no-repeat top left;
}
.DetailsTable
{
padding: 0px;
font-size: 11px;
}
.DetailsHeader
{
color: #005596;
font-size: 12px;
vertical-align: middle;
line-height: 24px;
}
.DetailsHeader td
{
background-image: url(images/MButt.gif);
background-repeat: repeat;
background-position: top left;
}
.DetailsHeader a
{
color: #005596;
font-weight: Normal;
}
.DetailsHeader a:hover
{
color: #000000;
}
a,
a:visited
{
color: #666666;
background: inherit;
}
a:hover
{
color: #000000;
background: inherit;
}
select, input
{
font-size: 11px;
}
.ContentSection
{
padding-left: 0px;
margin-top: 10px;
padding-bottom: 0px;
background: none;
}
.DetailsCell
{
color: #666666;
background: none;
}
.DetailsAlternatingCell
{
color: #666666;
background: #ebf9fe;
}
.TimeLineLegend
{
display: inline-block;
font-weight: bold;
background: none;
color: #000000;
text-align: center;
padding: 5px 5px 5px 5px;
border: solid 1px gray;
}
.TimeLineOverdue
{
background: #ffb6c1;
color: #000000;
white-space: nowrap;
text-align: center;
}
.TimeLinePending
{
background: #FFFF00;
color: #000000;
white-space: nowrap;
text-align: center;
}
.TimeLineCompleted
{
background: #98fb98;
color: #000000;
white-space: nowrap;
text-align: center;
}
.TimeLineCompletedLate
{
background: #ffcc99;
color: #000000;
white-space: nowrap;
text-align: center
}
.TimeLineEstimate
{
font-style: italic;
color: #000000;
background: inherit;
white-space: nowrap;
text-align: center;
}
.Button.FilterStripGroup_none
{
background-color: #ffffff;
}
#pagefooter
{
text-align: left;
padding-top: 8px;
border-top: 0px solid #000000;
border-bottom: 0px solid #000000;
margin-left: 30px;
margin-right: 30px;
height: 30px;
color: #666666;
font-size: 9px;
padding-left: 24px;
background: #dfdfe0;
}
#PageFooter a,
#PageFooter a:visited
{
color: #666666;
font-size: 10px;
}
#PageFooter a:hover
{
color: #000000;
font-size: 10px;
}
#LanguageSelection
{
position:absolute;
right: 10px;
}
html{
overflow-x:hidden;
}
#OuterContentPane{
background-image: url('Images/Rectangle2.jpg');
background-size: cover;
padding: 65px 30px 20px 30px !important;
}
#topbar1{
background-size: cover;
background-image:url('Images/header.jpg');
background-position: -50px -45px;
background-repeat: no-repeat;
}
#topbar2{
display: none;
}
#loginBox, #QuickViewDetails{
margin: 0 auto;
min-width: 250px;
max-width: 440px
max-width:100%;
background-color: #fff;
padding: 20px 40px
}
#OuterContentPane select, #OuterContentPane input{
max-width: 300px;
padding: 5px 6px;
}
.loginBox input[type="text"], .loginBox input[type="password"]{
width: 100% !important;
padding: 5px;
margin-bottom: 15px;
padding: 5px 6px;
background: #fff;
}
#SigninBtn, #FindBtn{
padding: 5px 19px;
border-radius: 0px;
background-color: #BF4646;
color: #fff;
margin-bottom: 20px;
border: none;
cursor:pointer;
-webkit-transition: background-color .8s; /* Safari */
transition: background-color .8s;
}
#SigninBtn:hover, #FindBtn:hover{
background-color:#09517B;
-webkit-transition: background-color .8s; /* Safari */
transition: background-color .8s;
}
#pagefooter{
background-color:#333;
margin: 0px;
width:100%;
min-height:75px;
color:#fff;
}
#menu{
width: 100%;
left: 1px;
top: 160px;
}
#menu, #menu *{
background:#fff !important;
}
#menu > li{
width: 14.2%;
min-width: 95px;
}
#menu > li > ul{
min-width: 200px;
width: auto;
}
#ctl06_ctl01_ctl62_ctl00, #ctl06_ctl01_ctl61_ctl00{
max-width: 110px;
}
#media(max-width:400){
#topbar1{
background-position: -40px -30px;
}
}

Answer 1

You can use the !important keyword in CSS. This will override default styles.
#topbar2
{
color: #ffffff;
background: url(images/NAFF_webtracker_logo.gif) no-repeat top left !important;
height: 204px;
}