/******************************************************************************
 *
 * cc.css
 *
 * Style-sheet file for CollegiumCantorum.org
 *
 ******************************************************************************/

/*----------------------------------------------------------------------------*/

                                                                    /* COMMON */


i {font-style: italic; }                                           /* Italics */


b, span.bold {font-weight: bold; }                                    /* Bold */

span.bold
{
 font-weight:bold;
}

span.centered                                                       /* Center */
{
 display:block;
 text-align:center;
}

span.right                                                     /* Flush right */
{
 display:block;
 text-align:right;
}
                                                                     /* Block */
span.block_header
{
 display:block;
 text-align:center;
 margin-left:auto;                                               /* i.e., ... */
 margin-right:auto;                                          /* ... center it */
 margin-bottom:8px;
 font-weight:bold;
}

span.block_header_title
{
 font-size:200%;
}

span.block_header_subtitle
{
 font-size:150%;
}

                                                                /* Font stuff */
span.small
{
 font-size:75%;
}

span.small_date
{
 font-size:85%;                         /* Empirically, 80 seems to work best */
}

span.large
{
 font-size:135%;                       /* Empirically, 135 seems to work best */
}

                                                               /* Font colors */
span.red_large
{
 color:#ff0000;     /* Red */
 font-weight: bold;
 font-size: 150%;
}

span.red
{
 color:#ff0000;     /* Red */
 font-weight: bold;
}

span.venue_red
{
 color:#ff0000;     /* Red */
 font-weight: bold;
}


                                                               /* Page Stuff */
span.uninitialized_page
{
 font-weight:bold;
 font-size:125%;
 text-align:center;
}

/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

                                                                      /* Body */
body
{
 background-color:#b0e0e6;                                      /* Powder Blue*/
}

/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

                                                            /* Navigation Bar */

a.nav:link, a.nav:visited {background-color: #00aa00;                /* Green */
                           color: black;
                           border: 2px solid black;
                           padding: 5px 10px 5px 10px; /* top,right,bottom,left */
                           margin-top: 1em;
                           margin-bottom: 10px;
                           text-decoration: none;
                           font-weight: bold;
                           display: inline-block;
                          }

a.nav:hover { background-color: blue; color: white;}

a.nav:active { background-color: red; color:white;}

span.disabled_link {background-color: gray;
                    color: white;
                    border: 2px solid black;
                    padding: 5px 10px 5px 10px;   /* top, right, bottom, left */
                    margin-top: 10px;
                    margin-bottom: 5px;
                    text-decoration: none;
                    display: inline-block;
                   }

/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

                               /* "Last updated" line at bottom of every page */
span.last_updated
{
 display:block;
 color:black;
 text-align:center;
 margin-top:1em;
 font-weight:bold;
 font-size:75%;
}

/*----------------------------------------------------------------------------*/

                                                                      /* HOME */


/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

                                                                      /* Logo */

                        /* Empirical: touch a keystroke, and break it forever */
span.logo_homepage
{
 display:block;
 /* text-align:center; */
 padding-top:5px;
 text-align:center;
}

span.logologo
{
 font-size:200%;
 font-style:italic;
 font-weight:bold;
}

span.sublogo
{
 font-size:100%;
 font-weight:bold;
}

/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

                                                                /* Main Table */
table.homepage
{
 border-style:none;  /* Borderless */
 width:90%;
 height:84%;
 border-collapse:collapse;
 margin-left:auto;
 margin-right:auto;
}

td.homepage
{
 border-style:none;  /* Borderless */
 width:50%;
 height:100%;
}

/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

                                                     /* Main Table Left Block */
span.homepage_left
{
 display:block;
 background-color:#bebebe;                                      /* Light Gray */
 padding:10px;
 height:41em;
}

table.homepage_left
{
 border: 2px solid black;
 border-collapse:collapse;
 width:100%;
 height:100%;
}

td.homepage_left_top
{
 border: 2px solid black;
 border-collapse:collapse;
 background-color:#bebebe;                                      /* Light Gray */
 padding-top: 17px;
 padding-left: 17px;
 padding-right: 17px;
 padding-bottom: 17px;
 width:100%;
 height:36%;
 vertical-align: middle;
}

