Sidebar color disappeared

Hi,

I am using 3 column layout and changed the width of primary and secondary sidebar. Here is the code I added in the editor

/* 3 column, content middle */
.col-3cm .main { background: url(img/sidebar/s-right-s2.png) repeat-y right 0; }
.col-3cm .main-inner { background: url(img/sidebar/s-left.png) repeat-y left 0; padding-left: 200px; padding-right: 300px; }
.col-3cm .s1 { float: left; margin-left: -200px; }
.col-3cm .s2 { float: right; margin-right: -300px; /* ingenuity! */ position: relative; right: -100%; }
.col-3cm .content { float: right; }

/* sidebar primary */
.s1 { width: 200px; z-index: 2;}
.s1:hover { z-index: 98; /* social icons tooltip above header nav */ }
.s1 .sidebar-top,
.s1 .sidebar-toggle { background: #3b8dbd; }
@media only screen and (min-width: 479px) and (max-width: 960px) {
	.s1 .sidebar-top { background: none!important; border-bottom: 1px solid #ddd; }
	.s1 .sidebar-top p { color: #666; }
	.s1 .sidebar-top .social-links .social-tooltip { color: #666; }
}

/* sidebar secondary */
.s2 { width: 300px; z-index: 1; }
.s2 .sidebar-top,
.s2 .sidebar-toggle { background: #82b965; }
@media only screen and (min-width: 479px) and (max-width: 1200px) {
	.s2 .sidebar-top { background: none!important; border-bottom: 1px solid #ddd; }
	.s2 .sidebar-top p { color: #666; }
}

After adding this grey color in the side bar is not visible, (the background shows as white). I even tried re-sizing the s-left (200px) and s-right-s2 (300px) images to match the width defined in my code.

Please advise how I can bring the background color to sidebars.

Thanks