/* CSS Document */

/* Reset */

html, body { 
	margin: 0;
	padding: 0;
	border: 0;
	background: #FFF;
	font-size: 12px;
	}
				
div, span, article, aside, footer, header, hgroup, nav, section,
h1, h2, h3, h4, h5, h6, h7, p, blockquote, a, ol, ul, li, 
table, tr, th, td, tbody, tfoot, thead {
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	background: transparent;
	}

img { 
	margin: 0; 
	padding: 0;
}

/* Aligns the navigation logo and links */
.logo { 
	margin: 0;
	padding: 0;
	vertical-align: middle; 
}

video-thumbnail { width:150px; }
figure { margin:0px;}
figcaption { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#222; padding-top:5px; }

/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 150px;
  padding-right: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
} 

table, tr, th, td, tbody, tfoot, thead {
	margin: 0; 
	padding: 50;
	border: 0;
	vertical-align: baseline;
	background: transparent;
}
	
/*table { border-collapse: collapse; }*/
.table1   { border-collapse:seperate; }
.td1	{ }
.tr1	{ }
.cell-left		{ width: 500px; text-align:left; border: 1px solid black; padding-left: 10px; }
.cell-center	{ width: 100px; text-align:center; border: 1px solid black; }

/* Centers the text across multiple columns*/
td[colspan="5"] {
    text-align: center;
}

#t01 {
	width:600px; 
	}

/* Comparison Table */
#t02 {
	width:700px;
	border: 1px solid black;
	border-collapse: collapse;
	}
	
th { font-weight:bold; padding-top:5px; padding-bottom:5px;}
td { font-weight:bold; padding-top:5px; padding-bottom:5px;}

/* Default style, see Contact Form styling */
/*input, select, textarea, form, fieldset {
	margin:0; padding:0; border:0;
	}*/

article, aside, dialog, figure, footer, header, hgroup, nav, section { 
	display:block; }
	
h1, h2, h3, h4, h5, h6, h7, p, li, blockquote, td, th, caption, em, strong, strike, label { 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	font-weight: normal;
	font-style: normal;
	line-height: 100%; 
	text-indent :0;
	text-decoration: none;
	text-align: left;
	letter-spacing: 0;
	}	

a	{ text-decoration:none; } 

ol, ul  { list-style: none; } /*For Navigation */
.bullet { list-style: disc; list-style-position: inside; padding-left: 30px; line-height: 150%;} /*For indented bullet lists <li class="bullet"> */
/* .number { list-style: decimal; list-style-position: inside; padding-left: 60px; line-height: 150%;} */

/* Global */

