/*
	CSS for the blog plugin.

	Requires the following colors be defined:

/*
	--  magLayout  --
	set:magLayoutFrame="#f4f4f4"			Color of area surrounding the 4 blogbriefs in the mag layout front page
	set:blogBriefTrimColor="#bcbcbc"	Single pixel border around each blog brief on the mag layout front page
	set:blogBriefBGColor="white"			Background color of each blog brief
	set:featurePhotoTrim="#f4f4f4"		Trim around feature photo on blog brief
	set:blogDateColor="#ddd"			Text color of the date on the blog brief
	set:categoryColor="#44657f"			Category color on the blog brief

	-- Blog Entry Itself --
	set:blogEntryTitleFG="#202020" 						Foreground color of blog title
	set:blogEntryBG="#f4f4f4"						Background of the article itself on the single blog entry display
	set:signatureBG="white"						Background color of signature callout
	set:signatureBorderColor="#ddd"		Thin border around signature callout
	set:sigProfileLine="#ddd"			Thin line to right of sig pic
	set:blogLinkColor="#f7b614"					Color of links in blog entries (defaults to same as site)

	-- Comment Area --
	set:commentAreaTitle="white"				Title of the the comments area "Comments"
	set:commentAreaFG="#475157"			Blog Commenting area foreground
	set:commentAreaBG="#475157"			Blog Commenting area background
	set:commentName="#202020"			Each Commenter's Name color
	set:commentTextFG="#202020"				Text of commenters comments
	set:commentTextBG="white"				Text background of commenters comments
	set:authorCommentTextBG="#DBEBF5"			BG color of author's text (defaults to matching image of blog author bubble indicator)
	set:authorCommentTextFG="#202020"	FG color of author's text (defaults to same as others)
	set:commentStatus="#ddd"				Color of status (pending approval, etc.) Only shown to blogger (and orig. poster)

	- Gallery -
	set:galleryBG="#475157"				Gallery for photos (most blogs don't have this feature)
	set:galleryBorderColor=""					Border color around entire gallery area
	set:galleryArrows="#ddd"		Arrows color

	- Directory -
	set:directoryYearSelectFG="#f8c42a"			Foreground of each year selection
	set:directoryYearSelectBG="white"		Background of each year selection
	set:directoryImageBorder="#ddd"	Border surrounding each image in directory

*/

#magLayout { background-color: #f8c42a; padding: 10px; border-radius: 6px; }
#magLayout h2 { margin: 4px; } /* title for the maglayout briefs section */

.magLayoutRow { }

.blogBrief { border: 1px solid white; padding: 6px; border-radius: 6px; background-color: white; margin: 10px;  overflow: hidden;}
.blogBrief h1 { margin: 6px 0 0 0; font-size: 19px; font-weight: normal; } /* blog title */
.blogBrief .featurePhoto { float: left; border: 6px solid #ddd; line-height: 0; margin: 0px 10px 4px 0; border-radius: 6px; /*width: 120px; height: 120px;*/ }
.blogBrief .noPicture { width: 120px; height: 120px; background-color: black; opacity: .3;
	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)';
	filter: alpha(opacity=30); zoom: 1; }
.blogBrief .description {line-height:130%; clear: left; height: 140px; overflow: auto; padding: 10px; }
.blogBrief .continue { text-align: right; }

