/******************************************************************************************************************************************

	Theme (Butterfly) CSS companion to madresponsive.css

	Developed by Cloud Mountain Marketing.  Designed by Haniel Hann.  Copyright 2018

*******************************************************************************************************************************************/


/******************************************************************************************************************************************

	SECTION #1 - Site Wide definitions - All Devices

	Production Note:  All "theme" related defintions will be moved to the <Theme name>-THEME.CSS file
						Next steps:
							1. Finish Smartphone navigation.  Desktop and tablet are the same and done for this theme.
							2. Migrate theme CSS code to THEME.CSS file
							3. Make new theme based on this template (Test theme making concept of easy to build with this CSS/HTML template)
							4. Tackle Accordion Navigation after new theme completed as theme variation.

*******************************************************************************************************************************************/


	/******************************************************************************************************************************************
		SECTION #1.B - STEP #2 (Define the Design Components)
		Design Components - HTML definitions and non-Structure related classes and IDs - <links> <h tags> and <classes> et al
							These are defined before the containter divs because the container components will default to these definitions
							making these the foundation of a theme (uniform look and feel across the entire site on all devices).
					Note: 	These components may be redefined within specific container divs below. Or they may be only used within a 
							container div below in which case they can be deleted from this section for efficiency and compactness.
	*******************************************************************************************************************************************/


	a, a:visited {										
		color: #fff;									/* text link color for default and visited */
	}

	a:hover, a:focus {											
		color: #ffae00;									/* text link color on rollover */
	}

	h1 {
		color: #000;
	}

	/***********************************************************
		Form input styling
	************************************************************/

	input {
			background: #2a5d32;
			color: #7db43b;
			font-size: 18px;
			border-color: #2D6436;
	}

	input[type=text]:focus {
			border-color: #17421E;
	}

	input[type=button], input[type=submit], input[type=reset] {
			background-color: #2a5d32;
			border-color: #2a5d32;
	}

	input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
		color: #ffae00;
	}

		::-webkit-input-placeholder { /* Chrome/Opera/Safari */
			color: #427a4b;
		}
		::-moz-placeholder { /* Firefox 19+ */
			color: #427a4b;
		}
		:-ms-input-placeholder { /* IE 10+ */
			color: #427a4b;
		}
		:-moz-placeholder { /* Firefox 18- */
			color: #427a4b;
		}



/******************************************************************************************************************************************

	SECTION #2 - Container Structure Div design 

		Design for Smartphone first >>> Desktop last in principle and CSS coding.

		TECH NOTES:
				--> Customize for other Viewports after smartphone definitions section using @media queries.
				--> CSS syntax allows for multiple definitions with each new definition overriding the prior definition and/or
				adding to the previous definition.
					eg. padding:10px can be overwritten with padding:20px.  
					eg. text-align: center can be added to a prior definition which did not define it previously.

				CSS uses the Parent Child design concept - 
					The HTML body defnition is the outermost container for any web 
				page. It's the topmost parent to all the content on the page.
				Coding practice - 
					Start with the outermost container and work within and down

*******************************************************************************************************************************************/

/*********************************************************************************
	SECTION #2.A - Container Div Smartphone and Universal defintions
					No component definitions here.
**********************************************************************************/
/***************************************************************************
		HTML body tag
			site wide definitions for
				background color
				font color
				font family
				font size
				line height
				text alignment
		TECH NOTE:
			Background image can be defined in the desktop section, but 
			do not use it in the mobile responsive sections because
			the browsers and hardware do not support it.
****************************************************************************/
body {
	background-color: #2a5d32;
	font-family: 'Encode Sans Condensed', sans-serif;
	font-size:12px;	
	color:#000;
}

/***************************************************************************
	>>> MAD Responsive Key Component <<<<
		Page container div
			is a MAD Responsive design technique allowing for a fixed
			width desktop design while having a responsive smartphone
			design.
			On the smartphone, width: 100%
			On the desktop, width: 1024px
****************************************************************************/
#page {
	background: #ffffff;
	-webkit-box-shadow: 0px 0px 7px 10px rgba(0,0,0,0.36);
	-moz-box-shadow: 0px 0px 7px 10px rgba(0,0,0,0.36);
	box-shadow: 0px 0px 7px 10px rgba(0,0,0,0.36);
}

