@import "declaration.less";

#appIndexPage{
    .tagline{
        display:none;
    }

    .sidebar{
        display:none;
    }

    .msgBox{
        margin:70px auto 0 auto;
        width:600px;
    }


    .mainContent{
        @mainW: 100%;
        @slideW: 682px;

        margin:0 auto;
        text-align:center;
        width:@mainW;

        .banner{
            .boxshadow(0 0 3px rgba(0,0,0,0.4));
            height: 440px;
            overflow: hidden;
            position: relative;
            width: 100%;

            img.bg{
                bottom: 0;
                left: 0;
                position: absolute;
                width: 100%;
                z-index: 0;
            }

            .carousel{
                left: 50%;
                margin: 0 0 0 -520px;
                position: absolute;
                text-align: left;
                top: 0;
                width: 1170px;
                z-index: 1;

                .item{
                    height: 440px;

                    .slogan{
                        float: left;
                        margin: 70px 0 0 0;
                        width: 430px;

                        h2{
                            color: #000;
                            font-size: 40px;
                            margin: 0 0 20px 0;
                        }
                        h3{
                            .font(20px,bold);
                            color: #557E03;
                        }
                    }

                    .screenshot{
                        .dimension(648px,336px);
                        background-image: url(../images/spritesSlider.png);
                        background-repeat: no-repeat;
                        float: left;
                        margin: 50px 0 0 0;
                    }

                    &.slide0{

                        .slogan{
                            margin: 130px 0 0 0;
                            position: relative;
                        }

                        h2{
                            .dimension(244px,64px);
                            background: url(../images/spritesSlider.png) no-repeat;
                            display: block;
                            text-indent: -9999px;
                            text-shadow:none;
                        }
                        h3{
                            color: #000;
                            .font(35px,normal);
                        }
                    }
                    &.slide1 .screenshot{
                        background-position: 0 -100px;
                    }
                    &.slide2 .screenshot{
                        background-position: -700px -100px;
                    }
                    &.slide3 .screenshot{
                        background-position: 0 -500px;
                    }
                    &.slide4 .screenshot{
                        background-position: -700px -500px;
                    }
                }
            }

            .dotNav{
                position: absolute;
                text-align: center;
                top: 400px;
                width: 100%;
                z-index: 3;
            }
        }

        .description{
            padding: 100px 0;

            h1{
                color:darken(@headerGreen,10%);
                font-variant:small-caps;
                margin:0 0 35px 0;
                text-shadow:0 1px 0 #fff;
            }

            ul{
                display: block;
                margin: 0 auto;
                width: 920px;

                li{
                    @width: (920px - 4px) / 4 - 20px;

                    border-right: 1px solid #ccc;
                    cursor: pointer;
                    display: block;
                    float: left;
                    .fontfamily();
                    font-size:18px;
                    letter-spacing:1px;
                    list-style:none;
                    padding: 0 10px;
                    text-shadow:0 1px 0 #fff;
                    width: @width;

                    &:hover{
                        color:#000;
                    }

                    > span{
                        .dimension(@width,@width);
                        background: url(../images/spritesGooseIndexIcon.png) no-repeat;
                        display: block;
                        height: 100px;
                    }

                    &.plan{

                        span{
                            background-position: center 0;
                        }

                        &:hover{

                            span{
                                background-position: center -400px;
                            }
                        }
                    }
                    &.follow{

                        span{
                            background-position: center -100px;
                        }

                        &:hover{

                            span{
                                background-position: center -500px;
                            }
                        }
                    }
                    &.record{

                        span{
                            background-position: center -200px;
                        }

                        &:hover{

                            span{
                                background-position: center -600px;
                            }
                        }
                    }
                    &.share{
                        border-right: none;

                        span{
                            background-position: center -300px;
                        }

                        &:hover{

                            span{
                                background-position: center -700px;
                            }
                        }
                    }
                }
            }
        }

        #hotActivities{
            margin: 0 auto 100px auto;
            padding: 20px 50px;
            position: relative;
            width: 920px;
            z-index: 2;

            h2{
                margin: 0 0 10px 0;

                 a{
                    color:#363636;
                    font-variant:small-caps;
                    text-shadow:0 1px 0 #fff;
                }
            }

            .act{
                float: left;
                margin: 0 100px 0 0;
                position: relative;
                width: 240px;

                &#act2{
                    margin: 0;
                }

                .title{
                    .boxshadow(0 0 5px rgba(0,0,0,0.4));
                    .gradient(#f2f2f2,#E3E3E3);
                    .radius(5px 5px 0 0);
                    filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#E3E3E3')\9";
                    border:1px solid #f7f7f7;
                    font-size: 16px;
                    line-height: 29px;
                    margin: 0;
                    padding: 0 10px;
                    position: relative;
                    text-align: left;
                    z-index: 1;

                    a{
                        color:#363636;
                        display: block;
                        font-weight: bold;
                        height: 30px;
                        overflow: hidden;
                        text-decoration: none;
                        width: 100%;

                        &:hover{
                            color: #666;
                        }
                    }
                }

                .photo{
                    .border(0 1px, solid, #f7f7f7);
                    .boxshadow(0 0 5px rgba(0,0,0,0.4));
                    .dimension(238px,238px);
                    max-height: 240px;
                    position: relative;
                    z-index: 0;
                }

                .stats{
                    .boxshadow(0 0 5px rgba(0,0,0,0.4));
                    .gradient(#f2f2f2,#E3E3E3);
                    filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#E3E3E3')\9";
                    .radius(0 0 5px 5px);
                    border:1px solid #f7f7f7;
                    padding: 5px;
                    position: relative;
                    z-index: 1;

                    .item{
                        .font(14px,bold);
                        float:left;
                        padding: 0 5px;
                        text-align: left;
                        width: 60px;

                        .icon{

                            &.viewed{
                                margin: 1px 5px 0 0;
                            }
                            &.favorite{
                                margin: 2px 5px 0 0;
                            }
                        }

                        &.viewed{
                            padding: 0 5px 0 1px;
                        }
                        &.facebookLiked{
                            width: 80px;
                        }
                    }
                }
            }

            a.btn{
                .fontfamily();
                font-size: 20px;
                letter-spacing: 1px;
                margin: 30px 0 0 0;
                padding: 10px 0 12px 0;
                width: 250px;
            }
        }
    }
}