/*Styling for CynsInterests Site, copied and modified from CMA By Cynthia Scott
in 2019. Last modified 26 January 2019, changing fixed widths to percentages.
*/

body {
	width: 85%;
    max-width: 1024px;   /* changed from 1012px */
    height: auto;
    font-family: Verdana, Geneva, Arial, sans-serif;
	font-size: large;
	color: #000000; 
    }

/* ELEMENT STYLES. */

h1, h2, h3, h4 {
	font-weight: bold;
	padding: 2px 5px;
	margin: 0px 10px; }

h1 {
	font-size: 175%;
    color: #008080;
	text-align: center; }
    
h1.test {
    color: #bd0043; }
    
h2 {
	font-size: 130%;
    color: #800080;
    text-align: center;
     }
     
h2.showcase {
    text-align:left; 
    }

h3 {
	font-size: 120%; }
    
h4 {
    font-size: 100%; }
    
h3.tools {
	text-align: center;
	margin: 3px 0px 5px 0px;  }

p  { margin: 15px; }
    
  
p.center-image {
    text-align: center; }    
    
/*Note on 27 Jan 2026 nothing I do to center the image has any effect
p.logo {
    margin: auto;
    text-align: center;
    }*/
    
p.hanging-indent {
    padding-left: 2em;
    text-indent: -2em;
    }
    

table {
    margin-left: 5px;
	font-family:sans-serif;
    font-size:inherit;
	  }
      
td  {
    font-size-adjust:inherit;
    padding-left: 1em;
    padding-right: 1em;
    }
    
table.footer  {
	background-color: #f5f3cc;
    text-align: center;
    font-family:sans-serif;
    font-size:small;
    padding-top: 2px;
	}

/*Table style for an image link with text to the right.*/
table.pdf {
	margin-top: 5px;
	margin-left: 5px;
     }

th.pdf  {
	padding-right: 0.5em;
	text-align: center;  }
    
td.pdf  {
	text-align: left;
    padding-bottom: 1em;
    }

/*Un numbered list style   
ul { 
   list-style-type:circle;
   margin-left: 5%;
   margin-right: auto;
   font-family:sans-serif;
   }   */  
     

/*These styles are for the one-row table page-navigation tabs.*/
table.nav {
    margin-left: 1px;
    margin-bottom: 2px;
	padding: 1px;
	}

/*Navigation table Headers: Need to make each page tab a different color, so viewers know which one
they are on. The tabs match the color of the main content on a particular page.*/
th.cynhome  {
	margin: 0px;
	background: #6fc3c1;
	padding: 10px 35px;
	text-align: center;  }

th.hobby  {
	margin: 0px;
	background: #a5d8f6;
	padding: 10px 35px;
	text-align: center;  }

th.office  {
	margin: 0px;
	background: #d2a6c7;	
	padding: 10px 35px;
	text-align: center;  }

th.writing {
	margin: 0px;
	background: #fac6aa;
	padding: 10px 35px;
	text-align: center;  }
    
th.volunteer {
    margin: 0px;
	background: #fde2b8;
	padding: 10px 35px;
	text-align: center; }
    
th.about {
    margin: 0px;
	background: #d7d7d7;
	padding: 10px 35px;
	text-align: center; }



/* DIVISION STYLES */
/* Last modified 22 January 2026 */

/* The mainbox division contains the logo-head, the navtabs, and other divisions.
The margin-left is wide to make a white space on the browser window*/
#mainbox {
	margin-top: 5px;
    margin-left: 150px;
	margin-right: auto;
    background: #fffded; /*pale yellow*/
	padding: 0.988%;
	border: 8px solid #008080; 
	width: 96.0474%;
    height: auto;                  
	 }
 
/*This contains my Logo graphic for Cynsinterests*/    
#logohead {
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: 6px;
    background: #008080;
    border: 2px solid #000000;
        }     


#nav {  /*navigation division for any navigation structure.Not certain I need this.*/
   margin-top: 10px;
   margin-left: 2px;
   padding: 10px;
   border-color: #008080;
   border-width: 8px;
   }
   
/*FORMATTING for IN-Line HORIZONTAL Navigation menu, named nav_menua with letter a.
Page 269 of Murach text does not work to show borders or remove the link underlines.*/

#nav_menu_a ul {
    list-style-type: none;
    margin: 0;
    padding: 1em 0;         /*padding above and below li elements*/
    text-align: center;
    border-top: 2px #008080; 
    border-bottom: 2px #088080;
    }
    