/***************************************************************************
		Main Layout Structure (Container) Definitions - 
			At the smartphone level, these are more about how the content
			behaves within the container like padding, color, and
			text alignment as the layout structure is simply a single 
			column.
			The desktop section will have the definitions affecting 
			multi column design and will work hand-in-hand with the HTML
			code of the DIVs.  

		MAD Responsive note
			• The tablet section will be identical to the desktop section
			in regards to multi column layout.
			• We use the float box model concept:
			The order of the DIVs in the HTML document
			sets the precedence. The order of the CSS definitions do not
			affect the order in the HTML document in terms of layout
			locations using the Float Box Model concept. 
	
****************************************************************************/

.header {
		color: white;
}
/*
.header2 {
		color: white;
}
*/
	/***************************************************************************
				#content-wrapper is intended to contain any number of column
				divs and any other content not including the header div or 
				the footer div.
				It may or may not be needed depending on the overall need
				of different site designs.  The float box model layout concept
				works without it.

	****************************************************************************/
#column-main{
		line-height: 30px;
		font-size: 18px;
}

#footer {
		color: #999999;
		font-size: 12px;
		border-top-color: #CCC;
}

/*********************************************************************************
	SECTION #2.B - Layout Component Definitions and Sub Layout Definitions 

		This section was created to help keep the main structure section easy 
		to navigate and manage.  Here is where any layout component definitions
		and sub-layout specific additional definitions are maintained.
**********************************************************************************/

.tiers  h1 {
	line-height: 38px;
}

.tiers h2 {
	border-top-color:#0db5e7;
	border-left-color:#0db5e7;
	border-right-color:#0db5e7;
}

.tiers h3 {
	border-bottom-color:#00CB0D;
	border-left-color:#00CB0D;
	border-right-color:#00CB0D;
}

.tiers ul{
	line-height: 22px;
}

/*************************************************
	Theme specific defintions
**************************************************/

	.headerText {
		float: left;
			font-size: 40px;
			font-weight: lighter;
			padding:30px 0 0 20px;
	}

	.splitColorTilt {
			color:#FF8D00;
			font-style: italic;
			font-weight: normal;
	}

	.splitColor {
			color:#ffae00;
	}

	#company {											/* Use with a logo/business name in the nav bar line */
		float: left;
		margin-left: 20px;
		padding: 10px 0px 10px;
		width:300px;
			font-size: 22px;
			font-weight: bold;
		text-align: left;
			color: #fff;
	}

	#contactInfo {
		background: #217B00;
		padding: 50px;
		text-align: center;
	}

/*
.normal {
		font-weight: normal;
		font-size: 18px;
}

#Slideshow {
		background: #771012;
	width: 100%;
	height: 768px;
}
*/

/*************************************************
	Sidebar Widget(s) defintions
**************************************************/
.sidebarWidget h1 {
		font-size: 30px;
}

.sidebarWidget h2 {							/* This is the yellow headline type for every widget */
		color: #ffae00;
		background:#25572D;
		padding: 8px 30px;
}

.sidebarWidget h3 {							/* This is used to set the color for the Author line in the testimonials widget */
		font-style: italic;
		font-size: 14px;
		color:#1B361F;
}

.sidebarWidget h4 {
		color: #ffae00;
		font-style: italic;
}

.sidebarWidget a:hover {
		color: #ffae00;
}

.sidebarWidget {
		background: #427a4b;
		font-size: 14px;
		border-top-color: #2D6436;
		border-bottom-color: #2D6436;
}

/* while defined specifically for testimonials, it's available to use in other widgets */
.sbDoubleBorder {
		border-top-color: #2D6436;
		border-bottom-color: #2D6436;
}

/*************************************************
	Sidebar btn defintions
**************************************************/

