/* Current button border colour: #7c93ba */
    /* Current button background colour: #0073e6 */
    /* Current button HOVER background colour: #ffff99 */
    /* Current button gradient to: #6b6dbb */
    /* Current font text colour: #fff */
    /* Current font text HOVER colour: #000000 */



    .round{
    width:100px; /*same as the height*/
    height:100px; /*same as the width*/
    background-color:#0073e6;
    border:1px solid #7c93ba; /*same colour as the background*/
    color:#fff;
    font-size:1.6em;
    /*set the border-radius at half the size of the width and height*/
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    /*give the button a small drop shadow*/
    -webkit-box-shadow: 0 0 10px rgba(0,0,0, .75);
    -moz-box-shadow: 0 0 10px rgba(0,0,0, .75);
    box-shadow: 2px 2px 15px rgba(0,0,0, .75);
    }
    /***NOW STYLE THE BUTTON'S HOVER STATE***/
    .round:hover{
    background:#ffff99;
    border:1px solid #7c93ba;
    /*reduce the size of the shadow to give a pushed effect*/
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
    box-shadow: 0px 0px 5px rgba(0,0,0, .75);
    }
    

    /***FIRST STYLE THE BUTTON***/

    .lozengebutton {
    border:2px groove #7c93ba;
    cursor:auto; /*sets the cursor to normal*/
    padding: 0.2em 0.2em;
    /*give the background a gradient - see cssdemos.tupence.co.uk/gradients.htm for more info*/
    background-color:#0073e6; /*required for browsers that don't support gradients*/
    background: -webkit-gradient(linear, left top, left bottom, from(#0073e6), to(#6b6dbb));
    background: -webkit-linear-gradient(top, #0073e6, #6b6dbb);
    background: -moz-linear-gradient(top, #0073e6, #6b6dbb);
    background: -o-linear-gradient(top, #0073e6, #6b6dbb);
    background: linear-gradient(top, #0073e6, #6b6dbb);
    /*style to the text inside the button*/
    font-family:Andika, Arial, sans-serif; /*Andkia is available at http://www.google.com/webfonts/specimen/Andika*/
    color:#fff;
    font-size:0.9em;
    letter-spacing:.1em;
    font-variant:small-caps;
    /*give the corners a small curve*/
    -webkit-border-radius: 0 15px 15px 0;
    -moz-border-radius: 0 15px 15px 0;
    border-radius: 0 15px 15px 0;
    /*add a drop shadow to the button*/
    -webkit-box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
    -moz-box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
    box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
    /*Additional code to prevent Safari changing the */
    }

    /***NOW STYLE THE BUTTON'S HOVER AND FOCUS STATES***/
    .lozengebutton:hover, .lozengebutton:focus {
    background:#ffff99;
    color:#000000; 
    cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
    /*reduce the spread of the shadow to give a pushed effect*/
    -webkit-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
    -moz-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
    box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;  
    }

    /* Special purpose classes */
    .buttonHidden { width:0px; height:0px; display: none !important; }  

    .invisible {display:none !important;}