/* File Created: October 1, 2014 */
*
{
    margin: 0;
    padding: 0;
}
body
{
 /*   font-size: 62.5%;  */
    font-family: 'Lucida Grande', Helvetica, Sans-Serif;
    text-align: left;
    background: #121212;
    color: #686999;
    padding: 20px;
}
div.ticker {
    text-align: left;
    background-color: #f7f7f7;
 /*   border: 1px solid #bbb;       */
    margin: 5px;
}
div.js-hidden
{
    display: block;
    overflow: hidden;
    
}
div.narrow {
    width: 200px;
}

div.medium {
    width: 400px;
}

div.mediumlong
{
    width: : 100%;
}

div.long {
    width: 800px;
}

div.stretched {
    width: 99%;
}

div.threeRows {
    height: 300px;
}

div.twoRows {
    height: 200px;
}

div.oneRow {
    height: 100px;
}
div.pictureRow
{
  /*  height: 460px;  */
  height: 60%;
}
    

div.ticker ul {
   list-style: none outside;
   margin: 0;
   padding: 5px;
}

div.oneRow li, div.twoRows li, div.threeRows li, div.pictureRow li {
    margin-bottom: 5px;
    position: relative;
    height: 100px;
}

div.ticker li .ArticlePicture
{
    float: left;
    width: 48%;
    padding-right: 5px;
    position: relative;
    
    }

div.ticker li .title {
    font-weight: bold;
    font-size: 10pt;
    color: #3d3d3d;
    float: left;
    width: 48%;
    clear: right;
    text-align: center;
    white-space: normal;
    margin-left: 5px;
    position: relative;
}

div.ticker li .cutline {
    font-size: 8pt;
    color: #3d3d3d;
    float: left;
    width: 48%;
    white-space: normal;
    margin-left: 5px;
    position: relative;
}

div.ticker li .footer {
    font-size: 8pt;
    text-align: right;
    font-weight: bold;
}
div.controls
{
    float: right;
    padding: 5px;
    z-index: 999;
    position: relative;
}
tr
{
    vertical-align: top;
}
.post
{
    width: 50px;
}


#contentContainerS
{
    width: 550px;
    height: 350px;
    border: 5px black solid;
    overflow: hidden;
}
#wrapperS
{
    width: auto;
    position: relative;
    left: 0px;
}
  .content
  {
      float: left;
      width: 550px;
      height: 350px;
      white-space: normal;
      background-repeat: no-repeat;
  }
  
  #itemOne
  {
      background-color: Gray;
      background-image: url(_images/PAO/AMC_Visit_002.jpg);
  }
  #itemTwo
  {
      background-color: Lime;
      background-image: url(_images/PAO/B-Line Modernization 01.jpg);
  }
  #itemThree
  {
      background-color: Maroon;
      background-image: url(_images/PAO/Bad_Day_001.jpg);
  }
  #itemFour
  {
      background-color: Yellow;
      background-image: url(_images/PAO/Safety_Guardian_Award.jpg);
  }
  #SnavLinks
{
    text-align: center;
    width: 550px;
}
    #SnavLinks ul
    {
        margin: 0px;
        padding: 0px;
        display: inline-block;
        margin-top: 6px;
    }
        #SnavLinks ul li 
        {
            float: left;            
            text-align: center;            
            margin: 10px;            
            list-style: none;            
            cursor: crosshair;            
            background-color: #CCCCCC;      /* light gray */      
            padding: 5px;            
            border-radius: 50%;              
            border: black 5px solid;        
         }
            #SnavLinks ul li:hover 
            {
                background-color: #FFFF00; 
            }
            #SnavLinks ul li.active 
            {
                background-color: #333333;                
                color: #FFFFFF;                
                outline-width: 7px;            
            }
                #SnavLinks ul li.active:hover 
                {
                    background-color: #484848;                    
                    color: #FFFFFF;
                }
#awards
{
    height: 30%;
    font-size: 8pt;
    color: #3d3d3d;
    position: relative;
}

/*Coda Slider Effect CSS requirements */

#slider 
{
    width: 620px;
    margin: 0 auto;
    position: relative;
}

.scroll
{
    height: 250px;
    overflow: auto;
    position: relative; /* fix for IE to respect overflow */
    clear: left;
    background: #ffffff url(_images/body_gradient.jpg) repeat-x scroll left bottom;
}

.scrollContainer div.panel 
{
    padding: 20px;
    height: 210px;
    width: 580px; /* change to 560px if not using JS to remove rh.scroll */
}

.scrollButtons 
{
    position: absolute;
    top: 150px;
    cursor: pointer;
}

.scrollButtons.left
{
    left: -20px;
}

.scrollButtons.right 
{
    right: -20px;
}