* {
box-sizing: border-box;
}

body {
background-color: white;
}

h1 {
color: #010495;
}

h3 {
color: #691089;
}

/*index.php*/
#index-news-banner {
	background-color: Moccasin;
	height: 22px;
	white-space: nowrap;
	overflow: hidden;
}

#index-news-banner p {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 100vw;
	animation-name: move-news-text;
	animation-duration: 15s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
	animation-delay: -4s;
}

#index-news-banner p span {
	color: red;
	font-size: 1em;
}

@keyframes move-news-text {
	from {margin-left: 100vw;}
	to   {margin-left: 0vw;} 
}

.top-bar {
width: 100%;
padding: 0; /*remove default leftpadding on <ul>*/
margin-bottom: 0;
margin-top: 0;
vertical-align: bottom;
list-style-type: none;
overflow: hidden; /*make ul container contain li elements*/
}

.top-bar-smallscreen {
display: none;
}

.nav-logo {
display: inline-block;
float: left;
width: 20%;
}

.logo {
width: 100%;
}

.nav-heading {
display: inline-block;
width: 10%;
float: right;
}

.nav-heading a {
display: inline-block;
font-family: Tahoma, Helvetica, sans-serif;
color: #1b1efe;
text-decoration: none;
text-align: center;
padding: 24px 0px;
width: 100%;   /*take all of space in nav-heading li container*/
}

.nav-heading a:hover{
background-color: #0a48b2;
color: white;
}

.drop-area:hover li {
display: block;
}

.footer {
background-color: Silver;
clear: both;
}

.footer p {
display: inline-block;
}

.footer-left {
width: 45%;
}

.footer-right a {
color: #010495;
margin-left: 70px;
}

.categories-bar {
display: none;
background-color: #6699ff;
width: 100%;
margin: 0;
padding: 0px 0px 0px 35%;
vertical-align: bottom;
list-style-type: none;
overflow: hidden; /*make ul container contain li elements*/
}


.categories-bar li {
display: inline-block;
width: 15%;
}

.searchform {
background-color: cadetblue;
width: 20%;
position: sticky;
top: 0;
}

.searchform h2 {
margin-top: 11px;
text-align: center;
color: NavajoWhite;
}

.searchform .submit {
margin: 0% 10% 0% 10%;
width: 80%;
}

.searchform ul {
list-style-type: none;
padding: 0;
margin: 0% 0% 0% 0%;
width: 100%;
}

.searchform li {
padding-bottom: 5px;
width: 100%;
}

.searchform li a {
font-family: Tahoma;
text-decoration: none;
color: white;
padding: 0 10px;
margin: auto;
}

.searchform li a:hover {
/*background-color: #2b5d5e;*/
color: #010495;
}

.welcome {
width: 80%;
padding-left: 1%;
background-color: white;
}

.homepage {
float: left;
}

.welcome h1 {
margin-bottom: 3px;
}

.welcome h3 {
margin-top: 0px;
color: #691089;
}
.welcome p {
margin-top: 0;
}

#welcome-links {
text-align: center;
}

.welcome .button {
margin-right: 10px;
}

#outline-flyer {
display: block;
margin-right: auto;
margin-left: auto;
}

#outlines-button {
text-align: center;
}

#stock-flash {
/*position: absolute;
top: 70px;
right: 50px;*/
float: right;
}

@media screen and (max-width: 700px) {
#index-searchform {position: relative; width: 100%; float: none; text-align: center;}
#index-searchform table {margin: auto;}
.nav-logo {display: block; width: 100%; float: none;}
.nav-heading {float: right; width: 15%;}
#stock-flash {display: none;}
}

@media only screen and (max-width: 500px) {
.nav-heading {width: 100%;}
.top-bar {display: none;}
.top-bar-smallscreen {display: block; overflow: hidden; margin: 0; padding: 0;}
#homepage-separator {display: none;}
#stock-flash {display: none;}
}

