/*  
Theme Name: Muschamp Tabs
Theme URI: http://blog.muschamp.ca/
Description: Integrating a blog into my existing site while maintaining the look and feel.  Now compatiabl with WordPress 5.0.1
Version: 1.5
Author: Muskie McKay
Author URI: http://www.muschamp.ca/

*/
/* ---- Gutenberg ---- */
@media only screen and (min-width: 768px) 
{
	.alignfull 
	{
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		width: auto;
		max-width: 1000%;
	}
	
	.alignwide 
	{
		margin-left: calc(25% - 25vw);
		margin-right: calc(25% - 25vw);
		width: auto;
		max-width: 1000%;
	}
	.alignwide img,
	.alignfull img 
	{
		display: block;
		margin: 0 auto;
	}
}




/* ---- Page Wide ---- */


/* ----- Header ----- */

#header h1
{
	padding-bottom: 0px;
	margin-bottom: 0px;
}

#header
{
	height: 50px; /* This works on Chrome not on Safari, everything seems to work better on Chrome these days. Was 60 */
}

.description
{
	font-weight: normal;
}


/* ---- Content ---- */
#blogContent
{
	width: 69%;
	float: left;
}

.narrowColumn, 
.wideColumn
{
	/* The one above takes precidence over this one.  */
	/* I don't use this, but it appears wideColumn is for single posts and narrowColumn is for everything else */
	/* This is used somewhere to increase the size of the single post's body text */
}

.wideColumn
{
	
}

.narrowColumn
{

}

.post
{
	padding-right: 4px;
	/* less padding and margin at the top */
}

#breadcrumbs
{
	/* less padding and margn */
	padding: 0px;
	margin: 0px;
	font-size: 0.8em;
}

/* Safari is not behaving */
#postTitle
{
	border: 0px;
	margin: 0px;
	padding: 0px; 
}

#blogContent .post h1
{
	/* Do I need size here? */
}

#blogContent .post h2
{
	
	padding: 0px;
	margin: 0px;
	clear: right; /* new */	
	/* Do I need size here? */
	color: #999;
}

.wideColumn .post h2
{
	display: inline; /* Gutenberg needs this, for single posts. */
}

#blogContent .post h2 a:link, 
#blogContent .post h2 a:visited, 
#postTitle a:link, 
#postTitle a:visited 
{
	background-color: #FFF;
	color : #999;
	font-weight : bold;
	text-decoration : none;
}

#blogContent .post h2 a:hover,
#postTitle a:hover
{
	color : #FF8C00;
}

h2.pageTitle, 
h2.pageTitle p
{
	color: #666;
	padding: 0px;
	margin: 0px; 
}

.post h2
{
	clear: left; /* why do I switch form left to right? */
}

#blogContent .post small
{
	color : #999;  /* this affects other smalls though I think it should not... */
}

.post h3
{
	/* this takes away all borders on h3s #respond puts one back.  */
	padding: 0px;
	margin: 0px;
	border: 0px;
}

.entryText h3, 
.entry h3
{
	/* I wanted to make this stand out better visually especially from strong text */
	/* this style is necessary to make the summaries not be changed */
	border-bottom: 1px solid #666;
}

.post .entry
{


}

.post .entryText
{
  /* something should be here as single.php seems to display the text larger in Opera at least */
  /* Having both an entry and entryText class allows single posts to have bigger fonts for instance, I think I may have over thunk things...  */
  /* narrowColumn could also be used to do this, right now it isn't really intentional or maybe it was, it was long ago, when I created this file.  */
}

.post .entry, 
.post .entryText
{

}

.post .entry li, 
.post .entryText li 
{
	margin: 0 0 3px 0;
}

.post .postMetadata
{
	/* this is where the centering and the dashed border comes from, but on alt I want the text black damit! */
	font-size : 0.7em;
	text-align: center;
	border-bottom: 1px dashed #666;  /* this takes away other borders... */
	clear: both;
}

.postMetadata #postingInformation
{
	/* This can style the post metadata too in theory but it isn't turning black. */
	font-color: #FFFFFF;
}

