@charset "UTF-8";
/* CSS Document */



/*
-----------------------------------------------
Japanese Localized Test CSS Style Sheet
Author:   Toshi Higa
Date:     3 April 2009
----------------------------------------------- */

body {
	margin:0;
	padding:0;
	/*font-family:Georgia, "Times New Roman", Times, serif;*/
	
	/*font-family:Georgia, "Times New Roman", Times, serif; */
	/*font-family:Verdana, Geneva, sans-serif;*/
	font-family:Century, "Century Gothic", serif;  /* for headers Century is used in Anu's original MS Word file/*/
	/*font-size:0.8em; */ /* originally used */
 	font-size:0.9em;
	font-size:1.0em;  /* Using larger font size for Century */
	line-height:1.35;
	line-height:1.40;
	color:#191919; /* 10% gray */
	}


/* =Page Layout 
----------------------------------------------- */

#wrapper {
	min-width:950px; /* I am simply chooing the min-width so that navi does not show in two lines. It seems as I add more navi, the min-width keep growing so it has to stop somewhere. min-width:400px does not show hori scorll bar on Firefox on Mac*/
	max-width:1200px;
	margin-left:auto;
	margin-right:auto;
	border:1px solid #999;
	border-top:none;
	border-bottom:none;
	
}
#index-page #wrapper {
	/* use larger min-width for index page to accomodate near equal width for two columns */
	min-width:800px;
}
#masthead {
	position:relative; /* use relative position since it conatins navi that is absolutely positioned */
	height:190px;  
	background-image:url(../images/masthead.jpg);
	background-repeat:no-repeat;
	background-position:left top;	
}
#footer {
	position:relative; /* use relative position since it conatins navi that is absolutely positioned */
	height:150px;
	background-image:url(../images/footer.jpg);
	background-repeat:no-repeat;
	background-position:left top;
}

#frame-top {
	min-height:100px; /* min-height needs to be specified; otherwise IE7 does not show the bg image. IE6 and Firefox do not have this problem.  min-height=1px works as well. */
	background-image:url(../images/frame-top.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}
#frame-bottom
{
	min-height:150px; /* min-height needs to be specified; otherwise IE7 does not show the bg image. IE6 and Firefox do not have this problem.  min-height=1px works as well. */
	background-image:url(../images/frame-bottom.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
}
#container {
	margin-left:20px;
	margin-right:20px;
	background-color:#ddd;
	min-height:250px;
}





/* =pageTop =pageTopOuter =pageBottom =pageBottomOuter =#pageMiddle
----------------------------------------------- */

#pageTopOuter {
	border:1px solid #5c5a66; /* light grey */
	border-top:none;
	background-color:#fff;
}
#pageBottomOuter {
	border:1px solid #5c5a66; /* light grey */
	border-bottom:none;
	background-color:#fff;
}
/* #content-frame provide white bg content area sorrpunded by light grey frame (defined by #container) in the page */
/* .single-blog-entry-wrapper does same thing but each blog entry is wrapped by it so it's class not id. */
/*  Be careful not to combine #content-frame with .single-blog-entry-wrapper in blog page. */
#content-frame, .single-blog-entry-wrapper { /* Separate each blog entry with different bg color and border*/
	margin:10px 2px 20px 2px;
	padding:1px;
	border:1px solid #bbb; /* added border gives defined look for separation*/
	background-color:#fff;
}



#pageTop {
	height:69px; /* height of bg-image needs to be declared */
	position:relative; /* position of pageTop needs to be specified as relative since submenu tag uses position-absolute */
	font-family:"Trebuchet MS",Verdana,sans-serif;
	/*font-family:Century, "Century Gothic", serif;  /* for headers Century is used in Anu's original MS Word file/*/
	margin:0 0 2px 0;
	padding:0;  /* padding needs to be 0; otherwise, unwantred extra space is created around bg-image. */
	color:#fff;
	border:1px solid #5c5a66; /* light grey */
	border-right:none;
	border-left:none;
	background:url(../images/pageTop.jpg) top left no-repeat;
	/*background-color:#5c5a66; /* light grey */ /* If image is not used for bg, bg color is used. */
}
#pageBottom {
	height:57px; /* height of bg-image needs to be declared */
	font-family:"Trebuchet MS",Verdana,sans-serif;
	font-size:1.1em;
	margin:2px 0 0 0;
	padding:0;  /* padding needs to be 0; otherwise, unwantred extra space is created around bg-image. */
	color:#ddd;
	border:1px solid #5c5a66; /* light grey */
	border-right:none;
	border-left:none;
	background:url(../images/pageBottom.jpg) bottom left no-repeat;
	/*background-color:#5c5a66; /* light grey */ /* If image is not used for bg, bg color is used. */	
}

