@charset "UTF-8";
/* CSS Document */

/* RESETS */

body, body * { /* this zeros out the default margin and padding styles on the body tag and everything nested inside the body tag. */
	margin: 0;
	padding: 0;		
}

/* END RESETS */

/* DEVO ONLY -- delete when no longer needed */

/*div, header, nav, aside, footer {
	border: 1px solid red;	
}*/

/*#nav-utility li {
 	background-color: pink;
}
*/

/*#nav-utility a {
    background-color: green;
}*/

/*ul {
	background-color: blue;	
}*/

/*li {
	background-color: red;	
}*/

/*h1 {
	background-color:orange;	
}*/

/* END DEVO-ONLY STYLES */


/* GLOBAL STYLES */

body {
	background-color:#FFF;
	color:#212121;	
	font-family: 'Actor', "Trebuchet MS", Helvetica, sans-serif;
	/* a declared unit in the body tag will make every element inferit the unit, instead of the multiplier */
	/*line-height:1.4em; *//* might be better to specify lineheight unitless on the body next time, then specify specific units in specified content areas. */ 
	/* unitless makes the lineheights inheritance proportonaste to font size */
	line-height:1.4; 
	font-size:100%;
}

header {
	margin-bottom:50px;
}

h1, h2, h3 {
	/*text-shadow: .5px .5px .5px #212121;*/	/* text-shadow: horizontal-offset vertical-offset blur color; */
	/*padding-top:15px;*/
	margin-bottom:10px;	
	color:#404040;
}

ol {
	list-style-position: outside;
	margin-left: 1.5em; /* 2.25em; if using double digit numbers */
	color: #212121;
}

ul { 
   list-style-type:disk;
   list-style-position: outside;
   margin-left: 1.25em;
   color:#212121;   
}

li {
	padding-bottom: 0.25em; /* 4px/ 16px */
}

ol, ul {
	margin-bottom: 0.375em;	
}

ol ul li {
	padding: 0;	
	margin: 0;
}

ol li ul {
	padding-bottom: 0;
}

p {
	margin-bottom: .75em;	
}

a:link {
	text-decoration:none;		
}

a:visited {
	
}

a:hover,
a:focus {
	text-decoration:underline;	
}

a:active { }

/* END GLOBAL STYLES */


/* FORM STYLES */

textarea {
	/*cols:200;
	rows:4;	*/
	spellcheck:true; /* Why does this not validate? */
}

td {
	 vertical-align: top; 		
}

/* END FORM STYLES */


/* FOOTER STYLES */

footer { /* GLOBAL */
	padding:20px 20px 0px 20px;	
}

footer p { /* SPECIFIC */
	margin-bottom:20px;	
}

/* END FOOTER STYLES */


/* LAYOUT STYLES*/

#livearea {
	width:940px;
	margin-left:auto;
	margin-right:auto;	
	background-color:#FFF;
	padding-top:35px;
	padding-left:20px;
	padding-right:20px;			
}

#name-nav-utility {				/*											 440          += 600                               += 920               += 940 */
	padding-left:20px; /* 20px livearea padding left + 20px myName padding + 400px myName + 160px space between (not declared) + 320px #nav-utility + 20px livearea padding right = 940px*/
	height:40px;
	overflow:hidden;
	margin-bottom:40px;
}

#myName {
	width:400px;
	font-size:200%;	/* 32 px */
	float:left;
	text-transform:uppercase;
	letter-spacing:0.1em;
	line-height:40px;  /* Why doesnt making this h1 tag make the text center like it does for the nav list? */
	margin-top:0px;
}

#nav-utility {
	width:400px;
	float:right;
	text-transform:uppercase;
	height:40px;	
}

#nav-utility ul {
	margin-top: 5px; /* aligns nav utility with #myName */	
}

#nav-utility li {
	float:right;
	line-height:40px;
	list-style-type:none; 
}

li#no-padding {
	padding-left:0px;	
}

#nav-utility a {
	color:#212121;
	padding: 0px 0px 0px 20px; /* Not putting padding on the top or bottom makes things way easier to change font or font-size later, you don't have to hand-adjust the padding to make it come out just right. */
	display: block; /* this makes the "a" fill their list items, which means you no longer need to give them padding top or bottom, just padding on the sides. */ 
	
}

#text-picture-div {
	background-color:#BAC470; /* Green */
	height:310px;
	/*position:relative;*/
	background-image:url("images/troy-diagnal3-710x310px.png");
	background-repeat:no-repeat;
	background-position:right;	
}

#textonsquare {
	/*position: absolute; *//* Absolute positioning takes the box out of the text flow, the other elements act like it is not there. */
	/*top:15px;*/ /* Relative to it's parent element, #picturetext */
	/*left:20px;*/ /* " */
	padding:15px 20px 15px 20px;
	font-size:48px;
	line-height:1.4em;
	color:#fff;
	overflow:hidden;
	text-shadow: .75px .75px .75px #404040;	/* text-shadow: horizontal-offset vertical-offset blur color; */	
}

#headerimage {
	float:right;
}

#middle {
	overflow:hidden;
	padding:0px 20px 0px 20px;	
	margin-bottom:60px;
}

#left-middle {
	float:left;	
	width:435px;
}

#right-middle {
	float:right;
	width:435px;	
}

#column1{
	width:205px;
}

#column2, #column3, #column4 {
	width:205px;	
}

#column1, #column3 {
	float:left;	
}

#column2, #column4 {
	float:right;	
}

.clear {
	clear:both;	
}

#column1 ul,
#column2 ul {
	margin-bottom:.75em;	
}

#column1 ol ul li { /* Nested List */
	/*background-color: yellow;*/
	/*padding-top: 0.25em;*/ /* 4px / 16px */
	margin-bottom: 0;
	list-style-type: disc;
}

#validation-icons a:link {
	text-decoration:none;		
}

#validation-icons a:visited {
	
}

#validation-icons a:hover,
#validation-icons a:focus {
	text-decoration:none;	
}

#validation-icons a:active { }


/* END LAYOUT STYLES */


/* COLOR THEME */ 

/*https://kuler.adobe.com/meeting-between-mr-black-and-mr-white-color-theme-935956/*/

/* END COLOR THEME */