/*/////////////////////////////////////////////GENERAL LAYOUT BASICS/////////////////////////////////////////////*/

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #514d85; }
a:hover {
  color: #0FA0CE; }


 .container {width: 100%; max-width: 960px;}
.row {margin-top:2rem;}
.ten.columns {padding-left:4px;}

/* Larger than desktop, make the sidebar narrower than default so the ads align with the edge of the tabbed menu */
@media (min-width: 1000px) {
.two.columns {width:17.3333333333%; text-align:center;}
}

/* Larger than desktop, make the main content area narrower than default so the ads align with the edge of the tabbed menu */
@media (min-width: 1000px) {
.ten.columns {width: 78.6666666667%;}
}

/* Larger than desktop, restrict the width of the old skybox ads in case they're wider than 160 
@media (min-width: 1000px) {
#sidebarad {
max-width:160px;
text-align:center;
overflow:hidden;
}
}*/

/* Smaller than desktop, add a buffer between the ad and the page content */
#sidebarad {
padding-top:1rem;
text-align:center;
}

/* Add a buffer between the ad and content above it */
.sidebarshopify {margin-top:2rem;}
.shopifybox {
border: 1px solid #e6e6e6;
margin-bottom:1rem; 
padding:1rem; 
max-width:200px;
-webkit-border-radius: 20px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius: 20px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-radius: 20px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px; 
 box-shadow: 3px 3px 3px #e6e6e6;
}

/* Larger than desktop, hide the notice that some games won't play well on a small device */
@media (min-width: 800px) {
#contentnotice {display:none;}
}
#contentnotice {border:2px dashed #ededed; margin-bottom:1rem; padding:1rem;}

 /*style the full-width elements of the page */  
 .fullwidth {
  padding: 4rem 0;
  margin-bottom: 10;
  text-align:center;
  }

/*Leaderboard ad bar at top of site*/  
  .fullwidth.adbar {
  margin-bottom: 1rem;
  padding:0;
  text-align:center;
  } 
  
#adbar {padding-top:10rem; border:1px solid #000; }
/* Larger than mobile */
@media (min-width: 400px) {
#adbar {padding-top:0rem;}
} 

/*override the 0 margin in skeleton.css*/
h1, h2, h3, h4, h5, h6 {margin-top:.5rem;}

/*custom settings for art ported from the old site design*/
.centeredcontent {width:50%; max-width:360px; margin-left:auto; margin-right:auto;} 
.centeredphotolandscape {width:100%; max-width:360px;} /*delete?*/ 
.centeredphotoportrait {width:100%; max-width:269px;} /*delete?*/ 
.centeredtext {text-align:center;}
  
/*Header area next to logo*/   
.headerbanner  {width:100%; max-width:627px; margin-bottom:1rem;}

/*any header graphic that's 750pixels wide, which is common on this site*/  
.headerimage {
max-width:100%; max-height: 100%;
height: inherit !important; 
margin-bottom:1rem;} 

/*test for sizing percentage images*/
.image25 { 
max-width:25%;
max-height: 100%;
height: inherit !important;
} 

.image33 { 
max-width: 33%;
max-height: 100%;
height: inherit !important;
} 

.image50 { 
max-width: 50%;
max-height: 100%;
height: inherit !important;
} 

.image75 { 
max-width: 75%;
max-height: 100%;
height: inherit !important;
} 

.image80 { 
max-width: 80%;
max-height: 100%;
height: inherit !important;
} 

.image90 { 
max-width: 90%;
max-height: 100%;
height: inherit !important;
} 

.image100 { 
max-width: 100%;
max-height: 100%;
height: inherit !important;
} 

/*add to above image classes for floating*/
.imgleft {float:left; margin-right:1rem;}
.imgright {float:right; margin-left:1rem;}

/*simple left-floated div*/
.lefty {float:left;} 
img.lefty {float:left; margin-right:1rem;} 

/*strips - sizes vary when copied from old site*/  
img.strip {max-width: 100%;}

/*centered paragraph*/
p.centered {text-align:center;}  
p.caption {text-align:left; font-style:italic;}  
    
/*Add styling to images*/  
img.homepage {width:100%;}

