/* herotown.css */

/* Block all default margins and padding */
* {
 margin:0;
 padding:0;
}

/* Temporary borders 
border:dashed .0625em #f00;*/ 

/* Wrapper contains the layout */
#wrapper{
 /* At font size of 80%, this wrapper just fits in 800x600 display */
 width:60em;
 margin: 1em auto 0 auto;
 background-color:#2952f5; 
 position:relative;
}

body{
 background-color:#000000;
 font-family: Geneva, Verdana, sans-serif;
 /* Here I set the default font size smaller right off the bat. */
 font-size:80%;
 text-align:center;    
}

/***************** Branding Division Styles ********************/

/* Branding division contains one large image */
#branding {
background-color:#fff;
} 
#branding img{
    width:100%;   
}

/* ---------------------- HEADER PANEL MENU -------------------- */

/* icon menu for website navigation */

#iconmenu {position: relative; margin: 5px auto; padding: 5px;
width: 420px; height: 110px; background: url(pattern.gif);
}
#iconmenu li {width: 97px; height: 104px; position: absolute; top: 2px;
background: url(acornbuttons.gif) 0 0 no-repeat; display: block; list-style: none;
}
#iconmenu a {width: 97px; height: 104px;
display: block;
/* border: solid 1px #fff; */
}
#iconmenu a:hover;
/* {border: solid 1px #000;} */
/* indicators below adjust position of foreground image */
#iconmenu #panel1b {left: -7px;}
#iconmenu #panel2b {left: 101px; background-position: -96px 0;}
#iconmenu #panel3b {left: 200px; background-position: -193px 0;}
#iconmenu #panel4b {left: 299px; background-position: -287px 0;}
/* indicators below adjust position of background image */
#iconmenu #panel1b a:hover {background: url(acornbuttons.gif) -7px -110px no-repeat;}
#iconmenu #panel2b a:hover {background: url(acornbuttons.gif) -102px -110px no-repeat;}
#iconmenu #panel3b a:hover {background: url(acornbuttons.gif) -198px -110px no-repeat;}
#iconmenu #panel4b a:hover {background: url(acornbuttons.gif) -287px -110px no-repeat;}



/***************** Navbar Division Styles ********************/
/* Navbar division */
#navbar{
   background-color:#b2d6f8;
   /* For absolutely positioned layout */
   position:absolute;
   top:24.2em;
   left:17.5em;
   /* Width= wrapper width minus left and right column widths */
   width:43em;
   height:2em;
   /* Centers the innderdiv below in some older browsers */
   text-align:center;
   
}

#navbar #innerdiv{
    /* This is tricky because you need to know the actual width of
       the navbar ul. In this one, there are 5 items, each 6em wide,
       for a total of 30em. But there are also some 1px borders. 
       So add another .6em or so for those. In the page, you need to
       enclose the while navbar ul in a div named innerdiv. If the navbar 
       wraps in the page, you need to increase the width below. */
       width:30.6em;
       margin:0 auto;       
}

/* Puts a left border on first navbar item, but only if you
   add class="leftbutton" to that first item, as in clientstyles3.htm */
.leftbutton{
     border-left:solid 1px #4cb6f4; 
}

/* Remove bullets from ul in the navbar */
#navbar ul{
	list-style-type:none;
}

/* List items in the navbar */
#navbar li{
	float:left;
}

/* Applies to navbar links, unvisited and visited */
#navbar a,
#navbar a:link,
#navbar a:visited{
	text-decoration:none;
	display:block;
    font-family:Verdana, Geneva, Arial, Sans-Serif;
    line-height:2em;
    background-color:#b2d6f8;
    color:#000;	
    width:6em;
	height:2em;
    border-right:solid 1px #2952f5; 
    text-align:center;
    outline-style:none;
}

/* Navbar hover, active, and current page links */
#navbar a:hover,
#navbar a:active,
#navbar li.selected a:link,
#navbar li.selected a:visited{
    background-color:#2952f5;
    color:#000;
}

/***************** Leftcolumn Division Styles ********************/
#leftcolumn{
 /* #content left margin must match this width */
 width:8;
 float:left;
 /* Center text and images in this column */
 text-align:center;
 /* For absolutely positioned layout */
 position:absolute;
 top:60em;
 left:-8.5em; 
}

/***************** Rightcolumn Division Styles ********************/

