#heroTopArea
{
    height:312px;
    background: url(../img/hero_bg.png) repeat-x;
    overflow: hidden;
}

#subHeroArea
{
    height:123px;
    background-color: #fff;   
}

#bottom
{
    padding:15px 20px;   
}

#leftSide
{
    width:500px; 
    float:left;  
}

#rightSide
{
    float: left;
    width: 306px;
    margin-left: 12px;   
    padding: 4px 25px 40px 16px;
}

#leftSide, #rightSide
{
    background-color: #fff;  
    height: 163px;
}

#leftSide
{
    margin-left: 20px;
    padding: 4px 25px 40px 25px; 
}

#subHeroArea
{
     
}

#subHeroArea .left
{
    float:left;   
}

#subHeroArea .left img
{
    width:  110px; 
}

#subHeroArea .right
{
    float: left;
    width: 181px;
    margin-left: 8px;
    padding-top: 4px;
}

#subHeroArea .item
{
    width: 300px;
    padding: 18px 0px 0px 20px;
    float: left;
    position: relative;
    cursor: pointer;
    height:124px;
}

.subheroTitle
{
    color: #2DAEE4;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight:bold;
}

.subheroTag
{
    line-height: 18px;
    font-weight:bold;   
}

#subHeroArea .item.active .triangle
{
    background: url(../img/triangle.png) no-repeat;
    width: 35px;
    height: 17px;
    position: absolute;
    margin-left: 38px;
    margin-top: -21px;
}

#subHeroArea .item.active .subheroTitle
{
   color: #1c6888; 
}

.rowspacing
{
    padding-bottom: 10px; 
}

.rowspacing a
{
 color: #2B70B8;
 text-decoration:none;   
}

.rowspacing a:hover
{
    text-decoration:underline;   
}

.heroItem
{
    width: 860px !important;   
}


.heroItem .left 
{
    float:left;
    padding: 21px 32px;
}

.heroItem .left img
{
    width:289px;   
}

.heroItem .right 
{
    float:left;
    margin-left: 7px;
    width: 500px;
    margin-top: 40px;
}

.heroItem .title
{
    color: #2DAEE4;
    font-size: 38px;
    text-transform: uppercase;
    margin-top: 48px;
    margin-bottom: 7px;
}

.heroItem .description
{
    font-size: 15px;
    font-weight: bold;  
    line-height: 27px; 
}

.heroButton
{
    width:192px;
    height:55px;
    background:url(../img/learn_more.png) no-repeat;  
    cursor:pointer;
    margin-left: -13px;
    margin-top: 17px;
    display:block;
}

.heroButton:hover
{
    background:url(../img/learn_more_hover.png) no-repeat;  
}

.prevnextarrow
{
    width:40px;  
    text-align:center; 
}

.leftArrow
{
    background: url(../img/arrow_left.png) no-repeat 0 0;
    width: 15px;
    height: 25px;
    cursor: pointer;
    margin-left: 17px;
}

.leftArrow:hover
{
    background: url(../img/arrow_left_hover.png) no-repeat 0 0;
}

.rightArrow
{
    background: url(../img/arrow_right.png) no-repeat 0 0;  
    width: 15px;
    height: 25px;
    margin-left: 6px; 
    cursor:pointer;    
}

.rightArrow:hover
{
    background: url(../img/arrow_right_hover.png) no-repeat 0 0;
}

#uxHeroTiles
{
    height:300px;   
}