/* comments.css
 *
 * contains CSS definitions for the comment system
 */

/* the following definitions apply to the list of past comments at the top of the comments section */

#commentList { /* the div containing all of the past comments */
	float: left;
	clear: both;
	width: 95%;
	margin: 5px 20px; /* top/bottom and right/left */
}
#commentList .commentBlockEven { /* one comment - even rows */	
	width: inherit;
	border-style: solid;
	border-width: 1px;
	background-color: LightGreen;
	padding: 5px 5px; /* top/bottom and right/left */
	margin: 2px 0px;
	float: left;
	clear: both;
}
#commentList .commentBlockOdd { /* one comment - odd rows */
	width: inherit;
	border-style: solid;
	border-width: 1px;
	background-color: LightCyan;
	padding: 5px 5px; /* top/bottom and right/left */
	margin: 2px 0px;
	float: left;
	clear: both;
}
#commentList .commentAvatar {
	background-color: inherit;
	float: left;
	clear: left; /* added */
	margin: 4px 4px; /* top/bottom and right/left */
	border-style: solid;
	border-width: 1px;
	height: 40px;
	width: 40px;
}
#commentList .commentBlockPending { /* a comment visible to an admin but otherwise hidden */
	border-color: red;
}
#commentList .commentAdminHeader { /* the header of one comment used for admin-only info */
	background-color: inherit;
	width: inherit;  
	padding: 5px 0px; /* top/bottom and right/left */
	border-style: none;  /* normally none, use solid for debug */
	border-width: thin;
	border-color: black;
	float: left;
	clear: both;  
}
#commentList .commentHeader { /* the header of one comment */
	background-color: inherit;
	width: 80%;   /* this affects placement of the *mark as spam* button, if too wide, the button will be below it */
	padding: 5px 0px; /* top/bottom and right/left */
	border-style: none;  /* normally none, use solid for debug */
	border-width: thin;
	border-color: black;
	float: left;
	clear: left;  
}
#commentList .commentHeader strong { /* strong text in the header of one comment */
	color: Crimson;
}
#commentList .commentContent { /* the body of one comment */
	background-color: inherit;
	width: inherit;
	float: left;
	clear: both;	
}
#commentList .editFields  { /* the frameset containing the top-of-message controls */
	background-color: inherit;
	width: 90%; /* controls placement of the *mark as spam* button, but firefox has some issues so it needs to be limited in width */
	float: left; /* added for firefox */
	clear: left;
	border-style: none;
	border-width: thin;
	border-color: black;
}
#commentList .editFields .editMsgButton { /* the span containing the Edit Message button */
	background-color: inherit;
	float: left;
	clear: both; 
	width: auto;
	border-style: none;  /* normally none, use solid for debug */
	border-width: thin;
	border-color: black;
}
#commentList .editFields .editMsgSPAM { /* the span containing the Mark as SPAM button */
	background-color: inherit;
	float: right;
	clear: right;
	width: 15%;
	border-style: none;  /* normally none, use solid for debug */
	border-width: thin;
	border-color: black;
}



/* the following definitions apply to the list of usernames */

#userList { /* the div containing the list of users */
	float: left;
	clear: both;
	width: 95%;
	margin: 5px 20px; /* top/bottom and right/left */
}
#userList #userListHeader { /* the div containing the header of the list of users */
	float: left;
	clear: both;
}
#userList .userListEven { /* one user entry - even rows */	
	width: inherit;
	border-style: solid;
	border-width: 1px;
	background-color: LightGreen;
	padding: 1px 5px; /* top/bottom and right/left */
	margin: 2px 0px;
	float: left;
	clear: both;
}
#userList .userListOdd { /* one user entry - odd rows */
	width: inherit;
	border-style: solid;
	border-width: 1px;
	background-color: LightCyan;
	padding: 1px 5px; /* top/bottom and right/left */
	margin: 2px 0px;
	float: left;
	clear: both;
}

/* the following definitons apply to the admin mode single message display */

#messageInfo { /* the div containing the list of users */
	float: left;
	clear: both;
	width: 95%;
	margin: 5px 20px; /* top/bottom and right/left */
}
#messageInfo #messageInfoHeader { /* the div containing the header of the message */
	float: left;
	clear: both;
}
#messageInfo .messageInfoBody { /* one message entry  */	
	width: inherit;
	border-style: solid;
	border-width: 1px;
	background-color: LightGreen;
	padding: 1px 5px; /* top/bottom and right/left */
	margin: 2px 0px;
	float: left;
	clear: both;
}


/* the following definitions apply to the posting block at the bottom of the page */

