html, body {
	height:100%;
	padding:0;
	margin:0;
}
#modalMask {
	display:none;
}
body.modal {
	overflow:hidden;
}
body.modal #bodyWrapper {
	overflow:auto;
}
body.modal #modalMask {
	display:block;
	position:fixed;
	z-index:1000;
	height:100%;
	width:100%;
	overflow:auto;
}
#modalFocusLink, #modalBlurLink, #modalBlurButton, #modalBodyBlurButton, #modalBodyBlurLink {
	display:block;
	position:absolute;
	width:1px;	/*for Safari*/
	height:1px;	/*for Safari*/
	overflow:hidden;
	padding:0; border:0; outline:0; margin:-1px;
	background:transparent; color:transparent;
}
#modalMaskOverlay {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background-color:gray;
	opacity:0.5;
}
#modalTable, #modalTableIE {
	position:relative;
	display:table;
	height:100%;
	margin:0 auto;
}
#modalCell, #modalCellIE {
	display:table-cell;
	vertical-align:middle;
}
#modalContent {
	margin:auto;
	padding:11px;
	overflow:auto;
	background-color:#FFF;
	border:5px solid #888;
	-moz-border-radius:16px;
	-webkit-border-radius:16px;
	-khtml-border-radius:16px;
	-moz-box-shadow:0 0 80px 0 #000;
	-webkit-box-shadow:0 0 80px #000;
	
	/*dialog box width (minus padding & border)*/
	min-width:368px;	/*400px*/
	max-width:668px;	/*700px*/
	
	/*dialog box height (minus padding & border)*/
	min-height:368px;	/*400px*/
	max-height:668px;	/*700px*/
}
#bodyWrapper {
	height:100%;
}

@media only screen and (max-device-width:480px) {	/*e.g., the iPhone*/

html, body {
	height:auto;
	overflow:visible;
	position:relative;
}
body.modal #modalMask {
	height:auto;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	overflow:visible;
}
#modalTable {
	height:auto;
}
#modalContent {
	max-width:none;
	max-height:none;
	-webkit-box-shadow:none;
}
#bodyWrapper {
	height:auto;
	overflow:visible;
}

}