/* Overall style for site */
body
{
  font-family: Verdana, Geneva, sans-serif;
  /*font-size: 80%;  /* 100% is approximately 16 pixels tall */
  
  /* baby blue background */
  background-color: rgb(102, 204, 255);

  /* purple-blue background */
  /*background-color: rgb(81, 78, 183);*/
  
  /* black text */
  color: black;

  /*background-image: url("bg_top.png");*/
  
  margin: 0px;
}

p, li
{
	line-height: 1.5em;
}

*:link
{
  color: rgb(0, 0, 204);
  /*text-decoration: none;*/
}

*:visited
{
  color: rgb(102, 0, 102);
}

h1
{
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
	
	font-family: "Cambria", Times, serif;
	font-variant: normal;
	text-transform: uppercase;
	font-weight: normal;
	font-size: 200%;  /* 100% is approximately 16 pixels tall */
}

h2
{
	text-align: center;
	font-size: 1.2em;  /* 100% is approximately 16 pixels tall */
	font-weight: bold;
	
	margin-top: 10px;
	margin-bottom: 10px;
}

p.picture_year
{
	text-align: center;
	line-height: 1em;
	margin-top: 0px;
	margin-bottom:0px;
}

p.photo_caption_below
{
	margin-top: 10px;
	margin-bottom: 10px;
}

.central_column
{
	/* make a central column of a fixed width */
	width: 750px ;
	max-width: 100%;
	margin-left: auto ;
	margin-right: auto ;
	margin-top: 0px;
	margin-bottom: 10px;
}

.white_box
{
	/* white background in column, to make text easy to read */
	background-color: white;
  
	/* padding and border around edges */
	padding: 15px 25px;
	border: 1px solid;
	margin: 10px;
	margin-bottom: 20px;
	border-radius: 25px;
}

div.picture_box
{
	display: block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
}

div.gallery_subsection
{
	display: block;
	margin-top: 100px;
	margin-bottom: 10px;
}

div.picture_box_spacing
{
	display: block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 60px;
	margin-bottom: 10px;
}

/* ====================
      NAVIGATION BAR
   ==================== */

.nav_bar
{
	position:fixed;  /* scroll with screen */

    /*float: left;*/
    height: 45px;
    width: 100%;
    overflow: hidden;

	/*background-color: black;*/
	background-color: rgb(20,120,230);
	padding: 0px   /*vertical*/
			 0px;  /*horizontal*/
	margin: 0px;

	/* stop buttons piling up */
	line-height: 2;
}

.nav_bar a
{
	color: rgb(150,230,255);
	/* baby blue: rgb(102, 204, 255);*/
	float: left;
	padding: 10px   /*vertical*/
			 20px;  /*horizontal*/
    transition: background-color 0.5s ease, color 0.5s ease;

	font-size: 80%;
	
	/* remove link formatting */
	font-style: normal;
	text-decoration: none;
	font-weight: bold;
}

.nav_bar a.current_tab
{
	color: white;
	background-color: rgb(102, 204, 255);
}

.nav_bar a:hover
{
	color: white;
	background-color: rgb(102, 204, 255);
}

/* space behind nav bar's starting position */
.nav_bar_back
{
	position:static;

    width: 100%;
	height: 46px;
	
	padding: 0px;
	margin: 0px;
}

/* ====================
     FRONT PAGE STUFF
   ==================== */

/* making a circular mask effect */
div.circular_window {
	/* make a circle using rounded rectangle tool */
	width: 280px;
	height: 280px;
	border-radius: 50%;

	/* make it centred */
	margin-left: auto ;
	margin-right: auto ;
	margin-top:10px;
	margin-bottom:10px;

	/* image can be overridden using style tag */
	/* style="background-image: url(portrait_small.png);" */
	background-image: url("face_preview.png");
	background-repeat: no-repeat;
	background-position: center;
	
    transition: background-image 0.2s ease;
}

h1.my_name
{
	font-family: "Cambria", Times, serif;
	font-variant: small-caps;
	text-transform: none;
	font-weight: normal;
	font-size: 2.4em;  /* 1 em is about 16 pt */
	margin-top: 10px;
	margin-bottom: 10px;
}

/* front menu */
table.main_menu
{
	margin-left: auto;
	margin-right: auto;
	
	border-collapse: collapse;
}

table.main_menu td
{
	padding: 5px;
	/*border: dashed 1px;*/
}

table.main_menu td a
{
	text-decoration: none;
}

div.mm_option
{
	width: 165px;
	height: 80px;
	
	border-radius: 40px;
	
	background-color: rgb(20,120,230);
	/*background-color:none;*/
	color: rgb(150,230,255);
	/* baby blue: rgb(102, 204, 255);*/
	/*float: left;*/
	padding: 0px   /*vertical*/
			 0px;  /*horizontal*/
    transition: background-color 0.5s ease, color 0.5s ease;

	/* font and formatting */
	font-style: normal;
	text-decoration: none;
	/*font-family: "Cambria", times, serif;*/
	font-size: 1.2em;   /*120%;*/
	font-weight: normal;
	text-align: center;
	line-height: 1.2;
	
	display: table;
}

div.mm_option:hover
{
	background-color: darkblue; 
/*	background-color: rgb(20,120,230);*/
	color: white;
	/* baby blue: rgb(102, 204, 255);*/
}

div.mm_valign
{
	display: table-cell;
    vertical-align: middle;
    text-align: center;
}

p.my_email
{
	text-align:center;
	font-weight:bold;
	line-height: 1.0em;
}