td.homepage_left_middle
{
 border: 2px solid black;
 border-collapse:collapse;
 background-color:#bebebe;                                      /* Light Gray */
 padding: 10px;
 width:100%;
 height:32%;
 vertical-align: middle;
}

td.homepage_left_bottom
{
 border: 2px solid black;
 border-collapse:collapse;
 background-color:#bebebe;                                      /* Light Gray */
 padding: 10px;
 width:100%;
 height:32%;
 vertical-align: middle;
}

/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

                                                    /* Main Table Right Block */
span.homepage_right
{
 display:block;
 background-color:#bebebe;                                      /* Light Gray */
 padding-top:1px;
 padding-bottom:10px;
 padding-left:10px;
 padding-right:10px;
 height:41em;
}

span.next_performance
{
 font-size: 150%;
}

span.program_title
{
 font-size: 200%;
}

span.program_subtitle_small
{
 font-size: 125%;
}

span.program_subtitle_medium
{
 font-size: 150%;
}

span.program_subtitle_large
{
 font-size: 175%;
}

span.contribution_note
{
 display: block;
 padding: 5px;
 text-style: bold;
 margin-top: 1em;
 margin-bottom: 1em;
}

span.admission_note
{
 font-size:150%;
}

span.children_note
{
 display: block;
 margin-bottom: 1em;
}

span.please_check_website
{
 display: block;
}

table.homepage_right
{
 border: 2px solid black;
 border-collapse:collapse;
 background-color:#bebebe;                                      /* Light Gray */
 width:100%;
 height:100%;
}

td.homepage_right
{
 border: 2px solid black;
 background-color:#bebebe;                                      /* Light Gray */
 width: 100%;
 height 100%;
 text-align: center;
 padding: 15px;
}

td.homepage_right_pandemic
{
 border: 2px solid black;
 background-color:#bebebe;                                      /* Light Gray */
 width: 100%;
 height 100%;
 text-align: left;
 padding: 15px;
}
                                                        /* Announcement Venue */
span.announcement_venue
{
 display:block;
 margin-left:auto;
 margin-right:auto;
 margin-bottom:1em;
}

table.announcement_venue
{
 border-collapse:collapse;
 margin-left:auto;
 margin-right:auto;
 margin-bottom:1em;
}

th.announcement_venue,td.announcement_venue
{
 padding:8px;
 border: 2px solid black;
}

span.concert_description
{
 display:block;
 font-weight:bold;
 margin-top:1em; /* Hideous hard-coding: "vertical-align:middle;" doesn't work. */
 margin-bottom:1em;
}

span.next_announcement_soon
{
 display:block;
 padding-top:0%;
 font-size:175%;
 font-weight:bold;
}

/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

                                                                     /* Image */

        /* Touch a keystroke of this Image stuff and it will NEVER work again */

span.imagebox                    /* Container for Image and accompanying text */
{
 float:left;                             /* Implies display:block, apparently */
 color:black;
 background-color:white;
 margin-right: 17px; /* Only need right because of padding in .homepage_left_top */
 padding-top: 8px;
 border: 4px solid black;
 text-align:center;
}

span.image_package
{
 display:block;
 background-color:white;
 text-align:center;
 font-size: 80%"
 padding: none;
}

span.image
{
/* color:black; /* WHY??? Necessary? Valuable? */
}
                               /* God almighty doesn't know why there is */
                               /* a blank line between the 2 image-text */
                               /* spans ... or why padding: doesnt' work here */
span.imagetext
{
 font-size:80%;
 font-weight:bold;
 padding-left: 10px;
 padding-right: 10px;
}

span.cc_text_with_image /* Not part of the Image Box, but runs alongside it */
{
 display:block;
 text-align:left;
}

/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
# HERE
/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

table.PayPal_table   /* NOT USED? */
{
 border: 2px solid black;
 border-collapse:collapse;
 width:100%;
 height:100%;
}

/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

td.PayPal_datum  /* NOT USED? */
{
 border: 2px solid black;
 border-collapse:collapse;
 background-color:#bebebe;                                      /* Light Gray */
 padding-top: 17px;
 padding-left: 17px;
 padding-right: 17px;
 padding-bottom: 17px;
 width:100%;
 height:36%;
 vertical-align: middle;
}

