monero-site/404/css/main.css

313 lines
4.2 KiB
CSS
Raw Normal View History

2017-07-04 06:00:32 +00:00
@charset "utf-8";
/* === General stuff === */
html, body{
height:100%;
background:#186aa9 url(/404/images/sky-background.png) top repeat-x;
overflow:hidden;
padding:0;
margin:0;
font-family:Arial, Helvetica, sans-serif;
margin-top: 5px;
}
.footer{
display: none;
}
a{
color:#3680b1;
}
img, a img{
border:0px none;
outline:none;
}
/* === Main Section === */
#wrapper{
width:980px;
margin:0px auto;
position:relative;
height:100%;
background:url(/404/images/sky-shine.jpg) top left no-repeat;
}
div.top-left{
position:absolute;
right:0px;
}
div.not-found-text{
position:absolute;
top:35px;
right:0px;
width:430px;
}
h1.not-found-text{
font-size:50px;
color:#fff;
letter-spacing:2px;
margin-bottom:20px;
}
div.graphic{
position:absolute;
top:80px;
left:0px;
}
div.planet{
position:absolute;
bottom:-720px;
margin:0px auto;
z-index:0;
}
div.planet>img{
width:960px;
}
div.dog-wrapper{
position:absolute;
top:45px;
left:440px;
}
div.dog{
position:absolute;
bottom:0px;
left:0px;
width:80px;
height:80px;
z-index:999;
background:url(/404/images/dog1.png) 0px 0px no-repeat;
}
div.dog-bubble{
font-size:18px;
line-height:1.5;
font-style:italic;
height:179px;
width:246px;
background:url(/404/images/bubble.png) top center no-repeat;
padding:20px 0px;
position:absolute;
bottom:0px;
left:30px;
z-index:999;
opacity:0;
color:#555555;
text-shadow:1px 1px 0 #ffffff;
}
div.dog-bubble>p{
text-align:center;
padding:0px 35px;
}
div.bubble-options{
opacity:0;
visibility:hidden;
display:none;
}
/* === Responsive === */
/* #Small laptop screens
================================================== */
@media only screen and (max-width: 960px) {
#wrapper{
width:600px;
background-image:none;
margin-top: 50px;
}
div.planet{
position:absolute;
bottom:-300px;
margin:0 auto 0 -280px;
z-index:0;
left:50%;
}
div.planet>img{
width:560px;
}
div.dog-wrapper{
position:absolute;
top:30px;
left:250px;
}
div.graphic{
position:absolute;
top:50px;
left:40px;
}
div.top-left {
position: absolute;
right: 0px;
top: -40px;
}
div.graphic>img{
width:60%;
}
div.graphic{
left: 0px;
position: absolute;
top: 20px;
}
div.not-found-text{
right:0px;
top:22px;
width:320px;
}
h1.not-found-text{
font-size:35px;
}
}
/* #Tablets and small screens
================================================== */
@media only screen and (max-width: 767px) {
#wrapper{
width:400px;
background-image:none;
}
div.graphic>img{
width:40%;
}
div.planet{
position:absolute;
bottom:-170px;
margin:0 auto 0 -180px;
z-index:0;
left:50%;
}
div.planet>img{
width:360px;
}
div.dog-wrapper{
position:absolute;
top:30px;
left:150px;
}
div.graphic{
position:absolute;
top:20px;
left:0px;
}
div.top-left {
position: absolute;
right: 390px;
top: 170px;
}
h1.not-found-text {
font-size: 26px;
}
div.not-found-text {
right: -60px;
top: 33px;
width: 270px;
}
div.top-left {
position: absolute;
right: 0;
top: -38px;
}
}
/* #Mobile phones
================================================== */
@media only screen and (max-width: 479px){
#wrapper{
width:320px;
background-image:none;
}
h1.not-found-text {
font-size: 20px;
text-align: center;
}
div.not-found-text {
right: 20px;
top: 210px;
}
div.graphic>img{
width:100%;
}
div.planet{
position:absolute;
bottom:-70px;
margin:0 auto 0 -100px;
z-index:0;
left:50%;
}
div.planet>img{
width:200px;
}
div.dog-wrapper {
left: 70px;
position: absolute;
top: 26px;
}
div.dog-bubble{
font-size:10px;
line-height:1.5;
font-style:italic;
height:107px;
width:147px;
background:url(/404/images/bubble.png) top center no-repeat;
background-size: contain;
padding:10px 0px;
position:absolute;
bottom:0px;
left:55px;
z-index:999;
opacity:0;
color:#555555;
text-shadow:1px 1px 0 #ffffff;
}
}