/**
 * TillotsonDesign.com Master Stylesheet
 * 
 * @version 1.0
 * @author Grace Pok (www.gracepok.com)
 * 
 * Color Theme:
 * 		Green: 	#cccc66
 * 		Green (for text) #999966
 * 		Red: 	#990000
 * 
 * Text Colors:
 * 	- Links:
 * 		Regular: black bold
 * 		hover: 990000 bold
 *  - Regular Text: #666633 YES   #996139 << TDA's choice   #836565 << mychoice2
 *  
 *  - Header Text:  Green #999966 bold
 * 
 * Basic structure:
 * 		Total width: 840px
 * 		sidebar: 140px (match the width of first 2 words of the logo)
 * 		content area: 700px
 * 		text area 530px
 * 		
 * 		Logo, Navigation, Contentwrap, and footer are given separate means of centering
 * 		due to the need for stretching bars.
 */


/* -------------------------
 * General Style
 * -------------------------
 */
body {
	font-family: Arial, Helvetica, Myriad, Tahoma, Geneva, Verdana, sans-serif;
	font-size: smaller;
	margin: 0;
	padding: 0;
	min-width: 840px;
	color: #666633;
}


p, h2, div.sectiontext {
	font-size: 0.95em;
	line-height: 1.6;
}

h1, h2 {
	text-transform: lowercase;
	color: #666633;
	margin: 0;
	padding: 0;
}
h1 {
	font-size: 1.2em;
}

#sidebar h2 {
	font-weight: normal;
}

#content ul {
	margin: 0 0 6px 16px;
	padding: 0;
	list-style-position: outside;
	line-height: 1.6;
}

a 			{ color: #999966; font-weight: bold; text-decoration: none; }
a:link 		{   }    /* unvisited link */
a:visited 	{   }  	/* visited link */
a:hover 	{ color: #990000}   /* mouse over link */
a:active 	{ color: #990000}   /* selected link */


#sidebar a {	color: #999966; }
#sidebar a:link 		{  }    /* unvisited link */
#sidebar a:visited 	{   }  	/* visited link */
#sidebar a:hover 	{ color: #990000}   /* mouse over link */
#sidebar a:active 	{ color: #990000}   /* selected link */


#content h2 a {	color: #666633; }
#content h2 a:link 		{  }    /* unvisited link */
#content h2 a:visited 	{   }  	/* visited link */
#content h2 a:hover 	{ color: #777}   /* mouse over link */
#content h2 a:active 	{ color: #777}   /* selected link */


/* --------------------------------
 * Header Area -- Logo + Navigation
 * --------------------------------
 */
#logodiv {
	background-color: #cccc66;
	/*padding-top: 30px; */
}
#logodiv div {
	width: 840px;
	margin: 0 auto;
}
#logodiv img {
	border: 0px;
}


#menudiv ul {
	list-style-type: none; 
	width: 840px;
	margin: 0 auto;
	padding: 0;
}

#menudiv ul li {
	padding: 6px 30px 6px 0px;;
	float: left;
}
#menudiv ul li.first {
	margin-left: 160px;
}
#menudiv ul li.last {
	float: right;
	padding-right: 0px;
}

/*override the text with graphics */
#menudiv ul li span {
	visibility: hidden;
	white-space: nowrap;
}
#menudiv ul li a { 
	background-position: 0px 0px; 
	background-repeat: no-repeat;
	overflow: hidden;
	text-decoration: none;
	display: block;
	height: 18px;
	color: #990000;
}
#menudiv ul li a:hover 	{ background-position: -100px 0px; }

a#nav_profile { background-image: url('../graphics/menu_profile.gif'); width: 45px;}
a#nav_proj { background-image: url('../graphics/menu_proj.gif'); width: 55px;}
a#nav_curproj { background-image: url('../graphics/menu_curproj.gif'); width: 95px;}
a#nav_awards { background-image: url('../graphics/menu_awards.gif'); width: 50px;}
a#nav_contact { background-image: url('../graphics/menu_contact.gif'); width: 50px;}
a#nav_home { background-image: url('../graphics/menu_home.gif'); width: 40px;}
#menudiv .breakline {
	clear: both;
}

