
/*
J.W. MacConnell
8:44 AM 4/3/2019
1:28 PM 4/2/2019
8:35 PM 3/28/2019
3:37 PM 3/26/2019
*/

/********************************************************************************
*                               White Background
********************************************************************************/


/********************************************************************************
*                             Top CSS for all pages
********************************************************************************/

	/* 10.256 px/vw
	   px values are shown below for browsers not supporting vw */

    	#title {
	      align-content: center;
	}

	body {
		font-family: "arial black", sans-serif;
		line-height: 1.5;

		max-width: 1000px;
		min-height: 1100px; /* non vw browsers */
		min-height: calc(300px + 78vw);
		max-height: 5000px;
		margin: auto;
		margin-top: 10px;
		padding-left: 5px;
		padding-right: 5px;
	}

/********************************************************************************
*                                  Link Styles
********************************************************************************/

	/* locks home link text in a screen position (doesn't
	   move when the text scrolls) */
	a.home_link_postion {position:fixed;}


	/* Normal Links ******************/
	a:link {
		text-decoration-line: underline;
		text-decoration-style: solid;
		font-weight: normal;
	}

	a:visited {
		text-decoration-line: underline;
		text-decoration-style: solid;
		font-weight: normal;
	}

	a:hover {
		text-decoration-line: underline;
		text-decoration-style: solid;
		font-weight: normal;
	}
 
	a:active {
		text-decoration-line: underline;
		text-decoration-style: solid;
		font-weight: normal;
	}

	/* Home Page Links ******************/

	a.home_page_link:link {
		text-decoration-line: underline;
		text-decoration-style: solid;
		color: white;
		background-color: green;
		margin-top: 5px;
		padding-right: 5px;
		padding-left: 5px;
		padding-bottom: 3px;
	}

	a.home_page_link:visited {
		color: white;
		background-color: green;
		text-decoration-line: underline;
		text-decoration-style: solid;
		margin-top: 5px;
	}

	a.home_page_link:hover {
	  	text-decoration-line: underline;
		text-decoration-style: solid;
		color: white;
		background-color: #cc0000;
		margin-top: 5px;
	}


	/* Link to Traditional Page ******************/

	ul.menu-ul {
		list-style-type: none;
		margin: -14px 0 0 0;
		padding: 0;
		overflow: hidden;
		background-color: green;
	}

	li.menu-li {
		float: left;
		overflow: auto;
		font-family: arial, sans-serif;
		font-size: 13px;
	}

	li.menu-li a {
		display: inline-block;
		color: white;
		background-color: green;
		text-align: center;
		padding: 5px 12px 5px 12px;
		text-decoration: none;
		/* top margin of entire menu bar */
		margin-top: 0px;
	}

	li.menu-li a:hover {
		color: white;
		background-color: #cc0000;
	}


/********************************************************************************
*               Paragraph, list, line, heading, img Styles (FIXED)

  NOTE: these values serve as init values for some of the variable values below

********************************************************************************/

	li {
	font-family: arial, sans-serif;
	font-size: 16px;
	}

	ul {
  	list-style: none; /* Remove default bullets */
	font-family: arial, sans-serif;
	font-weight: bold;
	}

	ul.disc {
	list-style-type: disc;
	}

	ul.circle {
	list-style-type: circle;
	}

	ul.square {
	list-style-type: square;
	}

	h1 {
	text-align: center;
	margin-top: 10px;
	font-size: 2.5em;
	}

	h2 {
	text-align: left;
	font-size: 32px;
	font-family:  arial, sans-serif;
	font-weight: bold;
 	margin-left: 0px;
	}

	h3 {
	text-align: left;
	font-family: arial, sans-serif;
	font-size: 16px;
	margin-left: 0px;
	}

	h4 {
	text-align: left;
	font-family: arial, sans-serif;
	font-size: 16px;
	margin-left: 0px;
	}

	h5 {
	text-align: left;
	font-family: arial, sans-serif;
	font-size: 16px;
	margin-left: 0px;
	}

	img {
	border-radius: 10px 10px 10px 10px;
	max-width: 100%;
	height: auto;
	}

	img.img_center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 98%;
	}

/********************************************************************************
*             Paragraph, list, line, heading, img Styles (VARIABLE)

             Use these styles if the screen is less than max-width
             (the display changes size here, so uses vw dimensions)

   WARNING: each variable value below must have a fixed init value in
            the fixed section above.

********************************************************************************/

/* WARNING: each variable value below must have a fixed init value in
            the fixed section above.
*/

/* ------- Position Sensitive Styles Go Here ------- */

/* Use these styles if the screen is less than max-width
   (the display changes size here, so uses vw dimensions) */

@media screen and (max-width: 1000px) {

	h1 {
	margin-top: 5px;  /* for browsers not supporting vw */
	margin-top: calc(5px + 0.488vw);
	font-size: calc(16px + 2.34vw);

	}

	h2 {
	font-size: calc(12px + 2.15vw);
	}

	h3 {
	font-size: calc(10px + 0.185vw);
	}

	img {
	border-radius: 1.76vw;
	}
}