/* this div containes page content between #pageTopOuter and #pageBottomOuter */
/* to give light color left and right border. #pageTopOuter and #pageBottomOuter */
/* will have dark gray colored left and right border */
/* padding-top and padding-bottom: 1px is needed to work around margin collapse that */
/* introduce unwanted margin and break the border at the top and bottom of #content */
#pageMiddle {
	margin:0;
	padding:1px 5px 1px 5px; /* */
	border:1px solid #5c5a66; /* light grey */
	border-top:none;
	border-bottom:none;
}



/* =Links
----------------------------------------------- */
/* link */
a { 
	text-decoration:none;
	color:#3366FF;
	border-bottom:2px dotted #3366FF;
	}
a:hover {
	color:#FF6600;
	border-bottom:2px dotted #FF6600;
}	

a:link {
	/*color:#FF6600;*/
}
a:visited {
	/*color:#FF6600;*/
}
a:hover {
	/*color:#3366FF;*/
}
a:active {
}


/* =Branding
----------------------------------------------- */
h1#branding {
	position:absolute;
	display:block;
	/*background-color:#999;*/
	top:12px;
	left:50px;
	height:30px;
	/*color:#CCC;/*292d35*/
	font-family:Verdana, Arial, Helvetica, sans-serif; 

	color:#666a76;/*mid blue grey to match sky color of bg image*/
	margin:0;
	padding:5px;
		
	/*border:dotted 1px #2B271E;*/
}
h1#branding a{
	display:block;
	/*color:#CCC;*/
	color:#666a76;/*mid blue grey to match sky color of bg image*/
	border:none;
	text-decoration:none;
}
h1#branding a:hover {
	border:none;
	text-decoration:none;
	/*border-bottom:dotted 1px #ccc;*/
	border-bottom:dotted 1px #666a76; /*mid blue grey to match sky color of bg image*/
}



/* =Nav
----------------------------------------------- */

/***  Navigation menu for overall page located in masthead   ****/
ul#navi-site {
	position:absolute;
	top:163px; /* original position */
	top:161px; /* move up the location so that the text in the menu bar stays in the middle */
	width:100%; /* setting width:100% makes ul behave correcrtly in IE6 */
	text-align:center; /* width:100% and text-align:center put the navi in center. It does not need right/left position nor margin-left/right: auto. */
	list-style-type:none;
	margin:0;
	padding:0;
	font-family:"Lucida Console", Monaco, monospace; /* site original */
	/*font-family:"Trebuchet MS",Verdana,sans-serif; /* This font is used in h1 */
	/*font-family:Century, "Century Gothic", serif;  /* Anu prefers this font*/
	/*color:#444; /* color for '|' */
	color:#bbb; /* color for '|' */
}
ul#navi-site a {
	font-size:14px;
	font-weight:bold;
	text-decoration:none;
	/*color:#444;*/
	color:#bbb;
	border:none;
}
ul#navi-site a:hover,  ul#navi-site .tool a:hover{
	color:#FF6600;
	border:none;
	text-decoration:underline;
}
ul#navi-site li, ul#navi-site li.tool {
	display:inline;
	padding-left:0;
	padding-right:0;
	margin-left:-1px;
	margin-right:-1px;
	vertical-align: middle;
	letter-spacing:-0.7px;
}

ul#navi-site .tool a {
	text-decoration:none;
	color:#3366FF;
	border:none;
}


