*, *:before, *:after {
	box-sizing: border-box;
}

body { 

background-color:aliceblue; 
margin:0; 
top:0; 
left:0; 
padding:0; 
}
img {
	border: 0px; 
}
.error {
	color:red;
}
.search {
width:100%;
height:auto;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;

}
/*All buttons*/
button {
	background-color: #ffffff; 
	border: 3px outset navy;
	box-shadow: 1px 1px 5px gray;
	border-radius: 5px;
	padding:5px;
	width: 250px;
	min-height:25px;
	margin:1px auto;
	font-size:14pt;
	height:auto;
	
}

button:hover {
	background-color:aliceblue;
	border:3px outset green;
}
button:active {
	border: 3px solid blue;
	border-bottom: 3px inset blue;
	box-shadow: 1px 1px 5px white;
}
.smallbuttons{
	/* flexbox container used for .svg, png, wpc and pvgc files*/
	display: flex;
	align-content: space-around;
	padding:1px;
	width:250px; 
	height:auto;
	margin:2px auto;
	flex-wrap:wrap;
}
.small {
	/*used for .svg, png, wpc and pvgc files*/
	max-width: 55px;
	margin:3px;
	padding: 2px;
	font-size: 14pt;
}
/*end button styles*/
/*styles for bead sheets and front index page buttons*/
.beadsheets {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		margin: auto;
		border:0px;
		width:99%;
}
.beadsheets, img {
	width: 95%;
	height: auto;
	margin: 5px;
	border: 1px solid black;
}

.featured {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin: auto;
	border:0px;
	width:99%;
}

.featured, img {
	width: 95%;
	height: auto;
	margin: 4px;
	border: 1px solid black;
}
/*end styles for beadsheets and front index page buttons*/
input[type=submit] {background-color:lightskyblue;}
/*end all buttons*/
.sheetworks {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 20px auto;
  text-align: center; /* Optional: centers text inside */
}

.sheetworks img {
  max-width:100%; /* or any size that fits your layout */
  height: auto;
  display: block;
  margin: 0 auto;
}
/*button with class of products for pat-index*/
.products {
	width:100%;
}
/* end menu items*/

/* basic structure begins*/
p {
	margin:10px;
	text-align:left;
font-family: "Times New Roman";
}
ul {
	text-align: left;
}
div {
	text-align: left;
}
img {
	border:0px;
}

hr {

	width:100%;
	background-color: silver;
	height: 1px;
	border-top: 2px solid navy;
	margin-top: 10px;
	padding: 0;
	box-shadow: 3px 3px 7px silver;
}


