/** layout.css customize for project.
 *  Factor of 4, LLC
 */
 
/** Modification History (name, date, description)
 * 1. Factor of 4 LLC 2021-10-29 initial coding
 */
 
/* 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: #670909;
  color: #333;
  font-family: arial, helvetica, geneva, swiss, sunsans-regular, sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 2.0em;
  }


/*  redefine max-width and padding in layout.css */
.container {
  width: 100%;
  background: #fff;
  padding: 0;
  /*outline:1px solid red;  used to test layout - comment out in production */
  }
  
/*  redefine a and a:hover color in layout.css */
a, a:visited{
  text-decoration: none; 
  font-weight: bold;
  color:#336699;  /* define for global inline links */
  }

a:active, a:hover {
  text-decoration: underline; 
  color:#336698;  /* define for global inline links */
}

p {
  margin-bottom: 1em;
  font-size: 16px;
}

ul { 
	margin-top: 10px;
	margin-left: 16px;
	padding-left: 20px;
    list-style-position: outside;
    list-style-image: url('../images/li-bullet-logo-symbol.png');
	font-size: 16px;
}

ol  {
	margin-top: 10px;
	margin-left: 40px;
    list-style-position: outside;
	font-size: 16px;
}

 
li {
	line-height: 1.2;
}


hr {
	margin: 0;
}


.clear { /* used by skeleton 2  */
	clear: both; 
}

/* Navigation */
/* ================================================== */

/* see nav.css */



/* Header */
/* ================================================== */

header { /* used for element ID */
    background-color: #670909;
	min-height: 100px;
	width: 100%;
	margin:0 auto;
	/*outline:2px solid orange;   used to test layout - comment out in production */
}

#header-center {
    margin: auto;
    position: relative;
    display: table;
    padding: 0;
    max-width: 1200px;
    width: 100%;
}

#site-header { /* used for style header content */
	top: 0px;
    background: #670909;
	/*	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4); in process */

    /* background: linear-gradient(#468cbe, #214275);  Standard syntax */ /* WED */
    /* background: -webkit-linear-gradient(#468cbe, #214275);  For Safari 5.1 to 6.0 */ /* WED */
    /* background: -o-linear-gradient(#468cbe, #214275);  For Opera 11.1 to 12.0 */ /* WED */
    /* background: -moz-linear-gradient(#468cbe, #214275); For Firefox 3.6 to 15 */ /* WED */
	width: 100%;
	max-width: 1200px;
	height: 100px; /*   - alignment affects ul.dropdown top  */
	z-index: 50;
	overflow: visible;
	position: relative; /* positions the navigation over the header image */
	/*outline:1px solid yellow;   used to test layout - comment out in production */
}

header a.phone, header a.phone:visited {
	padding-right:8px;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.2em;
	color: #fff;
}

header a.phone:active, header a.phone:hover {
    color:#fff; 
}

#header-image img{
	width: 100%;
	mmax-height: 315px;
	margin-top:0px;
}

.header-left { /* used for style header content */
	text-align: center;
	line-height: 1.0em;
	margin: 0 auto;
	padding-left: 0%;
	z-index: 10;
	/*position: absolute;*/
	/*outline:1px solid gold;   used to test layout - comment out in production */
}

.logo {
	text-align: center;
	margin-bottom:0;
	margin-top:3px;
	/* 	 outline:1px solid white; used to test layout - comment out in production */
}

.bizname {
	color: white;
	font-style: normal;
	font-weight: bold;
	font-size: 1.0em;
	text-align: center;
	margin-bottom:0;
	/* 	 outline:1px solid white; used to test layout - comment out in production */
}

.tagline {
	color:gold;
	font-style: italic;
	font-weight: normal;
	font-size: 0.9em;
	text-align: center;
	/* 	 outline:1px solid white; used to test layout - comment out in production */
}


.header-right   { /* used for style header content */
	float: right; 
	/* margin-bottom: 0px;
	top: 80px;
	padding-right: 10%;
	right: 0px;
	z-index: 10;
	position: absolute; */
	/*outline:1px solid teal;  used to test layout - comment out in production */
}



/* Body */
/* ================================================== */

#content { /* used for element ID */
	max-width: 1200px;
	width:95%;/*  */
	margin: 0 auto;
  	background:#fff;
	padding: 10px 0px;
	/*outline:1px solid blue;  used to test layout - comment out in production */
}

#main { /* used for article ID */
	max-width: 1200px;
	width:100%;
	margin: 0 auto;
	/*  outline:1px solid teal; /* used to test layout - comment out in production */
}


#form {
	padding:0px 30px 10px 20px;
}

