@charset "utf-8";

/* PAGE AND FONT DEFs          */
/*------------------------------------------------ */
body{
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  height: 100%; 
  max-height: 100%; 
  font-family: "Times New Roman", Times, serif;
  background-color: #F0FFFF;
}

div[role="main"] {

/* Tools like css3please.com, which I used for the code that follows, help you generate CSS3 code. Try it out yourself!	*/
	
  -webkit-border-radius: 0 0 8px 8px;   /* Saf3-4, iOS 1-3.2, Android <1.6 */
     -moz-border-radius: 0 0 8px 8px;   /* FF1-3.6 */
          border-radius: 0 0 8px 8px;      /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

	/* useful if you don't want a bg color from leaking outside the border: */        
	-moz-background-clip: padding; 
	-webkit-background-clip: padding-box; 
	background-clip: padding-box;	
}

/*
h1 {
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	width: 14em;
	text-align: center;
	margin: 1em 0em 2.5em 17em;
	padding: 2em 0 0 0em;
}
*/

h2.ital {
	font-style: italic;
}

p.script {
	font-family: "Brush Script MT", cursive;
	font-style: italic;
}

p.general {
	font-family: "Times New Roman", Times, serif;
	font-size: 120%;
	line-height: 120%;
}

div[role="main"] p.indent {
	text-indent: 50px;
}

div[role="main"] p.dotted {
	font-size: 1em;
	line-height: 1.4;
        width: 70%;
        text-align: center;
        float: center;
        margin: auto;
	padding: 10px;
        border-style: dotted;
        border-color: blueviolet;
}

div[role="main"] p.dotted2 {
	font-size: 1em;
	line-height: 1.4;
        width: 50%;
        text-align: center;
        float: center;
        margin: auto;
	padding: 10px;
        border-style: dotted;
        border-color: blue;
}

div[role="main"] p.dashed {
	font-size: 1em;
	line-height: 1.4;
        width: 40%;
        text-align: center;
        float: center;
        margin: auto;
	padding: 10px;
        border-style: dashed;
        border-color: green;
}

/* DEFINE THE LEFT, RIGHT, AND CENTER PANES
------------------------------------------------------------------ */
#framecontentLeft{
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 6%;                /*Width of left frame div*/
  height: 100%;
  overflow: hidden;     /*Disable scrollbars. Set to "scroll" to enable*/
  background-color: blueviolet;
  color: white;
  font: 8pt;
}

#framecontentRight{
  position: absolute; 
  top: 0; 
  left: auto;
  right: 0; 
  width: 6%;                 /*Width of right frame div*/
  height: 100%;
  overflow: hidden;      /*Disable scrollbars. Set to "scroll" to enable*/
  background-color: blueviolet;
  color: white;
  font: 8pt;
}

#maincontent{
  position: fixed; 
  top: 0;
  left: 6%;             /*Set left value to WidthOfLeftFrameDiv*/
  right: 6%;          /*Set right value to WidthOfRightFrameDiv*/
  bottom: 0;
  overflow: auto; 
  background: #F0FFFF;
  color: black;
}

/*Margins for inner DIV inside each DIV (to provide padding)*/
.innertube{
	margin-left: 5%;
	margin-right: 5%;
	margin-top: 1%;
	margin-bottom: 1%;
}

* html body{   /*IE6 hack*/
  padding: 0 6% 0 6%;      /*Set value to (0 WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/
}

* html #maincontent{      /*IE6 hack*/
  height: 100%; 
  width: 100%; 
}