h1, h2, h3, h4, h5, h6 {
	margin: 3px;
	color: navy;
	font-family: "Monotype Corsiva";
	font-weight: bold;
	text-align:center;
}
h1 {font-size: 2.5em;}
h2 {font-size: 2rem}
.dailyMessage {
	margin: 2px;
	color: navy;
	font-family: courgette;
	font-weight: bold;
	text-align:center;
font-size:2em;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.text-center {
	text-align:center;
}
.text-justify {
	text-align:justify;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* basic structure ends */
.main-flexbox {
	max-width:100%;
	margin-top:75px;
	
	display: flex; 
	justify-content: space-between; 
	align-items:flex-start; 
	gap:5px; 
	padding:5px; 
	background-color:aliceblue;
}
.left-bar {
	display:flex;
	flex-direction: column;
	justify-content:space-around;
	flex:1;
	max-width:320px;
	height:auto;
	background-color:white;
	padding:10px;
	gap:10px 10px;
	border-radius:5px;
	align-items:center;
	gap:1%;
}
.main-area {
	width:95%;
	flex:3; 
	flex-basis:320px;
	flex-grow:2; 
	height:auto; 
	background-color:aliceblue; 
	display:flex; 
	flex-wrap:wrap; 
	align-items:flex-start; 
	justify-content:center; 
	gap:1%;


}
.right-bar{
	display:flex; 
	flex-direction: column;
	justify-content:space-around;
	flex:1; 
	max-width:320px; 
	height:auto; 
	background-color:white;
	padding:10px;
	gap:10px 10px;
	border-radius:5px;
		align-items:center;
		gap:1%;
}

.main-area-items  {
	width: 99%;
	background-color: #ffffff;
	margin:10px auto;
	border: 3px solid cornflowerblue;
	box-shadow: 1px 1px 5px gray;
	border-radius: 6px;
	padding: 5px;
	height:auto;	
     box-sizing: border-box;	
}
.main-area-items p {
	text-align: left;
}
.pat-index-main {
	display: flex;
	display: -ms-flexbox;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	background-color:white;
	margin: auto;
	width:100%;
	height:auto;
	border:0px;
	width:99%;
	
}
.pat-index {

	text-align: center;
	margin:5px;
	width:auto;
	height:auto;
	padding:1px;
	border:0px;
	border-color:white;
	
}



.downloadpage_main_area {
	width:99%;
	background-color: #ffffff;
	margin:10px auto;
	border: 1px solid navy;
	border-bottom: 1px groove navy;
	box-shadow: 1px 1px 5px gray;
	border-radius: 5px;
	padding: 0px;
	
	display:flex; 
	flex-direction:row;
	align-items: flex-start; 
	justify-content: space-around; 
	flex-wrap:wrap;
	gap:1%;
	
}
.downloadpage_left {
	flex:1;
	text-align:center;
	min-width:320px;	
	max-width:100%;
	padding:1%;
}
.page_left {
	flex:1;
	text-align:center;
	min-width:320px;
	max-width:100%;
	/*control image size inline*/
}


.downloadpage_right {
    display:flex;
    flex-direction: column;
    flex:1;
    text-align:center;
    min-width:320px;
    max-width:100%;
    padding:1%;
    justify-content: flex-start; /* <— THIS forces items to the top */
}
/* for use in vertical scrolling images on expansion pack pages*/
.vertical-scroll {
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 8px;
  overflow-x: auto;
  border: 2px solid navy;
  max-height: 600px;
margin:auto;
}

.imgBlockVScroll {
  flex: 0 0 auto;
  width: 99%; 
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 3px solid cornflowerblue;
  padding: 5px;
}

.imgBlockVScroll img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
/* end for use in vertical scrolling images on expansion pack pages*/


/*for quilt block pages only that have the big chart*/
.quilt-block-chart {
	width:100%; height:auto; margin:0px auto;
}

/*Instructions Pages Begin*/
.patternR {
	float: right;
	margin: 20px;
	width:300px; 
	height:300px;
}

.patternL {
	float: left;
	margin: 20px;
	height: auto;
}
.zoom:hover {
	transform: scale(2,2);
	transition: transform .2s;
}
.instr-flex {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	align-items: flex-start;
}
.instr-intro {
	flex: 2;
	min-width: 50%;
	max-width: 100%;
	height: auto;
}
.instr-intro-img {
	flex: 1;
	text-align: center;
}
.instr-columns {
	column-count: 3;
	column-width: 300px;
}
/*Instructions Pages End*/
.everyone {
	background-color:#ffaaff;
}
/*for the daily Update only!!*/
.update-main {
	background-color:white;
		
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		text-align:center;
		max-width: 640px;
		height: auto;
		margin:auto;
		padding: 5px;
}
.boxes {
background-color:white;
		width: 99%;
		height: auto;
		padding: 10px;
		text-align: center;
	border:10px solid aquamarine;
	margin:auto;
}

/*end daily update only*/

footer {
	display: flex; flex-wrap:wrap; justify-content: space-between; width:100%;
}
.footer-item {
	flex:1;
	padding: 10px;
	min-width:320px;
}
/*begin sizes*/
/*hides mobile only code from desktop*/

/*#####################  320px to 899px ##################################################################################################*/
@media only screen and (min-width:320px) and (max-width:850px) {
	.not-mobile {display:none;}
	.main-area{
		width:100%;
	}
	.main-area-items {width:100%;}
	.pat-index-main {width:100%;}
	.downloadpage_main_area {min-width:300px; max-width:100%; flex-direction:column; }
	.downloadpage_left {min-width:300px; max-width:100%;}
	.downloadpage_right {min-width:300px; max-width:100%;}
	.left-bar {
		display: none;
	}
	.right-bar {
		display:none;
	}
.patternR {
	float:none;
}
}
/*#####################  mobile only #################################################################*/
@media only screen and (min-width:640px){
	.mobile-only {
	display:none;
}
}
/*#####################  Navigation installed March 24, 2023 ###############################################################*/
/*#####################  Navigation installed March 24, 2023 ###############################################################*/

.nav {
	height: 60px;
	width: 100%;
	background-color: white;
	position: fixed;
	top: 0;
	left: 0;
	padding-top: 4px;
	border-bottom: 3px groove navy;
	margin-bottom: 120px;
	z-index: 3;
}

.nav > .nav-header {
	display: inline;
}

.nav > .nav-header > .nav-title {
	display: inline-block;
	color: #fff;
	padding-left: 10px;
	float: left;

}
.nav > .nav-links {
	display: block;

	font-size: 1.5rem;
font-family: "Monotype Corsiva";
}

.nav > .nav-links > a {
	display: inline-block;
	padding: 13px 10px 13px 10px;
	text-decoration: none;
	color: navy;
}

.nav > .nav-links > a:hover {
	background-color: aliceblue;
	border-radius: 5px;
}
.nav > .nav-btn,
.nav > #nav-check {
	display: none;
}
@media (max-width:850px) {

	.nav > .nav-btn {
		display: inline-block;
		position: absolute;
		width: 45px;
		height: 45px;
		right: 10px;
		top: 2px;
	}
	.nav > .nav-btn > label {
		display: inline-block;

		padding: 5px;
	}
	.nav > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {
		background-color: aliceblue;
		border-radius: 5px;

	}
	.nav > .nav-btn > label > img {
		display: block;
	}

	.nav > .nav-links {
		position: absolute;
		top: 60px;
		left:0px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;

		width: 100%;
		background-color: aliceblue;
		height: auto;
		transition: all 0.3s ease-in;
		overflow-y: hidden;
		
	}
	.nav > .nav-links > a {


		width: auto;

		margin: 1px;
	}
	.nav > #nav-check:not(:checked) ~ .nav-links {
		height: 0px;
	}
	.nav > #nav-check:checked ~ .nav-links {
		height: auto;
		width: auto;
		overflow-y: auto;
		overflow-x: hidden;
		background-color: white;
		border: 1px solid silver;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
		z-index: 9999;
	}
}

/*end of navigation*/



/*#########################################################################################################################*/
/*printing*/
@media print {
	body {
background-color:white;
		padding: .25in;
	background-image: none;
	}
	.mainheader {
		display: none;
	}
	.mainfooter {
		display: none;
	}
	.content_left_sidebar {
		display: none;
	}
	.content_right_sidebar {
		display: none;
	}
	.main-area {
		margin-left: 0px;
	}
	.no-print {
		display: none;
	}
	.leaderboard {
		display: none;
	}
	.google320 {
		display: none;
	}
.main-area-items  {
	margin:0px auto;
	box-shadow: none;
     page-break-after: always;
}


}