/* ***** TAGS ***** */

    html {
        height: 100%;
    }

    body {
        background: #00a4b0 url(../images/bg-grad.png) repeat-x left top; 
        font-family: "Trebuchet MS", Arial;     
    }
    
    .replace {
        display: block;
        text-indent: -9999px;
    }
    
    h1 {
        background: url(../images/logo.png) no-repeat left top;
        display: inline;
        height: 118px;
        margin: 4px 0 0 11px;
        width: 975px;
    }
    
/* ***** LAYOUT ***** */

    #content {
        background: #04d2e0 url(../images/bg-world.png) no-repeat left bottom;
        border: 8px solid #fff;
        border-width: 7px 8px 8px 8px;
        clear: left;
        overflow: hidden;
        margin: 0 auto;
        width: 992px;
    }
    
/* ***** HEADER ***** */

    #header {
        background-color: #796b6e;
        border-bottom: 2px solid #4c4446;
        float: left;
        height: 48px;
        width: 100%;
    }
    
    #header a {
        background: url(../images/zattica.png) no-repeat left top;
        float: left;
        height: 48px;
        width: 145px;
    }
    
        #header a:hover {
            background-position: left bottom;   
        }
        
    #header a.twitter {
        background: url(../images/twitter.png) no-repeat;
        display: inline;
        float: right;
        height: 31px;
        margin: 8px 13px 0 0;
        width: 103px;
    }
    
        #header a.twitter:hover {
            background-position: left bottom;  
        }
        
