@charset "utf-8";
 

/*
   Design sheet for Superior Solutions NWA website 
	  	   
	   Author: Dianna Main
	   Date: Complete rebuild started 8/24/25

	   Filename: stylesheetSS.css
	   
	   url:    www.superiorsolutionsnwa.com
	   
	   This sheet if for the basic styles used throughout the entire website  
			used for ALL pages and all devices, 
			mobile specific see stylesheet1SS.css,
			table specific see tablestylesSS.css,
			print specific see printstylesSS.css
			
		ALL fonts are set in the resetss.css, defaulted to 400 weight italic unless changed
*/

/* HTML Styles will only see if width exceeds 1820px ALL PAGES=========================*/
html {
	background-color: white;
}

/* Layout styles for a centered body ALL PAGES =======================*/
body {
	display: block;
	margin-left: auto;
	margin-right: auto;
	min-height: 100%;
	width: 100%;
	max-width: 1820px;
	min-width: 360px;
	/*border-top: 4px solid gray;*/
	background-color: white;
	/*border-left: 4px solid gray;
	border-right: 4px solid gray;*/
}

/*adding content after body so page won't collapse*/
body:after {
			 clear: both;
			 content: "";
			 display: table;
		}
		
/* Header Styles setting header to fill the width of the body ALL PAGES=============*/
body > header {
	width: 100%;
	padding-top: 1%;
	padding-bottom: 1%;
}

/*logo image in a block left of header ALL PAGES*/ 
header img#headerImage {
	display: block;
	float: left;
	width: 40%;
	max-width: 1000px;
	max-height: 225px;
}

/* Navigation Basic Main Menu Styles horizontal under header ALL PAGES================*/
/*Navigation container*/
body > header > nav {
	display: block;
	float: right;
	width: 45%;
	padding-top: 50px;
}

a#navicon {
	display: none;
}/*hiding on desktop only*/

body header:after {
			 clear: both;
			 content: "";
			 display: table;
}
 
/*nav list set for 3 pages adjust width for more or less pages*/
nav.horizontal li {
	display: block;
	float: right;
	width: 30%;
	text-align: center;
	line-height: 50px;
	background-color: rgb(77,105,36);
}

/*text styles for the horizontal navigation below the header*/
ul.mainMenu > li > a {
	display: block;
	width: 100%;
	color: white;
	font-size: 1.4em;
}

/*HOMEPAGE specific styling===================================================*/
/*homepage section Div 1*/
div#homeRow1 {
	display: block;
	float: left;
	width: 100%;
	padding-top: 3%;
	padding-bottom: 3%;
}

/*first homepage image blocking left*/
img#homePagePic1 {
	display: block;
	float: left;
	width: 40%;
	padding-left: 3%;
}

/*who, what, where list in right half*/
ul#homeHalfWidth {
	display: block;
	float: left;
	width: 60%;
}

ul#homeHalfWidth > li {
		padding-left: 15%;
		padding-top: 4%;
}

/*the first word only in the list is green*/
span#fontChange {
	color: rgb(77,105,36);
	font-family: "lemance", sans-serif;
	font-weight: 700;
	font-style: normal;
}

/*styling for the full who, what list*/
ul#homeHalfWidth > li > p {
	font-size: 2.3em;
}

/*header only in the client icon row*/
h2#clientRow {
	width: 100%;
	padding-top: 1.5%;
	text-align: center;
	color: white;
	font-size: 2em;
}
 
/*styling for client icon row*/ 
div#clientIcons {
	display: block;
	float: left;
	width: 100%;
	margin-top: 3%;
	background-color: rgb(77,105,36);
}

/*styling for the individual icons in the row*/
img#homeClient {
	display: block;
	float: left;
	width: 14.2%;
	padding-left: 2.3%;
	padding-right: 2.3%;
}

/*leaf bulleted list container row on homepage*/
h1#homeRow2 {
	display: flex;
	padding-left: 3%;
	padding-bottom: 2%;
	font-size: 2.3em;
	font-weight: 700;
	width: 100%;
	color: rgb(77,105,36);
}

