<!doctype html> The Blackstone Irregulars

/*SCROLLBAR*/ ::-webkit-scrollbar { width: 4px; height:auto; background:#fff; } ::-webkit-scrollbar-corner { padding:2px; background:#fff; } ::-webkit-scrollbar-button:vertical { height:3px; display: block; background:#000; } ::-webkit-scrollbar-button:horizontal { width: 3px; height: 3px; display: block; background:#000; } ::-webkit-scrollbar-thumb:vertical { background:#000; } ::-webkit-scrollbar-thumb:horizontal { background:#fff; } ::-webkit-scrollbar-thumb { background: #000; } /*BODY*/ body { margin:auto; font-family: pt-sans, sans-serif; font-size:14px; color: #000; background-color:#000; } a { text-decoration:none; color:#ddd; } h1 { font-size:22px; color:#fff; margin-top:-3px; text-align:center; font-family: poiret-one, sans-serif; } /*TOP*/ .topbar { top: 0; left: 0; height: 200px; text-align: center; background-image: url("#"); background-repeat:repeat; color:#000; } .topbar img { alignment-adjust:middle; border:4px solid #fff; height:96px; width:96px; border-radius: 50%; margin-top:10px; margin-bottom:5px; } .topbar p { font-size:11px; color:#fff; margin-top:-5px; } /*LINKS*/ nav { width:100%; text-align:center; margin-top:3px; margin-bottom:5px; } nav a { color:#666; margin-top:2px; margin-left:10px; margin-right:10px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } nav a:hover { color:#fff; background-color:#000; background-image:url("https://static.tumblr.com/r1kev6u/49Dn3s50o/crazykira18-03.gif"); border-radius:5px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .container { margin-top:10px; margin-left:125px; margin-right:auto; margin-bottom:50px; position:absolute; } /*BOXES*/ .box { margin-top:20px; margin-bottom:50px; margin-left:25px; margin-right:25px; width:160px; height:160px; display:inline-block; } .box img { width:160px; height:160px; border:4px solid #222; } .box:hover #desc { opacity:0.7; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o -transition: all 0.5s ease-out; transition: all 0.5s ease-out; } #desc { text-align:center; margin-top:-170px; position:absolute; width:165px; height:165px; opacity:0; font-size:11px; background:#000; color:#fff; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o -transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .name { font-size:16px; margin:3px; padding-bottom:4px; color:#fff; border-bottom: solid #fff 2px; width:100%; text-align:center; font-family: poiret-one, sans-serif; } .link { text-align:center; font-size:14px; } .link a { text-align:center; color:#990000; font-size:16px; font-weight:bold; width:100%; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .link a:hover { color:#fff; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; letter-spacing:3px; } /*CREDIT. DO NOT REMOVE*/ .credit { position:fixed; bottom:25px; right:25px; font-size:10px; font-family: 'Calibri'; background: #fff; color:#000; text-transform:uppercase; } .credit a { color:#000; padding:4px; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .credit a:hover { color:#fff; background:#000; padding:4px; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }