/* banner info */
.bannerInfo {
	position: relative; 
	margin-top: 1.5em;
	width: 100%;
	min-width: 300px;
	max-width: 760px;
	height: 0;
	padding-top: 15.5263157%;
	padding-top: calc(118 / 760 * 100%);
	background: #045799 url('../img/packsafe_banner_notext.jpg') 50% 50% no-repeat;
	background-size: cover;
}
.bannerInfo > div { 
	position: absolute; 
	top: 20%;  
	transform: translateY(-20%);
	left: .5em;
}
.bannerInfo h2, .bannerInfo p {
	margin: 0;
	color: #FFF;	
}
.bannerInfo h2 { 
	font-size: 150%; 
	font-weight: 500;
}
.bannerInfo h2 > span { 
	margin-left: .15em;
	color: #55ACE3; 
	font-weight: 700;
}
.bannerInfo p {
	margin-top: -.15em;
	font-weight: 700;
	font-size: 70%;
	line-height: 1.2;
	word-spacing: -1px;
}
		
/* increase text size */
@media (min-width: 360px){ .bannerInfo h2 { font-size: 165%; } } 
@media (min-width: 480px){ 	
	.bannerInfo > div { left: .65em; }
	.bannerInfo h2 { font-size: 240%; }	
	.bannerInfo p {
		font-size: 85%;
		line-height: 1.25;		
	}
}	
@media (min-width: 600px){	
	.bannerInfo > div { left: .75em; }
	.bannerInfo h2 { 
		font-size: 300%; 
		letter-spacing: -.02em;
	}
	.bannerInfo p { 	
		line-height: 1.3;
		text-transform: uppercase; 
	}	
}
@media (min-width: 640px){ .bannerInfo p { font-size: 90%; } }	

/* full bg size */	
@media (min-width: 800px){	
	.bannerInfo {	
		width: 760px;
		height: 118px;			
		padding-top: 0;
	}	
	.bannerInfo > div { left: 1.5em; }
	.bannerInfo h2 { font-size: 350%; }
	.bannerInfo p { 
		font-size: 105%; 
		line-height: 1.35;
		word-spacing: normal;
	}
}

/* hazmat table */
th { white-space: nowrap; }
img.left { margin: 0 5px 0 0; }

td li { text-transform: capitalize; }

.name { display: block; }

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

.mark {
	display: block;
	/*font: 3.2em/80px "Arial Unicode MS", Webdings, Arial, sans-serif;*/
	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; }

.button {
	margin-top: 12px;
	text-align: center;
}
.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;
}
.button a:hover,
.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 100px;
	width: 462px;
}
.table.ui-dialog .ui-dialog-titlebar-close {
	margin-top: 0;
	top: 10px;
}

.contentDialog h2 { display: none; }