/*leaf list container on homepage*/
ul#leafBullet li{
	display: flex;
	font-size: 2.1em;
	align-items: center; /* Vertically centers content */
	padding-left: 4%;
    }

/*leaf bullets on homepage & about page*/
img#leaf {
	height: 50px;
	width: 50px;
}/*keeping pic integrity using on homepage and about page*/


/*this flexes for mobile as well, it styles the %'s row on homepage*/
div#homeRow2Container {
	display: flex;
	width: 100%;
}/*adds the percent row in a container*/

div#homeRow2Percents {
	display: flex;
	width: 25%;
	justify-content: center;
	padding: 1%;
	padding-top: 2%;
}/*spaces img out in the container*/

img#homePercent {
	width: 100%;
	max-height: 200px;
	max-width: 200px;
}/*keeping the image integrety*/


/*Homepage paragraph styles*/
p#homeParagraph {
	display: block;
	float: left;
	text-align: center;
	line-height: 1.2em;
	width: 100%;
	font-weight: 400;
	font-style: normal;
	font-size: 2.7em;
	padding-top: 5%;
	padding-left: 10%;
	padding-right: 10%;
}/*the default font is italic, so I had to change for this line*/

p#greenItalic {
	display: block;
	float: left;
	text-align: center;
	line-height: 1.2em;
	width: 100%;
	font-size: 2.7em;
	font-weight: 500;
	padding-left: 10%;
	padding-right: 10%;
	color: rgb(77,105,36);
}/*the default on this font is already italic*/

p#signature {
	display: block;
	float: right;
	font-family: "above-the-beyond", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-align: right;
	line-height: 1.2em;
	width: 100%;
	font-size: 3.7em;
	padding-top: 1%;
	padding-right: 12%;
}

/*owner, founder block under signature*/
p#owner {
	display: block;
	float: right;
	text-align: right;
	width: 100%;
	font-size: 1.2em;
	padding-top: 1%;
	padding-right: 18%;
	padding-bottom: 5%;
}

/*homepage industries header*/
h3#industriesHeader {
	display: block;
	float: left;
	width: 100%;
	text-align: center;
	color: white;
	font-weight: 700;
	font-style: normal;
	line-height: 2.5em;
	font-size: 2.4em;
	background-color: rgb(77,105,36);
}

/*aligning the industry icons in 2 rows text is in the figcaption*/
div#industriesRow1, div#industriesRow2 {
	display: flex;
	width: 100%;
	padding-right: 2%;
}/*full body width*/

figure#industries {
	display: block;
	float: left;
	width: 20%;
	text-align: center;
	padding: 2%;
}/*adjusts the how many in the row*/

img#industries {
	width: 100%;
	max-width: 200px;
}/*icons are 200px200px keeping their integrity*/

figcaption#industries {
	font-size: 1.6em;
	font-weight: 500;
	font-style: normal;
	text-align: center;
}/*centers the text below the icon*/


/*the 3 steps blocks and heading are all included in the image below*/
img#steps {
	display: block;
	float: left;
	width: 100%;
	padding-top: 1%;
	padding-bottom: 1%;
}

/*styling for the homepage quotes*/
blockquote {
	display: block;
	float: left;
	width: 100%;
	padding: 3% 5%;
}

/*making the first and 3rd quote a bit different*/
p#quote1, p#quote3 {
	line-height: 1.3em;
	font-size: 2.5em;
	font-weight: 500;
	font-style: normal;
	color: 	rgb(77,105,36);
}

p#quote3 {
	text-align: center;
}

p#quote2 {
	line-height: 1.3em;
	font-size: 2.5em;
	font-weight: 400;
	font-style: italic;
	color: 	rgb(77,105,36);
}

cite {
	font-size: .7em;
	color: black;
}

cite#quote1, cite#quote3 {
	display: block;
	float: right;
	color: black;
	padding-right: 10%;
}

