/*
	Index Page
	===================================================
 */
/* Main */
#MainBlock { position: relative; overflow: hidden; background: url(../images/index_bg.png) no-repeat center top; background-size: 100% 100%; }

/* Logo */
#Logo { }
#Logo a { }
#Logo a img { max-width: 100%; height: auto; }

/* Title */
#Title { }
#Title .Year { }
#Title .Subject { }
#Title .Range { }

/* Graphic */
#Graphic { }
#Graphic img { max-width: 100%; height: auto; }

/* Main Content */
#MainContent { }

/* Link */
#Link { font-size: 0.8em; }
#Link ul { list-style: none; margin: 0; }
#Link ul li { padding: 0; vertical-align: baseline; }
#Link ul li.Section:before { content: "|"; vertical-align: baseline; padding: 0 2px; }
#Link a { vertical-align: baseline; text-decoration: underline; }
#Link a:hover { text-decoration: none; }
#Link span { vertical-align: baseline; }

/* WCAGLogo */
#WCAGLogo { }
#WCAGLogo a { display: inline-block; }
#WCAGLogo img { width: 88px; }


/*
	Colour
	===================================================
*/
#Link ul li.Section:before { color: #333; }


/*
	Z-Index
	===================================================
*/
#Logo { position: relative; z-index: 100; }
#Title { position: relative; z-index: 100; }
#Graphic { position: relative; z-index: 1; }
#MainContent { position: relative; z-index: 100; }
#Link { position: relative; z-index: 10; }
#WCAGLogo { position: relative; z-index: 10; }


/*
	Responsive
	===================================================
	Priority:	Size Max > Size Min > General
*/
@media screen and (min-width:1025px) {
	#Logo { position: absolute; right: 69px; top: 17px; }
	#Logo img { width: 288px; }

	#Title { position: absolute; left: 53px; top: 51px; }
	#Title img { width: 219px; }

	#Graphic { position: absolute; top: 116px; left: -125px; }
	#Graphic img { width: 950px; }

	#MainContent { position: absolute; right: 105px; top: 196px; }
	#MainContent h2 { margin-top: 8px; }
	#MainContent ul { padding: 3px 0; }
	#MainContent ul li { padding: 5px 0 5px 5px; }

	#Link { position: absolute; right: 50px; bottom: 50px; }
	#Link li { display: inline; }
	#Link a { display: inline; }

	#WCAGLogo { position: absolute; left: 50px; bottom: 50px; }
}

@media screen and (max-width:1024px) {
	#Logo { float: right; padding: 20px 30px; }
	#Logo img { width: 250px; }

	#Title { float: left; padding: 40px 20px 0; }
	#Title img { width: 200px; }

	#Graphic { position: absolute; top: 116px; left: -125px; margin-top: 2%; }
	#Graphic img { width: 80%; }

	#MainContent { clear: both; float: right; width: 30%; margin-top: 40px; }
	#MainContent h2 { margin-top: 8px; }
	#MainContent ul { padding: 3px 0; }
	#MainContent ul li { padding: 5px 0 5px 5px; }

	#Link { clear: both; padding-top: 30%; border-bottom: 1px solid #ccc; }
	#Link ul li.Section:before { padding: 0; content: none; }
	#Link a { display: block; text-align: center; border-top-width: 1px; padding: 8px 0; border-top: 1px solid #ccc; line-height: 2em; }
	#Link span { display: none; }

	#WCAGLogo { position: static; text-align: center; padding: 40px 0; }
	#WCAGLogo img { width: 110px; }
}

@media screen and (max-width:768px) {
	#Logo { float: none; padding: 20px 0; text-align: center; }
	#Logo img { width: 200px; }

	#Title { float: none; padding: 20px; text-align: center }
	#Title img { width: 200px; }

	#Graphic { position: static; margin-left: -20%; margin-top: -10%; margin-bottom: -10%; }
	#Graphic img { width: 120%; }

	#MainContent { position: static; float: none; width: auto; margin-top: 0; }
	#MainContent h2 { text-align: center; margin-top: 20px; padding: 30px 0 10px; border-top: 1px solid #ccc; }
	#MainContent ul { padding: 0; list-style: none; }
	#MainContent ul li { padding: 0; }
	#MainContent ul li a { display: block; text-align: center; padding: 5px; line-height: 2em; }

	#Link { padding-top: 30px; }
}

@media screen and (max-width:480px) {
	#Logo img { width: 150px; }

	#Title img { width: 150px; }
}

@media screen and (max-width:320px) {
}