@charset "utf-8";

/*
Color palette:

FEELING FRESH
cec9c6 - Off white - Lighter Panel backgrounds - Neutral
a6aeb5 - Grey - Darker Panel Backgrounds - Neutral
c29059 - Gold - Borders and lines - Accent
696a35 - Dark Green - Headings - Primary
33312e - Charcoal - Text
73777f - Dark Grey - Footer - Primary

*/

/**************************************************************
----------- PAGE-SPECIFIC ELEMENT TAG SELECTORS ---------------
**************************************************************/ 
/* ~~ This variable width body container surrounds all other blocks. By using the margin setting with the "auto" option, the page is centered in the browser window with at least a little less than a single character border on the top and bottom. The backtround image is also centered on the browser window, using a repeating gradient pattern background image, for viewing on browser windows greater than the 1200 px.~~ */

body {
	max-width: 1200px;
	max-height: 8000px;
	background-color: transparent;
    background-image: url(../images/color-overlay-bknd.png); /*Takes the background gradient and repeats it in slices through the entire height and width of the page*/
	background-position: center;
	margin: 0px auto; /*Body has no margin top and bottom and centered inside the overall page*/
	padding: 0px;
}
/* Both above and below the fold sections are defined in CSS right after the body because they aare the main stucture elemanes of the page. They are used to keep the first content concise and the later content in a section, but still defined to be only as long as neeeded for the message. */