/********************************************************************************
*                         Font, Font Size, Font Weights
********************************************************************************/

	.arial {font-family: arial, sans-serif; }

	.arial_black {font-family: "arial black", sans-serif; }

	.times {font-family: "Times New Roman", Times, serif; }

	.verdana {font-family: verdana, arial, sans-serif; }


	.bold {font-weight: bold; }

	.normal {font-weight: normal;	}

	.font_10px {font-size: 10px; }

	.font_12px {font-size: 12px; }

	.font_16px {font-size: 16px; }

	.font_18px {font-size: 18px;}

	.font_20px {font-size: 20px; }

	.font_30px {font-size: 30px; }

	/* used for Home link */
	.font_small {
	font-size: 15px;	/* for browsers not supporting vw */
/*	font-size: calc(12px + 0.29vw); */
	}

	.font_big {font-size: 30px; }


/********************************************************************************
*                             Alignment, line spacing
********************************************************************************/

	.left {text-align: left; }

	.center {text-align: center; }

	.right {text-align: right; }

	.line_space-1 { line-height: 1; }
	.line_space-1d5 { line-height: 1.5; }
	.line_space-2 { line-height: 2.0; }
	.line_space-3 { line-height: 3.0; }

/********************************************************************************
                                Margins (FIXED)

  NOTE: these values serve as init values for some of the variable values below

*********************************************************************************/

	/* HEADER PICTURE: use to space down a bit */
	.header_pix_space {
	margin-top: 5px;
	}

	/* TOP MARGIN: use to separate <li> etc. sections */
	.section_space {
	margin-top: 16px;
	}

	.margin_lt-0 {
	margin-left: 0px;
	padding-left: 0px;
	}

	.margin_rt-0 {
	margin-right: 0px;
	}

	/* ------ Page Specific Margins ------ */

	/* road responsibilities */
	.mar_rt-rd_resp {
	margin-right: 200px; /* for browsers not supporting vw */
	}

/********************************************************************************
                               Margins (VARIABLE)

             Use these styles if the screen is less than max-width
             (the display changes size here, so uses vw dimensions)

   WARNING: each variable value below must have a fixed init value in
            the fixed section above.

*********************************************************************************/

/* ------- Position Sensitive Styles Go Here ------- */

@media screen and (max-width: 1000px) {

	/* ------ Page Specific Margins ------ */

	/* road responsibilities */
	.mar_rt-rd_resp {
	margin-right: 19.5vw;
	}

}


/********************************************************************************
      Position Sensitive Styles Go below this line. They have priority
	over like named styles above and may be screen size dependent.
********************************************************************************/



/********************************************************************************
                      Various Page Size Settings (Fixed)

  NOTE: these values serve as init values for some of the variable values below

********************************************************************************/

	div.page_width_500 {
	text-align: left;
	max-width: 500px;
	margin: auto;
	}

	div.page_width_700 {
	text-align: left;
	max-width: 700px;
	margin: auto;
	}

	div.page_width_900 {
	text-align: left;
	max-width: 900px;
	margin: auto;
	}

	div.page_width_1000 {
	text-align: left;
	max-width: 1000px;
	margin: auto;
	}

	div.page_width_1200 {
	text-align:left;
	max-width: 1200px;
	margin: auto;
	}

	/* ------ Page Specific Widths ------ */

	/* Enterprise Systems */
	div.page_width-ent_sys {
	text-align: left;
	max-width: 600px;
	margin: auto;
	}

	div.page_width-faq {
	text-align: left;
	max-width: 600px;
	margin: auto;
	}

	div.page_width-history {
	text-align: left;
	max-width: 600px;
	margin: auto;
	}

	div.page_width-ops_manual {
	text-align: left;
	max-width: 600px;
	margin: auto;
	}

	div.page_width-road_resp {
	text-align: left;
	max-width: 700px;
	margin: auto;
	}

	div.page_width-what_we_do {
	text-align: left;
	max-width: 700px;
	margin: auto;
	}

/********************************************************************************
                     Various Page Size Settings (VARIABLE)

             Use these styles if the screen is less than max-width
             (the display changes size here, so uses vw dimensions)

   WARNING: each variable value below must have a fixed init value in
            the fixed section above.

********************************************************************************/

/* Use these styles if the screen is less than max-width
   (the display changes size here, so uses vw dimensions) */

@media screen and (max-width: 1000px) {

	div.page_width_500 {
	max-width: calc(250px + 24.38vw);
	}

	div.page_width_700 {
	max-width: calc(250px + 43.88vw);
	}

	div.page_width_900 {
	max-width: calc(250px + 63.38vw);
	}

	div.page_width_1000 {
	max-width: calc(250px + 73.13vw);
	}

	div.page_width_1200 {
	max-width: calc(250px + 92.63vw);
	}

	/* ------ Page Specific Widths ------ */

	/* Enterprise Systems */
	div.page_width-ent_sys {
	max-width: calc(250px + 24.38vw);
	}

	div.page_width-faq {
	max-width: calc(250px + 34.13vw);
	}

	div.page_width-history {
	max-width: calc(250px + 34.13vw);
	}

	div.page_width-ops_manual {
	max-width: calc(250px + 34.13vw);
	}

	div.page_width-road_resp {
	max-width: calc(250px + 43.88vw);
	}

	div.page_width-what_we_do {
	max-width: calc(250px + 43.88vw);
	}
}