/***  Secondary mavigation menu that locates in pageTop tag (page title) ****/
ul#submenu {
	position:absolute; /* parent tag pafeTop uses position: relative */ 
	top:48px;
	width:100%; /* setting width:100% makes ul behave correcrtly in IE6 */
	text-align:center; /* width:100% and text-align:center put the navi in center. It does not need right/left position nor margin-left/right: auto. */
	list-style-type:none;
	margin:0;
	padding:0;
		/*font-family:"Lucida Console", Monaco, monospace;*/
	font-family:Verdana;
	color:#ddd; /* color for '|' */

}
ul#submenu a {
	font-size:15px;
	font-weight:normal;
	font-weight:bold;
	text-decoration:none;

	color:#ddd;
	border:none;
}
ul#submenu a:hover,  ul#submenu .tool a:hover{
	color:#FF6600;
	border:none;
	text-decoration:underline;
}
ul#submenu li, ul#submenu li.tool {
	display:inline;
	padding-left:0;
	padding-right:0;
	margin-left:-1px;
	margin-right:-1px;
	vertical-align: middle;
	letter-spacing:-0.7px;
}

ul#submenu .tool a {
	text-decoration:none;
	color:#3366FF;
	border:none;
}




/***  Navigation menu for individual page located in pageBottom  ****/
ul#navi-page {
	right:50px; /* Somehow this works to center the menu*/
	left:50px;
	list-style-type:none;
	margin:0;
	padding:0 0 5px 0;
	text-align:center;
	font-size:12px;
	color:#ddd;
}
ul#navi-page a {
	text-decoration:none;
	color:#ddd;
	padding:2px 5px 2px 5px;
	border: 2px solid #ddd;
	background-color:#5c5a66; /*#191919; /* 10% gray */
}
ul#navi-page a:hover {
	color:#191919;
	border: 2px solid #666;
	background-color:#ddd;
}
ul#navi-page li {
	display:inline;
	margin:3px;
	vertical-align: middle;
}


/***  Navigation menu for overall page located in footer  ****/
ul#navi-footer, ul#copyright {
	position:absolute;
	left:50px; 
	top:40px;
	list-style-type:none;
	margin:0;
	padding:0;
	text-align:center;
	font-size:11px;
	color:#ccc; /* color for '|' */
}
ul#copyright { /* copyright notice locates below navi-footer. only difference is top position. */
	top:62px;
}
ul#navi-footer a, ul#copyright a {
	text-decoration:none;
	color:#ccc; 
	border:none;
}
ul#navi-footer a:hover,ul#copyright a:hover  {
	color:#FF6600;
	border:none;
	text-decoration:underline;
}
ul#navi-footer li, ul#copyright li {
	display:inline;
	vertical-align: middle;
}

/* for IE6 hack */
* html ul#navi-page a, * html ul#navi-page a, * html ul#navi-footer a,* html ul#copyright a  { 
	height:1px;
}





/* =textNavi
----------------------------------------------- */

.w300{
	width:300px;
}
.w200 {
 width:200px;
}
.w100 {
 width:100px;
}
.mcenter
{
	margin-left:auto;
	margin-right:auto;
}
.mleft {
	margin-left:5px; 
}
.mright {
	margin-right:5px; 
}
.blockNavi, .inlineNavi {
	font-size:11px;
	line-height:1.0;
	padding:2px 3px 2px 3px;
	text-align:center;
}
.blockNavi a {
	display:block;
	color: #191919;
	font-weight:bold;
	border: 2px solid #191919;
	background-color:#ddd;
	} /* line break above and below of the elment*/
.inlineNavi a {
	display:inline;
	line-height:1.8;
	color: #191919;
	font-weight:bold;
	border: 2px solid #191919;
	background-color:#ddd;
	} /* No line break so it can be used with span tag*/
.blockNavi a:hover, .inlineNavi a:hover {
	color:#FF6600;
	border: 2px solid #FF6600;
}



/* =Headings
----------------------------------------------- */
h1 {
	text-align:center;
	margin-top:0;
	padding-top:15px;
	font-size:1.7em;
	/* background-color:#999933; */
	}	
