/* GLOBAL STYLES
-------------------------------------------------- */

img {
   max-width:100%;
   height:auto;
   border:0px none;
   }


body {
    padding-bottom: 12px;
    color: #444;
    background: #fff; 

	  font-family: 'PT Sans', sans-serif;
    font-size:2.05rem;    /* 20px  */
    line-height:2.4rem;  /* 26px  */
    margin-bottom:15px;   /* 10px  */
    text-shadow: 2px 2px 6px #A3A3A3;
    
}
p {
	text-align: left;
	padding-bottom:8px;
}
a {
    color:#cf171f;   
    font-weight:bold;
    font-family: 'PT Sans', sans-serif;
}
a:hover {
    color: #FF0303;
}
em {
    font-weight:bold;
}

.entry-content p, .entry-content ul li, .entry-content ol li {
   color:rgb(51, 51, 51);
   font-family:'PT Sans','sans-serif';
   font-size:2.0rem;
   text-shadow:2px 2px 6px rgb(163, 163, 163);
   }

.entry-content p {
   margin:0px 0px 25px;
   }


.site-container {        /* this is a temporary class to match wordpress, but shall be */
	background: #FFFFFF;   /* used in bootstrap for my changing background pastel gradients  */
	
}
.site-inner {            /* also a temporary class for pastel gradients changeover */
	background-color: transparent;   /* prevoiusly was #FFFFFF  */
}

.myChatText2 {
   font-family:'PT Sans', 'sans-serif';
   font-weight:400;
   font-size:2.5rem;
   line-height:2.7rem;
   font-style:italic;
   letter-spacing:1px;
   text-shadow:2px 2px 6px #A3A3A3;
   }

/* used for <h2>.  */
.header-heading {
    font-family: 'PT Sans', sans-serif;
    font-weight: 700;
    line-height:1.25em;
    letter-spacing: -0.025em;
    color:#333;
    text-shadow:0px 0px 2px rgba(255,255,255,1);
}

/* used for <h2> green background, yellow text, all caps  */
.text-muted {
    color:#b7d93d;
    background: rgba(50,121,66,.8);
    font-weight:600;
    text-transform:uppercase;
    text-shadow:0px 0px 2px rgba(0,0,0,1);
    border-top:2px solid #b7d93d;
    border-bottom:2px solid #b7d93d;
}
h1 {
	  font-family: 'Architects Daughter', cursive;
    color: #004704;
    font-size: 4.2rem;
    font-weight: 400;
    text-shadow: 3px 3px 6px #555;
}
h2 {
	  font-family: 'Architects Daughter', cursive;
    color: #004704;
    font-size: 3.7rem;
    font-weight: 400;
    text-shadow: 3px 3px 6px #555;
}
h3 {
	  font-family: 'Architects Daughter', cursive;
    color: #004704;
    font-size: 3.3rem;
    font-weight: 400;
    text-shadow: 2px 2px 5px #555;
}
h4 {
	  font-family: 'Architects Daughter', cursive;
    color: #004704;
    font-size: 2.8rem;
    font-weight: 400;
    text-shadow: 2px 2px 5px #666;
}

/* ####################### */
/* START SUGGTWEETS STYLES */
/* ####################### */ 
.FloatImageLeft {	
   float:left;
   }



/* This is appled to the cartoon moose picture, to limit it's size. */
/* Lots of these parameters change on @media settings. */
.FloatLeftMooseCartoon {
   padding-right:5px;
   overflow:hidden;
   width:100px; 
   position:relative; 
   float:left;
   top:-7px;
   max-width:126px;
   max-height:90px;
   }	


/* This is applied to outer colored rectangles. */
.FullWidthSemiTransparent {
   width:100%;
   height:100%;
   overflow:hidden;
   position:absolute;
   filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
   filter:alpha(opacity=80);
   opacity:0.8;
   }

.HoldAllTweets {
   position:relative;
   }

.OneTweet {
   float:left;
   white-space:pre-wrap;
   }

.OneTweet a {
   text-decoration:none;
   }	

.PaddingFive {
   overflow:hidden;
   padding:5px;
   }