/* Home Fold is the top fold of the home page. It is the portion that most visitors actually notice and should contain quick links to key services and must not be cluttered.

Note: None of the section classes that are setup to be generally used have margins or padding. Sections must be spaced by defining these spacing settings in this home page specific CSS file. The home fold needs to use padding so that it's background color not allow the body color to show through when children are spaced using their top margins.

The height of each home fold section has a fixed height to make it more flexible to browser width variations to avoind a max height overflow in home fold which is required to be height limited by design.*/
#home-fold{
	width: 100%;
	max-height: 2000px; /* This max height will fill until enough content maxes it out, then the bottom border line defined below will NOT show up and sections will start overflowing onto eachother. Exeeding this height defeats the purpose of a brief top fold. */
	margin: 0px 0px 0px 0px; /* Redefine any margin setting from previous or parents, otherwise settings are not inherited properly by children without a margin setting. */
	padding: 5px 0px 0px 0px; /* Redefine any padding setting from previous or parents. Separate this a little from the top menu with padding. This insures these settings are inherited by any children containers without a margin and padding settings. */
	background-color: #ffffff;/*White*/
}
/* Put this after the last section to mark the last content section with
a visible termination that shows a security check verification.*/
#home-fold-ending {
	margin: 0px 0px 0px 0px;/*No margin*/
	padding: 0px 0px 0px 0px;/*No padding*/
}
/* Below the fold defines its dimensions and clears out float settings. It shows, in the browser, when the recommended maximum height below the fold has been exceeded and some content should be removed. */
#home-page-below-fold{
	width: 100%;
	max-height: 5000px;
	margin: 0px 0px 0px 0px;/*Margin none*/
	padding: 0px 0px 0px 0px;/*Padding none*/
	background-color: #ffffff;/*White.*/
}
/* Put this after the last section to mark the last content section with
a visible termination that is intended to have no floats.*/
#home-page-below-fold-ending {
	margin: 0px 0px 0px 0px;/*No margin*/
	padding: 0px 0px 0px 0px;/*No Padding*/
}
/* Home Title Line is the Headline of the home page and tells what the site is about. */
#home-title-line {
	margin: 2px 0px 0px 0px;/*Margin top*/
	padding: 0em 0% 0em 0%;/*Padding none*/
	background-image: url(../images/tech-bknd.png);
	background-position: 50% 70%; /*Focus spot toward right*/
	background-size: cover;
}
#home-title-line h2 {
	margin: 0px 0% 0px 0%;/*Margin none*/
	padding: 0.5em 0% 4.0em 1.5%;/*Padding top,bottom,left*/
	text-align: left;
	font-weight:400;
	color: #ffffff;/*White*/
}
#home-resource-links {
	margin: 0px 0% 0px 0%;/*Margin none*/
	padding: 0px 0px 10px 0px;/*Padding bottom*/
	background: #a6aeb5c0;/*Light grey,translucent*/
}
#home-resource-links h3{
	padding: 0.5em 0em 0.5em 0em;/*Padding top,bottom*/
}
#home-resource-links p { /*Using default paragraph settings*/
	padding: 0.5em 1.5em 0em 0em;/*Padding, top & right*/
}
#home-resource-links-left {
	width: 46%;
	margin: 0px 0px 0px 3%;/*Margin left*/
	padding: 5px 0px 0px 0px;/*Padding top*/
	border-style:solid;/*Border right,gold*/
	border-color:#c29059;
	border-width: 0px 10px 0px 0px;
	background: none;
}
#home-resource-links-right {
	width: 45%;
	margin: 0px 0px 0px 3%;/*Left margin equal to right panel's*/
	padding: 5px 0px 0px 0px;/*Padding, top*/
	background: none;
}
/* Home Link Panels are a group of quick links with images that guide visitors to quickly focus on some of the main services offered. */
#home-link-panels {
	margin: 0px 0% 0px 0%;/*Margin none*/
	padding: 30px 0% 30px 0%;/*Padding top,bottom*/
	background: #c2905930;/*Light brown,translucent*/

}
 /* The following definitions individually set the background images for the panels so they cover each panel's area.

The height of all 3 panels is inherited from the height of the overall container. Panel margins are set in class definitions. Padding only needs to place the top and left edges of the paragraph areas. Putting padding at the  bottom causes spacing problems the following content top margin  settings.

Define the text background for each paragraph as an RGB color with a low transparency factor to float the text over the background image. Each panel causes the pointer cursor (hand) to show when hovering.

Paragraph definitions bring the text down a percentage from the top and space it at on the left and right to be spaced from the image edges. Dreameweaver shows the image to be partially viewed where there is content. However, the browser renders it in full height.*/
#link-panel-schedule {
	height: 475px; /* A fixed height works best because it allows the text to have totally different content and the background images all remain the same height.*/
	width: 31.33%;
	margin: 0px 2.0% 0px 0%;/*Margin right*/
	padding: 0px 0% 0px 0%; /*Padding none*/
	background-image: url(../images/sample-gantt-chart.png);
	background-size: cover;
}
#link-panel-schedule-text {
	width: 90%;
	margin: 0em 0% 0em 0%;/*Margin none*/
	padding: 5px 0% 0px 0%;/*Padding top*/
	background: #cec9c630;/*Off white,translucent*/
}
#link-panel-schedule-text h4 {
	margin: 0em 2.5% 0em 4.5%;/*Margin left*/
	padding: 0em 0% 0.50em 0%;/*Padding bottom*/
}
#link-panel-schedule-text h5 {
	margin: 0em 2.5% 0em 8.0%;/*Margin left*/
	padding: 0em 0% 0.50em 0%;/*Padding bottom*/
}
#link-panel-schedule-text p {
	margin: 0em 0% 0em 9.0%;/*Margin left*/
	padding: 0em 0% 0.50em 0%;/*Padding bottom*/
}
#link-panel-schedule-text p a:link {
	margin: 0em 0% 0em 3.0%;/*Margin left*/
	padding: 0em 0% 0.50em 0%;/*Padding bottom*/
	font-size: 0.9em;
}
#link-panel-custom {
	height: 475px; /* A fixed height works best because it allows the text to have totally different content and the background images all remain the same height.*/
	width: 31.33%;
	margin: 0px 1.0% 0px 1.0%;/*Margin right,left*/
	padding: 0px 0% 0px 0%;/*Padding none*/
	background-image: url(../images/staff-meeting.png);
	background-position: 50% 50%; /*Center the focus spot*/
	background-size: cover; /*Cover background and focus*/
}
#link-panel-custom-text {
	width: 90%;
	margin: 329px 0% 0px 10%;/*Margins top and left*/
	padding: 5px 0% 0px 0%; /*Padding top*/
	width: 90%;
	background: #a9bfcba0;/*Light blue,translucent*/
}
#link-panel-custom-text h4 {
	margin: 0em 2.5% 0em 4.5%;/*Margin right,left*/
	padding: 0em 0% 0.50em 0%;/*Padding bottom*/
}
#link-panel-custom-text h5 {
	margin: 0em 2.5% 0em 8.0%;/*Margin right,left*/
	padding: 0em 0% 0.50em 0%;/*Padding bottom*/
}
#link-panel-custom-text p {
	margin: 0em 0% 0em 9.0%;/*Margin left*/
	padding: 0em 0% 0.50em 0%;/*Padding bottom*/
}
#link-panel-custom-text p a:link {
	margin: 0em 0% 0em 3.0%;/*Margin left*/
	padding: 0em 0% 0.50em 0%;/*Padding bottom*/
	font-size: 0.9em;
}
#link-panel-search {
	height: 475px; /* A fixed height works best because it allows the text to have totally different content and the background images all remain the same height.*/
	width: 31.33%;
	margin: 0px 0% 0px 2.0%;/*Margin left*/
	padding: 0px 0% 0px 0%;/*Padding none*/
	background-image: url(../images/micro-examine.png);
	background-position: 50% 70%; /*Focus spot toward right*/
	background-size: cover;
}
#link-panel-search-text {
	width: 90%;
	margin: 0em 0% 0em 0%;/*Margin none*/
	padding: 5px 0% 0px 0%;/*Padding top*/
	background: #cec9c6c0;/*Off white,translucent*/
}
#link-panel-search-text h4 {
	margin: 0em 0% 0em 4.0%;/*Margin left*/
	padding: 0em 0% 0.50em 0%;/*Padding bottom*/
}
#link-panel-search-text h5 {
	margin: 0em 0% 0em 6.0%;/*Margin left*/
	padding: 0em 0% 0.50em 0%;/*Padding bottom*/
}
#link-panel-search-text p {
	margin: 0em 0% 0em 9.0%;/*Margin left*/
	padding: 0em 0% 0.50em 0%;/*Padding bottom*/
}
#link-panel-search-text p a:link {
	margin: 0em 0% 0em 3.0%;/*Margin left*/
	padding: 0em 0% 0.50em 0%;/*Padding bottom*/
	font-size: 0.9em;
}
#special-offer {
	margin: 0px 0% 0px 0%;/*Margin none*/
	padding: 35px 0px 35px 0px;/*Padding top,bottom*/
