/* reset */
html, body {height: 100%;}

html, body, fieldset, ul, li, h1, h2, h3, h4, h5, p, input {
	padding: 0;
	margin: 0;	
}

body {
	font-family: "Trebuchet MS", Helvetica, sans-serif;
    background: #000 url('bg-body-light.jpg') 50% 0 no-repeat;
    font-size: 76%;
	color: #2a2a2a;
	text-align: center;
    overflow: hidden;
    cursor: url(cursor.png) 13 66, default !important;
}

/** Custom cursor **/
a, a:hover, a:focus, a:visited, a:focus, a:active,
[id^="button"] {cursor: url(cursor.png) 13 66, pointer !important;}

/* MAC cursor fix */
object {cursor: default !important;}

#canvas {  
    position: absolute;
    top: 0; left: 0;
    z-index: 0;
    width: 100%; height: 100%;
    background: #000 url('bg-body-dark.jpg') 50% 0 no-repeat;
}
    
img {border: 0;}

.cleaner {
	clear: both !important;
	font-size: 0 !important;
	height: 0 !important;
	width: auto !important;
	line-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

/** CURSOR **/
#cursor {
     /*cursor: none;*/
     width: 55px; height: 163px;
     margin-top: -85px;
     background: url(cursor.png);
     position: absolute;
     display: block;
     top: 50%; left: 50%;
     z-index: 10000;    
}

/*** LAYOUT ***/
#main {
    position: relative;
    width: 880px; height: 676px;
    margin: 0 auto;
    z-index: 1;
    text-align: left;
}
    #matches-overlay {
        position: absolute;
        bottom: 115px; left: 409px;   
        z-index: 10;
        width: 76px; height: 47px;
        background: url('matches-overlay.png') 0 0 no-repeat;
    }   

    .main-placeholder {
        position: absolute;
        top: 0; left: 0;
        width: 100%;
    }
    
    .welcome-text {
        position: absolute;
        top: 0; left: -99999px;
    }
    
/**** SHARED ****/
/** Buttons **/
[id^="button"] {
    width: 152px; height: 44px;
    display: inline-block;
    border: 0;
    padding: 0;
    background: url('buttons.png');
}
    #button-print {background-position: 0 0;}
    #button-continue {background-position: -152px 0;}
    #button-start {background-position: -304px 0;}
    #button-tryAgain {background-position: -456px 0;}
        
        /*hover*/
        #button-print:hover {background-position: 0 -44px;}
        #button-continue:hover {background-position: -152px -44px;}
        #button-start:hover {background-position: -304px -44px;}
        #button-tryAgain:hover {background-position: -456px -44px;}    

        /* ie fix inline-block */
        _[id^="button"],
        #social-links a {display: inline; zoom: 1;}        

#mf-link {
    position: absolute;
    bottom: 0; left: 386px;
    width: 104px; height: 20px;
}        
        
        
/** #1 - LANDING PAGE **/     
#start-controls {
    z-index: 3;
    padding-top: 394px;
    text-align: center;
}
    [id^="button"] {
        margin: 0 25px;
    }
    
/** #2 - instructions & game **/     
#flash-holder {
    display: none;
    z-index: 2;
    width: 600px; height: 439px;
    margin-left: 142px;
    padding-top: 108px;
    text-align: center;
    background: url('flash-holder.png') 6px 116px no-repeat;
}    
    #flash-holder #button-start {margin-top: 325px;}     

#flash-holder.hide{
	position:absolute;
	left:-10000px;
}
        
    
    #flash-canvas {
        display: none;
        position: absolute;
        top: 144px; left: 33px;
        z-index: 3;
        width: 535px; height: 370px;
        overflow: hidden;
        background: #fff;
    }          
    
    
/*** #3 - RESULTs  ***/
#result {
    display: none;
    z-index: 1;
    padding-top: 165px;
    text-align: center;
}

    #result-message {
        margin-bottom: 40px;
    }
    
    #social-links {
        padding: 45px 0;
        background: url('result-note.png') 50% 0 no-repeat;
    }
        #social-links a {
            display: inline-block;
            width: 30px;
            margin-left: 5px;
            margin-right: 5px;
        }    
        
        #facebook {background: url('ico-facebook.png') 50% 0 no-repeat; height: 21px;}    
        #twitter {background: url('ico-twitter.png') 50% 0 no-repeat; margin-top: 2px; height: 18px;} 
        #gplus {background: url('ico-gplus.png') 50% 0 no-repeat; margin-top: 5px; height: 20px;} 
            a:hover#facebook {background-position: 50% -21px;}
            a:hover#twitter {background-position: 50% -18px;}
            a:hover#gplus {background-position: 50% -20px;}
        
        #startButton {
            position: absolute;
            top: 0; right: 0;
        }