/* webgames.css 
css shared by webgames
*/

/*********** SLIDING DOORS BUTTON */
/* http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/ */
/* REQUIRED BUTTON STYLES: */        
button { 
position: relative;
border: 0; 
padding: 0;
cursor: pointer;
overflow: visible; /* removes extra side padding in IE */
}

button::-moz-focus-inner {
border: none;  /* overrides extra padding in Firefox */
}

button span { 
position: relative;
display: block; 
white-space: nowrap;    
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Google Chrome only - fix margins */
button span {
margin-top: -1px;
}
}

/* OPTIONAL BUTTON STYLES for applying custom look and feel: */        
button.submitBtn { 
padding: 0 13px 0 0; /* r is r width */ 
margin-right:5px; 
text-align: center; 
/* not sure why 139 not 140 */
background: transparent url('/webgames/images/btn_blue_sprite.png') no-repeat right -139px; 
}

button.submitBtn span {
padding: 0 0 0 13px;  /* l is r width */ 
height:32px; 
background: transparent url('/webgames/images/btn_blue_sprite.png') no-repeat left top; 
color:#fff; 
/* all buttons will be bold shadow */
font-weight: bold;
text-shadow: #000 0.1em 0.1em 0.2em;
/* standard font can be overridden */
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
padding-top: 4px;
text-transform: uppercase;
}

button.submitBtn:hover, button.submitBtnHover { /* the redundant class is used to apply the hover state with a script */
background-position: right -209px; 
}

button.submitBtn:hover span, button.submitBtnHover span {
/* not sure why 69 not 70 */
background-position: 0 -69px;
}

button.blackBtn {
background: transparent url('/webgames/images/btn_black_sprite.png') no-repeat right -139px; 
}

button.blackBtn span {
background: transparent url('/webgames/images/btn_black_sprite.png') no-repeat left top; 
}

/* plainBtn is a button with no background.  Displaytext in the nested span. */
button.plainBtn { 
padding: 0;
margin-right:5px; 
text-align: center; 
background: transparent;
}

button.plainBtn span {
padding: 0;
height:32px; 
background: transparent;
color:#fff; 
font-family: Arial, Helvetica, sans-serif;

/* all buttons will be bold shadow */
/* standard font can be overridden */
font-weight: bold;
font-size:18px;
text-shadow: #000 0.1em 0.1em 0.2em;
text-transform: uppercase;
}