/*general tag styles*/
/*pixels are used rather than ems and %s because two browsers displayed
significantly different text sizes when I used ems and %s.  I wasn't sure
how the word "same" would be interpreted for this assignment, so I went with
pixels for sizes, which for Safari and Opera seemed to render about the same */
/*latest changes which expanded right panel result in improper display on iphone. 
	furthermore, smaller screen does not result in scroll bars, but rather incorrect
	display in general.  Compare css to Head First suggestions for tri column */
html 
	{
		margin:0;
		padding:0;	
	}	
body 
	{ 
		font-size: 14px;
		$centerPanelSidePadding = 20;
$leftPanelSidePadding = 10;
$leftPanelWidth = 300;
$rightPanelWidth = 320;
		min-width: 940px;      /* 2x (LC fullwidth +
                            CC padding) + RC fullwidth */
        background:#C6DEEA;
	} 
p 
	{
		font-size: 14px;
		padding: 6px;
	}
h1 
	{
		font-size: 48px;
		text-align:left;
		padding-left:20px;
	}
	
h2 
	{
		font-size: 24px;
		/* padding-top:16px; */
		padding-bottom:16px;
		padding-left:3px;
	}
	
h2.hover
{
	font-size:12px;
	color:red;
}
h3
	{
		font-size: 22px;
		padding-top:16px;
		padding-bottom:16px;
	}

h3.vidTitle
	{
		font-size: 18px;
		font-weight:bold;
		padding-top:24px;
	}
	
h7
	{
		font-size: 0px;
		padding-top:0px;
		padding-bottom:0px;
	}
ul
	{
		margin-left:32px;
		margin-bottom:16px;
	}

li
	{
		list-style-type:square;
		list-style-position:outside;
		padding: 4px;
	}
	
table
	{
		caption-side:top;
		table-layout:fixed;
		border-collapse:collapse;
	}
caption
	{
		font-size:18px;
		margin-top:8px;
		margin-bottom:4px;
	}
th
	{
		text-align:center;
		font-weight:bold;
		border: 1px solid black;
		padding:2px;
		background-color:#627A84;
	}
td
	{
		border: 1px solid black;
		padding:2px;
		background-color:#C6DEEA;

	}

span.codeLine
	{
		font-family:courier;
		padding: 8px;
		font-size:120%;
	}

	
img
	{
		float:left;
		padding:8px;
	}
	
img.floatRight
{
	float:right;
}

/*unique elements*/
#bio 
	{
		font-size: 8px;
		border-style: solid;
		width:90%;
		position: relative;
		bottom:1%;
		margin-left:16px;
		margin-top:48px;
	}
	
/*classes of div */
/* much from http://www.alistapart.com/articles/holygrail/*/
#wrap
	{

		padding-left: 310px;   /* LC fullwidth */
		padding-right: 360px;  /* RC fullwidth + CC padding */
		background:#C6DEEA;
		overflow: hidden; /*from one true layout for same size columns */

  		
	}
#wrap .column 
	{
  		position: relative;
  		float: left;
  		/* from one true layout */
  		padding-bottom: 20010px;  /* X + padding-bottom */
		margin-bottom: -20000px;  /* X */
	}
	
#leftPanel
	{
		width: 300px;          /* LC width */
		padding: 0 10px;       /* LC padding */
		right: 360px;          /* LC fullwidth + CC padding 360 right now*/
		margin-left: -100%;
		background:#84AABD;
	}
	
#centerPanel
	{
		padding: 10px 20px;    /* CC padding */
		width: 100%; 
		background:#C6DEEA;
	}
	
#rightPanel
	{
		width: 320px;          /* RC width */
		padding: 0 10px;       /* RC padding */

		margin-right: -360px;  /* RC fullwidth + CC padding */
		background:#84AABD;
	}
	
#footer 
{
  clear: both;
}
div.intro 
	{
		position: relative;
		margin-right:25%;
		top:0%;
	}
span.bookTitle
	{
		font-style:italic;
	}
		
td.money
	{
		text-align:right;
	}
	
	
	/*- Menu Tabs G--------------------------- */

    #mainmenu {
      float:left;
      width:100%;
      background:;
      font-size:93%;
      line-height:normal;
      border-style: solid;
      }
    #mainmenu ul {
	margin:0;
	display:inline;
	padding:10px 10px 0 50px;
	list-style:none;
	text-align:center;

      }
    #mainmenu li {
      display:inline;
      margin:0;
      padding:0;
      text-align:center;
      }
      
	#mainmenu ul li.last 
	{
     	margin-right: 0;
 	}
 	
    #mainmenu a {
      float:left;
      background:url(images/tableftH.gif) no-repeat left top; /*C is green; 
      														E is marroon good for title bar too
      														H is Black*/
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #mainmenu a span {
      float:left;
      display:block;
      background:url(images/tabrightH.gif) no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }

a:hover {
float:left;
      display:block;
       background:url("images/tabrightD.gif") no-repeat right top;
        padding:5px 15px 4px 6px;
      color:#FFF;
      }