/* ***** BOXES ***** */

    /* wonkybox */

        .wonkybox {
            background: url(../images/box-wonky-b.png) no-repeat left bottom;
            display: inline;
            float: left;
            margin-top: 22px;
            min-height: 221px; /* see ltie7.css */
            position: relative;
            width: 245px;              
        }
        
        .wonkybox .inner {
            background: url(../images/box-wonky-t.png) no-repeat;
            float: left; 
            margin: -9px 0 0 0;
            width: 245px;         
        }
        
        .wonkybox h2 {
            background: url(../images/t-bb-app.png) no-repeat;
            left: 114px;
            position: absolute;
            height: 36px;
            top: -15px;
            width: 110px;
        }
        
        .wonkybox .phone {
            background: url(../images/phone-bb.png) no-repeat;
            display: inline;
            float: left;
            height: 189px;
            margin: 28px 7px 0 14px;
            position: relative;
            width: 107px;
                    
        }
        
        .wonkybox p.intro {
            font-weight: bold;
            line-height: 1.16666666667em; /* 14px */
            padding-top: 47px;
        }
        
        .wonkybox .phone img {
            left: 9px;
            height: 67px;
            position: absolute;
            top: 35px;
            width: 89px;
        }
        
        .wonkybox p {
            font-size: .75em;
            line-height: 1.2em; /* 14.4px */
            margin-bottom: 15px;
            padding-right: 4px;
        }
        
        .wonkybox .get-it {
            background: url(../images/b-get-bb-small.png) no-repeat;
            bottom: 8px;
            height: 42px;
            left: 125px;
            position: absolute;
            width: 122px;
        }
        
        .wonkybox .get-it:hover {
            background-position: left bottom;  
        }
        
            #bb-app {
                margin-left: 6px;        
            }
            
            #iphone-app {
                margin-bottom: 10px;
                margin-left: 2px; 
            }
            
                #iphone-app h2 {
                    background-image: url(../images/t-app-store.png);
                    left: 111px;
                }
            
                #iphone-app .phone {
                    background-image: url(../images/phone-iphone.png);
                    height: 197px;
                    margin: 20px 7px 0 10px;
                    width: 104px; 
                }
                
                #iphone-app p {
                    padding-right: 6px;
                }
                
                #iphone-app p.intro {
                    padding-top: 36px;    
                }
                
                #iphone-app .get-it {
                    background-image: url(../images/b-get-iphone-small.png);
                    bottom: 6px;
                    left: 119px;
                }
                
                    #iphone-app .get-it:hover {
                        background-position: left bottom;  
                    }
                    
                #iphone-app img {
                    top: 33px;
                    height: 132px;
                    left: 8px;
                    width: 88px;
                    
                }
            
        /* youtube */
        
            #youtube {
                background: url(../images/box-video.png) no-repeat;
                clear: right;
                display: inline;
                float: left;
                height: 252px;
                margin: -1px 5px 0 5px;
                position: relative;
                width: 478px;
            
            }
            
            #youtube #video {
                left: 147px;
                position: absolute;
                top: 16px;
            }
            
            #youtube a {
                background: url(../images/b-youtube.png) no-repeat;
                bottom: 8px;
                height: 48px;
                left: 2px;
                position: absolute;
                width: 139px;
            }
            
                #youtube a:hover {
                    background-position: left bottom;  
                }
            
        /* Hi Scores */
        
            .hi {
                display: inline;
                float: left;
                margin: 3px 0 0 9px;
                position: relative;
                width: 238px;
            }
            
            .hi h2 {
                background: url(../images/t-bb-hi.png) no-repeat;
                display: inline;
                float: left;
                height: 45px;
                margin: 0 0 4px 1px;
                width: 237px;
                    
            }        
            
            .hi table {
                border: 3px solid #fff;
                color: #fff;
                width: 238px;
            }
            
            .hi table td {
                background-color: #667896;
                font: bold 0.8em/1em Verdana;
                padding: 3px 2px 5px 7px
            }
            
            .hi table td.col1 {
                width: 21px;
            }
            
            .hi table td.col2 {
                width: 136px;
            }
            
            .hi table tr.alt td {
                background-color: #c7cdd8;
                color: #000;    
            }
            
            .hi .get-it {
                background: url(../images/b-get-bb.png) no-repeat;
                height: 73px;       
                margin: 12px 0 0 14px;
                width: 213px;
            }
            
                .hi .get-it:hover {
                    background-position: left bottom;  
                }
            
                /* web hi scores */
                
                    #web-hi {
                        margin:  2px 0 0 8px;
                        width: 241px;
                    }
                
                    #web-hi h2 {
                        background-image: url(../images/t-web-hi.png);
                        margin-bottom: 3px;
                        height: 47px;  
                        width: 240px;
                    }
                    
                    #web-hi table {
                        margin-left: 3px;
                    }
                    
                    #web-hi table td {
                        background-color: #f08a0d;
                    }
                    
                    #web-hi table tr.alt td {
                        background-color: #f9d4a6;
                    }
                    
                    #web-hi .get-it {
                        background: url(../images/b-play-gimmie.png) no-repeat;
                        height: 73px;
                        margin: 12px 0 0 16px;
                        width: 213px;
                    }
                    
                        #web-hi .get-it:hover {
                            background-position: left bottom;  
                        }
                        
                /* TWITTER */
                
                    #twitter-hi {
                        background: url(../images/box-twitter-b.png) no-repeat left bottom;
                        margin: 4px 0 0 14px;
                        min-height: 263px; /* see ltie7.css */
                        width: 231px;     
                    }
                    
                    .safari #twitter-hi {
                        background: url(../images/box-twitter-b.png) no-repeat left bottom;
                        margin: 4px 0 0 14px;
                        min-height: 253px; /* see ltie7.css */
                        width: 231px;     
                    }
                    
                    .chrome #twitter-hi {
                        background: url(../images/box-twitter-b.png) no-repeat left bottom;
                        margin: 4px 0 0 14px;
                        min-height: 253px; /* see ltie7.css */
                        width: 231px;     
                    }
                    
                    #twitter-hi h2 {
                        background: url(../images/box-twitter-t.png) no-repeat;
                        height: 54px;
                        margin: -5px 0 0 0;
                        position: relative;
                        width: 231px;                        
                    }    
                    
                    
                    #twitter-hi h2 a {
                        background: url(../images/b-twitter-follow.png) no-repeat;
                        height: 32px;
                        position: absolute;
                        right: 6px;
                        top: 13px;
                        width: 91px;

                    }
                    
                        #twitter-hi h2 a:hover {
                            background-position: left bottom;  
                        }
                        
                    #twitter-hi .get-it {
                        background: url(../images/b-play-fb.png) no-repeat;
                        bottom: -83px;
                        height: 73px;
                        left: -5px;
                        position: absolute;
                        width: 213px;
                    }
                    
                        #twitter-hi .get-it:hover {
                            background-position: left bottom;  
                        }
                        
                    #twitter-hi ul {
                        float: left;
                        font-size: .75em;
                        height: 185px;
                        overflow: auto;
                        padding: 10px 0px 0px 20px;
                        width: 192px;                        
                    }
                    
                    #twitter-hi ul h3 {
                        font-weight: bold;
                        margin-bottom: 4px;
                    }
                    
                    #twitter-hi ul li {
                        margin-bottom: 10px;
                    }
                        
                /* iPHONE */

                    #iphone-hi {
                        margin: 3px 0 0 7px; 
                    }
                
                    #iphone-hi h2 {
                        background: url(../images/t-iphone-hi.png) no-repeat;
                        width: 241px;
                        height: 47px;
                        margin: 0 0 2px -2px;
                    }
                    
                    #iphone-hi table td {
                        background-color: #767a7d;
                    }
                    
                    #iphone-hi table tr.alt td {
                        background-color: #cccecf;
                    }
                    
                    #iphone-hi .get-it {
                        background-image: url(../images/b-get-iphone.png);
                    }
                    
                        #iphone-hi .get-it:hover {
                            background-position: left bottom;  
                        }
                        
    /* ***** MORE WAYS TO PLAY ***** */
    
        #more {
            color: #0d798d;
            float: left;
            font-weight: bold;
            font-size: 0.875em;
            padding: 29px 0px 15px 85px;
            width: 100%;
        }
        
        #more * {
            display: inline;
            float: left;
        }
        
        #more h2, #more li {
            border-right: 1px solid #0d798d;
            margin: 0 5px 0 16px;
            padding-right: 5px;
        }
        
        #more li {
            margin-left: 0;
        }
        
        #more li.last {
            border: 0;
        }
        
        #more a {
            color: #0d798d;
            text-decoration: none;
        }
        
            #more a:hover {
                color: #fff;
                text-decoration: underline;
            }
            
    /* ***** FOOTER ***** */
    
        #footer {
            color: #57e1eb;
            float: left;
            font-size: .75em;
            font-weight: bold;
            padding: 15px 0;
            text-align: center;
            width: 100%;
        }
    
        #footer ul {
            display: inline;
            margin: 0 auto;
            width: auto;
        }
        
        #footer li {
            background: url(../images/dash.png) no-repeat right 8px;
            display:inline;
            margin-right: 5px;
            padding-right: 9px;
            width: auto;
        }
        
        #footer li.last {
            background: none;    
            margin: 0;
            padding-right: 0;
        }
        
        #footer li a {
            
            color: #57e1eb;
            text-decoration: none; 
            text-transform: uppercase;   
        }
        
            #footer li a:hover {
                color: #fff;
                text-decoration: underline;
            }