/*
****************************************************************
	File name:	project.css
	Description: Cascading Style Sheet for ISSD 17 DHTML Project	  
	Author:		Waiyee Lai - lai.waiyee.e@gmail.com
	History:
		Date		By			Reason
	Oct 03, 2007	Waiyee Lai	Modified for online portfolio
	Feb 24, 2007	Waiyee Lai	Modified for ISSD17 DHTML
				   		    
***************************************************************** 
*/

h1 {
	 text-align: center;
	 }

/*-------------  Project header div ----------------- */
#indexhead {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100px;
	background-color:#FF99FF;
	z-index:1;
}

/* ----------- Project content div --------------- */
#indexcont {
	/*
	position: absolute;
	top: 79px;
	left: 0px;
	*/
	width: 600px;
	/* the extra padding px will ADD to the width, meaning, can go over 100% */
	padding: 101px 150px 5em 20px; 
	/* The large number of top and bottom padding prevent the footer crashing in */
	background-color:#66FFCC;
	z-index: 3;
}

/*-------------- Project drop down list div ------------ */
#dropdown {
	position: absolute;
	top: 80px;
	left: 550px;
	padding: 1px 2px 5px 0px;
	z-index: 10;
	}

/* ------------ Project page demo menu div ------------*/
#menu {
	position: relative;
	margin:auto auto;
	top: 8px;
	left: 12px;
	width: auto;
	}

#menulink {
	position: absolute;
	top: 220px;
	left: 0px;
	height:auto;
	}
#showformlink {
	position: absolute;
	left: 22px;
	top: 250px;
	z-index:11;
	}
	
#hideformlink {
	position: absolute;
	left: 22px;
	top: 250px;
	visibility:hidden;
	z-index:12;
	}

#datepicker {
	position:: absolute;
	left:: 22px;
	top: 600px;
	z-index:13;
	}


/* ------------- Project page footer div ------------- */
#footer {
	position:absolute;
	left:0px;
	bottom:0px;
	width:100%;
	height: 30px;
	background-color:#66CC99;
	text-align: center;
	z-index:0;
}
html {
	height: 100%;
}

/* ------------- Project pages html body tag ------------- */
body {
	font-family:Arial, Helvetica, sans-serif;
	color: #6600CC;
	background-color:#FFFFCC;
	size: 12pt;
	height: 100%;
	}

/* ----------------  Main div of all project pages -----------*/
#mainbox {
	/* houses the header, content, footer div */
	position:relative;
	width:770px;
	padding: 0px;
	/* The order of these height is important to make it work*/
	height: auto !important;		 /* the footer div will stay at the bottom */
	height: 100%;
	min-height: 100%;				 /* set the min height of the main box */
	margin: 0px auto;
	border: 1px solid #000000;
	background-color: #66FFCC;
}

/* -------------- demo box div -----------------------------*/
#demodiv {
	position:absolute;
	width:300px;
	height:200px;
	top: 200px;
	left: 300px;
	background-color: #FFCCFF;
	border: 2px solid #ff6699;
	z-index:101;	/* this will put it on top of everything */
}

/* --------------- Demo box header text - p tag -------------*/
#demohead {
	text-decoration: underline;
	}

/* -------------- form div ----------------------------------*/
#clientform {
	position: absolute;
	top: 180px;
	left: 300px;
	border: 1px solid #ff99ff;
	visibility: hidden;
	height: auto;
	z-index: 100;
}

/* -------------- cookie display form div ----------------------------------*/
#cookieform {
	position: absolute;
	margin: 30px 0px 0px 100px;
	height: auto;
	z-index: 100;
}


/* -------------  Date and time displaying div ------------ */
#datetime {
	position: absolute;
	top: 25px;
	left: 550px;
	text-align: left;
	font-size: 12px;
	z-index: 100;
	}
/* ------------- A text box -------------------------------*/
#peekaboo {
	position:absolute;
	border:thin;
	background-color:#FFFFFF;
	width:150px;
	height:100px;
	top:300px;
	left:300px;
	}

/* -------  Anything under are not for this project -------- */











/*
body {
	font-family: Franklin Gothic Demi, Verdana, Cooper Black;
	color:			#009;
	background-color: #ff9900;
	size: 12pt; 				
	height: 100%; /* the footer won't stay at the bottom without this!? */

   }
*/  

/* ---------------    body div ------------------------ */
#bodydiv {
	position: absolute;
	background-color: #ffffcc;
	width:		97%;
	left: 14px;
	top: 13px;
	margin: 0px auto;
/*
	height: auto !important;
*/
	height: 80%;
/*
	height: 100%;

	min-height: 100%;
*/
	z-index: 1;
	}
/* -------------------------------------------------------- */
/*			  Tables 			    */
/* -------------------------------------------------------- */
/*  apply to all the tables				    */
/*
table
   {
	width:			97%;
	font-family:		"Franklin Gothic Demi", Verdana, "Cooper Black";
	color:			#009;
	background-color:	#ffc;
	margin-left:		10px;
   }
*/

/* ---------  Logo table ------------------------------------
#headtable
   {
	margin-top:			10px;
   }
*//* ---------  header div ------------------------------------*/
#headtable {
	position: absolute;
	width: 100%;
	margin-top:			10px;
	height: 120px;
	left: 0px;
	top: 0px;
	background-color: #ffffcc;
	padding-bottom: 20px;
	z-index: 10;
	}
