/* NetChain Communications Web Framework Blog */

/*	Changes:
	10/17/2023 12:58PM: Added H2 for Subtitle
	10/10/2009 5:55AM:  Changed: TABLE.BlogComments to TABLE.BlogCommentsHeader
		Added: TABLE.BlogComments TD.BlogCommentsBlock

	Don't use TABLE:margin, instead use TD:padding above.
*/



/**************************************************************/
/* Global Overwrites */
BODY		{ background-color: #444; }
DIV.Body	{ background-color: #E0E0E0; box-shadow: 10px 10px 14px 1px #111; border: 2px solid #000; }
FOOTER		{ margin-top: 40px; }

/**************************************************************/
/* Path */
DIV.BlogPath		{ color: #000000; margin-top: 20px; }
A.BlogPath			{ color: #000000; text-decoration: underline ! important; }
A.BlogPath:Hover	{ text-decoration: none; }
DIV.BlogRSS			{ color: #000; }
DIV.BlogRSS IMG		{ vertical-align: bottom; width: 22px; height: 22px; }
/**************************************************************/
/* Signup Form */
TABLE.BlogSignup		{ background-color: #E9EDD4; border: 1px solid #404616; }
TABLE.BlogSignup TH		{ text-align: right; }
P.BlogSignupError		{ border: 1px solid #000; background-color: #AA0000; padding: 15px 20px; margin: 10px 0px; color: #FFF; }
P.BlogSignupError A		{ text-decoration: underline ! important; color: #FFFF00 ! important; font-weight: normal ! important; } /* Remove Importants from the new design */
P.BlogSignupOK			{ border: 1px solid #008000; background-color: #CAFFCA; padding: 15px; margin: 10px 0px; }

/**************************************************************/
TABLE.BlogFrame	{ margin: 5px 0px; width: 100%; border-collapse: collapse; }
H3.BlogTitle	{ font: 400 20pt Oswald,sans-serif; border-bottom: 4px solid #000; margin: 10px 0px 20px; }
H3.BlogTitle A	{ color: #000; }
H3.BlogTitle A:Hover{ color: #A00000; }

DIV.BlogHead	{ display: flex; justify-content: space-between; align-items: flex-start;}
DIV.BlogHead P	{ display: block; margin: 0px; color: #000; background-color: #D0D0D0; padding: 10px 20px; border: 1px solid #AAA; font-size: 13pt; }
DIV.BlogHead B	{ font-weight: 400; display: inline-block; margin-right: 5px; }
DIV.BlogHead A	{ color: #000070; }

A.BlogDateDay:Hover,
A.BlogDateMonth:Hover,
A.BlogDateYear:Hover,
A.BlogName:Hover,
A.BlogAuthor:Hover	{ color: #A00000 ! important; text-decoration: underline ; }



/**************************************************************/


TD.BlogBody			{ padding: 20px; border: 1px solid #AAA; background: #FFF; font-size: 13.5pt; color: #444; }
TD.BlogBody P		{ font-size: 13.5pt; color: #444; }
TD.BlogBody A		{ color: #000070; }
TD.BlogBody A:Hover	{ color: #A00000; }
TD.BlogBody IMG.BlogPhoto	{ }
TD.BlogBody IMG.CoverImage,
TD.BlogBody ARTICLE IMG		{ width: 100%; max-width: 1112px; }
TD.BlogBody DIV.fb-like		{ margin-top: 10px; }


TD.BlogBody IMG.CoverImage	{ }


TABLE.BlogArticle	{ width: 100%; margin-top: 20px; }

A.BlogPhoto 		{ }
IMG.BlogPhoto		{ border: 1px solid black; margin: 0px 0px 5px 5px; }

DIV.BlogMore		{ color: #444; margin: 20px 0px 10px 0px; border-top: 1px solid #666; padding-top: 5px; font-size: 14pt; }
A.BlogMore			{ color: #FF80FF; text-decoration: underline ! important; display: inline-block; margin-left: 10px; }
A.BlogMore::after	{ content: "\f101"; font: 14pt FontAwesome; margin-left: 5px; padding: 0px 5px; color: #FFF; background-color: #FF0000; }
A.BlogMore:Hover	{ color: var(--MenuHover); text-decoration: none ! important; }



/**************************************************************/
/* Comments */

TD.BlogCommentsBlock	{ padding: 15px 15px 5px 15px; }

TD.BlogComments		{ padding: 0px 2px 2px 2px; } /* That matches this */

TABLE.BlogComments	{ border: 1px solid #AAA; width: 100%; margin-top: 20px;; }
TABLE.BlogCommentsHeader	{ width: 100%; }

TD.BlogCommentsLink	{ text-align: right; }

/*
A:Visited.BlogCommentsLink,
A:Active.BlogCommentsLink,
A:Hover.BlogCommentsLink,
A:Link.BlogCommentsLink,
A.BlogCommentsLink			{ color: #000080 ! important; text-decoration: underline ! important; font-weight: normal ! important; font-size: 10pt; font-family: Arial,Helvetica; }
A:Hover.BlogCommentsLink	{ color: #A00000 ! important; text-decoration: none ! important; }
*/

FORM.BlogComment INPUT[type="submit"] { color: #000000; text-shadow: 1px 1px 0px #EEEEEE;
		padding: 3px 15px; border-radius: 3px; border: 1px solid #9E9E9E; font: 13.5pt 'PT Sans',sans-serif;
		background: #E8E8E8 linear-gradient(to bottom, #F8F8F8, #D0D0D0); text-decoration: none; }

DIV.BlogCommentForm		{ }
TABLE.BlogCommentsHeader TD	{ color: #000; }
TABLE.BlogCommentsHeader A	{ color: #000070; text-decoration: underline; }
TEXTAREA.BlogComment	{ width: 100%; height: 60px; }



TABLE.BlogComment	{ border: 0px solid black; width: 100%; margin: 25px 0px; }
TEXTAREA.BlogComment{ font: 13.5pt 'PT Sans',sans-serif; }
TD.BlogUser			{ background-color: #D0D0D0; border-top: 1px solid #AAA; padding: 3px 15px; color: black; }
TD.BlogCommentDate	{ background-color: #D0D0D0; border-top: 1px solid #AAA; padding: 3px 15px; color: black; text-align: right; }
TD.BlogComment		{ background-color: #F0F0F0; padding: 5px 15px 15px; color: black; }








DIV.BlogRSS		{ margin-top: 20px; }

/**************************************************************/
/* Paging */
DIV.BlogPaging			{ }
UL.BlogPaging			{ margin: 20px 0px 0px; padding: 0px; list-style: none; }
UL.BlogPaging LI		{ display: inline-block; font: 13.5pt 'PT Sans',sans-serif; text-align: center; }
/*
LI.BlogPageNav,
LI.BlogPageSel,
LI.BlogPageIdx			{ border: 1px solid #404616; }
LI.BlogPageSel			{ color: #404616; }
LI.BlogPageIdx			{ color: #7F8851; background-color: #404616; }
LI.BlogPageNav			{ color: #7F8851; background-color: #404616; width: 50px; }
*/
LI.BlogPageTot			{ color: #404616; }
LI.BlogPageTot DIV		{ margin: 0px 10px; color: #000; background-color: #D0D0D0; padding: 3px 10px;
					      border: 1px solid #AAA; }

LI.BlogPageNav U,
LI.BlogPageNav A,
LI.BlogPageSel,
LI.BlogPageIdx A	{ color: #000000; text-shadow: 1px 1px 0px #EEEEEE;
		padding: 3px 15px; border-radius: 3px; border: 1px solid #9E9E9E;
		background: #E8E8E8 linear-gradient(to bottom, #F8F8F8, #D0D0D0); text-decoration: none; }

LI.BlogPageSel	{ background: #00A000; color: #FFF; text-shadow: none; }

LI.BlogPageNav U	{ text-decoration: none; color: #999; }

LI.BlogPageNav,
LI.BlogPageSel	{ margin: 2px 3px 3px 2px; }
LI.BlogPageIdx 	{ padding: 0px; }



/* Facebook Like Button */
DIV.fb-like				{ display: block ; }

/* #6B150C #364023 #852910 #FFFF00 */

TABLE.BlogTools		{ margin: 20px 0px 0px 0px; }
TD.BlogFav			{ font: 13px 'lucida grande',tahoma,verdana,arial,sans-serif; color: #333; padding: 0px 15px 0px 0px; }
TD.BlogFb			{ padding: 0px; }
TD.BlogFav IMG		{ border-width: 0px; padding-right: 5px; }

/**************************************************************/
/* Articles */

H2	{ font: 300 20pt Oswald,sans-serif; margin: 0px 20px 84px 0px; }
TD.BlogBody A[rel="Gal[Pix]"] { border: 1px solid black; background-color: #EAEAEA; padding: 10px;
	margin: 15px auto; box-shadow: 4px 4px 8px 2px #00000052; display: block; overflow: overlay; }
TD.BlogBody A[rel="Gal[Pix]"] IMG.CoverImage	{ max-width: 1090px; }
DIV.Pix		{ border: 1px solid black; background-color: #EAEAEA; padding: 10px; max-width: 620px; margin: 15px auto; box-shadow: 4px 4px 8px 2px #00000052; }
DIV.Pix IMG	{ width: 100%; }
DIV.Pix P	{ margin: 0px; font-size: 12pt; font-style: italic; }

A.Play	{ display: inline-block; border: 1px solid #AAA; padding: 10px 15px; border-radius: 4px;
    background: #E5E5E5 linear-gradient(#F4F4F4, #D8D8D8); box-shadow: 4px 4px 12px 2px #0000003d; }
A.Play IMG	{ width: 16px ! important; height: 16px ! important; margin-right: 5px; vertical-align: baseline;
			  margin-bottom: -1px; }



@media (min-width: 661px) {
	DIV.BlogHead P.BlogAuthor	{ margin: 0px 10px; }
}
@media (max-width: 660px) {
	DIV.BlogHead	{ flex-wrap: wrap; gap: 10px; }
	DIV.BlogHead P	{ width: 100%; }
}