/* Modal dialog styles */
.system_button_container {
	float: left;
}

.system_button {
	font-size: 0.9em;
	cursor: pointer;
	text-align: center;
	display: block;
	width: 75px;
	margin: 0 5px 0 5px;
	padding: 5px 0 0 0;
	color: #666;
	font-weight: bold;
	height: 22px;
	background: url(../img/btns/button_bg_up.gif) repeat-x;
	border: 1px solid #bbb;
}

.system_button:hover {
}

.system_button_container a:link, 
.system_button_container a:visited,
.system_button_container a:hover, 
.system_button_container a:active{
	color: #666;
	text-decoration: none;
}

#alert_modal,
#confirm_modal {
	display: none;
	background-color: #fff;
	width: 500px; 
	border: 2px solid #4a7b88;
	-moz-box-shadow: 0 0 10px 8px #aaa;  
	-webkit-box-shadow: 0 0 10px 8px #aaa; 
	box-shadow: 0 0 10px 8px #aaa; 
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#aaaaaa')"; 
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#aaaaaa'); 
}

#alert_modal_container,
#confirm_modal_container {
}

#alert_modal_container .header,
#confirm_modal_container .header {
	background-color: #4a7b88;
	height: 25px; 
	color: #fff; 
	font-weight: bold;
	font-size: 14px;
	line-height: 22px;
}

#alert_modal_container .header span,
#confirm_modal_container .header span {
	padding-left: 8px;
}

#alert_modal_container .message,
#confirm_modal_container .message {
	margin: 10px;
	font-size: 14px;
	padding: 0 5px 10px 75px;
	background: #fff url(../img/alert.gif) no-repeat top left;
}

#alert_modal h1,
#confirm_modal h1 {
	font-size: 20px;
}

#alert_modal_container .buttons,
#confirm_modal_container .buttons {
	float: right;
	padding: 10px 12px 10px 0;
} 

#alert_modal_container .buttons span,
#confirm_modal_container .buttons span {
	margin: 0 5px;
} 

#alert_modal_container a.modal-close,
#alert_modal_container a.modal-close:link,
#alert_modal_container a.modal-close:active,
#alert_modal_container a.modal-close:visited,
#confirm_modal_container a.modal-close,
#confirm_modal_container a.modal-close:link,
#confirm_modal_container a.modal-close:active,
#confirm_modal_container a.modal-close:visited {
	text-decoration: none; 
	font-weight: bold; 
	position: absolute; 
	right: 12px; 
	top: 2px; 
	color: #fff;
	background: none;
}

#alert_modal_container a.modal-close:hover,
#confirm_modal_container a.modal-close:hover {
	color: #ccc;
}

#alert_modal li,
#confirm_modal li {
	list-style-type: square;
	margin: 0.4em 0 0.4em 3em;
	line-height: 130%;
}

#alert_modal .clearfix,
#confirm_modal .clearfix {
	height: 12px;
}

/* ==========================================================================
   Responsive design styles
   ========================================================================== */

/* ============================= */
/* ! Layout for mobile version    */
/* ============================= */
@media handheld, only screen and (max-width: 767px) {
	#alert_modal,
	#confirm_modal {
		width: 95%;
		padding: 0;
		margin: 0;
		background: #fff;
	}

	#alert_modal_container .message,
	#confirm_modal_container .message {
		margin: 2px;
		padding: 0;
		background: none;
	}

	#alert_modal_container a.modal-close,
	#alert_modal_container a.modal-close:link,
	#alert_modal_container a.modal-close:active,
	#alert_modal_container a.modal-close:visited,
	#confirm_modal_container a.modal-close,
	#confirm_modal_container a.modal-close:link,
	#confirm_modal_container a.modal-close:active,
	#confirm_modal_container a.modal-close:visited {
		right: 30px; 
	}
	
	#alert_modal_container,
	#confirm_modal_container {
		font-size: 11px;
	}
}