/* Menu design */
#menu
{
	position: fixed;
	width: 100%;
	margin: 0 auto;
	top: 5px;
	padding: 10px 0 0 0;
	list-style: none;
	background: #111;
	border-radius: 50px;
	display: flex;
	justify-content: center;
	z-index: 1;
	white-space: nowrap;
}
#menu li
{
	float: left;
	padding: 0 0 10px 0px;
	position: relative;
}
#menu a
{
	float: left;
	height: 25px;
	padding: 0 25px;
	color: #3399FF;
	font: bold 12px/25px Arial, Helvetica;
	text-decoration: none;
	text-shadow: 0 1px 0 #000000;
}
#menu li:hover > a { color: #0066FF; }
#menu ul
{
    list-style: none;
    margin: 0;
    padding: 0;   
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
	border-radius: 5px;
    background: #222;
}
#menu li:hover > ul { display: block; }
#menu ul li
{
	float: none;
	margin: 0;
	padding: 0;
	display: block;
}
#menu ul a
{
	padding: 10px;
	height: auto;
	line-height: 1;
	display: block;
	white-space: nowrap;
	float: none;
	text-transform: none;
}
#menu:after
{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: "";
	clear: both;
	height: 0;
}
#menu ul li:first-child a:after
{
	content: "";
	position: absolute;
	left: 30px;
	top: -8px;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 8px solid #FF0000;
}
@media only screen
and (max-width: 650px)
{
	#menu a { padding: 0 10px; }
}

/* Misc site-wide */
header
{
	margin-bottom: 4%;
}
hr
{
	border: 1px solid #F1F1F1;
	margin-bottom: 25px;
}
.container { padding: 16px; }
.body { margin-bottom: 4%; }
.thankyou
{
	margin-bottom: 10%;
	margin-left: 15%;
	margin-right: 15%;
	font-size: 18px;
	padding-bottom: 20%;
}
.thankyou li,
.thankyou p
{
	float: left;
	clear: left;
}
#endthankyou { padding-bottom: 10%; }
#center
{
	text-align: center;
}
#center fieldset input
{
	margin: auto;
}
#links
{
	font: bold 12px/25px Arial, Helvetica;
	color: #66CCFF;
}
#btntopmargin
{
	margin-top: 1%;
}
#totalparts
{
	display: flex;
	justify-content: center;
}
#totalparts p
{
	margin-top: 21px;
	margin-left: 10px;
	margin-right: 20px;
}

/* Footer */
footer
{
	margin-top: 10%;
	position: fixed;
	height: 60px;
	width: 100%;
	background-color: #333333;
	bottom: 0;
	left: 0;
}
p.copyright
{
	position: absolute;
	width: 100%;
	color: #66CCFF;
	line-height: 40px;
	font-size: 0.7em;
	text-align: center;
	bottom: 0;
}
@media only screen
and (min-width: 900px)
and (max-width: 1400px)
{
	header { margin-bottom: 10%; }
	body
	{
		margin-bottom: 10%;
		margin-top: 10%;
	}
}
@media only screen
and (max-width: 900px)
{
	header { margin-bottom: 15%; }
	body { margin-bottom: 10%; }
	footer { height: 40px; }
	p.copyright { line-height: 10px; }
}

/* Error messages for pages */
#error
{
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translateY(-50%);
	-ms-transform: translateX(-50%);
	-moz-transform: translateY(-50%);
	-moz-transform: translateX(-50%);
	-webkit-transform: translateY(-50%);
	-webkit-transform: translateX(-50%);
	-o-transform: translateY(-50%);
	-o-transform: translateX(-50%);
	transform: translateY(-50%);
	transform: translateX(-50%);
	color: red;
}

/* Logo style */
.logo h1
{
	font-weight: bold;
	font-size: 60px;
	font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
}
.logo h2
{
	font-style: oblique;
	font-size: 15px;
	font-family: Courier New, monospace;
	text-decoration: underline;
}

