Как сделать активную ссылку другим размером

Доброго времени суток.

Вопрос таков.

Необходимо в верхнем меню сделать ссылку на которой я сейчас нахожусь чуть больше.(не a:active)

Т.е. когда я на главной - ссылка "Главная" не 12рх а 30рх, когда перехожу на ссылку "Контакты" ссылка "Главная" становится снова 12рх, а "Контакты" 30рх

При наведении курсора увеличение шрифта я сделал с помощью hover, а вот как обозначить ссылку на которой нахожусь, никак не дойдет. Спасибо. Доступ к PHP не имею, только HTML и CSS.

Вот собственно и код:

#nav {

margin-left: 80px;

position:absolute;

width: 900px;

}

#nav ul {

margin: 0px;

padding: 0px;

list-style: none;

}

#nav ul li {

background-color: transparent;

}

#nav ul li,

#nav ul li a {

float: left;

display: block;

}

#nav ul li a {

margin: 6px 15px 0 10px;

padding: 5px 10px 5px 10px;

font-size: 1.2em;

color: #fff;

border-bottom: 0px solid black;

font-weight: bold;

-webkit-transition: all linear 0.3s;

-moz-transition: all linear 0.3s;

-ms-transition: all linear 0.3s;

-o-transition: all linear 0.3s;

transition: all linear 0.3s;

/*background-color: black;

border-radius: 2px;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;*/

}

#nav ul li a:hover,

#nav ul li a.selected {

color: red;

text-decoration: none;

text-shadow: #777 10px 4px 10px; /* */

-webkit-text-shadow: 2px 2px 5px #777; /* Для устаревших Safari, Chrome и iOS */

-moz-text-shadow: 2px 2px 5px #777; /* Для древнего Firefox */

filter: Shadow(Color=#777777, Direction=45, Strength=2); /* Для IE */

font-size: 30px;

}

<div id='nav'>

<ul>

<li><a href='http://site.ru'>Главная</a></li>

</li>

<li><a href='http://site.ru/kontacts'>Контакты</a></li>

</ul>

</div>