h2 {
	width:97%;
	padding:2px;
	margin:30px 10px 5px 10px;
	color:#191919;
	font-style:normal;  /* No italics */
	font-size:1.7em;
	line-height:1.7;
	border-top:2px solid #191919;
	border-top:1px solid #191919;
	}
h3 {
	margin:30px 10px 5px 15px;
	font-size:1.3em;
	color:#191919;
	}
	
	/* main purpose of h4 is label that sits on top of dashed box. It has margin-btm: 0 and margin-top:5px */
	/* so it does not give too much space to element directly below. */
h4 {
	margin-top:10px;
	margin-bottom:10px;
	margin-left:10px;
	font-size:1.2em;
	font-weight: bold;
	color:#900;	/*background-color:#663333; /**/
	font-style: italic;
}	



h5 {
	width:370px;
	margin-top:5px;
	margin-bottom:1px;
	margin-left:10px;
	padding:2px 2px 2px 5px;
	font-size:13px;
	color: #333;
	background-color:#ddd;
}


/* =Strong
----------------------------------------------- */
/* Use more poppy color, bigger font for strong tag in dashed box */
p.example strong, p.defn strong, p.output strong {
	color:#AC5235;
	font-size:1.2em;
	line-height:1.2em;
	
}

  
/* =pre
----------------------------------------------- */
pre {
	font-size:1.2em;
	margin-top:0;
	padding:10px;
	border:1px dashed #333;

}




/* =Tables
----------------------------------------------- */
table {
	width:95%;
	margin:0 auto 30px auto;
	font-family:"Century Gothic", "Gill Sans", Arial, sans-serif;
	border-collapse:collapse;
}
caption {
	text-align:right;
	font-size:.9em;
}	
td, th {
	font-size:0.95em;
	border:1px solid #333;
	padding:2px 3px 1px 3px;
}
th {
	text-align:left;
	color:#eee;
	background-color:#262626; /* 15% gray */
	}
tr.alt td {
	background-color: #ccc; /*  */
}		


/* =Lists
----------------------------------------------- */
	
/* =DL definition list */
dl {
	margin-left:12px;
	margin-top:0px;
	margin-bottom:20px;
 /*background-color:#FFCC33; /**/

}
dt, dd {
	margin:1px 0 1px 0;
	padding:0;
}

dd {
	margin-left:12px;
}
dl.italicTitle, dl.normalTitle {
	margin-top:5px;
}

dl.italicTitle dt {
	font-style:italic;
}
dl.normalTitle dt {
	font-style:normal;
	/*margin-bottom:5px; */
/* I put margin-btm 5px for normalTite DT, otherwise space between DT and first DD feels too tight.*/
/* Spacing between italicTilte's DT and first DD looks just right because DT's italic style. */
}	


/* =UL unordered list */
ul {
	margin-top:0;
	margin-bottom:25px;
	font-size:0.9em;
	}
li {
	padding-top:3px;
	margin-bottom: 3px;

}	




/* Used in secondary menu in overview or procedure */
ul.itemList {
	list-style-type:none;
	margin-left:5px;
	padding-left:5px;
}



/* =Nav Table of Content
----------------------------------------------- */

/* Navigaion for table of content */
#tableContNav {
	width:450px;
}
#tableContNav h2 {
	margin-bottom:0;
	padding:4px 0 0 0;
}
#tableContNav ul {
	list-style-type:none;
	padding-left:0;
	margin-left:0;
}
#tableContNav ul a {
	display:block;
	color: #191919;
	padding:1px 1px 1px 4px;
	border-left:10px solid #191919;
	border-bottom:none;
	}
#tableContNav ul a:hover {
	color:#eee;
	border-left:10px solid #3366FF;
	background-color:#191919; 
}	
	
#tableContNav ul li {   /* for IE6 hack */
	display:inline;
	}
* html #tableContNav ul a { /* for IE6 hack */
	height:1px;
}	






/* =Input
----------------------------------------------- */

/* textarea.editArea resides inside of form.CopyPasteForm. I configure margin in form.CopyPasteForm */
/* then make width of textarea.editArea 100% to uniform right and left margin for other p tags.     */
/* Configuring marging directly to textarea.editArea did not work.                                  */ 
form.CopyPasteForm {
	margin:5px 12px 10px 10px;	
}