#rightcolumn{
 /* #content right margin must match this width */
 width:25.25em;
 float:right;
 /* Center text and images in this column */
 text-align:center;
  /* For absolutely positioned layout */
 position:absolute;
 top:60em;
 right:-17em;
}

/* icon menu for website navigation */



/* ----------------------- BUTTON ONE MENU --------------------- */

#iconmenu1 {position: relative; margin: 5px auto; padding: 5px;
height: 8em; width: 27em; background: url(pattern.gif) no-repeat;
}
#iconmenu1 li {height: 8em; width: 15.75em; position: absolute; top: 2px;
background: url(gabutton9.png) 0 0 no-repeat; display: block; list-style: none;
}
#iconmenu1 a {height: 7.25em; width: 15.7em; 
display: block;
/* border: solid 1px #fff; */
}
#iconmenu1 a:hover;
/* {border: solid 1px #000;} */

/* indicators below adjust position of foreground image */

#iconmenu1 #panel1c {top: 0;}

/* indicators below adjust position of background image */

#iconmenu1 #panel1c a:hover {background: url(gabutton9.png) -16em 0px;}


/* ---------------------  BUTTON TWO MENU ----------------------------------- */

#iconmenu2 {position: relative; margin: 5px auto; padding: 5px;
height: 8em; width: 27em; background: url(pattern.gif) no-repeat;
}
#iconmenu2 li {height: 560px; width: 15.75em; position: absolute; top: 2px;
background: url(gabutton2.png) 0 0 no-repeat; display: block; list-style: none;
}
#iconmenu2 a {height: 7.25em; width: 15em; 
display: block;
/* border: solid 1px #fff; */
}
#iconmenu2 a:hover;
/* {border: solid 1px #000;} */

/* indicators below adjust position of foreground image */

#iconmenu2 #panel2c {top: -100px;}

/* indicators below adjust position of background image */

#iconmenu2 #panel2c a:hover {background: url(gabutton2.png) -16.5em 0px;}

/* ---------------------  BUTTON THREE MENU ----------------------------------- */

#iconmenu3 {position: relative; margin: 5px auto; padding: 5px;
height: 8em; width: 27em; background: url(pattern.gif) no-repeat;
}
#iconmenu3 li {height: 560px; width: 15.75em; position: absolute; top: 2px;
background: url(gabutton3.png) 0 0 no-repeat; display: block; list-style: none;
}
#iconmenu3 a {height: 7.25em; width: 15em; 
display: block;
/* border: solid 1px #fff; */
}
#iconmenu3 a:hover;
/* {border: solid 1px #000;} */

/* indicators below adjust position of foreground image */

#iconmenu3 #panel3c {top: -100px;}

/* indicators below adjust position of background image */

#iconmenu3 #panel3c a:hover {background: url(gabutton3.png) -16.5em 0px;}

/* ---------------------  BUTTON FOUR MENU ----------------------------------- */

#iconmenu4 {position: relative; margin: 5px auto; padding: 5px;
height: 8em; width: 27em; background: url(pattern.gif) no-repeat;
}
#iconmenu4 li {height: 560px; width: 15.75em; position: absolute; top: 2px;
background: url(gabutton4.png) 0 0 no-repeat; display: block; list-style: none;
}
#iconmenu4 a {height: 7.25em; width: 15em; 
display: block;
/* border: solid 1px #fff; */
}
#iconmenu4 a:hover;
/* {border: solid 1px #000;} */

/* indicators below adjust position of foreground image */

#iconmenu4 #panel4c {top: -100px;}

/* indicators below adjust position of background image */

#iconmenu4 #panel4c a:hover {background: url(gabutton4.png) -16.5em 0px;}

/* ---------------------  BUTTON FIVE MENU ----------------------------------- */

#iconmenu5 {position: relative; margin: 5px auto; padding: 5px;
height: 8em; width: 27em; background: url(pattern.gif) no-repeat;
}
#iconmenu5 li {height: 560px; width: 15.75em; position: absolute; top: 2px;
background: url(gabutton5.png) 0 0 no-repeat; display: block; list-style: none;
}
#iconmenu5 a {height: 7.25em; width: 15em; 
display: block;
/* border: solid 1px #fff; */
}
#iconmenu5 a:hover;
/* {border: solid 1px #000;} */

/* indicators below adjust position of foreground image */

#iconmenu5 #panel5c {top: -100px;}

/* indicators below adjust position of background image */

