@charset "UTF-8";
/** layout.css customize for project.
 *  Factor of 4, LLC
 */
 
/** Modification History (name, date, description)
 * 1. HandsOnHeart
 */
 
/* Globals from Skeleton v 1.0*/
/* ================================================== */

/* html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0; 
  }
*/

body {
  background: #fff;
  font-family: arial, helvetica, geneva, swiss, sunsans-regular, sans-serif;
  font-size: 16px;
  font-weight: normal;
  color: 333;
  line-height: 1.5em;
  }


.container {
  background-color: #fff;
  width: 100%;
  max-width: 1280px;
}

header {
	background-image: url(../images/header.jpg);
	background-repeat: no-repeat;
	height: 100px;
	}

header h1 {
	color: rgb(254,176,40);
	font-variant: small-caps;
	margin: 0;
}

header h2 {
	color: white;
	font-variant: small-caps;
	margin: 0;
}



footer {
	background-image: url(../images/footer.jpg);
	background-repeat: no-repeat;
	height: 100px;
	}
	
footer p {
	padding-top: 20px;
	font-size: 16px;
}

footer a,  footer a:visited {
	font-weight: bold;
	color: #CC3333;
	font-size: 20px;
}

footer a:active, footer a:hover {
	 color: rgb(254, 176, 40);
	text-decoration: none;
}


p {
	margin: 10px;
}

h1 {
	font-size: 28px;
	line-height: 1.2em;
	margin: 0 0 8px 6px;
}

h2 {
	font-size: 21px;
	letter-spacing: normal;
	line-height: 1.3em;
	margin: 0 0 8px 6px;
}

h3 {
	color: black;
	font-size: 17px;
}



#content {
	margin: 10px;
}

#content ol, #content ul {
    padding-left: 20px;
}

ul#nav {
    margin-left: 30px;
}

ul#nav li { 
	color:	#CC3333;
	font-size: 20px;
	font-weight: bold;
	list-style: none;
}

.box p {
	text-indent: 20px;
}

#hilite {
	width: 100%;
	background-color: #CC9933;
	border: solid 2x gray;
	padding: 15px;
}

article ul {
    margin-left: 30px;
}

li {
	list-style-position: inside;
	margin: 0; padding: 0;
	
}

aside h2, aside p {
	color: black;
}


a,  a:visited {
	color:	#CC3333;
	text-decoration: none;
}

a:active,  a:hover {
	 color: rgb(254, 176, 40);
	text-decoration: none;
}

aside {
	margin: 0 10px 0 10px;
}

aside p {
	padding-right: 10px;
}

aside img {
	max-width: 350px;
	margin: 0 auto;
	padding-right: 10px;
	width: 100%;
}


/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

	/* Larger than standard 960 desktop */
	@media only screen and (min-width: 960px) {
	
	#grid {
	padding:0 0 0 0;
}

  .column,
  .columns {
    margin-left: 0; }


	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 750px) and (max-width: 959px) {


 .column,
  .columns {
    margin-left: 0; }

	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (min-width: 550px) and (max-width: 749px) {
	

 .column,
  .columns {
    margin-left: 0; }

	}
	
	/* Mobile Landscape Size/Phablet to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 400px) and (max-width: 549px) {
	
	
	footer p {
		padding-top: 0px;
	}


	}

	/* Mobile Phone Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 399px) {	

.container {
	padding:0;
}
	
header h1 {
	padding-top: 10px;
	font-size: 20px;
}

header h2 {
	font-size: 16px;
}


footer p {
		padding-top: 0px;
		padding-bottom: 10px;
	}

}

/* Standards from Skeleton 2.0.4 */
/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}



/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/