.left {
	/*  available to adjust two and three column layouts */
}

.center {
	/*  available to adjust two and three column layouts */
}

.right {
	/*  available to adjust two and three column layouts */
}



.list {
	text-align: center;
}


#content h1 { 
	font-weight: bold;
	letter-spacing: 1px;
	line-height: 1.3em;
    font-size: 1.6em;
	color:#670909;
    margin-bottom: .5em; 
    margin-top: .5em; 
	}

#content h2 { 
	font-weight: bold;
	letter-spacing: 1px;
    font-size: 1.3em;
	color:#670909;
    margin-top: .25em; 
	margin-bottom: 0;
	}

#content h3 { 
	font-weight: bold;
	letter-spacing: 1px;
    font-size: 1.1em;
	color:#670909;
    margin-top: .25em; 
	margin-bottom: 0;
	}


#content p.indent,#content h2.indent,#content ul.indent  {
	margin-left: 2em;
}


.content-image {/* this keeps the image from overlapping the body content when resizing the viewport */
	max-width:400px;
	width: 100%;
	border: 1px solid black;
	border-top: none; 
	border-radius: 0px 0px 10px 10px;
	padding: 5px;
	margin: 0 0 10px 10px;
}

.content-image-full {/* this keeps the image from overlapping the body content when resizing the viewport */
	max-width:400px;
	width: 100%;
	border: 1px solid black;
	/*border-top: none;  */
	border-radius: 10px 10px 10px 10px;
	padding: 5px;
	margin: 0 0 10px 10px;
}


.caption {
	background-color: #670909;
	min-height:35px;
	border-radius: 10px 10px 0px 0px;
	max-width:412px;
	width: 100%;
    color:#fff;
	margin: 0px 0px 0px 10px;
	text-align:center;
}

.testimonial {
	margin: 0 auto;
	width:70%;
	background-color:#d7e3e6;
	padding:20px;
	border-radius: 60px;
}

.testimonial p {
	margin: 0;
	font-size: 1.1em;
	font-family: Georgia, serif;
	font-style: italic;
	text-align: left;
}
.testimonial div {
	text-align: right;
	font-size: 0.9em;
}
.testimonial div span.org {
	display: block;
}
.testimonial div:before {
	content: "\2014  ";
}
span.name {
	margin-right: 5em;
		font-weight: bold;

}
span.org {
	margin-right: 5em;
		font-weight: bold;
}

code {
	font-family: monospace;
	font-size: 1.2em;
	font-weight: bold;
}

.status {
	margin: 0 auto;
	width:95%;
	background-color:#f3edd6;
	padding:20px;
	border-radius: 10px;
}

.error { color: red }

.normal { color: green }


/* Redefine input rules to conform to Apple Interface Guidelines in layout.css */

input.button {
	outline: none;/* defined so buttons do NOT have an outline when selected */
}

input[type=text] {
    padding:5px; 
    border:2px solid #ccc; 
    -webkit-border-radius: 5px;
    border-radius: 5px;
	width:65%;
}

input[type=text]:focus {
    border-color:none;
}

textarea {
    padding:5px; 
    border:2px solid #ccc; 
    -webkit-border-radius: 5px;
    border-radius: 5px;
	width:65%;
	margin-left:65px;
}

input[type=submit] {
    padding:5px 15px; 
    background:#ccc; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px;
	color:black;
}

input[type=submit]:hover {
    background:#bfecf0; 
	color:black;
}

/* Redefine select attributes in layout.css */
select {
  border: none;
  border-radius: 0px;
}



/* Footer */
/* ================================================== */

footer { /* used for element ID */
	padding: 15px;
    background: #670909;
	margin: 0 auto;
	width: 100%;
	border-radius: 10px 10px 0px 0px;
}

#site-footer { /* used to style footer content  */
	text-align: center;
	padding: 10px 15px 0 15px;
	min-height:75px;
	/*  outline:1px solid maroon; /*  used to test layout - comment out in production */
}

footer .address { /* used to style footer content  */
	color:#ddd;
	font-size: 0.9em;
	line-height: 0.9em;
	font-weight: 300;
}

footer .copyright { /* used to style footer content  */
  	color:#ccc;
  	font-size: 1em;  /* may want to increase to 1.2em depending on intended use */
	padding-top: 5px;
}

footer a, footer a:visited { /* used to style footer navigation  */
  color: #fff; 
  font-weight:bold;
  text-decoration:none;
}

footer a:hover, footer a:active { /* used to style footer navigation  */
  color: gold;
	text-decoration:none;
}


footer a.phone, footer a.phone:visited {
	font-size: 24px;
	font-weight: bold;
	line-height: 1.2em;
	color: #fff;	
}