#iconmenu5 #panel5c a:hover {background: url(gabutton5.png) -16.5em 0px;}

/* ---------------------  BUTTON SIX MENU ----------------------------------- */

#iconmenu6 {position: relative; margin: 5px auto; padding: 5px;
height: 8em; width: 27em; background: url(pattern.gif) no-repeat;
}
#iconmenu6 li {height: 560px; width: 15.75em; position: absolute; top: 2px;
background: url(gabutton6.png) 0 0 no-repeat; display: block; list-style: none;
}
#iconmenu6 a {height: 7.25em; width: 15.5em; 
display: block;
/* border: solid 1px #fff; */
}
#iconmenu6 a:hover;
/* {border: solid 1px #000;} */

/* indicators below adjust position of foreground image */

#iconmenu6 #panel6c {top: -100px;}

/* indicators below adjust position of background image */

#iconmenu6 #panel6c a:hover {background: url(gabutton6.png) -16em 0px;}

/* ---------------------  BUTTON SEVEN MENU ----------------------------------- */

#iconmenu7 {position: relative; margin: 5px auto; padding: 5px;
height: 8em; width: 27em; background: url(pattern.gif) no-repeat;
}
#iconmenu7 li {height: 7.25em; width: 15.75em; position: absolute; top: 2px;
background: url(gabutton7.png) 0 0 no-repeat; display: block; list-style: none;
}
#iconmenu7 a {height: 7.25em; width: 15.5em; 
display: block;
/* border: solid 1px #fff; */
}
#iconmenu7 a:hover;
/* {border: solid 1px #000;} */

/* indicators below adjust position of foreground image */

#iconmenu7 #panel7c {top: -100px;}

/* indicators below adjust position of background image */

#iconmenu7 #panel7c a:hover {background: url(gabutton7.png) -16em 0px;}

/* ---------------------  BUTTON SEVEN MENU ----------------------------------- */

#iconmenu8 {position: relative; margin: 5px auto; padding: 5px;
height: 8em; width: 27em; background: url(pattern.gif) no-repeat;
}
#iconmenu8 li {height: 7.25em; width: 15.75em; position: absolute; top: 2px;
background: url(gabutton1.png) 0 0 no-repeat; display: block; list-style: none;
}
#iconmenu8 a {height: 7.25em; width: 15.5em; 
display: block;
/* border: solid 1px #fff; */
}
#iconmenu8 a:hover;
/* {border: solid 1px #000;} */

/* indicators below adjust position of foreground image */

#iconmenu8 #panel8c {top: -100px;}

/* indicators below adjust position of background image */

#iconmenu8 #panel8c a:hover {background: url(gabutton1.png) -16em 0px;}

/***************** Styles for both side columns ****************/
#leftcolumn img,
#rightcolumn img{
    width:80%;
    margin:1em 0;
}

#leftcolumn p,
#rightcolumn p{
    width:75%;
    padding:0.25em;
    border:thin solid #7E97A6;
    font-family:arial, helvetica, sans-serif;
    margin: 1em auto;    
    }
    
/***************** Content Division Styles ********************/
#content{
 /* Left and right margins must match sidebar column widths */
 margin: 0 10em;
 padding:0.5em;
 background-color:#fff;
 color:#000;
 padding-top:.25em;
}

/* Applies to h1, h2, and h3 headings in the content division */
#content h1, #content h2, #content h3{
 font-family: Arial, Verdana, sans-serif;
 color:#45322F; 
}

/* Applies to paragraphs and lists in the content division */
#content p, #content ul, #content ol{
 font-family:"Sylfaen", Verdana, sans-serif;
 font-size:1.25em;
 text-align:left;
 line-height:16pt;
 margin:0.5em;
}

/* Applies to lists in the content division */
#content ul, #content ol{
 padding: 5px 0px 5px 30px;
}

/***************** Footer Division Styles ********************/
#footer{
   /* To Be Determined */
}

/***************** Printer-Friendly Styles ********************/
@media print{
    /* Start styles for printer-friendly pages */
    #wrapper{
        width:100%;
    }
    
    /* Printer only: Hide all but branding and content divs */
    #navbar,
    #leftcolumn,
    #rightcolumn,
    #footer{
        display:none;
    }
    
    /* Printer only: Eliminate content margins and padding */
    #content{
        margin:0;
        padding:0;
    }
    /* End styles for printer-friendly pages */
}