/*	CSS for MODAL DIALOGS and the AJAX CONTACT FORM 
	see contact.js for a full list of credits and comments 
	
	NOTES: 
	- This CSS should be included in your site CSS and does not
	  need to be loaded as a separate file (save yourself some
	  http roundtrips.
	
	- the css declarations that use > are hidden from IE
	
	CUSTOMIZATION: To integrate with the look and feel of your
	web site you'll mostly you'll want to customize the colors
	and opacity of the dialog. You might also want to change the 
	look of the buttons. Go wild! */

/* AJAX CONTACT FORM */

#message_form #contactFormArea {
	padding: 10px;
	font-size: 12px;
}

#message_form #contactFormArea form {
	padding: 0;
	margin: 0;
}

#message_form #loadBar, #message_form #responseMessage { 
	display: none;
	margin-top: 6px;
	font-weight: bold;
	color: white;
}

#message_form label { 
	display: block;
	font-weight: normal;
	margin: 2px 2px;
}

#message_form fieldset { 
	border: 0;
	margin: 0 0 10px;
	padding:0;
 }
 
.field_element {
 	margin-bottom: 8px;
}

#message_form input, #message_form textarea { 
	width: 290px;
	font: 12px/14px 'courier new',courier,monospace; 
	background-color: #333;
	color: white;
	padding: 3px;
	margin: 1px 0;
	border: 1px solid #666; 
}


div.remediation {
	color: #FFD;
	text-indent: -12px;
	margin: 4px 6px 6px 30px;
	clear: left;
	display: none;
}

/* MODAL DIALOGS */

#modalMask, #modalContainer {
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
}

#modalMask {
	background-color: #444;
	opacity: .4;
	background-image:url(/img/mask.png); /* required by MSIE to prevent actions on lower z-index elements */
    background-repeat: repeat;
	z-index:9999;
	/* opacity for IE is handled in the script to aviod displaying an error in the Mozilla JS console */
}

#modalContainer {
	background-color: transparent;
	z-index:10000;
}

#modalBox {
	font-family: Arial, Helvetica, sans-serif;
	position:relative;
	width:320px;
	min-height: 100px;
	margin-top: 100px;
	border: 2px solid #000;
	background-color: #333;
	background-repeat: no-repeat;
	background-position: 4px 28px;
	display: none;
	padding: 0;
	color: white;
}

#modalContainer > #modalBox {
	position:fixed;
}

#modalBox h1 {
	width: 100%;
	font-size: 14px ;
	font-weight: normal;
	margin:0;
	background-color: #666;
	color: #fff;
	border-bottom: 1px solid #CCC;
	padding: 5px 0 5px 10px;
	font-variant: small-caps;
}

#modalContainer > #modalBox h1 {
	width: auto;
}

#modalBox p {
	margin: 6px 0 4px;
	font-size: 12px ;
	padding: 0px 16px 0px 8px;
	line-height: 160%;
}

#modalBox input, #modalBox textarea { 
	border: 1px solid #999;
	font-family: monospace;
	padding: 1px;
	background-color: #333;
	color: white;
}

#modalBox p b {
	color: #990000;
}

#modalBox input#promptField {
	width: 198px;
}

#modalBox .checkbox {
	border-width: 0;
}

#modalText {
	margin-left: 48px;
}

#modalBox .textbuttonright {
	display: block;
	margin-right: 12px;
	margin-bottom: 8px;
}


@media print {
  #modalBox, #modalContainer, #modalMask, .textbuttonright, .textbuttonleft, .textbutton, #return_link, .paging_controls {
  	display: none !important; 
  }
}


/* FLOATING STYLED BUTTONS */

div.textbuttonleft, div.textbuttonright {
	border: black 1px solid;
	margin: 3px 2px 2px;
}

div.textbuttonleft {
	margin-left: 3px;
	float: left;
}

div.textbuttonright {
	margin-right: 3px;
	float: right;
}

div.textbuttonright a, div.textbuttonleft a, div.textbuttonright a:visited, div.textbuttonleft a:visited {
	display: block;
	background-color: #666; 
	border: #ccc 1px solid; 
	padding: 2px 7px 2px 6px; 
	font-family: arial, helvetica, sans-serif; 
	font-weight: bold; 
	font-size: 11px; 
	color: white; 
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

div.textbuttonright a.small, div.textbuttonleft a.small, div.textbuttonright a.small:visited, div.textbuttonleft a.small:visited {
	padding: 1px 4px 2px 3px; 
	font-size: 10px; 
	text-transform: none;
	font-variant: normal;
}

div.textbuttonright a:hover, div.textbuttonleft a:hover, span.textbutton a:hover, div.textbuttonright a.small:hover, div.textbuttonleft a.small:hover, span.textbutton a.small:hover  {
	color: white; 
	text-decoration: none;
	background-color: #333333 ;
}

div.textbuttonright a.dim, div.textbuttonleft a.dim, div.textbuttonright a.dim:hover, div.textbuttonleft a.dim:hover,div.textbuttonright a.dim:visited, div.textbuttonleft a.dim:visited, span.textbutton a.dim, span.textbutton a.dim:hover {
	background-color: #C0C0C0; 
	color: white;
	border-color: white;
}