/* .catdate used in both blogbriefs, blog itself, sidebar, etc. */
.catdate .date { color:#999999; font-size: 11px; } /* color:blogDateColor */
.catdate .category { color: #eb811c; font-weight: bold; font-variant:small-caps;}

.blogIndex h2 { margin-bottom: 0; }
.blogIndexEntry { margin-bottom: 15px; }

/*      Blog Entry Itself     */
.blogEntry { background-color: rgba(255,255,255,.9); border-radius: 6px; padding: 10px; margin-bottom: 20px; margin-top: 0;}
.blogEntry .content { margin-top: 10px; /*overflow: hidden; */}
.blogEntry .content div:focus { outline: none; }
.blogEntry img { margin: 4px 10px; max-width: 100%; }
.blogEntry #title { margin-top: 0; color: #202020;}
.blogEntry a, .blogEntry a:link, .blogEntry a:visited, .blogEntry a:active {color: #f7b614; }
#blogIndex a, #blogIndex a:link, #blogIndex a:visited, #blogIndex a:active {color: #f7b614; }

#editBlog #f1\.title, #addBlog #f1\.title { width: 500px; font-size: 20px; }
div.formField[data-fieldid='f1.content'] .formEdit { width: 100%; clear: left; }
.formField.ckeditor { margin: 0 }
#commentArea { background: #ddd; padding: 10px; color: #475157; position: relative; border-radius: 6px; }
.commentBoxContents { position: relative; z-index: 2; }

.commentContainer { position: relative;margin: 0 25px; overflow: hidden;}
.commenter { float: left; width: 110px; }
.commentAvatar { width: 80px; height: 80px; border-radius: 4px; }
.commentName,.commentName a { color: #202020; font-size: 14px; margin-top: 4px; }
.commentDate { font-size: 10px; }
.commentTitle { color: #202020; font-size: 22px; margin-bottom: 10px; }
.commentText { background-color: white; color: #202020; border: 1px solid gray; margin-left: 120px; padding: 18px 15px; border-radius: 4px; white-space: pre-wrap; position: relative; }

.commentText:before
{
	background-color: white;
	border: 1px solid gray;
	border-width: 0 0 1px 1px;
	content: "\00a0";
	display: block;
	height: 20px;
	width: 20px;
	position: absolute;
	top: 20px;
	left: -10px;
	transform: rotate( 45deg ) skew( 0deg );
}

.blogAuthor .commentText:before { background-color: #DCEBF5; }

.commentStatus { font-size: 8px; color: #ddd; }
.speechMark { width: 33px; height: 30px; background: url(extensions/bluejava/blog/static/images/commentTriangle_white.png); position: absolute; top: 14px; left: 88px; }
.blogAuthor .speechMark { background-image: url(extensions/bluejava/blog/static/images/commentTriangle_blue.png); left: 89px; }
.blogAuthor .commentText { background-color: #DCEBF5; border: 1px solid #202020; }
.newComment { opacity: .5; }
.bloggerControls { padding: 6px; background: #eb811c; border-radius: 6px; float: right; }

/*#commentArea .u { position: absolute; top: 0px; left: 0px; height: 50px; background: url(images/darkblueBox_vertical.png) repeat-x; width: 100%; }
#commentArea .ul { position: absolute; top: 0px; left: 0px; height: 50px; width: 120px; background: url(images/darkblueBox_corners.png) no-repeat; }
#commentArea .ur { position: absolute; top: 0px; right: 0px; height: 50px; width: 120px; background: url(images/darkblueBox_corners.png) no-repeat -120px 0; }
#commentArea .b { position: absolute; bottom: 0px; left: 0px; height: 50px; background: url(images/darkblueBox_vertical.png) repeat-x 0 -120px; width: 100%; }
#commentArea .bl { position: absolute; bottom: 0px; left: 0px; height: 50px; width: 120px; background: url(images/darkblueBox_corners.png) no-repeat 0px -50px; }
#commentArea .br { position: absolute; bottom: 0px; right: 0px; height: 50px; width: 120px; background: url(images/darkblueBox_corners.png) no-repeat -120px -50px; }*/

/* Gallery */
#gallery { border: 1px solid #999999; padding: 10px; overflow: hidden; border-radius: 4px; }
#gallery div { float: left; border: 1px solid gray; width: 120px; height: 90px; text-align: center;padding: 5px; background-color: #2ecc40; margin: 1px; }
#gallery img { box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); }
#galleryPanel { position: fixed; border: 2px solid gray; border-radius: 12px; padding: 10px; background: #f0f0f0;
		width: 75%; height: 50%; overflow: auto; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); }
#galleryPanel img { max-height: 120px; max-width: 90px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); margin: 10px; }
.yui-skin-sam .yui-toolbar-container .yui-toolbar-gallery span.yui-toolbar-icon {
	    background-image: url(extensions/bluejava/blog/static/images/camIcon.png);
	    background-position: 0px 0px;
		left: 6px; }
.yui-skin-sam .yui-toolbar-container .yui-toolbar-HTML span.yui-toolbar-icon {
	    background-image: url(fam/application_edit.png);
	    background-position: 0px 0px;
		left: 6px; }

/* Directory */
#yearSelect { margin: 20px 0 0 -20px; }
#yearSelect li { float: left; margin: 0 10px; list-style-type: none; font-size: 20px; }
#yearSelect li a { display: inline-block; }
#yearSelect .selected a { color: white; background-color: #eb811c; }
#yearSelect li a { color: #eb811c; padding: 5px; border-radius: 4px; }
#blogIndex img { border: 2px solid #f6fDff; border-radius: 4px; }

#addACommentForm #f1\.comment { width: 99%; height: 80px; padding: 6px; } /* 99% so right edge doesn't get cut on Firefox */
#addACommentForm #f1\.name { padding-left: 20px; background-image: url(fam/user.png); background-repeat: no-repeat; background-position: 2px 2px; }
#addACommentForm #f1\.email { padding-left: 20px; background-image: url(fam/email.png); background-repeat: no-repeat; background-position:2px 2px; }
#addACommentForm #f1\.url2 { padding-left: 20px; background-image: url(fam/world_link.png); background-repeat: no-repeat; background-position:2px 2px; }
#addACommentForm #url { position: absolute; left: -999px; }

.blogEntry .sig {  background-color: white; border-radius: 6px; border: 1px solid #ddd; margin-top: 20px; padding: 20px; }
.blogEntry .sig .photo { margin-right: 6px; float: left; position: relative; }
.blogEntry .sig .photo img { border-radius: 6px; }
.blogEntry .sig .profile { width: 80%; overflow: hidden; border-left: 1px solid #ddd;}
.blogEntry .sig .field { margin-left: 1em; }
.blogEntry .profile .bio { font-size: .85rem; }
.blogEntry .profile .author { font-size: 18px; }
.blogEntry .sig .twitter { font-size: 80%;}
.blogEntry .sig .twitter img { margin: 0 }

/* the following is for click-to-zoom feature */
img.zoom { position: fixed; z-index: 999; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: zoom-out; }
img.zoomable { cursor: zoom-in; }
img.inviso { visibility: hidden; pointer-events: none; }

blockquote
{
	padding: 1em 1em 1em 1.5em;
	border-left: 3px solid gray;
}

blockquote.quote
{
	font-size: 1.8rem;
	border-left: 0;
	font-style: italic;
}

.blogButton { background: #eee; padding: 0.5em; border-radius: 4px;display: inline-block; position: relative; line-height: 1.0; }
.tweetthis { font-size: 0.8rem; }
.tweetthis a
{
	padding: 2px 4px;
	font-size: .9rem;
	background-color: #CCC;
	border-radius: 3px;
	display: inline-block;
	transform: rotate(12deg);
	position: absolute;
	right: -12px;
	top: -10px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

@media (max-width: 635px)
{
	div.commenter { margin-bottom: 10px; }
	div.speechMark { display: none; }
	div.commentContainer { margin: 0 5px; }
	div.commentText { clear: left; margin-left: 0; }
	#addACommentForm .formField .formEdit { width: 100%; } /* on its own line, so can be 100% */
}