/*
	Index Page
	===================================================
 */
.clearboth{ clear: both; }
/* Main */
#MainBlock { position: relative; overflow: hidden;
 background-color: #CFE1EF; 
 /*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 7px; }
#Link a { vertical-align: baseline; 
	/*text-decoration: underline; */
}
#Link a:hover { text-decoration: underline; }
#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: 40px; }
	#Logo img { width: 237px; }

	#Title { position: absolute; right: 69px; top: 217px; }
	#Title img { width: 318px; }

	#Graphic { position: absolute; top: 17px; left: 0px; }
	#Graphic img { width: 617px; }

	#MainContent { position: absolute; right: 160px; top: 360px; }
	#MainContent h2 { margin-top: 10px; color: #006770!important; }
	#MainContent ul { padding: 10px 0; }
	#MainContent ul li { padding: 5px 0 5px 20px; color: #277BB0; }

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

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

@media screen and (max-width:1024px) {
	#Logo { position: absolute; right: 40px; top: 20px; }
	#Logo img { width: 237px; }

	#Title { float: right; padding: 180px 40px 0 0; }
	#Title img { width: 318px; }

	#Graphic { position: absolute; top: 17px; left: 0px; 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: 100px; border-bottom: 1px solid #ccc; }
    #Link ul li { padding: 0;  float: left; width: 50%;}
	#Link ul li.Section:before { padding: 0; content: none; }
	#Link a { text-align: center; padding: 8px 0; border-bottom: 1px solid #ccc; line-height: 2em; }
	#Link span { display: none; }

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

@media screen and (max-width:768px) {
	#Logo { position: absolute; right: CALC((100% - 237px)/2); }
	#Logo img { width: 237px; }

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

	#Graphic { position: static; margin-left: 0; margin-top: 0; margin-bottom: 0; }
	#Graphic img { width: 100%; }

	#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; }
    #Link ul li { padding: 0;  float: left; width: 50%;}

}

@media screen and (max-width:480px) {
	#Logo { position: absolute; right: CALC((100% - 237px)/2); top: 10px;}
	#Logo img { width: 237px; height: auto; }

	#Title img { width: 318px; height: auto; }
}

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

@media screen and (max-width:768px) {
	#MainBlock {
		background:rgba(202, 214, 238, 0.4)!important;
		background-image:none!important;
	}
	#Link {
		width:100%!important;
	}
}