/* CSS Document for the grey colour scheme. Must inherit from 'markup.css' to work as intended. */

/* ----------------------------------------------------------- Utilities and globals */
.ruler {
	border: 0.1em dashed #000;
}
a {
	color: #000;
	text-decoration: underline;
}
a:hover {
	color: #003333;
	text-decoration: none;
}
a:focus {
	background-color: #ffcc33;
	color: #000;
}
.image {
	background-color: #cecece;
} 
/* ----------------------------------------------------------- Forms markup */
.inputform fieldset, .inputformLong fieldset {
	border: 0.1em solid #464646;
}
.inputform legend, .inputformLong legend {
	color: #000;
}
/* ----------------------------------------------------------- Markup colours */
body {
	background-color: #000;
	background-image: url(../images/bg-grey.jpg);
	background-repeat: repeat-x;
	background-position: top;
}
#controlBar {
	border-bottom: 1em solid #fff;
	background-color: #cecece;
	color: #000000;
	background-image: url(../images/equalityFooterGrey.gif);
}
#branding { 
	background-position: center left;
	background-repeat: no-repeat; 
	margin: 2em auto;
}
#mainNav {
	background-color: #cecece;
}
		#mainNav ul li a {
			background-color: #464646;
			color: #fff;
		}
		#mainNav ul li a:hover {
			background-color: #003366;
			color: #fff;
		}
		#mainNav ul li a:focus {
			background-color: #ffcc33;
			color: #000;
		}
#content {
	background-color: #fff;
}
#mainContent {
	background-color: #cecece;
	padding-bottom: 5%;
}
	#mainContent h1 {
		background-color: #464646;
		color: #fff;
	}
	#mainContent h2 {
		background-color: #464646;
		color: #fff;
	}
	#mainContent img {
		background-color: #464646;
	}
#secondaryContent {
	background-color: #fff;
	background-image: url(../images/top-curve.gif);
}
#secondaryContent h2  {
	border-bottom: 0.1em dashed #000;
}
#footer {
	background-color: transparent;
}
	#footer ul {
		border-top: 0.1em dashed #fff;
	}
		#footer ul li {
			color: #fff;
		}
		#footer ul li a {
			color: #fff;
		}