.roll_menu{
    width:700px;
    height:52px;
    position:relative;
    font-family: Monaco, Verdana, Sans-serif; 
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
    margin-left:40%
    
}
.roll_item{
    position:relative;
    background-color:#ffffff;
    float:left;
    width:52px;
    
    margin:0px 5px;
    
    height:52px;
    border:3px solid #ddd;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    -moz-box-shadow:1px 1px 3px #555;
    -webkit-box-shadow:1px 1px 3px #555;
    box-shadow:1px 1px 3px #555;
    cursor:pointer;
    overflow:hidden;
    
}
.icon_home:hover{
    
  -ms-transform:rotateZ(-180deg);
		-webkit-transform:rotateZ(-180deg);
		-moz-transform:rotateZ(-180deg);
		-o-transform:rotate(-180deg);
		
                 -webkit-transition: -webkit-transform 0.5s ease-in-out;
    -moz-transition: -moz-transform 0.5s ease-in-out;
    -o-transition: -o-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    /*webkit plus*/
    /*animation*/
    -webkit-animation: bounceIn 0.7s ease-in-out;
    -moz-animation: bounceIn 0.7s ease-in-out;
    -ms-animation: bounceIn 0.7s ease-in-out;
    -o-animation: bounceIn 0.7s ease-in-out;
    animation: bounceIn 0.7s ease-in-out;
    
}

.icon_script:hover{
    
  -ms-transform:rotateZ(-180deg);
		-webkit-transform:rotateZ(-180deg);
		-moz-transform:rotateZ(-180deg);
                -o-transform:rotate(-180deg);
		-moz-transform:rotateZ(-180deg);
                 -webkit-transition: -webkit-transform 0.5s ease-in-out;
    -moz-transition: -moz-transform 0.5s ease-in-out;
    -o-transition: -o-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    /*webkit plus*/
    /*animation*/
    -webkit-animation: bounceIn 0.7s ease-in-out;
    -moz-animation: bounceIn 0.7s ease-in-out;
    -ms-animation: bounceIn 0.7s ease-in-out;
    -o-animation: bounceIn 0.7s ease-in-out;
    animation: bounceIn 0.7s ease-in-out;
    
}
.icon_tutorial:hover{
    
  -ms-transform:rotateZ(-180deg);
		-webkit-transform:rotateZ(-180deg);
		-moz-transform:rotateZ(-180deg);
               -o-transform:rotate(-180deg);
		-moz-transform:rotateZ(-180deg);
                 -webkit-transition: -webkit-transform 0.5s ease-in-out;
    -moz-transition: -moz-transform 0.5s ease-in-out;
    -o-transition: -o-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    /*webkit plus*/
    /*animation*/
    -webkit-animation: bounceIn 0.7s ease-in-out;
    -moz-animation: bounceIn 0.7s ease-in-out;
    -ms-animation: bounceIn 0.7s ease-in-out;
    -o-animation: bounceIn 0.7s ease-in-out;
    animation: bounceIn 0.7s ease-in-out;
    
}
.icon_tool:hover{
    
  -ms-transform:rotateZ(-180deg);
		-webkit-transform:rotateZ(-180deg);
		-moz-transform:rotateZ(-180deg);
               -o-transform:rotate(-180deg);
		-moz-transform:rotateZ(-180deg);
                 -webkit-transition: -webkit-transform 0.5s ease-in-out;
    -moz-transition: -moz-transform 0.5s ease-in-out;
    -o-transition: -o-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    /*webkit plus*/
    /*animation*/
    -webkit-animation: bounceIn 0.7s ease-in-out;
    -moz-animation: bounceIn 0.7s ease-in-out;
    -ms-animation: bounceIn 0.7s ease-in-out;
    -o-animation: bounceIn 0.7s ease-in-out;
    animation: bounceIn 0.7s ease-in-out;
    
}
.icon_search:hover{
    
  -ms-transform:rotateZ(-180deg);
		-webkit-transform:rotateZ(-180deg);
		-moz-transform:rotateZ(-180deg);
               -o-transform:rotate(-180deg);
		-moz-transform:rotateZ(-180deg);
                 -webkit-transition: -webkit-transform 0.5s ease-in-out;
    -moz-transition: -moz-transform 0.5s ease-in-out;
    -o-transition: -o-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    /*webkit plus*/
    /*animation*/
    -webkit-animation: bounceIn 0.7s ease-in-out;
    -moz-animation: bounceIn 0.7s ease-in-out;
    -ms-animation: bounceIn 0.7s ease-in-out;
    -o-animation: bounceIn 0.7s ease-in-out;
    animation: bounceIn 0.7s ease-in-out;
    
}   
.link{
    left:2px;
    top:2px;
    position:absolute;
    width:48px;
    height:48px;
}
.icon_home{
    background:transparent url(./images/Maple_leaf.gif) no-repeat top left;
}
.icon_script{
    background:transparent url(./images/Maple_leaf.gif) no-repeat top left;
}
.icon_tutorial{
    background:transparent url(./images/Maple_leaf.gif) no-repeat top left;
}
.icon_tool{
    background:transparent url(./images/Maple_leaf.gif) no-repeat top left;
}
.icon_search{
    background:transparent url(./images/Maple_leaf.gif) no-repeat top left;
}
.roll_item_content{
    position:absolute;
    height:52px;
    width:220px;
    overflow:hidden;
    left:56px;
    top:7px;
    background:transparent;
    display:none;
    
}
.roll_item_content h2{
  color: #000;
    text-shadow: 1px 1px 1px #fff;
    background-color:transparent;
    font-size:14px;
}
.roll_item_content a{
    background-color:transparent;
    float:left;
    margin-right:7px;
    margin-top:3px;
    color:#0b965b;
    text-shadow: 1px 1px 1px #fff;
    text-decoration:none;
    font-size:12px;
}
.roll_item_content a:hover{
     color: #002166;
}
.roll_item_content p {
    background-color:transparent;
    display:none;
}
.roll_item_content p input{
    border:1px solid #ccc;
    padding:1px;
    width:155px;
    float:left;
    margin-right:5px;
}
 .roll_menu *{
                margin:0;
                padding:0;
                
            }