/*========================================================================================================================
 * File:                Homepage template
 * Author:              Oli
 * Created:             06/02/11
 *========================================================================================================================*/
@import url(/Css/Shared/Core/screen.css);

/*===============================================================================================
 * Intro panel
 *===============================================================================================*/ 
#intro {
    clear: both;
    position: relative;
    background: url(images/header.jpg) no-repeat top left;
    height: 418px;
    margin-bottom: 20px}

#intro h1 {
    width: 249px;
    height: 72px;
    background: url(images/hello.gif) no-repeat top left;
    overflow: hidden;
    text-indent: -9999px;
    position: absolute;
    left: 123px;
    top: 110px}    
    
#introCopy {
    width: 264px;
    height: 108px;
    background: url(images/introCopy.gif) no-repeat top left;
    overflow: hidden;
    text-indent: -9999px;
    position: absolute;
    left: 172px;
    top: 179px}    

#strapline {
    font-family: Arial, Sans-Serif;
    font-weight: normal;
    font-size: 1.7em;
    color: White;
    text-align: right;
    position: absolute;
    bottom: 40px;
    right: 40px}

#strapline p {
    margin-bottom: 0.6em}

/*===============================================================================================
 * Promo modules
 *===============================================================================================*/ 
.promo {
    width: 280px;
    float: left;
    background: #e5e5e5 url(images/panelFade.gif) repeat-x bottom left;
    border: solid 1px #939393;
    border-width: 0 1px;
    padding-bottom: 55px;
    position: relative;
    min-height: 135px}
    
.promo h2 a {
    display: block;
    font-size: 1.3em;
    font-family: Arial, Sans-Serif;
    text-decoration: none;
    background: url(images/promoHeader.gif) no-repeat top left;
    height: 35px;
    margin: 0 -1px;
    line-height: 34px;
    white-space: nowrap;
    color: White;
    padding-left: 23px}

.promo p {
    margin: 10px 20px 0}

.more {
    display: block;
    background: url(images/more.gif) no-repeat top left;
    text-align: center;
    font-family: "ff-dax-compact-web-pro-1","ff-dax-compact-web-pro-2", Arial, Sans-Serif;
    font-weight: bold;
    color: white;
    text-decoration: none;
    height: 21px;
    line-height: 18px;
    width: 53px;
    position: absolute;
    bottom: 15px;
    right: 12px;
    text-transform: lowercase}

.more:hover, .more:focus {
    background-position: 0 -25px}

/*===============================================================================================
 * What we do
 *===============================================================================================*/ 
#whatWeDo {
    min-height: 304px;
    margin-bottom: 20px}

#whatWeDo ul {
    margin: 20px 0 0 25px}
    
#whatWeDo li a {
    display: block;
    text-transform: uppercase;
    font-family: Arial, Sans-Serif;
    font-weight: bold;
    font-size: 1.1em;
    margin: 0.5em 0;
    color: #969696;
    text-decoration: none;
    clear: left;
    float: left}

#whatWeDo li a:hover, 
#whatWeDo li a:focus {
    color: #f3008d}

/*===============================================================================================
 * Video
 *===============================================================================================*/ 
#video {
    margin-left: 10px;
    width: auto;
    padding: 0;
    border: none;
    background: none;}

#video h2 a {
    background: url(images/videoHeader.jpg) no-repeat top left;
    margin: 0;
    height: 33px}

/*===============================================================================================
 * Who we are
 *===============================================================================================*/ 
#whoWeAre {
    clear: both;
    margin: 0 14px 100px 0}

/*===============================================================================================
 * Contact us
 *===============================================================================================*/ 
#contact {
    float: right}

#contact .phone {
    margin-top: 20px;
    background: url(images/phoneIcon.gif) no-repeat 0 0;
    line-height: 27px;
    font-family: Arial, Sans-Serif;
    font-size: 1.2em;
    font-weight: bold;
    color: #646464;
    padding: 0 0 0 50px;}

#contact .email {
    margin-top: 20px;
    background: url(images/emailIcon.gif) no-repeat 3px 0;
    line-height: 23px;
    padding: 0 0 0 50px;}