Menu egyedi dizájnolása css felülírással gantryban hydrogén sablonnál

Íme az oldal, amin ráncfelvarrást végeztem:

baba-mama-bizi.hu/

A menut kicsit megdizájnoltam. Szeretném, ha a menüpontok rámutatáskor és aktív állapotban teljesen más színnel jelenjenek meg. A gantry dokumentációjában nem találtam leírást, hogy kell az adott osztályokat meghívni.

Íme az idevágó felülírás:

//Menu
.g-main-nav .g-toplevel > li > .g-menu-item-container {
font-size: 14pt;
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
margin:3px;
background: #07E3F9;
background: -webkit-linear-gradient(top, #15E6F9 0, #5BEDFB 15%, #24E8F9 50%, #06E3F9 50%, #05B7C7 50%, #06E3F9 95%, #0BE5F9 100%) no-repeat;
background: -moz-linear-gradient(top, #15E6F9 0, #5BEDFB 15%, #24E8F9 50%, #06E3F9 50%, #05B7C7 50%, #06E3F9 95%, #0BE5F9 100%) no-repeat;
background: -o-linear-gradient(top, #15E6F9 0, #5BEDFB 15%, #24E8F9 50%, #06E3F9 50%, #05B7C7 50%, #06E3F9 95%, #0BE5F9 100%) no-repeat;
background: -ms-linear-gradient(top, #15E6F9 0, #5BEDFB 15%, #24E8F9 50%, #06E3F9 50%, #05B7C7 50%, #06E3F9 95%, #0BE5F9 100%) no-repeat;
background: linear-gradient(to bottom, #15E6F9 0, #5BEDFB 15%, #24E8F9 50%, #06E3F9 50%, #05B7C7 50%, #06E3F9 95%, #0BE5F9 100%) no-repeat;
-svg-background: linear-gradient(top, #15E6F9 0, #5BEDFB 15%, #24E8F9 50%, #06E3F9 50%, #05B7C7 50%, #06E3F9 95%, #0BE5F9 100%) no-repeat;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border-bottom: 3px solid #F804EC;
}

Az adott elemnek az "alap" állapotán felül három megkülönböztetett állapotot tudsz kezelni: hover, active, focus
A menüelem osztály neve után odaíírva (kettősponttal elválasztva) ezeket az állapotokat is tudod formázni.
Itt egy kis segítség , például:

Köszönet. Részemről a topic zárható.