/**********************************************************************/
/* Here to next big comment defines the format of common HTML objects */
/**********************************************************************/

body {
    font-size: 1px;
    background-image: url('http://www.maroonbellsmorris.com/images/morrisbanner.jpg');
}

p {
    font-size: 1em;
    font-family: times, arial, "lucida console", sans-serif;
    text-align: left;
}

p.dropcap:first-letter {
    font-size:   300%;
    font-weight: normal;
    font-family: times, arial, "lucida console", sans-serif;
    padding-top: 0.1em;
    float:       left;
    width:       1em;
    color:       #800000; /* maroon */
}

div.floatleft {
    float: left;
}

div.floatright {
    float: right;
}

a:link, a:visited {
    color:           #800000; /* maroon */
    text-decoration: underline;
}

li {
    font-size:   1em;
    font-family: times, arial, "lucida console", sans-serif;
    font-weight: normal;
    text-align:  left;
}
ul {
    font-size:   1em;
    font-family: times, arial, "lucida console", sans-serif;
    font-weight: bold;
    text-align:  left;
}
/**********************************************************************/
/* Here to next big comment defines clever stuff that doesn't work with IE */
/**********************************************************************/

/* 
 * The 'fixedTopCenter' class places the element just below 
 * the top of the browser window.
 */ 
.fixedTopCenter 
{
        position: fixed;
        top: 1em;
        z-index: 1;
        text-align:center;
        width: 100%;
}


/* 
 * The 'copyrightBottomLeft' class places the element just above 
 * the bottom of the browser window.
 */ 
.copyrightBottomLeft 
{
    font-size:  8pt;
    top:        auto;
    left:       0em;
    bottom:     0em;
    z-index:    1;
    text-align: center;
    width:      24em;
    height:     2em;
    color: #FFD700; /* gold */;
}
.counterBottomRight 
{
    float: right;
    font-size:  8pt;
    top:        auto;
    left:       auto;
    right:      0em;
    bottom:     0em;
    z-index:    1;
    text-align: right;
    width:      24em;
    height:     2em;
    color: #FFD700; /* gold */;
}


/*************************************************/
/* Here to next big comment defines table stuff  */
/*************************************************/
/* All 'TABLE' elements using CLASS 'repertoire' will have the 
 * characteristics described below.
 */
table.repertoire
{
   position: relative; 
   background-color:white;
   width: 100%;

   font-family: arial;
   font-size:   0.75em;
   text-align:  left;

   border-collapse: separate;
   border-right: 1px solid #FFD700; /* gold */
   border-left:  1px solid #FFD700; /* gold */
   border-spacing:       0em;
   padding:              0em;
}
th.repertoire
{
    background-color: #FFD700; /* gold */
    color: black;
    font-weight:      bold;
    border-bottom:  1px solid #FFD700; /* gold */
}
td.repertoire
{
    background-color: white;
    font-weight:      normal;
    border-bottom:  1px solid #FFD700; /* gold */
}

a.repertoire:visited, a.repertoire:link
{
    color: black;
    text-decoration: underline;
}
/* All 'TABLE' elements using CLASS 'val_table' will have the 
 * characteristics described below.
 */
table.val_table
{ 
   background-color:white;

   font-family: arial;
   /* font-size:    10em; */

   width:  100%;       /* Fill the width of the browser window  */
   height: 100%;       /* Fill the height of the browser window */

   border-style:       solid;
   border-color:       black;
   border-width:         0em;  /* no border */
   border-collapse: separate;
   border-spacing:       0em;
   padding:              0em;
}

caption.val_table
{
   background-color:white;
   color:black;

   text-align:  center;
   /* font-size:    10em; */
   font-family:  times;
   border-style: solid;
   border-width:   0em;
}

th.val_table
{
   position:        relative;
   background-image: url('http://www.maroonbellsmorris.com/images/morrisbanner.jpg');
   color:              black;

   text-align:  center;
   border-width:   0em;
}


tr.val_table
{
    width:100%;
}

td.val_table
{  
   background-color:white;

   height:          100%; 
 
   border-style:  dashed;
   border-width:     0px;
   text-align:    center;
   vertical-align:   top;
   padding: 5px;
}


/*****************************************************************/
/* Here to next big comment defines the top banner with pictures */
/*****************************************************************/
.bannertext {
    color:        #FFD700; /* gold */

    height:       1.20em; 
    margin-left:  auto;  
    margin-right: auto;  

    text-align: center;
    font-size:    3.0em;
    font-family: times;
    overflow:   hidden;

    z-index:        1;  
}

.bannersubtext {
    color:	  #FFD700; /* gold */

    width:       800px;     
    height:       1.25em; 
    margin-left:  auto;  
    margin-right: auto;  

    text-align: center;
    font-size:    0.9em;;
    font-family: times;
    overflow:   hidden;
}

#pic {
    background-image: url('http://www.maroonbellsmorris.com/images/morrisbanner.jpg');
    color:#FFD700; /* gold */

    position:relative; 

    height:      160px;

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

    text-align: center;
    font-size:     1px;
    font-family: times;
    display:     block;

    /* This puts a scrollbar (maroon in IE) under the banner pics */
    height:      176px; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    scrollbar-base-color:#800000; /* maroon */ 
}

#pic a .large {
    position: absolute;
    border:   0px;
    display:  block;
    height:   1px;
    width:    1px;
    left:     1px;
    top:      1px;
}

#pic a:hover {
    /* color:           white; */
    text-decoration: none;
}
#pic a:hover .large {
    z-index:        1;  

    position: fixed; 
