HTML {
	position:relative;
	 height:100%;
	 width:100%;
}
BODY {
	background:#181F1B;
	 height:100%;
	 width:100%;
	 margin:0;
	 padding:0;
}
H1 {
	color:#600;
	font: 500 90px/100px "Ubuntu", Helvetica, sans-serif;
	text-shadow:#010 1px 1px 1px, #dfd -1px -1px 1px;
	text-align:center;
	margin:150px 0;
}
H2 {
	font: 700 28px/36px "Droid Serif", Helvetica, sans-serif;
	text-align:center;
}
H2 A {
	color:black;
	text-decoration:none;
}
H3 {
	font: 700 18px/24px "Droid Serif", Helvetica, sans-serif;
}
P, LI {
	font: 400 16px/24px 'Open Sans', Helvetica, Arial, sans-serif;
}
P {
	margin:0;
	padding:5px 10px;
}
.panel {
	height:100%;
	position:relative;
	border-bottom:1px solid #020;
	-moz-box-shadow:    0px 10px 10px 0px #010;
	-webkit-box-shadow: 0px 10px 10px 0px #010;
	box-shadow:         0px 10px 10px 0px #010;
}
.panel .selector {
	display:block;
	width:20px;
	height:1px;
}
.long {
	min-height:100%;
	height:auto;
}
.midline {
	position:absolute;
	top:50%;
	height:1px;
	width:100%;
}
.long .midline {
	position:relative;
	height:auto;
	padding:10% 0;
}
.info {
	position:relative;
	background:#CCF;
	background:rgba(204, 204, 255, 0.8);
	border-radius:10px;
	border:2px solid #030;
	-moz-box-shadow:    0px 3px 5px 0px #010, inset 0px 1px 0px 1px #dfd;
	-webkit-box-shadow: 0px 3px 5px 0px #010, inset 0px 1px 0px 1px #dfd;
	box-shadow:         0px 3px 5px 0px #010, inset 0px 1px 0px 1px #dfd;
	text-shadow: #dfd 0px -1px 1px;
	display:block;
	width: 960px;
	height: 600px;
	margin:-300px auto 0;
}
.long .info {
	height:auto;
	margin:0 auto;
	overflow:hidden;
}
.col {
	float:left;
	width:28%;
	margin:0 1.5% 100px 1.5%;
}
.first {
	margin-left:3%
}
#ux-show-en, #ux-show-moh, #ux-show-fr {
	display:none;	
}

@media screen and (max-width: 959px) {
.info {
	width:auto;
}
.col {
	float:none;
	width:auto;
	margin:0;
}
.first {
	margin-left:0;
}
.col H2 {
	border:outset 1px #333;
	background:#666;
	margin:0;
	position:relative;
}
.col H2 A {
	display:block;
	width:100%;
	padding:5px 40px;
}
.col H2 LABEL:AFTER {
	content:'';
	width:1px;
	height:1px;
	overflow:hidden;
	display:block;
	position:absolute;
	left:12px;
	top:15px;
	border-style:solid;
}
#ux-show-en:NOT(:CHECKED) ~ * .col[lang="en-ca"] H2 LABEL:AFTER ,
#ux-show-moh:NOT(:CHECKED) ~ * .col[lang="moh"] H2 LABEL:AFTER ,
#ux-show-fr:NOT(:CHECKED) ~ * .col[lang="fr-ca"] H2 LABEL:AFTER {
	border-color:transparent transparent transparent white;
	border-width:5px 5px 5px 10px;
}
#ux-show-en:CHECKED ~ * .col[lang="en-ca"] H2 LABEL:AFTER,
#ux-show-moh:CHECKED ~ * .col[lang="moh"] H2 LABEL:AFTER,
#ux-show-fr:CHECKED ~ * .col[lang="fr-ca"] H2 LABEL:AFTER,
.sel H2 LABEL:AFTER {
	border-color:white transparent transparent transparent;
	border-width:10px 5px 5px 5px;
}
.col P,.col H3 {
	overflow:hidden;
}
#ux-show-en:NOT(:CHECKED) ~ * .col[lang="en-ca"] P,
#ux-show-moh:NOT(:CHECKED) ~ * .col[lang="moh"] P,
#ux-show-fr:NOT(:CHECKED) ~ * .col[lang="fr-ca"] P {
	height:0;
	padding:0 10px;
}
#ux-show-en:NOT(:CHECKED) ~ * .col[lang="en-ca"] H3,
#ux-show-moh:NOT(:CHECKED) ~ * .col[lang="moh"] H3,
#ux-show-fr:NOT(:CHECKED) ~ * .col[lang="fr-ca"] H3 {
	height:0;
	margin:0;
}

#ux-show-en:CHECKED ~ * .col[lang="en-ca"] P,
#ux-show-moh:CHECKED ~ * .col[lang="moh"] P,
#ux-show-fr:CHECKED ~ * .col[lang="fr-ca"] P
.sel P  {
	height:auto;
	margin:auto;
	padding:5px 10px;
}
#ux-show-en:CHECKED ~ * .col[lang="en-ca"] H3,
#ux-show-moh:CHECKED ~ * .col[lang="moh"] H3,
#ux-show-fr:CHECKED ~ * .col[lang="fr-ca"] H3,
 .sel H3 {
	height:auto;
 }
}
#panel-title {
	background:top center url(images/title.jpg) fixed no-repeat;
	background-size:cover;
}
#panel-title .info {
	background:none;
	border:hidden;
	box-shadow:none;
}
#panel-intro {
	background:top center url(images/page2.jpg) fixed no-repeat;
	background-size:cover;
	z-index:-1;
}
#panel-intro .info {
	background:url(images/intro-top.jpg) top center no-repeat #CCF;
	background-color:rgba(204, 204, 255, 0.8);
	padding-top:380px;
}
#panel-poems {
	background:top center url(images/poems.jpg) fixed no-repeat;
	background-size:cover;
	z-index:-2;
}
#panel-howto {
	background:top center url(images/howto.jpg) fixed no-repeat;
	background-size:cover;
	z-index:-3;
}
#panel-howto .info {
	background:top center url(images/howto-top.jpg) scroll no-repeat;
	background:top center url(images/howto-top.jpg) scroll no-repeat, bottom center url(images/howto-btm.png) scroll no-repeat;
	background-color:rgba(204, 204, 255, 0.8);
	padding-top:380px;
	padding-bottom:260px;
}
#panel-manifest {
	background:top center url(images/manifest.jpg) fixed no-repeat;
	background-size:cover;
	z-index:-4;
}
#panel-manifest P {
	text-align:center;	
}
#panel-manifest IMG {
	margin:0 5px;	
}
#panel-links {
	background:top center url(images/links.jpg) fixed no-repeat;
	background-size:cover;
	z-index:-5;
}
#panel-thanks {
	background:top center url(images/intro.jpg) fixed no-repeat;
	background-size:cover;
	z-index:-6;
}
