* { margin: 0; border: 0; } body { font-size: 12px; } .top { background-color: #fff; } .top_bg, .main_bg { width: 1000px; margin: 0 auto; } .main { background-color: #ff7200; } .main_bg { position: relative; } .message { position: absolute; top: 100px; left: 350px; } .message a, .message p { position: absolute; } .message a { line-height: 40px; top: 0; display: block; width: 130px; height: 40px; transition: all .3s ease-in; text-align: center; text-decoration: none; color: rgb(153,153,153); border-radius: 5px; background-color: #fff; } .message p { font-size: 1.2em; top: 50px; width: 130px; text-align: center; color: #fff; } .ios, .ios p { left: 110px; } .android, .android p { left: 320px; } .android:hover { color: white; background-color: green; } .android:hover i { color: white; } .ios:hover { color: white; background-color: #b47112; } .ios:hover i { color: rgb(211,169,9); } /*fonts*/ @font-face { font-family: 'icomoon'; font-weight: normal; font-style: normal; src: ; src: format('embedded-opentype'), format('truetype'), format('woff'), format('svg'); } [class^='icon-'], [class*=' icon-'] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; font-size: 1.8em; font-weight: normal; font-style: normal; font-variant: normal; line-height: 1; position: absolute; top: 50%; left: 5px; margin-top: -12px; text-transform: none; speak: none; /* better font rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-android:before { content: '\e859'; } .icon-settings_cell:before { content: '\e8bc'; }