textarea.editArea {
	width:100%;
	color:#666;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:0.8em;
	border:dashed 1px #666;
	background-color:#999;
}
textarea.editArea:focus {
	color:#eee;
	background-color:#999;
}



/* =P and related classes
----------------------------------------------- */

/* declare top and bottom margin value all together here. */
/* magin settings for lined box (.note, .important) and dashed box (.example, .classDefn, .code, .terminal) */
/* should be same. So configure them together here. Paddings are different. */
.important, .note, .example, .defn, .output {
	margin-top:0;
	margin-bottom:15px;
	margin-left:10px;
	margin-right:10px;
}


/* p uses 0 for right and left margin. margin-bottom is same as p.class */
p { 
	margin:0px 25px 10px 15px;
	padding:2px;
	}



/* for .important use smaller font than body. Use sans-serif font-family */		
.important, .note {
	font-size:0.95em;
	padding:5px;
	/*font-family:Verdana, Arial, Helvetica, sans-serif;*/
	border-top: solid 1px #666;
	border-bottom: solid 1px #666;
}
.important .boldTitle, .note .boldTitle{
	font-style: italic;
	font-weight: bold;	
}

/* This can be used wirth div or span to give 3em left margin. I created this style to give indentation  */
/* for C++ code  */
.indent_3em {
	margin-top:0;
	margin-left:2em;
}


/* let's use three different background color for .example, .code (classDefn, code, sql, global, data) and .terminal (whatever terminal output)*/

/* common parameter for dashed box style. They differ in background-color and font-family*/
.example, .defn, .output {
	font-size:0.95em;
	padding:10px;
	border:1px dashed #333;
}
.example {
	background-color:#E5E6FF; /* light blue */
}
.defn, .output {
	font-family:"courier new",sans-serif;
}
.defn {
	background-color:#FFFFCC; /* mute yellow */
}
.output {
	background-color:#C9FDB9; /* light green */
}

.lastUpdated {
	font-size:0.85em;
	font-style:italic;
	margin-top:5px;
	margin-left:5px;
}
 

/* marking with different color
----------------------------------------------- */
.textMark {	
 color: #930;
}
 




/* =cv specific
----------------------------------------------- */  



/* =contact page specific
----------------------------------------------- */ 
.bg-img {
	padding:1px;
	height:400px;
	background-image:url(../images/ContactPage.jpg);
	background-repeat:no-repeat;
	background-position:left top;	
}

.contact-text {
	font-size:1.0em;
	padding-left:10px;
	
}
#contact .contact-name {
	font-size: 2.0em;
	font-weight: bold;	
	margin: 2px 2px 5px -10px;
}

/* =about page specific
----------------------------------------------- */ 

img.bio-photo { /* Used to show mugshot. use float left  */
	float:left;
	margin:8px 14px 4px 14px;
	padding:0;
	border: 6px solid #67564C; /* Border color was chosen from bg fence color. Change it accordingly depending on the image or find constant color.  */
}



/* =Class
----------------------------------------------- */  




/* Two p element in one box */
.twoBoxWrapper {
	width:95%;
	margin:0 auto;
	padding:5px;
	border-top: solid 1px #666;
	border-bottom: solid 1px #666;
}

.twoBoxColumn1 {
	width:47%;
	float:left;
	
	}
.twoBoxColumn2 {
	margin-left:50%;
}	

.spacer {
	clear:both;
}


/* =Image treatment
----------------------------------------------- */


.img_home {

margin:2px;
margin-top:-10px;
margin-left:20px;

}

.note_home { /* This is for adding text */
	padding:2px;
	text-align: center;
	font-size:11px;
}







/* =Misc
----------------------------------------------- */

/* This tag is used to center YouTube video object in blog page. */
.center {
	text-align:center;
	margin:5px auto;
}