#nav_menu_a ul li {
    display: inline;
    padding: 0 1.5em;
     }
#nav_menu_a ul li a {
    font-weight: bold;
    color: blue;
     }
#nav_menu_a ul li a.current {
    text-decoration: none;
     }
/*end of IN-LINE menu formatting*/


/*FORMATTING for BLOCK HORIZONTAL Navigation menu, named nav_menub with letter b.
Murach's text page 269 does not properly place the menu inside the Mainbox and above
the Homebox.*/

#nav_menu_b { 
     margin-bottom: 15px; 
     width: 100%; 
     }
     
#nav_menu_b ul {
    list-style-type: none; }
#nav_menu_b ul li { float: left; }
#nav_menu_b ul li a {
    text-align: center;
    display: block;
    width: 150px;
    padding: 1em 0;  /*padding above and below a elements*/
    text-decoration: none;
    background-color: #008080;
    color: white;
    font-weight: bold; 
    border-right: 2px solid white;}
#nav_menu_b ul li a.lastitem {
    border-right: none; }
#nav_menu_b ul li a.current {
    color: yellow; }
    
/*end of horizontal BLOCK menu formatting*/


/*Learning and testing Unordered List OPERATION for 2-Tier menu 
 
#nav_menu ul {
    list-style: none;    /*Remove bulets from all ul elements
    position: relative;  /*so the submeus can be positioned
    }
#nav_menu ul li { float: left; } /*display items horizontally
#nav_menu ul ul {
    display: none;  /*Don't display submenus until hover of li
    position: absolute;
    top: 100%;      /*Position submenu at bottom of main menu
    }    
#nav_menu ul ul li {
    float: none; }    /*Display submenu vertically

#nav_menu ul li:hover > ul {  /*Select ul child of li element
    display: block; }         /*Display submenu on hover of li element
    
#nav_menu > ul::after {
    content: "";           /*Add empty content to the end of the first ul
    display: block;        /*Display that content as a block element
    clear: both; }         /*Stop the floating of the li elements
    
/*END OF LIST OPERATION FOR 2-TIER MENU*/
   

     
      
/*this intro division separates welcome message from AEM the cycling banner that follows it*/     
#intro {
    /*float:left;*/ 
    margin-top:10px;
    margin-bottom:10px;
    }

/* Differently colored containers inside and below the top part of the Mainbox division
for each different topical page of the site. */

/*Homebox is not to be confused with Mainbox. It sits inside Mainbox.*/    
#homebox {
    margin-top: 10px;
    margin-left: auto;
	margin-right: auto;
    background: #a7d6d5;
	padding: 1.0288%;
	border: 5px solid #00b1ae; 
	width: 95.679%;
    }

/*Reached via the Office Fun tab*/
#officebox {
    margin-top: 10px;
    margin-left: auto;
	margin-right: auto;
	background: #debdd6;
	padding: 1.0288%;
	border: 5px solid #d2a6c7; 
	width: 95.679%;
	 }

/*Reached via the Stamp Hobby tab*/
#hobbybox {
    margin-top: 10px;
    margin-left: auto;
	margin-right: auto;
    margin-bottom: 10px;
    background: #a5d8f6;
	padding: 1.0288%;
	border: 5px solid #6ec6f1; 
	width: 95.679%; 
/*	height: 1350px;  */
	 }
 
/*for the In Print page*/    
#writerbox {
    margin-top: 10px;
    margin-left: auto;
	margin-right: auto;
	background: #fcd9c5;
	padding: 1.0288%;
	border: 5px solid #f39e77; 
	width: 95.679%;
	 }
     
#volunteerbox {
    margin-top: 10px;
    margin-left: auto;
	margin-right: auto;
	background: #fde2b8;
	padding: 1.0288%;
	border: 5px solid #f39e77; 
	width: 95.679%;}
 
#aboutbox {
    margin-top: 10px;
    margin-left: auto;
	margin-right: auto;
	background: #d7d7d7;
	padding: 1.0288%;
	border: 5px solid #898989; 
	width: 95.679%;}
 
/*This division not always used*/     
#hanging-indent {
    margin-top: 10px;
    margin-left: auto;
	margin-right: auto;
	background: #fac6aa;
	padding: 1.0288%;
	width: 95.30%;}
     
 #footer {
    margin-top: 7px;
    margin-left: auto;
	margin-right: auto;
    font-family: sans-serif;
    text-align:center;
    background: #fffded;
	padding: 3px;
	border: 3px solid #008080; 
	width: 96.0474%; 
	height: 50px;
	 }