﻿#IMGBUTTON {
    display: inline-block;
    font-family: "Trebuchet MS",sans-serif;
    font-size: 0.95em;
    margin: 0;
    padding: 0;
}

    #IMGBUTTON .buttons {
        margin: 0px 0px;
        position: relative;
        float: left;
        background: transparent;
    }

        #IMGBUTTON .buttons .button {
            position: relative;
            padding: 10px;
            list-style: none;
            float: left;
            margin: 5;
        }

            #IMGBUTTON .buttons .button a {
                display: block;
                text-decoration: none;
                color: white;
                margin-top: 0px;
                margin-left: 0px;
                border: 0px solid rgba(0,0,0,0.7);
                -webkit-transition-property: width,height,margin,z-index,border;
                -webkit-transition-duration: 0.4s;
                -moz-transition-property: width,height,margin,z-index,border;
                -moz-transition-duration: 0.4s;
                -o-transition-property: width,height,margin,z-index,border;
                -o-transition-duration: 0.4s;
                transition-property: width,height,margin,z-index,border;
                transition-duration: 0.4s;
            }

                #IMGBUTTON .buttons .button a:hover {
                    position: absolute;
                    border: 2px solid rgba(0,0,0,0.7);
                    -webkit-box-shadow: 0px -1px 0px rgba(255,255,255,0.6),0px 1px 0px black;
                    -moz-box-shadow: 0px -1px 0px rgba(255,255,255,0.6),0px 1px 0px black;
                    box-shadow: 0px -1px 0px rgba(255,255,255,0.6),0px 1px 0px black;
                    -webkit-border-radius: 8px;
                    -moz-border-radius: 8px;
                    border-radius: 8px;
                    margin-top: -56px;
                    margin-left: -56px;
                    z-index: 30;
                    overflow: hidden;
                }



                #IMGBUTTON .buttons .button a img {
                    opacity: 1;
                    position: absolute;
                    z-index: 10;
                    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
                    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
                    box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
                    -webkit-transition-property: width,height,z-index;
                    -webkit-transition-duration: 0.4s;
                    -moz-transition-property: width,height,z-index;
                    -moz-transition-duration: 0.4s;
                    -o-transition-property: width,height,z-index;
                    -o-transition-duration: 0.4s;
                    transition-property: width,height,z-index;
                    transition-duration: 0.4s;
                    border: 1px solid rgba(0,0,0,0.7);
                    border-radius: 4px;
                    -webkit-border-radius: 4px;
                    -moz-border-radius: 4px;
                }

                #IMGBUTTON .buttons .button a:hover img {
                    z-index: 10;
                }

                #IMGBUTTON .buttons .button a strong {
                    margin: 0;
                    padding: 0;
                    position: absolute;
                    opacity: 0;
                    visibility: hidden;
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 11px;
                }

                #IMGBUTTON .buttons .button a:hover strong {
                    opacity: 1;
                    visibility: visible;
                    bottom: 0px;
                    -webkit-transition: bottom 0.3s ease 0.4s;
                    -moz-transition: bottom 0.3s ease 0.4s;
                    -o-transition: bottom 0.3s ease 0.4s;
                    transition: bottom 0.3s ease 0.4s;
                    left: 0px;
                    padding: 5px;
                    margin-top: -30px;
                    z-index: 30;
                    background-color: #111122;
                    background: rgba(0,0,0,0.8);
                }

    #IMGBUTTON a .title {
        border: 1px solid #606060;
        position: absolute;
        top: 10px;
        color: #606060;
        background: #C0C0C0;
        z-index: 11;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        text-align: center;
        -webkit-transition-property: width,z-index,font-size;
        -webkit-transition-duration: 0.4s;
        -moz-transition-property: width,z-index,font-size;
        -moz-transition-duration: 0.4s;
        -o-transition-property: width,z-index,font-size;
        -o-transition-duration: 0.4s;
        transition-property: width,z-index,font-size;
        transition-duration: 0.4s;
        font-style: italic;
        border: 1px solid rgba(0,0,0,0.7);
        border-radius: 4px 4px 0px 0px;
        -webkit-border-radius: 4px 4px 0px 0px;
        -moz-border-radius: 4px 4px 0px 0px;
        opacity: 1;
    }

    #IMGBUTTON .buttons .button a:hover .title {
        top: 0px;
        z-index: 31;
        font-size: 20px;
        -webkit-transition-property: width,z-index,font-size;
        -webkit-transition-duration: 0.4s;
        -moz-transition-property: width,z-index,font-size;
        -moz-transition-duration: 0.4s;
        -o-transition-property: width,z-index,font-size;
        -o-transition-duration: 0.4s;
        transition-property: width,z-index,font-size;
        transition-duration: 0.4s;
    }



    #IMGBUTTON .buttons .button-standard a:hover strong {
        width: 150px;
        height: 75px;
    }


    #IMGBUTTON .buttons .button-standard a:hover .title {
        width: 150px;
    }

    #IMGBUTTON .button-standard .title {
        width: 75px;
    }

    #IMGBUTTON .buttons .button-standard a strong {
        bottom: -90px;
    }

    #IMGBUTTON .buttons .button-standard {
        width: 75px;
        height: 75px;
    }

        #IMGBUTTON .buttons .button-standard a {
            width: 75px;
            height: 75px;
        }

        #IMGBUTTON .buttons .button-standard img {
            width: 75px;
            height: 75px;
        }

        #IMGBUTTON .buttons .button-standard a img {
            width: 75px;
            height: 75px;
        }

        #IMGBUTTON .buttons .button-standard a:hover {
            width: 150px;
            height: 150px;
        }

            #IMGBUTTON .buttons .button-standard a:hover img {
                width: 150px !important;
                height: 150px !important;
                z-index: 10;
            }




    #IMGBUTTON .buttons .button-big a:hover strong {
        width: 300px;
        height: 150px;
    }



    #IMGBUTTON .button-big .title {
        width: 160px;
    }

    #IMGBUTTON .buttons .button-big a strong {
        bottom: -90px;
    }

    #IMGBUTTON .buttons .button-big {
        width: 160px;
        height: 160px;
    }

        #IMGBUTTON .buttons .button-big a {
            width: 160px;
            height: 160px;
        }

        #IMGBUTTON .buttons .button-big img {
            width: 160px;
            height: 160px;
        }

        #IMGBUTTON .buttons .button-big a img {
            width: 160px;
            height: 160px;
        }

        #IMGBUTTON .buttons .button-big a:hover {
            width: 300px;
            height: 300px;
        }

            #IMGBUTTON .buttons .button-big a:hover img {
                width: 300px !important;
                height: 300px !important;
                z-index: 10;
            }

            #IMGBUTTON .buttons .button-big a:hover .title {
                width: 300px;
            }