/* About styling */
.about
{
	margin-bottom: 5%;
	margin-top: 5%;
}
.about h3
{
	font-weight: bold;
	font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
	text-decoration: underline;
}
.about p
{
	-ms-transform: translateY(-10%);
	-moz-transform: translateY(-10%);
	-webkit-transform: translateY(-10%);
	-o-transform: translateY(-10%);
	transform: translateY(-10%);
	margin-left: 20%;
	margin-right: 20%;
	font-size: 18px;
}
.about ul
{
	margin-left: 30%;
	margin-right: 30%;
}
.about li
{
	text-align: justify;
	font-size: 17px;
}
@media only screen
and (min-width: 650px)
and (max-width: 900px)
{
	.about
	{
		margin-top: 10%;
		margin-bottom: 10%;
	}
	.about h3 { margin-bottom: 5%; }
}
@media only screen
and (max-width: 650px)
{
	.about
	{
		margin-top: 20%;
		margin-bottom: 20%;
	}
	.about h3 { margin-bottom: 10%; }
}

/* Catalog sample styling */
.catalogsample { margin-bottom: 10%; }

.catalogsample p
{
	margin-left: 20%;
	margin-right: 20%;
}

/* Catalog search */
.search
{
	padding: 8px 15px;
	background: rgba(50, 50, 50, 0.2);
	border: 0px solid #DBDBDB;
	width: auto;
}
.search form
{
	width: 100%;
	margin: 10px auto;
	display: flex;
	justify-content: center;
}
.search input[type=search]
{
	width: 20%;
	margin-right: 15px;
}
.search button
{
	position: relative;
	padding: 6px 15px;
	left: -8px;
	border: 2px solid #207CCA;
	background-color: #207CCA;
	color: #FAFAFA;
}
.search button:hover
{
	background-color: #FAFAFA;
	color: #207CCA;
}

/* Catalog search results */
.dbtable
{
	border: 1px solid #000000;
}
.dbtable table
{
	width: auto;
	height: auto;
	display: block;
	justify-content: center;
	overflow-x: scroll;
	white-space: nowrap;
	font-size: 0.8em;
}
.dbtable tr th
{
	padding: 0 39px;
}