#debugMsgBlock { /* the div enclosing any debugging comments */
	float: left;
	clear: both;
}
#commentForm { /* the div enclosing the postComment form */
	width: 100%;
	float: left;
	clear: both;
}
#postComment { /* the form used for posting comments - encloses fieldset */
	width: 100%;
	float: left;
	clear: both;
}
#postComment #textTop { /* the block around the items at the top of the form */
	width: 95%;
	float: left;
	clear: both;  
}

#postComment #adminMode { /* the block around the "Admin Mode" text*/
	width: auto; /* was 95% */
	padding: 5px 0px; /* top/bottom and right/left */
	float: left;
	clear: both;  
}
#postComment #adminMode .adminModeHeader { /* "Admin Mode" message */
	color: Crimson;
	text-shadow: 1px 1px black;
	width: inherit;
	float: left;
	clear: both;
}
#postComment #adminMode .adminModeElement { /* unused at present */
	background-color: LightCyan;
	color: red;
	width: inherit;
	margin: 0px 0px; /* top/bottom and right/left */
	padding: 5px 2em; /* top/bottom and right/left */
	border-style: solid;
	border-width: 1px;
	float: left;
	clear: both;
}

#postComment #textError { /* the block around any error message(s) */
	width: 95%;
	padding: 5px 0px; /* top/bottom and right/left */
	float: left;
	clear: both;  
}
#postComment #textError .textErrorHeader { /* title in preview window */
	width: inherit;
	float: left;
	clear: both;
}
#postComment #textError .textErrorElement { /* text in preview window */
	background-color: LightCyan;
	color: red;
	width: inherit;
	margin: 0px 0px; /* top/bottom and right/left */
	padding: 5px 2em; /* top/bottom and right/left */
	border-style: solid;
	border-width: 1px;
	float: left;
	clear: both;
}
#postComment #textPreview { /* the block around the preview of the posted text */
	width: 95%;
	padding: 5px 0px; /* top/bottom and right/left */
	float: left;
	clear: both;  
}
#postComment #textPreview .textPreviewHeader { /* title in preview window */
	width: inherit;
	float: left;
	clear: both;
}
#postComment #textPreview .textPreviewElement { /* text in preview window */
	background-color: LightCyan;
	width: inherit;
	margin: 0px 0px; /* top/bottom and right/left */
	padding: 5px 1em; /* top/bottom and right/left */
	border-style: solid;
	border-width: 1px;
	float: left;
	clear: both;
}
#postComment #captchaBlock { /* the block around the captcha display and entry section */
	margin-top: 5px;
	float: left;
	clear: right;  /* allow this to float right of the authButtons */
	border-style: solid;
	border-width: 1px;
	background-color: WhiteSmoke;
}
#postComment #captchaBlock .captchaSet { /* one row in captchaBlock */
	float: left;
	clear: both;
	padding: 5px 5px 5px 5px; /* top, right, bottom, left */
}
#postComment #captchaBlock .captchaSet .controlLabel { /* one label of a set in a captchaSet */
	padding: 0 35px 0 0px; /* top, right, bottom, left */
} 
#postComment #captchaBlock .captchaSet .captchaImage { /* one icon in set of images */
	float: left;
	padding: 5px 5px 5px 5px; /* top, right, bottom, left */
	margin: 5px 5px 5px 5px;
	border-style: solid;
	border-width: 1px;
	height: 40px;
	width: 40px;
}
#postComment #recaptcha {
	margin: 5px 5px 5px 5px;
	padding: 5px 5px 5px 5px;
}
#postComment .footerBlock { /* text at the bottom of the comment form, below submission buttons */
	float: left;
	clear: both;
}
#postComment .footerSet { /* one row in foorterBlock */
	float: left;
	clear: both;
}
#postComment #authButtons { /* buttons for selecting type of authentication */
	margin-top: 5px;
	padding: 10px 0 0 5px; /* top, right, bottom, left */
	float: left;
	clear: left;  /* was both - allow captcha to float to the right of this */
}
#postComment #authButtons .staticControls { /* buttons for selecting type of avatar to use */
	padding: 0 0 0 10px; /* top, right, bottom, left */
	float: left;
	clear: both; /*  */
}
#postComment #authButtons .staticControls .controlLabel { /* buttons for selecting type of avatar to use */
	padding: 0 0 0 15px; /* top, right, bottom, left */
}
#postComment .labelSet { /* text label above button sets - outside the authentication span */
	float: left;
	clear: both; /* was both, then left - allow recaptcha to float to the right, but it wont for some reason */
}
#postComment #authButtons .labelSet { /* text label above button sets - inside the authentication span */
	float: left;
	clear: both; /* was both, then left - allow recaptcha to float to the right, but it wont for some reason */
}
#postComment #authButtons .controlSet { /* Force each button/text pair onto a line of its own */
	padding: 10px 0 0 5px; /* top, right, bottom, left */
	float: left;
	clear: both;
}
#postComment #authFieldsOne { /* Fields for poster name etc */
	float: left;
	clear: both;
}
#postComment #authFieldsTwo { /* Fields for poster name etc */
	float: left;
	clear: both;
}
#postComment #authFieldsThree { /* Fields for poster name etc */
	float: left;
	clear: both;
}
#postComment #authFieldsFour { /* Fields for poster name etc */
	float: left;
	clear: both;
}
#postComment #authFieldsFive { /* Fields for poster name etc */
	float: left;
	clear: both;
}