@media only screen and (min-width: 500px) {
.top-bar-smallscreen {display: none;}
}

/*products.php*/
.products-heading {
margin-bottom: 2px;
margin-top: 2px;
}

#searchform-parameters {
float: left;
margin-right: 150px;
}

#searchform-parameters-table td label.max{
margin-left: 15px;
}

#searchform-category {
margin-top: 40px;
margin-bottom: 50px;
}

#result-section {  /*only display after finding result*/
display: none;
}

h4.products-heading {
color: #691089;
}

#models-table {
margin-top: 10px;
}

#models-table, #models-table th, #models-table td {
border: 1px solid;
}

#models-table th {
position: -webkit-sticky; /*Safari*/
position: sticky;
top: 0;
background-color: #4e51fd;
color: white;
font-family: Garamond;
}

.tr1 {
background-color: SlateGray;
color: white;
}

.tr2 {
background-color: white;
}

#models-table td {
text-align: center;
}

#models-table a {
font-weight: bold;
text-decoration: none;
}

.tr1 a {
color: white;
}

.tr2 a {
color: #010495;
}

.fail-search {
text-align: center;
}

h2.fail-search {
color: red;
}

a.fail-search {
display: block;
margin: auto;
}

/*about.php*/
.about-heading {
margin: 3px;
}

.footnote {
font-family: verdana;
font-size: 10px;
}

/*custom.php*/
.custom-heading {
margin: 2px;
}

.custom-subheading {
margin: 2px;
color: #e63819;
}

h3.custom-heading {
color: #691089;
}

.custom-error {
color: #e63819;
}

/*contact.php*/
.contact-heading {
margin: 2px;
}

.contact-paragraph {
margin-top: 0;
}
.contact-list {
list-style-type: none;
}

.contact-country {
font-size: 30px;
color: #990000;
}

.contact-company {
color: #990000;
}

/*support.php*/
.support-heading {
margin: 2px;
}

/*categories.php*/
.categories-link {
background-color: rgb(200, 243, 255);
color: MediumVioletRed;
padding: 24px 7px; 
text-align: center;
text-decoration: none;
text-shadow: 2px 1px 3px white;
font-family: Tahoma;
border-style: solid;
border-radius: 7px;
}

.categories-link:hover {
background-color: rgb(118, 235, 67);
}

/*models.php*/
.model-heading {
margin: 2px;
}

h1.model-heading {
border-style: single;
border-width: 3px;
margin: 0px;
padding: 10px 0px 10px 0px;
/*background-color: #0899ff;*/
background: linear-gradient(to bottom, #66ccff 0%, #5266ff 100%);
color: DarkMagenta;
font-variant: small-caps
}

.models-link, .button {
background-color: rgb(200, 243, 255);
color: MediumVioletRed;
padding: 10px 15px;
margin: 10px 60px 4px 50px;
text-align: center;
text-decoration: none;
text-shadow: 2px 1px 3px white;
font-family: Tahoma;
border-style: solid;
border-radius: 7px;
}

.models-link {
float: right;
}

.button{
display: inline-block;
}

.models-link:hover, .button:hover {
background-color: rgb(118, 235, 67);
}

h3.model-heading {
color: #691089;
}

.model-specs {
text-align: left;
width: 250px;
}

.models-col {
float: left;
}

#models-image {
position: relative;
top: 15px;
}

.models-datasheet {
display: block;
position: relative;
top: 13px;
}

.models-subimage {
margin-bottom: 2px;
}

#model-notes {
max-width: 200px;
}

.models-right {
margin-left: 8%;
margin-right: 10%;
display: none;
}

.models-farright {
margin-right: 5%;
margin-left: 10%;
margin-bottom: 50px;
display: inline-block;
}


#models-stock td {
border: solid;
}

#models-stock th {
border: solid;
}

/*rfq.php*/
#serial-heading {
color: OrangeRed
}

/*feedback.php*/
.feedback-heading {
margin: 2px;
}