/*   Style sheet for AFAN    */
/*   Updated: 02/05/08       */
/*  This uses the blue color scheme.   */


BODY {
  background-color: #FFFFFF;
  color: #000000;
  font-family: verdana, arial, helvetica, sans-serif;
  font-style: normal;
  margin: 20px;
}


P, UL, LI, TD, H1, H2, H3, H4, H5, H6, CENTER, LEFT, RIGHT {
  font-family: verdana, arial, helvetica, sans-serif;
}

P, UL, LI, TD, INPUT, CENTER, LEFT, RIGHT {
  font-size: 13px;
}


P {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 13px;
  padding-left: 5px;
  padding-right: 5px;
}
 

A:link {            /* unvisited link */
  color: #343799;
}

A:visited {         /* visited link */
  color: #343799;
}

A:active {          /* active link */
  color: #FF0000;   /* was #04A604 */
}

A:hover {           /* hover link */
  color: #FF0000;   /* was #04A604 */
}

/* the following are for links in the menu column, */
/* which need to be different from the main page   */
/* links, or else they disappear.                  */
/*  12/04/07: bloomingtonchecker.com - using these in main menu    */

A.menu:link {       /* unvisited */
  color: #343799;
  text-decoration: none;
}

A.menu:visited {    /* visited */
  color: #343799;
  text-decoration: none;
}

A.menu:active {     /* active */
  color: #FF0000;
  text-decoration: none;
}

A.menu:hover {      /* hover */
  color: #FF0000;
  text-decoration: none;
}





/* General classes */

.normal {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 13px;
  font-weight: normal;
}

.heading {           /* this will be the same as .larger + .strong */
  font-family: verdana, arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 15px;
}


.smaller {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 11px;
}

.extra-small {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 10px;
}

.larger {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 15px;
}

.extra-large {   /* and for even bigger type ... */
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 23px;
  font-weight: bold;
}

.strong {
  font-family: verdana, arial, helvetica, sans-serif;
  font-weight: bold;
}

.italic {            /* italic */
  font-family: verdana, arial, helvetica, sans-serif;
  font-style: italic;
}

.courier {           /* use Courier font for special effects (not Courier, actually, but web default */
  font-family: courier, roman, serif;
  font-size: 11px;
  font-weight: normal;
}

.bold {
  font-weight: bold;
}



.blue {
  color: blue;
}

.yellow {
  color: yellow;
}

.cyan {
  color: cyan;
}

.red {
  color: red;
}

.white {
  color: white;
}

.black {
  color: black;
}


.lightgreen {
  color: #91D1DA;
}


.error {                              /* use for error messages */
  border: 1px solid #FF0000;          /* use as a DIV, not a SPAN, for multi-line messages */
  padding: 2px;
  background-color: #FFFFCC;
  font-weight: bold;
  color: #FF0000;
  margin-right: 100px;
  margin-left: 100px;
}




.menu_item {                    /* used for the text of the individual items in the main menu */
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
 
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 4px;
  padding-right: 4px;
}




.page_title {                /* to put a title on the page   */
  font-family: verdana, arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 15px;

  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #000000;
}


.big_page_title {                /* to put a BIGGER title on the page   */
  background-color: #C3D2E6;

  line-height: 200%;

  font-family: verdana, arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 18px;

  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: #343799;
}

.section {          /* goes along under each big_page_title */

 border-left-style: solid;
 border-left-width: 2px;
 border-left-color: #C3D2E6;

}










.page_section {       /* this is a section of a page, it will have a border and heading */
                      /* this and page_section_heading are replacing page_title, big_page_title, section, etc. */

/*  border-top-style: solid;   */
/*  border-top-width: 1px;     */
/*  border-top-color: #343799; */

  margin-top: 10px;
  margin-bottom: 10px;

  border-left-style: solid;
  border-left-width: 8px;
  border-left-color: #C3D2E6;

  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #343799;

  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #343799;

}



/* ****** HACK TO TRY ON NEW INDEX PAGE WITHOUT MUCKING UP OTHER PAGES.... */
.page_section_home {       /* this is a section of a page, it will have a border and heading */
                      /* this and page_section_heading are replacing page_title, big_page_title, section, etc. */

/*  border-top-style: solid;   */
/*  border-top-width: 1px;     */
/*  border-top-color: #343799; */

  margin-top: 0px;
  margin-bottom: 10px;

  border-left-style: solid;
  border-left-width: 8px;
  border-left-color: #C3D2E6;

  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #343799;

  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #343799;

}