/*  top:      35%; 
  left:     25%; */
    top: auto;
    left: auto;
    bottom:  0px;
    right:   0px;/**/
    border-color: #FFD700; /* gold */
    border-width: 10px;
    border-style: ridge;
    display:  block; 
}

#pic a img {
    border:  0px;
}

/**************/
/* image #1   */
/**************/
#pic a.p1, #pic a.p1:visited {
    position:        absolute;
    top:             0px;
    left:            0px;
}

#pic a.p1:hover .large {
    width:    500px; 
    height:   333px; 
}

/**************/
/* image #2   */
/**************/
#pic a.p2, #pic a.p2:visited {
    position:        absolute;
    top:               0px;
    left:            139px;
}

#pic a.p2:hover .large {
    width:    500px; 
    height:   333px; 
}

/**************/
/* image #3   */
/**************/
#pic a.p3, #pic a.p3:visited {
    position:        absolute;
    top:               0px;
    left:            237px; /* (139+98) */
}

#pic a.p3:hover .large {
    width:    358px; 
    height:   500px; 
}

/**************/
/* image #4   */
/**************/
#pic a.p4, #pic a.p4:visited {
    position:        absolute;
    top:               0px;
    left:            337px; /* (237 + 100) */
}

#pic a.p4:hover .large {
    width:    454px; 
    height:   500px; 
}

/**************/
/* image #5   */
/**************/
#pic a.p5, #pic a.p5:visited {
    position:        absolute;
    top:               0px;
    left:            482px; /* (337 + 145) */
}

#pic a.p5:hover .large {
    width:    500px; 
    height:   443px; 
}

/**************/
/* image #6   */
/**************/
#pic a.p6, #pic a.p6:visited {
    position:        absolute;
    top:               0px;
    left:            650px; /* (482 + 168) */
}

#pic a.p6:hover .large {
    width:    500px; 
    height:   333px; 
}

/**************/
/* image #7   */
/**************/
#pic a.p7, #pic a.p7:visited {
    position:        absolute;
    top:               0px;
    left:            796px; /* (650 + 146) */
}

#pic a.p7:hover .large {
    width:    500px; 
    height:   333px; 
}

/**************/
/* image #8   */
/**************/
#pic a.p8, #pic a.p8:visited {
    position:        absolute;
    top:               0px;
    left:            976px; /* (796 + 180) */
}

#pic a.p8:hover .large {
    width:    341px; 
    height:   500px; 
}

/**************/
/* image #9   */
/**************/
#pic a.p9, #pic a.p9:visited {
    position:        absolute;
    top:               0px;
    left:           1085px; /* (976 + 109) */
}

#pic a.p9:hover .large {
    width:    291px; 
    height:   333px; 
}

/**************/
/* image #10  */
/**************/
#pic a.p10, #pic a.p10:visited {
    position:        absolute;
    top:               0px;
    left:           1225px; /* (1085 + 140) */
}

#pic a.p10:hover .large {
    width:    353px; 
    height:   500px; 
}

/**************/
/* image #11  */
/**************/
#pic a.p11, #pic a.p11:visited {
    position:        absolute;
    top:               0px;
    left:           1335px; /* (1225 + 110) */
}

#pic a.p11:hover .large {
    width:    333px; 
    height:   500px; 
}

/**************/
/* image #12  */
/**************/
#pic a.p12, #pic a.p12:visited {
    position:        absolute;
    top:               0px;
    left:           1444px; /* (1335 + 109) */
}

#pic a.p12:hover .large {
    width:    230px; 
    height:   333px; 
}

/**************/
/* image #13  */
/**************/
#pic a.p13, #pic a.p13:visited {
    position:        absolute;
    top:               0px;
    left:           1569px; /* (1444 + 125) */
}

#pic a.p13:hover .large {
    width:    285px; 
    height:   500px; 
}

/*****************************************************************/
/* Here to next big comment defines the left menus */
/*****************************************************************/

.menu {
    text-align:    right;
    vertical-align: middle;
    font-size:      16px;
    font-weight:  bolder;
    font-family:   times;
}
 
.menu_box {
    background-image: url('http://www.maroonbellsmorris.com/images/menu_bg_grey_diagnal_fade.jpg');
    background-repeat: no-repeat;    
    width:        12.0em; 
    height:        2.5em; 
} 

.menu_box_current {
    background-image: url('http://www.maroonbellsmorris.com/images/menu_bg_yellow_diagnal_fade_current.jpg');
    background-repeat: no-repeat;    
    width:        12.0em; 
    height:        2.5em; 
} 

.menu a:link, .menu a:visited {
    color:#800000; /* maroon */
    text-decoration: none;
}

.menu a:hover {
    color:blue;
    text-decoration: none;
}

.menu_space {
    height:   2px;
    width:    2px; 
    }

/*****************************************************/
/* Here to next big comment defines the album styles */
/*****************************************************/
#album_box {
    float:  left;
    height: 15em;
    width:  12em;
    display:  block;
    border: 1px; 
}
#album_box p {
    font-size: 1em;
    font-family: times, arial, "lucida console", sans-serif;
    text-align: center;
    vertical-align: bottom;
}

#album_box img {
    border:   0px;
}

#album_box a {
    border:   0px;
}
/*****************************************************/
/* Here to next big comment defines the credt styles */
/*****************************************************/
.pic_credit {
    text-align: right;
    font-size: 0.75em;
    font-style: italic;
}