/* 
File: Buttons.css
Purpose: CPFS standard button styling rules. 
Created: 2013-Oct-16

Updates: 
February 6, 2014. Replace all background images with solid colors.

Type  State     Colour 
----  -----     -------
Nav   Rest      #E3E2E7
      Hover     #D8DFF2
      Press     #D6D4D2
      Disable   #EFEEF1

Do    Rest      #E6EAE1
      Hover     #DBF3CC
      Press     #D3D4CA
      Disable   #EFEEF1

Undo  Rest      #EAE5DD
      Hover     #F1E6D2
      Press     #D1C8C0
      Disable   #EFEEF1
*/

/* Standard style for Nav, Do, and Undo buttons rendered as input type submit or input type button */

div.portalDefault .CheckButton input[type=submit], 
div.portalDefault .CheckButton input[type=button], 
div.portalDefault .NavButton input[type=submit], 
div.portalDefault .NavButton input[type=button], 
div.portalDefault .DoButton input[type=submit], 
div.portalDefault .DoButton input[type=button], 
div.portalDefault .UndoButton input[type=submit],
div.portalDefault .UndoButton input[type=button]
{
    height: 40px; /* button height */
    font-size: 13px !important; /* button text font size */
    padding-left: 20px; /* button text padding */
    padding-right: 20px; /* button text padding */
    padding-top: 0px; /* button text padding */
    padding-bottom: 2px; /* button text padding */
    margin: 0; /* turn off default margin for buttons */
    /* border: thin solid #C0C0C0; solid colour buttons need a border to make them more buttonish. */
    /* box-shadow: 3px 3px 3px Gray; Create 3-D effect for purpose of buttonization. */ 
    border: none;
    
    /* The gradient effect on the button [was] achieved with a background image. */
    background-repeat: repeat-x; /* repeat the image accross the whole button */
    background-position: left; /* don't offset the image - start it at the left edge */
    background-size: 100% 100%; /* stretch the image to fill the whole button both verticatlly and horizontally */
    background-color: transparent; /* background image must show through */
}





/* Override telerik behavior of moving background image position to the side when hovering over a button. */

div.portalDefault .rbSkinnedButton:hover .rbDecorated { background-position: left; }

/* Override the asp:button behavior in chrome that changes the button outline to gold color when clicked. */
/* Also show when button gets focus from navigating through with tab key */

div.portalDefault .NavButton input[type=submit]:focus, div.portalDefault .NavButton input[type=button]:focus
{
    background-image: url('');
    background-color: #D8DFF2;
    outline: none;
} 
div.portalDefault .DoButton input[type=submit]:focus, div.portalDefault .DoButton input[type=button]:focus 
{ 
    background-image: url('');
    background-color: #DBF3CC;
    outline: none; 
}
div.portalDefault .UndoButton input[type=submit]:focus, div.portalDefault .UndoButton input[type=button]:focus 
{ 
    background-image: url('');
    background-color: #F1E6D2;
    outline: none; 
}


/* Disabled */
div.portalDefault input[type=submit]:disabled,
div.portalDefault input[type=button]:disabled
{
    background-image: url('');
    background-color: #EFEEF1;
    color: Silver;
}

/* IE8 doesnt understand the disabled pseudo class. */
div.portalDefault input[type=submit][disabled="disabled"],
div.portalDefault input[type=button][disabled="disabled"] 
{ 
    background-image: url('');
    background-color: #EFEEF1;
    color: Silver;
}

/* Override Telerik disabled styling */
div.portalDefault span.RadButton.RadButton_Default.rbSkinnedButton.rbDisabled[disabled="disabled"], 
div.portalDefault span.RadButton.RadButton_Metro.rbSkinnedButton.rbDisabled[disabled="disabled"] input.rbDecorated, 
div.portalDefault span.RadButton.RadButton_MetroTouch.rbSkinnedButton.rbDisabled[disabled="disabled"] input.rbDecorated
{
    height:40px;
    color: Silver!important;
}

/* Override the telerik metro and metro touch behavior to change the button text to white when clicked. */

div.portalDefault .NavButton input[type=submit]:active, div.portalDefault .NavButton input[type=button]:active { color: Black; }
div.portalDefault .DoButton input[type=submit]:active, div.portalDefault .DoButton input[type=button]:active { color: Black; }
div.portalDefault .UndoButton input[type=submit]:active, div.portalDefault .UndoButton input[type=button]:active { color: Black; }

