﻿/************************************************************************************************************
    gui: LOGIN
*************************************************************************************************************/   
#guiLogin_start
    {
        margin:15% auto;
    }

.guiLogin
    {
        width:336px;
        border:solid 1px #909091;
        background-color:#ffffff;
    }
    .guiLogin .Header
        {
        	background-image:url('images/guiLogin_logo.png');
        	background-position:left top;
        	background-repeat:no-repeat;
        	width:336px;
        	height:82px;
        }
    .guiLogin .Content
        {
            padding-bottom:24px;
        }
        .guiLogin .Content table
            {
                margin:0px auto;
            }
            
/************************************************************************************************************
    BOXES
*************************************************************************************************************/

		

/************************************************************************************************************
    COLUMNS
*************************************************************************************************************/		

.Columns
	{		
	}
	.Columns .Column-01
		{
			float:left;
			width:49%;
		}
	.Columns .Column-02
		{
			float:right;
			width:49%;
		}

/************************************************************************************************************
    GRID
*************************************************************************************************************/  
.GridHeader_Default:first-child
{
	background-position:left bottom !important;
}
.guiRadGrid
{
	margin-left:3px;
	*width:70%;
}
.guiGrid
	{
		color:#2d2d2d;
		width:100%;
		background-color: #fff;
	}	
	.guiGrid .guiGrid-Icon
		{
			display:block;
			height:16px;
			width:16px;
			background-repeat:no-repeat;
			background-position:0px -2px;
			margin-bottom:-3px;
			
		}	
	.guiGrid table /* need to declare table element style here if we use telerid radgrid, due to their table is wrapped in a div */	
		{
			border:solid 1px #94bdd9;
			border-collapse:collapse;
		}	
	.guiGrid th,		
	.guiGrid td
		{
			padding:0.3em;
			vertical-align:text-top;
		}		
	.guiGrid th
		{	
			font-weight: bold;	
			color: #464646;	
			text-align:left;
			height:22px;
			background-image:url('images/guiGrid/guiGrid_header_bg.png');
			background-repeat:repeat-x;
			background-position:left bottom;
			background-color:#ffffff;
			border:solid 1px #94bdd9;
		}
		.guiGrid th a
			{ 
				font: bold;	
				color: #464646;	
				text-align:left;				
			}			
	.guiGrid td
		{
				border-top:solid 1px Transparent;
		}
		.guiGrid tr:hover td
			{
				border-top:solid 1px #dfebf4;
				background-image:url('images/guiGrid/guiGrid_hover_bg_bottom.png');
				background-repeat:repeat-x;
				background-position:left bottom;
			}	    
	
	/* Grid buttons */
	.guiGrid .rgSortAsc,
	.guiGrid .rgSortDesc,
	.guiGrid .rgAdd,
	.guiGrid .rgRefresh
		{
			width:13px;
			height:12px;
			border:0px;
		}
	.guiGrid th a + .rgSortAsc
		{
			border: 0px;
			padding: 0px;
			vertical-align: top;
			background:url(images/guiGrid/SortAsc.gif) no-repeat 0px center;
		}
	.guiGrid th a + .rgSortDesc
		{
			border: 0px;
			padding: 0px;
			vertical-align: top;
			background:url(images/guiGrid/SortDesc.gif) no-repeat 0px center;
		}
	.guiGrid .rgAdd
		{
			width:16px;
			background:url(images/guiGrid/AddRecord.gif) no-repeat 0px center;
		}
	.guiGrid .rgRefresh
		{			
			width:9px;
			background:url(images/guiGrid/Refresh.gif) no-repeat 0px center;
		}

	/* Unfortunately RadGrid still uses nested tables when we use a command row */	
	.guiGrid .GridCommandRow_Default:hover > td /* We dont want the common hover effect on the grid command */
		{
			border-top:solid 1px #94bdd9;
			background-image:none;
		}
	
	.guiGrid .GridCommandRow_Default
		{
		}
		.guiGrid .GridCommandRow_Default a
			{
				font-weight:normal;
				color:#2d2d2d;
			}
		.guiGrid .GridCommandRow_Default > td
			{
				padding:5px;
				border-top:solid 1px #94bdd9;
			}
		.guiGrid .GridCommandRow_Default table
			{	
				height:22px;			
			}
			.guiGrid .GridCommandRow_Default table tr
				{
				}
			.guiGrid .GridCommandRow_Default table td
				{	
					font-weight: bold;	
					color: #464646;	
					text-align:left;
					background-image:url('images/guiGrid/guiGrid_header_bg.png');
					background-repeat:repeat-x;
					background-position:left bottom;
					background-color:#ffffff;	
					border:solid 1px #94bdd9;	
				}		
	
/* Wrap this container around .guiGrid when you need to style progress bar and misc ajax fluff and keep it all in one place.
Ex: 
<div class="guiGrid-Container">
	<asp:UpdateProgress></asp:UpdateProgress>
	<telerik:RadGrid CssClass="guiGrid"></telerik:RadGrid>
</div>
 */		
.guiGrid-Container
	{
		position:relative;
		padding-top:1em;
	}		
	.guiGrid-Container .guiGfx-ProgressBar
		{
			position:absolute;
			top:5em;
			left:45%;
		}	
		
