/* External Style Sheet for Hickory Pointe Web Application */
@font-face {
		font-family: TheanoOld;
		src: url('fonts/TheanoOldStyle-Regular.ttf');
}

@font-face {
    font-family: 'armwrestlerbold';
    src: url('fonts/ArmWrestler-webfont.eot');
    src: url('fonts/ArmWrestler-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ArmWrestler-webfont.woff') format('woff'),
         url('fonts/ArmWrestler-webfont.ttf') format('truetype'),
         url('fonts/ArmWrestler-webfont.svg#armwrestlerbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
		font-family: TheanoOld;
		background-color: #FF3232;
		background-image: url(images/red176.jpg); /* BJS added 05/13/17 as a test */
}

#wrapper {
		background-color: #ff7b17;
}

article {
		background-color: white;
}

h1,h2,h3,h4,h5 {
		font-family: armwrestlerbold,Arial,Helvetica,sans-serif;
}

header {	
		background-color: #e4d3bc;	
		margin: 0;
		padding: 10px 0 0 0;
}

header nav {
		background-color: #d6bb97;
}

header h1 {	padding: 0 10px 10px 20px;
		font-size: 2.5em;
		margin: 0;
	}

footer	{
		background-color: #e4d3bc;	
		margin-top: 20px;
		margin-bottom: 0;
		text-align: center;
		clear: both;
		font-size: .7em;
		padding-bottom: 10px;
	}

footer nav {
		background-color: #d6bb97;
}

footer p {
		margin-bottom: 0;
}


img 	{	
		width: 100%;
		height: auto;
	}

.formLabel {
		width: 130px;
		float: left;
	}

legend	{	font-weight: bold; } /* BJS - make legends stand out a bit more */

/* DAN - Added so email address on faq page wouldn't break container */
.faqText {	word-wrap: break-word;	
	 }
/* http://themeloom.com/2013/02/tips-embed-google-maps-and-calendars-in-a-responsive-wordpress-theme/ modify this more later */
.iframeContainer {
    		position: relative;
    		padding-bottom: 56.25%;
    		padding-top: 30px;
    		height: 0;
    		overflow: hidden;
    		border: none;
    		border-width: 0px;
	}
 
.iframeContainer iframe,   
.viframeContainer object,  
.viframeContainer embed {
    		position: absolute;
    		top: 0;
    		left: 0;
    		width: 100%;
    		height: 100%;
    		border: none;
    		border-width: 0px;
	}

nav	{
		font: 1.4em Calibri,Helvetica,sanserif;
		margin: 0;
	}

nav ul	{	
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}


nav li a {	
		display: block;
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
	}

nav li a:hover {
		background: #b53e47;
	}

/* unvisited link */
a:link 	{
		color: #841f27;
	}

/* visited link */
a:visited {
		color: #841f27;
	}

/* mouse over link */
a:hover {
		color: #29ada3;
	}

/* selected link */
a:active {
		color: #97d6bb;
	}

/* EXPERIMENTAL */

/* Modifying what I learned from
   https://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/
*/ 

input#show-menu[type=checkbox]{
    display: none;
    -webkit-appearance: none;
}

input#show-menu[type=checkbox]:checked ~ #mainNav{
    display: block;
}

/* END EXPERIMENTAL */


/* PHONES */
@media only screen and (max-width: 600px) {

#wrapper {	
		width:100%;
		padding: 0;
		margin: 0;

	} 

#headingArea img {
		display: none;
	}

#headingArea p {
		padding-left: 20px;
	}

article	{
		padding: 5px;
	}

.twoSections,
.threeSections,
.boardLeft,
.boardRight {	
		width: 100%; 
		margin: 0;
		padding: 0;
		border: none;
		box-shadow: none;
		font: 1.4em Calibri,Helvetica,sanserif;
	}

/* EXPERIMENTAL */

#mainNav {	position: static;
		display: none;
		clear: right;
	}

.show-menu {
		display:block;
		text-align: right;
	}

.show-menu img {
		width: 40px;
		height: 40px;
		}


/* END EXPERIMENTAL */

} /* END PHONES */

/* TABLETS */
@media only screen and (min-width: 600px) {

#wrapper {	
		width:90%;
		border:1px solid;
		padding:20px;
		margin:2.5em auto 20px auto;
	} 

#headingArea img {
		display: none;
	}

#headingArea p {
		padding-left: 20px;
	}

article	{
		padding: 5px;
	}

.twoSections,
 .threeSections,
.boardLeft,
.boardRight {	
		padding: 10px;
		margin: 5px;
		width: 90%;
	}

/* EXPERIMENTAL */

#mainNav {	position: static;
		display: none;
	}

.show-menu {
		display:block;
		text-align: right;
	}

.show-menu img {
		width: 40px;
		height: 40px;
		}

/* END EXPERIMENTAL */

} /* END TABLETS */

/* DESKTOPS */
@media only screen and (min-width: 768px) {

#wrapper {
		min-width: 875px;	
		max-width: 80%;
		border:2px solid;
		padding: 0;
		margin:2.5em auto 20px auto;
	}

#headingArea h1 {
		width: 525px;
		float: left;
		}
#headingArea img {
		display: block;
		float: left;
		}
#headingArea p	{
		float: right;
		margin-right: 20px;
		}
.acrossTheTop {	
		margin: 10px;
		width: 100%;
	}


.twoSections {	
		float: left;	
		padding: 0; 
		margin: 0;
		width: 50%;
	}

.threeSections {	
		float: left;	
		padding: 0;
		margin: 0;
		width: 33%;
	}

.boardLeft {	
		float: left;	
		padding: 0; 
		margin: 0;
		width: 70%;
	}

.boardRight {	
		float: left;	
		padding: 0; 
		margin: 0;
		width: 25%;
	}

article	{	
		border: 2px solid;
		box-shadow: 3px 3px 3px;
		padding: 10px;
		margin: 20px;
	}

img	{	
		margin: 10px;
		padding: 10px;
		width: 95%;
	}

#headerLogo {
		width: 144px;
		height: 50px;
		margin: 0;
		padding: 0;
		display: inline;	
	}

nav	{
		border-top: 1px solid black;
		border-bottom: 1px solid black;
		width: 100%;
		margin: 0;
	}

nav li 	{	float: left; }

nav li a {	border-right: 1px solid black; }

form 	{
		margin: 10px;
		padding: 10px;
	}
/* Feel Free to edit/move any of the table CSS below Jeremy */
/* Table CSS on addChangeFAQ.php */
table
	{
		width: 100%;
	}
tr	
	{
		
	}
th
	{
		border: solid black 1px;
	}
td	
	{
		border: solid black 1px;
		text-align: left;
	}
tr > td > input
	{
		width: 100%;
		box-sizing: border-box;		/* Makes it so input at 100% */
		-moz-box-sizing: border-box;	/* does not expand past table data box */
		-webkit-box-sizing: border-box;
	}
tr > td > textarea
	{
		width: 100%;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}	
label
	{
		display: inline-block;
		width: 100px;
		margin-right: 10px;
	}
#questArea,
#questAnswer
	{
		display: inline-block;
		width: 100%;
	}
		

/* EXPERIMENTAL */

/* Modifying what I learned from
   https://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/
*/ 

.show-menu {
	text-decoration: none;
	text-align: center;
	padding: 10px 0;
	display: none;
}

#mainNav {	display: block; }

/* END EXPERIMENTAL */

} /* END DESKTOPS */