body {
  text-align:center;
  font-family:Verdana;
  font-size:10pt;
}

#container {
  width:777;
  margin: 0 auto;
}

#banner {
  position:relative;
  height:80px;
  text-align:left;
  padding-left:5px;
  padding-top:5px;
}

#subBanner {

  width: 350px;
  left: 0px;
  position:relative;
  font-size:20;
  padding-top:23;
  display:inline;

}

#topStrip {
  text-align:left;
  vertical-align:bottom;
  padding-left:50;
  padding-top:3px;
  color:white;
  font-weight:bold;
  background:#006699;
  height:42px;
  border-top:5px solid #003366;
}


#wholeBody {
  background-color:#99ccff;
  padding:10px;
}

#leftBody {  
  float:left;
  padding-right:10px;
  text-align:left;
}

#middleBody {
  width:424px;
  background-color:white;
  float:left;
  min-height: 470px;
  border-width: 2px;
  border-style: solid;
  border-color: #003366;
}

.minHeight {
  height:464;
}

.feedBack {
  padding-bottom:10px;
}

#rightBody {
  float:left;
  padding-left:10px;
  text-align:left;
}

.blueBox {
  border:1px solid #B8CEF0;

  background-color:

  text-align: left;

  position:relative;
}

.darkBack {
  background-color:#ececec;
}

.blackorwhite {
font-size: 10pt;
text-align: left;
padding-left:30px;
padding-right:30px;
position:relative;
color:black;
}

.lightBack {
  background-color:#ffffff;
}

.selectedBack {
  background-color:#ffff99;
}

.ingTabTable {

border-collapse: collapse;
width: 100%;
height: 1;
vertical-align: top;
padding: 0;
margin: 0;
background-color:yellow;

}

.ingTabSelected {

font: bold 14pt courier;
width: 28%;
padding: 12 5 12 12;
border-right: 2px solid black;
background:url(/pages/images/tabBlack.gif) 0 0 no-repeat blue;
color: white;
text-align: center;
cursor: pointer;

}

.ingTabDeselected {

font: bold 14pt courier;
width: 28%;
padding: 12 5 12 12;
border-right: 2px solid black;
background:url(/pages/images/tabBlackDeselected.gif) 0 0 no-repeat #666666;
color: #AAAAAA;
text-align: center;
cursor: pointer;

}

.list {

width:150;
background:white;
font-weight:bold;

}

.ingList {
border: 1px solid black;
overflow: auto;
height: 300px;
width: 200px;
background:white;
cursor: pointer;
    text-align: left;
}

.ingredientTable {

background:blue;
border:12px outset darkgray;
width:700;
height:400px;

}

.ingInstruct {

font-size: 10pt;
color:white;
width:100%;

}

.ingHeading {

font-size: 12pt;
color:white;
font-weight:bold;
text-align:center;

}


#tableTop {
  width:150px;
  text-align:center;
  height:25px;
  padding-top:2px;
  background: #006699;
  /*background: #003366;*/
  color: #ffffff;
  font-weight:bold;
  border-bottom: 1px solid black;
}

#mediumTable {
  position:relative;
  width:150px;
  background: #ffffff;
  border: 2px solid #000000;
}

#homeTable {
  float:left;
  height:150px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  min-height:130px;
}

#homeTableTop {
  width:100%;
  text-align:center;
  height:25px;
  padding-top:2px;
  background: url(/pages/images/gimmegrub/images/topBar.gif);
  color: #ffffff;
  font-weight:bold;
  border-bottom: 1px solid #e0e0e0;
}

#bottomDiv {
  text-align:center;
  border-top-width:5px;
  border-top-style: solid;
  border-top-color: #006699;
}

a.leftLink {
  font-size:12px;
  text-decoration:none;
  /*color:black;*/
  vertical-align:top;         
}

a.leftLink:hover {
  font-size:12px;
  text-decoration:underline;
  color:#336699;
}

a.botLinks:visited {
        font-family: Ariel , sans-serif;
	font-size:10px;
	font-weight:bold;
	color: #999999;
	text-decoration:none;
	}

a.botLinks:active {
        font-family: Ariel , sans-serif;
	font-size:10px;
	font-weight:bold;
	color: #999999;
	text-decoration:none;
	}