/* Background image that fully covers the section and will automatically scale to fit. */
	background-image: url(../images/doc-sheet-bknd-graphic.png);
	background-position: 5% 30%;/*Image focus*/
    background-size: cover;
	height: 180px;/*Fixed height,object must handle narrow screen*/
}
/* Set the margin to move the text block over to just 1/2 of the page and just a little separated from the top and bottom of the spash.
Set the padding to equal on the top and bottom for approx vertical centering and the same number of pixels on the left to align multiple paragraphs. */
#special-offer h3 {
	margin: 0px 3% 0% 65%;/*Margin right,left*/
	padding: 1% 10px 10px 15px;/*Padding all sides*/
	border-style:solid;/*Border left,gold*/
	border-color:#c29059;/*Light brown*/
	border-width: 0px 0px 0px 10px;
	color: #000000;/*Black*/
	background: #a6aeb5d0;/*Light grey,translucent*/
}
#special-offer h4 {
	margin: 0px 3% 0% 65%;/*Margin right,left*/
	padding: 1% 10px 10px 15px;/*Padding all sides*/
	border-style:solid;/*Border left,gold*/
	border-color:#c29059;/*Light brown*/
	border-width: 0px 0px 0px 10px;
	color: #000000;/*Black*/
	background: #a6aeb5d0;/*Light grey,translucent*/
}
#special-offer p {
	margin: 0px 3% 0% 65%;/*Margin right,left*/
	padding: 1% 10px 15px 15px;/*Padding all sides*/
	border-style:solid;/*Border left,gold*/
	border-color:#c29059;/*Light brown*/
	border-width: 0px 0px 0px 10px;
	background: #a6aeb5d0;/*Light grey,translucent*/
}
/* This section full-width panel that is sub-divided in half and then a portion of it is subdivided in half again. This creates complex panel that is indtended to provide groups of links on the right side that are sub-categories of the left panel content.*/
#home-category-links {
	margin: 40px 0.5% 0px 0.5%;/*Margin top,right,left*/
	padding: 10px 0px 0px 0px;/*Padding none*/
}
#home-category-links h3{
	padding: 0px .5% .5em 2.0%;/*Padding right,bottom,left*/	
}
#home-category-links-left {
	width: 40%;
	height: auto;
	margin: 0px 0% 0px 0%; /* No margins */
	padding: 3em 0% 0em 0%;/*Padding top*/
}
#home-category-links-left p {
	padding: 8.0em 7% 8.0em 5%;/*Padding all sides*/
	font-size: 1.45em;/*Custom size setting*/ 
	line-height: 2.0em;/*Multiple of font size*/
}
#home-category-links-right {
	width: 55%;
	height: auto;
	margin: 0px 0% 0px .5%; /* Forces left-side separation between the two columns and makes them evenly centered on the page. */
	padding: 10px 0px 10px 0px; /*  Padding, top and bottom of the panel*/
	border-style:solid;/*Border bottom,gold*/
	border-color:#c29059;
	border-width: 0px 0px 5px 0px;
}
#home-category-links-right p {

}
#home-category-links-right a {
	text-decoration: none;
}
#home-category-links-right-left {
	width: 15%;
	margin: 0px 0px 0px 0px; /*Zero separation  from the container*/
	padding: 0px 0% 0px 0%; /*Padding to locate the figure within the panel*/
}
#home-category-links-right-left figure {
	width: 60%;
	margin: 4.0em 0% 0% 20%;/*Margin top,left*/
	padding: 0px 0% 0px 0%;/*Padding none*/
}
#home-category-links-right-left p {

}
#home-category-links-right-right {
	width: 70%;
	margin: 0px 0px 0px .5%; /* Forces left-side separation between the two columns and makes them evenly centered on the page. */
	padding: 10px 0px 10px 0px; /*  Padding, top and bottom of the panel*/
}
/* Portfolio panel contains a column of text and a large image with bulllets that are floated over the lower right corner of the image. */
#portfolio-intro {
	margin: 50px 0% 0px 0%;/*Margin top*/
	padding: 30px 1.5% 10px 1.5%;/*Padding top,bottom*/
	background-color: #ffffff; /*White*/
}
/* For text used in the left panels. The fixed height setting facilitates the use of relative positioning for the bullets used in the right panel. */

