<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Gale's blogroll.
/* body defaults, this actually does not change anything apart from the background */
body {
background-image:url();
background-color:#f8f8f8;
font: italic 10px cambria, serif;
text-align: justify;
color:#878A89;
margin:0;padding:0;border:0;
background-attachment:fixed;
background-repeat:repeat;}
/* this part is not really important, but don't erase it */
a {color: #aaa;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;text-decoration: none;}
a:hover{color:#878A89} a:focus { outline: 0px none} a:active{outline: 0px none}
/* icons holder */
.iconis{
width:63%;
height:520px;
padding:0px;
margin:40px auto 10px auto;
-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;-ms-transition: all 0.4s ease-out;-o-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}
/* icons decoration, border and background (bg can be an image, but not the border), there seem to be 3 border; white one is the bg, light gary for border, there's a third one really small, that's the outline */
.iconis img{
width:40px;
margin:3px;
border:9px solid #F4F4F4;
padding: 5px;
background-image:url(https://static.tumblr.com/mxokwyk/G5Wmh6174/gyasbg.png);
background-repeat:repeat;
background-color:#f8f8f8;
outline:2px solid #f0f0f0;
vertical-align:top;
opacity:.7;filter:alpha(opacity=70);-moz-opacity: .7;-khtml-opacity: .7;
-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;-ms-transition: all 0.4s ease-out;-o-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}
/* icon and title(url) holder */
#imagi {padding:1px;margin:10px 1px 3px 1px;width:95px;display:inline-block;height:120px;vertical-align:top;overflow:show !important}
/* icons border and bg on hover */
#imagi:hover img {
border-color:#f1f1f1;
background:#C4F8FF;
opacity:1;filter:alpha(opacity=100);-moz-opacity: 1;-khtml-opacity: 1;-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;-ms-transition: all 0.4s ease-out;-o-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}
/* div for the url of the person you person you follow */
.name {
width:58px;
margin-top:3px;
background:#f0f0f0;
padding:3px;
border:3px solid #f0f0f0;
opacity:0;filter:alpha(opacity=0);-moz-opacity: 0;-khtml-opacity: 0;-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;-ms-transition: all 0.4s ease-out;-o-transition: all 0.4s ease-out;transition: all 0.4s ease-out;word-wrap:break-word;}
/* for the div of the url to appear on hover */
#imagi:hover .name{opacity:1;filter:alpha(opacity=100);-moz-opacity: 1;-khtml-opacity: 1;-webkit-transition: all 0.7s ease-out;-moz-transition: all 0.7s ease-out;-ms-transition: all 0.7s ease-out;-o-transition: all 0.7s ease-out;transition: all 0.7s ease-out;}
/* colors and font of the url */
.urr {
font: normal 8px consolas;
text-transform:uppercase;
letter-spacing:1px
}
.urr:hover {color:#1BC9E0}
/* navigation holder (links on the side) */
.holderl{position:fixed;bottom:100px;left:-10px;-webkit-transition: all 0.7s ease;-moz-transition: all 0.7s ease;-o-transition: all 0.7s ease;overflow:show !important}
.holderl:hover {left:-1px;-webkit-transition: all 0.7s ease;-moz-transition: all 0.7s ease;-o-transition: all 0.7s ease;}
/* links border, font and color*/
.linku{
color:#aaa;
text-align:center;
letter-spacing:1px;
width:100px;
text-transform:uppercase;
font: 10px calibri;
border:2px solid #f0f0f0;
margin-bottom:10px;
padding:5px;
-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;}
/* links border, color on hover */
.linku:hover{
color:#B8F0FF;
background: #f0f0f0;
font-weight:700;width:200px;text-align:right;-webkit-transition: all 0.7s ease;-moz-transition: all 0.7s ease;-o-transition: all 0.7s ease;}
/* title font and color */
.title{
font: 700 italic 30px georgia;
text-align:center;
position:fixed;
left:13px;
bottom:13px;
-webkit-transition: all 0.7s ease;-moz-transition: all 0.7s ease;-o-transition: all 0.7s ease;}
.title:first-letter{text-transform:uppercase}
/* title color on hover */
.title:hover{
color:#B8F0FF;
-webkit-transition: all 0.7s ease;-moz-transition: all 0.7s ease;-o-transition: all 0.7s ease;}
Gale's Blogroll
DashboardBack to blogCredit