#postComment .authFields .inputSet { /* Force each label/input/text set onto a line of its own */
	padding: 0 0 0 25px; /* top, right, bottom, left */
	float: left;
	clear: both;
}
#postComment .authFields label { /* set width of label area left of input boxes */
	padding: 0 0 0 5px; /* top, right, bottom, left */
	float: left;	/* required for width to have an effect */
	width: 7em;	
}

#postComment #commentControl { /* info and controls for comment submission/preview */
	margin: 10px 0 10px 0;  /* top, right, bottom, left */
	float: left;
	clear: both;
} 
#postComment #commentControl .commentAvatar {
	background-color: inherit;
	float: left;
	clear: left; /* added */
	margin: 4px 4px; /* top/bottom and right/left */
	border-style: solid;
	border-width: 1px;
	height: 40px;
	width: 40px;
}
#postComment #commentSubmission { /* buttons for comment submission/preview */
	/* margin: 10px 0 10px 0;   top, right, bottom, left */
	float: left;
	clear: both;
} 
#postComment #commentBox label { /* label text above text input box */
	float: left;
	clear: both;
}

#postComment #commentBox textarea { /* actual text input box */
	float: left;
	clear: left;  /* allow commentRules to float to the right */
}

#postComment #commentRules { /* descriptive text about comments */
	float: left;
	clear: right;  /* allow this to float right of the commentBox textarea */
}

#postComment fieldset { /* the fieldset enclosing the comment submission fields and controls */
	border: none;
	padding:1.2em 1.2em 1.2em 1.2em; 
	margin:0 0 0 -4px;  /* top, right, bottom, left */
	position:relative;
	background-color:#00CC00;   /* rgb(11,140,11) = my usual green, 33FF66 = light green, 00CC00 = medium green */
	border:1px solid #999;
}
#postComment legend { /* the legend box above the comment submission fieldset */
	margin: 0 0 0 0;  /* top, right, bottom, left  */
	background-color: #00CC00;  
	padding: 0.2em 0.5em;  
	border: 1px solid #999;
	font-weight: bold;
}
#postComment ul { /* used in commentRules descriptive text */
	margin-top: 5px;
	float:left;
}
#postComment li { /* used in commentRules descriptive text */
	list-style:none;
}
#postComment small { /* used in commentRules descriptive text */
	color: black;
}
/* #postComment span { outline: 1px dashed red; }  debug - comment whole line out when not in use */
#postComment #adminControl { /* controls for admin functions */
	margin: 10px 0 10px 0;  /* top, right, bottom, left */
	float: left;
	clear: both;
}
#postComment .adminSpan {
	float: left;
	clear: both;
}
#postComment #adminControl .adminSpan .adminControlLabel {
	padding: 0 0 0 10px; /* top, right, bottom, left */
}
#postComment .adminFields .inputSet { /* Force each label/input/text set onto a line of its own */
	padding: 0 0 0 25px; /* top, right, bottom, left */
	float: left;
	clear: both;
}
#postComment .adminFields label { /* set width of label area left of input boxes */
	padding: 0 0 0 5px; /* top, right, bottom, left */
	float: left;	/* required for width to have an effect */
	width: 7em;	
}
#postComment #adminIPADDR {
	width: 65%;
	font-size: 1em;
	font-family:"Courier New",Courier;
}
#postComment #adminIPProxy {
	width: 90%;
	font-size: 1em;
	font-family:"Courier New",Courier;
}

#postComment #userControl { /* controls for admin functions */
	margin: 10px 0 10px 0;  /* top, right, bottom, left */
	float: left;
	clear: both;
}
#postComment .userSpan {
	float: left;
	clear: both;
}
#postComment #userControl .userSpan .userControlLabel {
	padding: 0 0 0 15px; /* top, right, bottom, left */
}
#postComment .userFields .inputSet { /* Force each label/input/text set onto a line of its own */
	padding: 0 0 0 25px; /* top, right, bottom, left */
	float: left;
	clear: both;
}
#postComment .userFields label { /* set width of label area left of input boxes */
	padding: 0 0 0 5px; /* top, right, bottom, left */
	float: left;	/* required for width to have an effect */
	width: 7em;	
}