/* 

Screen layout: */



body {

font-family: arial, sans-serif;

font-size: small;

margin: 0 auto;

padding: 0;

background: #a1daed url(../images/wpsf/bg.jpg) top left repeat-x;

}

#wrap {

width: 1024px;

background: #ffffff;  /*  white  */

margin: 0 auto;

padding: 0;

}

#header {

padding: 0;

margin: 0 auto;

height: 250px;

}


h1  {         /* title across top of every page  */

padding: 20px 0 25px 0;

font-size: 2em;

color: #0099cc;

text-align: center;

}

h2 {        /* header of content portion of each page  */

font-size: 1.5em;

text-align: left;

margin: 15px 20px;

}

h3 {      

font-size: 1.1em; 

margin: 5px 8px 15px 20px;

}   

h4 {         /* trailer at bottom (answer the call)  */

font-size: 1.1em;

font-style: italic;

margin: 30px 0 0 20px;

color: #0099cc;

}

p {

margin: 10px 20px;

}


img {

float: left;

border: 4px solid black;

margin: 0;

padding: 0;

}

/*  a {

text-decoration: none;

color: #0099cc;

}

a:visited {

color: #00ccff;  

}

a:hover {

text-decoration: underline;

color: #0099cc;

}
  */

/*  For flyout menu   */

#menu {

float: left;

width: 150px;

margin: 0;

padding: 20px 0 10px 20px;

}
.menudiv {

position: relative; 

/*  z-index: 100;   */

left: 0; 

/*  display: block;   */

float: left;

margin: 0;

padding: 0;

}

/* .mainmenu {

position: absolute; 

left: 0; 

  }  */

.mainmenu p { 

width: 100px;

margin: 0 0 8px 0;

line-height: 1.9em;

font-size: .9em; 

color: #cccccc;   /* light gray */

text-decoration: none;

padding: 5px 10px;

background: #0099cc;

border: 3px solid #cccccc;

}

.mainmenu a {

width: 100px;

margin: 0 0 8px 0;

line-height: 1.9em;

font-size: .9em; 

color: #cccccc;   /* light gray */

display: block; 

text-decoration: none;

padding: 5px 10px;

background: #0099cc;

border: 3px solid #cccccc;

} 

.mainmenu a:visited {

color: black;  

font-size: .9em;

}

.mainmenu a:hover {

font-size: 1em; 

color: black;  

border: 3px solid black;

}

.submenu  {	

position: absolute;

/*  z-index: 10;  */

left: 90px;

top: -12px;

width: 150px;

display: none;

/*   display: block;  is set in javascript after hover of mainmenu */

}

ul.submenu  {	

list-style-type: none;

}

.submenu a {	

/* position: relative;

z-index: 5;  */

width: 120px;

margin: 0;

font-size: .9em;

text-decoration: none;

line-height: 1.9em;

padding: 5px 10px;

display: block;

background: #0099cc;

color: #cccccc;  /* light gray */

border: 3px solid #cccccc;

}	

.submenu a:hover {

font-size: 1em; 

color: black;  

border: 3px solid black;

}


#extras {    /* info page - righthand sidebar  */

float: right;

width: 140px;

padding: 50px 0 0 0;

line-height: 1.5em;

}

#extras h3 {        /* extras header  */

font-size: 1.1em; 

margin: 0 8px 15px 5px;

}

#extras p {

font-size: 1em;

line-height: 1.3em;

margin: 0 8px 10px 5px;

}



#content {

/*  position: relative;

z-index: 1;   */

margin: 5px 141px 10px 174px;

padding-bottom: 30px;

width: 700px;

overflow: hidden;

text-align: justify;

border-left: 1px solid black;

border-right: 1px solid black;

font-size: 1.2em;

line-height: 1.4em;

}  

#content p {	


}	

#content ul {	

margin: 0 20px 5px 60px;

padding: 0;

}	


#content li {

margin: 5px 0 10px 0;

}    

table {

margin: 10px 20px;

}

#btn  {     /* for page with donate button  */

height: 100px;

}

#btn  h2 {    /* for page with donate button  */

margin: 0 20px;

float: left;

}

#btn a  {   /* for donate button  */

height: 100px;

width: 200px;

margin: 0 60px;

float: right;

background: #ffffff url(../images/wpsf/mouse_active.jpg) no-repeat top left;

}

#btn a:hover {     /* for donate button  */

height: 100px;

width: 200px;

margin: 0 60px;

float: right;

background: #ffffff url(../images/wpsf/mouse_over.jpg) no-repeat top left;

}

#preload {    /* to avoid blinking by pre-loading the "hover" button image  */

background: #ffffff url(../images/wpsf/mouse_over.jpg) no-repeat top left;

display: none;

} 

#footer {  /* bottom of first page - contact info */

clear: both;

color: #9a9a9a;

text-align: center;

padding: 10px 0 30px 0;

font-size: 1em;

}

#footer a {

color:  #9a9a9a;

}

#footer a:hover {

font-weight: bold;

}  


.rightjustify {     /*  right justify  - quote attributions*/

text-align: right;

font-size: .9em;

margin: 0 20px 10px 0;

}  

.noborders  {     /* for images without borders (headers) */

border: none;

}

.largebottommargin {    /* for short pages  */

margin-bottom: 180px;

}  

.midpageh4 {           /* when h4 used in mid-page  */

margin-top: 0;

font-style: normal;

}

.biggerbottommargin {     /* for spacing mid-page  */

margin-bottom: 30px;

}

.biggerleftmargin {   /* for spacing mid-page  */

margin-left: 50px;

}

#videodiv object {    /* for videos  */

/*   position: relative;

z-index: 2;   */

display: block;

margin-left: 70px;

margin-bottom: 50px;

padding: 0;

border: 8px solid #0099cc;

}

.photoonleft {     /* for photo on left  */

margin: 0 20px 20px 20px;

padding: 5px;

border: 8px solid #0099cc;

}

.captions  {     /* captions on photos  */

border: none;

font-style: italic;

text-align: center;

}

.quotes   {     /*  principal quotes   */

font-style: italic;

}

.center  {

text-align: center;

} 

.centered  {

text-align: center;

}

.clearall   {

clear: both;

}

.indented {

margin-left: 40px;

} 

.gradeheader {    /*  h3 grade headings under "did you know"  */

margin: 25px 0 0 20px;

}

.popupdiv {   /*  division triggering popups in "did you know"  */

/* position: relative;  */


}

a.popup {   /*  for initiative titles triggering popups in "did you know"  */

margin: 15px 0 8px 20px; 

text-decoration: none;

/*  display: block; */

/*  position: relative;  */

font-style: normal;

font-size: 1.1em;

color: #0099cc;

}

a.popup:hover {     /*  for initiative titles triggering popups in "did you know"  */

text-decoration: none;

font-weight: bold;

}

.hidden {   /*  for initiative descriptions - hidden then popups in "did you know"  */

/*  position: absolute;

top: 20px;

left: 230px;  */

display: none;

text-align: left;

background: #e0f3fa;

border: solid thin black;

padding: 10px 20px;

width: 540px;

}

.hidden p {

margin: 5px 0;

width: 540px;

}

.thick {

font-weight: bold;

}