footer a.phone:active, footer a.phone:hover {
    color:#fff; 
}

.social-icon {
	margin:0 5px;
	
}

/* CSS from JFM's Portfolio page */
/* ================================================== */

/* body#page-works-portfolio_ */

#page-works-portfolio_ h1.page-title {
	color: #670909;
	white-space: normal;
	height: auto;
	line-height: 1.5;
	margin-bottom: 0.5em;
	padding: 1em 0 0 20px;
}
#page-works-portfolio_ h1.page-title span {
	white-space: nowrap;
}
#page-works-portfolio_ p.description {
	margin: -6px 0 2em 0;
	padding-left: 22px;
}
#page-works-portfolio_ .items {
	vertical-align: top;
}
#page-works-portfolio_ .item {
	display: inline-block;
	min-width: 230px;
	max-width: 380px;
	margin: 0 20px 30px 0;
	vertical-align: top;
	padding: 0.5em;
	background-color: #eee;
	border-radius: 3px;
	min-height: 210px;
}
#page-works-portfolio_ .item { /* IE 6, 7 */
	zoom: 1;
	*display: inline;
}
#page-works-portfolio_ .item img {
	display: block;
	margin: 0 0.5em 0.5em 0;
	border: 1px #CCCCCC solid;
	text-align: center;
	vertical-align: top;
}
#page-works-portfolio_ .item h3 {
	font-size: 1.1em;
	line-height: 1.1;
	font-weight: normal;
	font-family: Georgia, serif;
}
#page-works-portfolio_ .item p {
	margin: 0.25em 0 0 0;
	font-size: 0.85em;
}
#page-works-portfolio_ .item div.links {
	text-align: right;
	font-size: 0.85em;
}


#page-works-portfolio_ .item a {
	margin-right: 1em;
	white-space: nowrap;
}
#page-works-portfolio_ .item a[target=_blank]:after {
	content: url(../iconz/external-link-21x15.png);
	vertical-align: middle;
}

@media (min-width: 300px) {
	#page-works-portfolio_ .item {
		display: block;
		max-width: 380px;
		margin: 0 20px 30px 0;
		vertical-align: top;
	}
}

@media (min-width: 420px) {
	#page-works-portfolio_ .item {
		display: inline-block;
		width: 380px;
		margin: 0 20px 30px 0;
		vertical-align: top;
	}
	#page-works-portfolio_ .item { /* IE 6, 7 */
		zoom: 1;
		*display: inline;
	}
	#page-works-portfolio_ .item img {
		float: left;
		width: 200px;
		margin: 0 0.5em 0.5em 0; 
		border: 1px #CCCCCC solid;
			/* align with top of h3: 0.13em = 1.2em (h3 font-size) * 0.2 (h3 line-height - 1) / 2 (above+below) */
		text-align: center;
		vertical-align: top;
	}
	#page-works-portfolio_ .item h3 {
		margin: 0 0 0 0.5em;
		font-size: 1.1em;
		line-height: 1.1;
		font-weight: normal;
		font-family: Georgia, serif;
	}
	#page-works-portfolio_ .item p {
		margin: 0.25em 0 0 0.5em;
		font-size: 0.85em;
	}
}

#page-works-portfolio_ .pagination {
	margin: 0;
	width: 100%;
	text-align: center;
}

@media (min-width: 420px) {
	#page-works-portfolio_ .pagination {
		width: 400px;
	}
}

#page-works-portfolio_ .pagination span {
	/* visibility: hidden; */
	color: #bbb;
	white-space: nowrap;
}
#page-works-portfolio_ .pagination span.next:after {
	content: " \25B6";
}
#page-works-portfolio_ .pagination span.prev:before {
	content: "\25C0  ";
}
#page-works-portfolio_ .pagination a span {
	color: inherit;
}
#page-works-portfolio_ .pagination span.position {
	padding: 0 1em;
	color: gray;
}
#page-works-portfolio_ .pagination span.position:after {
	content: " pages";
}

#page-works-portfolio_ #tags-list {
	margin: 2em 0.25em 0 0;
}
#page-works-portfolio_ #tags-list ul {
	margin: 0 0 1em 0.0625em;
	padding: 0;
	list-style-type: none;
}
#page-works-portfolio_ #tags-list li a {
	font-weight: normal;
}

#page-works-portfolio_ #tags-list li.leaf {
	display: inline-block;
	margin: .5em 1.5em 1.5em .5em;
}
#page-works-portfolio_ #tags-list li.leaf { /* IE 6, 7 */
	zoom: 1;
	*display: inline;
}



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


	/* Mobile Portrait Size for old phones */
