/*
Being shared, this stylesheet is copied into multiple applications when the solution is compiled.  So, make changes to the master copy in the 
CommonFiles project, compile the solution and publish the new files to the server.

FONT-SIZE should be a percentage of the base FONT-SIZE.

*/

@media screen and (min-width: 800px)
{	
    /* BODY FONT-SIZE is not used as the base for elements living within a TabContainer.  The TabContainer base FONT-SIZE is set by overriding ajax__tab_panel. */
    BODY	
    {
        FONT-SIZE: 11px !important;
    }

	/* With "!important", ajax__tab_* overrides the css created by a TabContainer.  No need to provide 
for a narrow screen because TabContainers are only used by the Maintenance interface. */
	.ajax__tab_panel {
		FONT-SIZE: 11px !important;
	}

	.ajax__tab_xp .ajax__tab_header .ajax__tab_tab {
		FONT-SIZE: 11px !important;
	}
    
	.divShow_Wide
	{
		display: inherit;
	}
	
	.divShow_Narrow
	{
		display: none;
	}

	.show_Wide {
		display: inline;
	}

	.show_Narrow {
		display: none;
	}
	
	.zipCodeTextBox{

		width:40px;
	}

	.mediumTextBox {
		width: 30px;
	}
}

@media screen and (max-width: 799px)
{
    /* BODY FONT-SIZE is not used as the base for elements living within a TabContainer.  The TabContainer base FONT-SIZE is set by overriding ajax__tab_panel. */
    BODY	
    {
        FONT-SIZE: 14px !important;      
    }

	/* With "!important", ajax__tab_* overrides the css created by a TabContainer.  No need to provide 
for a narrow screen because TabContainers are only used by the Maintenance interface. */
	.ajax__tab_panel {
		FONT-SIZE: 14px !important;
	}

	.ajax__tab_xp .ajax__tab_header .ajax__tab_tab {
		FONT-SIZE: 14px !important;
	}

	.ajax__tab {
		height: 25px !important;
	}

	.divShow_Wide
	{
		display: none;
	}
	
	.divShow_Narrow
	{
		display: inherit;
	}

	.show_Wide {
		display: inline;
	}

	.show_Narrow {
		display: none;
	}

	.zipCodeTextBox{

		width:80px;
	}

	.mediumTextBox {
		width: 40px;
	}
}


@media screen and (max-width: 499px) {
	/* BODY FONT-SIZE is not used as the base for elements living within a TabContainer.  The TabContainer base FONT-SIZE is set by overriding ajax__tab_panel. */
	BODY {
		FONT-SIZE: 18px !important;
	}

	/* With "!important", ajax__tab_* overrides the css created by a TabContainer.  No need to provide 
for a narrow screen because TabContainers are only used by the Maintenance interface. */
	.ajax__tab_panel {
		FONT-SIZE: 18px !important;
	}

	.ajax__tab_xp .ajax__tab_header .ajax__tab_tab {
		FONT-SIZE: 18px !important;
	}

	.ajax__tab_header {
		height: 120px !important;
	}

	.ajax__tab {
		height: 30px !important;
	}

	.ajax__tab_outer {
		padding: 5px !important;
	}

	.ajax__tab_inner {
		padding: 5px !important;
	}

	.divShow_Wide {
		display: none;
	}

	.divShow_Narrow {
		display: inherit;
	}

	.show_Wide {
		display: none;
	}

	.show_Narrow {
		display: inline;
	}

	.zipCodeTextBox {
		width: 80px;
	}

	.mediumTextBox {
		width: 50px;
	}
}



TD, INPUT, SELECT, OPTION, SPAN, A, DIV, LABEL
{
	FONT-SIZE: 100%;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}

P
{
	FONT-SIZE: 115%;
	font-weight:600;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	letter-spacing: 3px; 
}

li
{ 
	padding: 4px; 
}

.grid-item-bold
{
	FONT-WEIGHT: bold;
	FONT-SIZE: 100%;
	padding-right: 4px;
	padding-left: 4px;
	padding-bottom: 4px;
	padding-top: 4px;
	margin: 1px;
}

.label
{
    font-weight:bold;
    FONT-SIZE: 100%;
    COLOR: black;   
}

.label-medium-bold
{
    font-weight:bold;
    FONT-SIZE: 125%;
    COLOR: black;	
}

.label-xlarge
{
    font-weight:bold;
    FONT-SIZE: 280%;
    COLOR: black;   
}	

.label-large-bold
{
    font-weight:bold;
    FONT-SIZE: 200%;
    COLOR: black;	
}

.btn
{
    BORDER-RIGHT: #666666 2px solid;
    BORDER-TOP: #cccccc 1px solid;
    FONT-WEIGHT: bold;
    FONT-SIZE: 9px;
    BORDER-LEFT: #cccccc 1px solid;
    COLOR: #000000;
    BORDER-BOTTOM: #666666 2px solid;
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    BACKGROUND-COLOR: #dddddd
}

.btnSeemless
{
	opacity:0.3;
    border-style:none;
    BACKGROUND-COLOR: #F3F6FC; width:30px; text-align:left; cursor:default;
}

.btnSeemlessHover
{
	opacity:1;
    border-style:none;
    BACKGROUND-COLOR: #F3F6FC; width:30px; text-align:left; cursor:pointer; 
}

.numericInput25 
{
	text-align:right; 
	width:25px;
}

.waterMark
{
	FONT-WEIGHT: normal;
	FONT-SIZE: 100%;
	COLOR: gray;
	FONT-FAMILY: Verdana, Arial, 'MS Sans Serif';
	font-style: italic;
}	

fieldset
{
    margin: 16px 0px;
    padding: 16px;
    border: 1px solid #ccc;
}

legend 
{
    font-size: 125%;
    font-weight: 600;
    padding: 2px 4px 8px 4px; 
}

.ImagePanel
{
	position:absolute;
	top:1px;
	z-index:3;
	left:50%;
	margin-left:-200px; 
	background-color:#E9E9E9; 
	border-width:1px; 
	border-color:Black; 
	padding:24px;
}

.OrderPanel
{
	width: 10%;
}

.form-fields
{
    FONT-SIZE: 100%;
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; 
}

.cursorDefault
{
	cursor: default;
}

.cursorGrab
{
	cursor: move;	
	cursor: grab;
	cursor: -moz-grab;
	cursor: -webkit-grab;
}

.cursorGrabbing 
{
	cursor: crosshair;
	cursor: grabbing;
	cursor: -moz-grabbing;
	cursor: -webkit-grabbing;
}

.highlightDrop
{ 
    border-style:solid;
    border-width:thin;
    border-color:green;
}

.turnOffDrop
{ 
    height:.01in;
}

.center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}