/* This adds space inside Twitter button, with Tweet this at the center. */
/* Top right bottom left is modified by @media rules below. */
/* This isn't preventing underlying yet, haven't solved that problem yet. */
.PaddingInsideTweetThisButton {
   padding:0 18px 3px 10px;
   text-decoration:none;
   text-align:center;
   text-shadow:none;
   }

/* This is applied to outer  colored rectangle. */
/* The max-height gets changed by @media settings. */
.ShadowBox {
   max-height:90px;
   overflow:hidden;
   position:relative;
   box-shadow:5px 5px 7px #AAAAAA;
   border-radius:3px;
   border:1px solid #E5E5E5;
   text-decoration:none;
   line-height:1.2;
   margin:0 0 15px 0;
   }

/* TweetSliderWidth surrounds HoldAllTweets, which surrounds 4x OneTweet, which holds hyperlink. */
.TweetSliderWidth {
   overflow:hidden;
   position:relative;
   }

/* This is the round corner button saying Twitter and Tweet this. */
.TweetThisArea {
   width:110px;
   padding:0 5px 0 0;
   text-align:center;
   float:left;
   position:relative;
   }	

.TweetThisButton {
   box-shadow:1px 1px 3px rgba(0,0,0,0.08);
   border-radius:3px;
   border:1px solid #C3C3C3;
   background-color:#F8F8F8;
   padding:0px 3px 3px 3px;
   margin:18px 0 0 0;    
   }

/* The font applied to the actual suggested joke to tweet. */
.TweetsFont {
   font-family:'PT Sans','sans-serif';
   font-weight:400;
   font-size:1.3em;
   line-height:1.25;
   font-style:italic;
   letter-spacing:1px;
   text-shadow:2px 2px 6px rgb(163, 163, 163);
   text-decoration:none;
   text-align:left;
   }

.TweetsFont a:visited {
   color:#0C8272;   /* Medium green. */
   text-decoration:none;
   }

.TweetsFont a:hover {
   color:#B3101B;    /* Dark red. */
   text-decoration:none;
   }

.TweetsFont a:active {
   color:#FF3838;    /* Light red with yellow outer glow. */
   text-shadow:0px 0px 5px yellow;
   text-decoration:none;
   }

.TweetLabelsFont {   /* The font applied to the words Twitter and Tweet this. */
   color:#0099FF;
   font-family:'PT Sans','sans-serif';
   font-size:12px;
   text-shadow:1px 1px 4px #888;
   text-decoration:none;
   }

.TweetLabelsFont a:visited {
   color:#0C8272;   /* Medium green. */
   text-decoration:none;
   }

.TweetLabelsFont a:hover {
   color:#B3101B;    /* Dark red. */
   text-decoration:none;
   }

.TweetLabelsFont a:active {
   color:#FF3838;    /* Light red with yellow outer glow. */
   text-shadow:0px 0px 5px yellow;
   text-decoration:none;
   }

.TwitterFont {   /* The font applied to the word Twitter. */
   color:#0099FF;
   font-family:'PT Sans','sans-serif';
   font-size:12px;
   text-shadow:1px 1px 4px #888;
   text-decoration:none;
   }

/* ##################### */
/* END SUGGTWEETS STYLES */
/* ##################### */ 





/* To give Youtube videos the responsive shrinkage they need. */

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}


.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
}

/*  This is the micro ClearFix code, so my taller Dr Halls cartoon */
/*  won't extend below its colored rectangle div  */
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }

label {
   margin-bottom:0px;
   }


							

@media (min-width: 768px) {
  /* Remove the edge padding needed for mobile */

  .header-heading {
   
    font-size: 2rem;
    letter-spacing: -0.025rem;
    line-height: 1.5;
    margin-bottom: 10px;
  }
    .text-muted {
        font-size:44px;  
    }  
    
}



