#login{padding:0px 10px;text-align:right;float:right;width:100%;max-width:800px;} #locked img{width:160px;border-radius:5px;} .content{margin:100px 0px 0px 0px;text-align:center;} .content img{max-width:350px;max-height:200px;} .content p{font-size:large;color:#663300;} .entry{padding:10px 0px;} .entry label{display:block;} .title{color:#ffffff;background:linear-gradient(#71A6DB,#559BDB,#438AC9);border-radius:7px 7px 0px 0px;padding:10px;text-align:center;} .credits{text-align:right;} .credits a{display:inline-block;text-decoration:none;margin:10px;border-radius:5px;background-color:#e9e9e9;padding:10px;} .credits a span{display:inline-block;vertical-align:top;padding:5px 0px;} .credits a:hover{background-color:#d9d9d9;} .foot_info{position:absolute;bottom:10px;width:100%;} @media screen and (max-width:800px){#locked{width:100%;text-align:center;} #locked img{margin:0px;width:calc(100% - 10px);max-width:250px;} #login{width:calc(100% - 10px);margin:20px auto;} .credits{text-align:center;} .credits a{width:130px;} .credits a span{display:block;} .entry input{width:90%;} .title{color:inherit;background:none;} } @media screen and (min-width:800px){#locked{width:30%;} #locked img{margin:30px 0px;} #main_content{background:repeating-linear-gradient(45deg,#ffffff,#f6f6ff 200px);} .credits{position:absolute;width:100%;bottom:0px;} .cell{display:table-cell;vertical-align:top;} .content{margin:0px auto;position:absolute;top:50%;transform:translateY(-50%);} .content .cell{width:50%;} .entry input{width:70%;} .table{display:table;width:100%;} }