.sidebarbox {
-webkit-border-radius: 20px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius: 20px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-radius: 20px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px; 
margin-bottom:1rem;
}

.sidebarboxheader {background-color:#ccc; font-size:1.5rem; font-weight:600; color:#fff; width:100%;}

/*footer area */  
.one-third.column.footer {border:1px solid #393663;
-webkit-border-radius: 20px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius: 20px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-radius: 20px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px; 
overflow:hidden;
margin-bottom:1rem;}

.footerheader {background-color:#393663; font-size:2rem; font-weight:600; color:#fff;}

/*social media icons*/
.socialicon {margin-right:.5rem; margin-top:.5rem;}

/*for pullquotes on text-heavy behind-the-scenes areas like Lawrence and Ideas pages */
.rightpullquote {
float:right;
max-width:140px;
width: 25%;
margin-top:1rem;
margin-bottom:1rem;
margin-left:1rem;
padding-bottom:1rem; 
text-align: right;
color:#0080c0;
font-size:2rem;
font-weight:600;
}

.leftpullquote {
float:left;
max-width:140px;
width: 25%;
margin-top:1rem;
margin-bottom:1rem;
margin-right:1rem;
padding-bottom:1rem;
text-align: left;
color:#0080c0;
font-size:2rem;
font-weight:600;
}

/*Homepage Strip Container */  
.homestrip {
text-align:center;
border:1px solid #ededed;
-webkit-border-radius: 20px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius: 20px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-radius: 20px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
margin-bottom:1rem;
width:98%; /*make sure it fits the viewport - max 98*/ 
max-width:750px;
overflow:hidden;}	

.homegraphic {
text-align:center;
border:1px solid #ededed;
-webkit-border-radius: 20px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius: 20px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-radius: 20px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
margin-bottom:1rem;
width:98%; /*make sure it fits the viewport - max 98*/
max-width:750px;
overflow:hidden;}	

.indeximage {width:100%; /*make sure it fills .homegraphic*/
max-width:750px;}

/*make sure it fills the .homestrip container completely*/
.homestrip .entry img {width:100%; max-width:600px!important; }

/*Homepage Strip Navigation */
#stripnavigation {
	clear: both;
	line-height: 2;
	overflow: hidden;
}

.nav-previous {
	float: left;
	width: 33%;
	min-width: 33%;
	text-align:left;
}

.nav-middlemain {
	float: left;
	width: 33%;
	min-width: 33%;
	float:left;
	text-align:center;
}

.nav-next {
	float: left;
	min-width: 33%;
	width: 33%;
	text-align:right;
}

/*Style Lynn's Strip Comments on the Homepage; duplicated in Wordpress theme. Side padding is wider */  
div.lynncomments {
    padding: 0px 8px 0px 8px;
    margin-bottom:0px;
	margin-top:0px;
    text-align: left;
}

/*Copied from Wordpress theme, to make the day's strip scale for mobile */
img.size-full, img.size-large, img.header-image, img.wp-post-image {
    max-width: 100%;
    height: auto;
}

.homepagestrip
{width:100%;
max-width:600px;}

.homepagestripsunday
{width:100%;
max-width:740px;}

.homemessage
{font-size:2rem;
font-weight:600;}

.one-half.column.homepage	
{border:1px solid #ededed;
-webkit-border-radius: 20px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius: 20px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-radius: 20px;
border-bottom-right-radius: 5px;
margin-bottom:1rem;
padding:1rem;
text-align:center;
}

.shopify-buy-frame--product {
    margin-left: auto !important;
    margin-right: auto  !important;
}

.homeboxtitle {font-weight:600; margin-bottom:.5rem;}

/*Pagination Buttons: Lawrence's Story*/
a.pagination {
background-color:#0080c0; 
color:#fff; 
padding:1rem; 
margin:1rem; 
font-size:3rem;
font-weight:600;
} 

a.paginationcurrent {
background-color:#cc3399; 
color:#fff; 
padding:1rem; 
margin:1rem; 
font-size:3rem;
font-weight:600;
} 

a.pagination:hover {
background-color:#993399; 
color:#fff; 
padding:1rem; 
margin:1rem; 
font-size:3rem;
font-weight:600;

} 

/*YouTube Embeds*/ 

.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
	max-width:560px;
	margin-right:auto;
	margin-left:auto;
	margin-bottom:2rem;

}

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