/*For PDF file link. Put Adobe PDF icon on the left.*/
.pdf-download {
	width:130px;
	height:50px;
	background:url(../images/pdficon.gif) no-repeat left top ;
	margin:4px 4px 0px 12px;
	padding-left:40px;
	/*line-height:2.5;*//*original*/
	line-height:1.5;
	/*font-size:11px; */
	/*background-color:red;*/
}
.float-right {
	float:right;
}
.float-left {
	float:left;
}

.paper-stat {
	font-weight:bold;	
}


h2 + h3 {
	margin-top:0;
}

/* When you have one line in <p> and <p class="note"> comes next, you may not want margin */
/* between them. To reduce or eliminate the margin, margin-bottom of <p> which comes above */
/* <p class="note">. Generally <p>'s margin-top is 0. */
.zeroBottomMargin
{
margin-bottom:0;
}
.zeroBottomMarginBold
{
margin-bottom:0;
font-weight:bold;
}

.clear {
	clear:both;
}


/* =index-page
----------------------------------------------- */


/* add extra padding in li for separation for better readability for index page.*/
#index-page li {
	padding-top:3px;
}
#index-page ul {
	margin-bottom:25px;
	font-size:12px;
}
/* -------------------------------------- */






/* =body#cv page specific
----------------------------------------------- */

body#cv p, body#cv h3{
	/* I need only p and h3 to use this setting */
	/*p, h3 should use this font setting. h2 uses different font-family. */
	color:#191919;
	padding:1px;
	/* font-family:Georgia, "Times New Roman", Times, serif; */	
	font-family:Century, "Century Gothic", serif; 
	font-size:1.0em;
	line-height:1.35;
}
body#cv h2 {
	width:100%;
	font-family:Century, "Century Gothic", serif;  /* for headers Century is used in Anu's original MS Word file/*/
	padding:1px;
	margin:10px 0 10px 5px;
	color:#191919;
	font-style:normal;  /* No italics */
	font-size:1.4em;
	background:none; /* bg:none needs to be declared otherwise general h2's bg-color is displayed*/
	border:none; /* main h2 using border-top so it needs to be disabled */
	}
body#cv h3 {
	/* for content "Times New Roman" is used in Anu's original MS Word file bur Georgia looks nicer on browser.*/
	margin:10px 1px 1px 25px;
	font-size:1.1em;
	clear:both;
	}
body#cv p {
	margin:10px 10px 1px 35px;
	}
body#cv p+h3 { /* provide extra space between end of p and next h3 for visual separation  */
	margin-top:30px;
	}
body#cv .cv-item+h3 { /* provide extra space between end of p and next h3 for visual separation  */
	margin-top:65px; /* space between last item of Conference Presentations and Participation and Invited Lectures */
	}
body#cv .cv-item h3 {
	width:15%; /* to give separation on the left for date, I used float:left with 15% width. */
	float:left;
	margin:1px 1px 1px 35px;
	text-align:left;
	}
body#cv .cv-item p {
	float:left;
	width:75%;
	margin:1px 1px 10px 1px;;
	}
body#cv .cv-category {
	clear:both;
	margin:3px;
	padding:2px;
	border-top:2px solid #191919;
	}
body#cv .cv-item {
	clear:both;
	margin:5px 10px 10px 2px;
	padding:1px;
	}



/* =body#blog page specific
----------------------------------------------- */

body#blog p, body#blog h2, body#blog h3, body#blog h4{
	color:#333;
	/* font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; */ /* originally used */
	font-family:Century, "Century Gothic", serif; 
}

body#blog h2 {  /* Used for date and time info at the beginning of each blog entry. */
	margin:10px 0px 0px 5px;
	padding-bottom:0px;
	padding:1px;
	background-color:#fff;
	color:#09F; /* light blue*/
	font-size:1.6em;
	border:none; /* main h2 using border-top so it needs to be disabled */
}

body#blog h3 {
	margin:5px 5px 0px 5px;
	padding:2px 2px 0px 2px;
	color:#555; /* mid-dark grey */
	font-size:1.2em;
}

body#blog h4 {
	margin:5px 5px 0px 5px;
	padding:2px 2px 0px 2px;
	color:#555; /* mid-dark grey */
	font-size:1.1em;
	font-style: italic;
}

body#blog .dateline {
	margin:0 10px 20px 10px;
	border-bottom:1px dotted #666;
}

