body {
 margin: 0;
 padding: 0;
 font: 80%/1.5 verdana, arial;
 height: 100%; /* IE fix */
}

h1 {
 font-size: 28px;
 font-family:times,arial;
 font-style: italic;
 font-weight:bold;
 color:#FFFFFF;
 margin: 0.0em 0 0.0em 0.0em;
}

h2 {
 font-size: 20px;
 width: 99%; /* IE fix */
 padding-left: 0.6em;
 margin: 0.0em 0 0.0em 0.0em;
}

h3 {
 font-size: 15px;
 width: 99%; /* IE fix */
 margin: 0.0em 0 0.0em 0.0em;
}

p, ul, ol {
 margin-top: 0.5em;
}

a {
 text-decoration: none;
}

.menuLink {
        position: relative;
        border-style: solid;
        border-width: 1px;
        border-color: #00007d;
        background: #00007d;
        cursor: hand;
}

.menuLink a {
        font-family: Verdana, Arial, Helvetica;
        font-size: 10px;
        font-weight: bold;
        text-decoration: none;
        padding-top: 6px;
        padding-bottom: 6px;
        padding-left: 10px;
        padding-right: 6px;
        color: #FFFFFF;
}

.dropShadow {
        visibility: hidden;
        position: absolute;
        z-index: 3;
        background: #333333;
        filter: alpha(opacity=50)
}

.topSpacer {
        position: relative;
        font-family:verdana,arial;
        font-size:10px;
        color:#ffffff;
}
.Calendar {
        font-family:verdana,arial;
        font-weight: bold;
        padding-left: 10px;
        font-size:10px;
        color:#FFFFFF;
}
.CalendarText {
        font-family:verdana,arial;
        font-size:9px;
        color:#FFFFFF;
}

.topHeader {
        font-family:verdana,arial;
        font-size: 23px;
        font-weight:bold;
        color:#000030;
}

.topLink {
        font-family:verdana,arial;
        font-size:11px;
        font-weight:bold;
        color:#00007d;
        text-decoration:none;
}

.topLink:hover {
        font-family:verdana,arial;
        font-size:11px;
        font-weight:bold;
        color:#FFFFFF;
        text-decoration:none;
}

.BodyText {
        font-family:verdana,arial;
        font-size:10px;
        color:#000000;
}

.BodyTextBold {
        font-family:verdana,arial;
        font-weight: bold;
        font-size:10px;
        color:#000000;
}

.RequiredField {
        font-family:verdana,arial;
        font-weight: bold;
        font-size:10px;
        color:#AA0000;
}

.BodyTextSmall {
        font-family:verdana,arial;
        font-size:9px;
        color:#000000;
}

.BodyLink {
        font-family:verdana,arial;
        font-size:10px;
        font-weight: bold;
        color:#1A4195;
        text-decoration:none;
}

.BodyLink:hover {
        font-family:verdana,arial;
        font-size:10px;
        font-weight: bold;
        color:#3333CC;
        text-decoration:none;
}

.BodyTitle {
        font-family:verdana,arial;
        font-size:15px;
        font-weight:bold;
        color:#00007d;
}

.cb {
        height: 10px;
        width: 10px;
}

.header {
        font-family:verdana,arial;
        font-size:11px;
        font-weight:bold;
        color:#000000;
        padding-left:3px;
        padding-right:3px;
}

.iceblock {
        font-family:verdana,arial;
        font-size:9px;
        font-weight:bold;
        color:#000000;
        padding-left:3px;
        padding-right:3px;
}

.iceblockdate {
        font-family:verdana,arial;
        font-size:9px;
        font-weight:bold;
        color:#FFFFFF;
        padding-left:3px;
        padding-right:3px;
}

.iceblockconflict {
        font-family:verdana,arial;
        font-size:9px;
        font-weight:bold;
        color:#990000;
        padding-left:3px;
        padding-right:3px;
}

.iceslot {
        font-family:verdana,arial;
        font-size:9px;
        color:#000000;
        padding-left:3px;
        padding-right:3px;
}

.iceslotconflict {
        font-family:verdana,arial;
        font-size:9px;
        color:#CC0000;
        font-weight:bold;
        padding-left:3px;
        padding-right:3px;
}
.iceslotfull {
        font-family:verdana,arial;
        font-size:9px;
        color:#FF0000;
        font-weight:bold;
        padding-left:3px;
        padding-right:3px;
}

