changing the color of comments

I followed a tutorial on how to customize the K2 theme on my blog. I made this template to match my website but I ran into a problem: The comments don’t show up!

They’re there, but they’re the same color as the background and it really doesn’t help anything. I can’t find anything at all that tells me how to fix this problem. Any suggestions?

My blog is https://www.twelveounces.com/blog if you want to see it.

body {
	background: #DDD7AC;
	padding: 0 0 40px;
	color: #DDD7AC;
	margin: 0;
	}

#header {
	background: black url('header.jpg') center center no-repeat;
	width: 950px;
	height: 300px;
	padding: 0 0 0 0;
	margin-left: -95px;
	margin-top: 0px;
	}

h1{
	display: none;
	}

#header .description {
	display: none;
	}

#page {
	padding: 0;
	width: 950px;
	border: none;
	}

.primary { /* this is the most important part - play with the values according to your page width */
   width: 770px !important;
   _width: 770px; /* for IE */
   float: left;
   padding: 10px 14px 10px 14px !important;
   _padding: 10px 10px 10px 15px !important; /* for IE */
   margin: 0;
}

.secondary { /* this is the most important part - play with the values according to your page width */
   width: 180px !important;
   _width: 2180px; /* for IE */
   float: right;
   padding: 10px 14px 10px 14px !important;
   _padding: 10px 10px 10px 15px !important; /* for IE */
   margin: 0;
}

#page, ul.menu li.current_page_item a, ul.menu li.current_page_item a:hover {
	background: #DDD7AC;
	}

ul.menu li.current_page_item a, ul.menu li.current_page_item a:hover {
	color: #0c445c !important;
	text-decoration: none;
	}

ul.menu li a:hover {
	background: #0c445c;
	}

h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, h4, h4 a, h4 a:hover, h4 a:visited {
	font: 150% haetenschweiller, Impact, Verdana, Arial, Sans-Serif;
	font-size: xx-large;
	color: #0c445c !important;
	}

h2 span a,
h2 span a:visited,
h3 span a,
h3 span a:visited {
	color: #0c445c !important;
	font-size: xx-large !important;
	}

.primary .entry-meta a, .primary .entry-meta a:visited, /* The Metalink class takes care of the comments, edit, rss and trackback links next to the titles */
.secondary .metalink a, .secondary .metalink a:visited,
.secondary span a, .secondary span a:visited {
	color: #0c445c;
	font-weight: normal;
	}

.counter a {
	color: #0c445c;
	}

.commentlist li {
	color: #0c445c;
	}

.commentlist li:hover {
	background: none;
	}

blockquote, #weightedcategories, .authorcomment {
	background: #0c445c;
	border-color: white;
	}

.primary img {
	background: #DDD7AC;
	}

.inputcontainer {
	margin-bottom: 6px;
	}

/* Gray Color */
small, .sidebar ul ul li, .sidebar ul ol li, .nocomments, ul#activity li small a, ul#activity li, .LSRow small, #searchcontrols small  {
	color: #777;
	}

/* Gray Color */
small, .sidebar ul ul li, .sidebar ul ol li, .nocomments, ul#activity li small a, ul#activity li, .LSRow small, #searchcontrols small  {
	color: #555;
	}

a, a:visited, .sidebar a:visited {
	color: #0c445c;
	}

.post p a:visited {
	color: #0c445c;
	}

#af-ela-menu li {
	border: none;
	background: transparent;
	}

#af-ela-menu, #af-ela-menu li {
	border-bottom: 1px solid #333;
	}

#af-ela-menu li.selected {
	background: #333;
	}

/* Hovering state of the table items */
#af-ela-year li:hover, #af-ela-month li:hover, #af-ela-post li:hover, #af-ela-category li:hover {
	background: #222;
	border-top: 1px solid #444;
	border-bottom: 1px solid #444;
	}

/* Active or hovered item in list */
#af-ela-year li.selected, #af-ela-month li.selected, #af-ela-post li.selected, #af-ela-category li.selected, #af-ela-post li:hover {
	background: #222;
	border-top: 1px solid #444;
	border-bottom: 1px solid #444;
	}

#af-ela-post {
	border-left: 1px solid #333;
	border-right: none;
	}

/* Rolling Archives Slider */
#current-content #pagetrack,
#dynamic-content #nested_pagetrack {
	margin: 0 auto;
	width: 218px;
	height: 18px;
	background: url('sliderbgleft.png') no-repeat center left;
}

#current-content #pagetrackend,
#dynamic-content #nested_pagetrackend {
	height: 18px;
	background: url('sliderbgright.png') no-repeat center right;
	}

#current-content #pagehandle,
#dynamic-content #nested_pagehandle {
	width: 18px;
	height: 18px;
	background: url('sliderhandle.png') no-repeat center center;
	cursor: e-resize;
}

Let me know if you see anything in there that could be causing this problem. Thanks everyone.