/*this goes in the style code in your page (I couldn't figure out how to get it to work on a stylesheet), and is adapted from code I got from Baelor*/
/*scarves 1 and 5 are the closest to the header, and count out from there*/
/*I have it set up so that scarves 1 and 5 are the banner type scarves, which are 4px wider than the traditional scarves, but you can change the widths and margins as you like*/
/* SCARFCODE1 BEGINS */
scarves-right{
    position:fixed;
    margin-left:900px; /*replace this with the width of your header*/
    margin-top:0px;
    z-index:999999;
}
   
scarf1{
    width:31px; 
    height:150px;
    position:fixed;
    margin-top:-100px;/*this is how much of the scarf sits above the top*/
    transition: all 1s, transform 1s;
-moz-transition: all 1s, -moz-transform 1s;
-webkit-transition: all 1s, -webkit-transform 1s;
-o-transition: all 1s, -o-transform 1s;
}
scarf1:hover{
    margin-top:-65px; /*this is how much of the scarf is hidden when it's hovered over*/
    transition: all 1s, transform 1s;
-moz-transition: all 1s, -moz-transform 1s;
-webkit-transition: all 1s, -webkit-transform 1s;
-o-transition: all 1s, -o-transform 1s;
}
scarf2{
    width:25px;
    height:150px;
    position:fixed;
    margin-left:33px; /*this margin should be the width of the previous scarf plus gap*/
    margin-top:-80px; /*I've lined it up so the bottom stripe of the trad scarves is about level with the bottom of the decorated area of the banner scarves*/
    transition: all 1s, transform 1s;
-moz-transition: all 1s, -moz-transform 1s;
-webkit-transition: all 1s, -webkit-transform 1s;
-o-transition: all 1s, -o-transform 1s;
}
scarf2:hover{
    margin-top:-65px;
    transition: all 1s, transform 1s;
-moz-transition: all 1s, -moz-transform 1s;
-webkit-transition: all 1s, -webkit-transform 1s;
-o-transition: all 1s, -o-transform 1s;
}
scarf3{
    width:25px;
    height:150px;
    position:fixed;
    margin-left:60px; /*previous margin plus previous scarf plus gap*/
    margin-top:-80px;
    transition: all 1s, transform 1s;
-moz-transition: all 1s, -moz-transform 1s;
-webkit-transition: all 1s, -webkit-transform 1s;
-o-transition: all 1s, -o-transform 1s;
}
scarf3:hover{
    margin-top:-65px;
    transition: all 1s, transform 1s;
-moz-transition: all 1s, -moz-transform 1s;
-webkit-transition: all 1s, -webkit-transform 1s;
-o-transition: all 1s, -o-transform 1s;
}
scarf4{
    width:25px;
    height:150px;
    position:fixed;
    margin-left:87px; /*previous margin plus previous scarf plus gap*/
    margin-top:-80px;
    transition: all 1s, transform 1s;
-moz-transition: all 1s, -moz-transform 1s;
-webkit-transition: all 1s, -webkit-transform 1s;
-o-transition: all 1s, -o-transform 1s;
}
scarf4:hover{
    margin-top:-35px;
    transition: all 1s, transform 1s;
-moz-transition: all 1s, -moz-transform 1s;
-webkit-transition: all 1s, -webkit-transform 1s;
-o-transition: all 1s, -o-transform 1s;
}

scarves-left{
    position:fixed;
    margin-left:-31px; /*this should be the width of scarf 5 as a negative*/
    margin-top:0px;
    z-index:999999;
}
    
scarf5{
    width:31px;
    height:150px;
    position:fixed;
    margin-top:-100px;
    transition: all 1s, transform 1s;
-moz-transition: all 1s, -moz-transform 1s;
-webkit-transition: all 1s, -webkit-transform 1s;
-o-transition: all 1s, -o-transform 1s;
}
scarf5:hover{
    margin-top:-65px;
    transition: all 1s, transform 1s;
-moz-transition: all 1s, -moz-transform 1s;
-webkit-transition: all 1s, -webkit-transform 1s;
-o-transition: all 1s, -o-transform 1s;
}
scarf6{
    width:25px;
    height:150px;
    position:fixed;
    margin-left:-27px; /*look, I'm not entirely sure how I got this side to work, so just kind extrapolate to figure it out*/
    margin-top:-80px;
    transition: all 1s, transform 1s;
-moz-transition: all 1s, -moz-transform 1s;
-webkit-transition: all 1s, -webkit-transform 1s;
-o-transition: all 1s, -o-transform 1s;
}
scarf6:hover{
    margin-top:-65px;
    transition: all 1s, transform 1s;
-moz-transition: all 1s, -moz-transform 1s;
-webkit-transition: all 1s, -webkit-transform 1s;
-o-transition: all 1s, -o-transform 1s;
}
scarf7{
    width:25px;
    height:150px;
    position:fixed;
    margin-left:-54px;
    margin-top:-80px;
    transition: all 1s, transform 1s;
-moz-transition: all 1s, -moz-transform 1s;
-webkit-transition: all 1s, -webkit-transform 1s;
-o-transition: all 1s, -o-transform 1s;
}
scarf7:hover{
    margin-top:-65px;
    transition: all 1s, transform 1s;
-moz-transition: all 1s, -moz-transform 1s;
-webkit-transition: all 1s, -webkit-transform 1s;
-o-transition: all 1s, -o-transform 1s;
}
scarf8{
    width:25px;
    height:150px;
    position:fixed;
    margin-left:-81px;
    margin-top:-80px;
    transition: all 1s, transform 1s;
-moz-transition: all 1s, -moz-transform 1s;
-webkit-transition: all 1s, -webkit-transform 1s;
-o-transition: all 1s, -o-transform 1s;
}
scarf8:hover{
    margin-top:-35px;
    transition: all 1s, transform 1s;
-moz-transition: all 1s, -moz-transform 1s;
-webkit-transition: all 1s, -webkit-transform 1s;
-o-transition: all 1s, -o-transform 1s;
}
/* SCARFCODE1 ENDS */