/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
                                                                 /* PayPal Box*/

              /* Touch a keystroke of this stuff and it will NEVER work again */

span.PayPal_box          /* Container for PayPal "button" and accompanying text */
{
/* float:left;                         *'    /* Implies display:block, apparently */ 
 display:block;
 color:black;
/* background-color:white; */
 background-color:#b0e0e6; /* Powder blue */
/* margin-right:180px;  */ /* Only need right because of padding in .homepage_left_top */
 margin-left:198px;  /* Only need right because of padding in .homepage_left_top */
 margin-bottom:10px;
/* padding-top:8px; */
 padding-top:3px;
 border:2px solid black;
 text-align:center;
 width:50%;
}

/*----------------------------------------------*/

span.PayPal_package
{
 display:block;
/* background-color:white; */
 background-color:#b0e0e6; /* Powder blue */
 text-align:center;
 font-size: 80%"
 padding: none;
}

span.image
{
/* color:black; /* WHY??? Necessary? Valuable? */
}
                               /* God almighty doesn't know why there is */
                               /* a blank line between the 2 image-text */
                               /* spans ... or why padding: doesnt' work here */
span.PayPal_text
{
 font-size:100%;
 font-weight:bold;
 padding-left: 10px;
 padding-right: 10px;
}

/* span.cc_text_with_image */ /* Not part of the Image Box, but runs alongside it */
/* {                       */
/*  display:block;         */
/*  text-align:left;       */
/* }                       */

/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/*----------------------------------------------------------------------------*/

                                                /* MEMBERS/COLLEGIUM CANTORUM */
span.members
{
 display:block;
 background-color:#bebebe;                                       /* Light Gray*/
 padding:8px;
 width:40em;
 border:2px solid black;
 margin-left:auto;                                               /* i.e., ... */
 margin-right:auto;                                 /* ... center it the block*/
 text-align:center;
}

/*----------------------------------------------------------------------------*/

                                                                /* Another CC */
span.other_cc
{
 display:block;
 background-color:#bebebe;                                      /* Light Gray */
 width:40em;
 border:2px solid black;
 padding:8px;
 margin-left:auto;                                               /* i.e., ... */
 margin-right:auto;                                          /* ... center it */
}

/*----------------------------------------------------------------------------*/

                                                                     /* ABOUT */
span.about
{
 background-color:#bebebe;                                      /* Light Gray */
 display:block;
 width:50em;
 text-align:left;
 padding:8px;
 border:2px solid black;
 margin-left:auto;                                               /* i.e., ... */
 margin-right:auto;                                          /* ... center it */
}

/*----------------------------------------------------------------------------*/

                                         /* PARENT ORGANIZATION/CANTARE, INC. */
span.cantare
{
 background-color:#bebebe;                                      /* Light Gray */
 display:block;
 width:50em;
 text-align:left;
 padding:8px;
 border:2px solid black;
 margin-left:auto;                                               /* i.e., ... */
 margin-right:auto;                                          /* ...center it. */
}

/*----------------------------------------------------------------------------*/

                                        /* FOR SINGERS/INTERESTED IN JOINING? */
table.for_singers_page
{
 border-collapse:collapse;
 background-color:#bebebe;                                      /* Light Gray */
 width: 100%;
 height: 90%;
}

td.for_singers_page_top
{
 border-top:none;
 border-left:none;
 border-right:none;
 border-bottom: 2px solid black;
 background-color:#b0e0e6;                                      /* Powder Blue*/
 text-align: center;
 font-weight: bold;
 padding: 5px;
}

td.for_singers_page_bottom
{
 border: 2px solid black;
 text-align: center;
 font-weight: bold;
 padding-top: 15px;
 padding-Bottom: 15px;
}

td.for_singers_page_datacell
{
 border: 2px solid black;
 text-align: left;
 padding-top: 2px;
 padding-right: 10px;
 padding-bottom: 2px;
 padding-left: 10px;
}

