/************** FLAGS UPDATES TAB **************/ /* tutorial by deanlirium|tumblr (clarence.tk) */ #flags { position:fixed; top:100px; /* distance from the top of the page - adjust as you wish! */ left:-10px; text-align:center; text-transform:uppercase; /* the text is in all caps - delete this line and it won't be */ color:#8C8C8C; /* change text color: use sites like http://www.colorpicker.com/ or the tumblr thing, copy the code it gives you and paste it! remember the #! */ font-size:8px; /* adjust font size */ letter-spacing:1px; z-index:2147483607; font-family:calibri;} #flag1 { border:solid 6px #57709B; /* flag color */ border-right:solid 6px transparent; /* IMPORTANT! -- to make the flag thicker increase the border and border-right value; it looks better if they both have the same number! */ padding-left:10px; width:20px; /* increase or decrease to change the lenght of the CLOSED flag */ height:0px; position:absolute; -moz-transition:all 0.7s ease-out; -webkit-transition:all 0.7s ease-out; -o-transition:all 0.7s ease-out;} #flag1:hover { width:180px;} /* lenght of the OPEN flag */ #upd1 { position:absolute; width:110px; padding:10px; padding-left:60px; /* adjust this if you've changed the length of the open flag, subtract what you add here to the 'left' value below */ left:-180px; margin-top:6px; /* keep this number equal to the 'border' value for the flag */ opacity:0; -moz-transition:all 0.7s ease-out; -webkit-transition:all 0.7s ease-out; -o-transition:all 0.7s ease-out;} #flag1:hover #upd1{ left:0px; opacity:1;} /* following is the coding for the other flags - same as above! */ #flag2 { border:solid 6px #869CC2; margin-top:20px; position:absolute; border-right:solid 6px transparent; padding-left:10px; width:20px; height:0px; -moz-transition:all 0.7s ease-out; -webkit-transition:all 0.7s ease-out; -o-transition:all 0.7s ease-out;} #flag2:hover { width:180px;} #upd2 { position:absolute; width:110px; padding:10px; padding-left:60px; left:-180px; margin-top:6px; opacity:0; -moz-transition:all 0.7s ease-out; -webkit-transition:all 0.7s ease-out; -o-transition:all 0.7s ease-out;} #flag2:hover #upd2{ left:0px; opacity:1;} /*if you want more flags, just copy the part of the code below and change the numbers - then increase the margin-top value for the #flag(number) adding 20px each new flag! copy from here: */ #flag3 { border:solid 6px #ABBDDD; position:absolute; margin-top:40px; /* this one! */ border-right:solid 6px transparent; padding-left:10px; width:20px; height:0px; -moz-transition:all 0.7s ease-out; -webkit-transition:all 0.7s ease-out; -o-transition:all 0.7s ease-out;} #flag3:hover { width:180px;} #upd3 { position:absolute; width:110px; padding:10px; padding-left:60px; left:-180px; margin-top:6px; opacity:0; -moz-transition:all 0.7s ease-out; -webkit-transition:all 0.7s ease-out; -o-transition:all 0.7s ease-out;} #flag3:hover #upd3{ left:0px; opacity:1;} /* to here */