/* added the wp-block-image stuff here to try and get rid of purple halo after blocks conversion in WordPres 5.0.2 */
.entry img, 
.entryText img, 
#contents .wp-block-image figure a:visited img, 
#contents .wp-block-image figure a:link img
{
	/* this makes all images similar to the tabs at the top and the floated images elsewhere */
	padding: 3px;
	border : 1px solid #ccc;
	border-right : 2px inset #666;
	border-bottom : 2px inset #666;
	background: #E8EBF0;
	border-radius: 5px; /* This is happening to my inline thumbnails but it kinda looks cool, so many image styles. */
}

/* New Image CSS Rules that WordPress added */
img.alignnone 
{
	float: none;
}

/* .entryText img display: block may be a problem */
img.aligncenter, 
.entry img, 
.entryText img
{
	display: block; 
	float: none; 
	/* removed margin from here */
}

img.alignleft, 
.alignleft
{
	float: left; 
}

img.alignright, 
.alignright
{
	float: right; 
}


.entry img.floatLeft, 
.entryText img.floatLeft, 
.entry img.floatRight, 
.entryText img.floatRight, 
img.alignleft, img.alignright
{
	/* got to undo the margin's when I want to float right or left */
	/* some of these classes are legacy from before WordPress introduced alignright and alignleft */
	margin: 7px;  /* using margin now instead of padding to keep image away from text */
}

img.unstyled, 
img.attachment-post-thumbnail
{
	/* This class removes the padding and border effect, even margin, but I add it back immediately below for some images. */
	border: 0px; 
	padding: 0px;
	margin: 0px;
}

/* Not sure where I got this rule from, apparently thumbnails use img.wp-post-image as their style */
img.attachment-post-thumbnail
{
	/* None of the other image rules are applying borders or padding yet to my new feature image thumbnails. */
	/* this is for index.php */
	margin-right: 10px;
	margin-left: 10px;
	float: right;
	clear: right;
}

div.entryText img.attachment-post-thumbnail
{
	/* this is for single.php */
	margin-right: 0px;
	margin-left: 10px;
	float: right; 
}

div.entryText img.attachment-post-thumbnail,
div.post img.attachment-post-thumbnail
{
	/* This gets rid of the background color seen in transparent featured images. */
	/* second rule might not do anything, I use mostly jpgs with white backgrounds anyway. */
	/* could rewrite this to use wp-post-image */
	background-color: white;
}
	
img.unstyled
{
	margin: 10px;
}

.post .entryText blockquote
{
	font-size: 110%;
	margin-right: 210px; /* Should you do this and shouldn't it be 236 or so */
}

.read-more
{
	font-size: small;
	margin-top: 0px;
	padding-top: 0px;
}


/* ---- Comments ----*/
#contents #blogContent ul.comment-list
{
	padding: 0px;
	margin: 0px;
	list-style-type: none;
}

#jump
{
	font-size: 0.8em;
}

#blogContent #respond H3
{
	border-bottom: 1px solid #666;
}

#policy
{
	color: #666;
	font-style: italic;
}

#comments
{
	padding-top: 0px;
	margin-top: 0px;
	padding-bottom: 0px;
	margin-bottom: 5px;
}


ul.comment-list li.comment.depth-1
{
	border-bottom: 1px dashed;
}

ul.comment-list li.comment.depth-1.parent
{
	margin-bottom: 0px;
}

ul.comment-list li.pingback
{
	list-style-type: disc;
	margin-left: 25px;
}

/* These are rare and this style isn't taking... */
#contents #blogContent ul.comment-list li.trackback 
{
	list-style-type: square; 
	margin-left: 25px;
}

ul.comment-list li.even
{

}

ul.comment-list li.alt
{
	background: #E8EBF0; 
}

ul.comment-list li.alt
{

}

ul.comment-list li.comment div.reply 
{
	margin-bottom: 5px; /* I only want this sometimes. */
}

ul.comment-list li.comment ul.children
{
	list-style-type: none;
	background-color: white;
}

/* this worked after my computer crashed. */
textarea#comment
{
	width: 100%;
}


/* ---- Side Menu ---- */
#sidebar
{
	width: 29%;
	margin-left: 70%;
	padding: 4px;
}