/* Image formatting */
#saplogo
{
	height: 191.25px;
	width: 105.75px;
	float: left;
	-ms-transform: translateY(-5%);
	-moz-transform: translateY(-5%);
	-webkit-transform: translateY(-5%);
	-o-transform: translateY(-5%);
	transform: translateY(-5%);
	-ms-transform: translateX(500%);
	-moz-transform: translateX(500%);
	-webkit-transform: translateX(500%);
	-o-transform: translateX(500%);
	transform: translateX(500%);
	clear: left;
}
#portrait
{
	float: left;
	height: 180px;
	width: 180px;
	margin-left: 5%;
	clear: left;
}
#gears
{
	float: left;
	height: 250px;
	width: 250px;
	margin-left: 5%;
	clear: left;
}
#checkmark
{
	float: right;
	height: 300px;
	width: 300px;
	margin-right: 5%;
	clear: right;
}
#signupimg
{
	float: left;
	height: 200px;
	width: 200px;
	margin-left: 5%;
	-ms-transform: translateY(-20%);
	-moz-transform: translateY(-20%);
	-webkit-transform: translateY(-20%);
	-o-transform: translateY(-20%);
	transform: translateY(-20%);
	clear: left;
}
#veilad
{
	margin-left: 1%;
	float: left;
	clear: left;
	max-width: 100%;
	max-height: 100%;
	-ms-transform: translateY(-55%);
	-moz-transform: translateY(-55%);
	-webkit-transform: translateY(-55%);
	-o-transform: translateY(-55%);
	transform: translateY(-55%);
}
#adspace
{
	margin-right: 1%;
	float: right;
	clear: right;
	max-width: 100%;
	max-height: 100%;
	-ms-transform: translateY(-55%);
	-moz-transform: translateY(-55%);
	-webkit-transform: translateY(-55%);
	-o-transform: translateY(-55%);
	transform: translateY(-55%);
}
.adspacediv
{
	width: auto;
	height: auto;
	padding: 20px;
}
.signupbtndiv
{
	width: auto;
	text-align: center;
	padding: 20px;
}
#signupbtn
{
	display: inline-block;
	max-width: 100%;
	height: auto;
	-ms-transform: translateY(-30%);
	-moz-transform: translateY(-30%);
	-webkit-transform: translateY(-30%);
	-o-transform: translateY(-30%);
	transform: translateY(-30%);
}
#ebaysample
{
	height: 50%;
	width: 50%;
}
@media only screen
and (min-width: 1400px)
and (max-width: 1800px)
{
	#saplogo
	{
		-ms-transform: translateX(100%);
		-moz-transform: translateX(100%);
		-webkit-transform: translateX(100%);
		-o-transform: translateX(100%);
		transform: translateX(100%);
	}
}
@media only screen
and (min-width: 900px)
and (max-width: 1400px)
{
	#saplogo
	{
		width: 10%;
		height: 10%;
		-ms-transform: translateX(100%);
		-moz-transform: translateX(100%);
		-webkit-transform: translateX(100%);
		-o-transform: translateX(100%);
		transform: translateX(100%);
		-ms-transform: translateY(-25%);
		-moz-transform: translateY(-25%);
		-webkit-transform: translateY(-25%);
		-o-transform: translateY(-25%);
		transform: translateY(-25%);
	}
	#portrait
	{
		width: 12%;
		height: 12%;
	}
	#veilad
	{
		width: 10%;
		height: 10%;
		-ms-transform: translateY(-140%);
		-moz-transform: translateY(-140%);
		-webkit-transform: translateY(-140%);
		-o-transform: translateY(-140%);
		transform: translateY(-140%);
	}
	#adspace
	{
		width: 10%;
		height: 10%;
		-ms-transform: translateY(-140%);
		-moz-transform: translateY(-140%);
		-webkit-transform: translateY(-140%);
		-o-transform: translateY(-140%);
		transform: translateY(-140%);
	}
	#signupbtn
	{
		width: 20%;
		height: 20%;
		-ms-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}
}
@media only screen
and (min-width: 650px)
and (max-width: 900px)
{
	#saplogo
	{
		width: 10%;
		height: 10%;
		-ms-transform: translateX(20%);
		-moz-transform: translateX(20%);
		-webkit-transform: translateX(20%);
		-o-transform: translateX(20%);
		transform: translateX(20%);
	}
	#portrait
	{
		width: 10%;
		height: 10%;
	}
	#veilad
	{
		width: 13%;
		height: 13%;
	}
	#adspace
	{
		width: 13%;
		height: 13%;
	}
	#signupbtn
	{
		width: 30%;
		height: 30%;
	}
}
@media only screen
and (max-width: 650px)
{
	#saplogo
	{
		width: 10%;
		height: 10%;
		-ms-transform: translateX(10%);
		-moz-transform: translateX(10%);
		-webkit-transform: translateX(10%);
		-o-transform: translateX(10%);
		transform: translateX(10%);
	}
	#portrait
	{
		width: 10%;
		height: 10%;
	}
	#veilad
	{
		width: 13%;
		height: 13%;
		-ms-transform: translateY(-400%);
		-moz-transform: translateY(-400%);
		-webkit-transform: translateY(-400%);
		-o-transform: translateY(-400%);
		transform: translateY(-400%);
	}
	#adspace
	{
		width: 13%;
		height: 13%;
		-ms-transform: translateY(-400%);
		-moz-transform: translateY(-400%);
		-webkit-transform: translateY(-400%);
		-o-transform: translateY(-400%);
		transform: translateY(-400%);
	}
	#signupbtn
	{
		width: 30%;
		height: 30%;
		-ms-transform: translateY(-200%);
		-moz-transform: translateY(-200%);
		-webkit-transform: translateY(-200%);
		-o-transform: translateY(-200%);
		transform: translateY(-200%);
	}
}
#founder
{
	-ms-transform: translateX(-7%);
	-moz-transform: translateX(-7%);
	-webkit-transform: translateX(-7%);
	-o-transform: translateX(-7%);
	transform: translateX(-7%);
}
#howitworks
{
	-ms-transform: translateX(-9%);
	-moz-transform: translateX(-9%);
	-webkit-transform: translateX(-9%);
	-o-transform: translateX(-9%);
	transform: translateX(-9%);
}
#benefits
{
	-ms-transform: translateX(10%);
	-moz-transform: translateX(10%);
	-webkit-transform: translateX(10%);
	-o-transform: translateX(10%);
	transform: translateX(10%);
}
#suboptions
{
	-ms-transform: translateX(-8%);
	-moz-transform: translateX(-8%);
	-webkit-transform: translateX(-8%);
	-o-transform: translateX(-8%);
	transform: translateX(-8%);
}

/* Button styles */
.button-success,
.button-error,
.button-warning,
.button-secondary
{
	color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success { background: rgb(28, 184, 65); /* this is a green */ }
.button-error { background: rgb(202, 60, 60); /* this is a maroon */ }
.button-warning { background: rgb(223, 117, 20); /* this is an orange */ }
.button-secondary { background: rgb(66, 184, 221); /* this is a light blue */ }

/* Status select */
#centersel
{
	display: block;
	margin: auto;
}