/* Background images */

/* Button at rest */
div.portalDefault .NavButton input[type=submit], div.portalDefault .NavButton input[type=button] { /*background-image: url('/ApplicationImages/RestNav.PNG');*/ background-color: #E3e2e7; border-bottom:3px solid #cecece; }
div.portalDefault .DoButton input[type=submit], div.portalDefault .DoButton input[type=button] { /*background-image: url('/ApplicationImages/RestDo.PNG');*/ background-color: #E3e2e7; border-bottom:3px solid #6ac07a; }
div.portalDefault .CheckButton input[type=submit], div.portalDefault .CheckButton input[type=button] { /*background-image: url('/ApplicationImages/RestDo.PNG');*/ background-color: #E6EAE1; border-bottom:3px solid #cecece; }
div.portalDefault .UndoButton input[type=submit], div.portalDefault .UndoButton input[type=button] { /*background-image: url('/ApplicationImages/RestUndo.PNG');*/ background-color: #E3e2e7; border-bottom:3px solid #ff8388;}

/* Mouse over button */
div.portalDefault .NavButton input[type=submit]:hover, div.portalDefault .NavButton input[type=button]:hover { /*background-image: url('/ApplicationImages/MouseOverNav.PNG');*/ background-color: #a5e5ff; }
div.portalDefault .DoButton input[type=submit]:hover, div.portalDefault .DoButton input[type=button]:hover { /*background-image: url('/ApplicationImages/MouseOverDo.PNG');*/ background-color: #DBF3CC; }
div.portalDefault .CheckButton input[type=submit], div.portalDefault .CheckButton input[type=button] { /*background-image: url('/ApplicationImages/RestDo.PNG');*/ background-color: #E6EAE1; }
div.portalDefault .UndoButton input[type=submit]:hover, div.portalDefault .UndoButton input[type=button]:hover { /*background-image: url('/ApplicationImages/MouseOverUndo.PNG');*/ background-color: #fec0c3; }

/* Clicking on button */
div.portalDefault .NavButton input[type=submit]:active, div.portalDefault .NavButton input[type=button]:active { /*background-image: url('/ApplicationImages/DepressNav.PNG'); background-color:transparent !important;*/ background-color:#57c8f6; }
div.portalDefault .DoButton input[type=submit]:active, div.portalDefault .DoButton input[type=button]:active { /*background-image: url('/ApplicationImages/DepressDo.PNG');*/ background-color: #D3D4CA; }
div.portalDefault .UndoButton input[type=submit]:active, div.portalDefault .UndoButton input[type=button]:active { /*background-image: url('/ApplicationImages/DepressUndo.PNG');*/ background-color: #ff8388; }

/* When an undo button is placed to the right of a do button, then put a margin. */

.DoButton+.UndoButton 
{ 
    margin-left: 10px; 
}

.UndoButton+.NavButton 
{
    margin-left: 10px;
}

/* Override telerik behaviour of adding unwanted padding to skinned buttons. */

div.portalDefault .rbSkinnedButton
{
	padding-left: 0px;  /* button background image padding */
	height: 40px;
}

/* Override telerik metro skin behaviour of putting border and changing the height of buttons. */

div.portalDefault .RadButton_Metro.rbSkinnedButton 
{
	border-width: 0px;              /* no border */
	height: 40px;                   /* button height */
}

/* Override telerik metro touch skin behaviour of changing the height of buttons. */

div.portalDefault .RadButton_MetroTouch.rbSkinnedButton
{
	height: 40px;                   /* button height */
}

/* telerik metro touch uses the evil "important" modifier. Only way to override it is with one of my own. */

div.portalDefault .RadButton_MetroTouch.rbSkinnedButton .rbDecorated,
div.portalDefault .RadButton_Default.rbSkinnedButton .rbDecorated
{
	height: 40px !important;         
}

/* See comments for the previous style rule. */

div.portalDefault .RadButton_MetroTouch.rbSkinnedButton,
div.portalDefault .RadButton_MetroTouch.rbLinkButton,
div.portalDefault .RadButton_MetroTouch.rbVerticalButton
{
	border:0px !important;
}

/* Override telerik behaviour of adding unwanted margin to skinned buttons. */

div.portalDefault .RadButton_Metro.rbSkinnedButton .rbDecorated
{
	margin-left: 0px;
}

/* The following rules are needed to address all of the problems with IE8 button behavior */

/* Make sure metro touch radbutton behaves correctly when pressed in IE8 - two rules needed for button and containing element. */

div.portalDefault .rbPressedButton.RadButton.RadButton_MetroTouch.rbPressedIE8
{
    background-color:transparent !important;
}

div.portalDefault .rbPressedIE8.rbSkinnedButton
{
    background-repeat: repeat-x !important;
    background-position: left !important;
}

/* Make sure metro radbutton behaves correctly when pressed in IE8 - two rules needed for button and containing element. */

div.portalDefault .rbPressedButton.RadButton.RadButton_Metro.rbPressedIE8
{
    background-color:transparent !important;
    color: Black !important;
}

div.portalDefault .rbPressedButton.RadButton_Metro .rbDecorated
{
    background-color:transparent !important;
    color: Black !important;
}

/* Remove border on metro touch rad button in IE8. */

div.portalDefault .rbSkinnedButton.RadButton_Metro
{
    border: 0px !important;
}

/* Override Telerik RadButton_Default background image for NavButton. */
div.portalDefault .NavButton .RadButton_Default.rbSkinnedButton, 
div.portalDefault .NavButton .RadButton_Default .rbDecorated, 
div.portalDefault .NavButton .RadButton_Default.rbVerticalButton, 
div.portalDefault .NavButton .RadButton_Default.rbVerticalButton .rbDecorated, 
div.portalDefault .NavButton .RadButton_Default .rbSplitRight, 
div.portalDefault .NavButton .RadButton_Default .rbSplitLeft
{
	background-image: url('');
	background-color: #E3E2E7;	
}

/* Override Telerik RadButton_Default background image for CheckButton. */
div.portalDefault .CheckButton .RadButton_Default.rbSkinnedButton, 
div.portalDefault .CheckButton .RadButton_Default .rbDecorated, 
div.portalDefault .CheckButton .RadButton_Default.rbVerticalButton, 
div.portalDefault .CheckButton .RadButton_Default.rbVerticalButton .rbDecorated, 
div.portalDefault .CheckButton .RadButton_Default .rbSplitRight, 
div.portalDefault .CheckButton .RadButton_Default .rbSplitLeft
{
	background-image: url('');
	background-color: #ececec;	
}

/* Override Telerik RadButton_Default background image for DoButton. */
div.portalDefault .DoButton .RadButton_Default.rbSkinnedButton, 
div.portalDefault .DoButton .RadButton_Default .rbDecorated, 
div.portalDefault .DoButton .RadButton_Default.rbVerticalButton, 
div.portalDefault .DoButton .RadButton_Default.rbVerticalButton .rbDecorated, 
div.portalDefault .DoButton .RadButton_Default .rbSplitRight, 
div.portalDefault .DoButton .RadButton_Default .rbSplitLeft
{
	background-image: url('');
	background-color: #E3E2E7;
}

/* Override Telerik RadButton_Default background image for UndoButton. */
div.portalDefault .UndoButton .RadButton_Default.rbSkinnedButton, 
div.portalDefault .UndoButton .RadButton_Default .rbDecorated, 
div.portalDefault .UndoButton .RadButton_Default.rbVerticalButton, 
div.portalDefault .UndoButton .RadButton_Default.rbVerticalButton .rbDecorated, 
div.portalDefault .UndoButton .RadButton_Default .rbSplitRight, 
div.portalDefault .UndoButton .RadButton_Default .rbSplitLeft
{
	background-image: url('');
	background-color: #E3E2E7;
}

/* Eliminate unwanted behhavior on default telerik rad buttons in IE8 */

div.portalDefault .RadButton_Default.rbPressedButton.rbPressedIE8 .rbDecorated
{
    background-repeat: repeat-x !important;
    background-position: left !important;
    background-color:transparent !important;
    border: 0px !important;
}

/* Prevent metro touch buttons shifting to the left when pressed in IE8. */

div.portalDefault .rbPressedButton.RadButton_MetroTouch .rbDecorated
{
    margin-left: 0px !important;
}

.ButtonMargins 
{
    margin-top: 25px; 
    margin-bottom: 25px; 
}