cite#quote3 {
	color: black;
	padding-right: 20%;
}







/*specific styling used on the PORTFOLIO page only==============================*/
/*paragraph in the portfolio page only in progress*/
p#portfolio {
	display: block;
	float: left;
	width: 100%;
	padding: 5%;
	color: white;
	text-align: center;
	font-size: 2.0em;
	line-height: 1.5em;
	background-color: rgb(77,105,36);
}

/*header in the portfolio page*/
		h1#portfolio {
		display: block;
		float: left;
		width: 100%;
		text-align: center;		
		font-size: 2.7em;
		font-weight: 700;
		color: rgb(77,105,36);
		padding-top: 10%;
		padding-bottom: 10%;
		padding-left: 5%;
		padding-right: 5%;
		line-height: 1.2em;
		}/*Portfolio header*/


/*specific styling used on the ABOUT page only==============================*/
/*styling fot the about page header*/
div#aboutH1 {
	display: block;
	float: left;
	width: 100%;
	padding-top: 3%;
	padding-bottom: 3%;
}/*header container row only*/

h1#about {
	display: block;
	float: left;
	width: 100%;
	text-align: center;		
	font-size: 2.7em;
	font-weight: 700;
	color: rgb(77,105,36);
	padding-top: 5%;
	padding-bottom: 1%;
	padding-left: 7%;
	padding-right: 7%;
}/*about header*/
		
/*floats image to the left inside the container on the about page*/	
img#aboutPic {
	display: block;
	float: left;	
	width: 50%;
	max-height: 600px;
	max-width: 600px;
	margin-bottom: 0%;
	margin-left: 0%;
	margin-right: 1%;
	padding: 1%;
	background-color: rgb(77,105,36);
}

/*paragraph centered wraping text around image about page*/
p#about {
	display: block;
	float: center;
	font-size: 2.0em;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2%;
	padding: 1.5%;
	text-align: center;
	line-height: 1.5em;
}

/*specific styling used on the CONTACT PAGE only==============================*/

/*first row container for the 3 headers*/
div.contactRow1 {
	display: block;
	float: left;
	width: 100%;
	padding: 2%;
}

/*first and third headers*/
div.contactRow1 h4 {
	display: block;
	float: left;
	width: 100%;
	text-align: center;
	color: RGB(82,82,82); 
	font-size: 1.8em;
	line-height: 1.7em;
	padding: 2%;
	border: solid;
	border-color: gray;
}

/*center header only*/
h1#contact {
	display: block;
	float: left;
	width: 100%;
	text-align: center;		
	font-size: 2.3em;
	font-weight: 700;
	background-color: rgb(77,105,36,.90);
	color: white;
	padding-top: 4%;
	padding-bottom: 4%;
	padding-left: 5%;
	padding-right: 5%;
	line-height: 1.2em;
}/*Contact header*/

div.contactRow1:after {
	clear: both;
	content: "";
	display: table;
}

/*container for 2 columns in the 2nd row of the contact page*/
div.contactRow2 {
		width: 100%;
		padding-bottom: 5%;
}

/*Second row on the contact page only*/
div.contactRow2:after {
	clear: both; 
	content: "";
	display: table;
}

/*styling for left section of row2 in the contact page only*/
div.contactLeft {
	display: block;
	float: left;
	width: 50%;
	padding-top: 10%;
}

div.contactLeft ul li {
	display: flex;
    flex-direction: row;
    align-items: center;
	justify-content: center;
	color: RGB(82,82,82); 
	font-size: 1.4em;
	line-height: 1.4em;
	padding: .5%;
}

/*sizing the phone only image on the contact page*/
img#phoneIcon {
	max-height: 60px;
	max-width: 60px;
}

/*sizing the email only image on the contact page*/
img#emailIcon {
	max-height: 60px;
	max-width: 60px;
}