/* The overall width of a panel is determined as the sum of its width setting, left margin, right margin, left border, and right border. Because the borders are in pixels and the panel widths are in percentages, there are no left and right borders. This allows all widths to be in percentages. */

/* This panel is designed to have a total width of 45%. */
#portfolio-intro-left {
	width: 32%;/*A little less than half the overall panel*/
	height: 650px; /*Fixed height to match the right panel*/
	margin: 1.0em 1.5% 0em 1.5%;/*Margin top,right,left*/
	padding: 0.5em 0% 0em 0%;/*Padding top*/
}
#portfolio-intro-left h3 {
	padding: 0em 0% 0.5em 0%;/*Padding bottom*/
}
/*Defines paragraph padding and spacing for the left panel text. Setting the paragraph left and right padding as a percentage makes the text area exactly the same margin margin ratio for various browser widths.*/
#portfolio-intro-left p {
	padding: 0em 3% 0em 3%;/*Padding left,right*/
}
#portfolio-intro-left-1 {
	padding: 0.5em 0% 1.20em 0%;/*Padding top,bottom*/
}
#portfolio-intro-left-2 {
	padding: 1.20em 0% 0.5em 0%;/*Padding top,bottom*/
	border-style:solid;/*Border top,gold*/
	border-color:#c29059;
	border-width: 1px 0px 0px 0px;
}
#portfolio-intro-left-3 {
	padding: 0.5em 0% 0.5em 0%;/*Padding top,bottom*/
}
#portfolio-intro-left-3-l {
	width: 15%;/*A little less than half the overall panel*/
	padding: 0.5em 0% 0.5em 2.0%;/*Padding top,bottom,left*/
}
#portfolio-intro-left-3-r {
	width: 75%;/*A little less than half the overall panel*/
	margin: 0em 0% 0em 0%;/*Margin none*/
	padding: 0.5em 0% 0.5em 0%;/*Padding top,bottom*/
}
#portfolio-intro-left-3-r p {
	padding: 0.5em 0% 0em 1.0%;/*Padding top,left*/
}
/* The right panel has a backgroud image positioned so that the focal point of the image is always oriented toward the center. */
/* This panel is designed to have a total width of 55%. */
#portfolio-intro-right{
	width: 62%;/*A little more than half overall panel*/
	height: 650px;/*Fixed height for bullet relative position*/
	margin: 1.0em 1.5% 6.0em 1.5%;/*Margin top,right,bottom,left*/
	padding: 0em 0% 0em 0%;/*Padding none*/
}
/* Background image covers the panel behind the text. As the screen width changes, a defined image focus area remains visible. Use an image with a central theme that, because of the focus, remains visible as the screen width changes.*/
#portfolio-intro-right-image {
	height: 95%;/*Makes 5% room for the spillover panel below it*/
	margin: 0em 0% 0em 0%;/*Margin none*/
	padding: 0em 0% 0em 0%;/*Padding none*/
	background-image: url(../images/high-five.jpg);/*Image file URL*/
	background-position: 60% 50%;/*Location of image's focus*/
	background-size: cover;/*Covers background, focus on central theme*/
}
/* Bullet block that is relatively located anythwere relative to its default location in the right panel. It is offset as a block and may be moved as needed to make a designer style overlap appearance that spills outside the image panel. */
#portfolio-intro-right-image-bullets {
	width: 60%;/*Half as wide as image panel*/
	height: 34.0%;/*Tall enough for content plus overlap*/
	margin: 0em 0% 0em 0%;/*Margin none*/
	padding: 1.0em 0% 0em 0%;/*Padding top*/
	position: relative;/*Offset from its normal position by a %*/
	left: 35%;/*Offset a little left of center*/
	right: 0%;/*Using left and top to locate*/
	top: 70%;/*This plus its height overflows by 2% (102% total)*/
	bottom: 0%;/*Using left and top to locate*/
	background: #cec9c6c0;/*Off white,translucent*/
}
#portfolio-intro-right-image-bullets h4 {
 	margin: 0px 0% 0px 10.0%;/*Margin, left*/
	padding: 0em 0% 0.5em 0%;/*Padding bottom*/
}
/* Bullet content block defining basics of the bullet list. */
#portfolio-intro-right-image-bullets ul {
	margin: 0px 0% 0px 12.0%;/*Margin left (list indent)*/
	padding: 0em 0% 0em 0%;/*Padding none*/
}
/* Redefine individual lines on for the bullet list. In this case, the list style has no bullets because bullets will be customized using a specific graphic next. */
#portfolio-intro-right-image-bullets ul li {
	margin: 0px 0% 0px 0%;/*Margin none*/
	padding: 0em 0em 0.5em 0em;/*Padding bottom*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.18em;/*Font settings same as paragraph*/
	font-style: normal;/*No italics*/
  	font-weight: 400;/*Numerical value for boldness*/
	line-height: 1.1em;/*Spacing between lines mult of font size*/
	text-align: left;/*Start text content from the left*/
	list-style: none;/*No default bullets*/
	color: #696a35;/*Using heading default*/
}
/* Here a small graphic is inserted to the very left of the line. It defined by constraining the bullet image buy taking reducing the size ov the background to the desired size.  The bullet is then spaced in relationship to the line. */
#portfolio-intro-right-image-bullets ul li::before {
 	margin: 0em 1.0% 0em 0%;/*Margin right (bullet spacing)*/
 	padding: 0em 0% 0em 0%;/*Padding none*/
	content:'';/*No content character, replaced by background*/
	display: inline-block;/*Use inline block format for content*/
	height: 0.89em;/*Height allocated for bullet image*/        
	width: 0.89em; /*Width allocated for bullet image*/
	vertical-align: central;/*Push to the middle of line content*/
	background-size: cover;/*Covers available bullet bknd area*/
	background-image: url(../images/icon-checkbox.png);
}
#portfolio-intro-right-spillover {
	height: 5%;/*Spillover panel takes up lower 5% of the panel*/
	margin: 0em 0% 0em 0%;/*Margin none*/
	padding: 0em 0% 0em 0%;/*Padding none*/	
}
#portfolio-intro-right-spillover p {
	padding: 0em 0px 0em 0px;/*Padding none*/
	position: static;/*Return to normal positioning for paragraph*/
}