.btn {
	background: #75bf80;
	background-image: -webkit-linear-gradient(top, #75bf80, #427a4b);
	background-image: -moz-linear-gradient(top, #75bf80, #427a4b);
	background-image: -ms-linear-gradient(top, #75bf80, #427a4b);
	background-image: -o-linear-gradient(top, #75bf80, #427a4b);
	background-image: linear-gradient(to bottom, #75bf80, #427a4b);
	-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.26);
	-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.26);
	box-shadow: 0px 0px 10px rgba(0,0,0,0.26);
	color: #ffffff;
	font-size: 18px;
	border-color: #2d6436;
}

.btn:hover {
	background: #427a4b;
	background-image: -webkit-linear-gradient(top, #427a4b, #75bf80);
	background-image: -moz-linear-gradient(top, #427a4b, #75bf80);
	background-image: -ms-linear-gradient(top, #427a4b, #75bf80);
	background-image: -o-linear-gradient(top, #427a4b, #75bf80);
	background-image: linear-gradient(to bottom, #427a4b, #75bf80);
}

/*************************************************
	Sidebar Headshot Widget defintion
**************************************************/

.sb img {
	-webkit-box-shadow: 0px 0px 7px 10px rgba(0,0,0,0.36);
	-moz-box-shadow: 0px 0px 7px 10px rgba(0,0,0,0.36);
	box-shadow: 0px 0px 7px 10px rgba(0,0,0,0.36);
}

/*************************************************
	Sidebar Book Widget specific defintions
**************************************************/

.sbBook h1 {
		font-size: 28px;
}

.sbBook p {
		font-size: 20px;
		border-top-color: #2D6436;
		border-bottom-color: #2D6436;
}

/*************************************************
	Sidebar Testimonials Widget defintions
**************************************************/

.sidebarWidget.sbTestimonials a {			/* Tech note: .sbTestimonials by itself works in desktop, but not on smartphone.  Needs this double call to work on smartphone */
	color:;
}

.testimonials h3 {
	text-align: right;
}

.testimonials p {
	font-style: italic;
}

/*************************************************
	Sidebar Phone Widget defintion
**************************************************/

.sbPhone {
		color: #fff;
}

.testimonials h3 {
	text-align: right;
}

.testimonials p {
	font-style: italic;
}

/*************************************************
	sbButton not used at this point
**************************************************/

.sbButton {
	margin: 10px auto;
	padding: 6px 12px;
		color: white;
		font-size: 18px;
		font-weight: bold;
		background-color: #2D6436;
	border-radius: 18px;
	/*
	border: 2px solid #2C6034;
	*/
    -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
	-webkit-box-shadow: 0px 0px 5px 7px rgba(0,0,0,0.26);
	-moz-box-shadow: 0px 0px 5px 7px rgba(0,0,0,0.26);
	box-shadow: 0px 0px 5px 7px rgba(0,0,0,0.26);
}

.sbButton:hover {
	background-color: #427a4b;
	color: #ffae00;
}

.sbButton:active {
	-webkit-box-shadow: 0px 0px 2px 4px rgba(0,0,0,0.36);
	-moz-box-shadow: 0px 0px 2px 4px rgba(0,0,0,0.36);
	box-shadow: 0px 0px 2px 4px rgba(0,0,0,0.36);
}

/******************************************************************************************************************

	SECTION #3 - Site Navigation 
			This section is where the main nav bar is located and any other navigation related definitions 
			like the "back to top" button.

*******************************************************************************************************************/

/*************************************************
	SECTION #3.A - Back to Top button
**************************************************/

#topBtn {
		border: none; /* Remove borders */
		border-radius: 10px; /* Rounded corners */
		background-color:rgba(56,127,43,0.50); /* Set a background color */
		color: white; /* Text color */
		font-size: 18px; /* Increase font size */
}

/*************************************************
	SECTION #3.B - Main Navigation
**************************************************/

	/******************************************************************
		Button design for navigation bar
	*******************************************************************/

	.btn2 {
		background: #75bf80;
		background-image: -webkit-linear-gradient(top, #75bf80, #427a4b);
		background-image: -moz-linear-gradient(top, #75bf80, #427a4b);
		background-image: -ms-linear-gradient(top, #75bf80, #427a4b);
		background-image: -o-linear-gradient(top, #75bf80, #427a4b);
		background-image: linear-gradient(to bottom, #75bf80, #427a4b);
		-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.26);
		-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.26);
		box-shadow: 0px 0px 10px rgba(0,0,0,0.26);
		color: #ffffff;
		border-color: #2d6436;
	}

	.btn2:hover {
		background: #427a4b;
		background-image: -webkit-linear-gradient(top, #427a4b, #75bf80);
		background-image: -moz-linear-gradient(top, #427a4b, #75bf80);
		background-image: -ms-linear-gradient(top, #427a4b, #75bf80);
		background-image: -o-linear-gradient(top, #427a4b, #75bf80);
		background-image: linear-gradient(to bottom, #427a4b, #75bf80);
	}

	/* Add an active class to highlight the current page */
	.btn2.active {
		background:#FF8D00;
	}

	.btn2.active:hover {
		background: #FF8D00;
	}

	/******************************************************************
		Main Navigation design
	*******************************************************************/

/* 	• Add a black background color to the top navigation 
	• Set the height of the navigation bar
	• width by default will span the whole screen
	• hidden overflow hides anything that extends below the navigation bar including paddings and margins
*/
.topnav {
 		background-color: ;
}

/* Style the links inside the navigation bar */
.topnav a {
/*    
	    color: #f2f2f2;
    font-size: 17px;
*/
}

/* Add an active class to highlight the current page */
	.active {
		border-bottom-color: #0db5e7;
		color: #848484;
	}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn, .dropdown2 .dropbtn {
    color: white;
    background-color: rgba(255,255,255,0.42);
	font-size: 12px;
	font-weight: bold;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
    background-color: #75bf80;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Style the links inside the dropdown */
.dropdown-content a {
    color: black;
}

/* Add a dark background on topnav links and the dropdown button on hover */
	.topnav a:hover, .dropdown:hover .dropbtn {
		background-color: #555;
		color: white;
	}

/* Add a grey background to dropdown links on hover */
	.dropdown-content a:hover {
		background-color: #ddd;
		color: black;
	}


.menulinks button {
    color: #f2f2f2;
	background-color:rgba(255,255,255,0.42);
	font-weight: bold;
}

.more {
	background-color:#03C400;
	font-weight: bold;
	font-size: 14px;
}


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
 
	.menulinks {
			background-color: #2a5d32;
	}

}


/*************************************************
	Old Main Navigation
**************************************************/

#navbar {
	width: 100%;
	min-height: 43px;
	font-size: 24px;
/* 													This section is needed to float the Nav bar above another div.
	position:absolute;
	z-index: 1;
	top:0px;
*/
}

#navbar ul {
}

#navbar li {
		color: #000;									/* vertical bar colors */
}

#navbar li a {
		color: #000;
}

	#navbar li a:hover, li a:focus {
		color:#848484;
	}

	#navbar li a:active {
		color: #848484;
	}

#navbar img {
/*	margin-bottom:-5px;								/* line up social media icons with rest of nav bar */
}

/*************************************************
	Secondary Navigation

#navbar2 {
	list-style:none;
}

#navbar2 li {
}

#navbar2 li a {
	text-decoration:none;
		color: #CC0000;
}

	#navbar2 li a:hover, li a:focus {
		color: #0000CC;
	}
**************************************************/



/******************************************************************************************************************************************

SECTION #4 - MAD Responsive Design
			Now we go beyond the default vertical Smartphone design.  First, we tackle the smartphone wide (horizontal, landscape) view.
			Then we tackle the tablet view.  And lastly, we tackle the desktop view.  We also tackle any specific device issues in this
			section.

******************************************************************************************************************************************/

/******************************************************************************************************************************************
SECTION #4.A - Smartphone Landscape Modifications

		Vertical and Horizontal viewing on the smartphone are dramatically different.  Horizontal specific design modifications
		are defined or redefined here, after the vertical defintions are defined above.
******************************************************************************************************************************************/
@media screen and (min-width: 376px) and (max-width: 736px) {

	.headerText {
		font-size: 40px;
	}
	
	.menulinks {
			background-color: #2a5d32;
	}
}


/******************************************************************************************************************************************
SECTION #4.B - MAD Responsive Key Section
			Tablet & Desktop Viewport Definitions

		This section is for definitions shared by both the tablet and the desktop.  It comes BEFORE the Desktop only and Tablet only 
		definitions because of the CSS over-writing prior definitions principle.  

		This section is where the bulk of the desktop design that is shared by the tablet design is defined.

		The following tablet only and desktop only sections are used to "fix" some technology issues.

******************************************************************************************************************************************/

@media screen and (min-width: 737px) {
	
body {

		background: url(../img/bgd-img.jpg) no-repeat top fixed;
	
}
	
/***************************************************************************************
	desktop layout design - container divs
****************************************************************************************/
	
#page {
	-webkit-box-shadow: 0px 0px 7px 10px rgba(0,0,0,0.36);
	-moz-box-shadow: 0px 0px 7px 10px rgba(0,0,0,0.36);
	box-shadow: 0px 0px 7px 10px rgba(0,0,0,0.36);	
}
	
#footer {
		font-size: 12px;
}

/***************************************************************************************
	desktop navigation and theme specific design 
****************************************************************************************/
	
.headerText {
	font-size: 44px;
}

	.menulinks {
		font-weight: bold;
	}
	.menulinks button {
		background-color: #000000;
	}

	.btn2 {
		background: #000000;
		background-image: -webkit-linear-gradient(top, #000000, #000000);
		background-image: -moz-linear-gradient(top, #000000, #000000);
		background-image: -ms-linear-gradient(top, #000000, #000000);
		background-image: -o-linear-gradient(top, #000000, #000000);
		background-image: linear-gradient(to bottom, #000000, #000000);
		-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0.00);
		-moz-box-shadow: 0px 0px 0px rgba(0,0,0,0.00);
		box-shadow: 0px 0px 0px rgba(0,0,0,0.00);
		color: #ffffff;
		border-color: #2d6436;
	}

	.btn2:hover {
		background: #555;
		background-image: none;
	}

	/* Add an active class to highlight the current page */
	.btn2.active {
		background:#000000;
		background-image: none;
		color: #FF8D00;
	}

	.btn2.active:hover {
		background: #000000;
		background-image: none;

	}

	.topnav a:hover {
		background-color: #000 ;
	}
	

/******************************************************************************************************************************************
SECTION #4.C - Tablet Only Viewport Definitions 
			Usually for bug fixes and workarounds

		MAD Responsive design does make the desktop and tablet look the same, but there are specific bugs and technological work-a-rounds
		that sometimes need to be addressed.  These will be defined in this section.
******************************************************************************************************************************************/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	body {
			background: #2a5d32;										/* define background color without a background image to remove unnecessary image download */
	}

}



/******************************************************************************************************************************************
SECTION #4.D - Desktop Only Viewport Definitions
			Usually for bug fixes and workarounds.
******************************************************************************************************************************************/

@media screen and (min-width: 737px) and (min-device-width: 1024px) {

	#topBtn:hover {									/* needs to be "last" in CSS or After touchscreen devices so not to activate hover on touchscreens */
		background-color:rgba(255,255,255,0.20); 	/* Add a dark-grey background on hover */
	}

	
}


/******************************************************************************************************************************************

SECTION #4.DE - Smartphone Only Viewport Definitions
			Usually for bug fixes and workarounds.
			This is the last viewport definition.

******************************************************************************************************************************************/


/******************************************************************************************************************************************
	The .desktop class (hidden) has to be defined here after it is declared (visibile) in the desktop section 4.B.  If this is defined 
	before it's visible definition in section 4.B then the "bug" is that it will be visible on the smartphone as the display:none is 
	overwritten by the display:inline-block.
******************************************************************************************************************************************/
/*
@media screen and (max-width: 737px) {
	.desktop {
		display: none;
	}
}

*/