/*Tables*/ 
td {border-bottom: 0px;}

/*Accordion Fold Content*/ 
.accordion {}
.accord-header {font-weight:bold; font-size:large; color:#fff; margin-top:.5rem; margin-bottom:.5rem; background-color:#1a3a6c; padding-left:1rem; }
.accord-content { display: none;}
.accord-header.teal {background-color:#3399cc; font-size:1.5rem; color:#fff; margin-top:.5rem; margin-bottom:.5rem; padding:.5rem; line-height:110%; }
.accord-header.purple {background-color:#663366; font-size:1.5rem; color:#fff; margin-top:.5rem; margin-bottom:.5rem; padding:.5rem; line-height:110%;}
.accord-header.pink {background-color:#990066; font-size:1.5rem; color:#fff; margin-top:.5rem; margin-bottom:.5rem; padding:.5rem; line-height:110%;}
.accord-header.orange {background-color:#ff6600; font-size:1.5rem; color:#fff; margin-top:.5rem; margin-bottom:.5rem; padding:.5rem; line-height:110%;}
.accord-header.red {background-color:#990000; font-size:1.5rem; color:#fff; margin-top:.5rem; margin-bottom:.5rem; padding:.5rem; line-height:110%;}
.accord-header.green {background-color:#006600; font-size:1.5rem; color:#fff; margin-top:.5rem; margin-bottom:.5rem; padding:.5rem; line-height:110%;}

/*Generic Div half the width of the container*/ 
.fiftypercent {
width:50%;
margin-left:auto;
margin-right:auto;
text-align:justify;
margin-bottom:1rem;
  }
  
.storylinetoggle {text-decoration:underline; cursor:pointer;} 

/*/////////////////////////////////////////////CHARACTER PAGES/////////////////////////////////////////////*/
.charpgheader {font-size:3rem; font-weight:600; color:#724497;}  
.charpgsubheader {font-size:2rem; font-weight:600; color:#724497; margin: 1rem 0;} 
.spoileralert {font-size:2rem; font-weight:600; color:#990033;} 
.fiftypercent1 {float:left; width:48%; margin-right:2%;}
.fiftypercent2 {float:left; width:50%;}

/*/////////////////////////////////////////////GAMES/////////////////////////////////////////////*/
  
/*Games General Styling*/ 

/*Used in all the Matching games like Coffee Break etc*/ 
td.game {padding:0;}
form.gamescore {margin-bottom:0rem;}
.gamebackground {width:100%; max-width:690px; text-align:center;}
.centergame {width:80%; text-align:center; margin-left:auto; margin-right:auto;}

/*Game width override for Father's Day game - trying bigger tiles*/
.centergamefday {width:100%; max-width:660px; text-align:center; margin-left:auto; margin-right:auto;}

/*John's Coffee Break - these items change colour based on the game*/ 
.gamebackground.coffeebreak {background-color:#993366; border:1px solid #000;}
table.game.coffeebreak {border-collapse:collapse; border-color:#0066cc; width:100%; max-width:690px;}

/*Jumble Jong*/ 
#jjmoredates {color:#000; font-weight:bold; background-color:#c73e8b;}
.jjbackground {background-color:#c73e8b;}

/*Good Green Fun*/ 
.gamebackground.goodgreen {background-color:#336600; border:1px solid #000;}
table.game.goodgreen {border-collapse:collapse; border-color:#336600; width:100%; max-width:690px;}

/*Halloween Treats*/ 
.gamebackground.halloweentreats {background-color:#522163; border:1px solid #000;}

/*MothersDay Fun*/ 
.gamebackground.mday {background-color:#66ccff; border:1px solid #000;}
table.game.mday {border-collapse:collapse; border-color:#66ccff; width:100%; max-width:690px;}

/*Perfect Match*/ 
.gamebackground.pmatch {background-color:#993366; border:1px solid #000;}
table.game.pmatch {border-collapse:collapse; border-color:#993366; width:100%; max-width:690px;}

/*Bake Off*/ 
.gamebackground.bakeoff {background-color:#993366; border:1px solid #000;}
table.game.bakeoff {border-collapse:collapse; border-color:#993366; width:100%; max-width:690px;}

/*Easter Egg Hunt*/ 
.gamebackground.eastereggs {background-color:#66cc33; border:1px solid #000;}
table.game.eastereggs {border-collapse:collapse; border-color:#66cc33; width:100%; max-width:690px;}

/*For Flash Based Games*/ 
.flashgamecontainer {text-align:center; margin-top: 10px;}

/*Dig It*/
.digitfield {min-width:368px;} 
.digitinstructions {float:left; margin-right:1rem; background-color:#cccc99; padding:1rem; text-align:right; font-weight:bold; border:2px solid #996633;}
.digitheader {font-weight:bold; font-size:large; color:#993300}
.bonefloat {float:left; margin-right:3px; padding:1px}

/*Lucky Leprechaun*/ 
.luckyl {width:100%; max-width:747px; margin-left:auto; margin-right:auto;}

/*Monster Match*/ 
.monstermatch {width:100%; max-width:740px; margin-left:auto; margin-right:auto;}

/*Pet Pileup*/ 
table.game.petpileup {border-collapse:collapse; border-color:#0066cc; width:100%; max-width:690px;}

/*Snack Attack*/ 
table.game.snackattack {border-collapse:collapse; border-color:#0066cc; width:100%; max-width:690px;}

/*Spring Thing*/ 
.springthing {width:100%; max-width:747px; margin-left:auto; margin-right:auto;}

/*Summer Fun*/ 
.summerfun {width:100%; max-width:747px; margin-left:auto; margin-right:auto;}

/*Toy Cleanup*/ 
table.game.toycleanup {border-collapse:collapse; border-color:#0066cc; width:100%; max-width:690px;}

/*Tune Time*/ 
table.game.tunetime {border-collapse:collapse; border-color:#0066cc; width:100%; max-width:690px;}

/*Tricky Treats*/ 
.tricky {width:100%; max-width:747px; margin-left:auto; margin-right:auto;}

/*Winter Wonderland*/ 
.winterwonder {width:100%; max-width:709px; margin-left:auto; margin-right:auto;}

/*Workshop Challenge*/ 
.workshop {width:100%; max-width:724px; margin-left:auto; margin-right:auto;}

/*/////////////////////////////////////////////FUN STUFF/////////////////////////////////////////////*/

/*Chess*/
#chesstable {width:100%; max-width:382px;}
#chessmoves {width:100%; max-width:382px;}

/*Lynns Latest Art*/
.lynnartframecentered {width:100%; margin-bottom:10px; text-align:center; padding-bottom:3px;}
.lynnartthumb {margin-bottom:3px; width:100%; max-width:300px;}
.lynnartsingletext {text-align:center;}

/*Toon Tunes*/
.musicheaderfirst {font-weight:600; font-size:1.5rem; margin-top:1rem;}
.musicheader {font-weight:600; font-size:1.5rem; margin-top:1rem;}
.musiccreditsfirst {float:left; width:30%; margin-right:1rem; margin-left:0rem; margin-top:1.5rem;}
.musiccredits {float:left; width:30%; margin-right:1rem; margin-left:1rem; margin-top:1.5rem;}

/*/////////////////////////////////////////////Features/////////////////////////////////////////////*/
/*used on quotes page to separate paragraphs*/ 
.horizrule {margin-bottom: 2.5rem;
max-width: 100%;
max-height: 100%;
height: inherit !important;}

/*Who's Who - Rerun Edition*/
span.hybridwhotitle {font-weight:600; color:#3399cc; font-size:1.5rem;}
.hybridtextbox {width:80%; max-width:80%;}

/*Who's Who - Entire run of the strip edition  width: 100%;   object-fit: scale-down;*/
.hybridtextbox img {
 max-height: 100%;
height: inherit !important;
  max-width: 100%;

}

/*Research and Development*/
.rdtitlenav {color:#3399cc; font-size:2.5rem; font-weight:600;}
.rdtitles {color:#3399cc; font-size:2rem; font-weight:600;}