@media only screen and (max-width: 320px) {

/*  redefine width and padding in layout.css */
.container {
    padding: 0; 
}
/*  redefine margin-left in layout.css */
.column, .columns {
    margin-left: 0; 
}
	
.header-left.columns { /* used for style header content */
		width:55%;
	/* outline:1px solid yellow; used to test layout - comment out in production */
}

.header-right.columns { /* used for style header content */
	/* 	width:40%;  */
	/* outline:1px solid yellow; used to test layout - comment out in production */
}

#header-image img{
	height:150px;
	min-height: 150px;
}

header a.phone, header a.phone:visited {
  margin-top: -75px;
  float: right;
}
	
#topmenu {
top: 126px;
position: absolute;
}
	
#content {
	padding-left: 7px 0px 7px 0px;
}

.content-image {
	max-width:300px;
	margin: 0 0 10px 0px;
	padding: 0;
}

.caption {
	min-height:35px;
	max-width:312px;
	margin: 0px 0px 0px 0px;
}

footer .phone {
  margin-top:5px;/* added so that the text displays better vertically in the block */
  margin-bottom:10px;/* added so that the text displays better vertically in the block */
  text-align:center;/* added so that the text displays centered in the block */
}

}


	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 321px) and (max-width: 549px) {

/*  redefine width and padding in layout.css */
.container {
    padding: 0; 
}
/*  redefine margin-left in layout.css */
.column, .columns {
    margin-left: 0; 
}
	
.header-left.columns { /* used for style header content */
		width:50%;
	/* outline:1px solid yellow; used to test layout - comment out in production */
}

.header-right.columns { /* used for style header content */
	/* 	width:40%;  */
	/* outline:1px solid yellow; used to test layout - comment out in production */
}

#header-image img {
	height:150px;
	min-height: 150px;
}

header a.phone, header a.phone:visited {
  margin-top: -75px;
  float: right;
}

#topmenu {
top: 126px;
position: absolute;
}
	
#content {
	padding-left: 5px 0px 5px 0px;
}

.content-image {
	max-width:90%;
	margin: 0 0 10px 0px;
}

.caption {
	min-height:35px;
	max-width:93%;
	margin: 0px 0px 0px 0px;
}


footer .phone {
  margin-top:5px;/* added so that the text displays better vertically in the block */
  margin-bottom:10px;/* added so that the text displays better vertically in the block */
  text-align:center;/* added so that the text displays centered in the block */
}

}


/* --------------------------------------------------------- */
/* Larger than phablet (also point when grid becomes active) */
/* --------------------------------------------------------- */

@media only screen and (min-width: 550px) and (max-width: 749px) {

/*  redefine width and padding in layout.css */
.container {
    padding: 0; 
}
/*  redefine margin-left in layout.css */
.column, .columns {
    margin-left: 0; 
}
	
.header-left.columns { /* used for style header content */
		width:30%;
	/* outline:1px solid yellow; used to test layout - comment out in production */
}

.header-right.columns { /* used for style header content */
	margin-left: 0%;
	/* outline:1px solid yellow; used to test layout - comment out in production */
}

#header-image img {
	height:200px;
	min-height: 200px;
}

#topmenu {
top: 140px;
position: absolute;
}
	
#mainnav #topmenu {
		width: 300px;
	}
	
.content-image {
	max-width: 90%;
}

.caption {
	min-height:35px;
	max-width:94%;
	margin: 0px 0px 0px 10px;
}

footer a.phone, footer a.phone:visited {
	font-size: 20px;
}

}


	/* Larger than tablet to standard 960  (devices and browsers) */
@media only screen and (min-width: 750px) and (max-width: 959px) {

.header-left.columns { /* used for style header content */
		width:23%;
	/* outline:1px solid yellow; used to test layout - comment out in production */
}

.header-right.columns { /* used for style header content */
	margin-left: 0%;
		width:77%;
	/* outline:1px solid yellow; used to test layout - comment out in production */
}

#header-image img {
	height:250px;
	min-height: 250px;
}

.content-image {
	max-width:320px;
}

.caption {
	min-height:35px;
	max-width:332px;
	margin: 0px 0px 0px 10px;
}

}


	/* Larger than desktop to 960 + 100 (devices and browsers) */
@media only screen and (min-width: 960px) and (max-width: 1159px) {

.header-left { /* used for style header content */
	/* outline:1px solid yellow; used to test layout - comment out in production */
}

.header-right { /* used for style header content */
	
}

#header-image img {
	height: 100%;
}

}

@media only screen and (min-width: 1200px)  {


}



/* 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: 960px) {}

/* 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; }
*/