html 	{	}
body	{ font-size:14px; color:#222; line-height:150%; }

/* Headings */

h1, h2, h3, h4, h5, h6, h7	{	} 

h1 /*Name*/ 	    { font-size:24px; color:#222; font-weight:bold; }
h2 /*Subject*/ 		{ font-size:14px; color:#222; font-weight:bold; line-height:150%; }
h3 /*Paragraph*/  	{ font-size:14px; color:#222; line-height:150%; }
h4 /*Category*/		{ font-size:12px; color:#222; }
h5 /*Project*/		{ font-size:14px; color:#007DC3; }
h6 /*Title*/		{ font-size:16px; color:#222; }
h7 /*Heading*/		{ font-size:14px; color:#222; }

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }

/* Text Elements */

#name	{ padding:30px 10px 20px 10px; margin:0 auto; color:#222; font-size:14px; line-height:70%;}

#name a:link		{ color:#222; }
#name a:visited		{ color:#222; }
#name a:hover		{ color:#222; }
#name a:focus		{ color:#222; }
#name a:active		{ color:#222; }

p        	  { color: #333; font-size: 14px; line-height: 150%; }
.right 		  { margin: 1.5em 0 1.5em 1.5em; padding: 0; }
.cv-heading   { font-weight: bold; color: #007DC3; }
.cv-title     { color: #007DC3; }
.cv-paragraph { color: #999; }
.white		  { color: #FFF }
.center		  { text-align: center; }

p span			 { line-height: 110%; }
p span.bold 	 { font-weight: bold; }
	
/* Images */

/* Main image on home page */
#image {
	float: left;
	border-bottom: 1px solid #999;
}

#image-960x540 {
	clear:both; 
	width:960px; 
	height:540px;
}

#image-right { /* Images floating right on home page */
	clear: both;
	float: right;
	margin-right: 0px;
	margin-left: 10px;
}

#image-thumbnail-right { /* Images floating right on documentation page */
	clear: both;
	float: right;
	margin-right: 300px;
	margin-left: 10px;
}

#image-catalog { /* Catalog Images */
	clear: both;
	width:960px; 
	height:960px;
}

#logo-right {
	float: right;
	margin-top: 0px;
	margin-right: 0px;
}

/* Containers */

#header	{ margin: 0 auto; }

#banner	{ width: 960px; margin:0 auto; }

#wrapper	{ width: 960px; margin: 0 auto; }

#navigation			{ 
	clear: both;
	position: fixed;
	right: 0;
	left: 0;
	margin-right: auto; 
	margin-left: auto;
	padding-top: 10px;
	padding-bottom: 10px; 
	background: #EBEBEB; 
	z-index: 100; 
}

#navigation-bar		{ 
	clear: both; 
	position: fixed;
	height: 30px;
	margin-top:120px; 
	right: 0; 
	left: 0; 
	margin-right: auto; 
	margin-left: auto; 
	padding-top:; 
	padding-bottom:; 
	background: #000; 
	z-index: 100;
}

/* Email address and phone number */
#navigation-bar-content	{
	clear: both; 
	width: 960px;
	margin: auto;
}


#main-nav 			{ clear: both; width: 960px; margin: 0 auto; font-size: 14px; /*border-bottom-style:dotted; border-width:thin;*/ }
#main-nav ul		{ padding: 10px 0px 10px 0px; }
#main-nav ul li		{ display: inline; }
#main-nav ul li a	{ padding-right: 20px; }

#main-nav a:link	{ color: #222; }
#main-nav a:visited	{ color: #222; }
#main-nav a:hover	{ color: #222; text-decoration: underline; }
#main-nav a:active	{ color: #222; }

/* Adds style to links inside the div container */

#container a:link	{ color: #36F; }
#container a:visited	{ color: #36F; }
#container a:hover	{ color: #36F; }
#container a:active	{ color: #222; }

#social-nav 		{ clear: both; width:960px; margin: 0 auto; font-size: 14px; /*border-bottom-style:dotted; border-width:thin;*/ }
#social-nav ul		{ padding: 10px 0px 10px 0px; }
#social-nav ul li	{ display: inline; }
#social-nav ul li a	{ padding-right: 10px; }

/*Margin adds spacing to the outside of container, padding adds spacing to the inside of the container*/

#social-media		 { position: absolute; clear: both; margin: 200px 0px 0px 100px;}
#social-media ul li  { display: inline; }
#social-media ul     { margin-top: 40px; }

#content-home		{ clear:both; width:960px; margin:0 auto; padding-top:135px; }
#content			{ clear:both; width:960px; margin:0 auto; padding-top:170px; }

#footer				{ clear:both; height:100px; width:100%; border-width:1px; border-color:#666; /*background-image:url(../images/bg.png);*/ }

#container			{ clear: both; padding-top: 1px; }
#container1			{ clear: both; padding-top: 1px; }
#container2			{ clear: both; margin: 0 auto; padding-top: 88px;}


#960x540					{ clear:both; width:960px; height:540px; }
#960x580					{ clear:both; width:960px; height:580px; }
#960x600					{ clear:both; width:960px; height:600px; }

div .layout			  		{ clear: both; width:960px; height:400px; }
div .layout-1-grey  		{ clear: both; width:960px; height:400px; background:#555 }
div .layout-1-light-grey	{ clear: both; width:960px; height:400px; background:#ddd; }
div .layout-1-blue		 	{ clear: both; width:960px; height:400px; background:#007DC3; }
div .layout-1-light-blue  	{ clear: both; width:960px; height:400px; background:#00A4E4; }
div .contact			  	{ clear: both; width:960px; height:400px; }
div .this-site			  	{ clear: both; width:960px; height:540px; }

/* Miscellaneous  */

.dot  { border-top-style:dotted; border-width:thin; }
.ddd  { color:#DDD }	 /*Light Gray*/
.222  { color:#222 }	 /*Dark Gray*/
.333  { color:#333; }	 /*Dark Gray*/
.2925 { color:#0096D6; } /*Pantone 2925 #0096D6*/
.2995 { color:#00A4E4; } /*Pantone 2995 #00A4E4 links*/

/*.copyright-text	{ font-style:light; color:#333; }*/

/* Center the Made in Massachusetts stamp*/

.made-in-massachusetts {
	height: 30px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Contact Form */

input id, textarea {
	height: 38px;
	width: 480px;
	padding: 6px 10px;
	border: 1px solid #D1D1D1;
	border-radius: ;
	box-shadow: none;
	box-sizing: border-box; 
}

/* PayPal Customizations */

.addToCartButtonContainer { /* Add to Cart Button */
	padding: 18px;
	background-color: #C6F;
}

.hero-img { /* Makes PayPal images zoom when hovering */
	transform: scale(1);
	transition: transform 0.4s ease-in-out;	
}

.hero-img:hover { /* Makes PayPal images enlarge when hovering */
	transform: scale(1.3);
}

.input-label { /* Adds spacing between description and input labels */
	margin-top: 10px;
}

/* Shopping Cart */

#cart-icon {	
	position: fixed;
	margin-top: 45px;
	margin-left: 890px;
	display: flex;
	font-size: 30px;
	cursor: pointer;
	z-index: 500; 
}


#cart-icon .cart-item-count { 
	position: absolute;
	top: 0;
	right: -6px;
	width: 20px;
	height: 20px;
	background: #96F;
	border-radius: 10px;
	font-size: 14px;
	color: #FFF;
	display: flex;
	justify-content: center;
	align-items: center;
	visibility: hidden;
	z-index: 101;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: Bold;
}

.shop {
	padding-top: 30px;
	padding-right: ;
	padding-bottom: 30px;
	padding-left: ;
}

.section-title {
	font-size: 35px;
	text-align: center;
	margin-bottom: 15px;
}

.product-content {
	display: grid;
	grid-template-columns: repeat(3, 1fr); 
	gap: ; /* Adjusts the spacing between product images */
	justify-items: center;
}

.product-box .img-box {
	display: flex;
	border-radius: ;
	overflow: hidden;
}

.subject-heading {
	margin: 0 auto;
	height: 40px;
	display: block;
}

.img-box img { 
	height: 320px; /* Divide 960px/3 for equal spacing */
	transition: 0.5s;
}

.img-box:hover img { 
	transform: scale(1.1);
}

/* Product title */
.product-box .product-title {
	text-align: center;
	/* font-size: 20px; */
	margin-top: 10px;
}

.product-box .price-and-cart {
	/* display: flex; */
	/* justify-content: space-between; */
	/*  align-items: center; */
}

/* Div container to pad the text */
.product-details {
	padding-left: 20px;
	padding-right: 20px;	
}

/* Product price */
.price-and-cart .price {
	/*  margin: auto; */
	/* width: 50%; */
	text-align: center;
	font-size: 14px; 
	font-weight: Bold;
	font-family: Arial, Helvetica, sans-serif;
	margin-top: 10px;
}

/* Button (Sizes and colors) */
.price-and-cart .options {
	text-align: center;
	padding: 3px 10px 3px 10px;
	color: #FFF;
	background: #000;
	cursor: pointer;
	margin-top: 10px;
	margin-right: 100px;
	margin-left: 100px;
	border-radius: 5px;
}
	
.cart {
	position: fixed;
	top: 0;
	right: -100%;  /* Modify from 0 to -100% to hide */
	width: 360px;
	height: 100%;
	background: #FFF;
	box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
	padding: 65px 20px 40px;
	z-index: 100;
	overflow: auto;
	transition: 0.5s; /* For javascript */
}

.cart.active { /* For javascript */
	right: 0;
}

.cart-title {
	text-align: center;
	font-size: 30px;
}

.cart-box {
	display: flex;
	align-items: center;
	margin-top: 20px;
}

.cart-box img {
	width: auto;
	height: 100px; /* Cart product image height */
	border-radius: ;
	object-fit: cover;
	margin-right: 20px;
}

.cart-detail {
	display: grid;
	gap: 8px;
	margin-right: auto;
}

.cart-product-title {
	font-size: ;
	line-height: 1;
}

.cart-product-color {
	font-size: ;
	line-height: 1;
}

.cart-price { /* Price of each product in the cart */
	font-weight: 500;
}

.cart-quantity {
	display: flex;
	width: 80px; /* Width of quantity field */
	border: 1px solid #999;
	border-radius: ;
}

.cart-quantity button {
	background: transparent;
	width: 30px;
	border: none;
	font-size: 20px;
	cursor: pointer;
}

.cart-quantity #decrement {
	font-family: Courier;
	font-size: 16px;
	color: #000;
	padding-top: 3px;
}

.cart-quantity #increment {
	font-family: Courier;
	font-size: 16px;
	color: #000;
	padding-bottom: px;
}

.cart-quantity .number { /* Quantity next to product items in the cart */
	display: flex;
	justify-content: center;
	width: 40px; /* ? */
	/*border-left: 1px solid #999;*/
	/*border-right: 1px solid #999;*/
	cursor: default;
	font-family: Arial, Helvetica, sans-serif;
	padding-top: 1px;
}

.cart-remove {
	font-size: 25px;
	cursor: pointer;
}

.total { /*Text that says Subtotal*/
	display: flex;
	justify-content: flex-end;
	align-items: center;
	border-top: 1px solid #333;
	margin-top: 20px;
	/*font-size: 18px;*/
}

.total-price { /* Cart subtotal */
	margin-left: 20px;
	font-weight: Bold;
}

.btn-buy { /* Buy Now button and location */
	display: block;
	padding: 10px 30px;
	background: #C9F;
	border: none;
	border-radius: ;
	font-size: 16px;
	color: #FFF;
	margin: 20px auto 0;
	cursor: pointer;
}

#cart-close { /* Close X button and location */
	position: absolute;
	top: 20px;
	right: 15px;
	font-size: 25px;
	cursor: pointer;
}

/* Product selection drop downs */

.product-policy

/* For mobile devices */

@media screen and (max-width: 360px) {
	.product-content {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}
	
	.cart {
		width:100%;
	}
}

/* PayPal, place add to cart menu under the product */

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Creates three equal-width columns */
  gap: 20px; /* Adds spacing between columns */
}

.grid-item {
  /* Basic styling for items */
  padding: 15px;
}

/* Contact Form */

input, textarea, button-send { /* Modified "button" to "button-send" to avoid paypal cart conflict */
  /*width: 100%;*/
	width: 420px;
	height: 30px;
	padding: 6px 10px;
	border: 1px solid #D1D1D1;
	border-radius: ;
	box-shadow: none;
	box-sizing: border-box; }

textarea {
	width: 420px;
	height: 150px;
	resize: none;
}

.button-send {
	width: 420px;
	height: 30px;
	padding: 6px 10px;
	border: 1px solid #D1D1D1;
	border-radius: ;
	box-shadow: none;
	box-sizing: border-box;
}