body#blog .blog-img {
	clear:both;
	text-align:center;
	margin:10px 10px 30px 5px;
}
body#blog .blog-img img{
	border:2px solid #333;
}
body#blog .blog-img p {
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:0.9em;
	color:#555;
}

/* =UL unordered list for body#blog*/
body#blog ul {
	list-style-type:disc;
	margin-top:0;
	margin-bottom:25px;
	}
body#blog li, body#blog ol {
	padding-top:3px;
	margin-bottom: 3px;
}	

body#blog ol {
	list-style-type:decimal;
	margin-top:0;
	margin-bottom:25px;
}


body#blog .box {
	margin:5px 15px 15px 15px;
	font-size:0.95em;
	padding:10px;
	border:1px dashed #333;
	background-color:#EAF7FF; /* light blue */
}



/* =body#home specific
----------------------------------------------- */
body#home h2 {
	text-align:center;
	padding:2px;
	margin:10px 10px 5px 10px;
	border:none;
}



/* =map-button to make image as link in main page
----------------------------------------------- */
/* div = "event" is for showing major items that the author wants to show in home page. For example, new course work, announcement. */
/* It consists of three components that are title (event h3), image that acts as url link (event img) and description/text link (event p) */
/* event class has top border line to separate items if other event items are stuck together. */

.event {
	text-align:center;
	margin:10px 2px 20px 2px;
	padding:2px;
	/* background-color:grey; */
	color:#191919; /* 10% gray */
	border-top:1px solid #666; /* put line top of the event to separate from other event */
}
.event img {
	margin:10px auto 25px auto;
	padding:2px;
	text-align:center;	
}
.event a, .event a:hover {
	border:none;
}
.event a img {
	border:3px solid #fff;
}
.event a img:hover {
	border:3px dotted #FF6600; /*orange*/
}
.event h3, .event h4 {
	margin:0;
	padding:0;
	font-size:1.1em;
	color:#191919; /* 10% gray */
	font-style:normal;  /* No italics */	
}
.event h3 {
	margin-top:10px; /* give enough space b/w top line and title (h3) */
}
.event h4 {
	font-size:1.0em;
	font-weight:normal;
}
.event p {
	/*color:#191919; /* 10% gray */
}
.event p a{
	text-decoration:none;
	color:#3366FF;
	border-bottom:2px dotted #3366FF;
}
.event p a:hover {
	color:#FF6600;
	border-bottom:2px dotted #FF6600;
}





/* =big-button for haiti blog link from home page
----------------------------------------------- */
.big-button {
	display:block;
	position:relative;
	text-align:center;
	margin:20px auto 5px auto;
	width:700px;
	height:200px;
	background:white url(../images/big-button.jpg) no-repeat;
}
a.big-button{
	border:3px solid #fff;
}
a.big-button:hover {
	/*border:2px  solid #ca0002; /*red*/
	border:3px dotted #FF6600; /*orange*/
}
.big-button .textside {
	position:absolute;
	width:400px;
	height:200px;
	left:300px;
}
.big-button .textside h2 {
	color:#ca0002; /*red*/
	margin:2px;
	font-size:1.4em;
	line-height:1.0;
	background:none;
	border:none; /* main h2 using border-top so it needs to be disabled */
}
.big-button .textside p {
	color:#191919;
	margin:2px 4px;
	font-size:0.8em;
	line-height:1.0;
	background:none;
}
.big-button .textside .red-button {
	margin: 15px auto 15px auto;
	text-align:center;
	line-height:45px;
	width:300px;
	height:50px;
	color:white;
	font-size:1.8em;
	font-weight:bold;
	background:url(../images/red-button.gif) no-repeat center;
}
.big-button .textside .red-button:hover {
	background:url(../images/red-button-hover.gif) no-repeat center;
}
.big-button-legend {
	text-align:center;
	margin:0px auto 40px auto;
	width:700px;
	font-size:0.9em;
}


.author {
	text-align:center;
	font-size:1.2em;
}


 /* For Google map embedding tag. Make it align center  */
 
 .googlemap {
	text-align:center;
 }