article > :not(.banner):not(#tabs) { max-width: 520px; }

/* banner */
.banner {
	margin: 1.5em 0 .25em;
	position: relative;
}
.banner figcaption {
	position: absolute;
	left: 8.5%;
	top: 83%;
	transform: translateY(-83%);
}
.banner > img { display: block; }
.banner p {
	margin: 0;
	font-size: .45rem;
	font-weight: 700;
	color: #FFF;
}

/* increase font size */
@media (min-width: 360px) {
	.banner p { font-size: .465rem; }
}

@media (min-width: 480px) {
	.banner p {
		font-size: .55rem;
		letter-spacing: -.01em;
	}
}

@media (min-width: 600px) {
	.banner figcaption {
		left: 8.75%;
		top: 82%;
		transform: translateY(-82%);
	}
	.banner p { font-size: calc(.7rem + .21vw); }
}
@media (min-width: 760px) {
	.banner figcaption { left: 8.8%; }
	.banner p {
		font-size: calc(.75rem + .20vw);
		word-spacing: -1px;
	}
}

/* hazmat table */
th { white-space: nowrap; }

@media (min-width: 776px) {
	.datatable a[href="more_info/?hazmat=16"] img { margin-bottom: 5.25em; }
	.datatable a[href="more_info/?hazmat=7"] img { margin-bottom: 2.5em; }
	.datatable a[href="more_info/?hazmat=20"] img { margin-bottom: 3.5em; }
}

td li { text-transform: capitalize; }

.name { display: block; }

.examples { font-size: .9em; }

.mark {
	display: block;
	margin-top: 12px;
	text-align: center;
}
.mark.true { color: #339900; }
.mark.false { color: #cc0000; }

.restrictions {
	display: block;
	margin-top: 12px;
	text-align: center;
}
.restrictions > b {
	background: #ffe405;
	border-radius: 50%;
	display: inline-block;
	font-size: 2.4em;
	line-height: 27px;
	margin: 0 auto;
	width: 27px;
}
.restrictions > i { display: block; }

table .button {
	margin-top: 12px;
	text-align: center;
}
table .button a {
	background: #223369 url("../img/arrow-blue-right.png") 100% 50% no-repeat;
	background: url("../img/arrow-blue-right.png") 100% 50% no-repeat, linear-gradient(#3c73a9, #223369);
     border-radius: 4px;
	box-shadow: 0 3px 3px #888;
	color: #fff;
	display: inline-block;
	line-height: 1;
	padding: 5px 16px 5px 6px;
	text-decoration: none;
}
table .button a:hover,
table .button a:focus {
	background: #3c73a9 url("../img/arrow-blue-right.png") 100% 50% no-repeat;
	color: #fff;
}

#modalContent { overflow: hidden; }

.ui-dialog-title #examples {
	font-size: .66em;
	line-height: 1.3;
	white-space: normal;
}
.table.ui-dialog .ui-dialog-title {
	background-repeat: no-repeat;
	min-height: 80px;
	min-width: 100px;
	padding: 0 0 0 110px;
	width: 462px;
}
.table.ui-dialog .ui-dialog-titlebar-close {
	margin-top: 0;
	top: 10px;
}

.contentDialog h2 { display: none; }