[karichristen]

Right I have that in there and the hover is still a light blue color (which I would like to be changed to red)

This template is really making it hard to change completely. For instance the nav bar changes from navy to black when you click on the different tabs and then when you refresh it changes back to navy (help!)
I really think there is some code in this CSS that is making it difficult to change the colors.


Here is the full CSS code again:

/**
* Top menu main block styling
*/


}

/* Sets color of navigation bar in mobile */
.mm-navbar {
background: #195ad2;
}

/* Sets color of navigation bar mobile */
.navbar.navbar-inverse.mobile-hidden { background: #08255c; }
#top-main-menu li li:hover>a, #top-main-menu li li a:hover { background: #FF0000; }

inverse .navbar-nav>li.active>a { background: #FF0000; }
#top-main-menu li li:hover>a, #top-main-menu li li a:hover { background: #FF0000; }


/* Font Color */
color: #fff;
/* Active Cell Color*/
background-color: #FF0000;
}
#top-main-menu>li>span.primary-title.tap, #top-main-menu>li>a.tap, #top-main-menu>li:hover>span.primary-title, #top-main-menu>li:hover>a {
/* Hover Color*/
background-color: #FF0000;
}
.navbar-inverse {
/* Background Color*/
background-color: #D3D3D3;
/* Menu Border Color*/
border-color: #195ad2;
}
/**
* Main blocks of the sidebar (Top categories, Sale, New arrivals Recently viewed and so on)
*/
.sidebar div.block {
padding: 0px;
border-color: #000080;
border-width: 2px;
}

/**
* Header of the main blocks in the sidebar
*/
.sidebar .block .head-h2 {
padding: 14px 20px 14px 20px;
margin: 0px;
border-color: #000080;
border-radius: 5px;
color: #5e6266;
}

/**
* Content of the main blocks in the sidebar
*/
.sidebar div.block div.content {
padding: 0px 20px 20px 20px;
border-radius: 5px;
}

/**
* Styles for the links inside the main blocks of the sidebar
*/
.sidebar ul.menu a {
border-top: 1px solid #daedfc;
}

/**
* Specific styles for the Top categories block in the side bar
*/
.sidebar div.block.block-product-filter div.content {
padding: 0px 10px 20px 10px;
}

/**
* Specific styles for the Top categories block in the side bar
*/
.sidebar .block.block-top-categories .head-h2 {
background: #000080;
}

.sidebar div.block.block-top-categories div.content {
background: #000080;
}

.sidebar div.block.block-top-categories div.content a {
color: #000080;
}

/**
* Header for specific side-bar box ("New arrivals" products)
*/
.sidebar .block.block-new-arrivals .head-h2 {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
background: #f2f2f2;
background: -moz-linear-gradient(top, #f7fcff 0%, #d9edfc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7fcff), color-stop(100%,#d9edfc));
background: -webkit-linear-gradient(top, #f7fcff 0%,#d9edfc 100%);
background: -o-linear-gradient(top, #f7fcff 0%,#d9edfc 100%);
background: -ms-linear-gradient(top, #f7fcff 0%,#d9edfc 100%);
background: linear-gradient(to bottom, #f7fcff 0%,#d9edfc 100%);
filter: progidXImageTransform.Microsoft.gradient( startColorstr='#f7fcff', endColorstr='#d9edfc',GradientType=0 );
}

/**
* Price info block in the "New arrivals" product list in the side-bar box
*/
.sidebar .block.block-new-arrivals div.product-price {
margin-top: 10px;
}

/**
* Price info text in the "New arrivals" product list in the side-bar box
*/
.sidebar .block.block-new-arrivals .products-sidebar-small-thumbnails span.product-price {
font-size: 26px;
}

/**
* The last product element block in the New arrivals list
*/
.sidebar .block.block-new-arrivals ul.products-sidebar li.last {
padding-bottom: 10px;
}

/**
* The last element block in the New arrivals list (There is a link "All new products")
*/
.sidebar .block.block-new-arrivals ul.products-sidebar li:last-child {
padding-bottom: 10px;
}



Side note, would you also be able to help me change the font colors and shopping bag colors on the upper right hand corner?