@media (max-width:399px) {

/* START SUGGTWEETS STYLES */
/* This is appled to the cartoon moose picture, to limit it's size. */
.FloatLeftMooseCartoon {
   width:60px; 
   position:relative; 
   top:5px;
   max-width:126px;
   max-height:120px;
   }	
.PaddingFive {
   padding:5px 5px 0 5px;
   }
/* This adds space inside Twitter button, with Tweet this at the center. */
.PaddingInsideTweetThisButton {
   padding:0 2px 3px 4px;
   }
.ShadowBox {
   max-height:inherit;
   /*margin:0;*/
   }
/* This is for twitter suggestions. */
.TweetSliderWidth {
   font-size:0.8em;
   line-height:0.9;
   padding:10px 0;
   }	
.TweetThisArea {
   width:95px;
   float:none;
   }
.TweetThisButton {
   margin:0;    
   }
/* The font applied to the actual suggested joke to tweet. */	
.TweetsFont {
   font-style:normal;
   letter-spacing:0.3px;
   }
/* END SUGGTWEETS STYLES */


/* START CHAT STYLES */
.myChatText2 {
   font-size:2.1rem;
   }
.Ov1 {
   margin:auto auto -20px auto;
   }
.Ov2 {
   margin:auto auto -20px auto;
   }
.Ov3 {
   margin:auto auto -20px auto;
   }

/* END CHAT STYLES */

}


@media (min-width:400px) and (max-width:599px) {

/* START SUGGTWEETS STYLES */
/* This is appled to the cartoon moose picture, to limit it's size. */
.FloatLeftMooseCartoon {
   width:80px; 
   position:relative; 
   top:0px;
   max-width:126px;
   max-height:120px;
   }

/* This adds space inside Twitter button, with Tweet this  at the center. */
.PaddingInsideTweetThisButton {
   padding:0 3px 3px 5px;
   }
.ShadowBox {
   max-height:120px;
   }
/* This is for twitter suggestions. */
.TweetSliderWidth {
   font-size:0.9em;
   line-height:0.96;
   }
/* END SUGGTWEETS STYLES */


/* START CHAT STYLES */
.myChatText2 {
   font-size:2.25rem;
   }
.Ov1 {
   margin:auto auto -40px auto;
   }
.Ov2 {
   margin:auto auto -20px auto;
   }
.Ov3 {
   margin:auto auto -20px auto;
   }
/* END CHAT STYLES */

}

@media (min-width:600px) and (max-width:899px) {

/* START SUGGTWEETS STYLES */
/* This is appled to the cartoon moose picture, to limit it's size. */
.FloatLeftMooseCartoon {
   width:100px; 
   position:relative; 
   top:-7px;
   max-width:126px;
   max-height:90px;
   }

/* This adds space inside Twitter button, with Tweet this at the center. */
.PaddingInsideTweetThisButton {
   padding:0 3px 3px 7px;
   }	
.ShadowBox {
   max-height:90px;
   }
/* This is for twitter suggestions. */
.TweetSliderWidth {
   font-size:1.0em;
   line-height:1.1;
   }
/* END SUGGTWEETS STYLES */

/* START CHAT STYLES */
.myChatText2 {
   font-size:2.4rem;
   }
.Ov1 {
   margin:auto auto -70px auto;
   }
.Ov2 {
   margin:auto auto -40px auto;
   }
.Ov3 {
   margin:auto auto -20px auto;
   }
/* END CHAT STYLES */

}

@media (min-width:900px) {

/* START SUGGTWEETS STYLES */
/* This is appled to the cartoon moose picture, to limit it's size. */

.FloatLeftMooseCartoon {
   width:100px; 
   position:relative; 
   top:-7px;
   max-width:126px;
   max-height:90px;
   }	

/* This adds space inside Twitter button, with Tweet this at the center. */
.PaddingInsideTweetThisButton {
   padding:0 3px 3px 10px;
   }	
.ShadowBox {
   max-height:90px;
   }

/* This is for twitter suggestions. */  
.TweetSliderWidth {
   font-size:1.2em;
   line-height:1.2;
   }

/* END SUGGTWEETS STYLES */

/* START CHAT STYLES */
.myChatText2 {
   font-size:2.5rem;
   }
.Ov1 {
   margin:auto auto -85px auto;
   }
.Ov2 {
   margin:auto auto -50px auto;
   }
.Ov3 {
   margin:auto auto -20px auto;
   }

/* END CHAT STYLES */

}