@import url(reset.css);

/*button*/

.appstore {
    position: relative;
    background: url("../images/apps/dribbb/appstore.png") no-repeat;
    width: 166px;
    height: 52px;
    -moz-transition: all 0.4s ease; 
    -o-transition: all 0.4s ease; 
    -webkit-transition: all 0.4s ease;
    cursor: pointer;
}

.appstore1{
    position: absolute;
    top: 392px;
    left:100px
}

    .appstore1 span {
        background: url("../images/apps/dribbb/appstore_hover.png") no-repeat;
        width: 166px;
        height: 52px;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;	
        -moz-transition: all 0.4s ease; 
        -o-transition: all 0.4s ease; 
        -webkit-transition: all 0.4s ease;
    }
         .appstore1 span:hover {
            opacity: 1;
        }
        
.appstore2{
    position: absolute;
    top: 46px;
    left:50%;
    margin-left: -83px;   
}

 .appstore2 span {
        background: url("../images/apps/dribbb/appstore_hoverPink.png") no-repeat;
        width: 166px;
        height: 52px;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        -moz-transition: all 0.4s ease; 
        -o-transition: all 0.4s ease; 
        -webkit-transition: all 0.4s ease;
    }
         .appstore2 span:hover {
            opacity: 1;
        }
         
    #appstore p {
        position: absolute;
        bottom: -150px;
        left:-66px;
        color: #e9e9e9;
        width: 310px;
        text-align: center;       	
        }/*End button*/
        
/*content1*/

.dribbb_wrapper {
    width: 1093px;
    position: relative;
    margin: 0 auto;
	height: 100%;
}

#content1 {
    background-color: #323232;
    height: 675px;
}

#logo {
    background: url("../images/apps/dribbb/logo.png") no-repeat;
    position: absolute;
    left: 13px;
    top: 115px;
	width: 346px;
    height: 193px;
}

#logo_clock {
    background: url("../images/apps/dribbb/logoClock.png") no-repeat;
    position: absolute;
    right: 20px;
    top: 172px;
	width: 547px;
    height: 631px;
}

.express {
    position: absolute;
    bottom: 120px;
    left: 33px;
    color: #e9e9e9;
    width: 310px;
    text-align: center; 		 
}/*End content1*/

/*content2*/

#content2 {
     position: relative;
     width: 100%;                       
     height: 325px;
     background-color: #cd4a86;
} 

.dribbb_wrapper h1 {
    text-align: center;
    padding-top: 52px;
    color: #f2d7e2;
}     

#text {
    width: 666px;
    height: 390px;
    border: 4px solid #ffffff;
    border-radius: 3px;
    position: relative;
    top: 60px;
    left: 340px;
    z-index: 3;
    }
    
    #text p {
        color: #e9e9e9;
        padding-left: 80px;
        padding-right: 80px;
        }
    
.text1  {
    padding-top: 54px;
    }
    
.text2  {
    padding-top: 85px;
    }
    
.text3  {
    padding-top: 32px;
    }

#phone {
    background: url(../images/apps/dribbb/phone.png);
    width: 267px;
    height: 544px;
    position: absolute;
    top: 63px;
    left: 124px;
    z-index: 6;
    }/*End content2*/

/*content3*/
    
#content3 {
    position: relative;
    width: 100%;
    background-color: #323232;
    }
    
    #content3 h1 {
        padding-top:424px;
        }
        
#clock {
    background: url(../images/apps/dribbb/clock.png) no-repeat;
    position: absolute;
    top: 542px;
    left: 500px;
    width: 89px;
    height: 101px;  
    }
    
.clock {
    color: #e9e9e9;
    position: relative;
    top: 228px;
    left: 386px;
    }
    
/*screenshot*/    
#screenshot {    
    margin-top: 345px;
    position: relative;
    }
    
#screenshot1, #screenshot2, #screenshot3 {
    float: left;
    width: 248px;
    height: 438px;
    border: 2px solid #ce4a86;   
    border-radius: 3px;     
    }
        
#clear {
    clear: both;
    }

#screenshot1 {
    margin-left: 107px;
    background: url(../images/apps/dribbb/screen1.gif) no-repeat;
}
    
#screenshot2 {
    margin: 0 58px 0 58px;
    background: url(../images/apps/dribbb/screen2.gif) no-repeat;
}

#screenshot3 {
    margin-right: 107px;
    background: url(../images/apps/dribbb/screen3.gif) no-repeat;
}

#monitor {
    margin: 0 auto;
    width: 196px;
    height: 244px;
    position: relative;
    background: url(../images/apps/dribbb/monitor.png) no-repeat;
    border: 2px solid #ce4a86;
    border-radius: 3px;
}

.monitor {
    width: 100%; 
    text-align: center;
    color: #e9e9e9;
    margin-top: 50px;
    margin-bottom: 80px;
}

.hour {
    width: 100%; 
    text-align: center;
    color: #e9e9e9;
    margin: 43px 0 132px 0;
}

/*signs*/

#signs {
    margin:  0 auto;  
    width: 606px; 
}

#big_sign {
    width: 51px;  
    float: left;
    margin: 0 25px; 
}

#sign_R1 {
    width: 36px;
    height: 38px;
    background: url(../images/apps/dribbb/signR1.png) no-repeat; 
    margin: 0 auto;
}

#sign_B1 {
    width: 23px;
    height: 27px;
    background: url(../images/apps/dribbb/sign1B.png) no-repeat;
    margin: 0 auto;
}

#sign_R2 {
    width: 48px;
    height: 38px;
    background: url(../images/apps/dribbb/signR2.png) no-repeat; 
    margin: 0 auto;
}

#sign_B2 {
    width: 31px;
    height: 27px;
    background: url(../images/apps/dribbb/sign2B.png) no-repeat;
    margin: 0 auto;
}

#sign_R3 {
    width: 30px;
    height: 38px;
    background: url(../images/apps/dribbb/signR3.png) no-repeat; 
    margin: 0 auto;
}

#sign_B3 {
    width: 20px;
    height: 27px;
    background: url(../images/apps/dribbb/sign3B.png) no-repeat;
    margin: 0 auto;
}

#sign_R4 {
    width: 36px;
    height: 38px;
    background: url(../images/apps/dribbb/signR4.png) no-repeat; 
    margin: 0 auto;
}

#sign_B4 {
    width: 23px;
    height: 27px;
    background: url(../images/apps/dribbb/sign4B.png) no-repeat;
    margin: 0 auto;
}

#sign_R5 {
    width: 43px;
    height: 38px;
    background: url(../images/apps/dribbb/signR5.png) no-repeat; 
    margin: 0 auto;
}

#sign_B5 {
    width: 27px;
    height: 27px;
    background: url(../images/apps/dribbb/sign5B.png) no-repeat;
    margin: 0 auto;
}

#sign_R6 {
    width: 51px;
    height: 38px;
    background: url(../images/apps/dribbb/signR6.png) no-repeat; 
}

#sign_B6 {
    width: 32px;
    height: 27px;
    background: url(../images/apps/dribbb/sign6B.png) no-repeat;
    margin: 0 auto;
}

#sign_B1,#sign_B2,#sign_B3,#sign_B4,#sign_B5,#sign_B6 {
    margin-top: 34px;
}/*End signs*/

p.icon {
    width: 100%; 
    text-align: center;
    color: #e9e9e9;
    margin-top: 55px;
    padding-bottom: 158px;
}/*End screenshot*//*End content3*/

/*content4*/

#content4 {
    position: relative;
    width: 100%;
    height: 141px;
    background-color: #cd4a86;
}/*End content4*/