/*Padding adds to width! If you have an element that is 200px wide, then add padding of 10px to each side, that element is now 220px.  Not so with margins!
padding is inside the border, margin outside them

#############################    COLORS    ##############################################

COLORS
Use http://colorschemedesigner.com/ to change the values below then do a find/replace

MONO (green)
Primary 	#6A8E41	
Greyish		55693F	
Darker		395A14	
Lighter		9ABF6E	
Lightest	A2BF80

COMPLEMENT (brown)
Primary 	CC9900	
Greyish		997C26	
Darker		856300	
Lighter		E6BA39	
Lightest	E6C667

/*#############################    GLOBALS    #########################################*/

* {
  box-sizing: border-box;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
a {
	color: #9ABF6E;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	color: #CC9900;
}
h1, h2, h3, h4 {
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
	color: #CC9900;
	font-weight: bold;
}
h1 {
	margin: 0px 0px 0px 0px;
	color: #E6C667;
	text-transform: uppercase;
}
h2{
	margin: 0px 0px 0px 0px;
	color: #E6C667;
	text-transform: uppercase;
}
h3{
	margin: 10px 0px 2px 0px;
	color: #E6C667;
	text-transform: uppercase;
}

/*#############################    PAGE STRUCTURE    ##################################*/

html{
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
	font-size: 12px;
}
body{
	background:#9ABF6E;
    width: 1000px;
	margin : 10px auto;
}
#header {
	height: 50px;
	background: #395A14 url(images/header2.png) no-repeat left; /*put logo in here*/
	padding: 10px;
    margin: 10px 0px 10px 0px;
	border-radius:8px;
}
#leftcolumn {
	float: left;
	width: 25%;
	padding: 0px 10px 10px 0px;
}
#rightcolumn {
	float: left;
	width: 75%;
	color: #A2BF80;
	background: #395A14;
	padding: 0px 0px 10px 0px;
	margin-bottom: 10px;
    border-radius:8px;
}

.leftcolumnsection {
	color: #A2BF80;
	background: #395A14;
	padding: 0px 0px 10px 0px;
	margin: 0px 0px 10px 0px;
	text-align: center;
    border-radius:8px;
}
.leftcolumnsectionheader {
	background: #E6BA39;
	height:30px;
	color: #395A14;
	font-weight: bold;
	padding: 6px 5px 5px 15px;
	margin: 0px 0px 15px 0px;
	text-align: left;
    font-size: 140%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.rightcolumnheader {
	padding: 10px 10px 0px 10px;
    height:60px;
    float:left;
    border-bottom: 2px solid #6A8E41;
    margin-bottom: 10px;
}
#footer {
	color: #395A14;
	clear:both;
	padding: 10px 0px 0px 0px;
	margin-top:10px;
	border-top: 2px solid #6A8E41;
	text-decoration: none;
	text-align:right;
}
#footer a {
	color: #395A14;
}

/*#############################    DISPLAY RECIPE    ##########################################*/

#cookbook {
	FONT-SIZE: 10px; 
	FONT-WEIGHT: normal; 
	TEXT-TRANSFORM: uppercase; 
	color: #cccccc; 
	LINE-HEIGHT: 20px; 
	LETTER-SPACING: 0.5em; 
	PADDING-BOTTOM: 2px;
}
#recipecola {
	WIDTH: 270px;
	margin: 0px 15px 20px 10px; 
	display:inline-block;
	vertical-align:top;
}
.recipeheader {
	FONT-SIZE: 22px; 
	color: #E6C667; 
	TEXT-TRANSFORM: lowercase; 
	margin: 0px 0px 10px 0px; 
	border-bottom:#E6C667 2px dotted;
	clear:left;
}
#recipecolb {
	WIDTH: 410px; 
	margin: 0px 10px 20px 15px;
	display:inline-block;
	vertical-align:top;
}
#recipecolb img{
	WIDTH: 410px;
    height:300px;
    border:0;
    clear:right;
    display:block;
    margin-botttom:100px;
}
#recipeedit {                           /*bottom of recipe section to print, edit, etc */
	margin: 0px 0px 0px 0px;
    padding: 10px 10px 0px 10px;
	display:inline-block;
    border-top: 2px solid #6A8E41;
    width:100%;
}

/*#############################    EDIT RECIPE    ##########################################*/

.editcontainer {
	
	display: flex;
	padding:10px;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;   /*might have to choose a different value based on browser support*/
	align-items: flex-start;
}

.editbuttonscontainer {
	
	display: flex;
	padding:10px;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-end;   /*might have to choose a different value based on browser support*/
	align-items: flex-start;
	align-content: flex-start;
}

.selector {
	height:25px;
	border-radius:6px;
}