/* ------------- sub content div -------------------- */
#subcont {
	position: absolute;
	top: 201px;
	left: 171px;
	width: 60%;
	height: 100%;
	/* min-height: 100%; */
	padding: 5px 20px 1em 20px;
		vertical-align:		top;
	/* the extra padding px will ADD to the width, meaning, can go over 100% */
	/* The large number of top and bottom padding prevent the footer crashing in */
	z-index: 10;
}
/* ------------   Left side content div ------------------- */
#leftdiv {
	position: absolute;
	top: 201px;
	left: 0px;
	width: 20%;
	height: 100%;
	
	padding: 10px 2em 5px 0px;
  
	background-color:#369;
	vertical-align:		top;
	text-align:		center;
	margin: 5px 0px 5px 0px;
	z-index: 10;
}
/* ------------   Right side content div ------------------- */
#rightdiv {
	position: absolute;
	top: 201px;
	right: 0px;
	width: 20%;
	height: 100%;

	padding: 10px 0px 5px 10px;

	margin: 5px 0px 5px 0px;
	background-color:#369;
	vertical-align:		bottom;
	text-align:		center; 
	z-index: 10;
}



/* --------------------------------------------------------- */
/*         	Table cells				     */
/*---------------------------------------------------------- */
#logocel
   {
	padding:		10px 0px 0px 5px;
   }

/* -------- tab div --------------------------------*/

#navbar {
	position: absolute;
	top: 151px;
	left: 0px;
	width: 100%;
	height: 70px;
	/*
	padding: 20px 0px 2em 0px;
	*/
	background-color: #ffffcc;
	z-index: 11;
	}
/* --------- content div --------------------------- */
#pagebody {
	position: absolute;
	top: 201px;
	left: 0px;
	width: 100%;
/*
	height: auto;
*/
	height: 300px;
/*
	min-height: 80%;
*/
	background-color: #ffffcc;
	padding: 5px 0px 5px 0px;
	z-index: 11;
	}	

/* ------------  page tabs/links table ---------------------  */
#tabtable {
	width: 100%;
	}

#conttable {
	width: 100%;
	}
	
	
#tabtable td
   {
	width:			20%;
	text-align:		center;
	border-style:		groove;
	border-width:		2px 8px 2px 1px; 
	border-color:		#CCC;
	background-color:	#CC9;
   } 


/* ------------  navigation bar class ---------------------  */
.tabclass {
		width:			20%;
		top: 151px;
		heigth: 50px;
		text-align:		center;
		border-style:		groove;
		border-width:		2px 8px 2px 1px; 
		border-color:		#CCC;
		background-color:	#CC9;
	} 

.nav {
		width:			20%;
		top: 151px;
		heigth: 50px;
		text-align:		center;
		border-style:		groove;
		border-width:		2px 8px 2px 1px; 
		border-color:		#CCC;
		background-color:	#CC9;
	} 
	

/*------------------ logo div ------------------------*/
#logodiv {
		 position: absolute;
		 left: 0px;
		 top: 0px;
		 width: 65%;
		 padding: 10px 2em;
		 }
/*---- header text div ------------------------------*/
#headtextdiv {
		 position: absolute;
		 right: 0px;
		 top: 0px;
		 width: 25%;
		 padding: 10px 2em 10px 0px;
		 margin-left: 5px;
		 font-size: 2em;
		 }
	
/* --------  logo text in the head table, using td ------------ */
#logotext
   {
	font-size:		2em;
	color:			#009;
	width:			193px;
	vertical-align:		bottom;
	text-align:		center;
   }
/*-------  logo text in the head table, using div ------------*/
#logotextdiv {
	position:absolute;
	width: 193 px;
	font: 2em;
	left: 500px;
	top: 48px;
	padding:		10px 0px 0px 5px;
	}
/*--------   footer div -----------------------------------*/
#footdiv {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 40px;
	padding: 20px 0px 5px 0px;
	background-color: #FFFFCC;
	color:			#009;
	text-align: center;
	z-index: 11px;
	}

/* -----------  left picture box ---------------------------- */
#leftimage
   {
	width:			170px;
	background-color:	#369;
	vertical-align:		top;
	padding-top:		10px;
	text-align:		center;
   }
/* -----------  right picture box --------------------------- */
#rightimage
   {
	width:			170px;
	background-color:	#369;
	vertical-align:		bottom;
	padding-bottom:		10px;
	text-align:		center;
   }

/* ---------- content td of content table ------------------ */
#content
   {
	Vertical-align:		top;
	padding:		5px;
   }

/* -----------  Contact info table cell  -------------------- */
#contactcel
   {
	margin:			5%;
	padding-left:		50px;
   }

#footer
   {
	vertical-align:		center;
	padding-bottom:		5px;
   }

#activetab
   {
	background-color:	#ffc;
	font-size:		1.2em;
	border-width:		4px 8px 0px 8px;
	border-color:		#009;
   }

td.activetab
   {
	background-color:	#ffc;
	font-size:		1.2em;
	border-width:		4px 8px 0px 8px; 
	border-color:		#009;
   }

li
   {
	padding-bottom:		5px;
   }

/* ------------- div -------------------------------------- */
#toplink
   {
	text-align:		right;
   }

#breadcrumb {
	vertical-align:		bottom;
   }

#loginform {
		position: relative;	 /* have to be relative when placed inside */
		 						/* a td to push the td height to include the div */
		height: auto;
	   margin:	20px;
	   border:	groove 2px blue;
	   padding:	20px;
	}



/* ---------------------------------------------------------- */
/*					Links					  */
/* ---------------------------------------------------------- */

a:link
   {
	color: 			#c93;
   }
a:visited
   {
	color: 			#300;
   }
a:focus,
a:hover
   {	font-family:		inherit;
   }
a:active
   {
	color:			#f90;
   }