/* ----- END styles-all.css ----- */


/*
J.W. MacConnell
10:33 AM 4/2/2019
5:56 PM 3/26/2019
*/

/********************************************************************************
*                                 Color Styles
*                               White Background
********************************************************************************/

/* Place this sheet above the page specific style list so that those
   styles have higher priority.

   Modify it to give the color layout you want. DO NOT place non-color related
   styles in here!
*/

	/* white pallet starting from black pallet:
	gold => green
	black => white
	white => black
	gray: #cccccc => #333333
	*/ 

	html { background-color: black; }

	body {
		color: #333333;  /* text color Set = Gray color */
		background-color: #ffffcc;  /* #040244; 040244 044402 */
	}

/********************************************************************************
*                               Link color Styles
********************************************************************************/


	/* Normal Links ******************/
	a:link {
		color: #0000aa;
		background-color: #ffffcc;
	}

	a:visited {
		color: #7d007d;
		background-color: #ffffcc;
	}

	a:hover {
		color: #cc0000;
		background-color: #ffffcc;
	}
 
/********************************************************************************
*                             heading color Styles
********************************************************************************/

	h1 {
	color: green;
	background-color: inherit;
	}

	h2 {
	color: green;
	background-color: inherit;
	}

	h3 {
	color: black;
	background-color: inherit;
	}

	h4 {
	color: black;
	background-color: inherit;
	}

	h5 {
	color: black;
	background-color: inherit;
	}

/********************************************************************************
*                                 Color Styles
********************************************************************************/

	hr.hr-header_color {
	border: 1px solid green;
	background-color: inherit;
	}

	hr.hr-header_color-2 {
	border: 1px solid green;
	background-color: inherit;
	}

	.color_highlight {
	color: #dd0000;
	background-color: inherit;
	}

	.black {
	color: white;
	background-color: inherit;
	}

	.gold {
	color: green;
	background-color: inherit;
	}

	.gray {
	color: #333333;
	background-color: inherit;
	}

	.green {
	color: green;
	background-color: inherit;
	}

	.red {
	color: #dd0000;
	background-color: inherit;
	}

	.white {
	color: black;
	background-color: inherit;
	}

/*
J.W. MacConnell
11:15 AM 4/2/2019
7:52 PM 2/17/2019
*/

/********************************************************************************
*                         Phone Compatibility Styles
********************************************************************************/

/* Place this sheet after the page specific style list so that these
   styles have maximum style priority (NOTE: line styles have higher priority).
*/

/*   default values if neither of the screen options below are active */

	.h2_margin-lt_phone {
		margin-left: 40px;
	}

	.h3_margin-lt_phone {
		margin-left: 40px;
	}


	.p_margin-lt_phone {
		margin-left: 40px;
		padding-left: 0px;
	}

	.ul_margin-lt_phone_0 {
		margin-left: 0px;
		padding-left: 0px;
	}

	.ul_margin-lt_phone {
		margin-left: 40px;
		padding-left: 0px;
	}

	.ul_margin-lt_phone_2 {
		margin-left: 40px;
		padding-left: 0px;
	}

	/* for pages with 1st level ul disc*/
	.ul_margin-lt_phone_3 {
		margin-left: 55px;
		padding-left: 0px;
	}

	/* for pages with 1st level ol, roman numerals */
	.ol_margin-lt_phone {
		margin-left:  55px;
		padding-left: 0px;
	}

/* Use these styles if the screen is less than max-width */
@media screen and (max-width: 700px) {

	.h2_margin-lt_phone {
		margin-left: 40px;
	}

	.h3_margin-lt_phone {
		margin-left: 40px;
	}

	.p_margin-lt_phone {
		margin-left: 40px;
		padding-left: 0px;
	}

	.ul_margin-lt_phone {
		margin-left: 40px;
		padding-left: 0px;
	}

	.ul_margin-lt_phone_2 {
		margin-left: 30px;
		padding-left: 0px;

	}

	.ul_margin-lt_phone_3 {
		margin-left: 55px;
		padding-left: 0px;
	}

	.ol_margin-lt_phone {
		margin-left:  55px;
		padding-left: 0px;
	}

}

/* Use these styles if the screen is portrait mode and less than max-width */
@media screen and (orientation: portrait) and (max-width: 550px) {

	.h2_margin-lt_phone {
	margin-left: 0px;
	}

	.h3_margin-lt_phone {
	margin-left: 0px;
	}

	.p_margin-lt_phone {
		margin-left: 0px;
		padding-left: 0px;
	}

	.ul_margin-lt_phone {
		margin-left: 0px;
		padding-left: 0px;
	}

	.ul_margin-lt_phone_2 {
		margin-left: 30px;
		padding-left: 0px;

	}

	.ul_margin-lt_phone_3 {
		margin-left:  15px;
		padding-left: 0px;
	}

	.ol_margin-lt_phone {
		margin-left:  40px;
		padding-left: 0px;
	}

}