#home_pg #menudiv ul li a#nav_home { background-image: none; display: none; }
/* make current page item bold */
#profile_pg #menudiv ul li a#nav_profile, #projects_pg #menudiv ul li a#nav_proj,
#curproj_pg #menudiv ul li a#nav_curproj, #awards_pg #menudiv ul li a#nav_awards,
#contact_pg #menudiv ul li a#nav_contact
{ 
	background-position: -100px 0px; 
}


/* ------------------------------
 * DIN-FONT text images for page titles
 * ------------------------------ */
h1#pagetitle {
	height: 23px;  /*match the replacement image height */
}
h1#pagetitle span {
	visibility: hidden;
}
/*
#profile_pg h1#pagetitle {	background: url('../graphics/title_profile.gif') no-repeat center left}
#projects_pg h1#pagetitle {	background: url('../graphics/title_projects.gif') no-repeat center left}
*/



/* ------------------------------
 * Body
 * ------------------------------ */
#contentwrap {  /* center on page */
	width: 840px;
	margin: 32px auto 10px auto;
}
#sidebar, #content {
	float: left;
}
#sidebar {
	width: 159px;  /* + padding = 163 */
	padding-left: 4px;
}
#content {
	width: 677px;
}
#content.textpage {
	width: 530px;
	text-align: justify;
}

/* ------------------------------
 * Footer
 * ------------------------------ */
#footer {
	padding-top: 140px;
}
#footer p {
	font-size: 0.8em;
	color: #999999;
	line-height: 1.4;
	margin: 0;
	padding-left: 163px;
}
#footer p a {
	color: #999999;
	font-weight: normal;
}
#footer p a:hover {
	color: #990000;
}


/* -----------------------
 * Home page specific
 * ------------------------ */
/*
#home_pg #contentwrap {
	width: 842px;
}
*/
#home_pg #content a {
	color: #777;
	font-weight: normal;
}
#home_pg #content a:hover {
	color: #990000;
}
div.homepgimg, div.homepgimg p {
	width:338px;
}

div.homepgimg {
	float: left;
	overflow: hidden;
}
div.homepgimg p {
	float: left;
	font-size: 0.8em;
	margin: 0; padding: 0;
	text-align: right;
}
div.homepgimg img {
	float: left;
	width:338px;
	height: 338px;
}
div.homepgimg#randimg2 img {
	border-left: 3px solid white;
}


/* -----------------------
 * Profile page specific
 * ------------------------ */

div.sectiontext {
	margin: 0 0 14px 0;
}
div.sectiontext p {
	margin: 0 0 6px 0;
}

.cvitem {
	margin: 0px 0px;
}
.cvitem a {
	cursor: pointer;
}

.cvitem .staffname {
	text-transform: lowercase;
}
.cvitem div { /* holds bio text that slides in/out */
	background-color: #999966;
	color: white;
	padding: 5px;
}
/* -----------------------
 * Current Projects Page
 * ------------------------ */
#curproj_pg #content ul li {  /** because of the 2nd line */
	margin-bottom: 6px;
}


/* -----------------------
 * Utility
 * ------------------------ */
.clear{
	padding: 0px;
	margin: 0px;
	border: 0px;
	font-size: 0px;
	display: block;
	clear: both;
	overflow: hidden;
	height: 0px;
}

/* crazy dance to have center aligned screen yet have forever expanding border to the right */
.breakline {
	height: 1px;
	background: white url('../graphics/halfgreenbar.gif') repeat-y top center;
	font-size: 0px;
}
.breakline div {
	width: 840px;
	margin: 0px auto;
	height: 1px;
	background: white url('../graphics/halfgreenbar.gif') repeat-y -2340px 0px;
}

.backtotop {
	font-size: 0.9em;
	padding-top: 1em;
}
.backtotop a {
	color: #999966;
}
.backtotop a:hover {
	color: #990000;
}