.page_section_heading {        /* heading enclosed in the above page_section   */
  background-color: #C3D2E6;

  line-height: 200%;

  font-family: verdana, arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 18px;

}






/* Now some standard features of all pages */
/* We will use id's here                   */

#logo_header {            /* this is the top part of the page, all the way across, where we put the logo, etc.  */
  position: relative;     /* normal flow, coordinates are offsets from edges  */

  top: 0px;
  left: 0px;

  margin-top: 0px;
  margin-right: 20px;
  margin-bottom: 0px;
  margin-left: 20px;

  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;

  border: none;

  background-image: url(http://www.afan.org/images/starbg.jpg); 
}






#top_logo {              /* this is the actual logo image    */
  position: relative;     /* normal flow, coordinates are offsets from edges  */
  text-align: center;

  top: 0px;
  left: 0px;

/*  width: 798px; */
/*  height: 174px; */
  height: 153px;

  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;

  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;

  border: none;
}


#mainmenu {
  position: relative;
  text-align: center;
 
  margin-top: 0px;

  padding-top: 2px;
  padding-right: 0px;
  padding-bottom: 2px;
  padding-left: 0px;

  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: #343799;

  border-right-style: none;

  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #343799;

  border-left-style: none;

  background-color: #FFFFFF;
}



#pagetext {
  position: relative;

  top: 10px;

  margin-top: 0px;
  margin-right: 100px;
  margin-bottom: 0px;
  margin-left: 100px;

  padding-top: 20px;    /* need this because big_page_title sections are going off the top */
  padding-right: 5px;
  padding-bottom: 0px;
  padding-left: 5px;
}




/*   *****  ANOTHER HACK    */
#pagetext_home {
  position: relative;

  top: 10px;

  margin-top: 0px;
  margin-right: 100px;
  margin-bottom: 0px;
  margin-left: 100px;

  padding-top: 0px;    /* need this because big_page_title sections are going off the top */
  padding-right: 5px;
  padding-bottom: 0px;
  padding-left: 5px;
}



/* Copyright notice */
#copyright {
/*  width: 600px; */

  font-size: 11px;
 
  margin-top: 50px;
  margin-right: 20px;
  margin-bottom: 0px;
  margin-left: 20px;

  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 0px;
  padding-right: 0px;

  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: #000000;

  border-right-style: none;

  border-bottom-style: none;

  border-left-style: none;

  clear: both;
}





/* two page columns - need to position them absolutely, at least for now */
/*  allow about 150 pixels at the top of the page for logo and menu      */


#leftcolumn {            /* left-hand column of the page     */
 position: absolute;

 left: 20px;
 top: 300px;
 width: 105px;
 padding: 3px;
}

#rightcolumn {          /* right-hand column of the page     */
 position: absolute;

 left: 120px;
 top: 300px;
 padding: 3px;
}







/* align text left (with right on same line) */
.alignleft {
 float: left;
}

/* align text right (with left on same line) */
.alignright {
  float: right;
}




/* This is for display header bars on the different sections on the "view reservations" page. */
/* It will help separate one section from another.                                            */
.headerbar {                                    /* make it a class, as there will be more than one on a page */
  font-family: verdana, arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 13px;

  background-color: #FFCBB8;

  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: #FF7B4B;
}




/* Basically, this is page_title with underlining only on the text. */
.sectiontitle {
  font-family: verdana, arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 15px;

  text-decoration: underline;

}


/* For Steering Committee working committees section,  */
/*  to alternate between white and green               */
/* 02/05/08: In this one, it is white and blue, but    */
/*  we will leave it called workcommgreen so as not    */
/*  to have to change too much....                     */
.workcommwhite {
  background-color: #FFFFFF;

  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 15px;

  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: #343799;

  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: #343799;

  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #343799;
}

.workcommgreen {
  background-color: #E8EEF5;   /* #C3D2E6; */

  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 15px;

  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: #343799;

  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: #343799;

  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #343799;
}


/* These are for bylaws, to indent section and subsection headings */
.indent_20 {             /* indent by 20 px - you can reuse (nest) for more indentations  */
  margin-left: 20px;     /* in an <li> doesn't seem to work, though...  */
}


.indent_40 {
  margin-left: 40px;
}


.section_heading {           /* this is the same as .heading, but with a bit of a margin at the top */
  font-family: verdana, arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 15px;

  margin-top: 45px;

}