/*old******************/
.cola {
	float: left;
	width: 240px;
	margin: 0px 0px 10px 0px;
}
.colb-recipes {
	float: right;
	width: 740px;
	margin: 0px 5px 10px 0px;
	color:#ffffff;
	background: #6A8E41;
	border-radius:8px;
}
.sectioncontainer {
	color: #A2BF80;
	background: #395A14;
	padding: 0px 0px 10px 0px;
	margin: 0px 0px 10px 0px;
	/* opacity:0.75; */
	border-radius:8px;
}
.sectionheader {
	background: #E6BA39;
	height:20px;
	color: #395A14;
	font-weight: bold;
	padding: 6px 5px 5px 15px;
	margin: 0px 0px 15px 0px;
	/* border-radius:8px; */
	text-align: left;
    font-size: 140%;

}


/*#############################    COLORS    ##########################################*/

.whiteonblack {
	background: #191919;
	color: #ffffff;
    padding: 5px 15px 5px 15px;
    height:35px;
	
}
.blackonwhite {
	background: #ffffff;
	color: #000000;
	text-align:left;
}
.white {
	color:#ffffff;
}
.secondary {
	color:#CC9900;
}
.red {
	color:#990000;
}
.green {
	color:#006600;
}
.clear {
	clear: both;
	margin: 0px;
	padding: 0px;
}

/*#############################    FORMS    ###########################################*/

input {
	border:none;
	height:25px;
	padding: 0px 0px 0px 4px;
	margin: 0px 0px 5px 0px;
	border-radius:6px;
}
fieldset {
	margin:0px 10px 0px 10px;
	padding:0px 0px 0px 0px;
}
label {
	margin:auto;
	padding:0px 0px 5px 0px;
}
textarea {
	border: 0px solid #856300; 
	margin:0px 0px 0px 0px; 
	padding:4px;
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif; 
	font-size: 12px;
	text-align:left;
	border-radius:6px;
	width:100%;
}
.radio {
	padding: 0px 0px 0px 0px;
	margin: auto;
    vertical-align: middle;
}
.button {
    margin: auto;
    text-decoration: none;
	height:35px;
	font-weight:bold;
	cursor:pointer;
    display: inline-block;
    text-align: center;
    color: #ffffff;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
input:focus, textarea:focus{
border: 0px solid #856300;
}
.button:active {
    /* When pressed, move it down 1px */
    position: relative;
    top: 1px;
}
.button-blue {
    background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
    background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
    
}
.button-blue:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );
    background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);
}
.button-blue-camera {
	width:50px;
    background-color:#4477a1;
    background-image: url(images/button_camera.png);
    background-size: 70% 70%;
    background-repeat: no-repeat;
    background-position: center;
}
.button-blue-camera:hover {
	width:50px;
    background-color:  #81a8cb;
    background-image: url(images/button_camera.png);
    background-size: 70% 70%;
    background-repeat: no-repeat;
    background-position: center;
}







/*#############################    LISTS    ###########################################*/

ul.arw {
	list-style-position: outside;
	margin: 0px;
	padding: 0px 0px 0px 0px;
	font-weight: normal;
	list-style-position:inside;
}
ul.arw li {
	margin: -1px;
	padding: 0px 0px 0px 10px;
	background-repeat: no-repeat;
	background-position: 0px 8px;
	text-transform: capitalize;
} 
	ul.arw li.favorite {
		color: red;
	}
	ul.arw li.good {
		color:yellow;
	} 
	ul.arw li.new {
		color:blue;
	}
	ul.arw li.meh {
		color:black;
	}
	ul.arw li.selected {
		color: #ffffff;
		font-weight: bold;
	}
.bolditem {
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
} 
ul.arw li a:hover{
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
}

/*#############################    MENU    ###########################################*/

#navigation {
  float: right;
  background-color: #CC9900;
  border-radius:8px;
  margin-top:3px;
}
#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0px;
}
/* Stack LI elements horizontally instead of the default vertical orientation */
#navigation li {
  float: left;
  border-right: 1px solid #395A14;
}
/* Turns the links into larger clickable boxes */
#navigation li a {
  display: block;
  padding: 4px 10px 5px 10px;
  text-decoration: none;
}
#navigation li.first{
  cursor: default;
  padding: 5px 10px 5px 10px;
}
#navigation li.last{
  cursor: default;
  padding: 5px 10px 5px 10px;
  border-right: 0px;
}
/* Turns the links into larger clickable boxes */
#navigation li a.selected {
  background-color: #CC9900;
  color: #ffffff;
}
/* Pseudo selector used for a usability aid, so you know when you can click */
#navigation li a:hover {
  background-color: #CC9900;
  color: #fff;
  text-decoration: none;
}