body 

{

    margin: 0px;

    padding: 0px;

    background-color: #fff;

    

    /* Turn off font resizing */

    -webkit-text-size-adjust: none; 

}

 

/* The button class defines properties for buttons that are either 30px or 46px high  */

.button 

{   

   /* Set a button to be a block so its height and width can be adjusted */

    display: block;         

    

    /* Use the highest button height to ensure that text will vertically align on all buttons */

    line-height: 46px;   

    

    /* A button will expand to the width of its parent cell if no width is specified */

    width: 150px;           

    

    font-size: 20px;

    font-weight: bold;

    font-family: Helvetica, sans-serif;

    color: #fff;

    

    text-decoration: none;

    text-align: center;

}

 

 

 /*  Builds a button using a 29x46 image */

.blue

{

    margin: 3px auto;

    color: #fff;

     /*  Put a 1 pixel blur black shadow below the button's text */

    text-shadow: #000 0px 1px 1px;

    

    /* The right and left borders are 14 pixels wide  */

    border-width: 0px 14px 0px 14px;       

    

    

    /* The leftButton image is split into three. Both left and right sides are 14 pixels wide.  */

    /* The remaining 1 pixel is used for the middle part of the image.   */

    /* The left and right sides will remain fixed while the middle part is scaling horizontally.  */

    -webkit-border-image: url(images/blueButton.png) 0 14 0 14; 

}

 

/*  Builds a button using a 29x46 image */

.white 

{

    margin: 3px auto;

    border-width: 0px 14px 0px 14px;

    color: #000;

    

    /*  Put a 1 pixel blur white shadow below the button's text  */

    text-shadow: #fff 0px 1px 1px;  

    

    /* Note that the -webkit-border-image values are given as  0 14 0 14 and not 0px 14px 0px 14px */

    -webkit-border-image: url(images/whiteButton.png) 0 14 0 14;

}

 

/*  Builds a button using a 29x46 image */

.black  

{

    border-width: 0px 14px 0px 14px;

    color: #fff;

    

    /* Put a 1 pixel blur black shadow below the button's text */

    text-shadow: #000 0px 1px 1px;  

    -webkit-border-image: url(images/grayButton.png) 0 14 0 14;

    margin: 3px auto;   

}

 

/*  Creates a button using a 18x30 image */

.blackLeft 

{

    margin: 3px auto;

    color: #fff;

    

    /* Put a 1 pixel blur black shadow below the button's text   */

    text-shadow: #000 0px 1px 1px;   

    border-width: 0px 5px 0px 12px;

    

    

    /* -webkit-border-image divides the leftButton image into 2 corners and middle part.    */

    /* The left corner is 12 pixels wide. The right corner is 5 pixels wide and the middle part is 1 pixel. */

    -webkit-border-image: url(images/leftButton.png) 0 5 0 12;      

}

 

/* Creates a button using a 18x30 image */

.blackRight  

{

    margin: 3px auto;

    border-width: 0px 12px 0px 5px;

    color: #fff;

    text-shadow: #000 0px 1px 1px;

    

    /* -webkit-border-image divides the rightButton image into three parts. */

    /* The right and left corners of the image are respectively 12 pixels and 5 pixels wide. */

    /* This leaves 1 pixel for the midlle part of the image.        */

    -webkit-border-image: url(images/rightButton.png) 0 12 0 5;

}

Next
Previous