#sidebar ul
{
	padding: 0px;
	margin: 0px;
	list-style-type: none;
}

#sidebar ul.children
{
	padding-left: 20px;  /* does this matter or is it redundant now? */
}

#sidebar ul li
{
	padding: 0px;
	margin: 0px;
}

#sidebar h4
{
	/* this gets rid of unwanted space at the top of sidebar */
	padding: 0px;
	margin: 0px;
	border-bottom: 1px solid #666;
	margin-bottom: 2px;
	font-size: 110%;
	color: #999;
	margin-top: 4px;
	text-align: left;
}

#sidebar a, 
#sidebar p a, 
#sidebar p
{
	font-size: 16px;  /* This now controls the majority of sidebar text size */
}

#sidebar p
{
	color: #666; /* I want to find a place to use the pale blue more... */

}

.sidebarButton
{
	float: right;
	clear: right;
	margin: 1px;
	border: 0;
	margin-top: 3px;
}

#sidebar #authorPhoto
{
	display: block; 
	float: none; 
	margin: 7px auto;
	padding: 3px;
	border : 1px solid #ccc;
	border-right : 2px inset #666;
	border-bottom : 2px inset #666;
	background: #E8EBF0;
	border-radius: 5px;
}

#contents #sidebar #authorPhotoLink:hover
{
	/* No hovering in Firefox, still get ugly hover in Opera on certain image based links */
	background-color: #FFF;

}

#sidebar #socialMe
{
	text-align: center;
	margin-top: 4px;
	margin-bottom: 4px;
}

#socialMe li
{
	display: inline;
}

#sidebar #socialMe a:link, 
#sidebar #socialMe a:visited, 
#sidebar #currentlyReading a:link
{
	/* This improves the styling of the simple version in Firefox */
	background-color: #FFF;
	color: #FFF;
}

#searchBox
{
 	text-align: center;
}

#contents #sidebar #importantText a
{
	/* even three levels of specificity was not enough */
	text-align: center; /* this does not work on Chrome at work */
	font-weight: bold;
	font-size: 1.4em; /* must specify link text */
	margin-left: 20%;
}

.dynamicSidebar 
{
	vertical-align: top; /* didn't help there is weirdness with multiple dynamicSidebar divs */
}


/*-------------Calendar-----------------*/

#calendarMenuItem #wp-calendar
{
	padding-left: 25%;
	/* I added this to try and get the calendar centered */
}

#wp-calendar
{
	text-align: center;
}

#wp-calendar thead th
{
	border-top: 1px dashed #666;
}

#wp-calendar th 
{
	color: #E8EBF0;
}

#wp-calendar tbody td
{
	background: #E8EBF0;
}

#wp-calendar a:hover, #prev a:hover, #next a:hover	
{
	color : #FF8C00;
}

#wp-calendar caption 
{
	padding-left: 18%;
	color: #999;
	font-weight: bold;
	text-align: center;
}

#wp-calendar tbody #today
{
	border: 2px solid #FF8C00;
	background-color: #FFF;
}

/*  ---- Footer ---- */
#disclaimer p
{
	padding: 0px;
	margin: 0px;
}

/* Pagination */	
/* I retired this from the home page but not from the Archives. */
ul.page-numbers, 
ul.pager
{
	margin: 20px 0 10px;
	width: 100%;
	padding: 0;
	font-size: 20px;
	line-height: normal;
	clear: both;
}

#contents #blogContent ul.page-numbers, 
#contents #blogContent ul.pager
{
	margin-left: 60%;
}

#contents #blogContent ul.pager
{
	list-style-type: none;
}

ul.page-numbers li, 
#contents #blogContent ul.pager li
{
    display: inline;
}
 
ul.page-numbers a, 
ul.page-numbers span, 
{
	/* some of this color stuff isn't taking hold and is redundant */
	border-radius: 3px;
	padding: 3px 4px 2px 4px; 
	margin: 2px;
	text-decoration: none;
	border: 1px solid #ccc;
	vertical-align: middle;
}
 
ul.page-numbers a:hover, 
ul.page-numbers span.current 
{	
	border: 1px solid #666;
}