Trouble with menu links with css

Hi,

I am currently using the omega theme with my subtheme of it. I am trying to style the menu but I can`t get the a:link of a specific class to change colors from the original colors. For example i'm trying to get the Home button to show up as red. The hover for some reason works. Also is there a simple way to change color when you are on a certain page for the menu, instead of the default black.

http://animeteashirts.com/

All of the CSS code below:

/* This file will hold styles for the mobile version of your website (mobile first). */
/* This also can include ANY global CSS that applies site-wide. Unless overwritten by a more specific style rule, CSS declarations in global.css will apply site-wide. */

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:underline;}


.logo-img {
	position:absolute;
	top: 0px;
	left: 40px;
	z-index:100;
}

.site-name-slogan {
	position:relative;
	top: 100px;
	margin-top:-100px;
	z-index:100;
}


a.new-main-menu:link {
	color:red;
	font-size:27px;

}

a.new-main-menu:hover {
	color: #afedff; 
	text-decoration: none;
}

a.new-main-menu:visited {
	text-decoration: none;
}


a.main-products:link {
	color: green; 
	font-size:27px;
	text-decoration: none;
}

a.main-products:hover {
	color: #afedff; 
	text-decoration: none;
}

a.main-products:visited {
	text-decoration: none;
}



.navigation {
	position: relative;
	top: -400px;
	left: 260px;
	z-index:1000;
	background:url(http://animeteashirts.com/images/Mio_Music_School_Girl_Cover.png);
	background-size:200px 100px;
	background-repeat:no-repeat;
}

.block-navigation ul li { 
          list-style: none!important;
          list-style-image:none!important;
}

ul.product 
{
list-style-type: none;
}

li.product {
display: inline;
}

img.product {
float: left;
padding: 0px;
margin: 0px;
width: 250px;
height: 250px;
}


/*TILT*/
.tilt {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
.tilt:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

.view-featured-slider .views-field-counter {
	
	padding: 20px 10px;
	background:url("../images/inactive_slider.png") top left no-repeat;
    background-size:20px 20px;

}

.view-featured-slider .active .views-field-counter {
		background:url("../images/active_slider.png") top left no-repeat;	
}

.view-featured-slider .views-content-counter {
	display:none;
}

 .views-slideshow-controls-bottom {
	position:absolute;
	top:80px;
	left: 890px;	
	z-index:1000;
}

Is there another method like modules that can modify the menu like how css does it?

Thanks! .