/*****************************************/
/********** MAIN BODY ELEMENTS ***********/
/*****************************************/
body 
{ 
	/*Set as the footer background color AND not the main bg color - sections define background colors*/
	/*This is done so if a page has very little info the footer color will extend to the bottom of computer screens*/
	background-color: #000000;
	color: #000000;
	font-size: 16px;
	font-family: Arial,Helvetica,sans-serif;
	margin: 0px 0px 0px 0px;
	background-image: url("images/Knotty-Pine-Background2.jpg");
}

/*****************************************/
/********** SPACING **********************/
/*****************************************/
.thumbnail{background-color: #000000;}
.knot { background-color: #000000; height: 325px; padding-top: 50px;}
.topspacing{ padding-top: 135px;}
.vertical-align { display: flex; align-items: center; }

/*****************************************/
/********** DESIGN ELEMENTS***************/
/*****************************************/
footer {
    box-shadow: 0 50vh 0 50vh #000;
}

.section30{
    padding:30px;
}

/*****************************************/
/********** TEXT *************************/
/*****************************************/
h1{color: #ffffff; font-family: Arial;}
h2{color: #ffffff;}
h3{color: #ffffff;}
h4{color: #ffffff;}
h5{color: #ffffff;}


/*****************************************/
/********** LINKS ************************/
/*****************************************/
a.a1:link{   color: #FFFFFF; font-size: 16px; text-decoration: underline;}
a.a1:visited{color: #FFFFFF; font-size: 16px; text-decoration: underline;}
a.a1:hover{  color: #5b5e63; font-size: 16px; text-decoration: underline;}

a.a2:link{   color: #000000; font-size: 18px; text-decoration: underline;}
a.a2:visited{color: #000000; font-size: 18px; text-decoration: underline;}
a.a2:hover{  color: #5b5e63; font-size: 18px; text-decoration: underline;}


/*****************************************/
/********** FILLS AND BACKGROUNDS ********/
/*****************************************/
.container-knot{	padding:10px;
		color: #000000;
		border: 0px;
		}

.white{ background-color: #FFFFFF; color: #000000;}
.black{ background-color: #000000; color: #FFFFFF;}
.grayLight{ background-color: #cccccc; color: #000000;}
.grayDark{ background-color: #333333; color: #FFFFFF;}

/*****************************************/
/********** NAVIGATION BAR ***************/
/*****************************************/
/*USED WHEN BRAND LOCATION IS TEXT - SETS THE FONT STYLE AND COLOR*/
#basic-menu.navbar-default .navbar-brand {
    color: rgba(0, 0, 0, 1);
}
/*MAIN FORMATTING FOR NAV BAR*/
#basic-menu.navbar-default {
    font-size: 25px;
    background-color: rgba(0, 0, 0, 1);
    border-bottom-width: 1px;
}
/*MAIN COLORS FOR DESKTOP VIEW WHEN MENU ITEMS IDLE*/
#basic-menu.navbar-default .navbar-nav>li>a {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(0, 0, 0, 1);
}
/*MAIN COLORS FOR DESKTOP VIEW WHEN SCROLLING OVER MENU ITEMS*/
#basic-menu.navbar-default .navbar-nav>li>a:hover,
#basic-menu.navbar-default .navbar-nav>li>a:focus {
    color: rgba(0, 0, 0, 1);
    background-color: rgba(255, 255, 255, 1);
}
/*RARELY USED - COLORS IF KNOWN AT ACTIVE PAGE FOR LINK*/
#basic-menu.navbar-default .navbar-nav>.active>a,
#basic-menu.navbar-default .navbar-nav>.active>a:hover,
#basic-menu.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(0, 0, 0, 1);
    background-color: rgba(255, 255, 255, 1);
}
/*CHANGES BORDER COLOR OF ICON WHEN IN MOBILE FRIENDLY VIEW - MAIN COLOR*/
#basic-menu.navbar-default .navbar-toggle {
    border-color: #FFFFFF;
}
/*CHANGES BACKGROUND COLOR OF ICON WHEN IN MOBILE FRIENDLY VIEW WHEN SCROLLING OVER*/
#basic-menu.navbar-default .navbar-toggle:hover,
#basic-menu.navbar-default .navbar-toggle:focus {
    background-color: #FFFFFF;
}
/*CHANGES COLOR OF BARS INSIDE OF ICON WHEN IN MOBILE FRIENDLY - MAIN COLOR*/
#basic-menu.navbar-default .navbar-toggle .icon-bar {
    background-color: #FFFFFF;
}
/*CHANGES COLOR OF BARS INSIDE OF ICON WHEN IN MOBILE FRIENDLY VIEW WHEN SCROLLING OVER*/
#basic-menu.navbar-default .navbar-toggle:hover .icon-bar,
#basic-menu.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #FFFFFF;
}
/*CHANGES COLOR DROPDOWN BACKGROUND WHEN IN MOBILE FRIENDLY VIEW WHEN SCROLLING OVER*/
ul li ul li:hover { background: #FFFFFF; }


/*****************************************/
/********** CAROUSEL STYLING *************/
/*****************************************/
/*sets the size for the images to scale and stretch*/
.carousel-inner img 
{
    max-height: 450px; /*Restrict the images for the slides to this height*/
}


/*****************************************/
/********** YOUTUBE VIDEO SIZING *********/
/*****************************************/
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}