.announcements { min-height: 555px; margin-bottom: 5px; width: 320px; border: 1px solid #444; color:#B3B5B6;}
.announcements .list {background: url(/images/announcements-gradient.jpg); background-repeat:repeat-x; background-position:top;min-height:350px; }
.announcements .header { background-repeat:no-repeat; height:254px;}
.announcements h2 { text-align:center;margin-bottom:0px; }
.announcements .grid { min-width:0px; border:none;  }
.announcements .grid tr { height:50px;}
.announcements .grid td { padding:5px; padding-left:8px;}
.announcements .grid .icon { font-size:14px; color:#FFF596; font-weight:bold;}
.announcements .grid .text {color:#FFFFFF;font-size:11px;line-height:15px;}
.announcements .grid .text *{ font-size:10px;}
.announcements .grid .text a { font-size:10px; text-transform:uppercase;}
.announcements .grid .pager { height:10px; }/*margin-left:auto    but it would look bad when changing the pages because the pager buttons jumped to the center*/ 
.announcements .pager tr {height:10px;}
.announcements .grid .pager td { padding:3px;}
.announcements .pager a {color:#B3B5B6; }
.announcements .pager a:hover{color:#fff596;}
.announcements .pager td span {color:#fff; padding-bottom:3px; border-bottom:solid 1px; }
.announcements .item { padding: 0 5px 20px 15px; }


.home-flash { float: right; width: 367px; }

.home-block { margin-top:30px; padding:5px;}
.home-block .meet-team { margin-top:20px;}


/* because of stupid IE problem (not loading more than 31 css style sheet files) we have to have larger style sheet files so I moved this peice from Slider.css*/

#homepage-images
{
    width: 320px; /* important to be same as image width */
    height: 254px; /* important to be same as image height */ /*position: relative; important */
    overflow: hidden; /* important */
    background: #000; /*#fff url(/Images/homepage-gradient.png) no-repeat;*/
    z-index: 9001;
    position: relative;
}
#homepage-images .announcements-fade
{
    width: 100%;
    height: 100%;
    background: url(/images/announcements_fade.png) repeat-x left bottom;
    z-index: 20;
    position: absolute;
}

.gradient-img
{
    z-index: 9002;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 320px;
    display: block;
    background: url(/images/homepage-gradient-small.png) repeat-x bottom left;
}

#homepage-imagesContent
{
    width: 320px; /* important to be same as image width or wider */ /* position: absolute; important */
    top: 0; /* important */
    margin-left: 0; /* important */
    background: #000;
}

.homepage-imagesImage
{
    float: left; /* important */ /*position: relative;  important */
    display: none;
    position: relative; /* important */
}
.homepage-imagesImage span
{
    float: left;
}
/*
.homepage-imagesImage img {
   height:200px;width:200px;
}
*/
.homepage-images span
{
    position: absolute; /* important */
    left: 0;
    height: 0;
    font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 0px;
    width: 374px;
    background-color: #000;
    filter: alpha(opacity=0); /* here you can set the opacity of box with text */
    -moz-opacity: 0; /* here you can set the opacity of box with text */
    -khtml-opacity: 0; /* here you can set the opacity of box with text */
    opacity: 0; /* here you can set the opacity of box with text */
    color: #fff;
    display: none; /* important */
    top: 0; /*        if you put        top: 0; -> the box with text will be shown at the top of the image         if you put        bottom: 0; -> the box with text will be shown at the bottom of the image    */
}

.clear
{
    clear: both;
}