/*  <style>  */
@font-face {
    font-family: 'Tangerine';
    src: url('Tangerine_Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: 'Poiret One';
  src: url('PoiretOne-Regular.eot');
  src: url('PoiretOne-Regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('PoiretOne-Regular-webfont.woff') format('woff'),
     url('PoiretOne-Regular.ttf') format('truetype'),
     url('PoiretOne-Regular-webfont.svg#cardoregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
td {
  font-family: Arial; 
  font-size: 25px;
}
td.topAlign {
   vertical-align: text-top;
}
th {font-family: Arial; font-size: 30px;}
thead {font-family: Arial; font-size: 30px;}
/* Note: font-style is only normal, italic, and oblique, so if wanting normal, probably don't need it */
/*       font-weight is like bold or with a value from 100 to 900, round is better, and diffs between like 150 and 200 are minor */
body{
  font-family:Arial, Helvetica, sans-serif;
	color:#8a8a8a;
	min-width:980px;
	background:url(body.png) center top repeat #fff;
	font-size:26px;
	line-height:30px;
}

div.label_characteristics {
  font-size:1.25em;
  font-weight:600;
  font-style:bold;
  font-family:'Poiret One',cursive;
  line-height:0.95em;
  color: #292929;
}

span.label_characteristics2 {
  font-size:2.00em;
  font-weight:600;
  font-style:bold;
  font-family:'Tangerine',cursive;
  line-height:0.95em;
  color: #292929;
}
/* ----------------CSS for main home page menu ----------------------------*/
div.homepageheader {
	margin-left: 75px;
	margin-top: 50px;
}
div.indentright {
	margin-left: 75px;
}
span.recipe_hometitle{
  font-size:2.00em;
  color: #292929;
  font-weight:800;
  font-style:bold;
  font-family: 'Poiret One',serif;
  
}

span.recipe_homesubtitle {
  font-size:1.25em;
  font-weight:600;
  font-style:normal;
  font-family:'Poiret One',cursive;
  color: #292929;
}
/* ------------------------------------ */
/* -------------------Main Box for Everything ---------------------------------- */
div.biggest_container {
	top: 35px;  /* added for category bit */
	min-width: 60em;
    background-color: #ECE8E8;
    width: 90%;
    border: 15px solid gray;
    padding: 15px;
    margin: auto;
	position: relative;   /* this was static  */
    text-align: left;
}
/* ---------------------------------------------------------------------------- */

/* -------------------Recipe Header and Subheader ---------------------------------- */
div.recipe_header_container {
	margin: auto;
	position: relative;
	
}
span.recipe_title{
  font-size:2.00em;
  color:#606060; /*#8a8a8a;*/
  font-weight:800;
  font-style:bold;
  font-family: 'Poiret One',serif;
}

span.recipe_subtitle {
  font-size:1.25em;
  font-weight:600;
  font-style:normal;
  font-family:'Poiret One',cursive;
  line-height:0.95em;
}
div.homeicon {
	position:absolute;
	top:0;
	right:0;
}
/* ----------------------------------------------------------------------- */

/* -----------------Middle Section for Image and Ingredients --------------------- */
div.recipe_middle_container {
	margin: auto;
	position: relative;
	padding: 2px;
}

/* the img is the recipe's left container of the two in the middle section */
img.recipe {
    /* margin: 0 0 10px 10px;  */
	float: left; 
	width:400px;
	height: 280px;
	padding: 1%;
	margin-right: 1%;
}

/* --------- Ingredients Section ---------------- */
div.ingredients_container {
   	position: relative;
	padding: 5px;
    margin: 5px;
	width:95%;
}
div.ingredients_header {
  font-size:1.00em;
  color: #606060;    /*#8a8a8a;  */
  font-weight:900;
  font-style: bold;
  font-family:'Poiret One',cursive;
  position: relative;
}

ul.square_bullets {
    list-style-type: square;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:light gray;
	font-size:18px;
	line-height:28px;
	margin-bottom:20px;
  overflow:hidden;
}
li.ingreds {
	border-bottom:1px solid #ccc;     /* This adds horizontal gridlines between list items */
	float:left;
	display:inline;
}

/* These pound-signs can be addressed using the id="xxxx" structure in the HTML  */
#double li  { width:50%;}   
#triple li  { width:33.333%; } 
#quad li    { width:25%; } 
#six li     { width:16.666%; }   
/* ----------------------------------------------------------------------- */

/* --------------------------Directions Section ---------------------------------------- */
div.directions_container {
	position: relative;
	float: left;
	width: 98%;
	border-width: 0;
    padding: 5px;
	margin: 5px;
    /*margin: 0px 0px 10px 180px;   top, right, bottom, left  */
	
}
/*  div.directions_text {  
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:light gray;
	font-size:18px;
	line-height:24px;
	text-align: justify;
	position: relative;
}  */
ul.list_for_directions {
	/* list-style-image: url('square.jpg');  */
	list-style-position:inside;
	list-style-type:square; 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:light gray;
	font-size:18px;
	line-height:28px;
	position: relative;
}

li.dir {
	list-style-type: disc;
    list-style-position: inside;  
    text-indent: -1.5em;
    padding-left: 1em;
}
/*  supposedly for hanging indents in ordered lists: 
ol {
    counter-reset: foo;
    display: table;
}

ol > li {
    counter-increment: foo;
    display: table-row;
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell; 
    text-align: right;
}  */

/* -------------------------Notes Section---------------------------------------------- */
div.notes_container {
	position: relative;
	float: left;
	border-width: 1px;
    padding: 5px;
    margin: 20px 0px 20px 5px;
	width:98%;	
}
div.notes_text {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:light gray;
	font-size:18px;
	line-height:24px;
	text-align: justify;
}
/* ----------------------------------------------------------------------- */

/* ------------------------- Source/Yield/ReadyIn Section---------------------------------------------- */
div.stats_container {
	clear: left;
	width:100%;
	padding: 5px;
	text-align: center;
}
div.stats_container2 {
	clear: left;
	width:100%;
	padding: 0px;
	text-align: center;
}
/* ----------------------------------------------------------------------- */

/* ------------------------- Category Section---------------------------------------------- */
/*div.category_section {
	position: absolute;
    top: 23px;
	right: 330px;
    width: 250px;
    height: 35px;
	border: 3px solid #8AC007;
	text-align: center;
} */
div.category_section {
	position: absolute;
    top: -48px;
	/* bottom: 0px; */
    right: 20px;
    width: 250px;
    height: 35px;
    border: 3px solid #8AC007;
	text-align: center;
	border-radius: 50px 50px 5px 5px;
}
/* ----------------------------------------------------------------------- */

/* To see the red boxes around every element; may help in positioning them:  
* {
   border: 1px solid red !important;  
} */
 
/*   </style>  */