/*****************************************************************************/
/** Styles for notes.														**/
  		
  		.blue {
  			width: 200px;
  			height: 192px;
  			background: url(../images/blue_note.gif) no-repeat;
  		}
		
  		.pink {
  			width: 212px;
  			height: 205px;
  			background: url(../images/pink_note.gif) no-repeat;
  		}
		
  		.white {
  			width: 181px;
  			height: 254px;
  			background: url(../images/white_note.gif) no-repeat;
  		}
		
  		.yellow {
  			width: 194px;
  			height: 178px;
  			background: url(../images/yellow_note.gif) no-repeat;
  		}

  		div.note .headline {
  			display: block;
  			position: absolute;
  			margin: 0;
  			padding: 0;
  			border: 0;
  			overflow: hidden;
  			
  			color: #000000;
  			
  			/* font-size: 12px;  made this variable, check below */
  			font-family: "Trebuchet MS", Verdana, sans-serif;
  			text-decoration: none;
  			
  			text-align: center;
  		}

  		div.note a.headline:link {
  			text-decoration: none;
  		}
  		
  		div.note a.headline:hover {
  			text-decoration: underline;
  		}
  		
  		div.note .date {
  			position: absolute;
			overflow: hidden;
  			font-size: 11px;
  			font-family: "Trebuchet MS", Verdana, sans-serif;
  			
  		}
  		
  		.yellow .headline {
  			top: 30px;
  			left: 22px;
			width: 138px;
			height: 115px;
  		}
  		
  		.yellow .date {
  			top: 150px;
  			left: 30px;
  			color: #AF9800;
  		}
  		
  		.white .headline {
  			top: 75px;
  			left: 24px;
			width: 135px;
			height: 135px;
  		}
  		
  		.white .date {
  			top: 220px;
  			left: 35px;
  			color: #999999;
  		}

  		.pink .headline {
  			top: 57px;
  			left: 32px;
			width: 152px;
			height: 115px;
  		}
  		
  		.pink .date {
  			top: 178px;
  			left: 80px;
  			color: #9F275F;
  		}
  		
  		.blue .headline {
  			top: 33px;
  			left: 23px;
			width: 152px;
			height: 120px;
  		}
  		
  		.blue .date {
  			top: 160px;
  			left: 75px;
  			color: #12495F;
  		}

		/*************************************/
		/** The full-size pages.			**/
		
		.page {
			position: relative; /* absolute;*/
  			width: 351px;
  			height: auto;
  			background: none;
  			
  			display: none;
  			
  			font-family: "Trebuchet MS", Tahoma, Verdana, sans-serif;
  			font-size: 12px;
  			
  			z-index: 6000;
		}
  		
  		.page_close {
  			display: block;
  			float: right;

  			width: 45px;
  			height: 19px;

			background: url(/images/button_close.gif);
  		}
  		
  		.page .date {
  			position: relative;
  			top: auto;
  			left: auto;
  			
  			font-weight: bold;
  			font-size: 11px;
  		}
  		
  		.page .body {
  			padding: 0.5em 1.0em;
  		}
  		
  		.page.blue .head {		/* Note that the multiple classes have to be declared like this,	*/
  			height: 31px;		/* because IE6 has some issues with cascade order.					*/
  			background: url(../images/blue_big_top.gif);
  		}
  		
  		.page.blue .foot {
  			height: 2px;
  			background: url(../images/blue_big_bottom.gif) no-repeat;
  		}
  		
  		.page.blue .body {
  			background: url(../images/blue_big_body.gif);  		
  		}

  		.page.white .head {
  			height: 105px;
  			background: url(../images/white_big_top.gif);
  		}
  		
  		.page.white .foot {
  			height: 2px;
  			background: url(../images/white_big_bottom.gif) no-repeat;
  		}
  		
  		.page.white .body {
  			background: url(../images/white_big_body.gif);  		
  		}

  		.page.pink .head {
  			height: 74px;
  			background: url(../images/pink_big_top.gif);
  		}
  		
  		.page.pink .foot {
  			height: 2px;
  			background: url(../images/pink_big_bottom.gif) no-repeat;
  		}
  		
  		.page.pink .body {
  			background: url(../images/pink_big_body.gif);  		
  		}

  		.page.yellow .head {
  			height: 2px;
  			background: url(../images/yellow_big_top.gif);
  		}
  		
  		.page.yellow .foot {
  			height: 2px;
  			background: url(../images/yellow_big_bottom.gif) no-repeat;
  		}
  		
  		.page.yellow .body {
  			background: url(../images/yellow_big_body.gif);  		
  		}
		
		.nav {
			position: relative;
			height: 40px;
		}
		
		.nav a {
			position: absolute;
			width: 64px;
			height: 26px;
		}
		
		.nav .reply {	background: url(../images/button_reply.gif);	}
		.nav .link {	background: url(../images/button_link.gif);		}
		.nav .email {	background: url(../images/button_email.gif);	}
		.nav .embed {	background: url(../images/button_embed.gif);	}
		
		.nav .email_form {
			display: none;
			position: absolute;
			width: 277px;
			height: 191px;
			background: url(/images/email_embed_popup_bg.gif);
		}
		
		.email_form iframe {
			margin-top: 0px;
			width: 260px;
			height: 180px;
			overflow: hidden;
		}

  		.nav a.popup_close {
  			position: relative;
  			display: block;
  			float: right;

  			width: 45px;
  			height: 19px;
			
			margin: -14px 6px 0px 0px;
			
			background: url(/images/button_close.gif);
  		}
  		
  		.nav .embed_form {
			display: none;
			position: absolute;
			width: 277px;
			height: 130px;
			background: url(/images/email_embed_popup_bg.gif) left bottom;
  		}
  		
  		.embed_form a.popup_close {
  			margin: 6px 8px 0px 0px;
  		}
  		
		.email_form input {
  			border: 1px solid #7F9DB9;
  			padding: 5px;
  			font-family: Tahoma, Verdana, sans-serif;
  			font-size: 10px;
  			margin: 0.75em 1.0em;
  			width: 245px;
		}
		
		.email_form p {
			margin: 0.75em 1.0em;
		}
		
		/*************************************/
		/** Variable length display thing.	**/
		
		.short {
			font-size: 18px;
		}

		.medium {
			font-size: 14px;
		}

		.long {
			font-size: 11px;
		}
		
		/*************************************/
		/** Thread view.  Less absolute.	**/

		#thread_view .page {
  			display: block;
  			position: static;
			
  			width: 351px;
  			margin: 30px auto;
			
  			background: none;
  			font-family: "Trebuchet MS", Tahoma, Verdana, sans-serif;
  			font-size: 12px;
  			
  			z-index: 1;
		}
  		
  		#thread_view .page_close {
  			display: none;
  		}

		/*************************************/
		/** About page.  Some tweaks.  		**/
		
		#about_page .page {
			display: block;
		}