/* main elements of the table */
body
html, body
{
margin-bottom: 3em;
background-color: white;
padding: 2% 2% 2% 2%;
font-family: arial;
font-color: black;
font-size: medium;
}

p
{
padding: 0% 0% 0% 0%;
}

p.left
{ text-align: left;
padding: 0% 0% 0% 0%;

}
p.intro
{
font-family: arial;
font-color: black;
font-size: medium;

background-color: #66FFCC;
padding:4% 4% 4% 4%;
text-align: left;

}

p.half
{
line-height: 2em;
}

#left
{
background-color: #66FFCC;
position: relative;
division: block;
left: 0%;
width: 75%;
padding-top: 2%;
padding-bottom: 2%;
}

#right
{
position: relative;
division: block;
left: 25%;
width: 75%;

padding-top: 2%;
padding-bottom: 2%;
}

/* division */
div.intro
{

width: 100%;
clear: both;
}

div.left
{
position: inline;
width: 50%;
float: left;
}
div.right
{
position: inline;
width: 50%;
float: right;
}
div.rleft
{
width: 50%;
float: left;
}
div.clear
{
clear: both;
width: 100%;
border-top: solid #66FFCC 1em; 
padding-top: 1em;
}

/* anchors */

a{font-size: medium;
text-decoration: none;
color: white;}


a:link
{font-size: medium;
text-decoration: none;
color: white;}


 a:link:visited
{font-size: medium;
color: white;
text-decoration: none;
}

#main a 
{

font-family: arial;
color: black;
font-size: medium;
font-weight: 300;
}


#main a:link 
{font-family: arial;
font-size: medium;
color: black;
text-decoration: none;

font-weight: 300;
}

#main a:link visited
{
font-size: medium;
text-decoration: none;
color: red;
font-weight: 300;
}



 a:link:hover
{
background-color: black;
font-size: medium;
color: white;
text-decoration: none;
font-weight: 300;
}

#main a:link:hover
{
background-color: black;
font-size: medium;
color: white;
text-decoration: none;
font-weight: 300;
}
#main a:link:visited:hover
{
background-color: black;
font-size: medium;
color: white;
text-decoration: none;
font-weight: 300;
}

#nav a
{
display: block;
padding-left: 2em;
}
#nav a:link:hover
{
background-color: white;
font-size: medium;
color: red;
text-decoration: none;
font-weight: 300;
}
#nav a:visited:hover
{
background: white;
color: red;

}
p.right
{ text-align: right;
font-family: arial;
font-color: black;
font-size: medium;
padding: 0% 0% 0% 0%;

}

p.float_left
{
float: left;
font-family: arial;
font-color: black;
font-size: medium;
}
/* headings */
h1
{
text-align: center;

font-size: x-large;
}
h1.recipe
{
text-align: center;
color: white;
background: black;
font-size: x-large;
}

h2
{
font-size:  large;
font-family: Arial, courier, times new roman;
}
h2.recipe
{
clear: both;
background-color: #66FFCC;
 font-size:  large;
font-family: Arial, courier, times new roman;
}

h3.recipe
{
clear: both;
font-size: 1em;
color: white;
background: black;
font-size: 1em;
text-align: center;
margin-left: auto;
margin-right: auto;
}




/*
positioning elements
*/


#outset
{

position: relative
top: 0px;
left: 0px;
width: 100%;
}
#head
{
clear: both;
background-color: #66FFCC;
z-index: 3;
}

#nav
{
width: 30%;
padding-right: 2%;
height: 600em;
float: left;
background-color: #CC0000;
}

#nav li
{ 
line-height: 2em;
margin-bottom: 1.5em;
}
ul
{
list-style: none;
margin-left: 0px;
line-height: 1em;
}
#main
{
width: 62%;
padding-left: 6%;
float: left;
background-color: #ffffff;
font-family: arial;
font-color: black;
font-size: medium;

}

#nav a.item
{
display: block;
font-size: small;
padding-top: 10px;
padding-bottom: 10px;
}
div.recipe_right
{
display: block;
width: 100%;
}
#recipe_right img
{

float: right;
position: bottom;
}


#recipe_left
{
display: block;
border-bottom: solid 10px red;
}
#recipe_left img
{

float: left;
position: bottom;
}
#shrimp
{
display: block;
width: 400px;
height: 400px;
}
div.recipe
{
clear: both;
width: 100%;
border-top: solid #66FFCC 1em; 
padding-top: 1em;
}

div.ingredients
{
width: 25%;
padding-right: 5%;
float: left;
}
div.recipe_block
{
width: 70%;
float: left;
}
/* lists */

ul.ingredients
{
type: none;
line-height: 1em;
padding: 0em;
margin: 0em;

}
ul.ingredients li
{
line-height: 1em;
padding: 0em;
margin: 0em;
}
ol
{
font-family: arial;
font-color: black;
font-size: medium;
padding: 0% 0% 0% 0%;
}
ul li
{
line-height: 1em;
margin - top: 1em;
margin-bottom: 1em;}
ul.take_home
{
type: none;

}
ul.take_home li
{
display: inline;
float: left;
width: 25%;
height: 4em;
font-size: 1em;
line-height: 1.25em;
}

ul.recipe
{
type: none;
}
ul.recipe li
{
display: inline;
width: 12em;
float: left;
overflow: visible;
text-align: center;
background: white;
color: black;
font-size: 1em;}
ul.recipe li a hover
{
background: black;
color: white;
}
ul.recipe li  a:visited:hover
{
background: black;
color: white;
}

/* span elements */

#blacktext
{
 background-color: CCFF66
color: black;
text-decoration: underline;
}


/* span */
#underline
{
text-decoration: underline;
}
/* images */
img.clear
{
clear: both;
}

img.right
{
float: right;
margin-left: 4%;
margin-bottom: 4%;
}