.iceslothastime {
        font-family:verdana,arial;
        font-size:9px;
        color:#906600;
        font-weight:bold;
        padding-left:3px;
        padding-right:3px;
}

.teamlist {
        font-family:verdana,arial;
        font-size:9px;
        color:#000000;
        padding-left:3px;
        padding-right:3px;
}

.link {
        font-family:verdana,arial;
        font-size:9px;
        font-weight:bold;
        text-decoration:none;
        color: #00007d;
        padding-left:3px;
        padding-right:3px;
}

.Button {
        font-family:verdana,arial;
        font-size:10px;
        background-color:#00007d;
        color:#FFFFFF;
        font-weight:bold;
        border:0.05cm outset Silver;
        cursor:hand;
}

/* From here down are the menu definitions used */
/* All <ul> tags in the menu including the first level */

.menuHeader {
        font-family: Verdana, Arial, Helvetica;
        font-size: 13px;
        font-weight: bold;
        padding-top: 6px;
        padding-bottom: 6px;
        padding-left: 3px;
        padding-right: 3px;
        color: #FFFFFF;
}

.menulist, .menulist ul {
 text-decoration: none;
 font-family:verdana,arial;
 font-size:10px;
 font-weight: bold;
 margin: 0;
 padding: 0;
 padding-left: 3px;
 width: 150px;
 list-style: none;
 position: relative;
 z-index: 100;
}

/* Submenus (<ul> tags) are hidden and absolutely positioned across from their parent */
.menulist ul {
 text-decoration: none;
 font-family:verdana,arial;
 font-size:10px;
 font-weight: bold;
 visibility: hidden;
 position: absolute;
 top: 0;
 left: 145px;
 z-index: 100;
}

/*
 All menu items (<li> tags) are relatively positioned to correctly offset their submenus.
 They have borders that are slightly overlaid on one another to avoid doubling up.
*/
.menulist li {
 text-decoration: none;
 font-family:verdana,arial;
 font-size:10px;
 font-weight: bold;
 position: relative;
 border: 0px solid #330;
 background: #00007d;
 margin-bottom: -1px;
 z-index: 100;
}
.menulist ul>li:last-child {
 text-decoration: none;
 font-family:verdana,arial;
 font-size:10px;
 font-weight: bold;
 margin-bottom: 1px;
 padding-left: 0px;
 position: relative;
 z-index: 100;
}

/* Links inside the menu */
.menulist a {
 text-decoration: none;
 font-family:verdana,arial;
 font-size:10px;
 font-weight: bold;
 display: block;
 padding: 3px;
 color: #ffffff;
 text-decoration: none;
 position: relative;
 z-index: 100;
}

/*
 Lit items: 'hover' is mouseover, 'highlighted' are parent items to visible menus.
*/
.menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus {
 text-decoration: none;
 font-family:verdana,arial;
 font-size:10px;
 font-weight: bold;
 color: #FFFFFF;
 background-color: #A9A9A9;
 position: relative;
 z-index: 100;
/*background-color: 4A5461;*/
}

.menulist a.highlighted {
 text-decoration: none;
 font-family:verdana,arial;
 font-size:10px;
 font-weight: bold;
 color: #FFFFFF;
 background-color: #A9A9A9;
 position: relative;
 z-index: 100;
}

/*
 If you want per-item background images in your menu items, here's how to do it.
 1) Assign a unique ID tag to each link in your menu, like so: <a id="xyz" href="#">
 2) Copy and paste these next lines for each link you want to have an image:
    .menulist a#xyz {
      background-image: url(out.gif);
    }
    .menulist a#xyz:hover, .menulist a.highlighted#xyz, .menulist a:focus {
     background-image: url(over.gif);
    }
*/


/* 'subind' submenu indicators, which are automatically prepended to 'A' tag contents. */
.menulist a .subind {
 float: right;
 position: relative;
 z-index: 100;
}

/* This semi-commented section exists to fix bugs in IE/Windows (the 'Holly Hack'). \*/
* html .menulist li {
 float: left;
 height: 1%;
 position: relative;
 z-index: 100;
}
* html .menulist a {
 height: 1%;
 position: relative;
 z-index: 100;
}
/* End Hack */

/*
 Prev/Next Arrow styles: I'm giving them a button appearance,
 and pushing them to the sides of the page with CSS floats.
*/