/* NAVIGATION - DROPDOWN MENU
------------------------------------------------ */
.nav,
.nav ul {
	background: #000; /* background color for nav bar */
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav {
	min-height: 1.3em;
	width: 75%;	/* This controls the width of the menu bar */
 	overflow: auto;
	padding: 10px 10px 10px 10px; /* padding around menu bar */

	/* Tools like css3please.com, which I used for the code that follows, help you generate CSS3 code. Try it out yourself! */
  -webkit-border-radius: 6px 6px 0 0; /* Saf3-4, iOS 1-3.2, Android <1.6 */
     -moz-border-radius: 6px 6px 0 0; /* FF1-3.6 */
          border-radius: 6px 6px 0 0; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
  
	/* useful if you don't want a bg color from leaking outside the border: */        
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}

.nav a {
	color: white;  /* font color for text on nav bar */
	display: block; 
	font-weight: bold;
	text-decoration: none;
}

.nav li {
	float: left;
	width: 10em; /* width of dropdown menus */
}

.nav li a:hover {
	color: #aabadd;
}

/* :::: Navigation Submenus (the dropdowns) :::: */
.nav ul {
	margin-left: -10px;
	padding: 10px 10px 15px; /* space between menu bar and first dropdown entry. */
	
	/* 
		Tools like css3please.com, which I used for the code that follows, help you generate CSS3 code. Try it out yourself!
	*/
  -webkit-border-radius: 0 0 8px 8px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
     -moz-border-radius: 0 0 8px 8px; /* FF1-3.6 */
          border-radius: 0 0 8px 8px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

	/* useful if you don't want a bg color from leaking outside the border: */        
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}

.nav li ul {
	left: -9999em; /* hide a submenu offscreen by default so visitors don't see it */
	position: absolute;
	z-index: 1000;
}

.nav li:hover ul {
	left: auto; /* show the submenu when user hovers over the parent li */
	width: 10em;
}

.nav ul li {
	float: none;
	font-size: .875em;
	margin-top: .5em;
	width: auto;
}


/* IMAGE POSITIONING
------------------------------------------------ */
div[role="main"] img.hdrleft {
	float: left;
	padding-top: 1%;
	padding-left: 15%;
	padding-right: 5%;
	padding-bottom: 1%;
}	

div[role="main"] img.hdrright {
	float: right;
	padding-top: 1%;
	padding-left: 5%;
	padding-right: 15%;
	padding-bottom: 1%;
}	

div[role="main"] img.hdrcenter {
	float: center;
	padding-top: 1%;
	padding-left: 20%;
	padding-right: 20%;
	padding-bottom: 1%;
}

div[role="main"] img.contleft {
	float: left;
	padding: 10px;
}	

div[role="main"] img.contright {
	float: right;
	padding: 10px;
}	

div[role="main"] img.imgcent {
        display: block;
        float: center;
	margin: auto;  
        padding: 20px;
}	

/*
div[role="main"] img.photoleft {
	float: left;
	padding: 1%;
	margin-left: 0%;
 }

div[role="main"] img.photoright {
	float: right;
	padding: 1%;
	margin-left: 0%;
}
*/

/* TABLE DEFINITIONS
------------------------------------------------ */
div[role="main"] table.generic{
	width: 60%;
	border-width: 6px;
	border-style: outset;
	border-color: green;
}
	
div[role="main"] table.generic th{
	width: 25%; /* controls width of columns */
	font-weight: bold;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

div[role="main"] table.generic td{
	width: 30%; /* controls width of columns */
	font-weight: normal;
	text-align: center;
	padding-bottom: 3px;
}

div[role="main"] table.officer{
	width: 55%;
	border-width: 6px;
	border-style: outset;
	border-color: goldenrod;
}
	
div[role="main"] table.officer th{
	width: 20%; /* controls width of columns */
	font-weight: bold;
	text-align: center;
	padding-bottom: 10px;
}

div[role="main"] table.officer td {
	width: 20%; /* controls width of columns */
	font-weight: normal;
	text-align: center;
	padding: 3px;
}

div[role="main"] table.chair{
	width: 70%;
	border-width: 6px;
	border-style: outset;
	border-color: goldenrod;
}
	
div[role="main"] table.chair th{
	width: 20%; /* controls width of columns */
	font-weight: bold;
	text-align: center;
	padding: 10px;
}

div[role="main"] table.chair td{
	width: 20%; /* controls width of columns */
	font-weight: normal;
	text-align: center;
	padding-bottom: 4px;
}

div[role="main"] table.PERs{
	width: 30%;
	border-width: 6px;
	border-style: outset;
	border-color: blueviolet;
}
	
div[role="main"] table.PERs th{
	width: 20%; /* controls width of columns */
	font-weight: bold;
	text-align: center;
	padding: 10px;
}

div[role="main"] table.PERs td{
	width: 20%; /* controls width of columns */
	font-weight: normal;
	text-align: center;
	padding-bottom: 4px;
}

/* GENERIC BLOCKS
------------------------------------------------ */
.divafter {
 	border: 0px;
	content: "";
	clear: both;
  	width: 70%;
 }

.divleft {
	float: left;
	clear: left;
	width: 33%;
	height: auto; 
	padding: 1%;
	margin-left: 12%;
	margin-right: 1%;
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 120%;
	overflow: auto;
}

.divright {
	float: right;
	clear: right;
	width: 33%;
	height: auto; 
	padding: 1%;
	margin-left: 1%;
	margin-right: 12%;
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 120%;
	overflow: auto;
}

/* PHOTO GALLERY BLOCKS
------------------------------------------------------------------ */
.divleftphoto {
	float: left;
	clear: left;
	width: 35%;
	height: auto; 
	padding: 1%;
	margin-left: 10%;
	margin-right: 1%;
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 120%;
	overflow: auto;
 }

.divrightphoto {
	float: right;
	clear: right;
	width: 35%;
	height: auto; 
	padding: 1%;
	margin-left: 1%;
	margin-right: 10%;
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 120%;
	overflow: auto;
}

/* VETERANS PAGE BLOCKS
------------------------------------------------------------------ */
.divleftvet {
	float: left;
	width: 35%;
	height: auto;
	padding: 1%;
	margin-left: 10%;
	margin-right: 1%;
	margin-top: 5px;
	margin-bottom: 5px;
	border: 3px solid #00008B;
	font-family: "Times New Roman", Times, serif;
	font-size: 120%;
	line-height: 1.4;
}

.divrightvet {
	float: right;
	width: 35%;
	height: auto; 
	padding: 1%;
	margin-left: 1%;
	margin-right: 10%;
	margin-top: 5px;
	margin-bottom: 5px;
	border: 3px solid #00008B;
	font-family: "Times New Roman", Times, serif;
	font-size: 120%;
	line-height: 1.4;
}


/*-------------------------------------------------------------------------
CSS code and HTML for POP-UP PIX of officers from www.dynamicdrive.com
article in the CSS Library section named "CSS Pop-Up Image Viewer" 
--------------------------------------------------------------------------*/
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}