/* CSS Reset */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{
    font: inherit;
    font-size: 100%;

    margin: 0;
    padding: 0;

    vertical-align: baseline;

    border: 0;
}


/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{
    display: block;
}
body
{
    line-height: 1;
}
ol, ul
{
    list-style: none;
}
blockquote, q
{
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after
{
    content: '';
    content: none;
}
table
{
    border-spacing: 0;
    border-collapse: collapse;
}


/* Main styles */



body
{
    background-color: #fff;
}

.sprite {display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(spritesheet.png);}
.can-a-business {width:330px; height:30px; background-position: -1296px -1112px}
.capacity {width:970px; height:250px; background-position: -974px -758px}
.capacity-text {width:426px; height:30px; background-position: -508px -1112px}
.cta {width:134px; height:25px; background-position: -1783px -1112px}
.footprint {width:970px; height:250px; background-position: -974px -2px}
.footprint-text {width:530px; height:30px; background-position: -2px -1042px}
.infrastructure {width:970px; height:250px; background-position: -2px -254px}
.infrastructure-text {width:568px; height:30px; background-position: -1304px -1010px}
.insight {width:970px; height:250px; background-position: -2px -2px}
.insight-text {width:512px; height:30px; background-position: -1061px -1042px}
.management {width:970px; height:250px; background-position: -974px -254px}
.management-text {width:594px; height:30px; background-position: -708px -1010px}
.resolve-text {width:525px; height:68px; background-position: -534px -1042px}
.sap-logo {width:153px; height:43px; background-position: -1628px -1112px}
.streams {width:970px; height:250px; background-position: -2px -506px}
.streams-text {width:504px; height:30px; background-position: -2px -1112px}
.transactions {width:970px; height:250px; background-position: -974px -506px}
.transactions-text {width:704px; height:30px; background-position: -2px -1010px}
.trends {width:970px; height:250px; background-position: -2px -758px}
.trends-text {width:358px; height:30px; background-position: -936px -1112px}

#main-panel
{
    position: relative;
    width: 968px;
    height: 248px;
    background-color: #000;
    display: none;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #000;
}

#can-a-business {
    position: absolute;
    top: 90px;
    left: 75px;
    z-index: 999;
}

#sap-logo-overlay {
    position: absolute;
    bottom: 5px;
    right: 5px;
    -webkit-transform: scale(.75);
    -moz-transform: scale(.75);
    transform: scale(.75);
}

#frame1, #frame2, #frame3,
#frame4, #frame5, #frame6,
#frame7, #frame8, #resolve { position: absolute; top: 0; left: 0; }

#capacity, #trends, #streams, 
#footprint, #insight, #infrastructure, 
#management, #transactions {
    position: absolute;
    top: 0;
    left: 0;
}
#capacity-text, #trends-text, #streams-text, 
#footprint-text, #insight-text, #infrastructure-text, 
#management-text, #transactions-text {
    position: absolute;
    top: 130px;
    left: 75px;
}

#resolve {
    position: relative;
    width: 970px;
    height: 250px;
    background-color: #000;
}

#video-holder {
    position: relative;
    top: 0;
    left: 0;
    width: 385px;
    height: 250px;
    background-color: #000;
}

#video-hotspot {
    position: absolute;
    top: 0;
    left: 0;

    width: 385px;
    height: 220px;
}

#video-poster {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    cursor: pointer;
}

#resolve-text {
    position: absolute;
    top: 90px;
    right: 20px;
}

#cta {
    position: absolute;
    bottom: 25px;
    right: 22px;
    cursor: pointer;
}

#cta-custom {
    width: 135px;
    height: 27px;
    background-color: #FDB93D;
    text-align: center;
    font-family: Arial;
    line-height: 27px;
    padding: 5px;
    z-index: 999;
    transition: all 0.5s;
}

#cta-custom:hover {
    background-color: #FFF;
}

#sap-logo {
    position: absolute;
    bottom: 20px;
    right: 390px;
}

#hotspot {
    position: absolute;
    top: 0;
    left: 0;
    width: 970px;
    height: 250px;
    /*background-color: #CCC;*/
    cursor: pointer;
}