Alter CSS with different pages

I currently have a design in which I wanted to bring down the "content" or #core section of the website on then main page. This is intended to bring down the content to allow us to display a slider in the background.

However, I am wanting to remove this certain attribute on pages other than the index.

@media screen and (min-width: 990px) {
	#core {
		margin-top: 450px !important;
	}

	.header-image {
		height: 700px !important;
	}

	.header-image:after {
		background: -moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.35) 75%,#F2F2F2) !important;
	/* FF3.6-15 */
		background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.35) 75%,#F2F2F2) !important;
	/* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0.35) 75%,#F2F2F2) !important;
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff',endColorstr=' #F2F2F2',GradientType=0) !important;
	/* IE6-9 */
	}
}

That is the specific code that brings down the #core element. I'm wanting to remove that from all pages or perhaps select pages. Any ideas?