span.for_singers_page_heading                       /* For Interested Singers */
{
 float:left;                             /* Implies display:block, apparently */
 font-size:200%;
 color:black;
 background-color:#00aa00;                                           /* green */
 margin-right:10px;
 padding-left:5px;
 padding-right:5px;
 border: 2px solid black;
 text-align:center;
}

span.for_singers_span
{
 background-color:#bebebe;                                      /* Light Gray */
 display:block;
/* border: 1px solid black; */
 width:60em;
 margin-left:auto;                                               /* i.e., ... */
 margin-right:auto;                                          /* ... center it */
}


/*----------------------------------------------------------------------------*/

                                                                  /* SCHEDULE */
span.schedule_page
{
 display:block;
 width:70em;                                                     /* Empirical */
 margin-left:auto;                                               /* i.e., ... */
 margin-right:auto;                                          /* ... center it */
 margin-bottom:1em;
}

table.schedule_page
{
 display:block;
/* border: 2px solid black; */
 border-collapse:collapse;
 width: 100%;                                                     /* Empirical */
 height: 100%
 margin-left:auto;                                                /* i.e., ... */
 margin-right:auto;                                           /* ... center it */
 margin-bottom:1em;
}

th.schedule_page
{
 border: 2px solid black;
 padding: 5px;
 background-color: #00aa00; /* Green */
 text-align: center;
 width: 13%;
}

td.schedule_page
{
 border: 2px solid black;
 padding: 5px;
 background-color: #bebebe; /* Light Gray */
 text-align: center;
 width: 13%;
}

th.schedule_page_lit_column
{
 border: 2px solid black;
 padding: 5px;
 background-color: #00aa00; /* Green */
/* text-align: center; */
 width: 35%;
}

td.schedule_page_lit_column
{
 border: 2px solid black;
 padding: 5px;
 background-color: #bebebe; /* Light Gray */
 text-align: left;
 width: 35%;
}

td.schedule_page_venue
{
 border: 2px solid black;
 padding: 5px;
 background-color: #bebebe; /* Light Gray */
 text-align: center;
 width: 25%;
 vertical-align: top;
}


/*----------------------------------------------------------------------------*/

                                                                    /* LISTEN */

table.listen
{
 width=100%;
 border-collapse:collapse;
 margin-left:auto;
 margin-right:auto;
}

th.listen
{
 background-color:#00aa00;                   /* or ...bb... Green, in any case*/
}

td.listen,td.listen_center
{
 background-color:#bebebe;                                      /* Light Gray */
}

th.listen,td.listen,td.listen_center
{
 padding:8px;
 border: 2px solid black;
}

td.listen_center
{
 text-align:center;
}

/*----------------------------------------------------------------------------*/

                                                                      /* PLAY */
span.recording_copyright
{
 display:block;
 margin-top:1em;
 font-size:75%;
 font-weight:bold;
 text-align:center;
}

span.play_page_narrow,span.play_page_wide,span.play_page_medium
{
 display:block;
 background-color:#bebebe;
 border:2px solid black;
 padding:8px;
 margin-left:auto; /* i.e., ... */
 margin-right:auto; /*... center it */
}

span.play_page_narrow
{
 width:40em;
}

span.play_page_medium
{
 width:50em;
}

span.play_page_wide
{
 width:80em;
}

/*----------------------------------------------------------------------------*/

                                                                   /* CONTACT */

                     /* Touch a KEYSTROKE of any of this and break EVERYTHING */

table.contact_page
{
 border-collapse:collapse;
 border: 2px solid black;
 background-color:#bebebe;                                      /* Light Gray */
 width: 98%;
 height: 90%;
 margin: 5px;
}

th.contact_page
{
 border: 2px solid black;
 background-color:#00aa00;                   /* or ...bb... Green, in any case*/
 text-align: center;
}

td.contact_page
{
 border: 2px solid black;
 text-align: center;
}

span.contact_page
{
 background-color:#bebebe;                                      /* Light Gray */
 display:block;
 width: 40em;
 height: auto;
 padding:8px;
 border:2px solid black;
 margin-left:auto;                                               /* i.e., ... */
 margin-right:auto;                                          /* ... center it */
}

/*----------------------------------------------------------------------------*/