Highlight Active Page

Hi Guys,

Trying to figure out where to put an “active” color for the generated page list on my templete. any help would surely be appreciated.

Thanks!

my css – `/*
Theme Name: Modern Clix
Them URI: https://www.rodrigogalindez.com
Description: A minimal, grid based, elastic theme. WordPress 2.7 ready.
Version: 1
Media: Screen
Version: Tue 6, Jan 2008
Author: Rodrigo Galindez
Author URI: https://www.rodrigogalindez.com
Tags: black, white, three-columns, fixed-width, custom-header, custom-colors, theme-options, right-sidebar
*/

/* ———————————————– [ * ] */

@import url(css/grid-900.css);

* {
margin: 0;
padding: 0;
}

/* ——————————– [ General Elements ] */

body {
font-family: Courier, Verdana, sans-serif;
font-size: 62.5%;
/* background: transparent url(images/grid-900.gif) repeat-y top center; */
background: #fff;
color: #111;
}

hr {
display: none;
}

img {
vertical-align: middle;
border: 0;
}

h1, h2, h3, h4 {
padding-left: 8px;
padding-right: 8px;
color: #000;
}

h1 {
margin-bottom: .3em;
font-size: 14pt;
line-height: .95em;
}

h2 {
margin-bottom: 1em;
font-size: 11pt;
line-height: 1.3;
font-color: #cccccc;
}

h3 {
margin-bottom: 1em;
font-size: 1.8em;
line-height: 1.3;
}

h4 {
margin-bottom: .6em;
font-size: 1.3em;
line-height: 1.6;
}

h5 {
margin-bottom: 1em;
font-size: 1.2em;
line-height: 1.6;

}

p {
margin-bottom: 1em;
padding-left: 8px;
padding-right: 8px;
font-size: 1.2em;
line-height: 1.6;
}

a {
text-decoration: none;
font-weight: bold;
color: #000;
}

a:hover {
color: #0F83DB;
}

acronym {
border-bottom: 1px dotted #eee;
}

kbd {
font-family: “Monaco”, “Courier New”, fixed;
font-size: 1em;
text-transform: uppercase;
}

/* —————————————– [ Wrapper ] */

#wrapper {
width: 90em;
margin: 0 auto;
margin-top: 3em;
margin-bottom: 3em;
overflow: hidden;
}

/* —————————————- [ Main Nav ] */

#main-nav {
padding: 0 0 .5em 0;
overflow: hidden;
}

#main-nav ul {
list-style-type: none;
}

#main-nav li.page_item {
margin-right: 2.2em;
float: left;
}

#main-nav li a {
font-size: 1.2em;
line-height: 1.6;
padding-left: 8px;
}

/* —————————————— [ Header ] */

#header {
height: 15em;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
overflow: hidden;
}

#header h1 {
margin-top: .45em;
}

#header h1 a {
color: #000;
}

#header h2 {
color: #999999;
}

#header headerimg {
margin-top: 5em;

}

/* —————————————— [ Content ] */

#content {
padding-top: 1em;
overflow: hidden;
}

ul.nav {
margin: 0 0 2em 0;
list-style-type: none;
}

.nav li {
margin: 0;
padding: .4em 8px .5em 8px;
font-size: 1.2em;
line-height: 1.6;
border-bottom: 1px dotted #bbb;
}

.nav li.last {
border-bottom: 0;
}

ul.navlinks {
position: absolute;
top: 36.4em;
list-style-type: none;
overflow: hidden;
}

.navlinks li {
font-size: 1.2em;
line-height: 1.6;
}

.navlinks li a {
display: block;
padding: .4em 8px .5em 8px;
}

.navlinks li a:hover {
background: #000;
color: #fff;
}

/* ——————————————– [ Post ] */

.post {
padding: 1em 0 2em 0;
border-top: 1px solid #ccc;
overflow: hidden;
clear: both;
}

.post-content p, .post-content h5, .post-content code {
width: 35.7em;
}

.post-content h3 {
line-height: .9;
}

.post-content h5 {
margin-top: 2.5em;
margin-bottom: .5em;
padding-left: 8px;
padding-right: 8px;
text-transform: uppercase;
}

.post-content blockquote {
margin: 0 3.2em 0 3.2em;
}

.post-content blockquote p {
width: 30em;
padding: 0;
}

.post-content blockquote ul {
width: 30em;
}

.post-content dl {
margin: 0 0 1em 0;
padding-left: 8px;
padding-right: 8px;
font-size: 1.2em;
}

.post-content dt {
margin: 0 0 .5em 0;
font-weight: bold;
font-size: 1em;
}

.post-content dd {
width: 30em;
margin: 0 0 1em 2em;
line-height: 1.6;
}

.post-content ul, .post-content ol {
width: 44.8em;
margin-left: -12px;
padding-right: 8px;
list-style-type: none;
}

.post-content li {
margin: 0 0 1em 0;
padding-left: 20px;
font-size: 1.2em;
line-height: 1.6;
background: transparent url(images/bullet.gif) no-repeat left 2px;
}

.post-content ol {
margin-left: 8px !important;
}

.post-content ol li {
padding-left: 0;
list-style-type: decimal;
background: none;
}

.post-content code {
font-family: “Monaco”, “Courier New”, fixed;
font-size: .9em;
}

.post-content pre {
margin: 2em 0 2em 0;
padding: 2em;
font-size: 1.2em;
background: #eee;
overflow: auto;
}

.post-content pre code {
color: #222;
}

.post-content .quote-author {
float: right;
}

/* ————————————– [ Commentary ] */

#commentary {
border-top: 1px solid #111;
padding: 1em 0 0 0;
overflow: hidden;
clear: both;
}

.comment {
margin: 0 0 3em 0;
padding: 1em 0 0 0;
border-top: 1px dotted #ccc;
clear: both;
overflow: hidden;
}

.comment dt {
margin: 0 0 .5em 0;
font-size: 1.2em;
line-height: 1.6;
}

#leave-comment {
border-top: 1px solid #111;
padding: 1.2em 0 0 0;
overflow: hidden;
clear: both;
}

#leave-comment code {
font-family: “Monaco”, “Courier New”, fixed;
font-size: .9em;
}

.comment-field {
padding-top: 1.2em;
padding-bottom: 1.2em;
border-bottom: 1px dotted #ccc;
clear: both;
overflow: hidden;
}

label {
display: block;
padding-top: 7px;
font-size: 1.2em;
line-height: 1.6;
font-weight: bold;
}

input, textarea {
width: 94%;
padding: 8px;
font-family: Arial, Verdana, sans-serif;
font-size: 1.2em;
border: 1px solid #ccc;
}

textarea {
height: 10em;
}

/* —————————————– [ Sidebar ] */

#sidebar {
margin: 0;
padding: 1em 0 0 0;
overflow: hidden;
}

#sidebar h4 {
padding-bottom: .6em;
line-height: 1.6;
border-bottom: 1px solid #ccc;
}

#sidebar p {
font-size: 1.1em;
color: #111;
}

#sidebar .section input {
width: 15.8em;
margin: 0 0 1em 0;
padding: 6px 6px 6px 23px;
border: 1px solid #ccc;
background: transparent url(images/bg-search.gif) no-repeat 7px center;
font-size: 1.1em;
float: left;
}

#sidebar ul.nav {
margin: 0 0 2em 0;
list-style-type: none;
}

#sidebar .nav li {
margin: 0;
padding: .4em 8px .5em 8px;
font-size: 1.1em;
line-height: 1.6;
border-bottom: 1px dotted #bbb;
}

#sidebar .nav li.last {
border-bottom: 0;
}

.section {
margin: 0 0 1em 0;
clear: both;
overflow: hidden;
}

.section .col {
overflow: hidden;
}

#content .section {
margin: 0 0 2em 0;
padding: 1em 0 0 0;
border-top: 1px dotted #bbb;
}

#content .first {
border: 0;
}

.submit {
width: auto;
padding: 0;
border: 0;
}

.navigation {
margin: 0 0 1em 0;
padding: 1em 0 0 0;
list-style-type: none;
overflow: hidden;
clear: both;
}

.navigation li {
font-size: 1.2em;
}

/* ————————————— [ Footnotes ] */

#footnotes {
border-top: 1px solid #333;
padding: 1em 0 0 0;
overflow: hidden;
clear: both;
}

#footnotes p {
margin-bottom: .2em;
font-size: 1.1em;
}

#footnotes .rss {
margin-left: 8px;
padding-left: 16px;
background: transparent url(images/feed-icon.gif) no-repeat center left;
}

/* —————————————— [ Flickr ] */

#flickr_badge_wrapper {
margin-left: -1.2em;
overflow: hidden;
}

.flickr_badge_image {
margin: 0 0 1.2em 1.2em;
float: left;
}

.flickr_badge_image img {
width: 64px;
height: 64px;
}

.flickr_badge_image a {
display: block;
}

/* ——————————— [ General Classes ] */

.small {
font-size: 1em;
line-height: 1.6;
}

/* If you want a text in ALL CAPS */

.ver {
text-transform: uppercase;
color: #000;
}

/* For by-lines */

.low {
font-family: Palatino, Georgia, “Times New Roman”, sans-serif;
font-style: italic;
font-weight: normal;
text-transform: lowercase;
color: #666;
}

/* A nice ampersand */

.amp {
font-family: Baskerville, Georgia, “Times New Roman”, sans-serif;
font-style: italic;
font-weight: normal;
color: #666;
}

/* For image captions */

.tooltip {
display: block;
padding-top: 8px;
font-size: .9em;
}

.left {
float: left;
}

.right {
float: right;
}

.align-right {
display: block;
text-align: right;
}

.align-center {
display: block;
text-align: center;
}

.both {
clear: both;
}

.image {
background-color: #f9f9f9;
border: 1px solid #eee;
border-bottom: 1px solid #eee;
display: block;
padding: 7px;
}

.nudged {
margin-right: 8px;
}

.nudged-left {
padding-left: 8px;
}

.nudge-bottom {
margin-bottom: 1.5em;
}

.last-field, .first-post {
border: 0;
}

.title-not {
width: 33px;
height: 25px;
margin: 0 6px 0 0;
display: block;
text-indent: -1000em;
background: transparent url(images/not.gif) no-repeat top left;
float: left;
}

.search-field {
padding: 0;
}

/* Use for full width images (596px) */

.full-image {
margin-left: -15.2em;
}

/* Centering for older posts */

.centered {
display: block;
margin: 0 auto;
}

.button {
display: block;
padding: 8px;
background: #222;
color: #fff;
font-size: .9em;
text-transform: uppercase;
letter-spacing: 3px;
text-align: center;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

.button:hover {
background: #000;
}

/* ———————- [ WordPress required classes ] */

ul.widgetized-sidebar {
list-style-type: none;
}

ul.widgetized-sidebar li {
margin: 0 0 2em 0;
clear: both;
overflow: hidden;
}

ul.widgetized-sidebar li h2 {
margin-bottom: 0.6em;
padding-bottom: .6em;
font-size: 1em;
line-height: 1.6;
text-transform: uppercase;
border-bottom: 1px solid #ccc;
color: #000;
}

ul.widgetized-sidebar li ul li {
margin: 0;
padding: .4em 8px .5em 8px;
font-size: 1.1em;
line-height: 1.6;
border-bottom: 1px dotted #bbb;
font-size: 1.1em;
}

.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.alignleft {
float: left;
}

.alignright {
float: right;
}

.wp-caption {
margin: 1em;
padding: .8em;
text-align: center;
}

.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

.wp-caption p.wp-caption-text {
margin: .5em 0 .5em 0;
padding: 0;
font-size: 1.1em;
line-height: 1.6;
}

.categories { }
.cat-item { }
.current-cat { }
.current-cat-parent { }
.pagenav { }
.page_item { }
.current_page_item { }
.current_page_parent { }
.widget { }
.widget_text { }
.blogroll { }
.linkcat{ }

#wp-calendar {
border-collapse: collapse;
font-size: 1.1em;
margin: 0 auto;
}

#wp-calendar caption {
margin-bottom: .8em;
font-size: 1.1em;
font-weight: bold;
}

#wp-calendar thead tr th {
padding: 1em;
}

#wp-calendar td {
padding: 1em;
}

#wp-calendar tr {
padding: 1em;
}
`