* { box-sizing: border-box; }

body { font-family: Verdana, Arial, sans-serif;
	background-image: url(background1.jpg);
	background-size: contain; }

a { color: #8e7a3d; }

h3 {color: #d7b957; 
	font-weight: bold; }

/* Container for main page, primary row image+text */
.mainRowContainer { background-color: #bd7344;		/*Orange*/
	color: #3a3a3a; 	/*Charcoal*/
	padding: 5px; 
	height: auto;
	width: auto; 
	display: block; 
	overflow: auto; }

/*Styles images to float to the left of the text in primary rows*/
.mainRowImgColumn { max-width: 25%; 
	float: left; 
	clear: left; 
	padding: 5px; 
	background-color: inherit;
	height: inherit; }

/*Styles the text column to the right of the image in primary rows*/
.mainRowTxtColumn { max-width: 75%; 
	float: left; 
	padding: 5px;
	background-color: inherit; 
	color: inherit; 
	height: inherit; 
	text-align: left; }
	
/* Container for main page, alternate row image+text */	
.altRowContainer { background-color: #8e7a3d; /*Green*/
	color: #3a3a3a; /*Charcoal*/
	padding: 5px; 
	height: auto;
	width: auto; 
	display: block; 
	overflow: auto; }

/*Styles images to float to the right of the text in alternate rows */
.altRowImgColumn { width: 25%; 
	float: right; 
	clear: right; 
	padding: 5px;
	background-color: inherit;
	height: inherit; }

/*Styles the text column to the left of the image in alternate rows*/	
.altRowTxtColumn { width: 75%; 
	float: right; 
	padding: 5px;
	background-color: inherit; 
	color: inherit; 
	height: inherit; 
	text-align: right; }

/* Container for recipe ingredient and instruction columns */
.recipeContainer { column-count: 2; 
	column-gap: 40px; 
	column-rule-style: solid; 
	column-rule-width: 1px; 
	column-rule-color: black;
	column-width: 100px; 
	color: #d7b957; 
	text-align: center; }

/*Styles for an ingredients list in the column to the left of the recipe instructions*/
.recipeIngredients {float: left; 
	clear: left; 
	text-align: center; 
	padding: 10px; }

/*Styles for an instructions list in the column to the right of the ingredients list*/
.recipeInstructions {float: left; 
	clear: left;
	text-align: center; 
	padding: 10px; }

/* Container for embedded videos and a text description */
.videoEmbedContainer { padding: 20px; 
	background-color: #3a3a3a; /*Charcoal*/
	display: table; 
	overflow: auto; 
	width: 100%; }

.videoEmbedVidColumn { background-color: #3a3a3a; /*Charcoal*/ 
	padding-top: 10px;
	padding-left: 10px; 
	display: table-cell; 
	vertical-align: middle; }

.videoEmbedTxtColumn { background-color: #3a3a3a; /*Charcoal*/
	text-align: left;  
	color: #d7b957; /*Yellow*/
	padding-top: 10px;
	padding-left: 10px;
	display: table-cell;
	vertical-align: middle; }
	
.aboutPageStyle {background-color: #3a3a3a; 
	color: #d7b957; 
	padding: 15px; }
	
/*Styles an "under construction" image as a placeholder on incomplete pages*/
.underConstruction { background-color: #3a3a3a;	 /*Charcoal*/
	height: 100%; 
	width: 100%; }

header { background-color: #3a3a3a;		/*Charcoal grey*/
	height: 200px;
	background-image: url(bachelorChowLogo.png);
	background-repeat: no-repeat; }
      
h1 { padding-top: 45px;
	padding-left: 250px;
	font-size: 40px;
	color: #d7b957;		/*Mellow yellow*/ 
	height:100px; }   
	
img { max-width: 100%;		/*Styles images to automatically */
	height: auto; }			/*adjust to the window size*/
	
footer { background-color: #a8293c;		/*Red*/
	font-size:.60em;
	font-style: italic;
	text-align: center;
	padding-bottom: 15px;
	padding-top: 15px;
	border-top: 10px;
	border-color: #3a3a3a; /*Charcoal*/
	float: left; 
	clear: left; 
	width: 100%; }
			 
main { padding-left: 0;
	padding-right: 0;
	padding-bottom: 2em;
	display: block;
	padding-top:0; 
	background-color: #3a3a3a; /*Charcoal*/ }

.details { padding-left: 20%;
	padding-right: 20%;
	overflow: auto; }

/* Style inputs with type="text" and textareas */
input[type=text], select, textarea {
  width: 100%; 
  padding: 12px;  
  border: 1px solid #ccc; 
  border-radius: 4px; 
  box-sizing: border-box; 
  margin-top: 6px; 
  margin-bottom: 16px; }

/* Style the submit button */
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #45a049;
}

/* Add a background color and some padding around the form */
.contactForm {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px; }
	
#wrapper { margin-left:auto;
	margin-right:auto;
	width: 80%;
	min-width:900px;
	max-width:1280px;
	box-shadow: 5px 5px; }
	


	
#mobile { display: none; }
#desktop { display: inline; }
			


header, topnav, main, footer { display: block; }

/* Class Declaration for Responsive Top Nav Bar with Dropdown Menus */
.topnav { background-color: #a8293c;	/*Red*/
		  padding-left: 25px; 
		  padding-bottom: 5px; 
		  padding-top: 5px; 
		  overflow: hidden; }
		  
/* Style for links within .topnav class */	
.topnav a { float: left; 
	display: block; 
	color: #d7b957; 		/*Mellow yellow*/
	text-align: center; 
	padding: 14px 16px;
	text-decoration: none; 
	font-size: 17px; }

/* Active class to highlight current page in navbar */
.active { background-color: #3a3a3a; 		/*Charcoal*/
	color: #d7b957; }		/*Mellow yellow*/
	
/* Hide open/close link to nav on small screens */
.topnav .icon { display: none; }

/* Dropdown container for positioning dropdown menu content */
.dropdown { float: left;
	overflow: hidden; }
	
/* Style dropdown button to fit in nav bar */
.dropdown .dropbtn { font-size: 17px; 
	border: none; 
	outline: none; 
	color: #d7b957; 		/*Mellow yellow*/ 
	padding: 14px 16px; 
	background-color: inherit; 
	font-family: inherit; 
	margin: 0; }

/* Highlight dropdown button when one of its child links is active*/
.dropbtnActive { font-size: 17px; 
	border: none; 
	outline: none; 
	color: #d7b957; 		/*Mellow yellow*/ 
	padding: 14px 16px; 
	background-color: #3a3a3a;		/*Charcoal*/ 
	font-family: inherit; 
	margin: 0; }
	
/* Style dropdown content */
.dropdown-content { display: none; 
	position: absolute; 
	background-color: #f9f9f9; 
	min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

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

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* 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) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive { position: relative; }
  
  .topnav.responsive a.icon { position: absolute;
    right: 0;
    top: 0; }
	
  .topnav.responsive a { float: none;
    display: block;
    text-align: left; }
	
  .topnav.responsive .dropdown { float: none; }
  
  .topnav.responsive .dropdown-content { position: relative; }
  
  .topnav.responsive .dropdown .dropbtn { display: block;
    width: 100%;
    text-align: left; }
}



.dropbtn { background-color: #a8293c }