.photoArrow {
 display: none;
 width: 5em;
 padding: 0.1em;
 text-align: center;
 color: white;
 background-color: #1a4195;
 border: 1px solid #5080B0;
 border-color: #A0E0FF #205080 #205080 #A0E0FF;
 cursor: pointer;
 position: relative;
 z-index: 0;
}

.photoPrevActive {
 display: block;
 float: left;
 position: relative;
 z-index: 0;
}

.photoNextActive {
 display: block;
 float: right;
 position: relative;
 z-index: 0;
}


/*
 The list is shrunk down, with only the active item displayed.
 A cool alternative to this is to display the list with "overflow: auto" to
 the side of your photos, as the script allows you to click items to jump to them!
 You could have a list of thumbnails, linking to the full-size images, and use
 photoItemActive to put a border/background around the active image...
*/

.photoListActive {
 margin: 0 0 1em 0;
 padding: 0em 6em;
 text-align: center;
 list-style: none;
 position: relative;
 z-index: 0;
}

.photoListActive li {
 margin: 0;
 padding: 0;
 color: #567;
 display: none;
 position: relative;
 z-index: 0;
}

.photoListActive li.photoItemActive {
 display: block;
 position: relative;
 z-index: 0;
}

.photoListActive a {
 color: #34C;
 position: relative;
 z-index: 0;
}


/* It's a good idea to wrap your photos in an area the size of the largest photo */

.photoContainer {
 height: 500px;
 position: relative;
 z-index: 0;
}

/* OK, the photo area itself. Nothing too special here, a border and some padding. */

.photoArea {
 position: relative;
 visibility: hidden;
 margin: 0 auto 0 auto;
 z-index: 0;
}
.photoAreaActive {
 position: relative;
 visibility: visible;
 border: 1px solid #C0C0C0;
 padding: 4px
 z-index: 0;
}


/*
 The AutoPlay setup is complicated; the two styled spans are alternately hidden and
 shown depending on the script state. I also have a small loading message that is
 shown to the right.
*/

.photoAutoDisabled {
 display: none;
 position: relative;
 z-index: 0;
}
.photoAutoPlay, .photoAutoPause {
 display: block;
 width: 5em;
 padding: 0.1em;
 text-align: center;
 color: white;
 background-color: #1a4195;
 border: 1px solid #5080B0;
 border-color: #A0E0FF #205080 #205080 #A0E0FF;
 cursor: pointer;
 position: relative;
 z-index: 0;
}

.photoAutoPlay span, .photoAutoPause span {
 display: none;
 width: 5em; /* IE/Mac fix */
 position: relative;
 z-index: 0;
}
.photoAutoPlay .photoAutoPlayLabel {
 display: block;
 position: relative;
 z-index: 0;
}

.photoAutoPause .photoAutoPauseLabel {
 display: block;
 position: relative;
 z-index: 0;
}

.photoLoadMessage {
 float: right;
 visibility: hidden;
 font-style: italic;
 text-align: center;
 position: relative;
 z-index: 0;
}

/*
 Prev/Next Arrow styles: I'm giving them a button appearance,
 and pushing them to the sides of the page with CSS floats.
*/

/*
 The list is shrunk down, with only the active item displayed.
 A cool alternative to this is to display the list with "overflow: auto" to
 the side of your photos, as the script allows you to click items to jump to them!
 You could have a list of thumbnails, linking to the full-size images, and use
 headerItemActive to put a border/background around the active image...
*/

.headerListActive {
 font-size: 0px;
 text-align: center;
 list-style: none;
 margin: 0;
 padding: 0;
}
.headerListActive li {
 font-size: 0px;
 margin: 0;
 padding: 0;
 color: #567;
 display: none;
}
.headerListActive li.headerItemActive {
 margin: 0;
 padding: 0;
 display: block;
}
.headerListActive a {
 margin: 0;
 padding: 0;
 font-size: 0px;
 color: #34C;
}

/* It's a good idea to wrap your photos in an area the size of the largest photo */

.headerContainer {
 height: 106px;
 margin: 0;
 padding: 0;
}

/* OK, the photo area itself. Nothing too special here, a border and some padding. */

.headerArea {
 font-size: 0px;
 position: relative;
 visibility: hidden;
 margin: 0;
 padding: 0;
}
.headerAreaActive {
 visibility: visible;
 font-size: 0px;
 border: 0px solid #C0C0C0;
 margin: 0;
 padding: 0;
}

.headerLoadMessage {
 float: right;
 visibility: hidden;
 font-style: italic;
 font-size: 0px;
 text-align: center;
}