/*styling for the Contact form on the contact page only====================================*/
/*Right side of contact row 2 containing the contact form*/
div.contactForm {
	float: left;
	width: 50%;
	padding-right: 5%;
}

legend {
	color: RGB(82,82,82);
	font-size: 2em;
	text-align: center;
	padding-bottom: 3%;
}

form#contactUs {
	color: white; 
	font-size: 1.4em;
	line-height: 1.8em;
	background-color: rgb(77,105,36);
	padding: 2%;
}

input {
	line-height: 1.8em;
}

/* controls size of the input box in the contact form,
the height is in the HTML code, I added width here so it would flex*/
form textarea {
	width: 80%;
}

/*submit button in the contact form*/
button#formSubmitButton {
	color: black;
	font-weight: 700;
	font-size: 1.0em;
	line-height: 1.2em;
	background-color: white;
}

form:after {
	clear: both;
	content: "";
	display: table;
}


/*keeps the section from collapsing on all pages during build or low content*/
section {
	min-height: 800px;
}
section:after {
			 clear: both;
			 content: "";
			 display: table;
		}
		
 
/* Footer Styles Standardized on ALL PAGES=============================================================*/
/*footer container for all pages all media types*/
footer  {
	display: block;
	width: 100%;
	background-color: rgb(77,105,36);
	border-top: 4px solid gray;/*come back and take this out*/
	border-bottom: 4px solid gray;
}

/*sizing the social images*/
img#socialIcons {
	max-height: 50px;
	max-width: 50px;
}

footer {
	display: block;
	float: left;
	width: 100%;
}/*footer container*/

/*container for social icons left footer section, this controls
how far the icons will span across*/
nav.footerIcons {
	display: block;
	float: left;
	width: 40%;
	padding-top: 10px;
	padding-left: 10px;
}

/*stacking social icons left to right on the first row*/
nav.footerIcons li {
	display: block;
	float: left;
	width: 20%;
}

/*list containing email and phone only right footer section*/
/*container for email and phone*/
nav.footerList {
	display: block;
	float: right;
	text-align: right;
	width: 40%;
	line-height: 1.8em;
	padding-right: 1%;
}

div#footLogoRow {
	display: block;
	float: left;
	width: 20%;
	text-align: center;
}/*blocking in the center*/

img#footLogo {
	max-width: 200px;
}

/*footer email and phone text styles*/
a#footerEmailRight, a#footerPhoneRight {
	display: block;
	float: left;
	width: 100%;
	text-align: right;
	color: white;
	line-height: 1.7em;
}

/*font size footer email*/
a#footerEmailRight {
	font-size: 1.27em;
}

/*font size footer phone*/
a#footerPhoneRight {
	font-size: 2.0em;
	font-weight: 700;
}
 
/*last line in footer*/
footer h4 {
	display: block;
	float: left;
	width: 100%;
	text-align: center;
	font-size: 1.1em;
	color: white;
	padding-bottom: 1%;
}

nav.footerList:after {
	clear: both;
	content: "";
	display: table;
}/*prevent collapse while building and low content pages*/



/*ALL hyperlink link styles used in ALL pages unless noted=============================================*/

/*hover styles for the main menu horizontal navigation*/
ul.mainMenu > li > a:hover {
	color: rgb(82,82,82);
	text-decoration: underline;
} 

/*website and email in the h4 of the footer*/
a#website, a#email {
	color: white;
	text-decoration: underline;
}

/*located in h4 of the footer*/ 
a#website:hover, a#email:hover {
	color: black;
}	

/*located in footer all pages*/
a#footerEmailRight:hover, a#footerPhoneRight:hover {
	color: black;
	text-decoration: underline;
}

/*located on the contact page only*/
a#contactPhone, a#contactEmail {
	color: rgb(77,105,36);
	text-decoration: none;
	font-weight: 700;
	padding-bottom: 7%;
}

/*located on the contact page only*/
a#contactPhone:hover, a#contactEmail:hover {
	color: black;
}

/*end of style code in this stylesheet*/