a.botLinks:link {
        font-family: Ariel , sans-serif;
	font-size:10px;
	font-weight:bold;
	color: #999999;
	text-decoration:none;
	}

a.botLinks:hover {
        font-family: Ariel , sans-serif;
	font-size:10px;
	font-weight:bold;
	color: #000000;
	text-decoration:underline;
	}

.bottom {
        font-family: Ariel , sans-serif;
	font-size:10px;
	font-weight:bold;
	color: #999999;
	text-decoration:none;
}

/* define height and width of scrollable area. Add 16px to width for scrollbar          */
div.tableContainer {
	clear: both;
	border: 1px solid #e0e0e0;
	/*height: 360px;*/
	overflow: auto;
	/*width: 480px;*/
}

/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer {
	overflow: hidden;
	//width: 480px
}

/* define width of table. IE browsers only                 */
div.tableContainer table {
	float: left;
	width: 100%
}

/* define width of table. Add 16px to width for scrollbar.           */
/* All other non-IE browsers.                                        */
html>body div.tableContainer table {
	margin: 0 -16px 0 0
}

/* set table header to a fixed position. WinIE 6.x only                                       */
/* In WinIE 6.x, any element with a position property set to relative and is a child of       */
/* an element that has an overflow property set, the relative value translates into fixed.    */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
	position: relative
}

/* set THEAD element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
html>body thead.fixedHeader tr {
	display: block
}

/* make the TH elements pretty */
thead.fixedHeader th {
	background: url(/pages/images/gimmegrub/images/topBar.gif);
	border-left: 1px solid #e0e0e0;
	border-right: 1px solid #e0e0e0;
	border-top: 1px solid #e0e0e0;
	padding: 4px 3px;
	text-align: left
}

/* make the A elements pretty. makes for nice clickable headers                */
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
	color: #FFF;
	display: block;
	text-decoration: none;
	width: 100%
}

/* make the A elements pretty. makes for nice clickable headers                */
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x   */
thead.fixedHeader a:hover {
	color: #FFF;
	display: block;
	text-decoration: underline;
	width: 100%
}

/* define the table content to be scrollable                                              */
/* set TBODY element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto                     */
html>body tbody.scrollContent {
	display: block;
	height: 462px;
	overflow: auto;
	width: 100%
}

/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                             */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #e0e0e0;
	border-top: 1px solid #999999;
	padding: 2px 3px 3px 4px
}

tbody.scrollContent tr.alternateRow td {
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #e0e0e0;
	border-top: 1px solid #e0e0e0;
	padding: 2px 3px 3px 4px
}

/* define width of TH elements: 1st, 2nd, and 3rd respectively.          */
/* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
html>body thead.fixedHeader th {
	width: 200px
}

html>body thead.fixedHeader th + th {
	width: 240px
}

html>body thead.fixedHeader th + th + th {
	width: 316px
}

/* define width of TD elements: 1st, 2nd, and 3rd respectively.          */
/* All other non-IE browsers.                                            */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
html>body tbody.scrollContent td {
	width: 200px
}

html>body tbody.scrollContent td + td {
	width: 240px
}

html>body tbody.scrollContent td + td + td {
	width: 300px
}


/* define width of TH elements: 1st, 2nd, and 3rd respectively.      */
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
/* Add 16px to last TH for scrollbar padding                         */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors    */
head:first-child+body thead[class].fixedHeader th {
	width: 200px
}

head:first-child+body thead[class].fixedHeader th + th {
	width: 240px
}

head:first-child+body thead[class].fixedHeader th + th + th {
	border-right: none;
	padding: 4px 4px 4px 3px;
	width: 316px
}

/* define width of TH elements: 1st, 2nd, and 3rd respectively.      */
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
/* Add 16px to last TH for scrollbar padding                         */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors    */
head:first-child+body tbody[class].scrollContent td {
	width: 200px
}

head:first-child+body tbody[class].scrollContent td + td {
	width: 240px
}

head:first-child+body tbody[class].scrollContent td + td + td {
	border-right: none;
	padding: 2px 4px 2px 3px;
	width: 300px
}
/*End scrolling table css info*/
